Skip to content

Commit 68dae2d

Browse files
author
puhui999
committed
form-create-designer: 表单组件新增字典选择器
1 parent d05c67f commit 68dae2d

File tree

8 files changed

+375
-4
lines changed

8 files changed

+375
-4
lines changed

‎src/components/DictSelect/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import DictSelect from './src/DictSelect.vue'
2+
3+
export { DictSelect }

‎src/components/DictSelect/src/DictSelect.vue

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<el-select :model-value="modelValue" class="w-1/1" v-bind="attrs" @change="changeValue">
3+
<template v-if="valueType === 'int'">
4+
<el-option
5+
v-for="(dict, index) in getIntDictOptions(dictType)"
6+
:key="index"
7+
:label="dict.label"
8+
:value="dict.value"
9+
/>
10+
</template>
11+
<template v-if="valueType === 'str'">
12+
<el-option
13+
v-for="(dict, index) in getStrDictOptions(dictType)"
14+
:key="index"
15+
:label="dict.label"
16+
:value="dict.value"
17+
/>
18+
</template>
19+
<template v-if="valueType === 'bool'">
20+
<el-option
21+
v-for="(dict, index) in getBoolDictOptions(dictType)"
22+
:key="index"
23+
:label="dict.label"
24+
:value="dict.value"
25+
/>
26+
</template>
27+
</el-select>
28+
</template>
29+
30+
<script lang="ts" setup>
31+
import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
32+
33+
// 接受父组件参数
34+
interface Props {
35+
modelValue?: any // 值
36+
dictType: string // 字典类型
37+
valueType: string // 字典值类型
38+
}
39+
40+
withDefaults(defineProps<Props>(), {
41+
dictType: '',
42+
valueType: 'str'
43+
})
44+
const attrs = useAttrs()
45+
defineOptions({ name: 'DictSelect' })
46+
const emits = defineEmits<{
47+
(e: 'update:modelValue', v: any): void
48+
}>()
49+
const changeValue = (value: any) => {
50+
console.log(value)
51+
emits('update:modelValue', value)
52+
}
53+
</script>

‎src/components/FormCreate/src/config/index.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import { useUploadFileRule } from './useUploadFileRule'
22
import { useUploadImgRule } from './useUploadImgRule'
33
import { useUploadImgsRule } from './useUploadImgsRule'
4+
import { useDictSelectRule } from './useDictSelectRule'
5+
import { useUserSelectRule } from './useUserSelectRule'
46

5-
export { useUploadFileRule, useUploadImgRule, useUploadImgsRule }
7+
export {
8+
useUploadFileRule,
9+
useUploadImgRule,
10+
useUploadImgsRule,
11+
useDictSelectRule,
12+
useUserSelectRule
13+
}

