diff --git a/src/components/DictSelect/index.ts b/src/components/DictSelect/index.ts
deleted file mode 100644
index 164035fd52d699e9b10afdef72bdf69c485459a0..0000000000000000000000000000000000000000
--- 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 2d59e23c9722e1c9f4786093e623cc39cdffc017..0000000000000000000000000000000000000000
--- a/src/components/DictSelect/src/DictSelect.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/FormCreate/index.ts b/src/components/FormCreate/index.ts
index d50ed3c6e29cd2e0f69c565ef2e2f5b333680df2..9d32778b4d0137cea9b9b01b06676cc039c624b4 100644
--- a/src/components/FormCreate/index.ts
+++ b/src/components/FormCreate/index.ts
@@ -1,3 +1,4 @@
import { useFormCreateDesigner } from './src/useFormCreateDesigner'
+import { useApiSelect } from './src/components/useApiSelect'
-export { useFormCreateDesigner }
+export { useFormCreateDesigner, useApiSelect }
diff --git a/src/components/FormCreate/src/components/DictSelect.vue b/src/components/FormCreate/src/components/DictSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..204746d17d56d0660366b0cd00b151f2f3e6dcff
--- /dev/null
+++ b/src/components/FormCreate/src/components/DictSelect.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+ {{ dict.label }}
+
+
+
+
+
+
+
+
diff --git a/src/components/FormCreate/src/components/useApiSelect.tsx b/src/components/FormCreate/src/components/useApiSelect.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..54c0a33b49565940f8cf16acb3aed4d9b841bbdc
--- /dev/null
+++ b/src/components/FormCreate/src/components/useApiSelect.tsx
@@ -0,0 +1,143 @@
+import request from '@/config/axios'
+import { isEmpty } from '@/utils/is'
+import { ApiSelectProps } from '@/components/FormCreate/src/type'
+import { jsonParse } from '@/utils'
+
+export const useApiSelect = (option: ApiSelectProps) => {
+ return defineComponent({
+ name: option.name,
+ props: {
+ // 选项标签
+ labelField: {
+ type: String,
+ default: () => option.labelField ?? 'label'
+ },
+ // 选项的值
+ valueField: {
+ type: String,
+ default: () => option.valueField ?? 'value'
+ },
+ // api 接口
+ url: {
+ type: String,
+ default: () => option.url ?? ''
+ },
+ // 请求类型
+ method: {
+ type: String,
+ default: 'GET'
+ },
+ // 请求参数
+ data: {
+ type: String,
+ default: ''
+ },
+ // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
+ selectType: {
+ type: String,
+ default: 'select'
+ },
+ // 是否多选
+ multiple: {
+ type: Boolean,
+ default: false
+ }
+ },
+ setup(props) {
+ const attrs = useAttrs()
+ const options = ref([]) // 下拉数据
+ const getOptions = async () => {
+ options.value = []
+ // 接口选择器
+ if (isEmpty(props.url)) {
+ return
+ }
+ let data = []
+ switch (props.method) {
+ case 'GET':
+ data = await request.get({ url: props.url })
+ break
+ case 'POST':
+ data = await request.post({ url: props.url, data: jsonParse(props.data) })
+ break
+ }
+
+ if (Array.isArray(data)) {
+ options.value = data.map((item: any) => ({
+ label: item[props.labelField],
+ value: item[props.valueField]
+ }))
+ return
+ }
+ console.log(`接口[${props.url}] 返回结果不是一个数组`)
+ }
+
+ onMounted(async () => {
+ await getOptions()
+ })
+
+ const buildSelect = () => {
+ if (props.multiple) {
+ // fix：多写此步是为了解决 multiple 属性问题
+ return (
+
+ {options.value.map((item, index) => (
+
+ ))}
+
+ )
+ }
+ 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 () => (
+ <>
+ {props.selectType === 'select'
+ ? buildSelect()
+ : props.selectType === 'radio'
+ ? buildRadio()
+ : props.selectType === 'checkbox'
+ ? buildCheckbox()
+ : buildSelect()}
+
+ )
+ }
+ })
+}
diff --git a/src/components/FormCreate/src/config/index.ts b/src/components/FormCreate/src/config/index.ts
index c3939159beb605bad2c8c20749344d0f27ea4f8d..b1e2ddea58881566a880a09f0ab8d992bdcd6831 100644
--- a/src/components/FormCreate/src/config/index.ts
+++ b/src/components/FormCreate/src/config/index.ts
@@ -2,14 +2,14 @@ import { useUploadFileRule } from './useUploadFileRule'
import { useUploadImgRule } from './useUploadImgRule'
import { useUploadImgsRule } from './useUploadImgsRule'
import { useDictSelectRule } from './useDictSelectRule'
-import { useUserSelectRule } from './useUserSelectRule'
import { useEditorRule } from './useEditorRule'
+import { useSelectRule } from './useSelectRule'
export {
useUploadFileRule,
useUploadImgRule,
useUploadImgsRule,
useDictSelectRule,
- useUserSelectRule,
- useEditorRule
+ useEditorRule,
+ useSelectRule
}
diff --git a/src/components/FormCreate/src/config/selectRule.ts b/src/components/FormCreate/src/config/selectRule.ts
index 0974139e02d396a0aa4ce87bed1372247988cea0..281d37392d37f6a4d6fffe32fc537cdcd7855b08 100644
--- a/src/components/FormCreate/src/config/selectRule.ts
+++ b/src/components/FormCreate/src/config/selectRule.ts
@@ -1,4 +1,24 @@
const selectRule = [
+ {
+ type: 'select',
+ field: 'selectType',
+ title: '选择器类型',
+ value: 'select',
+ options: [
+ { label: '下拉框', value: 'select' },
+ { label: '单选框', value: 'radio' },
+ { label: '多选框', value: 'checkbox' }
+ ],
+ // 参考 https://www.form-create.com/v3/guide/control 组件联动，单选框和多选框不需要多选属性
+ control: [
+ {
+ value: 'select',
+ condition: '=',
+ method: 'hidden',
+ rule: ['multiple']
+ }
+ ]
+ },
{ type: 'switch', field: 'multiple', title: '是否多选' },
{
type: 'switch',
@@ -68,4 +88,60 @@ const selectRule = [
}
]
-export default selectRule
+const apiSelectRule = [
+ {
+ type: 'input',
+ field: 'url',
+ title: 'url 地址',
+ props: {
+ placeholder: '/system/user/simple-list'
+ }
+ },
+ {
+ type: 'select',
+ field: 'method',
+ title: '请求类型',
+ value: 'GET',
+ options: [
+ { label: 'GET', value: 'GET' },
+ { label: 'POST', value: 'POST' }
+ ],
+ control: [
+ {
+ value: 'GET',
+ condition: '!=',
+ method: 'hidden',
+ rule: [
+ {
+ type: 'input',
+ field: 'data',
+ title: '请求参数 JSON 格式',
+ props: {
+ autosize: true,
+ type: 'textarea',
+ placeholder: '{"type": 1}'
+ }
+ }
+ ]
+ }
+ ]
+ },
+ {
+ type: 'input',
+ field: 'labelField',
+ title: 'label 属性',
+ props: {
+ placeholder: 'nickname'
+ }
+ },
+ {
+ type: 'input',
+ field: 'valueField',
+ title: 'value 属性',
+ props: {
+ placeholder: 'id'
+ }
+ }
+]
+
+export { selectRule, apiSelectRule }
diff --git a/src/components/FormCreate/src/config/useDictSelectRule.ts b/src/components/FormCreate/src/config/useDictSelectRule.ts
index 7a1afc6091bbbdc7b314d5c20130eb6aeec99f88..3db630bcfb0ef17b55a3c237f328062c8284edca 100644
--- a/src/components/FormCreate/src/config/useDictSelectRule.ts
+++ b/src/components/FormCreate/src/config/useDictSelectRule.ts
@@ -1,8 +1,11 @@
import { generateUUID } from '@/utils'
import * as DictDataApi from '@/api/system/dict/dict.type'
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
-import selectRule from '@/components/FormCreate/src/config/selectRule'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
+/**
+ * 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
+ */
export const useDictSelectRule = () => {
const label = '字典选择器'
const name = 'DictSelect'
@@ -19,7 +22,7 @@ export const useDictSelectRule = () => {
})) ?? []
})
return {
- icon: 'icon-select',
+ icon: 'icon-doc-text',
label,
name,
rule() {
@@ -43,7 +46,7 @@ export const useDictSelectRule = () => {
},
{
type: 'select',
- field: 'valueType',
+ field: 'dictValueType',
title: '字典值类型',
value: 'str',
options: [
diff --git a/src/components/FormCreate/src/config/useUserSelectRule.ts b/src/components/FormCreate/src/config/useSelectRule.ts
similarity index 47%
rename from src/components/FormCreate/src/config/useUserSelectRule.ts
rename to src/components/FormCreate/src/config/useSelectRule.ts
index dd5e51c3b3f75ef8dd42af861b26db8ab88b9d72..732c52693dc260b1e5b13e474cffeeffbabbdbaf 100644
--- a/src/components/FormCreate/src/config/useUserSelectRule.ts
+++ b/src/components/FormCreate/src/config/useSelectRule.ts
@@ -1,12 +1,17 @@
import { generateUUID } from '@/utils'
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
-import selectRule from '@/components/FormCreate/src/config/selectRule'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
+import { SelectRuleOption } from '@/components/FormCreate/src/type'
-export const useUserSelectRule = () => {
- const label = '用户选择器'
- const name = 'UserSelect'
+/**
+ * 通用选择器规则 hook
+ * @param option 规则配置
+ */
+export const useSelectRule = (option: SelectRuleOption) => {
+ const label = option.label
+ const name = option.name
return {
- icon: 'icon-select',
+ icon: option.icon,
label,
name,
rule() {
@@ -19,7 +24,10 @@ export const useUserSelectRule = () => {
}
},
props(_, { t }) {
- return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule])
+ if (!option.props) {
+ option.props = []
+ }
+ return localeProps(t, name + '.props', [makeRequiredRule(), ...option.props, ...selectRule])
}
}
}
diff --git a/src/components/FormCreate/src/type/index.ts b/src/components/FormCreate/src/type/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42dccc76470b35c616fe15b11a5cae98cc83fa5f
--- /dev/null
+++ b/src/components/FormCreate/src/type/index.ts
@@ -0,0 +1,50 @@
+import { Rule } from '@form-create/element-ui' //左侧拖拽按钮
+
+// 左侧拖拽按钮
+export interface MenuItem {
+ label: string
+ name: string
+ icon: string
+}
+
+// 左侧拖拽按钮分类
+export interface Menu {
+ title: string
+ name: string
+ list: MenuItem[]
+}
+
+export interface MenuList extends Array