form-create-designer: 表单组件新增用户选择器

This commit is contained in:
puhui999 2024-03-31 17:58:44 +08:00
parent 68dae2d1fe
commit d16bed4ad7
5 changed files with 38 additions and 29 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<el-select :model-value="modelValue" class="w-1/1" v-bind="attrs" @change="changeValue"> <el-select class="w-1/1" v-bind="attrs">
<template v-if="valueType === 'int'"> <template v-if="valueType === 'int'">
<el-option <el-option
v-for="(dict, index) in getIntDictOptions(dictType)" v-for="(dict, index) in getIntDictOptions(dictType)"
@ -43,11 +43,4 @@ withDefaults(defineProps<Props>(), {
}) })
const attrs = useAttrs() const attrs = useAttrs()
defineOptions({ name: 'DictSelect' }) defineOptions({ name: 'DictSelect' })
const emits = defineEmits<{
(e: 'update:modelValue', v: any): void
}>()
const changeValue = (value: any) => {
console.log(value)
emits('update:modelValue', value)
}
</script> </script>

View File

@ -1,22 +1,9 @@
import { generateUUID } from '@/utils' import { generateUUID } from '@/utils'
import * as UserApi from '@/api/system/user' import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
import { localeProps, makeOptionsRule, makeRequiredRule } from '@/components/FormCreate/src/utils'
export const useUserSelectRule = () => { export const useUserSelectRule = () => {
const label = 'aa选择器' const label = '用户选择器'
const name = 'select' const name = 'UserSelect'
const userOptions = ref<{ label: string; value: number }[]>([]) // 用户下拉数据
onMounted(async () => {
const data = await UserApi.getSimpleUserList()
if (!data || data.length === 0) {
return
}
userOptions.value =
data?.map((item: UserApi.UserVO) => ({
label: item.nickname,
value: item.id
})) ?? []
})
return { return {
icon: 'icon-select', icon: 'icon-select',
label, label,
@ -33,7 +20,6 @@ export const useUserSelectRule = () => {
props(_, { t }) { props(_, { t }) {
return localeProps(t, name + '.props', [ return localeProps(t, name + '.props', [
makeRequiredRule(), makeRequiredRule(),
makeOptionsRule(t, 'options', userOptions.value),
{ type: 'switch', field: 'multiple', title: '是否多选' }, { type: 'switch', field: 'multiple', title: '是否多选' },
{ {
type: 'switch', type: 'switch',

View File

@ -20,6 +20,7 @@ import install from '@form-create/element-ui/auto-import'
//======================= 自定义组件 ======================= //======================= 自定义组件 =======================
import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile' import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
import { DictSelect } from '@/components/DictSelect' import { DictSelect } from '@/components/DictSelect'
import UserSelect from '@/views/system/user/components/UserSelect.vue'
const components = [ const components = [
ElAside, ElAside,
@ -37,7 +38,8 @@ const components = [
UploadImg, UploadImg,
UploadImgs, UploadImgs,
UploadFile, UploadFile,
DictSelect DictSelect,
UserSelect
] ]
// 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档 // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档

View File

@ -1,8 +1,8 @@
/** /**
* *
*/ */
import { useDictStoreWithOut } from '@/store/modules/dict' import {useDictStoreWithOut} from '@/store/modules/dict'
import { ElementPlusInfoType } from '@/types/elementPlus' import {ElementPlusInfoType} from '@/types/elementPlus'
const dictStore = useDictStoreWithOut() const dictStore = useDictStoreWithOut()
@ -137,7 +137,7 @@ export enum DICT_TYPE {
INFRA_FILE_STORAGE = 'infra_file_storage', INFRA_FILE_STORAGE = 'infra_file_storage',
// ========== BPM 模块 ========== // ========== BPM 模块 ==========
BPM_MODEL_FORM_TYPE = 'bpm_model_form_type', BPM_MODEL_FORM_TYPE = 'bpm_model_category',
BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy', BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy',
BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status', BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
BPM_TASK_STATUS = 'bpm_task_status', BPM_TASK_STATUS = 'bpm_task_status',

View File

@ -0,0 +1,28 @@
<!-- TODO puhui999: 先单独一个后面封装成通用选择组件 -->
<template>
<el-select class="w-1/1" v-bind="attrs">
<el-option
v-for="(dict, index) in userOptions"
:key="index"
:label="dict.nickname"
:value="dict.id"
/>
</el-select>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'
defineOptions({ name: 'UserSelect' })
const attrs = useAttrs()
const userOptions = ref<UserApi.UserVO[]>([]) //
onMounted(async () => {
const data = await UserApi.getSimpleUserList()
if (!data || data.length === 0) {
return
}
userOptions.value = data
})
</script>