|
|
@@ -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>
|