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,