Merge pull request #102 from GoldenZqqq/feature/bpm

工作流发起与审核页面具体细节优化

Merge pull request #102 from GoldenZqqq/feature/bpm
工作流发起与审核页面具体细节优化
3783582b · 芋道源码 · GitHub · 52a8c46a · 27195414 · 3783582b
Commit 3783582b authored Nov 19, 2024 by 芋道源码 Committed by GitHub Nov 19, 2024
11 changed files
--- a/src/assets/svgs/bpm/add-user.svg
+++ b/src/assets/svgs/bpm/add-user.svg
+<svg t="1731390087280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="200" height="200"><path d="M639.9 541.7c76.4-44.2 127.9-126.8 127.9-221.5C767.7 179 653.2 64.5 512 64.5S256.3 179 256.3 320.2c0 89.6 46.1 168.4 115.8 214.1C193.5 593 64.5 761.2 64.5 959.5h63.9c0-211.5 172.1-383.6 383.6-383.6 44.9 0 87.8 8.1 127.9 22.4v-56.6zM320.2 320.2c0-105.8 86-191.8 191.8-191.8s191.8 86 191.8 191.8S617.7 512 512 512s-191.8-86-191.8-191.8zM831.6 767.7V639.9h-63.9v127.8H639.9v63.9h127.8v127.9h63.9V831.6h127.9v-63.9z" fill="#5f6266" p-id="4298"></path></svg>
\ No newline at end of file
--- a/src/assets/svgs/bpm/audit2.svg
+++ b/src/assets/svgs/bpm/audit2.svg
--- a/src/assets/svgs/bpm/audit4.svg
+++ b/src/assets/svgs/bpm/audit4.svg
--- a/src/assets/svgs/bpm/audit3.svg
+++ b/src/assets/svgs/bpm/audit3.svg
--- a/src/assets/svgs/bpm/audit1.svg
+++ b/src/assets/svgs/bpm/audit1.svg
--- a/src/components/UserSelectForm/index.vue
+++ b/src/components/UserSelectForm/index.vue
 <template>
-  <Dialog v-model="dialogVisible" title="人员选择" width="900">
+  <Dialog v-model="dialogVisible" title="人员选择" width="800">
-    <el-row>
+    <el-row class="gap2" v-loading="formLoading">
      <el-col :span="6">
+        <ContentWrap class="h-1/1">
          <el-tree
            ref="treeRef"
            :data="deptList"
@@ -12,14 +13,15 @@
            node-key="id"
            @node-click="handleNodeClick"
          />
+        </ContentWrap>
      </el-col>
-      <el-col :span="17" :offset="1">
+      <el-col :span="17">
        <el-transfer
          v-model="selectedUserIdList"
          :titles="['未选', '已选']"
          filterable
          filter-placeholder="搜索成员"
-          :data="userList"
+          :data="transferUserList"
          :props="{ label: 'nickname', key: 'id' }"
        />
      </el-col>
@@ -47,62 +49,87 @@ const emit = defineEmits<{
 }>()
 const { t } = useI18n() // 国际
 const message = useMessage() // 消息弹窗
 const deptList = ref<Tree[]>([]) // 部门树形结构化
-const userList: any = ref([]) // 用户列表
+const allUserList = ref<UserApi.UserVO[]>([]) // 所有用户列表
+const filteredUserList = ref<UserApi.UserVO[]>([]) // 当前部门过滤后的用户列表
 const selectedUserIdList: any = ref([]) // 选中的用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
