Files
geg-gas-web/src/views/secondDev/approveFlowPage.vue
2024-03-04 14:21:38 +08:00

283 lines
11 KiB
Vue

<template>
<div class="page-bg-wrap">
<div class="geg-flow-page">
<div class="top-toolbar">
<a-space :size="10" wrap>
<a-button style="margin-right: 10px" @click="close">
<slot name="icon">
<close-outlined />
</slot>
关闭
</a-button>
<a-button type="primary" @click="onApproveClick">
<slot name="icon">
<check-circle-outlined />
</slot>
同意
</a-button>
<a-button @click="onDenyClick">
<slot name="icon">
<stop-outlined />
</slot>
拒绝
</a-button>
<a-dropdown>
<template #overlay>
<a-menu @click="onMoreClick">
<a-menu-item key="terminate">终止</a-menu-item>
<a-menu-item key="transfer">转办</a-menu-item>
<a-menu-item key="flowchart">查看流程图</a-menu-item>
</a-menu>
</template>
<a-button>
更多
<down-outlined />
</a-button>
</a-dropdown>
</a-space>
</div>
<FormInformation
:key="renderKey"
ref="formInformation"
:disabled="false"
:formAssignmentData="data.formAssignmentData"
:formInfos="data.formInfos"
:opinions="data.opinions"
:opinionsComponents="data.opinionsComponents"
@get-form-configs="(config) => (formConfigs = config)"
/>
<Title :font-size="18" default-value="流转信息"></Title>
<flow-history :items="getTaskRecords()"></flow-history>
<opinion-dialog ref="opinionDlg" />
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { onMounted, reactive, ref, unref } from 'vue';
import FormInformation from '/@/views/secondDev/FormInformation.vue';
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
import { getApprovalProcess, postApproval, postGetNextTaskMaybeArrival } from '/@/api/workflow/task';
import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
import { CheckCircleOutlined, StopOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
import { separator } from '/@bpmn/config/info';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import Title from '/@/components/Title/src/Title.vue';
import FlowHistory from '/@/components/SecondDev/FlowHistory.vue';
const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = userTaskItem();
const tabStore = useMultipleTabStore();
const router = useRouter();
const currentRoute = router.currentRoute.value;
const rQuery = currentRoute.query;
const rParams = currentRoute.params;
const schemaId = ref(rParams.arg1);
const taskId = ref(rQuery.taskId);
const processId = ref(rParams.arg2);
const renderKey = ref('');
const formConfigs = ref();
const opinionDlg = ref();
const validateSuccess = ref(false);
const formInformation = ref();
let approvalData = reactive({
isCountersign: false,
isAddOrSubSign: false,
stampInfo: {
stampId: '',
password: ''
},
buttonConfigs: [],
approvedType: ApproveType.AGREE,
approvedResult: ApproveCode.AGREE,
approvedContent: '',
rejectNodeActivityId: '',
rejectNodeActivityIds: [],
circulateConfigs: []
});
let approvedType = ref(ApproveType.AGREE);
function onMoreClick() {}
function close() {
tabStore.closeTab(currentRoute, router);
}
async function onApproveClick() {
await submit();
const params = await getApproveParams();
const nextNodes = await postGetNextTaskMaybeArrival(params);
approvalData.approvedType = ApproveType.AGREE;
approvalData.approvedResult = ApproveCode.AGREE;
opinionDlg.value.toggleDialog({
action: 'agree',
nextNodes
});
}
async function onDenyClick() {
approvalData.approvedType = ApproveType.REJECT;
approvalData.approvedResult = ApproveCode.REJECT;
opinionDlg.value.toggleDialog({
action: 'reject',
processId: processId.value,
taskId: taskId.value,
callback: (args) => {
approvalData.approvedContent = args.opinion;
approvalData.rejectNodeActivityId = args.rejectNodeId;
onFinish({});
}
});
}
function reset() {
approvalData.isAddOrSubSign = false;
approvalData.stampInfo = {
stampId: '',
password: ''
};
approvalData.buttonConfigs = [];
approvalData.approvedType = ApproveType.AGREE;
approvalData.approvedContent = '';
approvalData.rejectNodeActivityId = '';
approvalData.rejectNodeActivityIds = [];
approvalData.circulateConfigs = [];
}
function getTaskRecords() {
if (data.taskRecords.length) {
return data.taskRecords[0]?.records || [];
}
}
onMounted(async () => {
if (unref(taskId)) {
try {
let res = await getApprovalProcess(unref(taskId), unref(processId));
initProcessData(res);
if (res.buttonConfigs) {
approvalData.buttonConfigs = res.buttonConfigs;
}
if (res.relationTasks) {
data.predecessorTasks = res.relationTasks;
}
if (res.isAddOrSubSign) {
approvalData.isAddOrSubSign = res.isAddOrSubSign;
}
approvalData.approvedType = ApproveType.AGREE;
approvedType.value = ApproveType.AGREE;
approvalData.approvedContent = '';
approvalData.rejectNodeActivityId = '';
approvalData.rejectNodeActivityIds = [];
approvalData.circulateConfigs = [];
renderKey.value = Math.random() + '';
} catch (error) {}
} else {
}
});
async function submit() {
data.submitLoading = true;
validateSuccess.value = false;
try {
let validateForms = await formInformation.value.validateForm();
if (validateForms.length > 0) {
let successValidate = validateForms.filter((ele) => {
return ele.validate;
});
if (successValidate.length == validateForms.length) {
validateSuccess.value = true;
data.submitLoading = false;
} else {
data.submitLoading = false;
notificationError(t('审批流程'), t('表单校验未通过'));
}
}
} catch (error) {
data.submitLoading = false;
notificationError(t('审批流程'), t('审批流程失败'));
}
}
function getUploadFileFolderIds(formModels) {
let fileFolderIds = [];
let uploadComponentIds = formInformation.value.getUploadComponentIds();
uploadComponentIds.forEach((ids) => {
if (ids.includes(separator)) {
let arr = ids.split(separator);
if (arr.length == 2 && formModels[arr[0]][arr[1]]) {
fileFolderIds.push(formModels[arr[0]][arr[1]]);
} else if (arr.length == 3 && formModels[arr[0]][arr[1]] && Array.isArray(formModels[arr[0]][arr[1]])) {
formModels[arr[0]][arr[1]].forEach((o) => {
fileFolderIds.push(o[arr[2]]);
});
}
}
});
return fileFolderIds;
}
async function getApproveParams() {
let formModels = await formInformation.value.getFormModels();
let system = formInformation.value.getSystemType();
let fileFolderIds = getUploadFileFolderIds(formModels);
return {
approvedType: approvalData.approvedType,
approvedResult: approvalData.approvedResult, // approvalData.approvedType 审批结果 如果为 4 就需要传buttonCode
approvedContent: approvalData.approvedContent,
formData: formModels,
rejectNodeActivityId: approvalData.rejectNodeActivityId,
taskId: taskId.value,
fileFolderIds,
circulateConfigs: approvalData.circulateConfigs,
/*stampId: values.stampId,
stampPassword: values.password,*/
isOldSystem: system
};
}
async function onFinish(values) {
try {
if (/*validateSuccess.value*/ true) {
let params = await getApproveParams();
let res = await postApproval(params);
// 下一节点审批人
let taskList = [];
if (res && res.length > 0) {
taskList = res
.filter((ele) => {
return ele.isMultiInstance == false && ele.isAppoint == true;
})
.map((ele) => {
return {
taskId: ele.taskId,
taskName: ele.taskName,
provisionalApprover: ele.provisionalApprover,
selectIds: []
};
});
if (taskList.length > 0) {
approveUserData.list = taskList;
approveUserData.schemaId = props.schemaId;
approveUserData.visible = true;
data.submitLoading = false;
} else {
opinionDlg.value.toggleDialog({ isClose: true });
data.submitLoading = false;
save(true, t('审批流程'));
}
} else {
opinionDlg.value.toggleDialog({ isClose: true });
data.submitLoading = false;
save(true, t('审批流程'));
}
}
} catch (error) {}
}
</script>