tms-erp-web/src/mixins/organization-search.js

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: '请选择 所属组织',
      });
    },
  },
};