From 68dae2d1fe590910a62fc77c69c9558d4af11568 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 30 Mar 2024 23:18:23 +0800
Subject: [PATCH 1/2] =?UTF-8?q?form-create-designer:=20=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=AD=97=E5=85=B8=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictSelect/index.ts            |   3 +
 src/components/DictSelect/src/DictSelect.vue  |  53 ++++++++
 src/components/FormCreate/src/config/index.ts |  10 +-
 .../src/config/useDictSelectRule.ts           | 124 ++++++++++++++++++
 .../src/config/useUserSelectRule.ts           | 107 +++++++++++++++
 .../FormCreate/src/useFormCreateDesigner.ts   |  18 ++-
 src/components/FormCreate/src/utils/index.ts  |  60 +++++++++
 src/plugins/formCreate/index.ts               |   4 +-
 8 files changed, 375 insertions(+), 4 deletions(-)
 create mode 100644 src/components/DictSelect/index.ts
 create mode 100644 src/components/DictSelect/src/DictSelect.vue
 create mode 100644 src/components/FormCreate/src/config/useDictSelectRule.ts
 create mode 100644 src/components/FormCreate/src/config/useUserSelectRule.ts

diff --git a/src/components/DictSelect/index.ts b/src/components/DictSelect/index.ts
new file mode 100644
index 00000000..164035fd
--- /dev/null
+++ b/src/components/DictSelect/index.ts
@@ -0,0 +1,3 @@
+import DictSelect from './src/DictSelect.vue'
+
+export { DictSelect }
diff --git a/src/components/DictSelect/src/DictSelect.vue b/src/components/DictSelect/src/DictSelect.vue
new file mode 100644
index 00000000..c0d585ab
--- /dev/null
+++ b/src/components/DictSelect/src/DictSelect.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-select :model-value="modelValue" class="w-1/1" v-bind="attrs" @change="changeValue">
+    <template v-if="valueType === 'int'">
+      <el-option
+        v-for="(dict, index) in getIntDictOptions(dictType)"
+        :key="index"
+        :label="dict.label"
+        :value="dict.value"
+      />
+    </template>
+    <template v-if="valueType === 'str'">
+      <el-option
+        v-for="(dict, index) in getStrDictOptions(dictType)"
+        :key="index"
+        :label="dict.label"
+        :value="dict.value"
+      />
+    </template>
+    <template v-if="valueType === 'bool'">
+      <el-option
+        v-for="(dict, index) in getBoolDictOptions(dictType)"
+        :key="index"
+        :label="dict.label"
+        :value="dict.value"
+      />
+    </template>
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+
+// 接受父组件参数
+interface Props {
+  modelValue?: any // 值
+  dictType: string // 字典类型
+  valueType: string // 字典值类型
+}
+
+withDefaults(defineProps<Props>(), {
+  dictType: '',
+  valueType: 'str'
+})
+const attrs = useAttrs()
+defineOptions({ name: 'DictSelect' })
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void
+}>()
+const changeValue = (value: any) => {
+  console.log(value)
+  emits('update:modelValue', value)
+}
+</script>
diff --git a/src/components/FormCreate/src/config/index.ts b/src/components/FormCreate/src/config/index.ts
index e098ce48..5403ce0e 100644
--- a/src/components/FormCreate/src/config/index.ts
+++ b/src/components/FormCreate/src/config/index.ts
@@ -1,5 +1,13 @@
 import { useUploadFileRule } from './useUploadFileRule'
 import { useUploadImgRule } from './useUploadImgRule'
 import { useUploadImgsRule } from './useUploadImgsRule'
+import { useDictSelectRule } from './useDictSelectRule'
+import { useUserSelectRule } from './useUserSelectRule'
 
