From b4d85b782e0c8f3a79202cfba26712e78bdca075 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Wed, 1 May 2024 19:53:35 +0800 Subject: [PATCH] =?UTF-8?q?form-create:=20=E5=B0=81=E8=A3=85=E9=80=9A?= =?UTF-8?q?=E7=94=A8=E9=80=89=E6=8B=A9=E5=99=A8=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DictSelect/index.ts | 3 - src/components/DictSelect/src/DictSelect.vue | 46 -------- .../src/components/useCurrencySelect.tsx | 103 ++++++++++++++++-- .../FormCreate/src/config/selectRule.ts | 11 ++ .../src/config/useDictSelectRule.ts | 2 +- src/components/FormCreate/src/type/index.ts | 5 +- .../FormCreate/src/useFormCreateDesigner.ts | 2 + src/plugins/formCreate/index.ts | 5 +- 8 files changed, 114 insertions(+), 63 deletions(-) delete mode 100644 src/components/DictSelect/index.ts delete mode 100644 src/components/DictSelect/src/DictSelect.vue diff --git a/src/components/DictSelect/index.ts b/src/components/DictSelect/index.ts deleted file mode 100644 index 164035fd..00000000 --- a/src/components/DictSelect/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import DictSelect from './src/DictSelect.vue' - -export { DictSelect } diff --git a/src/components/DictSelect/src/DictSelect.vue b/src/components/DictSelect/src/DictSelect.vue deleted file mode 100644 index 2d59e23c..00000000 --- a/src/components/DictSelect/src/DictSelect.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - - diff --git a/src/components/FormCreate/src/components/useCurrencySelect.tsx b/src/components/FormCreate/src/components/useCurrencySelect.tsx index ae9636a3..8da0b696 100644 --- a/src/components/FormCreate/src/components/useCurrencySelect.tsx +++ b/src/components/FormCreate/src/components/useCurrencySelect.tsx @@ -1,25 +1,41 @@ import request from '@/config/axios' import { isEmpty } from '@/utils/is' import { CurrencySelectProps } from '@/components/FormCreate/src/type' +import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict' export const useCurrencySelect = (option: CurrencySelectProps) => { return defineComponent({ name: option.name, props: { - // 字典类型 + // 选项标签 labelField: { type: String, - default: () => option.labelField ?? '' + default: () => option.labelField ?? 'label' }, - // 字典值类型 + // 选项的值 valueField: { type: String, - default: () => option.valueField ?? '' + default: () => option.valueField ?? 'value' }, // api 接口 restful: { type: String, default: () => option.restful ?? '' + }, + // 字典类型 + dictType: { + type: String, + default: '' + }, + // 字典值类型 'str' | 'int' | 'bool' + dictValueType: { + type: String, + default: 'str' + }, + // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio + selectType: { + type: String, + default: 'select' } }, setup(props) { @@ -27,6 +43,12 @@ export const useCurrencySelect = (option: CurrencySelectProps) => { const options = ref([]) // 下拉数据 const getOptions = async () => { options.value = [] + // 字典选择器 + if (option.isDict) { + options.value = getDictOptions() + return + } + // 接口选择器 if (isEmpty(props.restful)) { return } @@ -41,17 +63,78 @@ export const useCurrencySelect = (option: CurrencySelectProps) => { } console.log(`接口[${props.restful}] 返回结果不是一个数组`) } - + // 获得字典配置 + const getDictOptions = () => { + switch (props.dictValueType) { + case 'str': + return getStrDictOptions(props.dictType) + case 'int': + return getIntDictOptions(props.dictType) + case 'bool': + return getBoolDictOptions(props.dictType) + default: + return [] + } + } onMounted(async () => { await getOptions() }) + const buildSelect = () => { + return ( + <> + + {options.value.map((item, index) => ( + + ))} + + + ) + } + const buildCheckbox = () => { + if (isEmpty(options.value)) { + options.value = [ + { label: '选项1', value: '选项1' }, + { label: '选项2', value: '选项2' } + ] + } + return ( + <> + + {options.value.map((item, index) => ( + + ))} + + + ) + } + const buildRadio = () => { + if (isEmpty(options.value)) { + options.value = [ + { label: '选项1', value: '选项1' }, + { label: '选项2', value: '选项2' } + ] + } + return ( + <> + + {options.value.map((item, index) => ( + + {item.label} + + ))} + + + ) + } return () => ( <> - - {options.value.map((item, index) => ( - - ))} - + {props.selectType === 'select' + ? buildSelect() + : props.selectType === 'radio' + ? buildRadio() + : props.selectType === 'checkbox' + ? buildCheckbox() + : buildSelect()} ) } diff --git a/src/components/FormCreate/src/config/selectRule.ts b/src/components/FormCreate/src/config/selectRule.ts index 0974139e..3137aac7 100644 --- a/src/components/FormCreate/src/config/selectRule.ts +++ b/src/components/FormCreate/src/config/selectRule.ts @@ -1,4 +1,15 @@ const selectRule = [ + { + type: 'select', + field: 'selectType', + title: '选择器类型', + value: 'select', + options: [ + { label: '下拉框', value: 'select' }, + { label: '单选框', value: 'radio' }, + { label: '多选框', value: 'checkbox' } + ] + }, { type: 'switch', field: 'multiple', title: '是否多选' }, { type: 'switch', diff --git a/src/components/FormCreate/src/config/useDictSelectRule.ts b/src/components/FormCreate/src/config/useDictSelectRule.ts index 3350cb8e..d2a9c467 100644 --- a/src/components/FormCreate/src/config/useDictSelectRule.ts +++ b/src/components/FormCreate/src/config/useDictSelectRule.ts @@ -46,7 +46,7 @@ export const useDictSelectRule = () => { }, { type: 'select', - field: 'valueType', + field: 'dictValueType', title: '字典值类型', value: 'str', options: [ diff --git a/src/components/FormCreate/src/type/index.ts b/src/components/FormCreate/src/type/index.ts index 8500d776..ac248f11 100644 --- a/src/components/FormCreate/src/type/index.ts +++ b/src/components/FormCreate/src/type/index.ts @@ -35,9 +35,10 @@ export interface DragRule { // 通用下拉组件 Props 类型 export interface CurrencySelectProps { name: string // 组件名称 - labelField?: string // 字典类型 - valueField?: string // 字典值类型 + labelField?: string // 选项标签 + valueField?: string // 选项的值 restful?: string // api 接口 + isDict?: boolean // 是否字典选择器 } // 选择组件规则配置类型 diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts index 7c4e48b8..69772bd5 100644 --- a/src/components/FormCreate/src/useFormCreateDesigner.ts +++ b/src/components/FormCreate/src/useFormCreateDesigner.ts @@ -67,6 +67,8 @@ export const useFormCreateDesigner = async (designer: Ref) => { designer.value?.removeMenuItem('fc-editor') // 移除自带的下拉选择器组件，使用 currencySelectRule 替代 designer.value?.removeMenuItem('select') + designer.value?.removeMenuItem('radio') + designer.value?.removeMenuItem('checkbox') const components = [ editorRule, uploadFileRule, diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts index 9fc716c3..3a647e11 100644 --- a/src/plugins/formCreate/index.ts +++ b/src/plugins/formCreate/index.ts @@ -19,7 +19,6 @@ import formCreate from '@form-create/element-ui' import install from '@form-create/element-ui/auto-import' //======================= 自定义组件 ======================= import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile' -import { DictSelect } from '@/components/DictSelect' import { useCurrencySelect } from '@/components/FormCreate' import { Editor } from '@/components/Editor' @@ -38,6 +37,10 @@ const DeptSelect = useCurrencySelect({ const RestfulSelect = useCurrencySelect({ name: 'RestfulSelect' }) +const DictSelect = useCurrencySelect({ + name: 'DictSelect', + isDict: true +}) const components = [ ElAside, ElPopconfirm,