【代码评审】工作流：新发起页的优化

Author: YunaiV

src/components/UserSelectForm/index.vue

@@ -16,6 +16,7 @@
       <el-col :span="17" :offset="1">
         <el-transfer
           v-model="selectedUserIdList"
+          :titles="['未选', '已选']"
           filterable
           filter-placeholder="搜索成员"
           :data="userList"
@@ -28,8 +29,9 @@
         :disabled="formLoading || !selectedUserIdList?.length"
         type="primary"
         @click="submitForm"
-        >确 定</el-button
       >
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -44,57 +46,70 @@ const emit = defineEmits<{
   confirm: [id: any, userList: any[]]
 }>()
 const { t } = useI18n() // 国际
+const message = useMessage() // 消息弹窗
+
 const deptList = ref<Tree[]>([]) // 部门树形结构化
 const userList: any = ref([]) // 用户列表
-const message = useMessage() // 消息弹窗
 const selectedUserIdList: any = ref([]) // 选中的用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
-const activityId = ref() // 主键id
+const activityId = ref() // 关联的主键编号 TODO @goldenzqqq：这个 activityId 有没可能不传递。在使用 @submitForm="xxx()" 时，传递的参数。目的是，更加解耦一些。
 
 /** 打开弹窗 */
-const open = async (id, selectedList?) => {
+const open = async (id: number, selectedList?: any[]) => {
   activityId.value = id
+  // 重置表单
   resetForm()
+
+  // 加载相关数据
   deptList.value = handleTree(await DeptApi.getSimpleDeptList())
   await getUserList()
-  selectedUserIdList.value = selectedList?.map((item) => item.id)
-  // 修改时，设置数据
+  // 设置选中的用户列表
+  selectedUserIdList.value = selectedList?.map((item: any) => item.id)
+
+  // 设置可见
   dialogVisible.value = true
 }
 
-/* 获取用户列表 */
-const getUserList = async (deptId?) => {
+/** 获取用户列表 */
+const getUserList = async (deptId?: number) => {
   try {
     // @ts-ignore
+    // TODO @芋艿：替换到 simple List
     const data = await UserApi.getUserPage({ pageSize: 100, pageNo: 1, deptId })
     userList.value = data.list
   } finally {
   }
 }
 
+/** 提交选择 */
 const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
-    const emitUserList = userList.value.filter((user) => selectedUserIdList.value.includes(user.id))
+    const emitUserList = userList.value.filter((user: any) =>
+      selectedUserIdList.value.includes(user.id)
+    )
     // 发送操作成功的事件
     emit('confirm', activityId.value, emitUserList)
   } finally {
     formLoading.value = false
   }
 }
+
+/** 重置表单 */
 const resetForm = () => {
   deptList.value = []
   userList.value = []
   selectedUserIdList.value = []
 }
 
 /** 处理部门被点击 */
