有执行方式-按照不同执行方式展示

src/views/produce/components/prenatalExamination/releaseRulesDialog.vue

@@ -180,7 +180,10 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="结论" required prop="conclution">
-            <el-radio-group v-model="addForm.conclution">
+            <el-radio-group
+              v-model="addForm.conclution"
+              @change="conclutionChange"
+            >
               <el-radio :label="1">合格</el-radio>
               <el-radio :label="2">不合格</el-radio>
             </el-radio-group>
@@ -248,107 +251,106 @@
       </template>
     </ele-pro-table>
 
-    <header-title title="检查项目"></header-title>
-
-    <!-- 表格 -->
-    <el-table v-loading="loading" :data="addForm.details" style="width: 100%">
-      <el-table-column type="index" label="序号" width="50"> </el-table-column>
-      <el-table-column label="检查内容">
-        <template slot-scope="scope">
-          <div v-if="addForm.recordRulesClassify == 4">
-            {{ scope.row.productName || scope.row.name }}
-          </div>
-          <div v-else>
-            {{ scope.row.paramValue }}
-          </div>
-        </template>
-      </el-table-column>
+    <header-title
+      title="检查项目"
+      :style="`margin-top: ${addForm.reportWorkType == '2' ? '20px' : '0px'}`"
+    ></header-title>
 
-      <el-table-column
-        v-if="addForm.recordRulesClassify != '4'"
-        label="检查工具"
+    <el-tabs
+      v-if="executeMethodTitleList.length"
+      v-model="activeExecuteMethodTitle"
+      type="card"
+    >
+      <el-tab-pane
+        v-for="i in executeMethodTitleList"
+        :label="i"
+        :name="i"
+        :key="i"
       >
-        <template slot-scope="{ row }">
-          <el-link :underline="false" style="cursor: pointer">
-            <div class="ele-cell">
-              <div @click="handleAdd(row)">
-                {{ row.toolNames ? row.toolNames : '请选择' }}
-              </div>
-              <i
-                v-if="!row.toolNames"
-                class="el-icon-arrow-down"
-                @click="handleAdd(row)"
-              ></i>
-              <i v-else class="el-icon-close" @click="clearTool(row)"></i>
-            </div>
-          </el-link>
-        </template>
-      </el-table-column>
+      </el-tab-pane>
+    </el-tabs>
 
-      <el-table-column v-if="addForm.recordRulesClassify != '4'" label="检查人">
-        <template slot-scope="scope">
-          <div>
-            <el-select
-              v-model="scope.row.checkUsersIds"
-              placeholder="请选择检查人"
-              filterable
-              multiple
-              @change="checkUsersIdsChange(scope.row)"
-            >
-              <el-option
-                v-for="item in activeTeamUserList"
-                :label="item.name"
-                :value="item.id"
-                :key="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="addForm.recordRulesClassify != '4'"
-        label="检查情况"
-      >
-        <template slot-scope="scope">
-          <div>
-            <el-radio-group v-model="scope.row.checkStatus">
-              <el-radio :label="1">已检查</el-radio>
-              <el-radio :label="0">未检查</el-radio>
-            </el-radio-group>
+    <ele-pro-table
+      v-loading="loading"
+      ref="table"
+      row-key="id"
+      :columns="detailsColumns"
+      :datasource="rulesDetails"
+      cacheKey="mes-releaseRulesDialong-2510281408"
+    >
+      <template v-slot:paramValue="{ row }">
+        <div v-if="addForm.recordRulesClassify == 4">
+          {{ row.productName || row.name }}
+        </div>
+        <div v-else>
+          {{ row.paramValue }}
+        </div>
+      </template>
+      <template v-slot:toolNames="{ row }">
+        <el-link :underline="false" style="cursor: pointer">
+          <div class="ele-cell">
+            <div @click="handleAdd(row)">
+              {{ row.toolNames ? row.toolNames : '请选择' }}
+            </div>
+            <i
+              v-if="!row.toolNames"
+              class="el-icon-arrow-down"
+              @click="handleAdd(row)"
+            ></i>
+            <i v-else class="el-icon-close" @click="clearTool(row)"></i>
           </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="描述">
-        <template slot-scope="scope">
-          <div>
-            <el-input
-              type="text"
-              :rows="1"
-              placeholder="请输入"
-              v-model="scope.row.errorMsg"
+        </el-link>
+      </template>
+      <template v-slot:checkUsersIds="{ row }">
+        <div>
+          <el-select
+            v-model="row.checkUsersIds"
+            placeholder="请选择检查人"
+            filterable
+            multiple
+            @change="checkUsersIdsChange(row)"
+          >
+            <el-option
+              v-for="item in activeTeamUserList"
+              :label="item.name"
+              :value="item.id"
+              :key="item.id"
             >
-              <template v-if="scope.row.unitName" slot="append">
-                <div>{{ scope.row.unitName }}</div>
-              </template>
-            </el-input>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="addForm.recordRulesClassify != '4'"
-        label="检查结果"
+            </el-option>
+          </el-select>
+        </div>
+      </template>
+      <template v-slot:checkStatus="{ row }">
+        <div>
+          <el-radio-group v-model="row.checkStatus">
+            <el-radio :label="1">已检查</el-radio>
+            <el-radio :label="0">未检查</el-radio>
+          </el-radio-group>
+        </div>
+      </template>
+      <template v-slot:errorMsg="{ row }">
+        <div>
+          <el-input
+            type="text"
+            :rows="1"
+            placeholder="请输入"
+            v-model="row.errorMsg"
+          >
+            <template v-if="row.unitName" slot="append">
+              <div>{{ row.unitName }}</div>
+            </template>
+          </el-input>
+        </div></template
       >
