Merge pull request #114 from GoldenZqqq/feature/bpm

工作流流程新增/修改/设计页面路由与子组件拆分、样式与逻辑优化bug修复

Author: YunaiV

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -315,6 +315,20 @@ const props = defineProps({
   }
 })
 
+// 监听value变化,重新加载流程图
+watch(() => props.value, (newValue) => {
+  if (newValue && bpmnModeler) {
+    createNewDiagram(newValue)
+  }
+}, { immediate: true })
+
+// 监听processId和processName变化
+watch([() => props.processId, () => props.processName], ([newId, newName]) => {
+  if (newId && newName && !props.value) {
+    createNewDiagram(null)
+  }
+}, { immediate: true })
+
 provide('configGlobal', props)
 let bpmnModeler: any = null
 const defaultZoom = ref(1)
@@ -666,18 +680,17 @@ const previewProcessJson = () => {
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 const processSave = async () => {
-  // console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
-  const { err, xml } = await bpmnModeler.saveXML()
-  // console.log(err, 'errerrerrerrerr')
-  // console.log(xml, 'xmlxmlxmlxmlxml')
-  // 读取异常时抛出异常
-  if (err) {
-    // this.$modal.msgError('保存模型失败，请重试！')
-    alert('保存模型失败，请重试！')
-    return
+  try {
+    const { err, xml } = await bpmnModeler.saveXML()
+    if (err) {
+      ElMessage.error('保存流程设计失败，请重试！')
+      return
+    }
+    emit('save', xml)
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('保存流程设计失败，请重试！')
   }
-  // 触发 save 事件
-  emit('save', xml)
 }
 /** 高亮显示 */
 // const highlightedCode = (previewType, previewResult) => {

src/router/modules/remaining.ts

@@ -332,14 +332,26 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
-        path: 'manager/model/create-update', // TODO @goldenzqqq：是不是拆分成两个，一个 create 创建流程；一个 update 修改流程？
-        component: () => import('@/views/bpm/model/CreateUpdate.vue'), // TODO @goldenzqqq：是不是放到 '@/views/bpm/model/form/index.vue'。然后，原本的 editor/index.vue 是不是可以清理了呀？
-        name: 'BpmModelCreateUpdate',
+        path: 'manager/model/create',
+        component: () => import('@/views/bpm/model/form/index.vue'),
+        name: 'BpmModelCreate',
         meta: {
           noCache: true,
           hidden: true,
           canTo: true,
-          title: '创建/修改流程',
+          title: '创建流程',
+          activeMenu: '/bpm/manager/model'
+        }
+      },
+      {
+        path: 'manager/model/update/:id',
+        component: () => import('@/views/bpm/model/form/index.vue'),
+        name: 'BpmModelUpdate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '修改流程',
           activeMenu: '/bpm/manager/model'
         }
       }

src/views/bpm/model/CategoryDraggableModel.vue

@@ -339,8 +339,10 @@ const handleChangeState = async (row: any) => {
 
 /** 设计流程 */
 const handleDesign = (row: any) => {
-  // TODO @goldenzqqq：最好使用 name 哈
-  push(`/bpm/manager/model/create-update?id=${row.id}`)
+  push({
+    name: 'BpmModelUpdate',
+    params: { id: row.id }
+  })
 }
 
 /** 发布流程 */
@@ -483,11 +485,13 @@ const handleDeleteCategory = async () => {
 /** 添加流程模型弹窗 */
 const modelFormRef = ref()
 const openModelForm = (type: string, id?: number) => {
-  // TODO @goldenzqqq：最好使用 name 哈
   if (type === 'create') {
-    push('/bpm/manager/model/create-update')
+    push({ name: 'BpmModelCreate' })
   } else {
-    push(`/bpm/manager/model/create-update?id=${id}`)
+    push({
+      name: 'BpmModelUpdate',
+      params: { id }
+    })
   }
 }