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/index.ts b/src/components/FormCreate/index.ts
index d50ed3c6..9d32778b 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 00000000..204746d1
--- /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 00000000..54c0a33b
--- /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 c3939159..b1e2ddea 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 0974139e..281d3739 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 7a1afc60..3db630bc 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/useSelectRule.ts b/src/components/FormCreate/src/config/useSelectRule.ts
new file mode 100644
index 00000000..732c5269
--- /dev/null
+++ b/src/components/FormCreate/src/config/useSelectRule.ts
@@ -0,0 +1,33 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
+import { SelectRuleOption } from '@/components/FormCreate/src/type'
+
+/**
+ * 通用选择器规则 hook
+ * @param option 规则配置
+ */
+export const useSelectRule = (option: SelectRuleOption) => {
+ const label = option.label
+ const name = option.name
+ return {
+ icon: option.icon,
+ label,
+ name,
+ rule() {
+ return {
+ type: name,
+ field: generateUUID(),
+ title: label,
+ info: '',
+ $required: false
+ }
+ },
+ props(_, { t }) {
+ if (!option.props) {
+ option.props = []
+ }
+ return localeProps(t, name + '.props', [makeRequiredRule(), ...option.props, ...selectRule])
+ }
+ }
+}
diff --git a/src/components/FormCreate/src/config/useUserSelectRule.ts b/src/components/FormCreate/src/config/useUserSelectRule.ts
deleted file mode 100644
index dd5e51c3..00000000
--- a/src/components/FormCreate/src/config/useUserSelectRule.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { generateUUID } from '@/utils'
-import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
-import selectRule from '@/components/FormCreate/src/config/selectRule'
-
-export const useUserSelectRule = () => {
- const label = '用户选择器'
- const name = 'UserSelect'
- return {
- icon: 'icon-select',
- label,
- name,
- rule() {
- return {
- type: name,
- field: generateUUID(),
- title: label,
- info: '',
- $required: false
- }
- },
- props(_, { t }) {
- return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule])
- }
- }
-}
diff --git a/src/components/FormCreate/src/type/index.ts b/src/components/FormCreate/src/type/index.ts
new file mode 100644
index 00000000..42dccc76
--- /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