From 7285d692a74d7bbec9cd80a359134a862fb3e212 Mon Sep 17 00:00:00 2001 From: xxm1995 Date: Thu, 23 Mar 2023 20:45:25 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=E5=B7=A5=E4=BD=9C=E6=B5=81=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/vite/plugin/index.ts | 8 +- package.json | 5 +- .../RoleSelectModal/BRoleSelectModal.vue | 2 +- .../Bootx/SuperQuery/BSuperQuery.vue | 2 +- .../Bootx/SuperQuery/SuperQueryItem.vue | 2 +- .../Bootx/SuperQuery/SuperQueryModel.vue | 2 +- .../UserSelectModal/BUserSelectModal.vue | 2 +- src/components/Bpmn/ProcessViewer.vue | 2 +- .../header/components/notify/NoticeReader.vue | 2 +- .../header/components/notify/index.vue | 2 +- src/views/account/bind/AccountBind.vue | 2 +- src/views/account/bind/WeChatQrBind.vue | 2 +- src/views/account/security/EmailBind.vue | 2 +- src/views/account/security/EmailEdit.vue | 2 +- src/views/account/security/PasswordEdit.vue | 2 +- src/views/account/security/PhoneBind.vue | 2 +- src/views/account/security/PhoneEdit.vue | 2 +- src/views/account/security/SecureSetting.vue | 2 +- src/views/account/setting/BaseSetting.vue | 2 +- src/views/demo/payment/cashier/Cashier.vue | 2 +- .../demo/payment/cashier/CashierBarCode.vue | 2 +- .../demo/payment/cashier/CashierQrCode.vue | 2 +- .../payment/cashier/CombinationCashier.vue | 2 +- .../demo/payment/cashier/SimpleCashier.vue | 2 +- src/views/login/LoginForm.vue | 2 +- src/views/login/MobileForm.vue | 2 +- src/views/login/QrCodeForm.vue | 27 +- src/views/login/third/ThirdLogin.vue | 2 +- src/views/login/user/ForgetPasswordForm.vue | 2 +- src/views/login/user/RegisterForm.vue | 2 +- src/views/modules/bpm/design/ProcessDesign.ts | 0 .../modules/bpm/design/ProcessDesign.vue | 300 ++++-------------- src/views/modules/bpm/design/ProcessPanel.vue | 36 +++ .../modules/bpm/design/useProcessDesign.ts | 224 +++++++++++++ .../modules/bpm/instance/InstanceList.vue | 2 +- src/views/modules/bpm/model/BpmModelEdit.vue | 2 +- src/views/modules/bpm/model/BpmModelList.vue | 2 +- src/views/modules/bpm/model/BpmModeler.vue | 2 +- .../bpm/model/node/BpmModelNodeEdit.vue | 2 +- .../bpm/model/node/BpmModelNodeList.vue | 2 +- src/views/modules/bpm/task/DoneTaskList.vue | 2 +- src/views/modules/bpm/task/TodoTaskList.vue | 2 +- .../demo/chinaregion/ChinaRegionDemo.vue | 2 +- .../demo/data/encrypt/DataEncryptDemoEdit.vue | 2 +- .../demo/data/encrypt/DataEncryptDemoList.vue | 2 +- .../demo/data/perm/DataPermDemoEdit.vue | 2 +- .../demo/data/perm/DataPermDemoList.vue | 2 +- .../data/sensitive/DataSensitiveDemoEdit.vue | 2 +- .../data/sensitive/DataSensitiveDemoList.vue | 2 +- src/views/modules/demo/mq/MqDemo.vue | 2 +- .../demo/notice/email/SimpleEmailSender.vue | 2 +- .../modules/demo/query/SuperQueryDemoEdit.vue | 2 +- .../modules/demo/query/SuperQueryDemoList.vue | 2 +- .../demo/wangeditor/WangEditorDemo.vue | 2 +- src/views/modules/demo/ws/WebsocketDemo.vue | 2 +- .../modules/develop/codegen/CodeGenForm.vue | 2 +- .../modules/develop/codegen/CodeGenList.vue | 2 +- .../develop/dynamicform/DynamicFormEdit.vue | 2 +- .../develop/dynamicform/DynamicFormList.vue | 2 +- .../develop/dynamicsource/DataSourceList.vue | 2 +- .../dynamicsource/DynamicDataSourceEdit.vue | 2 +- .../dynamicsource/DynamicDataSourceList.vue | 2 +- .../modules/develop/file/FileUploadList.vue | 2 +- .../modules/develop/query/QuerySqlEdit.vue | 2 +- .../modules/develop/query/QuerySqlList.vue | 2 +- .../develop/report/ProjectInfoEdit.vue | 2 +- .../develop/report/ProjectInfoList.vue | 2 +- .../monitor/data/DataVersionLogInfo.vue | 2 +- .../monitor/data/DataVersionLogList.vue | 2 +- .../modules/monitor/login/LoginLogInfo.vue | 2 +- .../modules/monitor/login/LoginLogList.vue | 2 +- .../monitor/operate/OperateLogInfo.vue | 2 +- .../monitor/operate/OperateLogList.vue | 2 +- .../monitor/redis/RedisInfoMonitor.vue | 2 +- .../monitor/system/SystemInfoMonitor.vue | 2 +- .../modules/notice/mail/MailConfigEdit.vue | 2 +- .../modules/notice/mail/MailConfigList.vue | 2 +- .../notice/site/receive/SiteMessageList.vue | 2 +- .../notice/site/sender/SiteMessageEdit.vue | 2 +- .../notice/site/sender/SiteMessageList.vue | 2 +- .../notice/template/MessageTemplateEdit.vue | 2 +- .../notice/template/MessageTemplateList.vue | 2 +- .../notice/template/TemplateRender.vue | 2 +- .../modules/office/myapply/MyApplyList.vue | 2 +- .../modules/office/mydone/MyDoneList.vue | 2 +- .../modules/office/mytodo/MyTodoList.vue | 2 +- .../channel/alipay/AlipayConfigEdit.vue | 2 +- .../channel/alipay/AlipayConfigList.vue | 2 +- .../channel/wechat/WechatPayConfigEdit.vue | 2 +- .../channel/wechat/WechatPayConfigList.vue | 2 +- .../payment/notify/PayNotifyRecordInfo.vue | 2 +- .../payment/notify/PayNotifyRecordList.vue | 2 +- .../payment/order/payment/PaymentInfo.vue | 2 +- .../payment/order/payment/PaymentList.vue | 2 +- .../payment/order/payment/RefundModel.vue | 2 +- .../payment/order/refund/RefundRecordInfo.vue | 2 +- .../payment/order/refund/RefundRecordList.vue | 2 +- .../payment/voucher/VoucherGeneration.vue | 2 +- .../modules/payment/voucher/VoucherInfo.vue | 2 +- .../modules/payment/voucher/VoucherList.vue | 2 +- .../payment/wallet/list/WalletChanger.vue | 2 +- .../payment/wallet/list/WalletInfo.vue | 2 +- .../payment/wallet/list/WalletList.vue | 2 +- .../payment/wallet/list/WalletLogList.vue | 2 +- .../modules/system/client/ClientEdit.vue | 2 +- .../modules/system/client/ClientList.vue | 2 +- src/views/modules/system/dept/DeptEdit.vue | 2 +- src/views/modules/system/dept/DeptList.vue | 2 +- src/views/modules/system/dict/DictEdit.vue | 2 +- .../modules/system/dict/DictItemEdit.vue | 2 +- .../modules/system/dict/DictItemList.vue | 2 +- src/views/modules/system/dict/DictList.vue | 2 +- .../system/loginType/LoginTypeEdit.vue | 2 +- .../system/loginType/LoginTypeList.vue | 2 +- src/views/modules/system/menu/MenuEdit.vue | 2 +- src/views/modules/system/menu/MenuList.vue | 2 +- .../modules/system/menu/ResourceEdit.vue | 2 +- .../modules/system/menu/ResourceList.vue | 2 +- .../modules/system/param/SystemParamEdit.vue | 2 +- .../modules/system/param/SystemParamList.vue | 2 +- .../modules/system/path/PermPathEdit.vue | 2 +- .../modules/system/path/PermPathList.vue | 2 +- .../modules/system/quartz/QuartzJobEdit.vue | 2 +- .../modules/system/quartz/QuartzJobList.vue | 2 +- .../system/quartz/QuartzJobLogList.vue | 2 +- src/views/modules/system/role/RoleEdit.vue | 2 +- src/views/modules/system/role/RoleList.vue | 2 +- .../modules/system/role/RoleMenuModal.vue | 2 +- .../modules/system/role/RolePathModal.vue | 2 +- .../modules/system/scope/DataScopeEdit.vue | 2 +- .../modules/system/scope/DataScopeList.vue | 2 +- .../modules/system/scope/DeptScopeModal.vue | 2 +- .../modules/system/scope/UserScopeModal.vue | 2 +- src/views/modules/system/user/UserAdd.vue | 2 +- src/views/modules/system/user/UserEdit.vue | 2 +- src/views/modules/system/user/UserList.vue | 2 +- src/views/modules/system/user/UserShow.vue | 2 +- .../system/user/dept/UserDeptAssign.vue | 2 +- .../system/user/dept/UserDeptAssignBatch.vue | 2 +- .../system/user/role/UserRoleAssign.vue | 2 +- .../system/user/role/UserRoleAssignBatch.vue | 2 +- .../system/user/scope/UserDataScopeAssign.vue | 2 +- .../user/scope/UserDataScopeAssignBatch.vue | 2 +- .../dingtalk/robot/DingRobotConfigEdit.vue | 2 +- .../dingtalk/robot/DingRobotConfigList.vue | 2 +- .../wechat/article/WechatArticleSelect.vue | 2 +- .../third/wechat/media/WechatMediaList.vue | 2 +- .../third/wechat/media/WechatMediaSelect.vue | 2 +- .../third/wechat/menu/WechatMenuDesign.vue | 2 +- .../third/wechat/menu/WechatMenuEdit.vue | 2 +- .../third/wechat/menu/WechatMenuList.vue | 2 +- .../third/wechat/menu/edit/WxMenuDesign.vue | 2 +- .../wechat/menu/edit/WxMenuDetailEditor.vue | 2 +- .../wechat/template/WechatTemplateEdit.vue | 2 +- .../wechat/template/WechatTemplateList.vue | 2 +- .../wecom/robot/WecomRobotConfigEdit.vue | 2 +- .../wecom/robot/WecomRobotConfigList.vue | 2 +- tsconfig.json | 2 +- yarn.lock | 212 ++++++++++++- 159 files changed, 714 insertions(+), 400 deletions(-) delete mode 100644 src/views/modules/bpm/design/ProcessDesign.ts create mode 100644 src/views/modules/bpm/design/ProcessPanel.vue create mode 100644 src/views/modules/bpm/design/useProcessDesign.ts diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 0a943fed..6bcfbe49 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -15,6 +15,7 @@ import { configVisualizerConfig } from './visualizer' import { configThemePlugin } from './theme' import { configImageminPlugin } from './imagemin' import { configSvgIconsPlugin } from './svgSprite' +import reactivityTransform from '@vue-macros/reactivity-transform/vite' export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv @@ -22,8 +23,8 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { const vitePlugins: (PluginOption | PluginOption[])[] = [ // have to vue({ - // 响应式变量 - reactivityTransform: true, + // 响应式变量 TODO 3.3+ 废弃, 迁移到 Vue Macros Reactivity Transform。 + // reactivityTransform: true, }), // have to vueJsx(), @@ -61,6 +62,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { // vite-plugin-theme vitePlugins.push(configThemePlugin(isBuild)) + // Vue Macros Reactivity Transform 响应式变量 + vitePlugins.push(reactivityTransform()) + // The following plugins only work in the production environment if (isBuild) { // vite-plugin-imagemin diff --git a/package.json b/package.json index e0c9beb9..614ad2af 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "@commitlint/config-conventional": "^16.2.1", "@iconify/json": "^2.1.30", "@purge-icons/generated": "^0.8.1", + "@rys-fe/vite-plugin-theme": "^0.8.6", "@types/codemirror": "^5.60.5", "@types/crypto-js": "^4.1.1", "@types/fs-extra": "^9.0.13", @@ -96,6 +97,7 @@ "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue": "^3.0.1", "@vitejs/plugin-vue-jsx": "^1.3.10", + "@vue-macros/reactivity-transform": "0.3.1", "@vue/compiler-sfc": "^3.2.33", "@vue/test-utils": "^2.0.0-rc.21", "autoprefixer": "^10.4.4", @@ -123,8 +125,8 @@ "rimraf": "^3.0.2", "rollup": "^2.70.2", "rollup-plugin-visualizer": "^5.6.0", - "stylelint": "^14.7.1", "sass": "^1.56.1", + "stylelint": "^14.7.1", "stylelint-config-prettier": "^9.0.3", "stylelint-config-recommended": "^7.0.0", "stylelint-config-recommended-vue": "^1.4.0", @@ -142,7 +144,6 @@ "vite-plugin-pwa": "^0.12.3", "vite-plugin-style-import": "^2.0.0", "vite-plugin-svg-icons": "^2.0.1", - "@rys-fe/vite-plugin-theme": "^0.8.6", "vite-plugin-vue-setup-extend": "^0.4.0", "vite-plugin-windicss": "^1.8.7", "vue-eslint-parser": "^8.3.0", diff --git a/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue b/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue index 46ccb6a9..e2d65d1a 100644 --- a/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue +++ b/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue @@ -52,7 +52,7 @@ + + diff --git a/src/views/modules/bpm/design/useProcessDesign.ts b/src/views/modules/bpm/design/useProcessDesign.ts new file mode 100644 index 00000000..431f0edc --- /dev/null +++ b/src/views/modules/bpm/design/useProcessDesign.ts @@ -0,0 +1,224 @@ +import Modeler from 'bpmn-js/lib/Modeler' +import { $ref } from '@vue-macros/reactivity-transform/macros' +import customTranslate from '/@/components/Bpmn/common/customTranslate' +import { nextTick } from 'vue' +import { getInitBpmnData } from '/@/components/Bpmn/flowable/designData' +import { useMessage } from '/@/hooks/web/useMessage' +import { $$ } from 'vue/macros' + +export default function (canvas: string, emit: any) { + const { createConfirm } = useMessage() + + let isEdit = $ref(false) + let isView = $ref(true) + + // 实例 + let modeler: Modeler + + // xml代码预览 + let codeVisible = $ref(false) + let xmlCode = $ref('') + + // 缩放 + let zoom = $ref(1) + // 编辑时参数 + const isEditModules = [ + { + translate: ['value', customTranslate], // 翻译 + }, + ] + // 查看时参数 + const notEditModules = [ + { + translate: ['value', customTranslate], // 翻译 + paletteProvider: ['value', ''], // 禁用/清空左侧工具栏 + labelEditingProvider: ['value', ''], // 禁用节点编辑 + contextPadProvider: ['value', ''], // 禁用图形菜单 + bendpoints: ['value', {}], // 禁用连线拖动 + move: ['value', ''], // 禁用单个图形拖动 + }, + ] + + /** + * 渲染函数 + */ + async function renderer(xml: string, edit: boolean, view: boolean) { + nextTick(() => console.log(9999)) + isEdit = edit + isView = view + const xmlData = xml || getInitBpmnData() + const additionalModule = edit && !view ? isEditModules : notEditModules + modeler = new Modeler({ + container: canvas, + propertiesPanel: {}, + additionalModules: additionalModule, + moddleExtensions: {}, + }) + await createNewDiagram(xmlData) + } + + /** + * 获取流程元素 + */ + function getProcessElement() { + const rootElements = modeler.getDefinitions().rootElements + for (let i = 0; i < rootElements.length; i++) { + if (rootElements[i].$type === 'bpmn:Process') return rootElements[i] + } + } + + /** + * 撤消 + */ + function undo() { + modeler.get('commandStack').undo() + } + /** + * 重做 + */ + function redo() { + modeler.get('commandStack').redo() + } + + /** + * 查看 bpmn.xml + */ + async function showXML() { + xmlCode = await downXML(false) + codeVisible = true + } + /** + * 保存 + */ + async function saveXML() { + const xml = await downXML() + emit('save', xml) + } + /** + * 下载 bpmn.xml + */ + async function downXML(download = false) { + try { + const { xml } = await modeler.saveXML({ format: true }) + if (download) { + downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml') + } + return xml + } catch (err) { + console.error(err) + } + } + + /** + * 下载图片 + */ + async function downImg(type = 'svg', download = false) { + try { + const { svg } = await modeler.saveSVG({ format: true }) + if (download) { + downloadFile(getProcessElement().name, svg, 'image/svg+xml') + } + return svg + } catch (err) { + console.error(err) + } + } + + /** + * 打开 bpmn.xml 文件 + */ + function openBpmn(file) { + const reader = new FileReader() + reader.readAsText(file, 'utf-8') + reader.onload = () => { + createNewDiagram(reader.result) + } + return false + } + /** + * 下载文件 + */ + function downloadFile(filename, data, type) { + const a = document.createElement('a') + const url = window.URL.createObjectURL(new Blob([data], { type: type })) + a.href = url + a.download = filename + a.click() + window.URL.revokeObjectURL(url) + } + + /** + * 关闭 + */ + function cancel() { + emit('cancel') + } + /** + * 新建画布 + */ + function newDiagram() { + createNewDiagram(getInitBpmnData()) + } + /** + * 让图能自适应屏幕 + */ + function fitViewport() { + zoom = modeler.get('canvas').zoom('fit-viewport', 'auto') + } + /** + * 放大缩小 + */ + function zoomViewport(zoomIn = true) { + zoom = modeler.get('canvas').zoom() + zoom += zoomIn ? 0.1 : -0.1 + modeler.get('canvas').zoom(zoom) + } + /** + * 创建新画布 + */ + async function createNewDiagram(data) { + // 将字符串转换成图显示出来 + data = data.replace(//g, function (match, str) { + return str.replace(/ { + newDiagram() + }, + }) + } + return { + modeler: $$(modeler), + isEdit: $$(isEdit), + isView: $$(isView), + codeVisible: $$(codeVisible), + xmlCode: $$(xmlCode), + zoom: $$(zoom), + renderer, + getProcessElement, + undo, + redo, + showXML, + saveXML, + downXML, + downImg, + openBpmn, + downloadFile, + cancel, + newDiagram, + fitViewport, + zoomViewport, + createNewDiagram, + clearDiagram, + } +} diff --git a/src/views/modules/bpm/instance/InstanceList.vue b/src/views/modules/bpm/instance/InstanceList.vue index 7779edc6..b6fd2ec3 100644 --- a/src/views/modules/bpm/instance/InstanceList.vue +++ b/src/views/modules/bpm/instance/InstanceList.vue @@ -42,7 +42,7 @@