201 lines
9.0 KiB
JavaScript
201 lines
9.0 KiB
JavaScript
import { getDeptTree } from '@/api/system/dept';
|
||
import { ElCascader } from 'element-plus';
|
||
import { h } from 'vue';
|
||
|
||
/**
|
||
* 所属组织 统一搜索 mixin
|
||
* ------------------------------------------------------------------
|
||
* 全站「所属组织」搜索栏统一为级联选择器（el-cascader，单选），风格与客商档案
|
||
* （vehicle/customer-archive.vue）保持一致。
|
||
*
|
||
* 接入步骤（在使用了 avue-crud 的页面中）：
|
||
* 1. 混入本 mixin：mixins: [organizationSearch]
|
||
* 2. option 中「所属组织」列加上 searchslot: true（prop 为 organizationName 或 deptName 均可）
|
||
* 3. 在 created / 初始化时调用 this.loadOrganizationOptions()
|
||
* 4. 需要「未分配组织」筛选项的页面在 data 里置 enableUnassignedOrgFilter: true；
|
||
* 该项只追加进搜索树 organizationSearchTreeOptions，表单级联 organizationTreeOptions 不含哨兵
|
||
*
|
||
* 说明：
|
||
* - 自动识别 organizationName / deptName 两种 prop，并挂载 column.renderSearch
|
||
* - 树节点标识统一用 id，级联值为「根 → 选中节点」的 id 路径数组
|
||
* - checkStrictly 打开，任意层级（含非末级）都可直接选中
|
||
* - 页面若已有 excludeExternalOrganization / normalizeOrgTree 等方法，
|
||
* 组件自身方法优先级更高，会覆盖本 mixin 的默认实现
|
||
* - 搜索值需在各自的 searchChange / normalizeSearch 中按后端要求转换为部门名称：
|
||
* 级联值是路径数组，统一用 findOrgById(路径)?.rawLabel 取末级名称
|
||
* - 表单区（新增/编辑）需要回显时，可用 findOrgPath(deptId) 把 id 转成路径，
|
||
* 参考 customer-archive 的 deptCascaderValue 计算属性
|
||
*/
|
||
const ORG_PROPS = ['organizationName', 'deptName'];
|
||
|
||
// 「未分配组织」筛选项的哨兵值：不是真实组织名，选中后提交给后端的就是这串字面量。
|
||
// 后端 TransportBusiConstant.UNASSIGNED_ORG_FILTER、DriverMapper.xml / TransportVehicleMapper.xml
|
||
// 的 organizationName 分支以及司机、车辆导出查询都按它改判为 organization_name = ''；
|
||
// 后端换成空串会让整段组织条件不生效，筛选静默失效。前端与后端这几处必须同步修改。
|
||
const UNASSIGNED_ORG_FILTER = '__UNASSIGNED_ORG__';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 树形组织数据，仅供搜索栏 el-cascader 使用；
|
||
// 与页面自身 organizationOptions（多为表单扁平列表）隔离，避免相互覆盖
|
||
organizationTreeOptions: [],
|
||
organizationTreeFlatOptions: [],
|
||
organizationLoading: false,
|
||
// 组织筛选是否追加「未分配组织」一项；页面在 data 里覆盖为 true 才生效
|
||
enableUnassignedOrgFilter: false,
|
||
};
|
||
},
|
||
computed: {
|
||
// 搜索栏级联的选项：开关打开时在真实组织最前面追加「未分配组织」。
|
||
// 不能直接改 organizationTreeOptions——司机/车辆页的编辑表单也用这棵树选组织。
|
||
organizationSearchTreeOptions() {
|
||
return this.enableUnassignedOrgFilter
|
||
? [this.unassignedOrgOption(), ...this.organizationTreeOptions]
|
||
: this.organizationTreeOptions;
|
||
},
|
||
// 所属组织级联配置：checkStrictly 允许选中任意层级，不必选到末级
|
||
organizationCascaderProps() {
|
||
return {
|
||
value: 'id',
|
||
label: 'label',
|
||
children: 'children',
|
||
emitPath: true,
|
||
checkStrictly: true,
|
||
expandTrigger: 'click',
|
||
};
|
||
},
|
||
},
|
||
methods: {
|
||
loadOrganizationOptions() {
|
||
if (this.organizationLoading) return;
|
||
this.organizationLoading = true;
|
||
const tenantId = this.userInfo?.tenantId;
|
||
getDeptTree(tenantId)
|
||
.then(res => {
|
||
const source = res.data?.data || res.data || [];
|
||
const tree = this.excludeExternalOrganization
|
||
? this.excludeExternalOrganization(source)
|
||
: source;
|
||
this.organizationTreeOptions = this.normalizeOrgTree(tree);
|
||
this.organizationTreeFlatOptions = this.flattenOrgTree(this.organizationSearchTreeOptions);
|
||
const option = this.tableOption || this.option;
|
||
if (!option) return;
|
||
ORG_PROPS.forEach(prop => {
|
||
const column = this.findColumn?.(option.column, prop);
|
||
if (column) {
|
||
column.renderSearch = scope => this.renderOrganizationSearch(scope, prop);
|
||
}
|
||
});
|
||
})
|
||
.finally(() => {
|
||
this.organizationLoading = false;
|
||
});
|
||
},
|
||
// 默认排除「外部组织」节点；页面可覆盖
|
||
excludeExternalOrganization(tree = []) {
|
||
return (tree || []).reduce((result, item) => {
|
||
const name = item.title || item.deptName || item.name || item.label || '';
|
||
if (String(name).trim() === '外部组织') return result;
|
||
result.push({
|
||
...item,
|
||
children: this.excludeExternalOrganization(item.children || []),
|
||
});
|
||
return result;
|
||
}, []);
|
||
},
|
||
normalizeOrgTree(tree = []) {
|
||
return (tree || []).map(item => {
|
||
const label = item.title || item.deptName || item.name || item.label || '';
|
||
const children = this.normalizeOrgTree(item.children || []);
|
||
return {
|
||
...item,
|
||
id: String(item.id),
|
||
label,
|
||
rawLabel: label,
|
||
children: children.length ? children : undefined,
|
||
};
|
||
});
|
||
},
|
||
// 哨兵节点的 id 与 rawLabel 都取哨兵值，resolveOrgName 取到的仍是哨兵而不是某个真实组织名
|
||
unassignedOrgOption() {
|
||
return { id: UNASSIGNED_ORG_FILTER, label: '未分配组织', rawLabel: UNASSIGNED_ORG_FILTER };
|
||
},
|
||
flattenOrgTree(tree = []) {
|
||
return (tree || []).flatMap(item => [
|
||
{ id: String(item.id), label: item.label, rawLabel: item.rawLabel },
|
||
...this.flattenOrgTree(item.children || []),
|
||
]);
|
||
},
|
||
// 组织列渲染用：空串或纯空白即「未分配组织」（组织列 NOT NULL，无组织存空串）
|
||
isBlankOrganizationName(value) {
|
||
return String(value ?? '').trim() === '';
|
||
},
|
||
// 兼容两种入参：级联路径数组（取末级）或单个部门 id
|
||
findOrgById(id) {
|
||
const value = Array.isArray(id) ? id.at(-1) : id;
|
||
return this.organizationTreeFlatOptions.find(item => String(item.id) === String(value));
|
||
},
|
||
// 由部门 id 反查「根 → 该节点」的 id 路径，供级联回显（找不到返回 null）
|
||
findOrgPath(id, tree = this.organizationTreeOptions, 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;
|
||
// 必须显式传 node.children || []：叶节点的 children 是 undefined，
|
||
// 传 undefined 会触发默认参数重新拿到整棵树，逐层重复扫描直到爆栈
|
||
const matched = this.findOrgPath(target, node.children || [], path);
|
||
if (matched) return matched;
|
||
}
|
||
return null;
|
||
},
|
||
// 由部门 id 取组织名称（末级），供表单提交
|
||
findOrgName(id) {
|
||
return this.findOrgById(id)?.rawLabel || '';
|
||
},
|
||
// 组织名称 → 级联路径（表单回显用；部门树异步加载完成后会自动重算）
|
||
resolveOrgPath(name) {
|
||
const value = String(name ?? '').trim();
|
||
if (!value) return [];
|
||
const node = this.organizationTreeFlatOptions.find(item => item.rawLabel === value);
|
||
return node ? this.findOrgPath(node.id) || [] : [];
|
||
},
|
||
// 级联路径 → 组织名称（表单/搜索提交用，取末级节点名称）
|
||
resolveOrgName(path) {
|
||
const value = Array.isArray(path)
|
||
? path.filter(item => item !== undefined && item !== null && item !== '')
|
||
: [];
|
||
return value.length ? this.findOrgById(value)?.rawLabel || '' : '';
|
||
},
|
||
// 搜索提交前把级联路径数组就地转成组织名称（后端按名称过滤）
|
||
normalizeOrganizationSearch(params, prop = 'organizationName') {
|
||
if (Array.isArray(params?.[prop])) {
|
||
params[prop] = this.resolveOrgName(params[prop]);
|
||
}
|
||
return params;
|
||
},
|
||
renderOrganizationSearch(scope, prop = 'organizationName') {
|
||
return h(ElCascader, {
|
||
modelValue: Array.isArray(scope.row?.[prop]) ? scope.row[prop] : [],
|
||
'onUpdate:modelValue': value => {
|
||
// 级联单选：modelValue 必须是 id 路径数组，否则控件内部状态会错乱导致无法再次选中
|
||
if (scope.row) scope.row[prop] = Array.isArray(value) ? value : [];
|
||
},
|
||
options: this.organizationSearchTreeOptions,
|
||
props: {
|
||
label: 'label',
|
||
value: 'id',
|
||
children: 'children',
|
||
checkStrictly: true,
|
||
expandTrigger: 'click',
|
||
},
|
||
filterable: true,
|
||
clearable: true,
|
||
style: 'width: 100%',
|
||
placeholder: '请选择 所属组织',
|
||
});
|
||
},
|
||
},
|
||
};
|