-export { useUploadFileRule, useUploadImgRule, useUploadImgsRule }
+export {
+  useUploadFileRule,
+  useUploadImgRule,
+  useUploadImgsRule,
+  useDictSelectRule,
+  useUserSelectRule
+}
diff --git a/src/components/FormCreate/src/config/useDictSelectRule.ts b/src/components/FormCreate/src/config/useDictSelectRule.ts
new file mode 100644
index 00000000..51cd33b7
--- /dev/null
+++ b/src/components/FormCreate/src/config/useDictSelectRule.ts
@@ -0,0 +1,124 @@
+import { generateUUID } from '@/utils'
+import * as DictDataApi from '@/api/system/dict/dict.type'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+
+export const useDictSelectRule = () => {
+  const label = '字典选择器'
+  const name = 'DictSelect'
+  const dictOptions = ref<{ label: string; value: string }[]>([]) // 字典类型下拉数据
+  onMounted(async () => {
+    const data = await DictDataApi.getSimpleDictTypeList()
+    if (!data || data.length === 0) {
+      return
+    }
+    dictOptions.value =
+      data?.map((item: DictDataApi.DictTypeVO) => ({
+        label: item.name,
+        value: item.type
+      })) ?? []
+  })
+  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: 'select',
+          field: 'dictType',
+          title: '字典类型',
+          value: '',
+          options: dictOptions.value
+        },
+        {
+          type: 'select',
+          field: 'valueType',
+          title: '字典值类型',
+          value: 'str',
+          options: [
+            { label: '数字', value: 'int' },
+            { label: '字符串', value: 'str' },
+            { label: '布尔值', value: 'bool' }
+          ]
+        },
+        { type: 'switch', field: 'multiple', title: '是否多选' },
+        {
+          type: 'switch',
+          field: 'disabled',
+          title: '是否禁用'
+        },
+        { type: 'switch', field: 'clearable', title: '是否可以清空选项' },
+        {
+          type: 'switch',
+          field: 'collapseTags',
+          title: '多选时是否将选中值按文字的形式展示'
+        },
+        {
+          type: 'inputNumber',
+          field: 'multipleLimit',
+          title: '多选时用户最多可以选择的项目数，为 0 则不限制',
+          props: { min: 0 }
+        },
+        {
+          type: 'input',
+          field: 'autocomplete',
+          title: 'autocomplete 属性'
+        },
+        { type: 'input', field: 'placeholder', title: '占位符' },
+        {
+          type: 'switch',
+          field: 'filterable',
+          title: '是否可搜索'
+        },
+        { type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
+        {
+          type: 'input',
+          field: 'noMatchText',
+          title: '搜索条件无匹配时显示的文字'
+        },
+        {
+          type: 'switch',
+          field: 'remote',
+          title: '其中的选项是否从服务器远程加载'
+        },
+        {
+          type: 'Struct',
+          field: 'remoteMethod',
+          title: '自定义远程搜索方法'
+        },
+        { type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
+        {
+          type: 'switch',
+          field: 'reserveKeyword',
+          title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
+        },
+        {
+          type: 'switch',
+          field: 'defaultFirstOption',
+          title: '在输入框按下回车，选择第一个匹配项'
+        },
+        {
+          type: 'switch',
+          field: 'popperAppendToBody',
+          title: '是否将弹出框插入至 body 元素',
+          value: true
+        },
+        {
+          type: 'switch',
+          field: 'automaticDropdown',
+          title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
+        }
+      ])
+    }
+  }
+}
diff --git a/src/components/FormCreate/src/config/useUserSelectRule.ts b/src/components/FormCreate/src/config/useUserSelectRule.ts
new file mode 100644
index 00000000..23521134
--- /dev/null
+++ b/src/components/FormCreate/src/config/useUserSelectRule.ts
@@ -0,0 +1,107 @@
+import { generateUUID } from '@/utils'
+import * as UserApi from '@/api/system/user'
+import { localeProps, makeOptionsRule, makeRequiredRule } from '@/components/FormCreate/src/utils'
+
+export const useUserSelectRule = () => {
+  const label = 'aa选择器'
+  const name = 'select'
+  const userOptions = ref<{ label: string; value: number }[]>([]) // 用户下拉数据
+  onMounted(async () => {
+    const data = await UserApi.getSimpleUserList()
+    if (!data || data.length === 0) {
+      return
+    }
+    userOptions.value =
+      data?.map((item: UserApi.UserVO) => ({
+        label: item.nickname,
+        value: item.id
+      })) ?? []
+  })
+  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(),
+        makeOptionsRule(t, 'options', userOptions.value),
+        { type: 'switch', field: 'multiple', title: '是否多选' },
+        {
+          type: 'switch',
+          field: 'disabled',
+          title: '是否禁用'
+        },
+        { type: 'switch', field: 'clearable', title: '是否可以清空选项' },
+        {
+          type: 'switch',
+          field: 'collapseTags',
+          title: '多选时是否将选中值按文字的形式展示'
+        },
+        {
+          type: 'inputNumber',
+          field: 'multipleLimit',
+          title: '多选时用户最多可以选择的项目数，为 0 则不限制',
+          props: { min: 0 }
+        },
+        {
+          type: 'input',
+          field: 'autocomplete',
+          title: 'autocomplete 属性'
+        },
+        { type: 'input', field: 'placeholder', title: '占位符' },
+        {
+          type: 'switch',
+          field: 'filterable',
+          title: '是否可搜索'
+        },
+        { type: 'switch', field: 'allowCreate', title: '是否允许用户创建新条目' },
+        {
+          type: 'input',
+          field: 'noMatchText',
+          title: '搜索条件无匹配时显示的文字'
+        },
+        {
+          type: 'switch',
+          field: 'remote',
+          title: '其中的选项是否从服务器远程加载'
+        },
+        {
+          type: 'Struct',
+          field: 'remoteMethod',
+          title: '自定义远程搜索方法'
+        },
+        { type: 'input', field: 'noDataText', title: '选项为空时显示的文字' },
+        {
+          type: 'switch',
+          field: 'reserveKeyword',
+          title: '多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词'
+        },
+        {
+          type: 'switch',
+          field: 'defaultFirstOption',
+          title: '在输入框按下回车，选择第一个匹配项'
+        },
+        {
+          type: 'switch',
+          field: 'popperAppendToBody',
+          title: '是否将弹出框插入至 body 元素',
+          value: true
+        },
+        {
+          type: 'switch',
+          field: 'automaticDropdown',
+          title: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单'
+        }
+      ])
+    }
+  }
+}
diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts
index b6855a99..e142970d 100644
--- a/src/components/FormCreate/src/useFormCreateDesigner.ts
+++ b/src/components/FormCreate/src/useFormCreateDesigner.ts
@@ -1,4 +1,10 @@
-import { useUploadFileRule, useUploadImgRule, useUploadImgsRule } from './config'
+import {
+  useDictSelectRule,
+  useUploadFileRule,
+  useUploadImgRule,
+  useUploadImgsRule,
+  useUserSelectRule
+} from './config'
 import { Ref } from 'vue'
 
 /**
@@ -12,11 +18,19 @@ export const useFormCreateDesigner = (designer: Ref) => {
   const uploadFileRule = useUploadFileRule()
   const uploadImgRule = useUploadImgRule()
   const uploadImgsRule = useUploadImgsRule()
+  const dictSelectRule = useDictSelectRule()
+  const userSelectRule = useUserSelectRule()
 
   onMounted(() => {
     // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
     designer.value?.removeMenuItem('upload')
-    const components = [uploadFileRule, uploadImgRule, uploadImgsRule]
+    const components = [
+      uploadFileRule,
+      uploadImgRule,
+      uploadImgsRule,
+      dictSelectRule,
+      userSelectRule
+    ]
     components.forEach((component) => {
       // 插入组件规则
       designer.value?.addComponent(component)
diff --git a/src/components/FormCreate/src/utils/index.ts b/src/components/FormCreate/src/utils/index.ts
index 49901b5f..e5480981 100644
--- a/src/components/FormCreate/src/utils/index.ts
+++ b/src/components/FormCreate/src/utils/index.ts
@@ -17,3 +17,63 @@ export const localeProps = (t, prefix, rules) => {
     return rule
   })
 }
+
+export function upper(str) {
+  return str.replace(str[0], str[0].toLocaleUpperCase())
+}
+
+export function makeOptionsRule(t, to, userOptions) {
+  console.log(userOptions[0])
+  const options = [
+    { label: t('props.optionsType.struct'), value: 0 },
+    { label: t('props.optionsType.json'), value: 1 },
+    { label: '用户数据', value: 2 }
+  ]
+
+  const control = [
+    {
+      value: 0,
+      rule: [
+        {
+          type: 'TableOptions',
+          field: 'formCreate' + upper(to).replace('.', '>'),
+          props: { defaultValue: [] }
+        }
+      ]
+    },
+    {
+      value: 1,
+      rule: [
+        {
+          type: 'Struct',
+          field: 'formCreate' + upper(to).replace('.', '>'),
+          props: { defaultValue: [] }
+        }
+      ]
+    },
+    {
+      value: 2,
+      rule: [
+        {
+          type: 'TableOptions',
+          field: 'formCreate' + upper(to).replace('.', '>'),
+          props: { modelValue: [] }
+        }
+      ]
+    }
+  ]
+  options.splice(0, 0)
+  control.push()
+
+  return {
+    type: 'radio',
+    title: t('props.options'),
+    field: '_optionType',
+    value: 0,
+    options,
+    props: {
+      type: 'button'
+    },
+    control
+  }
+}
diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts
index ffbcc010..9e083641 100644
--- a/src/plugins/formCreate/index.ts
+++ b/src/plugins/formCreate/index.ts
@@ -19,6 +19,7 @@ import formCreate from '@form-create/element-ui'
 import install from '@form-create/element-ui/auto-import'
 //======================= 自定义组件 =======================
 import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
+import { DictSelect } from '@/components/DictSelect'
 
 const components = [
   ElAside,
@@ -35,7 +36,8 @@ const components = [
   ElTabPane,
   UploadImg,
   UploadImgs,
-  UploadFile
+  UploadFile,
+  DictSelect
 ]
 
 // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档

From d16bed4ad7e28dcda7646930e59f3292959bf69b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 31 Mar 2024 17:58:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?form-create-designer:=20=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictSelect/src/DictSelect.vue  |  9 +-----
 .../src/config/useUserSelectRule.ts           | 20 ++-----------
 src/plugins/formCreate/index.ts               |  4 ++-
 src/utils/dict.ts                             |  6 ++--
 .../system/user/components/UserSelect.vue     | 28 +++++++++++++++++++
 5 files changed, 38 insertions(+), 29 deletions(-)
 create mode 100644 src/views/system/user/components/UserSelect.vue

diff --git a/src/components/DictSelect/src/DictSelect.vue b/src/components/DictSelect/src/DictSelect.vue
index c0d585ab..0b4e258a 100644
--- a/src/components/DictSelect/src/DictSelect.vue
+++ b/src/components/DictSelect/src/DictSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-select :model-value="modelValue" class="w-1/1" v-bind="attrs" @change="changeValue">
+  <el-select class="w-1/1" v-bind="attrs">
     <template v-if="valueType === 'int'">
       <el-option
         v-for="(dict, index) in getIntDictOptions(dictType)"
@@ -43,11 +43,4 @@ withDefaults(defineProps<Props>(), {
 })
 const attrs = useAttrs()
 defineOptions({ name: 'DictSelect' })
-const emits = defineEmits<{
-  (e: 'update:modelValue', v: any): void
-}>()
-const changeValue = (value: any) => {
-  console.log(value)
-  emits('update:modelValue', value)
-}
 </script>
diff --git a/src/components/FormCreate/src/config/useUserSelectRule.ts b/src/components/FormCreate/src/config/useUserSelectRule.ts
index 23521134..07f70836 100644
--- a/src/components/FormCreate/src/config/useUserSelectRule.ts
+++ b/src/components/FormCreate/src/config/useUserSelectRule.ts
@@ -1,22 +1,9 @@
 import { generateUUID } from '@/utils'
-import * as UserApi from '@/api/system/user'
-import { localeProps, makeOptionsRule, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
 
 export const useUserSelectRule = () => {
-  const label = 'aa选择器'
-  const name = 'select'
-  const userOptions = ref<{ label: string; value: number }[]>([]) // 用户下拉数据
-  onMounted(async () => {
-    const data = await UserApi.getSimpleUserList()
-    if (!data || data.length === 0) {
-      return
-    }
-    userOptions.value =
-      data?.map((item: UserApi.UserVO) => ({
-        label: item.nickname,
-        value: item.id
-      })) ?? []
-  })
+  const label = '用户选择器'
+  const name = 'UserSelect'
   return {
     icon: 'icon-select',
     label,
@@ -33,7 +20,6 @@ export const useUserSelectRule = () => {
     props(_, { t }) {
       return localeProps(t, name + '.props', [
         makeRequiredRule(),
-        makeOptionsRule(t, 'options', userOptions.value),
         { type: 'switch', field: 'multiple', title: '是否多选' },
         {
           type: 'switch',
diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts
index 9e083641..2e4fc5d8 100644
--- a/src/plugins/formCreate/index.ts
+++ b/src/plugins/formCreate/index.ts
@@ -20,6 +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'
 
 const components = [
   ElAside,
@@ -37,7 +38,8 @@ const components = [
   UploadImg,
   UploadImgs,
   UploadFile,
-  DictSelect
+  DictSelect,
+  UserSelect
 ]
 
 // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 1c94df38..89f1afd9 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -1,8 +1,8 @@
 /**
  * 数据字典工具类
  */
-import { useDictStoreWithOut } from '@/store/modules/dict'
-import { ElementPlusInfoType } from '@/types/elementPlus'
+import {useDictStoreWithOut} from '@/store/modules/dict'
+import {ElementPlusInfoType} from '@/types/elementPlus'
 
 const dictStore = useDictStoreWithOut()
 
@@ -137,7 +137,7 @@ export enum DICT_TYPE {
   INFRA_FILE_STORAGE = 'infra_file_storage',
 
   // ========== BPM 模块 ==========
-  BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
+  BPM_MODEL_FORM_TYPE = 'bpm_model_category',
   BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy',
   BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
   BPM_TASK_STATUS = 'bpm_task_status',
diff --git a/src/views/system/user/components/UserSelect.vue b/src/views/system/user/components/UserSelect.vue
new file mode 100644
index 00000000..4a94a745
--- /dev/null
+++ b/src/views/system/user/components/UserSelect.vue
@@ -0,0 +1,28 @@
+<!-- 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>