feat(bpm): 添加处理待阅功能并优化流程实例详情页

- 新增 handleProcessInstanceCC 接口用于处理待阅操作
- 在流程实例详情页初始化时调用待阅处理接口
- 优化页面按钮图标与文字的布局展示
- 调整打印表单相关逻辑及页面结构
- 统一接口请求参数格式并移除多余空格
- 修复表单变量合并逻辑并优化对象展开语法
- 更新组件引用路径及函数调用方式一致性

src/api/bpm/processInstance/index.ts

@@ -27,16 +27,16 @@ export type ProcessInstanceCCVO = {
   processInstanceName: string,
   processInstanceKey: string,
   startUserId: string,
-  options:string [],
+  options: string [],
   reason: string
 }
 
 export const getMyProcessInstancePage = async (params) => {
-  return await request.get({ url: '/bpm/process-instance/my-page', params })
+  return await request.get({url: '/bpm/process-instance/my-page', params})
 }
 
 export const createProcessInstance = async (data) => {
-  return await request.post({ url: '/bpm/process-instance/create', data: data })
+  return await request.post({url: '/bpm/process-instance/create', data: data})
 }
 
 export const cancelProcessInstance = async (id: number, reason: string) => {
@@ -44,11 +44,11 @@ export const cancelProcessInstance = async (id: number, reason: string) => {
     id: id,
     reason: reason
   }
-  return await request.delete({ url: '/bpm/process-instance/cancel', data: data })
+  return await request.delete({url: '/bpm/process-instance/cancel', data: data})
 }
 
 export const getProcessInstance = async (id: number) => {
-  return await request.get({ url: '/bpm/process-instance/get?id=' + id })
+  return await request.get({url: '/bpm/process-instance/get?id=' + id})
 }
 
 /**
@@ -57,7 +57,7 @@ export const getProcessInstance = async (id: number) => {
  * @returns 是否抄送成功
  */
 export const createProcessInstanceCC = async (data) => {
-  return await request.post({ url: '/bpm/process-instance/cc/create', data: data })
+  return await request.post({url: '/bpm/process-instance/cc/create', data: data})
 }
 
 /**
@@ -66,5 +66,9 @@ export const createProcessInstanceCC = async (data) => {
  * @returns
  */
 export const getProcessInstanceCCPage = async (params) => {
-  return await request.get({ url: '/bpm/process-instance/cc/my-page', params })
+  return await request.get({url: '/bpm/process-instance/cc/my-page', params})
+}
+
+export const handleProcessInstanceCC = async (processInstanceId: string) => {
+  return await request.post({url: '/bpm/process-instance/cc/process-current-user-copy/' + processInstanceId})
 }

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

@@ -34,16 +34,16 @@
         </el-form>
         <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
           <el-button type="success" @click="handleAudit(item, true)">
-            <Icon icon="ep:select" />
+            <Icon icon="ep:select"/>
             通过
           </el-button>
           <el-button type="danger" @click="handleAudit(item, false)">
-            <Icon icon="ep:close" />
+            <Icon icon="ep:close"/>
             不通过
           </el-button>
 
           <el-button type="primary" @click="handleCC(item)">
-            <Icon icon="ep:position" />
+            <Icon icon="ep:position"/>
             抄送
           </el-button>
           <!-- <el-button type="primary" @click="handleDelegate(item)">
@@ -56,7 +56,7 @@
          </el-button> -->
 
           <el-button type="warning" @click="handleBack(item)">
-            <Icon icon="ep:back" />
+            <Icon icon="ep:back"/>
             回退
           </el-button>
         </div>
@@ -64,28 +64,28 @@
     </el-card>
 
     <div id="Printer">
-    <!-- 申请信息 -->
-    <el-card v-loading="processInstanceLoading" class="box-card" 
+      <!-- 申请信息 -->
+      <el-card v-loading="processInstanceLoading" class="box-card"
       >
-      <template #header>
-        <span class="el-icon-document">申请信息【{{ processInstance.name  }}】</span>
-         <el-button type="success" @click="printPage()">
-            <Icon icon="ep:printer" />
+        <template #header>
+          <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
+          <el-button type="success" @click="printPage()">
+            <Icon icon="ep:printer"/>
             打印表单
           </el-button>
-      </template>
-      <!-- 情况一：流程表单 -->
-      <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="24">
-        <FormView form-type="view" show-type="view" v-bind="detailForm"></FormView>
-      </el-col>
-      <!-- 情况二：业务表单 -->
-      <div v-if="processInstance?.processDefinition?.formType === 20">
-        <BusinessFormComponent :id="processInstance.businessKey" />
-      </div>
-    </el-card>
+        </template>
+        <!-- 情况一：流程表单 -->
+        <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="24">
+          <FormView form-type="view" show-type="view" v-bind="detailForm"></FormView>
+        </el-col>
+        <!-- 情况二：业务表单 -->
+        <div v-if="processInstance?.processDefinition?.formType === 20">
+          <BusinessFormComponent :id="processInstance.businessKey"/>
+        </div>
+      </el-card>
 
