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() * * 说明: * - 自动识别 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']; export default { data() { return { // 树形组织数据,仅供搜索栏 el-cascader 使用; // 与页面自身 organizationOptions(多为表单扁平列表)隔离,避免相互覆盖 organizationTreeOptions: [], organizationTreeFlatOptions: [], organizationLoading: false, }; }, computed: { // 所属组织级联配置: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.organizationTreeOptions); 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, }; }); }, flattenOrgTree(tree = []) { return (tree || []).flatMap(item => [ { id: String(item.id), label: item.label, rawLabel: item.rawLabel }, ...this.flattenOrgTree(item.children || []), ]); }, // 兼容两种入参:级联路径数组(取末级)或单个部门 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; 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.organizationTreeOptions, props: { label: 'label', value: 'id', children: 'children', checkStrictly: true, expandTrigger: 'click', }, filterable: true, clearable: true, style: 'width: 100%', placeholder: '请选择 所属组织', }); }, }, };