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

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>