登录
注册
开源
企业版
高校版
搜索
帮助中心
使用条款
关于我们
开源
企业版
高校版
私有云
模力方舟
AI 队友
登录
注册
代码拉取完成,页面将自动刷新
开源项目
>
WEB应用开发
>
后台管理框架
&&
捐赠
捐赠前请先登录
取消
前往登录
扫描微信二维码支付
取消
支付完成
支付提示
将跳转至支付宝完成支付
确定
取消
Watch
不关注
关注所有动态
仅关注版本发行动态
关注但不提醒动态
971
Star
5.4K
Fork
1.7K
GVP
smallwei
/
Avue
代码
Issues
7
Pull Requests
0
Wiki
统计
流水线
服务
质量分析
Jenkins for Gitee
腾讯云托管
腾讯云 Serverless
悬镜安全
阿里云 SAE
Codeblitz
SBOM
我知道了,不再自动展开
更新失败,请稍后重试!
移除标识
内容风险标识
本任务被
标识为内容中包含有代码安全 Bug 、隐私泄露等敏感信息,仓库外成员不可访问
现在我和同事分别是3.7.3和3.7.4版本,高版本的table选择组件在编辑或者查看的时候onload中会出现报错
已完成
#IDE2LN
god72
创建于
2025-12-18 16:13
 ``` 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 } } ``` 封装的通用弹窗选择代码
 ``` 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 } } ``` 封装的通用弹窗选择代码
评论 (
0
)
登录
后才可以发表评论
状态
已完成
待办的
进行中
已完成
已关闭
负责人
未设置
标签
未设置
标签管理
里程碑
v3.8.0
未关联里程碑
Pull Requests
未关联
未关联
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
未关联
分支 (6)
标签 (229)
master
dev
2.x
2.x-dev
2.8.0
1.x
v3.8.1
v3.8.0
v3.7.4
v3.7.3
v3.7.2
v3.7.1
v3.7.0
v3.6.5
v3.6.4
v3.6.3
v3.6.2
v3.6.1
v3.6.0
v3.5.6
v2.13.2
v3.5.5
v3.5.4
v3.5.3
v2.13.1
v3.5.2
v3.5.1
v3.5.0
v2.13.0
v3.4.9
v2.12.8
v3.4.8
v2.12.7
v3.4.7
v2.12.6
v2.12.5
v3.4.6
v3.4.5
v3.4.4
v2.12.4
v2.12.3
v3.4.3
v2.12.2
v3.4.2
v2.12.1
v3.4.1
v3.4.0
v2.12.0
v3.3.4
v3.3.3
v3.3.2
v2.11.2
v2.11.1
v3.3.1
v3.3.0
v2.11.0
v3.2.23
v3.2.22
v2.10.18
v3.2.21
v2.10.17
v3.2.20
v2.10.16
v3.2.19
v3.2.18
v3.2.17
v2.10.15
v2.10.14
v2.10.13
v3.2.16
v2.10.12
v3.2.15
v2.10.11
v3.2.14
v3.2.13
v2.10.10
v3.2.12
v2.10.9
v3.2.11
v2.10.8
v3.2.10
v2.10.7
v2.10.6
v2.10.5
v2.10.4
v2.10.2
v2.10.1
v2.10.0
v2.9.14
v2.9.13
v2.9.12
v2.9.9
v2.9.8
v2.9.7
v2.9.6
v2.9.5
v2.9.4
v2.9.3
v2.9.0
v2.8.27
v2.8.26
v2.8.25
v2.8.24
v2.8.23
v2.8.22
v2.8.21
v2.8.20
v2.8.19
v2.8.18
v2.8.17
v2.8.15
v2.8.14
v2.8.13
v2.8.12
v2.8.11
v2.8.10
v2.8.9
v2.8.8
v2.8.7
v2.8.6
v2.8.5
v2.8.4
v2.8.3
v2.8.2
v2.8.1
v2.8.0
v2.7.10
v2.7.9
v2.7.8
v2.7.7
v2.7.6
v2.7.5
v2.7.4
v2.7.3
v2.7.2
v2.7.1
v2.7.0
v2.6.18
v2.6.17
v2.6.16
v2.6.15
v2.6.14
v2.6.13
v2.6.12
v2.6.11
v2.6.10
v2.6.9
v2.6.8
v2.6.7
v2.6.6
v2.6.5
v2.6.4
v2.6.3
v2.6.2
v2.6.1
v2.6.0
v2.5.3
v2.5.2
v2.5.1
v2.5.0
v2.4.1
v2.4.0
v2.3.8
v2.3.7
v2.3.6
v2.3.5
v2.3.4
v2.3.3
v2.3.1
v2.3.0
v2.2.3
v2.2.2
v2.2.1
v2.2.0
v2.1.5
v2.1.3
v2.1.2
v2.1.1
v2.1.0
v2.0.6
v2.0.5
v2.0.4
v2.0.3
v2.0.2
v2.0.1
v2.0.0
v1.1.0
1.1.0
v1.0.11
v1.6.2
v1.0.10
v1.6.1
v1.0.9
v1.6.1-alpha.1
v1.0.8
v1.6.0
v1.0.7
v1.5.4
v1.5.3
v1.0.6
v1.0.5
v1.5.2
v1.0.4
v1.5.1
v1.0.3
v1.0.2
v1.0.1
v1.5.0
v1.0.0
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.8
1.3.7
1.3.6
1.3.5
1.3.4
1.3.3
1.3.2
1.3.0
1.2.2
1.2.1
1.2.0
1.1.1
1.0.4
1.0.3
1.0.2
1.0.1
1.0
开始日期   -   截止日期
-
置顶选项
不置顶
置顶等级:高
置顶等级:中
置顶等级:低
优先级
不指定
严重
主要
次要
不重要
参与者(1)
JavaScript
1
https://gitee.com/smallweigit/avue.git
git@gitee.com:smallweigit/avue.git
smallweigit
avue
Avue
点此查找更多帮助
搜索帮助
Git 命令在线学习
如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大,如何减小?
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release(发行版)
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部
登录提示
该操作需登录 Gitee 帐号,请先登录后再操作。
立即登录
没有帐号,去注册