表单组件优化

zkqy-ui/src/views/bussiness/dialogCompments/GY2.vue

@@ -1,19 +1,19 @@
 <template>
-    <div class="form">
-        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-            <el-form-item label="产品重量" prop="weight">
-              <el-input v-model.number="ruleForm.weight" @input="handleInput"></el-input>
+    <div class="app-container">
+        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
+            <el-form-item label="产品重量" prop="zl">
+              <el-input v-model.number="form.zl" @input="handleInput"></el-input>
             </el-form-item>
-            <el-form-item label="选择产品" prop="produce">
-              <el-select v-model="ruleForm.produce" placeholder="请选择产品">
+            <el-form-item label="选择产品" prop="cp">
+              <el-select v-model="form.cp" placeholder="请选择产品">
                 <el-option label="产品1" value="chanpin1"></el-option>
                 <el-option label="产品2" value="chanpin2"></el-option>
                 <el-option label="产品3" value="chanpin3"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
-                <el-button @click="resetForm('ruleForm')">重置</el-button>
+                <el-button type="primary" @click="submitForm('form')">提交</el-button>
+                <el-button @click="resetForm('form')">重置</el-button>
               </el-form-item>
         </el-form>
 
@@ -26,16 +26,16 @@ export default {
   components: {},
   data() {
     return {
-        ruleForm: {
-            weight: '',
-            produce:''
+        form: {
+            zl: '',
+            cp:''
         },
         rules: {
-            weight: [
+            zl: [
                 { required: true, message: '请输入产品重量', trigger: 'blur' },
                 { type: 'number', message: '重量必须为数字值',trigger: 'blur' }
             ],
-            produce: [
+            cp: [
                 { required: true, message: '请选择产品', trigger: 'change' },
             ]
         }
@@ -56,7 +56,7 @@ export default {
         this.$refs[formName].resetFields();
       },
       handleInput() {
-        if (!/^[1-9]\d*$/.test(this.ruleForm.weight)) {
+        if (!/^[1-9]\d*$/.test(this.form.zl)) {
             this.$message.error('请输入正整数！');
         }
       },
@@ -86,7 +86,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.form {
+.app-container {
   margin-top: 20px;
   .el-input__inner {
     width: 20px;

zkqy-ui/src/views/bussiness/dialogCompments/GongYi/GY02.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="add-table">
+  <div class="app-container">
     <div class="leftMessage">
       <div class="list" v-for="(item, index) in baseMessage" :key="index">
         <span class="titile" style="background:rgb(52,191,163); color:white;"> {{ item.title}} </span>
@@ -127,7 +127,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.add-table {
+.app-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;

zkqy-ui/src/views/bussiness/dialogCompments/ZhiLiang/ZL1.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="record-card">
+    <div class="app-container">
         <div class="fixture">
             <div class="title">
                 <i class="el-icon-c-scale-to-original"></i>

zkqy-ui/src/views/bussiness/dialogCompments/test-component/CaiGou/CG02.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="app-container">
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="原材料" prop="ycl">
               <el-select
@@ -22,7 +22,7 @@
             </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="submitHanfler">确 定</el-button>
+            <el-button type="primary" @click="submitForm">确 定</el-button>
         </div>
     </div>
 </template>
@@ -47,7 +47,7 @@ export default {
         };
     },
     watch: {
-        myFormData: {
+        formData: {
             handler(nval) {
                 this.realFormData = nval;
             },
@@ -61,7 +61,7 @@ export default {
     },
 
     methods: {
-        async submitHanfler() {
+        async submitForm() {
         let res = await this.$refs.form?.validate();
         if (res) {
             let payLoad = {};