fix: 移除 form-crate 自带的富文本组件规则，使用 editorRule 替代

2024-04-22 10:56:16 +08:00 · 2024-04-22 10:56:16 +08:00 · afdee2cd48
commit afdee2cd48
parent f5d013187b
10 changed files with 122 additions and 175 deletions
--- a/package.json
+++ b/package.json
@ -137,7 +137,6 @@
    "url": "https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues"
  },
  "homepage": "https://gitee.com/yudaocode/yudao-ui-admin-vue3",
-  "packageManager": "pnpm@8.6.0",
  "engines": {
    "node": ">= 16.0.0",
    "pnpm": ">=8.6.0"
--- a/src/components/FormCreate/index.ts
+++ b/src/components/FormCreate/index.ts
@ -1,4 +1,3 @@
-import MyFormCreateDesigner from './src/MyFormCreateDesigner.vue'
 import { useFormCreateDesigner } from './src/useFormCreateDesigner'

-export { MyFormCreateDesigner, useFormCreateDesigner }
+export { useFormCreateDesigner }
--- a/src/components/FormCreate/src/MyFormCreateDesigner.vue
+++ b/src/components/FormCreate/src/MyFormCreateDesigner.vue
@ -1,33 +0,0 @@
-<!-- TODO puhui999: 没啥问题的话准备移除 -->
-<template>
-  <FcDesigner ref="designer" height="780px" />
-</template>
-
-<script lang="ts" setup>
-import { useUploadFileRule, useUploadImgRule, useUploadImgsRule } from './config'
-
-defineOptions({ name: 'MyFormCreateDesigner' })
-
-const designer = ref() // 表单设计器
-const uploadFileRule = useUploadFileRule()
-const uploadImgRule = useUploadImgRule()
-const uploadImgsRule = useUploadImgsRule()
-
-onMounted(() => {
-  // 移除自带的上传组件规则
-  designer.value?.removeMenuItem('upload')
-  const components = [uploadFileRule, uploadImgRule, uploadImgsRule]
-  components.forEach((component) => {
-    //插入组件规则
-    designer.value?.addComponent(component)
-    //插入拖拽按钮到`main`分类下
-    designer.value?.appendMenuItem('main', {
-      icon: component.icon,
-      name: component.name,
-      label: component.label
-    })
-  })
-})
-</script>
-
-<style lang="scss" scoped></style>
--- a/src/components/FormCreate/src/config/index.ts
+++ b/src/components/FormCreate/src/config/index.ts
@ -3,11 +3,13 @@ import { useUploadImgRule } from './useUploadImgRule'
 import { useUploadImgsRule } from './useUploadImgsRule'
 import { useDictSelectRule } from './useDictSelectRule'
 import { useUserSelectRule } from './useUserSelectRule'
+import { useEditorRule } from './useEditorRule'

 export {
  useUploadFileRule,
  useUploadImgRule,
  useUploadImgsRule,
  useDictSelectRule,
-  useUserSelectRule
+  useUserSelectRule,
+  useEditorRule
 }
--- a/src/components/FormCreate/src/config/selectRule.ts
+++ b/src/components/FormCreate/src/config/selectRule.ts
@ -0,0 +1,71 @@
+const selectRule = [
+  { 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，是否在输入框获得焦点后自动弹出选项菜单'
+  }
+]
+
+export default selectRule
--- a/src/components/FormCreate/src/config/useDictSelectRule.ts
+++ b/src/components/FormCreate/src/config/useDictSelectRule.ts
@ -1,6 +1,7 @@
 import { generateUUID } from '@/utils'
 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'

 export const useDictSelectRule = () => {
  const label = '字典选择器'
@ -51,73 +52,7 @@ export const useDictSelectRule = () => {
            { 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，是否在输入框获得焦点后自动弹出选项菜单'
-        }
+        ...selectRule
      ])
    }
  }
--- a/src/components/FormCreate/src/config/useEditorRule.ts
+++ b/src/components/FormCreate/src/config/useEditorRule.ts
@ -0,0 +1,32 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+
+export const useEditorRule = () => {
+  const label = '富文本'
+  const name = 'Editor'
+  return {
+    icon: 'icon-editor',
+    label,
+    name,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        {
+          type: 'input',
+          field: 'height',
+          title: '高度'
+        },
+        { type: 'switch', field: 'readonly', title: '是否只读' }
+      ])
+    }
+  }
+}
--- a/src/components/FormCreate/src/config/useUserSelectRule.ts
+++ b/src/components/FormCreate/src/config/useUserSelectRule.ts
@ -1,5 +1,6 @@
 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 = '用户选择器'
@ -18,76 +19,7 @@ export const useUserSelectRule = () => {
      }
    },
    props(_, { t }) {
-      return localeProps(t, name + '.props', [
-        makeRequiredRule(),
-        { 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，是否在输入框获得焦点后自动弹出选项菜单'
-        }
-      ])
+      return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule])
    }
  }
 }
--- a/src/components/FormCreate/src/useFormCreateDesigner.ts
+++ b/src/components/FormCreate/src/useFormCreateDesigner.ts
@ -1,5 +1,6 @@
 import {
  useDictSelectRule,
+  useEditorRule,
  useUploadFileRule,
  useUploadImgRule,
  useUploadImgsRule,
@ -13,8 +14,12 @@ import { Ref } from 'vue'
 * - 文件上传
 * - 单图上传
 * - 多图上传
+ * - 字典选择器
+ * - 系统用户选择器
+ * - 富文本
 */
 export const useFormCreateDesigner = (designer: Ref) => {
+  const editorRule = useEditorRule()
  const uploadFileRule = useUploadFileRule()
  const uploadImgRule = useUploadImgRule()
  const uploadImgsRule = useUploadImgsRule()
@ -24,7 +29,10 @@ export const useFormCreateDesigner = (designer: Ref) => {
  onMounted(() => {
    // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
    designer.value?.removeMenuItem('upload')
+    // 移除自带的富文本组件规则，使用 editorRule 替代
+    designer.value?.removeMenuItem('fc-editor')
    const components = [
+      editorRule,
      uploadFileRule,
      uploadImgRule,
      uploadImgsRule,
--- a/src/plugins/formCreate/index.ts
+++ b/src/plugins/formCreate/index.ts
@ -21,6 +21,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 { Editor } from '@/components/Editor'

 const components = [
  ElAside,
@ -39,7 +40,8 @@ const components = [
  UploadImgs,
  UploadFile,
  DictSelect,
-  UserSelect
+  UserSelect,
+  Editor
 ]

 // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档