diff --git a/src/components/FormCreate/index.ts b/src/components/FormCreate/index.ts
index 9da34889..9d32778b 100644
--- a/src/components/FormCreate/index.ts
+++ b/src/components/FormCreate/index.ts
@@ -1,4 +1,4 @@
import { useFormCreateDesigner } from './src/useFormCreateDesigner'
-import { useCurrencySelect } from './src/components/useCurrencySelect'
+import { useApiSelect } from './src/components/useApiSelect'
-export { useFormCreateDesigner, useCurrencySelect }
+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/useCurrencySelect.tsx b/src/components/FormCreate/src/components/useApiSelect.tsx
similarity index 67%
rename from src/components/FormCreate/src/components/useCurrencySelect.tsx
rename to src/components/FormCreate/src/components/useApiSelect.tsx
index 82d708c6..54c0a33b 100644
--- a/src/components/FormCreate/src/components/useCurrencySelect.tsx
+++ b/src/components/FormCreate/src/components/useApiSelect.tsx
@@ -1,9 +1,9 @@
import request from '@/config/axios'
import { isEmpty } from '@/utils/is'
-import { CurrencySelectProps } from '@/components/FormCreate/src/type'
-import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { ApiSelectProps } from '@/components/FormCreate/src/type'
+import { jsonParse } from '@/utils'
-export const useCurrencySelect = (option: CurrencySelectProps) => {
+export const useApiSelect = (option: ApiSelectProps) => {
return defineComponent({
name: option.name,
props: {
@@ -18,47 +18,50 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
default: () => option.valueField ?? 'value'
},
// api 接口
- restful: {
+ url: {
type: String,
- default: () => option.restful ?? ''
+ default: () => option.url ?? ''
},
- // 字典类型
- dictType: {
+ // 请求类型
+ method: {
+ type: String,
+ default: 'GET'
+ },
+ // 请求参数
+ data: {
type: String,
default: ''
},
- // 字典值类型 'str' | 'int' | 'bool'
- dictValueType: {
- type: String,
- default: 'str'
- },
// 选择器类型,下拉框 select、多选框 checkbox、单选框 radio
selectType: {
type: String,
default: 'select'
+ },
+ // 是否多选
+ multiple: {
+ type: Boolean,
+ default: false
}
- // // 是否多选
- // multiple: {
- // type: Boolean,
- // default: false
- // }
},
setup(props) {
const attrs = useAttrs()
const options = ref([]) // 下拉数据
const getOptions = async () => {
options.value = []
- // 字典选择器
- if (option.isDict) {
- options.value = getDictOptions()
- return
- }
// 接口选择器
- if (isEmpty(props.restful)) {
+ if (isEmpty(props.url)) {
return
}
- // TODO 只支持 GET 查询,复杂下拉构建条件请使用业务表单
- const data = await request.get({ url: props.restful })
+ 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],
@@ -66,26 +69,24 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
}))
return
}
- 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 []
- }
+ console.log(`接口[${props.url}] 返回结果不是一个数组`)
}
+
onMounted(async () => {
await getOptions()
})
- // TODO puhui999: 单下拉多选的时候页面会卡住报错,下次解决
+
const buildSelect = () => {
+ if (props.multiple) {
+ // fix:多写此步是为了解决 multiple 属性问题
+ return (
+
+ {options.value.map((item, index) => (
+
+ ))}
+
+ )
+ }
return (
{options.value.map((item, index) => (
diff --git a/src/components/FormCreate/src/config/selectRule.ts b/src/components/FormCreate/src/config/selectRule.ts
index 3137aac7..281d3739 100644
--- a/src/components/FormCreate/src/config/selectRule.ts
+++ b/src/components/FormCreate/src/config/selectRule.ts
@@ -8,6 +8,15 @@ const selectRule = [
{ 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: '是否多选' },
@@ -79,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 d2a9c467..d158842c 100644
--- a/src/components/FormCreate/src/config/useDictSelectRule.ts
+++ b/src/components/FormCreate/src/config/useDictSelectRule.ts
@@ -1,7 +1,7 @@
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
diff --git a/src/components/FormCreate/src/config/useSelectRule.ts b/src/components/FormCreate/src/config/useSelectRule.ts
index fd23ac3a..93c6e8d5 100644
--- a/src/components/FormCreate/src/config/useSelectRule.ts
+++ b/src/components/FormCreate/src/config/useSelectRule.ts
@@ -1,6 +1,6 @@
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'
/**
diff --git a/src/components/FormCreate/src/type/index.ts b/src/components/FormCreate/src/type/index.ts
index ac248f11..07e011cf 100644
--- a/src/components/FormCreate/src/type/index.ts
+++ b/src/components/FormCreate/src/type/index.ts
@@ -1,13 +1,13 @@
import { Rule } from '@form-create/element-ui' //左侧拖拽按钮
-//左侧拖拽按钮
+// 左侧拖拽按钮
export interface MenuItem {
label: string
name: string
icon: string
}
-//左侧拖拽按钮分类
+// 左侧拖拽按钮分类
export interface Menu {
title: string
name: string
@@ -16,7 +16,7 @@ export interface Menu {
export interface MenuList extends Array