-        <template slot-scope="scope">
-          <div>
-            <el-radio-group v-model="scope.row.checkResult">
-              <el-radio :label="1">合格</el-radio>
-              <el-radio :label="0">不合格</el-radio>
-            </el-radio-group>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+      <template v-slot:checkResult="{ row }">
+        <div>
+          <el-radio-group v-model="row.checkResult">
+            <el-radio :label="1">合格</el-radio>
+            <el-radio :label="0">不合格</el-radio>
+          </el-radio-group>
+        </div>
+      </template>
+    </ele-pro-table>
 
     <!-- 底部按钮 -->
     <template #footer>
@@ -598,7 +600,6 @@
             prop: 'batchNo',
             minWidth: 120
           },
-
           {
             label: '领料类型',
             prop: 'categoryLevelNamePath',
@@ -704,7 +705,9 @@
               return (row.sumNoQualifiedQuantity || 0) + (row.feedUnit || '');
             }
           }
-        ]
+        ],
+        activeExecuteMethodTitle: '',
+        executeMethodTitleList: []
       };
     },
     computed: {
@@ -726,6 +729,75 @@
         return this.teamUserList.filter((user) =>
           this.addForm.executeUsersIds.includes(user.id)
         );
+      },
+      // 规则详情表头
+      detailsColumns() {
+        let list = [
+          {
+            width: 45,
+            type: 'index',
+            columnKey: 'index',
+            align: 'center'
+          },
+          {
+            label: '检查内容',
+            prop: 'paramValue',
+            minWidth: 120,
+            slot: 'paramValue'
+          }
+        ];
+
+        if (this.addForm.recordRulesClassify != '4') {
+          list = [
+            ...list,
+            {
+              lbel: '检查工具',
+              prop: 'toolNames',
+              minWidth: 120,
+              slot: 'toolNames'
+            },
+            {
+              lbel: '检查人',
+              prop: 'checkUsersIds',
+              minWidth: 120,
+              slot: 'checkUsersIds'
+            },
+            {
+              lbel: '检查情况',
+              prop: 'checkStatus',
+              minWidth: 120,
+              slot: 'checkStatus'
+            },
+            {
+              lbel: '描述',
+              prop: 'errorMsg',
+              minWidth: 120,
+              slot: 'errorMsg'
+            },
+            {
+              lbel: '检查结果',
+              prop: 'checkResult',
+              minWidth: 120,
+              slot: 'checkResult'
+            }
+          ];
+        } else {
+          list.push({
+            lbel: '描述',
+            prop: 'errorMsg',
+            minWidth: 120,
+            slot: 'errorMsg'
+          });
+        }
+        return list;
+      },
+      rulesDetails() {
+        if (this.executeMethodTitleList.length) {
+          return this.addForm.details.filter(
+            (item) => item.executeMethodTitle == this.activeExecuteMethodTitle
+          );
+        }
+        return this.addForm.details;
       }
     },
     mounted() {
@@ -809,6 +881,16 @@
           this.addForm.recordRulesClassify += '';
           if (this.addForm.details?.length == 0) {
             this.getRuleList();
+          } else {
+            // 分组
+            let executeMethodTitleList = this.addForm.details
+              .map((i) => i.executeMethodTitle)
+              .filter((i) => i);
+
+            this.executeMethodTitleList = [...new Set(executeMethodTitleList)];
+
+            this.activeExecuteMethodTitle =
+              this.executeMethodTitleList[0] || '';
           }
 
           this.addForm.executeUsersIds = this.addForm.executeUsers.map(
@@ -884,11 +966,21 @@
             toolNames: i.tools.map((i) => i.toolName).join(',')
           };
         });
+        let executeMethodTitleList = this.addForm.details
+          .map((i) => i.executeMethodTitle)
+          .filter((i) => i);
+
+        this.executeMethodTitleList = [...new Set(executeMethodTitleList)];
+
+        this.activeExecuteMethodTitle = this.executeMethodTitleList[0] || '';
+
         console.log('this.addForm 添加规则', this.addForm, list);
       },
       handleBeforeClose() {
         this.addForm = JSON.parse(JSON.stringify(this.formDate));
         console.log('this.$refs.ruleFormRef', this.addForm);
+        this.activeExecuteMethodTitle = '';
+        this.executeMethodTitleList = [];
         this.$nextTick(() => {
           this.$refs.ruleFormRef.clearValidate();
           this.visible = false;
@@ -1180,6 +1272,17 @@
       },
       noQualifiedQuantityMax(row) {
         return row.reportQuantity - row.qualifiedQuantity;
+      },
+      // 结论修改-同步
+      conclutionChange() {
+        this.addForm.details = this.addForm.details.map((i) => {
+          if (!i.checkStatus) {
+            i.checkStatus = 1;
+          }
+          i.checkResult = this.addForm.conclution == 1 ? 1 : 0;
+
+          return i;
+        });
       }
     }
   };