-    <!-- 审批记录 -->
-    <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
+      <!-- 审批记录 -->
+      <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks"/>
     </div>
     <!-- 高亮流程图 -->
     <ProcessInstanceBpmnViewer
@@ -97,18 +97,18 @@
     />
 
     <!-- 弹窗：转派审批人 -->
-    <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
+    <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail"/>
     <!-- 弹窗，回退节点 -->
-    <TaskReturnDialog ref="taskReturnDialogRef" @success="getDetail" />
+    <TaskReturnDialog ref="taskReturnDialogRef" @success="getDetail"/>
     <!-- 委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
+    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail"/>
     <!-- 加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-    <TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail" />
-    <TaskCCDialogForm ref="taskCCDialogForm" />
+    <TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail"/>
+    <TaskCCDialogForm ref="taskCCDialogForm"/>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { useUserStore } from '@/store/modules/user'
+import {useUserStore} from '@/store/modules/user'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
@@ -118,20 +118,21 @@ import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import TaskReturnDialog from './TaskReturnDialogForm.vue'
 import TaskDelegateForm from './TaskDelegateForm.vue'
 import TaskAddSignDialogForm from './TaskAddSignDialogForm.vue'
-import { registerComponent } from '@/utils/routerHelper'
-import { isEmpty } from '@/utils/is'
+import {registerComponent} from '@/utils/routerHelper'
+import {isEmpty} from '@/utils/is'
 import router from '@/router/index'
-import { $Print } from '@smallwei/avue'
+import {$Print} from '@smallwei/avue'
 import TaskCCDialogForm from '../../processInstance/detail/TaskCCDialogForm.vue'
 
-defineOptions({ name: 'BpmProcessInstanceDetail' })
+defineOptions({name: 'BpmProcessInstanceDetail'})
 
-const { query } = useRoute() // 查询参数
+const {query} = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
-const { proxy } = getCurrentInstance() as any
+const {proxy} = getCurrentInstance() as any
 
 const userId = useUserStore().getUser.id // 当前登录的编号
 const id = query.id as unknown as number // 流程实例的编号
+const read = query.read as unknown as boolean // 是否是待阅的标记
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
 const bpmnXML = ref('') // BPMN XML
@@ -141,7 +142,7 @@ const tasks = ref<any[]>([]) // 任务列表
 const runningTasks = ref<any[]>([]) // 运行中的任务
 const auditForms = ref<any[]>([]) // 审批任务的表单
 const auditRule = reactive({
-  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+  reason: [{required: true, message: '审批建议不能为空', trigger: 'blur'}]
 })
 // ========== 申请信息 ==========
 const detailForm = ref({
@@ -184,12 +185,12 @@ const handleCC = (row) => {
 }
 
 
-
 const printPage = async () => {
 
- const { href } = router.resolve({ name: 'BpmProcessInstanceInfo', 
-                                  query: { id: String(id), isPrint: '1'  }
-                                })
+  const {href} = router.resolve({
+    name: 'BpmProcessInstanceInfo',
+    query: {id: String(id), isPrint: '1'}
+  })
   window.open(href, '_blank', 'noopener,noreferrer')
 }
 
@@ -218,6 +219,15 @@ const handleSign = async (task) => {
   taskAddSignDialogForm.value.open(task.id)
 }
 
+// 处理待阅的操作
+const handleRead = async () => {
+  if (read) {
+    // 向后端发送接口，让后端发起已阅接口
+    const data = await ProcessInstanceApi.handleProcessInstanceCC(id + '')
+    console.log(JSON.stringify(data))
+  }
+}
+
 /** 获得详情 */
 const getDetail = () => {
   // 1. 获得流程实例相关
@@ -244,7 +254,7 @@ const getProcessInstance = async () => {
       detailForm.value.formId = processDefinition.formId
       detailForm.value.optionsData = JSON.parse(processDefinition.formConf)
       if (data.formVariables.jeelowcode_subtable_data) {
-        data.formVariables = { ...data.formVariables, ...data.formVariables.jeelowcode_subtable_data }
+        data.formVariables = {...data.formVariables, ...data.formVariables.jeelowcode_subtable_data}
         delete data.formVariables.jeelowcode_subtable_data
       }
       detailForm.value.defaultData = data.formVariables
@@ -324,7 +334,7 @@ const loadRunningTask = (tasks) => {
       return
     }
     // 2.3 添加到处理任务
-    runningTasks.value.push({ ...task })
+    runningTasks.value.push({...task})
     auditForms.value.push({
       reason: ''
     })
@@ -332,10 +342,11 @@ const loadRunningTask = (tasks) => {
 }
 
 /** 初始化 */
-onMounted(async() => {
+onMounted(async () => {
+  await handleRead()
   await getDetail()
   await nextTick()
- if (query.isPrint === '1') {
+  if (query.isPrint === '1') {
     await new Promise(resolve => setTimeout(resolve, 2000))
     $Print('#Printer')
   }