Skip to content

phsl / admin

Go to a project
Commit afdee2cd by puhui999
Options

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

parent f5d01318
Showing with 122 additions and 175 deletions
package.json
...@@ -137,7 +137,6 @@ ...@@ -137,7 +137,6 @@
"url": "https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues" "url": "https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues"
}, },
"homepage": "https://gitee.com/yudaocode/yudao-ui-admin-vue3", "homepage": "https://gitee.com/yudaocode/yudao-ui-admin-vue3",
"packageManager": "pnpm@8.6.0",
"engines": { "engines": {
"node": ">= 16.0.0", "node": ">= 16.0.0",
"pnpm": ">=8.6.0" "pnpm": ">=8.6.0"
......
src/components/FormCreate/index.ts
import MyFormCreateDesigner from './src/MyFormCreateDesigner.vue'
import { useFormCreateDesigner } from './src/useFormCreateDesigner' import { useFormCreateDesigner } from './src/useFormCreateDesigner'
export { MyFormCreateDesigner, useFormCreateDesigner } export { useFormCreateDesigner }
src/components/FormCreate/src/MyFormCreateDesigner.vue deleted 100644 → 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>
src/components/FormCreate/src/config/index.ts
...@@ -3,11 +3,13 @@ import { useUploadImgRule } from './useUploadImgRule' ...@@ -3,11 +3,13 @@ import { useUploadImgRule } from './useUploadImgRule'
import { useUploadImgsRule } from './useUploadImgsRule' import { useUploadImgsRule } from './useUploadImgsRule'
import { useDictSelectRule } from './useDictSelectRule' import { useDictSelectRule } from './useDictSelectRule'
import { useUserSelectRule } from './useUserSelectRule' import { useUserSelectRule } from './useUserSelectRule'
import { useEditorRule } from './useEditorRule'
export { export {
useUploadFileRule, useUploadFileRule,
useUploadImgRule, useUploadImgRule,
useUploadImgsRule, useUploadImgsRule,
useDictSelectRule, useDictSelectRule,
useUserSelectRule useUserSelectRule,
useEditorRule
} }
src/components/FormCreate/src/config/selectRule.ts 0 → 100644
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
src/components/FormCreate/src/config/useDictSelectRule.ts
import { generateUUID } from '@/utils' import { generateUUID } from '@/utils'
import * as DictDataApi from '@/api/system/dict/dict.type' import * as DictDataApi from '@/api/system/dict/dict.type'
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
import selectRule from '@/components/FormCreate/src/config/selectRule'
export const useDictSelectRule = () => { export const useDictSelectRule = () => {
const label = '字典选择器' const label = '字典选择器'
...@@ -51,73 +52,7 @@ export const useDictSelectRule = () => { ...@@ -51,73 +52,7 @@ export const useDictSelectRule = () => {
{ label: '布尔值', value: 'bool' } { label: '布尔值', value: 'bool' }
] ]
}, },
{ type: 'switch', field: 'multiple', title: '是否多选' }, ...selectRule
{
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，是否在输入框获得焦点后自动弹出选项菜单'
}
]) ])
} }
} }
......
src/components/FormCreate/src/config/useEditorRule.ts 0 → 100644
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: '是否只读' }
])
}
}
}
src/components/FormCreate/src/config/useUserSelectRule.ts
import { generateUUID } from '@/utils' import { generateUUID } from '@/utils'
import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
import selectRule from '@/components/FormCreate/src/config/selectRule'
export const useUserSelectRule = () => { export const useUserSelectRule = () => {
const label = '用户选择器' const label = '用户选择器'
...@@ -18,76 +19,7 @@ export const useUserSelectRule = () => { ...@@ -18,76 +19,7 @@ export const useUserSelectRule = () => {
} }
}, },
props(_, { t }) { props(_, { t }) {
return localeProps(t, name + '.props', [ return localeProps(t, name + '.props', [makeRequiredRule(), ...selectRule])
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，是否在输入框获得焦点后自动弹出选项菜单'
}
])
} }
} }
} }
src/components/FormCreate/src/useFormCreateDesigner.ts
import { import {
useDictSelectRule, useDictSelectRule,
useEditorRule,
useUploadFileRule, useUploadFileRule,
useUploadImgRule, useUploadImgRule,
useUploadImgsRule, useUploadImgsRule,
...@@ -13,8 +14,12 @@ import { Ref } from 'vue' ...@@ -13,8 +14,12 @@ import { Ref } from 'vue'
* - 文件上传 * - 文件上传
* - 单图上传 * - 单图上传
* - 多图上传 * - 多图上传
* - 字典选择器
* - 系统用户选择器
* - 富文本
*/ */
export const useFormCreateDesigner = (designer: Ref) => { export const useFormCreateDesigner = (designer: Ref) => {
const editorRule = useEditorRule()
const uploadFileRule = useUploadFileRule() const uploadFileRule = useUploadFileRule()
const uploadImgRule = useUploadImgRule() const uploadImgRule = useUploadImgRule()
const uploadImgsRule = useUploadImgsRule() const uploadImgsRule = useUploadImgsRule()
...@@ -24,7 +29,10 @@ export const useFormCreateDesigner = (designer: Ref) => { ...@@ -24,7 +29,10 @@ export const useFormCreateDesigner = (designer: Ref) => {
onMounted(() => { onMounted(() => {
// 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代 // 移除自带的上传组件规则，使用 uploadFileRule、uploadImgRule、uploadImgsRule 替代
designer.value?.removeMenuItem('upload') designer.value?.removeMenuItem('upload')
// 移除自带的富文本组件规则，使用 editorRule 替代
designer.value?.removeMenuItem('fc-editor')
const components = [ const components = [
editorRule,
uploadFileRule, uploadFileRule,
uploadImgRule, uploadImgRule,
uploadImgsRule, uploadImgsRule,
......
src/plugins/formCreate/index.ts
...@@ -21,6 +21,7 @@ import install from '@form-create/element-ui/auto-import' ...@@ -21,6 +21,7 @@ import install from '@form-create/element-ui/auto-import'
import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile' import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
import { DictSelect } from '@/components/DictSelect' import { DictSelect } from '@/components/DictSelect'
import UserSelect from '@/views/system/user/components/UserSelect.vue' import UserSelect from '@/views/system/user/components/UserSelect.vue'
import { Editor } from '@/components/Editor'
const components = [ const components = [
ElAside, ElAside,
...@@ -39,7 +40,8 @@ const components = [ ...@@ -39,7 +40,8 @@ const components = [
UploadImgs, UploadImgs,
UploadFile, UploadFile,
DictSelect, DictSelect,
UserSelect UserSelect,
Editor
] ]
// 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档 // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment