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

Author: puhui999

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
 }

src/components/FormCreate/src/config/useCurrencySelectRule.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'

src/components/FormCreate/src/config/useDictSelectRule.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])
     }
   }
 }

src/components/FormCreate/src/config/useDeptSelectRule.ts renamed to src/components/FormCreate/src/config/useSelectRule.ts

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

src/components/FormCreate/src/config/useUserSelectRule.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: '部门选择器' })
   /**
    * 构建系统字段菜单
    */

src/components/FormCreate/src/type/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
 ]