From c77526e8c5e5156a705d3f2f92ce9b01acafc678 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 1 May 2024 20:42:53 +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/useCurrencySelect.tsx      | 46 ++++++-------
 .../FormCreate/src/useFormCreateDesigner.ts   | 65 +++++++++----------
 2 files changed, 52 insertions(+), 59 deletions(-)

diff --git a/src/components/FormCreate/src/components/useCurrencySelect.tsx b/src/components/FormCreate/src/components/useCurrencySelect.tsx
index 8da0b696..82d708c6 100644
--- a/src/components/FormCreate/src/components/useCurrencySelect.tsx
+++ b/src/components/FormCreate/src/components/useCurrencySelect.tsx
@@ -37,6 +37,11 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
         type: String,
         default: 'select'
       }
+      // // 是否多选
+      // multiple: {
+      //   type: Boolean,
+      //   default: false
+      // }
     },
     setup(props) {
       const attrs = useAttrs()
@@ -79,15 +84,14 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
       onMounted(async () => {
         await getOptions()
       })
+      // TODO puhui999: 单下拉多选的时候页面会卡住报错，下次解决
       const buildSelect = () => {
         return (
-          <>
-            <el-select class="w-1/1" {...attrs}>
-              {options.value.map((item, index) => (
-                <el-option key={index} label={item.label} value={item.value} />
-              ))}
-            </el-select>
-          </>
+          <el-select class="w-1/1" {...attrs}>
+            {options.value.map((item, index) => (
+              <el-option key={index} label={item.label} value={item.value} />
+            ))}
+          </el-select>
         )
       }
       const buildCheckbox = () => {
@@ -98,13 +102,11 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
           ]
         }
         return (
-          <>
-            <el-checkbox-group class="w-1/1" {...attrs}>
-              {options.value.map((item, index) => (
-                <el-checkbox key={index} label={item.label} value={item.value} />
-              ))}
-            </el-checkbox-group>
-          </>
+          <el-checkbox-group class="w-1/1" {...attrs}>
+            {options.value.map((item, index) => (
+              <el-checkbox key={index} label={item.label} value={item.value} />
+            ))}
+          </el-checkbox-group>
         )
       }
       const buildRadio = () => {
@@ -115,15 +117,13 @@ export const useCurrencySelect = (option: CurrencySelectProps) => {
           ]
         }
         return (
-          <>
-            <el-radio-group class="w-1/1" {...attrs}>
-              {options.value.map((item, index) => (
-                <el-radio key={index} value={item.value}>
-                  {item.label}
-                </el-radio>
-              ))}
-            </el-radio-group>
-          </>
+          <el-radio-group class="w-1/1" {...attrs}>
+            {options.value.map((item, index) => (
+              <el-radio key={index} value={item.value}>
+                {item.label}
+              </el-radio>
+            ))}
+          </el-radio-group>
         )
       }
       return () => (
diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts
index 69772bd5..3875b72c 100644
--- a/src/components/FormCreate/src/useFormCreateDesigner.ts
+++ b/src/components/FormCreate/src/useFormCreateDesigner.ts
@@ -25,6 +25,30 @@ export const useFormCreateDesigner = async (designer: Ref) => {
   const uploadFileRule = useUploadFileRule()
   const uploadImgRule = useUploadImgRule()
   const uploadImgsRule = useUploadImgsRule()
+
+  /**
+   * 构建表单组件
+   */
+  const buildFormComponents = () => {
+    // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
+    designer.value?.removeMenuItem('upload')
+    // 移除自带的富文本组件规则，使用 editorRule 替代
+    designer.value?.removeMenuItem('fc-editor')
+    const components = [editorRule, uploadFileRule, uploadImgRule, uploadImgsRule]
+    components.forEach((component) => {
+      // 插入组件规则
+      designer.value?.addComponent(component)
+      // 插入拖拽按钮到 `main` 分类下
+      designer.value?.appendMenuItem('main', {
+        icon: component.icon,
+        name: component.name,
+        label: component.label
+      })
+    })
+  }
+
+  const userSelectRule = useSelectRule({ name: 'UserSelect', label: '用户选择器' })
+  const deptSelectRule = useSelectRule({ name: 'DeptSelect', label: '部门选择器' })
   const dictSelectRule = useDictSelectRule()
   const restfulSelectRule = useSelectRule({
     name: 'RestfulSelect',
@@ -56,46 +80,15 @@ export const useFormCreateDesigner = async (designer: Ref) => {
       }
     ]
   })
-
-  /**
-   * 构建表单组件
-   */
-  const buildFormComponents = () => {
-    // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
-    designer.value?.removeMenuItem('upload')
-    // 移除自带的富文本组件规则，使用 editorRule 替代
-    designer.value?.removeMenuItem('fc-editor')
-    // 移除自带的下拉选择器组件，使用 currencySelectRule 替代
-    designer.value?.removeMenuItem('select')
-    designer.value?.removeMenuItem('radio')
-    designer.value?.removeMenuItem('checkbox')
-    const components = [
-      editorRule,
-      uploadFileRule,
-      uploadImgRule,
-      uploadImgsRule,
-      dictSelectRule,
-      restfulSelectRule
-    ]
-    components.forEach((component) => {
-      // 插入组件规则
-      designer.value?.addComponent(component)
-      // 插入拖拽按钮到 `main` 分类下
-      designer.value?.appendMenuItem('main', {
-        icon: component.icon,
-        name: component.name,
-        label: component.label
-      })
-    })
-  }
-
-  const userSelectRule = useSelectRule({ name: 'UserSelect', label: '用户选择器' })
-  const deptSelectRule = useSelectRule({ name: 'DeptSelect', label: '部门选择器' })
   /**
    * 构建系统字段菜单
    */
   const buildSystemMenu = () => {
-    const components = [userSelectRule, deptSelectRule]
+    // 移除自带的下拉选择器组件，使用 currencySelectRule 替代
+    designer.value?.removeMenuItem('select')
+    designer.value?.removeMenuItem('radio')
+    designer.value?.removeMenuItem('checkbox')
+    const components = [userSelectRule, deptSelectRule, dictSelectRule, restfulSelectRule]
     const menu: Menu = {
       name: 'system',
       title: '系统字段',