refactor(programRulesDialog): 优化表单字段和条件渲染逻辑

src/views/rulesManagement/components/programRulesDialog.vue

@@ -36,15 +36,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="8" v-if="!dialogTitle.includes('量具送检')">
-          <el-form-item label="类型" prop="autoOrder">
-            <el-select v-model="addForm.executeUserType" :disabled="isBindPlan" size="small" @change="typeChange" style="width: 100%">
+          <el-form-item label="类型" prop="type">
+            <el-select v-model="addForm.type" :disabled="isBindPlan" size="small" @change="typeChange" style="width: 100%">
               <el-option :value="1" label="班组"></el-option>
               <el-option :value="0" label="个人"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
 
-        <el-col :span="8" v-if="((addForm.autoOrder && (modelType == 'add' || modelType == 'edit')) || (!addForm.autoOrder && modelType == 'dispatch')) && addForm.executeUserType == 1 && !dialogTitle.includes('量具送检')">
+        <el-col :span="8" v-if="dispatchType && addForm.type == 1 && !dialogTitle.includes('量具送检')">
           <el-form-item label="班组" prop="teamId">
             <el-select
               v-model="addForm.teamId"
@@ -63,14 +63,12 @@
           </el-form-item>
         </el-col>
 
-        <el-col :span="8" v-if="((addForm.autoOrder && (modelType == 'add' || modelType == 'edit')) || (!addForm.autoOrder && modelType == 'dispatch')) && addForm.executeUserType == 0 && !dialogTitle.includes('量具送检')">
+        <el-col :span="8" v-if="dispatchType && addForm.type == 0 && !dialogTitle.includes('量具送检')">
           <el-form-item label="部门" prop="groupId">
             <deptSelect v-model="addForm.groupId" @changeGroup="searchDeptNodeClick" :disabled="isBindPlan" />
           </el-form-item>
         </el-col>
-        <el-col :span="8" v-if="
-          ((addForm.autoOrder && (modelType == 'add' || modelType == 'edit')) || (!addForm.autoOrder && modelType == 'dispatch')) && addForm.executeUserType == 0 &&
-          !dialogTitle.includes('量具送检')
+        <el-col :span="8" v-if="dispatchType && addForm.type == 0 && !dialogTitle.includes('量具送检')
         ">
           <!-- <el-form-item label="负责人" prop="executeIdList">
             <el-select v-model="addForm.executeIdList" size="small" style="width: 100%" :disabled="isBindPlan" multiple
