| | |
| | | class="mt-2" |
| | | node-key="id" |
| | | :data="categoryOptions" |
| | | :props="{ label: 'categoryName', children: 'children' }" |
| | | :props="{ label: 'label', children: 'children' }" |
| | | :expand-on-click-node="false" |
| | | :filter-node-method="filterNode" |
| | | highlight-current |
| | |
| | | <div v-show="showSearch" class="mb-[10px]"> |
| | | <el-card shadow="hover"> |
| | | <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px"> |
| | | <el-form-item label="流程定义名称" prop="name"> |
| | | <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" /> |
| | | <el-form-item label="流程定义编码" prop="flowCode"> |
| | | <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
| | |
| | | <el-card shadow="hover"> |
| | | <template #header> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar> |
| | | <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar> |
| | | </el-row> |
| | | </template> |
| | | |
| | | <el-table v-loading="loading" :data="processInstanceList" @selection-change="handleSelectionChange"> |
| | | <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column fixed align="center" type="index" label="序号" width="50"></el-table-column> |
| | | <el-table-column v-if="false" fixed align="center" prop="id" label="id"></el-table-column> |
| | | <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 align="center" prop="processDefinitionVersion" label="版本号" width="90"> |
| | | <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template> |
| | | <el-table-column align="center" type="index" label="序号" width="60"></el-table-column> |
| | | <el-table-column v-if="false" align="center" prop="id" label="id"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"> </el-table-column> |
| | | <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column> |
| | | <el-table-column align="center" prop="version" label="版本号" width="90"> |
| | | <template #default="scope"> v{{ scope.row.version }}.0</template> |
| | | </el-table-column> |
| | | <el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70"> |
| | | <template #default="scope"> |
| | |
| | | <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.flowStatus"></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 align="center" prop="createTime" label="启动时间" width="160"></el-table-column> |
| | | <el-table-column label="操作" align="center" width="162"> |
| | | <template #default="scope"> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5" v-if="scope.row.flowStatus === 'draft' || scope.row.flowStatus === 'cancel' || scope.row.flowStatus === 'back'"> |
| | | <el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row, 'update')">编辑</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5" v-if="scope.row.flowStatus === 'draft' || scope.row.flowStatus === 'cancel' || scope.row.flowStatus === 'back'"> |
| | | <el-button 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="Document" @click="handleApprovalRecord(scope.row.id)">审批记录</el-button> |
| | | <el-button type="primary" size="small" icon="View" @click="handleOpen(scope.row, 'view')">查看</el-button> |
| | | </el-col> |
| | | <el-col |
| | | v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'" |
| | | :span="1.5" |
| | | > |
| | | <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> |
| | | </el-col> |
| | | <el-col v-if="scope.row.businessStatus === 'waiting'" :span="1.5"> |
| | | <el-button link type="primary" size="small" icon="Notification" @click="handleCancelProcessApply(scope.row.id)">撤销</el-button> |
| | | </el-col> |
| | | <el-col |
| | | v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'" |
| | | :span="1.5" |
| | | > |
| | | <el-button link type="primary" size="small" icon="Edit" @click="submitVerifyOpen(scope.row.taskVoList[0].id)">提交</el-button> |
| | | <el-col :span="1.5" v-if="scope.row.flowStatus === 'waiting'"> |
| | | <el-button type="primary" size="small" icon="Notification" @click="handleCancelProcessApply(scope.row.businessId)" |
| | | >撤销</el-button |
| | | > |
| | | </el-col> |
| | | </el-row> |
| | | </template> |
| | |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | <!-- 审批记录 --> |
| | | <approvalRecord ref="approvalRecordRef" /> |
| | | <!-- 提交组件 --> |
| | | <submitVerify ref="submitVerifyRef" @submit-callback="getList" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { getCurrentSubmitByPage, deleteRuntimeProcessAndHisInst, cancelProcessApply } from '@/api/workflow/processInstance'; |
| | | import ApprovalRecord from '@/components/Process/approvalRecord.vue'; |
| | | import SubmitVerify from '@/components/Process/submitVerify.vue'; |
| | | import { listCategory } from '@/api/workflow/category'; |
| | | import { CategoryVO } from '@/api/workflow/category/types'; |
| | | import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types'; |
| | | //提交组件 |
| | | const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>(); |
| | | //审批记录组件 |
| | | const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>(); |
| | | import { pageByCurrent, deleteByInstanceIds, cancelProcessApply } from '@/api/workflow/instance'; |
| | | import { categoryTree } from '@/api/workflow/category'; |
| | | import { CategoryTreeVO } from '@/api/workflow/category/types'; |
| | | import { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types'; |
| | | import workflowCommon from '@/api/workflow/workflowCommon'; |
| | | import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; |
| | | 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>>([]); |
| | | const businessIds = ref<Array<number | string>>([]); |
| | | const instanceIds = ref<Array<number | string>>([]); |
| | | // 非单个禁用 |
| | | const single = ref(true); |
| | | // 非多个禁用 |
| | |
| | | // 总条数 |
| | | const total = ref(0); |
| | | // 模型定义表格数据 |
| | | const processInstanceList = ref<ProcessInstanceVO[]>([]); |
| | | const processInstanceList = ref<FlowInstanceVO[]>([]); |
| | | |
| | | const categoryOptions = ref<CategoryOption[]>([]); |
| | | const categoryOptions = ref<CategoryTreeVO[]>([]); |
| | | const categoryName = ref(''); |
| | | |
| | | interface CategoryOption { |
| | | categoryCode: string; |
| | | categoryName: string; |
| | | children?: CategoryOption[]; |
| | | } |
| | | |
| | | const tab = ref('running'); |
| | | // 查询参数 |
| | | const queryParams = ref<ProcessInstanceQuery>({ |
| | | const queryParams = ref<FlowInstanceQuery>({ |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | name: undefined, |
| | | categoryCode: undefined |
| | | flowCode: undefined, |
| | | category: undefined |
| | | }); |
| | | |
| | | onMounted(() => { |
| | |
| | | }); |
| | | |
| | | /** 节点单击事件 */ |
| | | const handleNodeClick = (data: CategoryVO) => { |
| | | queryParams.value.categoryCode = data.categoryCode; |
| | | if (data.categoryCode === 'ALL') { |
| | | queryParams.value.categoryCode = ''; |
| | | const handleNodeClick = (data: CategoryTreeVO) => { |
| | | queryParams.value.category = data.id; |
| | | if (data.id === '0') { |
| | | queryParams.value.category = ''; |
| | | } |
| | | handleQuery(); |
| | | }; |
| | |
| | | |
| | | /** 查询流程分类下拉树结构 */ |
| | | const getTreeselect = async () => { |
| | | const res = await listCategory(); |
| | | categoryOptions.value = []; |
| | | const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] }; |
| | | data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId'); |
| | | categoryOptions.value.push(data); |
| | | const res = await categoryTree(); |
| | | categoryOptions.value = res.data; |
| | | }; |
| | | |
| | | //审批记录 |
| | | const handleApprovalRecord = (processInstanceId: string) => { |
| | | if (approvalRecordRef.value) { |
| | | approvalRecordRef.value.init(processInstanceId); |
| | | } |
| | | }; |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | getList(); |
| | |
| | | /** 重置按钮操作 */ |
| | | const resetQuery = () => { |
| | | queryFormRef.value?.resetFields(); |
| | | queryParams.value.categoryCode = ''; |
| | | queryParams.value.category = ''; |
| | | queryParams.value.pageNum = 1; |
| | | queryParams.value.pageSize = 10; |
| | | handleQuery(); |
| | | }; |
| | | // 多选框选中数据 |
| | | const handleSelectionChange = (selection: ProcessInstanceVO[]) => { |
| | | ids.value = selection.map((item: any) => item.id); |
| | | const handleSelectionChange = (selection: FlowInstanceVO[]) => { |
| | | businessIds.value = selection.map((item: any) => item.businessId); |
| | | instanceIds.value = selection.map((item: FlowInstanceVO) => item.id); |
| | | single.value = selection.length !== 1; |
| | | multiple.value = !selection.length; |
| | | }; |
| | | //分页 |
| | | const getList = () => { |
| | | loading.value = true; |
| | | getCurrentSubmitByPage(queryParams.value).then((resp) => { |
| | | pageByCurrent(queryParams.value).then((resp) => { |
| | | processInstanceList.value = resp.rows; |
| | | total.value = resp.total; |
| | | loading.value = false; |
| | |
| | | }; |
| | | |
| | | /** 删除按钮操作 */ |
| | | const handleDelete = async (row: ProcessInstanceVO) => { |
| | | const id = row.id || ids.value; |
| | | await proxy?.$modal.confirm('是否确认删除id为【' + id + '】的数据项?'); |
| | | const handleDelete = async (row: FlowInstanceVO) => { |
| | | const instanceIdList = row.id || instanceIds.value; |
| | | await proxy?.$modal.confirm('是否确认删除?'); |
| | | loading.value = true; |
| | | if ('running' === tab.value) { |
| | | await deleteRuntimeProcessAndHisInst(id).finally(() => (loading.value = false)); |
| | | await deleteByInstanceIds(instanceIdList).finally(() => (loading.value = false)); |
| | | getList(); |
| | | } |
| | | proxy?.$modal.msgSuccess('删除成功'); |
| | | }; |
| | | |
| | | /** 撤销按钮操作 */ |
| | | const handleCancelProcessApply = async (processInstanceId: string) => { |
| | | const handleCancelProcessApply = async (businessId: string) => { |
| | | await proxy?.$modal.confirm('是否确认撤销当前单据?'); |
| | | loading.value = true; |
| | | if ('running' === tab.value) { |
| | | await cancelProcessApply(processInstanceId).finally(() => (loading.value = false)); |
| | | let data = { |
| | | businessId: businessId, |
| | | message: '申请人撤销流程!' |
| | | }; |
| | | await cancelProcessApply(data).finally(() => (loading.value = false)); |
| | | getList(); |
| | | } |
| | | proxy?.$modal.msgSuccess('撤销成功'); |
| | | }; |
| | | //提交 |
| | | const submitVerifyOpen = async (id: string) => { |
| | | if (submitVerifyRef.value) { |
| | | submitVerifyRef.value.openDialog(id); |
| | | } |
| | | |
| | | //办理 |
| | | const handleOpen = async (row, type) => { |
| | | const routerJumpVo = reactive<RouterJumpVo>({ |
| | | businessId: row.businessId, |
| | | taskId: row.id, |
| | | type: type, |
| | | formCustom: row.formCustom, |
| | | formPath: row.formPath |
| | | }); |
| | | workflowCommon.routerJump(routerJumpVo, proxy); |
| | | }; |
| | | </script> |