feat(bpm): 表单设计器 UserSelect/DeptSelect 支持默认选中当前用户/部门
1. UserSelect 新增 defaultCurrentUser 配置,默认选中当前登录用户 2. DeptSelect 新增 defaultCurrentDept 配置,默认选中当前用户所属部门 3. DeptSelect 改用 el-tree-select 实现树形层级显示 4. 支持单选/多选模式,预设值优先级高于默认值pull/860/head
parent
859d493513
commit
7a7228aed8
|
|
@ -0,0 +1,196 @@
|
|||
<!-- 部门选择器 - 树形结构显示 -->
|
||||
<template>
|
||||
<el-tree-select
|
||||
v-model="selectedValue"
|
||||
class="w-1/1"
|
||||
:data="deptTree"
|
||||
:props="treeProps"
|
||||
:multiple="multiple"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder || '请选择部门'"
|
||||
:check-strictly="true"
|
||||
:filterable="true"
|
||||
:filter-node-method="filterNode"
|
||||
:clearable="true"
|
||||
:render-after-expand="false"
|
||||
node-key="id"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { handleTree } from '@/utils/tree'
|
||||
import { getSimpleDeptList, type DeptVO } from '@/api/system/dept'
|
||||
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||
|
||||
defineOptions({ name: 'DeptSelect' })
|
||||
|
||||
// 接受父组件参数
|
||||
interface Props {
|
||||
modelValue?: number | string | number[] | string[]
|
||||
multiple?: boolean
|
||||
returnType?: 'id' | 'name'
|
||||
defaultCurrentDept?: boolean
|
||||
disabled?: boolean
|
||||
placeholder?: string
|
||||
formCreateInject?: any
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
multiple: false,
|
||||
returnType: 'id',
|
||||
defaultCurrentDept: false,
|
||||
disabled: false,
|
||||
placeholder: ''
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: number | string | number[] | string[] | undefined): void
|
||||
}>()
|
||||
|
||||
// 树形选择器配置
|
||||
const treeProps = {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 部门树形数据
|
||||
const deptTree = ref<any[]>([])
|
||||
// 原始部门列表(用于 returnType='name' 时查找名称)
|
||||
const deptList = ref<DeptVO[]>([])
|
||||
// 当前选中值
|
||||
const selectedValue = ref<number | string | number[] | string[] | undefined>()
|
||||
|
||||
// 加载部门树形数据
|
||||
const loadDeptTree = async () => {
|
||||
try {
|
||||
const data = await getSimpleDeptList()
|
||||
deptList.value = data
|
||||
deptTree.value = handleTree(data)
|
||||
} catch (error) {
|
||||
console.warn('加载部门数据失败:', error)
|
||||
deptTree.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 根据 ID 获取部门名称
|
||||
const getDeptNameById = (id: number): string | undefined => {
|
||||
const dept = deptList.value.find((item) => item.id === id)
|
||||
return dept?.name
|
||||
}
|
||||
|
||||
// 根据名称获取部门 ID
|
||||
const getDeptIdByName = (name: string): number | undefined => {
|
||||
const dept = deptList.value.find((item) => item.name === name)
|
||||
return dept?.id
|
||||
}
|
||||
|
||||
// 处理选中值变化
|
||||
const handleChange = (value: number | number[] | undefined) => {
|
||||
if (value === undefined || value === null) {
|
||||
emit('update:modelValue', props.multiple ? [] : undefined)
|
||||
return
|
||||
}
|
||||
|
||||
// 根据 returnType 决定返回值类型
|
||||
if (props.returnType === 'name') {
|
||||
if (props.multiple && Array.isArray(value)) {
|
||||
const names = value.map((id) => getDeptNameById(id)).filter(Boolean) as string[]
|
||||
emit('update:modelValue', names)
|
||||
} else if (!props.multiple && typeof value === 'number') {
|
||||
const name = getDeptNameById(value)
|
||||
emit('update:modelValue', name)
|
||||
}
|
||||
} else {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
}
|
||||
|
||||
// 树节点过滤方法(支持搜索过滤)
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
}
|
||||
|
||||
// 监听 modelValue 变化,同步到内部选中值
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (newValue === undefined || newValue === null) {
|
||||
selectedValue.value = props.multiple ? [] : undefined
|
||||
return
|
||||
}
|
||||
|
||||
// 如果 returnType 是 'name',需要将名称转换为 ID 用于树选择器显示
|
||||
if (props.returnType === 'name') {
|
||||
if (props.multiple && Array.isArray(newValue)) {
|
||||
const ids = (newValue as string[])
|
||||
.map((name) => getDeptIdByName(name))
|
||||
.filter(Boolean) as number[]
|
||||
selectedValue.value = ids
|
||||
} else if (!props.multiple && typeof newValue === 'string') {
|
||||
const id = getDeptIdByName(newValue)
|
||||
selectedValue.value = id
|
||||
}
|
||||
} else {
|
||||
selectedValue.value = newValue as number | number[]
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 检查是否有有效的预设值
|
||||
const hasValidPresetValue = (): boolean => {
|
||||
const value = props.modelValue
|
||||
if (value === undefined || value === null || value === '') {
|
||||
return false
|
||||
}
|
||||
if (Array.isArray(value)) {
|
||||
return value.length > 0
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 设置默认值(当前用户部门)
|
||||
const setDefaultValue = () => {
|
||||
console.log('[DeptSelect] setDefaultValue called, defaultCurrentDept:', props.defaultCurrentDept)
|
||||
|
||||
// 仅当 defaultCurrentDept 为 true 时处理
|
||||
if (!props.defaultCurrentDept) {
|
||||
console.log('[DeptSelect] defaultCurrentDept is false, skip')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否已有预设值(预设值优先级高于默认当前部门)
|
||||
if (hasValidPresetValue()) {
|
||||
console.log('[DeptSelect] has preset value, skip:', props.modelValue)
|
||||
return
|
||||
}
|
||||
|
||||
// 获取当前用户的部门 ID
|
||||
const userStore = useUserStoreWithOut()
|
||||
const user = userStore.getUser
|
||||
const deptId = user?.deptId
|
||||
|
||||
console.log('[DeptSelect] current user:', user, 'deptId:', deptId)
|
||||
|
||||
// 处理 deptId 为空或 0 的边界情况
|
||||
if (!deptId || deptId === 0) {
|
||||
console.log('[DeptSelect] deptId is invalid, skip')
|
||||
return
|
||||
}
|
||||
|
||||
// 根据多选模式决定默认值格式
|
||||
const defaultValue = props.multiple ? [deptId] : deptId
|
||||
console.log('[DeptSelect] setting default value:', defaultValue)
|
||||
emit('update:modelValue', defaultValue)
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据并设置默认值
|
||||
onMounted(async () => {
|
||||
await loadDeptTree()
|
||||
// 数据加载完成后设置默认值
|
||||
setDefaultValue()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -2,6 +2,7 @@ import request from '@/config/axios'
|
|||
import { isEmpty } from '@/utils/is'
|
||||
import { ApiSelectProps } from '@/components/FormCreate/src/type'
|
||||
import { jsonParse } from '@/utils'
|
||||
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||
|
||||
export const useApiSelect = (option: ApiSelectProps) => {
|
||||
return defineComponent({
|
||||
|
|
@ -61,13 +62,62 @@ export const useApiSelect = (option: ApiSelectProps) => {
|
|||
returnType: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
// 是否默认选中当前用户(仅 UserSelect 使用)
|
||||
defaultCurrentUser: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
setup(props, { emit }) {
|
||||
const attrs = useAttrs()
|
||||
const options = ref<any[]>([]) // 下拉数据
|
||||
const loading = ref(false) // 是否正在从远程获取数据
|
||||
const queryParam = ref<any>() // 当前输入的值
|
||||
|
||||
// 检查是否有有效的预设值
|
||||
const hasValidPresetValue = (): boolean => {
|
||||
const value = attrs.modelValue
|
||||
if (value === undefined || value === null || value === '') {
|
||||
return false
|
||||
}
|
||||
if (Array.isArray(value)) {
|
||||
return value.length > 0
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 设置默认当前用户(仅当 defaultCurrentUser 为 true 且无预设值时)
|
||||
const setDefaultCurrentUser = () => {
|
||||
console.log('[UserSelect] setDefaultCurrentUser called, defaultCurrentUser:', props.defaultCurrentUser)
|
||||
|
||||
// 仅当组件名为 UserSelect 且 defaultCurrentUser 为 true 时处理
|
||||
if (option.name !== 'UserSelect' || !props.defaultCurrentUser) {
|
||||
console.log('[UserSelect] skip - not UserSelect or defaultCurrentUser is false')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否已有预设值(预设值优先级高于默认当前用户)
|
||||
if (hasValidPresetValue()) {
|
||||
console.log('[UserSelect] has preset value, skip:', attrs.modelValue)
|
||||
return
|
||||
}
|
||||
|
||||
// 获取当前用户 ID
|
||||
const userStore = useUserStoreWithOut()
|
||||
const user = userStore.getUser
|
||||
const currentUserId = user?.id
|
||||
|
||||
console.log('[UserSelect] current user:', user, 'userId:', currentUserId)
|
||||
|
||||
if (currentUserId) {
|
||||
// 根据多选/单选模式设置默认值
|
||||
const defaultValue = props.multiple ? [currentUserId] : currentUserId
|
||||
console.log('[UserSelect] setting default value:', defaultValue)
|
||||
emit('update:modelValue', defaultValue)
|
||||
}
|
||||
}
|
||||
|
||||
const getOptions = async () => {
|
||||
options.value = []
|
||||
// 接口选择器
|
||||
|
|
@ -188,6 +238,8 @@ export const useApiSelect = (option: ApiSelectProps) => {
|
|||
|
||||
onMounted(async () => {
|
||||
await getOptions()
|
||||
// 设置默认当前用户(在数据加载完成后)
|
||||
setDefaultCurrentUser()
|
||||
})
|
||||
|
||||
const buildSelect = () => {
|
||||
|
|
|
|||
|
|
@ -19,13 +19,24 @@ export const useSelectRule = (option: SelectRuleOption) => {
|
|||
name,
|
||||
event: option.event,
|
||||
rule() {
|
||||
return {
|
||||
// 构建基础规则
|
||||
const baseRule: any = {
|
||||
type: name,
|
||||
field: generateUUID(),
|
||||
title: label,
|
||||
info: '',
|
||||
$required: false
|
||||
}
|
||||
// 将自定义 props 的默认值添加到 rule 的 props 中
|
||||
if (option.props && option.props.length > 0) {
|
||||
baseRule.props = {}
|
||||
option.props.forEach((prop: any) => {
|
||||
if (prop.field && prop.value !== undefined) {
|
||||
baseRule.props[prop.field] = prop.value
|
||||
}
|
||||
})
|
||||
}
|
||||
return baseRule
|
||||
},
|
||||
props(_, { t }) {
|
||||
if (!option.props) {
|
||||
|
|
|
|||
|
|
@ -52,7 +52,15 @@ export const useFormCreateDesigner = async (designer: Ref) => {
|
|||
const userSelectRule = useSelectRule({
|
||||
name: 'UserSelect',
|
||||
label: '用户选择器',
|
||||
icon: 'icon-user-o'
|
||||
icon: 'icon-user-o',
|
||||
props: [
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'defaultCurrentUser',
|
||||
title: '默认选中当前用户',
|
||||
value: true
|
||||
}
|
||||
]
|
||||
})
|
||||
const deptSelectRule = useSelectRule({
|
||||
name: 'DeptSelect',
|
||||
|
|
@ -68,6 +76,12 @@ export const useFormCreateDesigner = async (designer: Ref) => {
|
|||
{ label: '部门编号', value: 'id' },
|
||||
{ label: '部门名称', value: 'name' }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
field: 'defaultCurrentDept',
|
||||
title: '默认选中当前部门',
|
||||
value: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
|
|||
import { useApiSelect } from '@/components/FormCreate'
|
||||
import { Editor } from '@/components/Editor'
|
||||
import DictSelect from '@/components/FormCreate/src/components/DictSelect.vue'
|
||||
import DeptSelect from '@/components/FormCreate/src/components/DeptSelect.vue'
|
||||
|
||||
const UserSelect = useApiSelect({
|
||||
name: 'UserSelect',
|
||||
|
|
@ -75,12 +76,6 @@ const UserSelect = useApiSelect({
|
|||
valueField: 'id',
|
||||
url: '/system/user/simple-list'
|
||||
})
|
||||
const DeptSelect = useApiSelect({
|
||||
name: 'DeptSelect',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
url: '/system/dept/simple-list'
|
||||
})
|
||||
const ApiSelect = useApiSelect({
|
||||
name: 'ApiSelect'
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue