refactor(organization): 将所属组织搜索组件统一替换为级联选择器

- 全站搜索栏所属组织由树形下拉 (el-tree-select) 统一替换为级联选择器 (el-cascader)
- 修改多个视图和组件中所属组织相关表单与搜索逻辑,适配级联选择器数据结构
- 组织数据结构调整及新增 findOrgPath、findDeptPath 等方法支持路径反查与回显
- 表单模型与搜索参数中所属组织字段改用 ID 路径数组,提交时转换为名称
- 优化所属组织搜索UI,统一清除、过滤、提示等功能样式和行为
- 引入 organization-search mixin 支持组织数据加载、路径转换及搜索参数格式化
- 更新相关依赖组件 Element Plus 引入 ElCascader 替换 ElTreeSelect
- 修正搜索表单CSS,新增el-cascader全宽样式支持搜索栏布局一致性
- 兼容老数据,支持多种部门ID格式自动转换到单选路径数组格式
- 业务部门与承办部门表单同样应用级联选择器及路径转换逻辑
- 相关搜索配置项所属组织字段类型由 input 改为 cascader,提升搜索交互体验
This commit is contained in:
2026-08-31 12:19:18 +08:00
parent 3a08e12c65
commit 9b9e652afd
26 changed files with 515 additions and 192 deletions
+51 -19
View File
@@ -216,18 +216,14 @@
</div>
</el-form-item>
<el-form-item label="所属组织" prop="organizationName">
<el-tree-select
v-model="selectedOrganizationId"
:data="organizationOptions"
:props="organizationTreeSelectProps"
node-key="id"
<el-cascader
v-model="organizationCascaderValue"
:options="organizationOptions"
:props="organizationCascaderProps"
placeholder="请选择"
check-strictly
clearable
filterable
:render-after-expand="false"
@visible-change="visible => visible && loadOrganizationOptions()"
@change="handleOrganizationChange"
/>
</el-form-item>
<el-form-item label="经办人">
@@ -794,7 +790,7 @@ import { getToken } from '@/utils/auth';
import { downloadFileByUrl, downloadXls } from '@/utils/util';
import BillingPlanEditor from './components/billing-plan-editor.vue';
import PdfPreview from '@/components/pdf-preview/main.vue';
import { ElImageViewer, ElTreeSelect } from 'element-plus';
import { ElImageViewer, ElCascader } from 'element-plus';
import { OpenFileViewer } from '@open-file-viewer/vue';
import { fallbackPlugin, imagePlugin, officePlugin, textPlugin } from '@open-file-viewer/core';
import '@open-file-viewer/core/style.css';
@@ -1230,13 +1226,32 @@ export default {
contractFormatOptions() {
return this.columnOptions('contractFormat');
},
organizationTreeSelectProps() {
organizationCascaderProps() {
return {
label: 'label',
value: 'id',
children: 'children',
emitPath: true,
checkStrictly: true,
expandTrigger: 'click',
};
},
// 所属组织级联:selectedOrganizationId 存部门 id,级联控件用根到节点的 id 路径,
// 两者在此双向转换;依赖 organizationOptions,树加载完成后回显自动刷新
organizationCascaderValue: {
get() {
const id = this.selectedOrganizationId || this.form.organizationId;
if (!id) return [];
return this.findOrganizationPath(id) || [String(id)];
},
set(path) {
const value = Array.isArray(path)
? path.filter(item => item !== undefined && item !== null && item !== '')
: [];
this.selectedOrganizationId = value.length ? String(value.at(-1)) : '';
this.handleOrganizationChange(value);
},
},
settlementRuleEnabled() {
return Number(this.settlementRuleForm.autoGenerate) === 1;
},
@@ -1728,6 +1743,18 @@ export default {
const value = Array.isArray(id) ? id.at(-1) : id;
return this.organizationFlatOptions.find(item => String(item.id) === String(value));
},
// 由部门 id 反查「根 → 该节点」的 id 路径,供级联回显(找不到返回 null)
findOrganizationPath(id, tree = this.organizationOptions, parents = []) {
const target = Array.isArray(id) ? id.at(-1) : id;
if (target === undefined || target === null || target === '') return null;
for (const node of tree || []) {
const path = [...parents, String(node.id)];
if (String(node.id) === String(target)) return path;
const matched = this.findOrganizationPath(target, node.children, path);
if (matched) return matched;
}
return null;
},
handleOrganizationChange(id) {
const organization = this.findOrganization(id);
Object.assign(
@@ -1752,21 +1779,26 @@ export default {
this.organizationFlatOptions.unshift(item);
},
renderOrganizationSearch(scope) {
// 搜索区所属组织:树形下拉(与客户档案统一
return h(ElTreeSelect, {
modelValue: scope.row?.organizationName || '',
// 搜索区所属组织:单选级联(与新增/编辑表单一致
// 级联返回 id 路径数组,提交时由 normalizeSearch 取末级 id 转组织名称
return h(ElCascader, {
modelValue: Array.isArray(scope.row?.organizationName) ? scope.row.organizationName : [],
'onUpdate:modelValue': value => {
if (scope.row) scope.row.organizationName = value;
// 级联单选:modelValue 必须是 id 路径数组,否则控件内部状态会错乱导致无法再次选中
if (scope.row) scope.row.organizationName = Array.isArray(value) ? value : [];
},
options: this.organizationOptions,
props: {
label: 'label',
value: 'id',
children: 'children',
checkStrictly: true,
expandTrigger: 'click',
},
data: this.organizationOptions,
'node-key': 'id',
'check-strictly': true,
filterable: true,
clearable: true,
'render-after-expand': false,
style: 'width: 100%',
placeholder: '请选择 所属组织',
props: { label: 'label', value: 'id', children: 'children' },
});
},
integerInput(prop, value) {