‎src/components/FormCreate/src/config/useDictSelectRule.ts

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { generateUUID } from '@/utils'
2+
import * as DictDataApi from '@/api/system/dict/dict.type'
3+
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
4+
5+
export const useDictSelectRule = () => {
6+
const label = '字典选择器'
7+
const name = 'DictSelect'
8+
const dictOptions = ref<{ label: string; value: string }[]>([]) // 字典类型下拉数据
9+
onMounted(async () => {
10+
const data = await DictDataApi.getSimpleDictTypeList()
11+
if (!data || data.length === 0) {
12+
return
13+
}
14+
dictOptions.value =
15+
data?.map((item: DictDataApi.DictTypeVO) => ({
16+
label: item.name,
17+
value: item.type
18+
})) ?? []
19+
})
20+
return {
21+
icon: 'icon-select',
22+
label,
23+
name,
24+
rule() {
25+
return {
26+
type: name,
27+
field: generateUUID(),
28+
title: label,
29+
info: '',
30+
$required: false
31+
}
32+
},
33+
props(_, { t }) {
34+
return localeProps(t, name + '.props', [
35+
makeRequiredRule(),
36+
{
37+
type: 'select',
38+
field: 'dictType',
39+
title: '字典类型',
40+
value: '',
41+
options: dictOptions.value
42+
},
43+
{
44+
type: 'select',
45+
field: 'valueType',
46+
title: '字典值类型',
47+
value: 'str',
48+
options: [
49+
{ label: '数字', value: 'int' },
50+
{ label: '字符串', value: 'str' },
51+
{ label: '布尔值', value: 'bool' }
52+
]
53+
},
54+
{ type: 'switch', field: 'multiple', title: '是否多选' },
55+
{
56+
type: 'switch',
57+
field: 'disabled',
58+
title: '是否禁用'
59+
},
60+
{ type: 'switch', field: 'clearable', title: '是否可以清空选项' },
61+
{
62+
type: 'switch',
63+
field: 'collapseTags',
64+
title: '多选时是否将选中值按文字的形式展示'
65+
},
66+
{
67+
type: 'inputNumber',
68+
field: 'multipleLimit',
69+
title: '多选时用户最多可以选择的项目数，为 0 则不限制',
70+
props: { min: 0 }
71+
},
72+
{
73+
type: 'input',
74+
field: 'autocomplete',
75+
title: 'autocomplete 属性'
76+
},
77+
{ type: 'input', field: 'placeholder', title: '占位符' },
78+
{
79+
type: 'switch',
80+
field: 'filterable',
81+
title: '是否可搜索'
82+
},
83+
{ type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
84+
{
85+
type: 'input',
86+
field: 'noMatchText',
87+
title: '搜索条件无匹配时显示的文字'
88+
},
89+
{
90+
type: 'switch',
91+
field: 'remote',
92+
title: '其中的选项是否从服务器远程加载'
93+
},
94+
{
95+
type: 'Struct',
96+
field: 'remoteMethod',
97+
title: '自定义远程搜索方法'
98+
},
99+
{ type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
100+
{
101+
type: 'switch',
102+
field: 'reserveKeyword',
103+
title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
104+
},
105+
{
106+
type: 'switch',
107+
field: 'defaultFirstOption',
108+
title: '在输入框按下回车，选择第一个匹配项'
109+
},
110+
{
111+
type: 'switch',
112+
field: 'popperAppendToBody',
113+
title: '是否将弹出框插入至 body 元素',
114+
value: true
115+
},
116+
{
117+
type: 'switch',
118+
field: 'automaticDropdown',
119+
title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
120+
}
121+
])
122+
}
123+
}
124+
}

‎src/components/FormCreate/src/config/useUserSelectRule.ts

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { generateUUID } from '@/utils'
2+
import * as UserApi from '@/api/system/user'
3+
import { localeProps, makeOptionsRule, makeRequiredRule } from '@/components/FormCreate/src/utils'
4+
5+
export const useUserSelectRule = () => {
6+
const label = 'aa选择器'
7+
const name = 'select'
8+
const userOptions = ref<{ label: string; value: number }[]>([]) // 用户下拉数据
9+
onMounted(async () => {
10+
const data = await UserApi.getSimpleUserList()
11+
if (!data || data.length === 0) {
12+
return
13+
}
14+
userOptions.value =
15+
data?.map((item: UserApi.UserVO) => ({
16+
label: item.nickname,
17+
value: item.id
18+
})) ?? []
19+
})
20+
return {
21+
icon: 'icon-select',
22+
label,
23+
name,
24+
rule() {
25+
return {
26+
type: name,
27+
field: generateUUID(),
28+
title: label,
29+
info: '',
30+
$required: false
31+
}
32+
},
33+
props(_, { t }) {
34+
return localeProps(t, name + '.props', [
35+
makeRequiredRule(),
36+
makeOptionsRule(t, 'options', userOptions.value),
37+
{ type: 'switch', field: 'multiple', title: '是否多选' },
38+
{
39+
type: 'switch',
40+
field: 'disabled',
41+
title: '是否禁用'
42+
},
43+
{ type: 'switch', field: 'clearable', title: '是否可以清空选项' },
44+
{
45+
type: 'switch',
46+
field: 'collapseTags',
47+
title: '多选时是否将选中值按文字的形式展示'
48+
},
49+
{
50+
type: 'inputNumber',
51+
field: 'multipleLimit',
52+
title: '多选时用户最多可以选择的项目数，为 0 则不限制',
53+
props: { min: 0 }
54+
},
55+
{
56+
type: 'input',
57+
field: 'autocomplete',
58+
title: 'autocomplete 属性'
59+
},
60+
{ type: 'input', field: 'placeholder', title: '占位符' },
61+
{
62+
type: 'switch',
63+
field: 'filterable',
64+
title: '是否可搜索'
65+
},
66+
{ type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
67+
{
68+
type: 'input',
69+
field: 'noMatchText',
70+
title: '搜索条件无匹配时显示的文字'
71+
},
72+
{
73+
type: 'switch',
74+
field: 'remote',
75+
title: '其中的选项是否从服务器远程加载'
76+
},
77+
{
78+
type: 'Struct',
79+
field: 'remoteMethod',
80+
title: '自定义远程搜索方法'
81+
},
82+
{ type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
83+
{
84+
type: 'switch',
85+
field: 'reserveKeyword',
86+
title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
87+
},
88+
{
89+
type: 'switch',
90+
field: 'defaultFirstOption',
91+
title: '在输入框按下回车，选择第一个匹配项'
92+
},
93+
{
94+
type: 'switch',
95+
field: 'popperAppendToBody',
96+
title: '是否将弹出框插入至 body 元素',
97+
value: true
98+
},
99+
{
100+
type: 'switch',
101+
field: 'automaticDropdown',
102+
title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
103+
}
104+
])
105+
}
106+
}
107+
}

‎src/components/FormCreate/src/useFormCreateDesigner.ts

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { useUploadFileRule, useUploadImgRule, useUploadImgsRule } from './config'
1+
import {
2+
useDictSelectRule,
3+
useUploadFileRule,
4+
useUploadImgRule,
5+
useUploadImgsRule,
6+
useUserSelectRule
7+
} from './config'
28
import { Ref } from 'vue'
39

410
/**
@@ -12,11 +18,19 @@ export const useFormCreateDesigner = (designer: Ref) => {
1218
const uploadFileRule = useUploadFileRule()
1319
const uploadImgRule = useUploadImgRule()
1420
const uploadImgsRule = useUploadImgsRule()
21+
const dictSelectRule = useDictSelectRule()
22+
const userSelectRule = useUserSelectRule()
1523

1624
onMounted(() => {
1725
// 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
1826
designer.value?.removeMenuItem('upload')
19-
const components = [uploadFileRule, uploadImgRule, uploadImgsRule]
27+
const components = [
28+
uploadFileRule,
29+
uploadImgRule,
30+
uploadImgsRule,
31+
dictSelectRule,
32+
userSelectRule
33+
]
2034
components.forEach((component) => {
2135
// 插入组件规则
2236
designer.value?.addComponent(component)

0 commit comments

Comments
 (0)