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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user