@@ -346,7 +344,6 @@ export default {
       brandNum: '',
       specification: '',
       measuringUnit: '',
-
       bomList: []
     };
     return {
@@ -364,7 +361,7 @@ export default {
       addForm: {
         code: '', // 计划配置单号
         name: '', // 计划配置名称
-        executeUserType: 0, // 默认个人
+        type: 0, // 默认个人
         autoOrder: 1, // 自动派单
         ruleId: '', // 规则id
         ruleName: '', // 规则名称
@@ -376,7 +373,9 @@ export default {
         executorPhone: '',
         status: 1, // 状态
         remark: '', // 备注
-        urgent: '1'
+        urgent: '1',
+        teamId: '', // 班组id
+        executeUsers: [], // 执行人
       },
       ruleNameList: [], // 规则列表
       uerList: [], // 审核人列表
@@ -421,7 +420,7 @@ export default {
         urgent: [
           { required: true, message: '请选择紧急程度', trigger: 'change' }
         ],
-        executeUserType: [
+        type: [
           { required: true, message: '请选择', trigger: 'change' }
         ],
       },
@@ -523,6 +522,9 @@ export default {
     // 是否开启响应式布局
     styleResponsive() {
       return this.$store.state.theme.styleResponsive;
+    },
+    dispatchType() {
+      return ((this.addForm.autoOrder && (this.modelType == 'add' || this.modelType == 'edit')) || (!this.addForm.autoOrder && this.modelType == 'dispatch'))
     }
   },
   watch: {
@@ -562,7 +564,7 @@ export default {
           code: '', // 计划配置单号
           name: '', // 计划配置名称
           autoOrder: 1, // 自动派单
-          executeUserType: 0, // 默认个人
+          type: 0, // 默认个人
           ruleId: '', // 规则id
           ruleName: '', // 规则名称
           duration: null, // 计划完成时长
@@ -573,7 +575,9 @@ export default {
           executorPhone: '',
           status: 1, // 状态
           remark: '', // 备注
-          urgent: '1'
+          urgent: '1',
+          teamId: '', // 班组id
+          executeUsers: [], // 执行人
         };
         this.ruleIdList = [];
         this.isBindPlan = false;
@@ -605,9 +609,20 @@ export default {
         ];
       }
     },
-    typeChange() {
-      this.addForm.groupId = '';
-      this.addForm.executeIdList = [];
+    typeChange(v) {
+      console.log('typeChange', v, this.addForm.executeIdList);
+      // this.addForm.groupId = '';
+      // this.addForm.executeIdList = [];
+      // this.addForm.teamId = '';
+      // this.addForm.executeUsers = [];
+      this.$set(this.addForm, 'executeUsers', []);
+      if(v == 0) {
+        this.$set(this.addForm, 'groupId', '');
+        this.$set(this.addForm, 'executeIdList', []);
+      } else {
+        this.$set(this.addForm, 'teamId', '');
+      }
+      this.$forceUpdate();
     },
     ruleChange(item) {
       this.ruleObj.name = item.name;
@@ -747,7 +762,8 @@ export default {
       try {
         const res = await getInfoById(id);
         console.log('res----------', res);
-        this.addForm = res;
+        // this.addForm = res;
+        this.$set(this, 'addForm', res)
         this.isBindPlan = res.isBindPlan;
         this.categoryEquipment(res.categoryLevelId);
         this.ruleIdList = res.planConfigVOList.map((item) => {
@@ -774,7 +790,7 @@ export default {
         });
 
         // 处理回显数据
-        if (this.addForm.executeUserType === 0) {
+        if (this.addForm.type === 0) {
           // 个人
           this.addForm.executeIdList = this.addForm.executeUsers.map(
             (item) => item.userId
@@ -789,15 +805,22 @@ export default {
             // 包含全部部门，置空
             this.addForm.groupId = '1';
           } else {
-            this.addForm.groupId = this.addForm.executeUsers[0]?.groupId || '1';
+            this.addForm.groupId = this.addForm.executeUsers?.[0]?.groupId || '1';
           }
 
+          // this.addForm.teamId = ''
+          this.$set(this.addForm, 'teamId', '');
+
           groupIds.map((item) => {
             this.searchDeptNodeClick(item);
           });
         } else {
           // 班组
-          this.addForm.teamId = this.addForm.executeUsers[0]?.teamId || '';
+          this.addForm.teamId = this.addForm.executeUsers?.[0]?.teamId || '';
+          this.$set(this.addForm, 'groupId', '');
+          this.$set(this.addForm, 'executeIdList', []);
+          // this.addForm.groupId = ''
+          // this.addForm.executeIdList = []
         }
         this.tabsValue = this.ruleIdList[0].ruleId;
         if (res.groupId) {
@@ -806,10 +829,10 @@ export default {
         }
         // this._getMatterRulesDetails(res.ruleId);
         this.$set(this.addForm, 'code', res.code);
-        this.$set(this.addForm, 'urgent', res.urgent+'');
+        this.$set(this.addForm, 'urgent', JSON.stringify(res.urgent));
         // this.$set(this.addForm, 'executeIdList', res.executeId.split(','));
         this.$set(this.addForm, 'imageUrl', {});
-        console.log(this.rootData);
+        // console.log(this.rootData);
         const rep = await getTreeByType(0);
         console.log('sasas', res);
         const ids = this.findTopLevelAncestorId(
@@ -871,12 +894,13 @@ export default {
     },
     //选择部门(搜索)
     async searchDeptNodeClick(info, data) {
+      console.log('searchDeptNodeClick', info, data);
       if (info) {
         // 根据部门获取人员
-        this.addForm.groupName = data.name;
+        // this.addForm.groupName = data.name;
         const params = { groupId: info };
         await this.getUserList(params);
-        // if (this.addForm.executeUserType == 1) {
+        // if (this.addForm.type == 1) {
         //   this.addForm.executeIdList = this.executorList.map(
         //     (item) => item.id
         //   );
@@ -886,19 +910,20 @@ export default {
       }
     },
     // 负责人变更 同步执行人列表
-      executeIdListChange() {
-        this.addForm.executeUsers = this.addForm.executeIdList.map((userId) => {
-          const user = this.executorList.find((u) => u.id === userId);
-          return {
-            userId: user.id,
-            userName: user.name,
+    executeIdListChange(v) {
+      console.log('executeIdListChange', v);
+      this.addForm.executeUsers = this.addForm.executeIdList.map((userId) => {
+        const user = this.executorList.find((u) => u.id === userId);
+        return {
+          userId: user.id,
+          userName: user.name,
 
-            groupId: user.groupId,
-            groupName: user.groupName
-          };
-        });
-        console.log('this.addForm.executeUsers', this.addForm.executeUsers);
-      },
+          groupId: user.groupId,
+          groupName: user.groupName
+        };
+      });
+      console.log('this.addForm.executeUsers', this.addForm.executeUsers);
+    },
     // 过滤计划完成时长
     formDataDurationTime(value) {
       if (value > 0) {