From 769b63d9ca797dd402861e2e6a3110d43f423123 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 30 Apr 2024 00:07:25 +0800
Subject: [PATCH] =?UTF-8?q?form-create=EF=BC=9A=E7=A7=BB=E9=99=A4=E8=87=AA?=
 =?UTF-8?q?=E5=B8=A6=E7=9A=84=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BD=BF=E7=94=A8=20currencySelectR?=
 =?UTF-8?q?ule=20=E6=9B=BF=E4=BB=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormCreate/index.ts            |  3 +-
 .../FormCreate/src/CurrencySelect/index.vue   | 53 +++++++++++++++++++
 src/components/FormCreate/src/config/index.ts |  4 +-
 .../src/config/useCurrencySelectRule.ts       | 36 +++++++++++++
 .../src/config/useUserSelectRule.ts           | 25 ---------
 .../FormCreate/src/useFormCreateDesigner.ts   | 10 ++--
 src/plugins/formCreate/index.ts               |  4 +-
 .../system/user/components/UserSelect.vue     | 28 ----------
 8 files changed, 101 insertions(+), 62 deletions(-)
 create mode 100644 src/components/FormCreate/src/CurrencySelect/index.vue
 create mode 100644 src/components/FormCreate/src/config/useCurrencySelectRule.ts
 delete mode 100644 src/components/FormCreate/src/config/useUserSelectRule.ts
 delete mode 100644 src/views/system/user/components/UserSelect.vue

diff --git a/src/components/FormCreate/index.ts b/src/components/FormCreate/index.ts
index d50ed3c6..66fc7e6f 100644
--- a/src/components/FormCreate/index.ts
+++ b/src/components/FormCreate/index.ts
@@ -1,3 +1,4 @@
 import { useFormCreateDesigner } from './src/useFormCreateDesigner'
+import CurrencySelect from './src/CurrencySelect/index.vue'
 
-export { useFormCreateDesigner }
+export { useFormCreateDesigner, CurrencySelect }
diff --git a/src/components/FormCreate/src/CurrencySelect/index.vue b/src/components/FormCreate/src/CurrencySelect/index.vue
new file mode 100644
index 00000000..3591a935
--- /dev/null
+++ b/src/components/FormCreate/src/CurrencySelect/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-select class="w-1/1" v-bind="attrs">
+    <el-option
+      v-for="(item, index) in options"
+      :key="index"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import request from '@/config/axios'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'CurrencySelect' })
+
+// 接受父组件参数
+interface Props {
+  labelField?: string // 字典类型
+  valueField?: string // 字典值类型
+  restful?: string // api 接口
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  labelField: 'nickname',
+  valueField: 'id',
+  restful: '/system/user/simple-list'
+})
+
+const attrs = useAttrs()
+const options = ref<any[]>([]) // 下拉数据
+const getOptions = async () => {
+  options.value = []
+  if (isEmpty(props.restful)) {
+    return
+  }
+  // TODO 只支持 GET 查询，复杂下拉构建条件请使用业务表单
+  const data = await request.get({ url: props.restful })
+  if (Array.isArray(data)) {
+    options.value = data.map((item: any) => ({
+      label: item[props.labelField],
+      value: item[props.valueField]
+    }))
+    return
+  }
+  console.log(`接口[${props.restful}] 返回结果不是一个数组`)
+}
+
+onMounted(() => {
+  getOptions()
+})
+</script>
diff --git a/src/components/FormCreate/src/config/index.ts b/src/components/FormCreate/src/config/index.ts
index c3939159..078bc803 100644
--- a/src/components/FormCreate/src/config/index.ts
+++ b/src/components/FormCreate/src/config/index.ts
@@ -2,7 +2,7 @@ import { useUploadFileRule } from './useUploadFileRule'
 import { useUploadImgRule } from './useUploadImgRule'
 import { useUploadImgsRule } from './useUploadImgsRule'
 import { useDictSelectRule } from './useDictSelectRule'
