优化

src/views/produce/components/picking/index.vue

@@ -8,8 +8,6 @@
     append-to-body
     width="80%"
   >
-
-
     <el-form ref="formRef" :model="formObj" :rules="rules">
       <div v-for="(item, idx) in formObj.workList" :key="idx">
         <div class="table_box">
@@ -41,63 +39,61 @@
           </div>
         </div>
 
-        <el-table
-          ref="table"
-          :key="'table' + idx"
-          :max-height="300"
-          :data="item.pickList"
-          tooltip-effect="dark"
-          style="width: 100%"
-          stripe
-        >
-          <el-table-column label="序号" type="index" width="50">
-          </el-table-column>
-
-          <el-table-column label="编码" prop="assetCode">
-            <template slot-scope="{ row, $index }">
-              {{ row.rootCategoryLevelId == 4 ? row.codeNumber : row.code }}
-            </template>
-          </el-table-column>
-
-          <el-table-column label="名称" prop="name"> </el-table-column>
-          <el-table-column label="型号" prop="modelType"> </el-table-column>
-          <el-table-column label="规格" prop="specification"> </el-table-column>
-          <el-table-column label="批次号" prop="batchNo"> </el-table-column>
-
-          <el-table-column label="数量" prop="demandQuantity">
-            <template slot-scope="{ row, $index }">
-              <el-form-item :prop="`formObj.${$index}.demandQuantity`">
-                <el-input
-                  :ref="'formObj' + idx + $index"
-                  v-model="row.demandQuantity"
-                  size="mini"
-                  :rules="[
-                    { required: true, message: '请输入数量', trigger: 'blur' }
-                  ]"
-                >
-                  <template slot="append">{{ row.unit }}</template>
-                </el-input>
-              </el-form-item>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="领料仓库" prop="warehouseId">
-            <template slot-scope="{ row, $index }">
-              <div v-if="row.warehouseList">
-                <el-select></el-select>
-              </div>
-
-              <div v-else>
-                {{ row.pathName }}
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
+        <div>
+          <el-form ref="tableRef" :model="item" :rules="tableRules">
+            <el-table
+              ref="table"
+              :key="'table' + idx"
+              :max-height="300"
+              :data="item.pickList"
+              tooltip-effect="dark"
+              style="width: 100%"
+              stripe
+            >
+              <el-table-column label="序号" type="index" width="50">
+              </el-table-column>
+
+              <el-table-column label="编码" prop="assetCode">
+                <template slot-scope="{ row, $index }">
+                  {{ row.rootCategoryLevelId == 4 ? row.codeNumber : row.code }}
+                </template>
+              </el-table-column>
+
+              <el-table-column label="名称" prop="name"> </el-table-column>
+              <el-table-column label="型号" prop="modelType"> </el-table-column>
+              <el-table-column label="规格" prop="specification">
+              </el-table-column>
+              <el-table-column label="批次号" prop="batchNo"> </el-table-column>
+
+              <el-table-column label="数量" prop="demandQuantity">
+                <template slot-scope="{ row, $index }">
+                  <el-form-item prop="demandQuantity">
+                    <el-input v-model="row.demandQuantity" size="mini">
+                      <template slot="append">{{ row.unit }}</template>
+                    </el-input>
+                  </el-form-item>
+                </template>
+              </el-table-column>
+
+              <el-table-column label="领料仓库" prop="warehouseId">
+                <template slot-scope="{ row, $index }">
+                  <div v-if="row.warehouseList">
+                    <el-select></el-select>
+                  </div>
+
+                  <div v-else>
+                    {{ row.pathName }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form>
+        </div>
       </div>
     </el-form>
     <template slot="footer">
       <el-button size="mini" @click="handleClose">取 消</el-button>
-      <el-button size="mini" type="primary" @click="save">确 定</el-button>
+      <el-button size="mini" type="primary" @click="save()">确 定</el-button>
     </template>
 
     <pickingList
@@ -127,12 +123,19 @@
     data() {
       return {
         visible: true,
-        formObj: {},
-        rules: {}
+        formObj: {
+          workList: []
+        },
+        rules: {},
+
+        tableRules: {
+          demandQuantity: [
+            { required: true, message: '请输入押金流水号', trigger: 'blur' }
+          ]
+        }
       };
     },
     computed: {
-
       taskObj() {
         return this.$store.state.user.taskObj;
       }
@@ -143,11 +146,10 @@
       getList() {
         let param = {
           ids: this.workListIds,
-          taskId:  this.taskObj.id,
-        
+          taskId: this.taskObj.id
         };
         workorderList(param).then((res) => {
-          this.formObj.workList = res
+          this.formObj.workList = res;
 
           this.$forceUpdate();
         });
@@ -170,15 +172,16 @@
       },
 
       save() {
-        console.log(this.$refs.formRef);
-        this.$refs.formRef.validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+        let len = this.$refs.tableRef;
+        for (let i = 0; i < len.length; i++) {
+          this.$refs.tableRef[i].validate((valid) => {
+            if (valid) {
+              alert('submit1');
+            } else {
+              return false;
+            }
+          });
+        }
       }
     },