现在我和同事分别是3.7.3和3.7.4版本，高版本的table选择组件在编辑或者查看的时候onload中会出现报错

![输入图片说明](https://foruda.gitee.com/images/1766045614980067966/13bc11b0_8363096.png "屏幕截图")![输入图片说明](https://foruda.gitee.com/images/1766045621687058102/7e3ee46d_8363096.png "屏幕截图")
```
import { getList as getUserList, getDetail as getUserInfo } from '@/api/hr/hrEmployee'
// 用户列表缓存
let userList = []

/**
 * 通用人员选择器配置生成器
 *
 * 使用示例：
 *
 * // 基本使用（使用默认配置）
 * import { createPersonnelSelectorConfig } from '@/utils/personnelSelector'
 *
 * const config = createPersonnelSelectorConfig({
 *   onChange: (row, selectedValue, user) => {
 *     // 处理人员选择逻辑
 *     // row: 当前行数据
 *     // selectedValue: 选择的值（字符串或数组）
 *     // user: 用户详细信息（如果找到的话）
 *     console.log('选择了人员:', selectedValue, user)
 *   }
 * })
 *
 * // 自定义标签和属性名
 * const customLabelConfig = createPersonnelSelectorConfig({
 *   label: '负责人',
 *   prop: 'managerId',
 *   onChange: (row, selectedValue, user) => {
 *     // 处理负责人选择逻辑
 *   }
 * })
 *
 * // 自定义列表字段名（用于从表单中查找已有数据）
 * const customListConfig = createPersonnelSelectorConfig({
 *   label: '培训师',
 *   prop: 'trainerId',
 *   listFieldName: 'trainerList', // 对应 vm.form.trainerList
 *   onChange: (row, selectedValue, user) => {
 *     // 处理培训师选择逻辑
 *   }
 * })
 *
 * // 自定义表格列
 * const customConfig = createPersonnelSelectorConfig({
 *   customColumns: [
 *     { label: '姓名', prop: 'employeeName' },
 *     { label: '部门', prop: 'deptName' }
 *   ],
 *   onChange: (row, selectedValue, user) => {
 *     // 处理人员选择逻辑
 *   }
 * })
 *
 * // 自定义验证规则
 * const strictConfig = createPersonnelSelectorConfig({
 *   customRules: [{
 *     required: true,
 *     message: '必须选择负责人',
 *     trigger: 'change'
 *   }],
 *   onChange: (row, selectedValue, user) => {
 *     // 处理人员选择逻辑
 *   }
 * })
 */

// 辅助函数：格式化性别显示
const formatGender = (sex) => {
  return sex === '1' ? '男' : sex === '2' ? '女' : ''
}

// 辅助函数：从数组中提取第一个值
const extractFirstValue = (value) => {
  return Array.isArray(value) ? value[0] : value
}

// 辅助函数：异步获取用户信息
const fetchUserInfo = async (value) => {
  try {
    const { data: { code, data: user } } = await getUserInfo(value)
    return code === 200 ? user : {}
  } catch (error) {
    console.error('获取用户信息失败:', error)
    return {}
  }
}

// 辅助函数：从详情列表获取用户信息
const getUserFromDetailList = (vm, value, listFieldName = 'personDetailList') => {
  const personDetailList = vm.form[listFieldName]
  if (!personDetailList?.length) return null

const selectObject = personDetailList.find(item => item.employeeId === value)
  if (!selectObject?.lastName || !selectObject?.employeeId) return null

return {
    ...selectObject,
    employeeName: selectObject.lastName,
    id: selectObject.employeeId
  }
}

// 通用人员选择器配置生成器（仅弹框选择配置）
export const createPersonnelSelectorConfig = (options = {}) => {
  const {
    label = '姓名',           // 字段标签
    prop = 'employeeId',      // 字段属性名
    listFieldName = 'personDetailList', // 表单中的列表字段名
    customColumns = null,
    customRules = null,
    customProps = null,
    onChange = null, // 自定义选择回调
    onLoad = null,   // 自定义加载回调
    columnsProps = {} // 表格列属性
  } = options

// 默认表格列配置
  const defaultColumns = [
    {
      label: '姓名',
      prop: 'employeeName',
    },
    {
      label: '职位',
      prop: 'postName',
    },
    {
      label: '工号',
      prop: 'employeeCode',
    },
    {
      label: '联系方式',
      prop: 'phone',
    },
    {
      label: '性别',
      prop: 'sex',
      formatter: (row) => formatGender(row.sex),
    }
  ]

// 默认数据加载逻辑
  const defaultOnLoad = async ({ page, value }, callback) => {
    // 如果有 value，表示需要加载单个用户信息
    if (value) {
      const selectedValue = extractFirstValue(value)

// 优先从缓存的 userList 中查找
      if (userList.length > 0) {
        const user = userList.find(item => item.id === selectedValue)
        callback(user || {})
        return
      }

// 其次从表单的列表字段中查找（如果有 vm 参数）这里是子表单有多行数据时候的判断
      if (options.vm) {
        const detailUser = getUserFromDetailList(options.vm, selectedValue, listFieldName)
        if (detailUser) {
          callback(detailUser)
          return
        }
      }

// 最后从接口获取
      const user = await fetchUserInfo(selectedValue)
      callback(user)
      return
    }

// 没有 value，表示需要分页加载用户列表
    const pageParams = page || { currentPage: 1, pageSize: 10 }

try {
      const { data: { code, data: { records, total } } } = await getUserList(
        pageParams.currentPage,
        pageParams.pageSize,
        {}
      )

if (code === 200) {
        userList = records
        callback({ data: records, total })
      } else {
        callback({ data: [], total: 0 })
      }
    } catch (error) {
      console.error('获取用户列表失败:', error)
      callback({ data: [], total: 0 })
    }
  }

return {
    label,
    prop,
    type: 'table',
    multiple:false,
    children: {
      border: true,
      column: customColumns || defaultColumns,
    },
    change: (row) => {
      if (!onChange) return

// 准备传递给回调的参数
      const selectedValue = extractFirstValue(row.value)
      const user = userList.length > 0 ? userList.find(item => item.id === selectedValue) : null

// 调用用户自定义的回调函数
      onChange(row, selectedValue, user)
    },
    onLoad: onLoad || defaultOnLoad,
    props: customProps || {
      disabled: 'disabled',
      label: 'employeeName',
      value: 'id'
    },
    rules: customRules || [{
      required: true,
      message: '请选择人员',
      trigger: 'change'
    }],
    ...columnsProps
  }
}
```
封装的通用弹窗选择代码

GVP smallwei/Avue

内容风险标识

评论 (0)

GVPsmallwei/Avue

内容风险标识