33

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

@@ -8,89 +8,90 @@
     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">
-          <div class="row">
-            <div class="col">
-              <div class="name">生产工单号</div>
-              <div class="content">{{ item.code }}</div>
-            </div>
-            <div class="col">
-              <div class="name">产品编码</div>
-              <div class="content">{{ item.productCode }}</div>
-            </div>
-            <div class="col">
-              <div class="name">产品名称</div>
-              <div class="content">{{ item.productName }}</div>
-            </div>
-            <div class="col">
-              <div class="name">批号</div>
-              <div class="content">{{ item.batchNo }}</div>
-            </div>
-            <div class="col pd6">
-              <el-button
-                type="primary"
-                size="mini"
-                @click="openPicking(item.id, item)"
-                >新增</el-button
-              >
-            </div>
+    <div v-for="(item, idx) in workList" :key="idx">
+      <div class="table_box">
+        <div class="row">
+          <div class="col">
+            <div class="name">生产工单号</div>
+            <div class="content">{{ item.code }}</div>
           </div>
-        </div>
-
-        <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
+          <div class="col">
+            <div class="name">产品编码</div>
+            <div class="content">{{ item.productCode }}</div>
+          </div>
+          <div class="col">
+            <div class="name">产品名称</div>
+            <div class="content">{{ item.productName }}</div>
+          </div>
+          <div class="col">
+            <div class="name">批号</div>
+            <div class="content">{{ item.batchNo }}</div>
+          </div>
+          <div class="col pd6">
+            <el-button
+              type="primary"
+              size="mini"
+              @click="openPicking(item.id, item)"
+              >新增</el-button
             >
-              <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>
       </div>
-    </el-form>
+
+      <div>
+        <el-form :ref="`tableRef${item.code}`" :model="{ pickList : item}" :rules="tableRules">
+          <el-table
+            ref="table"
+            :ref="`tableRef${item.code}`"
+            :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="`pickList[${$index}].demandQuantity`"    :rules="{
+                  required: true, message: '请选择押金支付方式', trigger: 'blur'
+                }">
+                  <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>
+
     <template slot="footer">
       <el-button size="mini" @click="handleClose">取 消</el-button>
       <el-button size="mini" type="primary" @click="save()">确 定</el-button>
@@ -123,16 +124,10 @@
     data() {
       return {
         visible: true,
-        formObj: {
-          workList: []
-        },
+        workList: [],
         rules: {},
 
-        tableRules: {
-          demandQuantity: [
-            { required: true, message: '请输入押金流水号', trigger: 'blur' }
-          ]
-        }
+        tableRules: {}
       };
     },
     computed: {
@@ -149,7 +144,7 @@
           taskId: this.taskObj.id
         };
         workorderList(param).then((res) => {
-          this.formObj.workList = res;
+          this.workList = res;
 
           this.$forceUpdate();
         });
@@ -163,7 +158,7 @@
       },
 
       allSelection(id, list) {
-        this.formObj.workList.forEach((e) => {
+        this.workList.forEach((e) => {
           if (e.id == id) {
             e.pickList = list;
             this.$forceUpdate();
@@ -172,16 +167,16 @@
       },
 
       save() {
-        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;
-            }
-          });
-        }
+        let promises = this.workList.map((item) => {
+    
+          return this.$refs[`tableRef${item.code}`][0].validate();
+        });
+        Promise.all(promises).then((results) => {
+          if (results.every((valid) => valid)) {
+            alert('submit1');
+            // 执行提交操作
+          }
+        });
       }
     },
 
@@ -204,6 +199,7 @@
       width: 100%;
       display: flex;
     }
+
     .col {
       width: calc(100% / 5);
       display: flex;
@@ -216,6 +212,7 @@
       &:last-child {
         border-right: none;
       }
+
       .name {
         display: flex;
         align-items: center;
@@ -237,3 +234,9 @@
     }
   }
 </style>
+
+<style>
+  :v-deep .el-form-item__error {
+    bottom: -6px !important;
+  }
+</style>