-const activityId = ref() // 关联的主键编号 TODO @goldenzqqq：这个 activityId 有没可能不传递。在使用 @submitForm="xxx()" 时，传递的参数。目的是，更加解耦一些。
+const activityId = ref()
+// 计算属性：合并已选择的用户和当前部门过滤后的用户
+const transferUserList = computed(() => {
+  // 获取所有已选择的用户
+  const selectedUsers = allUserList.value.filter((user: any) =>
+    selectedUserIdList.value.includes(user.id)
+  )
+  // 获取当前部门过滤后的未选择用户
+  const filteredUnselectedUsers = filteredUserList.value.filter(
+    (user: any) => !selectedUserIdList.value.includes(user.id)
+  )
+  // 合并并去重
+  return [...selectedUsers, ...filteredUnselectedUsers]
+})
 /** 打开弹窗 */
 const open = async (id: number, selectedList?: any[]) => {
  activityId.value = id
-  // 重置表单
  resetForm()
-  // 加载相关数据
  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
-  await getUserList()
+  // 初始加载所有用户
-  // 设置选中的用户列表
+  await getAllUserList()
-  selectedUserIdList.value = selectedList?.map((item: any) => item.id)
+  // 初始状态下，过滤列表等于所有用户列表
+  filteredUserList.value = [...allUserList.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) => {
+  formLoading.value = true
  try {
    // @ts-ignore
-    // TODO @芋艿：替换到 simple List
+    // TODO @芋艿：替换到 simple List 暂不支持 deptId 过滤
    const data = await UserApi.getUserPage({ pageSize: 100, pageNo: 1, deptId })
-    userList.value = data.list
+    // 更新过滤后的用户列表
+    filteredUserList.value = data.list
  } finally {
+    formLoading.value = false
  }
 }
 /** 提交选择 */
 const submitForm = async () => {
-  // 提交请求
-  formLoading.value = true
  try {
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
-    const emitUserList = userList.value.filter((user: any) =>
+    // 从所有用户列表中筛选出已选择的用户
+    const emitUserList = allUserList.value.filter((user: any) =>
      selectedUserIdList.value.includes(user.id)
    )
    // 发送操作成功的事件
    emit('confirm', activityId.value, emitUserList)
  } finally {
-    formLoading.value = false
  }
 }
 /** 重置表单 */
 const resetForm = () => {
  deptList.value = []
-  userList.value = []
+  allUserList.value = []
+  filteredUserList.value = []
  selectedUserIdList.value = []
 }
@@ -113,3 +140,20 @@ const handleNodeClick = (row: { [key: string]: any }) => {
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
+<style lang="scss" scoped>
+:deep() {
+  .el-transfer {
+    display: flex;
+  }
+  .el-transfer__buttons {
+    display: flex !important;
+    flex-direction: column-reverse;
+    justify-content: center;
+    gap: 20px;
+    .el-transfer__button:nth-child(2) {
+      margin: 0;
+    }
+  }
+}
+</style>
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -41,7 +41,7 @@
              :ref="`category-${categoryCode}`"
            >
              <h3 class="text-18px font-bold mb-10px mt-5px">
-                {{ getCategoryName(categoryCode) }}
+                {{ getCategoryName(categoryCode as any) }}
              </h3>
              <div class="grid grid-cols-3 gap3">
                <el-tooltip
@@ -175,7 +175,17 @@ const handleQuery = () => {
 /** 流程定义的分组 */
 const processDefinitionGroup: any = computed(() => {
  if (!processDefinitionList.value?.length) return {}
-  return groupBy(filteredProcessDefinitionList.value, 'category')
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category')
+  const orderedGroup = {}
+  // 按照 categoryList 的顺序重新组织数据
+  categoryList.value.forEach((category: any) => {
+    if (grouped[category.code]) {
+      orderedGroup[category.code] = grouped[category.code]
+    }
+  })
+  return orderedGroup
 })
 /** 左侧分类切换 */

--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
 <template>
  <el-card v-loading="loading" class="box-card">
-    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="h-700px" />
+    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" />
  </el-card>
 </template>
 <script lang="ts" setup>
@@ -45,4 +45,9 @@ watch(
  width: 100%;
  margin-bottom: 20px;
 }
+:deep(.process-viewer) {
+  height: 100% !important;
+  min-height: 500px;
+}
 </style>
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -4,6 +4,7 @@
      :flow-node="simpleModel"
      :tasks="tasks"
      :process-instance="processInstance"
+      class="process-viewer"
    />
  </div>
 </template>
@@ -151,3 +152,10 @@ const setSimpleModelNodeTaskStatus = (
  )
 }
 </script>
+<style lang="scss" scoped>
+:deep(.process-viewer) {
+  height: 100% !important;
+  min-height: 500px;
+}
+</style>
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -16,9 +16,10 @@
          <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
          <div
            v-if="showStatusIcon"
-            class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
+            class="position-absolute top-17px left-17px rounded-full flex items-center p-2px"
+            :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
          >
-            <el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
+            <el-icon :size="12" color="#fff">
              <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
            </el-icon>
          </div>
@@ -46,19 +47,22 @@
          "
        >
          <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
+          <el-tooltip content="添加用户" placement="left">
            <el-button
-            class="!px-8px"
+              class="!px-6px"
              @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
            >
-            <Icon icon="fa:user-plus" />
+              <img class="w-18px text-#ccc" src="@/assets/svgs/bpm/add-user.svg" alt="" />
            </el-button>
+          </el-tooltip>
          <div
            v-for="(user, idx1) in customApproveUsers[activity.id]"
            :key="idx1"
-            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
          >
-            <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
+            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
-            <el-avatar :size="28" v-else>
+            <el-avatar class="!m-5px" :size="28" v-else>
              {{ user.nickname.substring(0, 1) }}
            </el-avatar>
            {{ user.nickname }}
@@ -73,40 +77,39 @@
            >
              <!-- 信息：头像昵称 -->
              <div
-                class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+                class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
              >
                <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
                  <el-avatar
+                    class="!m-5px"
                    :size="28"
                    v-if="task.assigneeUser?.avatar"
                    :src="task.assigneeUser?.avatar"
                  />
-                  <el-avatar :size="28" v-else>
+                  <el-avatar class="!m-5px" :size="28" v-else>
                    {{ task.assigneeUser?.nickname.substring(0, 1) }}
                  </el-avatar>
                  {{ task.assigneeUser?.nickname }}
                </template>
                <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
                  <el-avatar
+                    class="!m-5px"
                    :size="28"
                    v-if="task.ownerUser?.avatar"
                    :src="task.ownerUser?.avatar"
                  />
-                  <el-avatar :size="28" v-else>
+                  <el-avatar class="!m-5px" :size="28" v-else>
                    {{ task.ownerUser?.nickname.substring(0, 1) }}
                  </el-avatar>
                  {{ task.ownerUser?.nickname }}
                </template>
                <!-- 信息：任务 ICON -->
                <div
-                  v-if="onlyStatusIconShow.includes(task.status)"
+                  v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
-                  class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
+                  class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
+                  :style="{ backgroundColor: statusIconMap2[task.status]?.color }"
                >
-                  <Icon
+                  <Icon :size="12" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
-                    :size="12"
-                    :icon="statusIconMap2[task.status]?.icon"
-                    :color="statusIconMap2[task.status]?.color"
-                  />
                </div>
              </div>
            </div>
@@ -126,23 +129,21 @@
          <div
            v-for="(user, idx1) in activity.candidateUsers"
            :key="idx1"
-            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
          >
-            <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
+            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
-            <el-avatar :size="28" v-else>
+            <el-avatar class="!m-5px" :size="28" v-else>
              {{ user.nickname.substring(0, 1) }}
            </el-avatar>
            {{ user.nickname }}
            <!-- 信息：任务 ICON -->
            <div
-              class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
+              v-if="showStatusIcon"
+              class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
+              :style="{ backgroundColor: statusIconMap2['-1']?.color }"
            >
-              <Icon
+              <Icon :size="12" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
-                :size="12"
-                :icon="statusIconMap2['-1']?.icon"
-                :color="statusIconMap2['-1']?.color"
-              />
            </div>
          </div>
        </div>
@@ -184,7 +185,7 @@ const statusIconMap2 = {
  // 未开始
  '-1': { color: '#909398', icon: 'ep-clock' },
  // 待审批
-  '0': { color: '#e5e7ec', icon: 'ep:loading' },
+  '0': { color: '#00b32a', icon: 'ep:loading' },
  // 审批中
  '1': { color: '#448ef7', icon: 'ep:loading' },
  // 审批通过
@@ -204,7 +205,7 @@ const statusIconMap2 = {
 const statusIconMap = {
  // 审批未开始
  '-1': { color: '#909398', icon: Clock },
-  '0': { color: '#e5e7ec', icon: Clock },
+  '0': { color: '#00b32a', icon: Clock },
  // 审批中
  '1': { color: '#448ef7', icon: Loading },
  // 审批通过
@@ -223,9 +224,9 @@ const statusIconMap = {
 const nodeTypeSvgMap = {
  // 结束节点
-  [NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: finishSvg },
+  [NodeType.END_EVENT_NODE]: { color: '#909398', svg: finishSvg },
  // 发起人节点
-  [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg },
+  [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
  // 审批人节点
  [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
  // 抄送人节点

--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -5,7 +5,7 @@
        <img
          class="position-absolute right-20px"
          width="150"
-          :src="auditIcons[processInstance.status]"
+          :src="auditIconsMap[processInstance.status]"
          alt=""
        />
        <div class="text-#878c93 h-15px">编号：{{ id }}</div>
@@ -137,11 +137,11 @@ import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
 import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
-// TODO 代码优化，换个明确的 icon 名字
+import { TaskStatusEnum } from '@/api/bpm/task'
-import audit1 from '@/assets/svgs/bpm/audit1.svg'
+import runningSvg from '@/assets/svgs/bpm/running.svg'
-import audit2 from '@/assets/svgs/bpm/audit2.svg'
+import approveSvg from '@/assets/svgs/bpm/approve.svg'
-import audit3 from '@/assets/svgs/bpm/audit3.svg'
+import rejectSvg from '@/assets/svgs/bpm/reject.svg'
-import audit4 from '@/assets/svgs/bpm/audit4.svg'
+import cancelSvg from '@/assets/svgs/bpm/cancel.svg'
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 const props = defineProps<{
@@ -155,11 +155,11 @@ const processInstance = ref<any>({}) // 流程实例
 const processDefinition = ref<any>({}) // 流程定义
 const processModelView = ref<any>({}) // 流程模型视图
 const operationButtonRef = ref() // 操作按钮组件 ref
-const auditIcons = {
+const auditIconsMap = {
-  1: audit1,
+  [TaskStatusEnum.RUNNING]: runningSvg,
-  2: audit2,
+  [TaskStatusEnum.APPROVE]: approveSvg,
-  3: audit3,
+  [TaskStatusEnum.REJECT]: rejectSvg,
-  4: audit4
+  [TaskStatusEnum.CANCEL]: cancelSvg
 }
 // ========== 申请信息 ==========
@@ -242,7 +242,6 @@ const getApprovalDetail = async () => {
 /** 获取流程模型视图*/
 const getProcessModelView = async () => {
  if (BpmModelType.BPMN === processDefinition.value?.modelType) {
    // 重置，解决 BPMN 流程图刷新不会重新渲染问题
    processModelView.value = {
@@ -320,6 +319,15 @@ $process-header-height: 194px;
        $process-header-height - 40px
    );
    overflow: auto;
+    :deep(.box-card) {
+      height: 100%;
+      .el-card__body {
+        height: 100%;
+        padding: 0;
+      }
+    }
  }
 }