-import { useUserSelectRule } from './useUserSelectRule'
+import { useCurrencySelectRule } from './useCurrencySelectRule'
 import { useEditorRule } from './useEditorRule'
 
 export {
@@ -10,6 +10,6 @@ export {
   useUploadImgRule,
   useUploadImgsRule,
   useDictSelectRule,
-  useUserSelectRule,
+  useCurrencySelectRule,
   useEditorRule
 }
diff --git a/src/components/FormCreate/src/config/useCurrencySelectRule.ts b/src/components/FormCreate/src/config/useCurrencySelectRule.ts
new file mode 100644
index 00000000..7a7b2031
--- /dev/null
+++ b/src/components/FormCreate/src/config/useCurrencySelectRule.ts
@@ -0,0 +1,36 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import selectRule from '@/components/FormCreate/src/config/selectRule'
+
+export const useCurrencySelectRule = () => {
+  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/useUserSelectRule.ts b/src/components/FormCreate/src/config/useUserSelectRule.ts
deleted file mode 100644
index dd5e51c3..00000000
--- a/src/components/FormCreate/src/config/useUserSelectRule.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { generateUUID } from '@/utils'
-import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
-import selectRule from '@/components/FormCreate/src/config/selectRule'
-
-export const useUserSelectRule = () => {
-  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/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts
index fe42b24f..81a595cc 100644
--- a/src/components/FormCreate/src/useFormCreateDesigner.ts
+++ b/src/components/FormCreate/src/useFormCreateDesigner.ts
@@ -1,10 +1,10 @@
 import {
+  useCurrencySelectRule,
   useDictSelectRule,
   useEditorRule,
   useUploadFileRule,
   useUploadImgRule,
-  useUploadImgsRule,
-  useUserSelectRule
+  useUploadImgsRule
 } from './config'
 import { Ref } from 'vue'
 
@@ -24,20 +24,22 @@ export const useFormCreateDesigner = (designer: Ref) => {
   const uploadImgRule = useUploadImgRule()
   const uploadImgsRule = useUploadImgsRule()
   const dictSelectRule = useDictSelectRule()
-  const userSelectRule = useUserSelectRule()
+  const currencySelectRule = useCurrencySelectRule()
 
   onMounted(() => {
     // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
     designer.value?.removeMenuItem('upload')
     // 移除自带的富文本组件规则，使用 editorRule 替代
     designer.value?.removeMenuItem('fc-editor')
+    // 移除自带的下拉选择器组件，使用 currencySelectRule 替代
+    designer.value?.removeMenuItem('select')
     const components = [
       editorRule,
       uploadFileRule,
       uploadImgRule,
       uploadImgsRule,
       dictSelectRule,
-      userSelectRule
+      currencySelectRule
     ]
     components.forEach((component) => {
       // 插入组件规则
diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts
index 5f8428e6..39be7946 100644
--- a/src/plugins/formCreate/index.ts
+++ b/src/plugins/formCreate/index.ts
@@ -20,7 +20,7 @@ import install from '@form-create/element-ui/auto-import'
 //======================= 自定义组件 =======================
 import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
 import { DictSelect } from '@/components/DictSelect'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import { CurrencySelect } from '@/components/FormCreate'
 import { Editor } from '@/components/Editor'
 
 const components = [
@@ -40,7 +40,7 @@ const components = [
   UploadImgs,
   UploadFile,
   DictSelect,
-  UserSelect,
+  CurrencySelect,
   Editor
 ]
 
diff --git a/src/views/system/user/components/UserSelect.vue b/src/views/system/user/components/UserSelect.vue
deleted file mode 100644
index 4a94a745..00000000
--- a/src/views/system/user/components/UserSelect.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- TODO puhui999: 先单独一个后面封装成通用选择组件 -->
-<template>
-  <el-select class="w-1/1" v-bind="attrs">
-    <el-option
-      v-for="(dict, index) in userOptions"
-      :key="index"
-      :label="dict.nickname"
-      :value="dict.id"
-    />
-  </el-select>
-</template>
-
-<script lang="ts" setup>
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'UserSelect' })
-
-const attrs = useAttrs()
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户下拉数据
-
-onMounted(async () => {
-  const data = await UserApi.getSimpleUserList()
-  if (!data || data.length === 0) {
-    return
-  }
-  userOptions.value = data
-})
-</script>