form-create: 封装通用选择器 hook

This commit is contained in:
puhui999 2024-05-01 17:29:13 +08:00
parent 51e6887bde
commit c1c21d826d
8 changed files with 66 additions and 85 deletions

View File

@ -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
}

View File

@ -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
])
}
}
}

View File

@ -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'

View File

@ -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])
}
}
}

View File

@ -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])
}
}
}

View File

@ -39,3 +39,10 @@ export interface CurrencySelectProps {
valueField?: string // 字典值类型
restful?: string // api 接口
}
// 选择组件规则配置类型
export interface SelectRuleOption {
label: string // label 名称
name: string // 组件名称
props?: Rule[] // 组件规则
}

View File

@ -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: '部门选择器' })
/**
*
*/

View File

@ -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
]