-const handleNodeClick = async (row: { [key: string]: any }) => {
+const handleNodeClick = (row: { [key: string]: any }) => {
   getUserList(row.id)
 }
+
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>

src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue

@@ -24,6 +24,7 @@
 
                   <el-col :span="6" :offset="1">
                     <!-- 流程时间线 -->
+                    <!-- TODO @芋艿：selectUserConfirm 调整一下，改成 activityNodes 里面的东西。 -->
                     <ProcessInstanceTimeline
                       ref="timelineRef"
                       :activity-nodes="activityNodes"
@@ -89,6 +90,8 @@ defineOptions({ name: 'ProcessDefinitionDetail' })
 const props = defineProps<{
   selectProcessDefinition: any
 }>()
+const emit = defineEmits(['cancel'])
+
 const { push, currentRoute } = useRouter() // 路由
 const message = useMessage() // 消息弹窗
 const { delView } = useTagsViewStore() // 视图操作
@@ -103,12 +106,10 @@ const fApi = ref<ApiAttrs>()
 const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人的用户任务列表
 const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const bpmnXML: any = ref(null) // BPMN 数据
-const simpleJson = ref<string|undefined>() // Simple 设计器数据 json 格式
-/** 当前的Tab */
-const activeTab = ref('form')
-const emit = defineEmits(['cancel'])
-// 审批节点信息
-const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+const simpleJson = ref<string | undefined>() // Simple 设计器数据 json 格式
+
+const activeTab = ref('form') // 当前的 Tab
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
 
 /** 设置表单信息、获取流程图数据 **/
 const initProcessInfo = async (row: any, formVariables?: any) => {

src/views/bpm/processInstance/create/index.vue

@@ -2,7 +2,7 @@
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
   <template v-if="!selectProcessDefinition">
     <el-input
-      v-model="currentSearchKey"
+      v-model="searchName"
       class="!w-50% mb-15px"
       placeholder="请输入流程名称"
       clearable
@@ -48,6 +48,7 @@
                   v-for="definition in definitions"
                   :key="definition.id"
                   :content="definition.description"
+                  :disabled="!definition.description || definition.description.trim().length === 0"
                   placement="top"
                 >
                   <el-card
@@ -93,20 +94,22 @@ defineOptions({ name: 'BpmProcessInstanceCreate' })
 const { proxy } = getCurrentInstance() as any
 const route = useRoute() // 路由
 const message = useMessage() // 消息
-const currentSearchKey = ref('') // 当前搜索关键字
-const processInstanceId: any = route.query.processInstanceId
+
+const searchName = ref('') // 当前搜索关键字
+const processInstanceId: any = route.query.processInstanceId // 流程实例编号。场景：重新发起时
 const loading = ref(true) // 加载中
 const categoryList: any = ref([]) // 分类的列表
 const categoryActive: any = ref({}) // 选中的分类
 const processDefinitionList = ref([]) // 流程定义的列表
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
     // 所有流程分类数据
     await getCategoryList()
     // 所有流程定义数据
-    await getDefinitionList()
+    await getProcessDefinitionList()
 
     // 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
@@ -129,20 +132,21 @@ const getList = async () => {
   }
 }
 
-// 获取所有流程分类数据
+/** 获取所有流程分类数据 */
 const getCategoryList = async () => {
   try {
     // 流程分类
     categoryList.value = await CategoryApi.getCategorySimpleList()
+    // 选中首个分类
     if (categoryList.value.length > 0) {
       categoryActive.value = categoryList.value[0]
     }
   } finally {
   }
 }
 
-// 获取所有流程定义数据
-const getDefinitionList = async () => {
+/** 获取所有流程定义数据 */
+const getProcessDefinitionList = async () => {
   try {
     // 流程定义
     processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
@@ -157,38 +161,25 @@ const getDefinitionList = async () => {
 /** 搜索流程 */
 const filteredProcessDefinitionList = ref([]) // 用于存储搜索过滤后的流程定义
 const handleQuery = () => {
-  if (currentSearchKey.value.trim()) {
+  if (searchName.value.trim()) {
     // 如果有搜索关键字，进行过滤
     filteredProcessDefinitionList.value = processDefinitionList.value.filter(
-      (definition: any) =>
-        definition.name.toLowerCase().includes(currentSearchKey.value.toLowerCase()) // 假设搜索依据是流程定义的名称
+      (definition: any) => definition.name.toLowerCase().includes(searchName.value.toLowerCase()) // 假设搜索依据是流程定义的名称
     )
   } else {
     // 如果没有搜索关键字，恢复所有数据
     filteredProcessDefinitionList.value = processDefinitionList.value
   }
 }
 
-// 流程定义的分组
+/** 流程定义的分组 */
 const processDefinitionGroup: any = computed(() => {
   if (!processDefinitionList.value?.length) return {}
   return groupBy(filteredProcessDefinitionList.value, 'category')
 })
 
-// ========== 表单相关 ==========
-const selectProcessDefinition = ref() // 选择的流程定义
-const processDefinitionDetailRef = ref()
-
-/** 处理选择流程的按钮操作 **/
-const handleSelect = async (row, formVariables?) => {
-  // 设置选择的流程
-  selectProcessDefinition.value = row
-  // 初始化流程定义详情
-  await nextTick()
-  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
-}
-// 左侧分类切换
-const handleCategoryClick = (category) => {
+/** 左侧分类切换 */
+const handleCategoryClick = (category: any) => {
   categoryActive.value = category
   const categoryRef = proxy.$refs[`category-${category.code}`] // 获取点击分类对应的 DOM 元素
   if (categoryRef?.length) {
@@ -200,9 +191,22 @@ const handleCategoryClick = (category) => {
   }
 }
 
-// 通过分类code获取对应的名称
-const getCategoryName = (categoryCode) => {
-  return categoryList.value?.find((ctg) => ctg.code === categoryCode)?.name
+/** 通过分类 code 获取对应的名称 */
+const getCategoryName = (categoryCode: string) => {
+  return categoryList.value?.find((ctg: any) => ctg.code === categoryCode)?.name
+}
+
+// ========== 表单相关 ==========
+const selectProcessDefinition = ref() // 选择的流程定义
+const processDefinitionDetailRef = ref()
+
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row, formVariables?) => {
+  // 设置选择的流程
+  selectProcessDefinition.value = row
+  // 初始化流程定义详情
+  await nextTick()
+  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
 
 /** 初始化 */

src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue

@@ -283,7 +283,7 @@ const handleSelectUser = (activityId, selectedList) => {
 const emit = defineEmits<{
   selectUserConfirm: [id: any, userList: any[]]
 }>()
-const customApprover: any = ref({})
+const customApprover: any = ref({}) // key：activityId，value：用户列表 TODO 芋艿：变量改下
 // 选择完成
 const handleUserSelectConfirm = (activityId, userList) => {
   customApprover.value[activityId] = userList || []