From bc004b3b27bc642e28aefc839a510f47e25d4932 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Sat, 30 Mar 2024 18:53:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E9=A1=B9=E7=9B=AE=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=AF=B9=20form-create-designer=20=E8=BF=9B=E8=A1=8C?= =?UTF-8?q?=E5=A2=9E=E5=BC=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormCreate/index.ts | 5 +- .../FormCreate/src/MyFormCreate.vue | 54 ----------- .../FormCreate/src/MyFormCreateDesigner.vue | 33 +++++++ src/components/FormCreate/src/config/index.ts | 5 ++ .../src/config/useUploadFileRule.ts | 80 +++++++++++++++++ .../FormCreate/src/config/useUploadImgRule.ts | 89 +++++++++++++++++++ .../src/config/useUploadImgsRule.ts | 84 +++++++++++++++++ .../FormCreate/src/useFormCreateDesigner.ts | 31 +++++++ src/components/FormCreate/src/utils/index.ts | 19 ++++ src/components/UploadFile/src/UploadFile.vue | 1 - src/plugins/formCreate/index.ts | 24 +++-- src/views/bpm/form/editor/index.vue | 2 + src/views/bpm/form/index.vue | 2 +- .../bpm/processInstance/detail/index.vue | 6 +- src/views/infra/build/index.vue | 11 +-- 15 files changed, 371 insertions(+), 75 deletions(-) delete mode 100644 src/components/FormCreate/src/MyFormCreate.vue create mode 100644 src/components/FormCreate/src/MyFormCreateDesigner.vue create mode 100644 src/components/FormCreate/src/config/index.ts create mode 100644 src/components/FormCreate/src/config/useUploadFileRule.ts create mode 100644 src/components/FormCreate/src/config/useUploadImgRule.ts create mode 100644 src/components/FormCreate/src/config/useUploadImgsRule.ts create mode 100644 src/components/FormCreate/src/useFormCreateDesigner.ts create mode 100644 src/components/FormCreate/src/utils/index.ts diff --git a/src/components/FormCreate/index.ts b/src/components/FormCreate/index.ts index df750822..51b52603 100644 --- a/src/components/FormCreate/index.ts +++ b/src/components/FormCreate/index.ts @@ -1,3 +1,4 @@ -import MyFormCreate from './src/MyFormCreate.vue' +import MyFormCreateDesigner from './src/MyFormCreateDesigner.vue' +import { useFormCreateDesigner } from './src/useFormCreateDesigner' -export { MyFormCreate } +export { MyFormCreateDesigner, useFormCreateDesigner } diff --git a/src/components/FormCreate/src/MyFormCreate.vue b/src/components/FormCreate/src/MyFormCreate.vue deleted file mode 100644 index e72144b6..00000000 --- a/src/components/FormCreate/src/MyFormCreate.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - diff --git a/src/components/FormCreate/src/MyFormCreateDesigner.vue b/src/components/FormCreate/src/MyFormCreateDesigner.vue new file mode 100644 index 00000000..f202b9cb --- /dev/null +++ b/src/components/FormCreate/src/MyFormCreateDesigner.vue @@ -0,0 +1,33 @@ + + + + + + diff --git a/src/components/FormCreate/src/config/index.ts b/src/components/FormCreate/src/config/index.ts new file mode 100644 index 00000000..e098ce48 --- /dev/null +++ b/src/components/FormCreate/src/config/index.ts @@ -0,0 +1,5 @@ +import { useUploadFileRule } from './useUploadFileRule' +import { useUploadImgRule } from './useUploadImgRule' +import { useUploadImgsRule } from './useUploadImgsRule' + +export { useUploadFileRule, useUploadImgRule, useUploadImgsRule } diff --git a/src/components/FormCreate/src/config/useUploadFileRule.ts b/src/components/FormCreate/src/config/useUploadFileRule.ts new file mode 100644 index 00000000..a1ea85ec --- /dev/null +++ b/src/components/FormCreate/src/config/useUploadFileRule.ts @@ -0,0 +1,80 @@ +import { generateUUID } from '@/utils' +import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' + +export const useUploadFileRule = () => { + const label = '文件上传' + const name = 'UploadFile' + return { + icon: 'icon-upload', + label, + name, + rule() { + return { + type: name, + field: generateUUID(), + title: label, + info: '', + $required: false + } + }, + props(_, { t }) { + return localeProps(t, name + '.props', [ + makeRequiredRule(), + { + type: 'select', + field: 'fileType', + title: '文件类型', + value: ['doc', 'xls', 'ppt', 'txt', 'pdf'], + options: [ + { label: 'doc', value: 'doc' }, + { label: 'xls', value: 'xls' }, + { label: 'ppt', value: 'ppt' }, + { label: 'txt', value: 'txt' }, + { label: 'pdf', value: 'pdf' } + ], + props: { + multiple: true + } + }, + { + type: 'switch', + field: 'autoUpload', + title: '是否在选取文件后立即进行上传', + value: true + }, + { + type: 'switch', + field: 'drag', + title: '拖拽上传', + value: false + }, + { + type: 'switch', + field: 'isShowTip', + title: '是否显示提示', + value: true + }, + { + type: 'inputNumber', + field: 'fileSize', + title: '大小限制(MB)', + value: 5, + props: { min: 0 } + }, + { + type: 'inputNumber', + field: 'limit', + title: '数量限制', + value: 5, + props: { min: 0 } + }, + { + type: 'switch', + field: 'disabled', + title: '是否禁用', + value: false + } + ]) + } + } +} diff --git a/src/components/FormCreate/src/config/useUploadImgRule.ts b/src/components/FormCreate/src/config/useUploadImgRule.ts new file mode 100644 index 00000000..546cf9d6 --- /dev/null +++ b/src/components/FormCreate/src/config/useUploadImgRule.ts @@ -0,0 +1,89 @@ +import { generateUUID } from '@/utils' +import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' + +export const useUploadImgRule = () => { + const label = '单图上传' + const name = 'UploadImg' + return { + icon: 'icon-upload', + label, + name, + rule() { + return { + type: name, + field: generateUUID(), + title: label, + info: '', + $required: false + } + }, + props(_, { t }) { + return localeProps(t, name + '.props', [ + makeRequiredRule(), + { + type: 'switch', + field: 'drag', + title: '拖拽上传', + value: false + }, + { + type: 'select', + field: 'fileType', + title: '图片类型限制', + value: ['image/jpeg', 'image/png', 'image/gif'], + options: [ + { label: 'image/apng', value: 'image/apng' }, + { label: 'image/bmp', value: 'image/bmp' }, + { label: 'image/gif', value: 'image/gif' }, + { label: 'image/jpeg', value: 'image/jpeg' }, + { label: 'image/pjpeg', value: 'image/pjpeg' }, + { label: 'image/svg+xml', value: 'image/svg+xml' }, + { label: 'image/tiff', value: 'image/tiff' }, + { label: 'image/webp', value: 'image/webp' }, + { label: 'image/x-icon', value: 'image/x-icon' } + ], + props: { + multiple: true + } + }, + { + type: 'inputNumber', + field: 'fileSize', + title: '大小限制(MB)', + value: 5, + props: { min: 0 } + }, + { + type: 'input', + field: 'height', + title: '组件高度', + value: '150px' + }, + { + type: 'input', + field: 'width', + title: '组件宽度', + value: '150px' + }, + { + type: 'input', + field: 'borderradius', + title: '组件边框圆角', + value: '8px' + }, + { + type: 'switch', + field: 'disabled', + title: '是否显示删除按钮', + value: true + }, + { + type: 'switch', + field: 'showBtnText', + title: '是否显示按钮文字', + value: true + } + ]) + } + } +} diff --git a/src/components/FormCreate/src/config/useUploadImgsRule.ts b/src/components/FormCreate/src/config/useUploadImgsRule.ts new file mode 100644 index 00000000..0bf2378c --- /dev/null +++ b/src/components/FormCreate/src/config/useUploadImgsRule.ts @@ -0,0 +1,84 @@ +import { generateUUID } from '@/utils' +import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' + +export const useUploadImgsRule = () => { + const label = '多图上传' + const name = 'UploadImgs' + return { + icon: 'icon-upload', + label, + name, + rule() { + return { + type: name, + field: generateUUID(), + title: label, + info: '', + $required: false + } + }, + props(_, { t }) { + return localeProps(t, name + '.props', [ + makeRequiredRule(), + { + type: 'switch', + field: 'drag', + title: '拖拽上传', + value: false + }, + { + type: 'select', + field: 'fileType', + title: '图片类型限制', + value: ['image/jpeg', 'image/png', 'image/gif'], + options: [ + { label: 'image/apng', value: 'image/apng' }, + { label: 'image/bmp', value: 'image/bmp' }, + { label: 'image/gif', value: 'image/gif' }, + { label: 'image/jpeg', value: 'image/jpeg' }, + { label: 'image/pjpeg', value: 'image/pjpeg' }, + { label: 'image/svg+xml', value: 'image/svg+xml' }, + { label: 'image/tiff', value: 'image/tiff' }, + { label: 'image/webp', value: 'image/webp' }, + { label: 'image/x-icon', value: 'image/x-icon' } + ], + props: { + multiple: true + } + }, + { + type: 'inputNumber', + field: 'fileSize', + title: '大小限制(MB)', + value: 5, + props: { min: 0 } + }, + { + type: 'inputNumber', + field: 'limit', + title: '数量限制', + value: 5, + props: { min: 0 } + }, + { + type: 'input', + field: 'height', + title: '组件高度', + value: '150px' + }, + { + type: 'input', + field: 'width', + title: '组件宽度', + value: '150px' + }, + { + type: 'input', + field: 'borderradius', + title: '组件边框圆角', + value: '8px' + } + ]) + } + } +} diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts new file mode 100644 index 00000000..a202bd13 --- /dev/null +++ b/src/components/FormCreate/src/useFormCreateDesigner.ts @@ -0,0 +1,31 @@ +import { useUploadFileRule, useUploadImgRule, useUploadImgsRule } from './config' +import { Ref } from 'vue' + +/** + * 表单设计器增强 hook + * 新增 + * - 文件上传 + * - 单图上传 + * - 多图上传 + */ +export const useFormCreateDesigner = (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 + }) + }) + }) +} diff --git a/src/components/FormCreate/src/utils/index.ts b/src/components/FormCreate/src/utils/index.ts new file mode 100644 index 00000000..49901b5f --- /dev/null +++ b/src/components/FormCreate/src/utils/index.ts @@ -0,0 +1,19 @@ +// TODO puhui999: 借鉴一下 form-create-designer utils 方法 🤣 (导入不了只能先 copy 过来用下) +export function makeRequiredRule() { + return { + type: 'Required', + field: 'formCreate$required', + title: '是否必填' + } +} + +export const localeProps = (t, prefix, rules) => { + return rules.map((rule) => { + if (rule.field === 'formCreate$required') { + rule.title = t('props.required') || rule.title + } else if (rule.field && rule.field !== '_optionType') { + rule.title = t('components.' + prefix + '.' + rule.field) || rule.title + } + return rule + }) +} diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index 71f944ed..97de9afc 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -49,7 +49,6 @@ const emit = defineEmits(['update:modelValue']) const props = defineProps({ modelValue: propTypes.oneOfType([String, Array]).isRequired, - title: propTypes.string.def('文件上传'), fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] fileSize: propTypes.number.def(5), // 大小限制(MB) limit: propTypes.number.def(5), // 数量限制 diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts index a6cb8213..ffbcc010 100644 --- a/src/plugins/formCreate/index.ts +++ b/src/plugins/formCreate/index.ts @@ -1,22 +1,24 @@ import type { App } from 'vue' // 👇使用 form-create 需额外全局引入 element plus 组件 import { + ElAlert, ElAside, - ElPopconfirm, - ElHeader, - ElMain, ElContainer, ElDivider, - ElTransfer, - ElAlert, - ElTabs, + ElHeader, + ElMain, + ElPopconfirm, ElTable, ElTableColumn, - ElTabPane + ElTabPane, + ElTabs, + ElTransfer } from 'element-plus' - +import FcDesigner from '@form-create/designer' import formCreate from '@form-create/element-ui' import install from '@form-create/element-ui/auto-import' +//======================= 自定义组件 ======================= +import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile' const components = [ ElAside, @@ -30,7 +32,10 @@ const components = [ ElTabs, ElTable, ElTableColumn, - ElTabPane + ElTabPane, + UploadImg, + UploadImgs, + UploadFile ] // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档 @@ -40,4 +45,5 @@ export const setupFormCreate = (app: App) => { }) formCreate.use(install) app.use(formCreate) + app.use(FcDesigner) } diff --git a/src/views/bpm/form/editor/index.vue b/src/views/bpm/form/editor/index.vue index b7c45cab..0d1230c4 100644 --- a/src/views/bpm/form/editor/index.vue +++ b/src/views/bpm/form/editor/index.vue @@ -45,6 +45,7 @@ import * as FormApi from '@/api/bpm/form' import FcDesigner from '@form-create/designer' import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate' import { useTagsViewStore } from '@/store/modules/tagsView' +import { useFormCreateDesigner } from '@/components/FormCreate' defineOptions({ name: 'BpmFormEditor' }) @@ -55,6 +56,7 @@ const { query } = useRoute() // 路由信息 const { delView } = useTagsViewStore() // 视图操作 const designer = ref() // 表单设计器 +useFormCreateDesigner(designer) // 表单设计器增强 const dialogVisible = ref(false) // 弹窗是否展示 const formLoading = ref(false) // 表单的加载中：提交的按钮禁用 const formData = ref({ diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue index a0f1592c..3d542c80 100644 --- a/src/views/bpm/form/index.vue +++ b/src/views/bpm/form/index.vue @@ -88,7 +88,7 @@ - + diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue index 6da1d415..f3072e56 100644 --- a/src/views/bpm/processInstance/detail/index.vue +++ b/src/views/bpm/processInstance/detail/index.vue @@ -24,15 +24,15 @@ {{ processInstance?.startUser.nickname }} {{ processInstance?.startUser.deptName }} - + @@ -91,7 +91,7 @@ -