【代码评审】BPM：流程编辑

Author: YunaiV

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

@@ -63,8 +63,6 @@ const props = defineProps({
 })
 
 const processData = inject('processData') as Ref
-
-
 const loading = ref(false)
 const formFields = ref<string[]>([])
 const formType = ref(20)
@@ -110,7 +108,6 @@ const updateModel = () => {
   }
 }
 
-
 const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
   if (!simpleModelNode) {
     return
@@ -201,7 +198,5 @@ onMounted(async () => {
 
 const simpleProcessModelRef = ref()
 
-
-defineExpose({
-})
+defineExpose({})
 </script>

src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue

@@ -3,10 +3,15 @@
     <div class="position-absolute top-0px right-0px bg-#fff">
       <el-row type="flex" justify="end">
         <el-button-group key="scale-control" size="default">
-          <el-button size="default" @click="exportJson()"><Icon icon="ep:download" />导出</el-button>
-          <el-button size="default" @click="importJson()"><Icon icon="ep:upload" />导入</el-button>
+          <el-button v-if="!readonly" size="default" @click="exportJson">
+            <Icon icon="ep:download" /> 导出
+          </el-button>
+          <el-button v-if="!readonly" size="default" @click="importJson">
+            <Icon icon="ep:upload" />导入
+          </el-button>
           <!-- 用于打开本地文件-->
           <input
+            v-if="!readonly"
             type="file"
             id="files"
             ref="refFile"
@@ -19,15 +24,6 @@
           <el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
           <el-button size="default" :plain="true" :icon="ZoomIn" @click="zoomIn()" />
         </el-button-group>
-<!--        <el-button-->
-<!--          v-if="!readonly"-->
-<!--          size="default"-->
-<!--          class="ml-4px"-->
-<!--          type="primary"-->
-<!--          :icon="Select"-->
-<!--          @click="saveSimpleFlowModel"-->
-<!--          >保存模型</el-button-->
-<!--        >-->
       </el-row>
     </div>
     <div class="simple-process-model" :style="`transform: scale(${scaleValue / 100});`">
@@ -53,7 +49,7 @@
 import ProcessNodeTree from './ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
 import { useWatchNode } from './node'
-import { ZoomOut, ZoomIn, ScaleToOriginal, Select } from '@element-plus/icons-vue'
+import { ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
 import { isString } from '@/utils/is'
 
 defineOptions({
@@ -73,7 +69,7 @@ const props = defineProps({
 })
 
 const emits = defineEmits<{
-  'save': [node: SimpleFlowNode | undefined]
+  save: [node: SimpleFlowNode | undefined]
 }>()
 
 const processNodeTree = useWatchNode(props)
@@ -175,25 +171,28 @@ defineExpose({
   getCurrentFlowData
 })
 
+/** 导出 JSON */
+// TODO @zws：增加一个 download 里面搞个 json 更好
 const exportJson = () => {
-  const blob = new Blob([JSON.stringify(processNodeTree.value)]);
-  const tempLink = document.createElement('a'); // 创建a标签
-  const href = window.URL.createObjectURL(blob); // 创建下载的链接
-  //filename
-  const fileName = `model.json`;
-  tempLink.href = href;
-  tempLink.target = '_blank';
-  tempLink.download = fileName;
-  document.body.appendChild(tempLink);
-  tempLink.click(); // 点击下载
-  document.body.removeChild(tempLink); // 下载完成移除元素
-  window.URL.revokeObjectURL(href); // 释放掉blob对象
+  const blob = new Blob([JSON.stringify(processNodeTree.value)])
+  const tempLink = document.createElement('a') // 创建a标签
+  const href = window.URL.createObjectURL(blob) // 创建下载的链接
+  // filename
+  const fileName = `model.json`
+  tempLink.href = href
+  tempLink.target = '_blank'
+  tempLink.download = fileName
+  document.body.appendChild(tempLink)
+  tempLink.click() // 点击下载
+  document.body.removeChild(tempLink) // 下载完成移除元素
+  window.URL.revokeObjectURL(href) // 释放掉 blob 对象
 }
+
+/** 导入 JSON */
+const refFile = ref()
 const importJson = () => {
   refFile.value.click()
 }
-const refFile = ref()
-// 加载本地文件
 const importLocalFile = () => {
   const file = refFile.value.files[0]
   const reader = new FileReader()

src/router/modules/remaining.ts

@@ -344,6 +344,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
+        // TODO @zws：1）建议，在加一个路由。然后标题是“复制流程”，这样体验会好点；2）复制出来的数据，在名字前面，加“副本 ”，和钉钉保持一致！
         path: 'manager/model/:type/:id',
         component: () => import('@/views/bpm/model/form/index.vue'),
         name: 'BpmModelUpdate',

src/views/bpm/model/editor/index.vue

@@ -51,7 +51,7 @@ const formType = ref(20)
 provide('formFields', formFields)
 provide('formType', formType)
 
-//注入 流程数据
+// 注入流程数据
 const xmlString = inject('processData') as Ref
 
 const modeler = shallowRef() // BPMN Modeler
@@ -66,13 +66,12 @@ const controlForm = ref({
 })
 const model = ref<ModelApi.ModelVO>() // 流程模型的信息
 
-
 /** 初始化 modeler */
+// TODO @zws：需要初始化，不然首次创建后，无法发布！相当于说，key、name 要去赋值下
 const initModeler = async (item) => {
   modeler.value = item
 }
 
-
 /** 添加/修改模型 */
 const save = async (bpmnXml: string) => {
   try {
@@ -84,7 +83,6 @@ const save = async (bpmnXml: string) => {
   }
 }
 
-
 // 在组件卸载时清理
 onBeforeUnmount(() => {
   modeler.value = null
@@ -94,8 +92,6 @@ onBeforeUnmount(() => {
     w.bpmnInstances = null
   }
 })
-
-
 </script>
 <style lang="scss">
 .process-panel__container {

src/views/bpm/model/form/ProcessDesign.vue

@@ -65,16 +65,6 @@ const handleDesignSuccess = async (data?: any) => {
 const showDesigner = computed(() => {
   return Boolean(modelData.value?.key && modelData.value?.name)
 })
-
-// 组件创建时初始化数据
-onMounted(() => {
-})
-
-// 组件卸载前保存数据
-onBeforeUnmount(async () => {
-
-})
-
 defineExpose({
   validate
 })

src/views/bpm/model/form/index.vue

@@ -67,11 +67,7 @@
         </div>
 
         <!-- 第三步：流程设计 -->
-        <ProcessDesign
-          v-if="currentStep === 2"
-          v-model="formData"
-          ref="processDesignRef"
-        />
+        <ProcessDesign v-if="currentStep === 2" v-model="formData" ref="processDesignRef" />
       </div>
     </div>
   </ContentWrap>
@@ -117,7 +113,7 @@ const validateProcess = async () => {
   await processDesignRef.value?.validate()
 }
 
-const currentStep = ref(-1) // 步骤控制 一开始全部不展示等当前页面数据初始化完成
+const currentStep = ref(-1) // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
 
 const steps = [
   { title: '基本信息', validator: validateBasic },
@@ -148,14 +144,13 @@ const formData: any = ref({
 //流程数据
 const processData = ref<any>()
 
-provide("processData", processData)
+provide('processData', processData)
 
 // 数据列表
 const formList = ref([])
 const categoryList = ref([])
 const userList = ref<UserApi.UserVO[]>([])
 
-
 /** 初始化数据 */
 const initData = async () => {
   const modelId = route.params.id as string
@@ -178,20 +173,25 @@ const initData = async () => {
   // 获取用户列表
   userList.value = await UserApi.getSimpleUserList()
 
+  // 最终，设置 currentStep 切换到第一步
   currentStep.value = 0
 }
 
-//根据类型切换流程数据
-watch(async () => formData.value.type, (newValue, oldValue) => {
-  if (formData.value.type === BpmModelType.BPMN) {
-    processData.value = formData.value.bpmnXml
-  } else if (formData.value.type === BpmModelType.SIMPLE) {
-    processData.value = formData.value.simpleModel
+/** 根据类型切换流程数据 */
+watch(
+  async () => formData.value.type,
+  () => {
+    if (formData.value.type === BpmModelType.BPMN) {
+      processData.value = formData.value.bpmnXml
+    } else if (formData.value.type === BpmModelType.SIMPLE) {
+      processData.value = formData.value.simpleModel
+    }
+    console.log('加载流程数据', processData.value)
+  },
+  {
+    immediate: true
   }
-  console.log('加载流程数据', processData.value)
-}, {
-  immediate: true,
-})
+)
 
 /** 校验所有步骤数据是否完整 */
 const validateAllSteps = async () => {
@@ -316,7 +316,7 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   try {
-    console.log('index', index);
+    console.log('index', index)
     if (index !== 0) {
       await validateBasic()
     }
@@ -329,14 +329,12 @@ const handleStepClick = async (index: number) => {
 
     // 切换步骤
     currentStep.value = index
-
   } catch (error) {
     console.error('步骤切换失败:', error)
     message.warning('请先完善当前步骤必填信息')
   }
 }
 
-
 /** 返回列表页 */
 const handleBack = () => {
   // 先删除当前页签

src/views/bpm/model/index.vue

@@ -206,9 +206,7 @@ const getList = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
-})
-onActivated(()=>{
+onActivated(() => {
   getList()
 })
 </script>

src/views/bpm/simple/SimpleModelDesign.vue

@@ -17,7 +17,7 @@ defineOptions({
   name: 'SimpleModelDesign'
 })
 
-const props = defineProps<{
+defineProps<{
   modelId?: string
   modelKey?: string
   modelName?: string
@@ -34,17 +34,5 @@ const handleSuccess = (data?: any) => {
     emit('success', data)
   }
 }
-
-// 组件创建时初始化数据
-onMounted(() => {
-})
-
-// 组件卸载前保存数据
-onBeforeUnmount(async () => {
-
-})
-
-defineExpose({
-})
 </script>
 <style lang="scss" scoped></style>