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

066607ab · YunaiV · d052356f · 066607ab · 066607ab · 066607ab
Commit 066607ab authored Nov 08, 2024 by YunaiV
4 changed files
--- a/src/components/UserSelectForm/index.vue
+++ b/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,48 +46,60 @@ 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 = []
@@ -93,8 +107,9 @@ const resetForm = () => {
 }
 /** 处理部门被点击 */
-const handleNodeClick = async (row: { [key: string]: any }) => {
+const handleNodeClick = (row: { [key: string]: any }) => {
  getUserList(row.id)
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/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 格式
+const simpleJson = ref<string | undefined>() // Simple 设计器数据 json 格式
-/** 当前的Tab */
-const activeTab = ref('form')
+const activeTab = ref('form') // 当前的 Tab
-const emit = defineEmits(['cancel'])
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
-// 审批节点信息
-const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
 /** 设置表单信息、获取流程图数据 **/
 const initProcessInfo = async (row: any, formVariables?: any) => {

--- a/src/views/bpm/processInstance/create/index.vue
+++ b/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,12 +94,14 @@ 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
@@ -106,7 +109,7 @@ const getList = async () => {
    // 所有流程分类数据
    await getCategoryList()
    // 所有流程定义数据
-    await getDefinitionList()
+    await getProcessDefinitionList()
    // 如果 processInstanceId 非空，说明是重新发起
    if (processInstanceId?.length > 0) {
@@ -129,11 +132,12 @@ const getList = async () => {
  }
 }
-// 获取所有流程分类数据
+/** 获取所有流程分类数据 */
 const getCategoryList = async () => {
  try {
    // 流程分类
    categoryList.value = await CategoryApi.getCategorySimpleList()
+    // 选中首个分类
    if (categoryList.value.length > 0) {
      categoryActive.value = categoryList.value[0]
    }
@@ -141,8 +145,8 @@ const getCategoryList = async () => {
  }
 }
-// 获取所有流程定义数据
+/** 获取所有流程定义数据 */
-const getDefinitionList = async () => {
+const getProcessDefinitionList = async () => {
  try {
    // 流程定义
    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
@@ -157,11 +161,10 @@ const getDefinitionList = async () => {
 /** 搜索流程 */
 const filteredProcessDefinitionList = ref([]) // 用于存储搜索过滤后的流程定义
 const handleQuery = () => {
-  if (currentSearchKey.value.trim()) {
+  if (searchName.value.trim()) {
    // 如果有搜索关键字，进行过滤
    filteredProcessDefinitionList.value = processDefinitionList.value.filter(
-      (definition: any) =>
+      (definition: any) => definition.name.toLowerCase().includes(searchName.value.toLowerCase()) // 假设搜索依据是流程定义的名称
-        definition.name.toLowerCase().includes(currentSearchKey.value.toLowerCase()) // 假设搜索依据是流程定义的名称
    )
  } else {
    // 如果没有搜索关键字，恢复所有数据
@@ -169,26 +172,14 @@ const handleQuery = () => {
  }
 }
-// 流程定义的分组
+/** 流程定义的分组 */
 const processDefinitionGroup: any = computed(() => {
  if (!processDefinitionList.value?.length) return {}
  return groupBy(filteredProcessDefinitionList.value, 'category')
 })
-// ========== 表单相关 ==========
+/** 左侧分类切换 */
-const selectProcessDefinition = ref() // 选择的流程定义
+const handleCategoryClick = (category: any) => {
-const processDefinitionDetailRef = ref()
-/** 处理选择流程的按钮操作 **/
-const handleSelect = async (row, formVariables?) => {
-  // 设置选择的流程
-  selectProcessDefinition.value = row
-  // 初始化流程定义详情
-  await nextTick()
-  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
-}
-// 左侧分类切换
-const handleCategoryClick = (category) => {
  categoryActive.value = category
  const categoryRef = proxy.$refs[`category-${category.code}`] // 获取点击分类对应的 DOM 元素
  if (categoryRef?.length) {
@@ -200,9 +191,22 @@ const handleCategoryClick = (category) => {
  }
 }
-// 通过分类code获取对应的名称
+/** 通过分类 code 获取对应的名称 */
-const getCategoryName = (categoryCode) => {
+const getCategoryName = (categoryCode: string) => {
-  return categoryList.value?.find((ctg) => ctg.code === categoryCode)?.name
+  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)
 }
 /** 初始化 */

--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/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 || []