【代码评审】工作流：详情界面

6304a8e9 · YunaiV · 3783582b · 6304a8e9 · 6304a8e9
Commit 6304a8e9 authored Nov 19, 2024 by YunaiV
Hide whitespace changes
Inline Side-by-side

Showing with 23 additions and 29 deletions

src/components/UserSelectForm/index.vue
+18 -25

src/views/bpm/processInstance/create/index.vue
+5 -4

No files found.
--- a/src/components/UserSelectForm/index.vue
+++ b/src/components/UserSelectForm/index.vue
@@ -5,7 +5,7 @@
        <ContentWrap class="h-1/1">
          <el-tree
            ref="treeRef"
-            :data="deptList"
+            :data="deptTree"
            :expand-on-click-node="false"
            :props="defaultProps"
            default-expand-all
@@ -39,7 +39,7 @@
  </Dialog>
 </template>
 <script lang="ts" setup>
-import { defaultProps, handleTree } from '@/utils/tree'
+import { defaultProps, findTreeNode, handleTree } from '@/utils/tree'
 import * as DeptApi from '@/api/system/dept'
 import * as UserApi from '@/api/system/user'
@@ -49,27 +49,27 @@ const emit = defineEmits<{
 }>()
 const { t } = useI18n() // 国际
 const message = useMessage() // 消息弹窗
-const deptList = ref<Tree[]>([]) // 部门树形结构化
+const deptTree = ref<Tree[]>([]) // 部门树形结构化
-const allUserList = ref<UserApi.UserVO[]>([]) // 所有用户列表
+const userList = ref<UserApi.UserVO[]>([]) // 所有用户列表
 const filteredUserList = ref<UserApi.UserVO[]>([]) // 当前部门过滤后的用户列表
 const selectedUserIdList: any = ref([]) // 选中的用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
 const activityId = ref()
-// 计算属性：合并已选择的用户和当前部门过滤后的用户
+/** 计算属性：合并已选择的用户和当前部门过滤后的用户 */
 const transferUserList = computed(() => {
-  // 获取所有已选择的用户
+  // 1.1 获取所有已选择的用户
-  const selectedUsers = allUserList.value.filter((user: any) =>
+  const selectedUsers = userList.value.filter((user: any) =>
    selectedUserIdList.value.includes(user.id)
  )
-  // 获取当前部门过滤后的未选择用户
+  // 1.2 获取当前部门过滤后的未选择用户
  const filteredUnselectedUsers = filteredUserList.value.filter(
    (user: any) => !selectedUserIdList.value.includes(user.id)
  )
-  // 合并并去重
+  // 2. 合并并去重
  return [...selectedUsers, ...filteredUnselectedUsers]
 })
@@ -78,23 +78,15 @@ const open = async (id: number, selectedList?: any[]) => {
  activityId.value = id
  resetForm()
-  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+  // 加载部门、用户列表
-  // 初始加载所有用户
+  deptTree.value = handleTree(await DeptApi.getSimpleDeptList())
-  await getAllUserList()
+  userList.value = await UserApi.getSimpleUserList()
  // 初始状态下，过滤列表等于所有用户列表
-  filteredUserList.value = [...allUserList.value]
+  filteredUserList.value = [...userList.value]
  selectedUserIdList.value = selectedList?.map((item: any) => item.id) || []
  dialogVisible.value = true
 }
-/** 获取所有用户列表 */
-const getAllUserList = async () => {
-  try {
-    // @ts-ignore
-    const data = await UserApi.getSimpleUserList()
-    allUserList.value = data
-  } finally {
-  }
-}
 /** 获取部门过滤后的用户列表 */
 const getUserList = async (deptId?: number) => {
@@ -102,6 +94,7 @@ const getUserList = async (deptId?: number) => {
  try {
    // @ts-ignore
    // TODO @芋艿：替换到 simple List 暂不支持 deptId 过滤
+    // TODO @Zqqq：这个，可以使用前端过滤么？通过 deptList 获取到 deptId 子节点，然后去 userList
    const data = await UserApi.getUserPage({ pageSize: 100, pageNo: 1, deptId })
    // 更新过滤后的用户列表
    filteredUserList.value = data.list
@@ -116,7 +109,7 @@ const submitForm = async () => {
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
    // 从所有用户列表中筛选出已选择的用户
-    const emitUserList = allUserList.value.filter((user: any) =>
+    const emitUserList = userList.value.filter((user: any) =>
      selectedUserIdList.value.includes(user.id)
    )
    // 发送操作成功的事件
@@ -127,8 +120,8 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
-  deptList.value = []
+  deptTree.value = []
-  allUserList.value = []
+  userList.value = []
  filteredUserList.value = []
  selectedUserIdList.value = []
 }

--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -174,17 +174,18 @@ const handleQuery = () => {
 /** 流程定义的分组 */
 const processDefinitionGroup: any = computed(() => {
-  if (!processDefinitionList.value?.length) return {}
+  if (!processDefinitionList.value?.length) {
-  const grouped = groupBy(filteredProcessDefinitionList.value, 'category')
+    return {}
+  }
-  const orderedGroup = {}
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category')
  // 按照 categoryList 的顺序重新组织数据
+  const orderedGroup = {}
  categoryList.value.forEach((category: any) => {
    if (grouped[category.code]) {
      orderedGroup[category.code] = grouped[category.code]
    }
  })
  return orderedGroup
 })