feat(vehicle): 将客商档案搜索区所属组织改为树形下拉组件
- 搜索区所属组织从扁平 select 切换到多选树形下拉,保持后端字段不变 - 使用 Vue3 h 函数动态渲染 element-plus ElTreeSelect 组件,支持多选和折叠标签 - 修复 Vue 渲染字符串组件名导致控件无法显示的问题,改为直接导入组件对象 - 解决多选模型值写为字符串导致选中失效的状态管理问题,保持 modelValue 为 ID 数组 - 在搜索变更回调中将部门 ID 数组转换为部门名称逗号拼接
This commit is contained in:
@@ -1361,6 +1361,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { h } from 'vue';
|
||||
import { ElTreeSelect } from 'element-plus';
|
||||
import {
|
||||
getList,
|
||||
getDetail,
|
||||
@@ -1762,11 +1764,8 @@ export default {
|
||||
label: '所属组织',
|
||||
prop: 'deptName',
|
||||
search: true,
|
||||
searchType: 'select',
|
||||
searchOrder: 1,
|
||||
searchValue: '',
|
||||
minWidth: 180,
|
||||
dicData: [{ label: '全部', value: '' }],
|
||||
},
|
||||
{
|
||||
label: '准入类型',
|
||||
@@ -2428,13 +2427,7 @@ export default {
|
||||
this.deptTree = this.normalizeDeptTree(res.data.data || []);
|
||||
this.deptOptions = this.flattenDept(this.deptTree);
|
||||
const deptColumn = this.findColumn(this.option.column, 'deptName');
|
||||
deptColumn.dicData = [
|
||||
{ label: '全部', value: '' },
|
||||
...this.deptOptions.map(item => ({
|
||||
label: item.label,
|
||||
value: item.rawLabel,
|
||||
})),
|
||||
];
|
||||
deptColumn.renderSearch = scope => this.renderDeptSearch(scope);
|
||||
})
|
||||
.finally(() => {
|
||||
this.deptSearchInitialized = true;
|
||||
@@ -2633,6 +2626,31 @@ export default {
|
||||
this.archiveForm.deptName = deptNames.join(',');
|
||||
this.$refs.archiveForm?.validateField('deptName');
|
||||
},
|
||||
renderDeptSearch(scope) {
|
||||
// 搜索区所属组织:多选树形下拉(与新增/编辑表单一致)
|
||||
// 多选返回 ID 数组,转换为部门名称按逗号拼接写入 searchForm.deptName
|
||||
return h(ElTreeSelect, {
|
||||
modelValue: Array.isArray(scope.row?.deptName) ? scope.row.deptName : [],
|
||||
'onUpdate:modelValue': value => {
|
||||
// 多选模式:modelValue 必须是 ID 数组,否则 el-tree-select 内部状态会错乱导致无法再次选中
|
||||
const ids = Array.isArray(value) ? value : value ? [value] : [];
|
||||
if (scope.row) scope.row.deptName = ids;
|
||||
},
|
||||
data: this.deptTree,
|
||||
'node-key': 'value',
|
||||
'check-strictly': true,
|
||||
multiple: true,
|
||||
filterable: true,
|
||||
clearable: true,
|
||||
'render-after-expand': false,
|
||||
collapseTags: true,
|
||||
'collapse-tags-tooltip': true,
|
||||
'default-expand-all': false,
|
||||
style: 'width: 100%',
|
||||
placeholder: '请选择 所属组织',
|
||||
props: { label: 'label', value: 'value', children: 'children' },
|
||||
});
|
||||
},
|
||||
handleNoFixedTermChange(checked) {
|
||||
this.archiveForm.businessTermType = checked ? '长期' : '固定期限';
|
||||
if (checked) {
|
||||
@@ -4440,6 +4458,13 @@ export default {
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
// 搜索区所属组织多选返回的是部门 ID 数组,需转成部门名称逗号串传给后端(与列表接口 deptName 字段一致)
|
||||
if (Array.isArray(params.deptName)) {
|
||||
params.deptName = params.deptName
|
||||
.map(id => this.deptOptions.find(item => String(item.value) === String(id))?.rawLabel)
|
||||
.filter(Boolean)
|
||||
.join(',');
|
||||
}
|
||||
this.query = this.buildQuery(params);
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
|
||||
Reference in New Issue
Block a user