From c1c21d826d72ffa75223378bef68d99419d3b167 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Wed, 1 May 2024 17:29:13 +0800 Subject: [PATCH] =?UTF-8?q?form-create:=20=E5=B0=81=E8=A3=85=E9=80=9A?= =?UTF-8?q?=E7=94=A8=E9=80=89=E6=8B=A9=E5=99=A8=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormCreate/src/config/index.ts | 8 +--- .../src/config/useCurrencySelectRule.ts | 37 -------------- .../src/config/useDictSelectRule.ts | 3 ++ ...{useDeptSelectRule.ts => useSelectRule.ts} | 17 +++++-- .../src/config/useUserSelectRule.ts | 26 ---------- src/components/FormCreate/src/type/index.ts | 7 +++ .../FormCreate/src/useFormCreateDesigner.ts | 48 +++++++++++++++---- src/plugins/formCreate/index.ts | 5 +- 8 files changed, 66 insertions(+), 85 deletions(-) delete mode 100644 src/components/FormCreate/src/config/useCurrencySelectRule.ts rename src/components/FormCreate/src/config/{useDeptSelectRule.ts => useSelectRule.ts} (59%) delete mode 100644 src/components/FormCreate/src/config/useUserSelectRule.ts diff --git a/src/components/FormCreate/src/config/index.ts b/src/components/FormCreate/src/config/index.ts index c34d831a..b1e2ddea 100644 --- a/src/components/FormCreate/src/config/index.ts +++ b/src/components/FormCreate/src/config/index.ts @@ -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 } diff --git a/src/components/FormCreate/src/config/useCurrencySelectRule.ts b/src/components/FormCreate/src/config/useCurrencySelectRule.ts deleted file mode 100644 index 3ac65a66..00000000 --- a/src/components/FormCreate/src/config/useCurrencySelectRule.ts +++ /dev/null @@ -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 - ]) - } - } -} diff --git a/src/components/FormCreate/src/config/useDictSelectRule.ts b/src/components/FormCreate/src/config/useDictSelectRule.ts index 7a1afc60..3350cb8e 100644 --- a/src/components/FormCreate/src/config/useDictSelectRule.ts +++ b/src/components/FormCreate/src/config/useDictSelectRule.ts @@ -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' diff --git a/src/components/FormCreate/src/config/useDeptSelectRule.ts b/src/components/FormCreate/src/config/useSelectRule.ts similarity index 59% rename from src/components/FormCreate/src/config/useDeptSelectRule.ts rename to src/components/FormCreate/src/config/useSelectRule.ts index e46165c1..fd23ac3a 100644 --- a/src/components/FormCreate/src/config/useDeptSelectRule.ts +++ b/src/components/FormCreate/src/config/useSelectRule.ts @@ -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]) } } } diff --git a/src/components/FormCreate/src/config/useUserSelectRule.ts b/src/components/FormCreate/src/config/useUserSelectRule.ts deleted file mode 100644 index ff5bc869..00000000 --- a/src/components/FormCreate/src/config/useUserSelectRule.ts +++ /dev/null @@ -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]) - } - } -} diff --git a/src/components/FormCreate/src/type/index.ts b/src/components/FormCreate/src/type/index.ts index 38205073..8500d776 100644 --- a/src/components/FormCreate/src/type/index.ts +++ b/src/components/FormCreate/src/type/index.ts @@ -39,3 +39,10 @@ export interface CurrencySelectProps { valueField?: string // 字典值类型 restful?: string // api 接口 } + +// 选择组件规则配置类型 +export interface SelectRuleOption { + label: string // label 名称 + name: string // 组件名称 + props?: Rule[] // 组件规则 +} diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts index 1601b1c4..7c4e48b8 100644 --- a/src/components/FormCreate/src/useFormCreateDesigner.ts +++ b/src/components/FormCreate/src/useFormCreateDesigner.ts @@ -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: '部门选择器' }) /** * 构建系统字段菜单 */ diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts index da74a7bf..9fc716c3 100644 --- a/src/plugins/formCreate/index.ts +++ b/src/plugins/formCreate/index.ts @@ -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 ]