From afdee2cd488acc5ea492e59473501b7337adc432 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 22 Apr 2024 10:56:16 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=20form-crate=20?= =?UTF-8?q?=E8=87=AA=E5=B8=A6=E7=9A=84=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=A7=84=E5=88=99=EF=BC=8C=E4=BD=BF=E7=94=A8=20editor?= =?UTF-8?q?Rule=20=E6=9B=BF=E4=BB=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - src/components/FormCreate/index.ts | 3 +- .../FormCreate/src/MyFormCreateDesigner.vue | 33 --------- src/components/FormCreate/src/config/index.ts | 4 +- .../FormCreate/src/config/selectRule.ts | 71 ++++++++++++++++++ .../src/config/useDictSelectRule.ts | 69 +----------------- .../FormCreate/src/config/useEditorRule.ts | 32 +++++++++ .../src/config/useUserSelectRule.ts | 72 +------------------ .../FormCreate/src/useFormCreateDesigner.ts | 8 +++ src/plugins/formCreate/index.ts | 4 +- 10 files changed, 122 insertions(+), 175 deletions(-) delete mode 100644 src/components/FormCreate/src/MyFormCreateDesigner.vue create mode 100644 src/components/FormCreate/src/config/selectRule.ts create mode 100644 src/components/FormCreate/src/config/useEditorRule.ts diff --git a/package.json b/package.json index 58460358..c7ef3d40 100644 --- 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" diff --git a/src/components/FormCreate/index.ts b/src/components/FormCreate/index.ts index 51b52603..d50ed3c6 100644 --- 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 } diff --git a/src/components/FormCreate/src/MyFormCreateDesigner.vue b/src/components/FormCreate/src/MyFormCreateDesigner.vue deleted file mode 100644 index f202b9cb..00000000 --- a/src/components/FormCreate/src/MyFormCreateDesigner.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - diff --git a/src/components/FormCreate/src/config/index.ts b/src/components/FormCreate/src/config/index.ts index 5403ce0e..c3939159 100644 --- 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 } diff --git a/src/components/FormCreate/src/config/selectRule.ts b/src/components/FormCreate/src/config/selectRule.ts new file mode 100644 index 00000000..0974139e --- /dev/null +++ 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 diff --git a/src/components/FormCreate/src/config/useDictSelectRule.ts b/src/components/FormCreate/src/config/useDictSelectRule.ts index 51cd33b7..7a1afc60 100644 --- 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 ]) } } diff --git a/src/components/FormCreate/src/config/useEditorRule.ts b/src/components/FormCreate/src/config/useEditorRule.ts new file mode 100644 index 00000000..ac6d9ac0 --- /dev/null +++ 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: '是否只读' } + ]) + } + } +} diff --git a/src/components/FormCreate/src/config/useUserSelectRule.ts b/src/components/FormCreate/src/config/useUserSelectRule.ts index 07f70836..dd5e51c3 100644 --- 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]) } } } diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts index e142970d..fe42b24f 100644 --- 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, diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts index 2e4fc5d8..5f8428e6 100644 --- 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 文档