Explorar o código

feat(工厂管理): 所属公司只列公司节点并联动负责人部门

1. 所属公司下拉只显示机构树一级节点(公司),不再混入部门;2. 负责人部门候选改为所选公司下的部门子树,公司节点置灰禁选以兼容旧数据回显;3. 切换公司后若负责人部门不在新公司子树内则清空部门与负责人;4. 弹窗宽度 1000px 调整到 1200px 并重排字段,下拉面板加最小宽度避免公司名截断。
lihaiting hai 4 días
pai
achega
6abe7f18b2
Modificáronse 1 ficheiros con 69 adicións e 15 borrados
  1. 69 15
      src/views/factoryModel/factoryManagement/components/edit.vue

+ 69 - 15
src/views/factoryModel/factoryManagement/components/edit.vue

@@ -7,7 +7,7 @@
     :before-close="handleClose"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
-    width="1000px"
+    width="1200px"
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-row>
@@ -32,19 +32,6 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-          <el-form-item label="所属公司:" prop="groupId">
-            <ele-tree-select
-              clearable
-              :data="options.groupId"
-              v-model="form.groupId"
-              valueKey="id"
-              labelKey="name"
-              placeholder="请选择"
-              default-expand-all
-            />
-          </el-form-item>
-        </el-col>
         <el-col :span="8">
           <el-form-item label="状态:" prop="enabled">
             <div class="location-warp">
@@ -65,12 +52,26 @@
             </div>
           </el-form-item>
         </el-col>
+        <el-col :span="8">
+          <el-form-item label="所属公司:" prop="groupId">
+            <ele-tree-select
+              clearable
+              :data="companyList"
+              v-model="form.groupId"
+              valueKey="id"
+              labelKey="name"
+              placeholder="请选择"
+              @change="change_groupId"
+              popper-class="company-select-popper"
+            />
+          </el-form-item>
+        </el-col>
         <!-- options_groupId -->
         <el-col :span="8">
           <el-form-item label="负责人部门:" prop="extInfo.principalDep">
             <ele-tree-select
               clearable
-              :data="options.groupId"
+              :data="principalDepOptions"
               v-model="form.extInfo.principalDep"
               valueKey="id"
               labelKey="name"
@@ -234,6 +235,27 @@
           default:
             break;
         }
+      },
+      // 所属公司候选:机构树一级节点(公司),只列公司不列部门
+      companyList() {
+        return (this.options.groupId || []).map((node) => {
+          const { children, ...rest } = node;
+          return rest;
+        });
+      },
+      // 负责人部门候选:公司节点(置灰禁选,便于旧数据回显)+ 其下部门子树
+      principalDepOptions() {
+        const node = this.findOrgNode(this.options.groupId, this.form.groupId);
+        if (!node) return [];
+        const markDisabled = (nodes) =>
+          (nodes || []).map(({ children, ...rest }) => ({
+            ...rest,
+            disabled: rest.id == this.form.groupId,
+            children: children ? markDisabled(children) : undefined
+          }));
+        return [
+          { ...node, disabled: true, children: markDisabled(node.children) }
+        ];
       }
     },
     created() {
@@ -325,6 +347,26 @@
           });
         });
       },
+      /* 在机构树中按 id 查找节点 */
+      findOrgNode(nodes, id) {
+        for (const node of nodes || []) {
+          if (node.id == id) return node;
+          if (node.children) {
+            const found = this.findOrgNode(node.children, id);
+            if (found) return found;
+          }
+        }
+        return null;
+      },
+      // 所属公司变更后,负责人部门不在新公司子树内则清空(连带负责人)
+      change_groupId() {
+        const dep = this.form.extInfo.principalDep;
+        if (dep && !this.findOrgNode(this.principalDepOptions, dep)) {
+          this.form.extInfo.principalDep = '';
+          this.form.leaderId = '';
+          this.options.leaderId = [];
+        }
+      },
       // 选择负责人部门
       change_principalDep() {
         this.form.leaderId = '';
@@ -363,3 +405,15 @@
     margin-bottom: 22px;
   }
 </style>
+
+<!-- 下拉面板挂在 body 下,需用全局样式;加最小宽度保证公司名称显示完整 -->
+<style lang="scss">
+  .company-select-popper {
+    min-width: 320px !important;
+
+    .el-tree-node__label,
+    .el-select-dropdown__item {
+      white-space: nowrap;
+    }
+  }
+</style>