| | |
| | | <div class="mb-[10px]"> |
| | | <el-card shadow="hover" class="text-center"> |
| | | <el-radio-group v-model="tab" @change="changeTab(tab)"> |
| | | <el-radio-button label="running">运行中</el-radio-button> |
| | | <el-radio-button label="finish">已完成</el-radio-button> |
| | | <el-radio-button value="running">运行中</el-radio-button> |
| | | <el-radio-button value="finish">已完成</el-radio-button> |
| | | </el-radio-group> |
| | | </el-card> |
| | | </div> |
| | |
| | | <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
| | | <el-table-column align="center" prop="processDefinitionName" label="流程定义名称"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" align="center" label="流程定义名称"> |
| | | <template #default="scope"> |
| | | <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column> |
| | | <el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90"> |
| | | <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template> |
| | |
| | | <el-tag v-else type="danger">挂起</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" prop="businessStatusName" label="流程状态" min-width="70"> |
| | | <el-table-column align="center" label="流程状态" min-width="70"> |
| | | <template #default="scope"> |
| | | <el-tag type="success">{{ scope.row.businessStatusName }}</el-tag> |
| | | <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column> |
| | | <el-table-column v-if="tab === 'finish'" align="center" prop="endTime" label="结束时间" width="160"></el-table-column> |
| | | <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width"> |
| | | <el-table-column label="操作" align="center" :width="130"> |
| | | <template #default="scope"> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button link type="primary" size="small" icon="Document" @click="handleApprovalRecord(scope.row)">审批记录</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row v-if="tab === 'running'" :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | size="small" |
| | | icon="Sort" |
| | | @click="getProcessDefinitionHitoryList(scope.row.processDefinitionId, scope.row.processDefinitionKey)" |
| | | >切换版本</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-popover :ref="`popoverRef${scope.$index}`" trigger="click" placement="left" :width="300"> |
| | | <el-input v-model="deleteReason" resize="none" :rows="3" type="textarea" placeholder="请输入作废原因" /> |
| | |
| | | <el-button link type="primary" size="small" icon="CircleClose">作废</el-button> |
| | | </template> |
| | | </el-popover> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | </template> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-dialog> |
| | | <!-- 审批记录 --> |
| | | <approvalRecord ref="approvalRecordRef" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | deleteRunInstance |
| | | } from '@/api/workflow/processInstance'; |
| | | import { getListByKey, migrationDefinition } from '@/api/workflow/processDefinition'; |
| | | import ApprovalRecord from '@/components/Process/approvalRecord.vue'; |
| | | import { listCategory } from '@/api/workflow/category'; |
| | | import { CategoryVO } from '@/api/workflow/category/types'; |
| | | import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types'; |
| | | import workflowCommon from '@/api/workflow/workflowCommon'; |
| | | import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
| | | //审批记录组件 |
| | | const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>(); |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
| | | const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status')); |
| | | const queryFormRef = ref<ElFormInstance>(); |
| | | const categoryTreeRef = ref<ElTreeInstance>(); |
| | | |
| | |
| | | const loading = ref(true); |
| | | // 选中数组 |
| | | const ids = ref<Array<any>>([]); |
| | | // 选中业务id数组 |
| | | const businessKeys = ref<Array<any>>([]); |
| | | // 非单个禁用 |
| | | const single = ref(true); |
| | | // 非多个禁用 |
| | |
| | | categoryCode: undefined |
| | | }); |
| | | |
| | | onMounted(() => { |
| | | getProcessInstanceRunningList(); |
| | | getTreeselect(); |
| | | }); |
| | | |
| | | /** 节点单击事件 */ |
| | | const handleNodeClick = (data: CategoryVO) => { |
| | | queryParams.value.categoryCode = data.categoryCode; |
| | |
| | | categoryOptions.value.push(data); |
| | | }; |
| | | |
| | | //审批记录 |
| | | const handleApprovalRecord = (row: any) => { |
| | | if (approvalRecordRef.value) { |
| | | approvalRecordRef.value.init(row.id); |
| | | } |
| | | }; |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | if ('running' === tab.value) { |
| | |
| | | // 多选框选中数据 |
| | | const handleSelectionChange = (selection: ProcessInstanceVO[]) => { |
| | | ids.value = selection.map((item: any) => item.id); |
| | | businessKeys.value = selection.map((item: any) => item.businessKey); |
| | | single.value = selection.length !== 1; |
| | | multiple.value = !selection.length; |
| | | }; |
| | |
| | | |
| | | /** 删除按钮操作 */ |
| | | const handleDelete = async (row: any) => { |
| | | const id = row.id || ids.value; |
| | | await proxy?.$modal.confirm('是否确认删除id为【' + id + '】的数据项?'); |
| | | const businessKey = row.businessKey || businessKeys.value; |
| | | await proxy?.$modal.confirm('是否确认删除业务id为【' + businessKey + '】的数据项?'); |
| | | loading.value = true; |
| | | if ('running' === tab.value) { |
| | | await deleteRunAndHisInstance(id).finally(() => (loading.value = false)); |
| | | await deleteRunAndHisInstance(businessKey).finally(() => (loading.value = false)); |
| | | getProcessInstanceRunningList(); |
| | | } else { |
| | | await deleteFinishAndHisInstance(id).finally(() => (loading.value = false)); |
| | | await deleteFinishAndHisInstance(businessKey).finally(() => (loading.value = false)); |
| | | getProcessInstanceFinishList(); |
| | | } |
| | | proxy?.$modal.msgSuccess('删除成功'); |
| | | }; |
| | | const changeTab = async (data: string) => { |
| | | processInstanceList.value = []; |
| | | queryParams.value.pageNum = 1; |
| | | if ('running' === data) { |
| | | getProcessInstanceRunningList(); |
| | |
| | | loading.value = true; |
| | | if ('running' === tab.value) { |
| | | let param = { |
| | | processInstanceId: row.id, |
| | | businessKey: row.businessKey, |
| | | deleteReason: deleteReason.value |
| | | }; |
| | | await deleteRunInstance(param).finally(() => (loading.value = false)); |
| | |
| | | loading.value = false; |
| | | }); |
| | | }; |
| | | /** 查看按钮操作 */ |
| | | const handleView = (row) => { |
| | | const routerJumpVo = reactive<RouterJumpVo>({ |
| | | wfDefinitionConfigVo: row.wfDefinitionConfigVo, |
| | | wfNodeConfigVo: row.wfNodeConfigVo, |
| | | businessKey: row.businessKey, |
| | | taskId: row.id, |
| | | type: 'view' |
| | | }); |
| | | workflowCommon.routerJump(routerJumpVo, proxy); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getProcessInstanceRunningList(); |
| | | getTreeselect(); |
| | | }); |
| | | </script> |