add 添加流程办理弹窗确认组件

src/components/Process/submitVerify.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-dialog v-model="dialog.visible" v-loading="loading" :title="dialog.title" width="30%" draggable>
+    <span>It's a draggable Dialog</span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="handleCompleteTask"> 提交 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ComponentInternalInstance } from 'vue';
+import { ElForm } from 'element-plus';
+import { completeTask } from '@/api/workflow/task';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const props = defineProps({
+  taskId: {
+    type: String,
+    required: true,
+    default: ''
+  }
+});
+
+// 遮罩层
+const loading = ref(true);
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: '提示'
+});
+
+const openDialog = (visible?: any) => {
+  dialog.visible = visible;
+};
+
+onMounted(() => {});
+const emits = defineEmits(['submitCallback']);
+
+/** 办理流程 */
+const handleCompleteTask = async () => {
+  await proxy?.$modal.confirm('是否确认提交？');
+  let param = {
+    taskId: props.taskId
+  };
+  await completeTask(param).finally(() => (loading.value = false));
+  dialog.visible = false
+  emits('submitCallback');
+  proxy?.$modal.msgSuccess('操作成功');
+};
+/**
+ * 对外暴露子组建方法
+ */
+defineExpose({
+  openDialog
+});
+</script>
+  

src/views/workflow/task/index.vue

@@ -46,13 +46,18 @@
         <el-table-column fixed align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column>
         <el-table-column fixed align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
         <el-table-column fixed align="center" prop="name" label="任务名称"></el-table-column>
-        <el-table-column fixed align="center" prop="assignee" label="办理人">
+        <el-table-column fixed align="center" prop="assigneeName" label="办理人">
           <template #default="scope" v-if="tab === 'waiting'">
-            <template v-if="scope.row.participantVo && scope.row.assignee">
+            <template v-if="scope.row.participantVo && scope.row.assignee === null">
               <el-tag type="success" v-for="(item,index) in scope.row.participantVo.candidateName" :key="index">
                 {{ item }}
               </el-tag>
             </template>
+            <template v-else>
+              <el-tag type="success">
+                {{ scope.row.assigneeName }}
+              </el-tag>
+            </template>
           </template>
           <template #default="scope" v-else-if="tab === 'finish'">
             <el-tag type="success">
@@ -77,7 +82,7 @@
                 :span="1.5"
                 v-if="tab === 'waiting' && scope.row.participantVo && (scope.row.participantVo.claim === null||scope.row.participantVo.claim === true)"
               >
-                <el-button type="text" size="small" icon="el-icon-thumb" @click="handleCompleteTask(scope.row.id)">办理</el-button>
+                <el-button type="text" size="small" icon="el-icon-thumb" @click="submitVerifyOpen(scope.row.id)">办理</el-button>
               </el-col>
               <el-col :span="1.5" v-if="tab === 'waiting' && scope.row.participantVo && scope.row.participantVo.claim === true">
                 <el-button type="text" size="small" icon="el-icon-thumb" @click="handleReturnTask(scope.row.id)">归还</el-button>
@@ -99,13 +104,18 @@
     </el-card>
     <!-- 审批记录 -->
     <approvalRecord ref="approvalRecordRef" />
+    <!-- 提交组件 -->
+    <submitVerify ref="submitVerifyRef" :taskId="taskId" @submitCallback="handleQuery" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { getTaskWaitByPage, getTaskFinishByPage, completeTask, claim, returnTask } from '@/api/workflow/task';
+import { getTaskWaitByPage, getTaskFinishByPage, claim, returnTask } from '@/api/workflow/task';
 import { ComponentInternalInstance } from 'vue';
 import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
 //审批记录组件
 const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -123,6 +133,8 @@ const showSearch = ref(true);
 const total = ref(0);
 // 模型定义表格数据
 const taskList = ref([]);
+// 任务id
+const taskId = ref('');
 // 查询参数
 const queryParams = ref<Record<string, any>>({
   pageNum: 1,
@@ -187,16 +199,12 @@ const getFinishList = () => {
     loading.value = false;
   });
 };
-
+//提交
-/** 办理流程 */
+const submitVerifyOpen = async (id: string) => {
-const handleCompleteTask = async (taskId: string) => {
+  if (submitVerifyRef.value) {
-  await proxy?.$modal.confirm('是否确认办理流程？');
+    taskId.value = id;
-  let param = {
+    submitVerifyRef.value.openDialog(true);
-    taskId: taskId
+  }
-  };
-  await completeTask(param).finally(() => (loading.value = false));
-  getWaitingList();
-  proxy?.$modal.msgSuccess('操作成功');
 };
 
 /** 认领任务 */

src/views/workflow/task/myDocument.vue

@@ -83,7 +83,7 @@
                     :span="1.5"
                     v-if="scope.row.businessStatus === 'draft'||scope.row.businessStatus === 'cancel'||scope.row.businessStatus === 'back'"
                   >
-                    <el-button type="text" size="small" icon="el-icon-thumb" @click="handleCompleteTask(scope.row.taskVoList[0].id)">提交</el-button>
+                    <el-button type="text" size="small" icon="el-icon-thumb" @click="submitVerifyOpen(scope.row.taskVoList[0].id)">提交</el-button>
                   </el-col>
                 </el-row>
               </template>
@@ -101,6 +101,8 @@
     </el-row>
     <!-- 审批记录 -->
     <approvalRecord ref="approvalRecordRef" />
+    <!-- 提交组件 -->
+    <submitVerify ref="submitVerifyRef" :taskId="taskId" @submitCallback="getList"/>
   </div>
 </template>
 
@@ -108,10 +110,12 @@
 import { getCurrentSubmitByPage, deleteRuntimeProcessAndHisInst, cancelProcessApply } from '@/api/workflow/processInstance';
 import { ComponentInternalInstance } from 'vue';
 import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
 import { listCategory } from '@/api/workflow/category';
 import { ElTree } from 'element-plus';
 import { CategoryVO } from '@/api/workflow/category/types';
-import { completeTask } from '@/api/workflow/task';
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
 //审批记录组件
 const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -143,6 +147,8 @@ type CategoryOption = {
 };
 
 const tab = ref('running');
+// 任务id
+const taskId = ref('');
 // 查询参数
 const queryParams = ref<Record<string, any>>({
   pageNum: 1,
@@ -245,15 +251,11 @@ const handleCancelProcessApply = async (row: any) => {
   }
   proxy?.$modal.msgSuccess('撤销成功');
 };
-
+//提交
-/** 办理流程 */
+const submitVerifyOpen = async (id: string) => {
-const handleCompleteTask = async (taskId: string) => {
+  if (submitVerifyRef.value) {
-  await proxy?.$modal.confirm('是否确认提交？');
+    taskId.value = id;
-  let param = {
+    submitVerifyRef.value.openDialog(true);
-    taskId: taskId
+  }
-  };
-  await completeTask(param).finally(() => (loading.value = false));
-  getList();
-  proxy?.$modal.msgSuccess('操作成功');
 };
 </script>