form-create: 封装通用选择器 hook
This commit is contained in:
parent
51e6887bde
commit
c1c21d826d
@ -2,18 +2,14 @@ import { useUploadFileRule } from './useUploadFileRule'
|
||||
import { useUploadImgRule } from './useUploadImgRule'
|
||||
import { useUploadImgsRule } from './useUploadImgsRule'
|
||||
import { useDictSelectRule } from './useDictSelectRule'
|
||||
import { useCurrencySelectRule } from './useCurrencySelectRule'
|
||||
import { useEditorRule } from './useEditorRule'
|
||||
import { useUserSelectRule } from './useUserSelectRule'
|
||||
import { useDeptSelectRule } from './useDeptSelectRule'
|
||||
import { useSelectRule } from './useSelectRule'
|
||||
|
||||
export {
|
||||
useUploadFileRule,
|
||||
useUploadImgRule,
|
||||
useUploadImgsRule,
|
||||
useDictSelectRule,
|
||||
useCurrencySelectRule,
|
||||
useEditorRule,
|
||||
useUserSelectRule,
|
||||
useDeptSelectRule
|
||||
useSelectRule
|
||||
}
|
||||
|
@ -1,37 +0,0 @@
|
||||
import { generateUUID } from '@/utils'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
import selectRule from '@/components/FormCreate/src/config/selectRule'
|
||||
import { DragRule } from '@/components/FormCreate/src/type'
|
||||
|
||||
export const useCurrencySelectRule = (): DragRule => {
|
||||
const label = '通用选择器'
|
||||
const name = 'CurrencySelect'
|
||||
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(),
|
||||
{
|
||||
type: 'input',
|
||||
field: 'restful',
|
||||
title: 'restful api 接口',
|
||||
value: '/system/user/simple-list'
|
||||
},
|
||||
{ type: 'input', field: 'labelField', title: 'label 属性', value: 'nickname' },
|
||||
{ type: 'input', field: 'valueField', title: 'value 属性', value: 'id' },
|
||||
...selectRule
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
@ -3,6 +3,9 @@ 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'
|
||||
|
||||
/**
|
||||
* 字典选择器规则,如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
|
||||
*/
|
||||
export const useDictSelectRule = () => {
|
||||
const label = '字典选择器'
|
||||
const name = 'DictSelect'
|
||||
|
@ -1,11 +1,15 @@
|
||||
import { generateUUID } from '@/utils'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
import selectRule from '@/components/FormCreate/src/config/selectRule'
|
||||
import { DragRule } from '@/components/FormCreate/src/type'
|
||||
import { SelectRuleOption } from '@/components/FormCreate/src/type'
|
||||
|
||||
export const useDeptSelectRule = (): DragRule => {
|
||||
const label = '部门选择器'
|
||||
const name = 'DeptSelect'
|
||||
/**
|
||||
* 通用选择器规则 hook
|
||||
* @param option 规则配置
|
||||
*/
|
||||
export const useSelectRule = (option: SelectRuleOption) => {
|
||||
const label = option.label
|
||||
const name = option.name
|
||||
return {
|
||||
icon: 'icon-select',
|
||||
label,
|
||||
@ -20,7 +24,10 @@ export const useDeptSelectRule = (): DragRule => {
|
||||
}
|
||||
},
|
||||
props(_, { t }) {
|
||||
return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule])
|
||||
if (!option.props) {
|
||||
option.props = []
|
||||
}
|
||||
return localeProps(t, name + '.props', [makeRequiredRule(), ...option.props, ...selectRule])
|
||||
}
|
||||
}
|
||||
}
|
@ -1,26 +0,0 @@
|
||||
import { generateUUID } from '@/utils'
|
||||
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
|
||||
import selectRule from '@/components/FormCreate/src/config/selectRule'
|
||||
import { DragRule } from '@/components/FormCreate/src/type'
|
||||
|
||||
export const useUserSelectRule = (): DragRule => {
|
||||
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])
|
||||
}
|
||||
}
|
||||
}
|
@ -39,3 +39,10 @@ export interface CurrencySelectProps {
|
||||
valueField?: string // 字典值类型
|
||||
restful?: string // api 接口
|
||||
}
|
||||
|
||||
// 选择组件规则配置类型
|
||||
export interface SelectRuleOption {
|
||||
label: string // label 名称
|
||||
name: string // 组件名称
|
||||
props?: Rule[] // 组件规则
|
||||
}
|
||||
|
@ -1,12 +1,10 @@
|
||||
import {
|
||||
useCurrencySelectRule,
|
||||
useDeptSelectRule,
|
||||
useDictSelectRule,
|
||||
useEditorRule,
|
||||
useSelectRule,
|
||||
useUploadFileRule,
|
||||
useUploadImgRule,
|
||||
useUploadImgsRule,
|
||||
useUserSelectRule
|
||||
useUploadImgsRule
|
||||
} from './config'
|
||||
import { Ref } from 'vue'
|
||||
import { Menu } from '@/components/FormCreate/src/type'
|
||||
@ -18,16 +16,46 @@ import { Menu } from '@/components/FormCreate/src/type'
|
||||
* - 单图上传
|
||||
* - 多图上传
|
||||
* - 字典选择器
|
||||
* - 系统用户选择器
|
||||
* - 用户选择器
|
||||
* - 部门选择器
|
||||
* - 富文本
|
||||
*/
|
||||
export const useFormCreateDesigner = (designer: Ref) => {
|
||||
export const useFormCreateDesigner = async (designer: Ref) => {
|
||||
const editorRule = useEditorRule()
|
||||
const uploadFileRule = useUploadFileRule()
|
||||
const uploadImgRule = useUploadImgRule()
|
||||
const uploadImgsRule = useUploadImgsRule()
|
||||
const dictSelectRule = useDictSelectRule()
|
||||
const currencySelectRule = useCurrencySelectRule()
|
||||
const restfulSelectRule = useSelectRule({
|
||||
name: 'RestfulSelect',
|
||||
label: '接口选择器',
|
||||
props: [
|
||||
{
|
||||
type: 'input',
|
||||
field: 'restful',
|
||||
title: 'restful api 接口',
|
||||
props: {
|
||||
placeholder: '/system/user/simple-list'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'labelField',
|
||||
title: 'label 属性',
|
||||
props: {
|
||||
placeholder: 'nickname'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
field: 'valueField',
|
||||
title: 'value 属性',
|
||||
props: {
|
||||
placeholder: 'id'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
/**
|
||||
* 构建表单组件
|
||||
@ -45,7 +73,7 @@ export const useFormCreateDesigner = (designer: Ref) => {
|
||||
uploadImgRule,
|
||||
uploadImgsRule,
|
||||
dictSelectRule,
|
||||
currencySelectRule
|
||||
restfulSelectRule
|
||||
]
|
||||
components.forEach((component) => {
|
||||
// 插入组件规则
|
||||
@ -59,8 +87,8 @@ export const useFormCreateDesigner = (designer: Ref) => {
|
||||
})
|
||||
}
|
||||
|
||||
const userSelectRule = useUserSelectRule()
|
||||
const deptSelectRule = useDeptSelectRule()
|
||||
const userSelectRule = useSelectRule({ name: 'UserSelect', label: '用户选择器' })
|
||||
const deptSelectRule = useSelectRule({ name: 'DeptSelect', label: '部门选择器' })
|
||||
/**
|
||||
* 构建系统字段菜单
|
||||
*/
|
||||
|
@ -35,7 +35,9 @@ const DeptSelect = useCurrencySelect({
|
||||
valueField: 'id',
|
||||
restful: '/system/dept/simple-list'
|
||||
})
|
||||
|
||||
const RestfulSelect = useCurrencySelect({
|
||||
name: 'RestfulSelect'
|
||||
})
|
||||
const components = [
|
||||
ElAside,
|
||||
ElPopconfirm,
|
||||
@ -55,6 +57,7 @@ const components = [
|
||||
DictSelect,
|
||||
UserSelect,
|
||||
DeptSelect,
|
||||
RestfulSelect,
|
||||
Editor
|
||||
]
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user