【代码评审】Bpm：新的编辑界面

src/router/modules/remaining.ts

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

src/views/bpm/model/CategoryDraggableModel.vue

@@ -339,21 +339,7 @@ const handleChangeState = async (row: any) => {
 
 /** 设计流程 */
 const handleDesign = (row: any) => {
-  // if (row.type == BpmModelType.BPMN) {
+  // TODO @goldenzqqq：最好使用 name 哈
-  //   push({
-  //     name: 'BpmModelEditor',
-  //     query: {
-  //       modelId: row.id
-  //     }
-  //   })
-  // } else {
-  //   push({
-  //     name: 'SimpleModelDesign',
-  //     query: {
-  //       modelId: row.id
-  //     }
-  //   })
-  // }
   push(`/bpm/manager/model/create-update?id=${row.id}`)
 }
 
@@ -497,6 +483,7 @@ const handleDeleteCategory = async () => {
 /** 添加流程模型弹窗 */
 const modelFormRef = ref()
 const openModelForm = (type: string, id?: number) => {
+  // TODO @goldenzqqq：最好使用 name 哈
   if (type === 'create') {
     push('/bpm/manager/model/create-update')
   } else {

src/views/bpm/model/CreateUpdate.vue

@@ -50,6 +50,8 @@
   <!-- 主体内容 -->
   <ContentWrap class="mt-50px">
     <!-- 第一步：基本信息 -->
+    <!-- TODO @goldenzqqq：是不是可以居中哈，1024 -->
+    <!-- TODO @goldenzqqq：有必要，把第一步、第二步，拆成独立的 vue 组件哇？主要是，把相关的 html、还有 js 逻辑，可以挪进去，让主的 index.vue 更精简一点 -->
     <div v-show="currentStep === 0">
       <el-form
         ref="formRef"
@@ -200,6 +202,7 @@
 
     <div v-if="currentStep === 1">
       <!-- 第二步：表单设计 -->
+      <!-- TODO @goldenzqqq：是不是可以居中哈，1024 -->
       <el-form
         ref="formRef"
         :model="formData"
@@ -316,9 +319,7 @@ const router = useRouter()
 const route = useRoute()
 const userStore = useUserStoreWithOut()
 
-// 步骤控制
+const currentStep = ref(0) // 步骤控制
-const currentStep = ref(0)
-// 表单数据
 const formRef = ref()
 const formData: any = ref({
   id: undefined,
@@ -337,9 +338,7 @@ const formData: any = ref({
   managerUserType: undefined,
   startUserIds: [],
   managerUserIds: []
-})
+}) // 表单数据
-
-// 表单校验规则
 const formRules = {
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
   key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
@@ -352,7 +351,7 @@ const formRules = {
   formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
   managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
-}
+} // 表单校验规则
 
 // 流程设计器相关
 const xmlString = ref(undefined)
@@ -368,19 +367,19 @@ const selectedManagerUsers = ref<UserVO[]>([])
 const userSelectFormRef = ref()
 const currentSelectType = ref<'start' | 'manager'>('start')
 
-// 打开发起人选择
+/** 打开发起人选择 */
 const openStartUserSelect = () => {
   currentSelectType.value = 'start'
   userSelectFormRef.value.open(0, selectedStartUsers.value)
 }
 
-// 打开管理员选择
+/** 打开管理员选择 */
 const openManagerUserSelect = () => {
   currentSelectType.value = 'manager'
   userSelectFormRef.value.open(0, selectedManagerUsers.value)
 }
 
-// 处理用户选择确认
+/** 处理用户选择确认 */
 const handleUserSelectConfirm = (_, users: UserVO[]) => {
   if (currentSelectType.value === 'start') {
     selectedStartUsers.value = users
@@ -391,7 +390,7 @@ const handleUserSelectConfirm = (_, users: UserVO[]) => {
   }
 }
 
-// 处理发起人类型变化
+/** 处理发起人类型变化 */
 const handleStartUserTypeChange = (value: number) => {
   if (value !== 1) {
     selectedStartUsers.value = []
@@ -399,7 +398,7 @@ const handleStartUserTypeChange = (value: number) => {
   }
 }
 
-// 处理管理员类型变化
+/** 处理管理员类型变化 */
 const handleManagerUserTypeChange = (value: number) => {
   if (value !== 1) {
     selectedManagerUsers.value = []
@@ -407,19 +406,21 @@ const handleManagerUserTypeChange = (value: number) => {
   }
 }
 
-// 移除发起人
+/** 移除发起人 */
 const handleRemoveStartUser = (user: UserVO) => {
   selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  formData.value.startUserIds = formData.value.startUserIds.filter((id) => id !== user.id)
+  formData.value.startUserIds = formData.value.startUserIds.filter((id: number) => id !== user.id)
 }
 
-// 移除管理员
+/** 移除管理员 */
 const handleRemoveManagerUser = (user: UserVO) => {
   selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
-  formData.value.managerUserIds = formData.value.managerUserIds.filter((id) => id !== user.id)
+  formData.value.managerUserIds = formData.value.managerUserIds.filter(
+    (id: number) => id !== user.id
+  )
 }
 
-// 保存操作
+/** 保存操作 */
 const handleSave = async () => {
   try {
     if (formData.value.id) {
@@ -436,7 +437,7 @@ const handleSave = async () => {
   }
 }
 
-// 发布操作
+/** 发布操作 */
 const handleDeploy = async () => {
   try {
     await message.confirm('是否确认发布该流程？')
@@ -445,7 +446,8 @@ const handleDeploy = async () => {
     await handleSave()
     await ModelApi.deployModel(formData.value.id)
     message.success('发布成功')
-    router.push({ path: '/bpm/manager/model' })
+    // TODO @goldenzqqq：最好使用 name 哈
+    await router.push({ path: '/bpm/manager/model' })
   } catch (error) {
     if (error instanceof Error) {
       // 校验失败时,跳转到对应步骤
@@ -465,7 +467,7 @@ const handleDeploy = async () => {
   }
 }
 
-// 初始化数据
+/** 初始化数据 */
 const initData = async () => {
   const modelId = route.query.id as unknown as string
   if (modelId) {
@@ -497,16 +499,12 @@ const initData = async () => {
   userList.value = await UserApi.getSimpleUserList()
 }
 
-onMounted(async () => {
+/** 第一步校验 */
-  await initData()
-})
-
-// 第一步校验
 const validateStep1 = async () => {
   await formRef.value?.validate(['name', 'key', 'category', 'icon', 'type', 'visible'])
 }
 
-// 第二步校验
+/** 第二步校验 */
 const validateStep2 = async () => {
   await formRef.value?.validate([
     'formType',
@@ -516,13 +514,14 @@ const validateStep2 = async () => {
   ])
 }
 
-// 第三步校验
+/** 第三步校验 */
 const validateStep3 = async () => {
   if (!xmlString.value) {
     throw new Error('请设计流程')
   }
 }
 
+/** 校验全部 */
 const validateAllSteps = async () => {
   for (const step of steps) {
     if (step.validator) {
@@ -531,13 +530,14 @@ const validateAllSteps = async () => {
   }
 }
 
+// TODO @goldenzqqq：是不是可以把 step1、step2、step3，改成 basic、form、designer。这样，可读性会好点。
 const steps = [
   { title: '基本信息', validator: validateStep1 },
   { title: '表单设计', validator: validateStep2 },
   { title: '流程设计', validator: validateStep3 }
 ]
 
-// 处理设计器保存成功
+/** 处理设计器保存成功 */
 const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
     // 新建时，保存设计器生成的XML
@@ -546,7 +546,7 @@ const handleDesignSuccess = (bpmnXml?: string) => {
   message.success('保存成功')
 }
 
-// 步骤切换处理
+/** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   // 如果是切换到第三步（流程设计），需要校验key和name
   if (index === 2) {
@@ -555,11 +555,12 @@ const handleStepClick = async (index: number) => {
       return
     }
   }
+  // TODO @goldenzqqq：感觉这里可以优化下，切换的时候，必须当前表单填写正确，不然不允许切换。
 
   currentStep.value = index
 }
 
-// 添加一个计算属性来判断是否显示设计器
+/** 添加一个计算属性来判断是否显示设计器 */
 const showDesigner = computed(() => {
   return (
     currentStep.value === 2 &&
@@ -585,6 +586,11 @@ onBeforeUnmount(() => {
     w.bpmnInstances = null
   }
 })
+
+/** 初始化 */
+onMounted(async () => {
+  await initData()
+})
 </script>
 
 <style lang="scss" scoped>

src/views/bpm/model/ModelForm.vue

@@ -201,11 +201,12 @@ import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { ElMessageBox } from 'element-plus'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import { BpmModelFormType, BpmModelType } from '@/utils/constants'
 import { UserVO } from '@/api/system/user'
 import * as UserApi from '@/api/system/user'
 import { useUserStoreWithOut } from '@/store/modules/user'
+import { FormVO } from '@/api/bpm/form'
 
 defineOptions({ name: 'ModelForm' })
 
@@ -251,12 +252,12 @@ const formRules = reactive({
   managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const formList = ref([]) // 流程表单的下拉框的数据
+const formList = ref<FormVO[]>([]) // 流程表单的下拉框的数据
-const categoryList = ref([]) // 流程分类列表
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 const userList = ref<UserVO[]>([]) // 用户列表
 const selectedStartUsers = ref<UserVO[]>([]) // 已选择的发起人列表
 const selectedManagerUsers = ref<UserVO[]>([]) // 已选择的管理员列表
-const userSelectFormRef = ref() // 用户选择弹窗ref
+const userSelectFormRef = ref() // 用户选择弹窗 ref
 const currentSelectType = ref<'start' | 'manager'>('start') // 当前选择的是发起人还是管理员
 
 /** 打开弹窗 */
@@ -363,7 +364,7 @@ const resetForm = () => {
   selectedManagerUsers.value = []
 }
 
-// 处理发起人类型变化
+/** 处理发起人类型变化 */
 const handleStartUserTypeChange = (value: number) => {
   if (value !== 1) {
     selectedStartUsers.value = []
@@ -371,7 +372,7 @@ const handleStartUserTypeChange = (value: number) => {
   }
 }
 
-// 处理管理员类型变化
+/** 处理管理员类型变化 */
 const handleManagerUserTypeChange = (value: number) => {
   if (value !== 1) {
     selectedManagerUsers.value = []
@@ -379,19 +380,19 @@ const handleManagerUserTypeChange = (value: number) => {
   }
 }
 
-// 打开发起人选择
+/** 打开发起人选择 */
 const openStartUserSelect = () => {
   currentSelectType.value = 'start'
   userSelectFormRef.value.open(0, selectedStartUsers.value)
 }
 
-// 打开管理员选择
+/** 打开管理员选择 */
 const openManagerUserSelect = () => {
   currentSelectType.value = 'manager'
   userSelectFormRef.value.open(0, selectedManagerUsers.value)
 }
 
-// 处理用户选择确认
+/** 处理用户选择确认 */
 const handleUserSelectConfirm = (_, users: UserVO[]) => {
   if (currentSelectType.value === 'start') {
     selectedStartUsers.value = users
@@ -402,16 +403,18 @@ const handleUserSelectConfirm = (_, users: UserVO[]) => {
   }
 }
 
-// 移除发起人
+/** 移除发起人 */
 const handleRemoveStartUser = (user: UserVO) => {
   selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  formData.value.startUserIds = formData.value.startUserIds.filter((id) => id !== user.id)
+  formData.value.startUserIds = formData.value.startUserIds.filter((id: number) => id !== user.id)
 }
 
-// 移除管理员
+/** 移除管理员 */
 const handleRemoveManagerUser = (user: UserVO) => {
   selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
-  formData.value.managerUserIds = formData.value.managerUserIds.filter((id) => id !== user.id)
+  formData.value.managerUserIds = formData.value.managerUserIds.filter(
+    (id: number) => id !== user.id
+  )
 }
 </script>
 

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

@@ -32,7 +32,6 @@ import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/d
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
 import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
 import * as ModelApi from '@/api/bpm/model'
-import { getForm, FormVO } from '@/api/bpm/form'
 
 defineOptions({ name: 'BpmModelEditor' })
 
@@ -82,7 +81,7 @@ const initBpmnInstances = () => {
     }
 
     // 检查所有实例是否都存在
-    return Object.values(instances).every(instance => instance)
+    return Object.values(instances).every((instance) => instance)
   } catch (error) {
     console.error('初始化 bpmnInstances 失败:', error)
     return false
@@ -168,7 +167,7 @@ onMounted(async () => {
   }
 })
 
-// 更新模型数据
+/** 更新模型数据 */
 const updateModelData = async (key?: string, name?: string) => {
   if (key && name) {
     xmlString.value = getDefaultBpmnXml(key, name)
@@ -185,12 +184,16 @@ const updateModelData = async (key?: string, name?: string) => {
   }
 }
 
-// 监听key和name的变化
+// 监听 key 和 name 的变化
-watch([() => props.modelKey, () => props.modelName], async ([newKey, newName]) => {
+watch(
-  if (!props.modelId && newKey && newName && modeler.value) {
+  [() => props.modelKey, () => props.modelName],
-    await updateModelData(newKey, newName)
+  async ([newKey, newName]) => {
-  }
+    if (!props.modelId && newKey && newName && modeler.value) {
-}, { immediate: true, deep: true })
+      await updateModelData(newKey, newName)
+    }
+  },
+  { immediate: true, deep: true }
+)
 
 // 在组件卸载时清理
 onBeforeUnmount(() => {