geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复新建流程页面，用户取消后无法再次提交的bug

Browse Source
This commit is contained in:
gaoyunqi
2024-05-15 18:11:08 +08:00
parent b5a41d62b1
commit 2e07279924
4 changed files with 294 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/SystemForm/src/Form.vue
View File

@ -169,13 +169,13 @@
async function setFieldsValue(record) {
flowConfig.draftsFormData = record;
}
async function workflowSubmit() {
async function workflowSubmit(saveRowKey) {
let values = {};
try {
values = await SystemFormRef.value.validate();
// 提交表单
if (visible.value) {
let id = await submit();
let id = await submit(saveRowKey);
let rowKey = getRowKey();
values[rowKey] = id;
values['_id'] = id
@ -184,7 +184,7 @@
return values;
} catch (error) {}
}
async function submit() {
async function submit(saveRowKey) {
let saveValId = '';
let values = await SystemFormRef.value.validate();
let rowKey = getRowKey();
@ -198,6 +198,10 @@
} else {
// 新增
saveValId = await SystemFormRef.value.add(values);
if (saveRowKey) {
// 把rowKey写回去，新建流程的时候防止取消了重复提交
props.workflowConfig.formModel[rowKey] = saveValId;
}
}
return saveValId;
}

4
src/views/secondDev/FormInformation.vue
View File

@ -239,13 +239,13 @@
return formModes;
}
async function getFormModels() {
async function getFormModels(saveRowKey) {
let formModes = {};
for (let index = 0; index < forms.configs.length; index++) {
const ele = forms.configs[index];
if (ele.formType == FormType.SYSTEM) {
let values = await itemRefs.value[index].workflowSubmit();
let values = await itemRefs.value[index].workflowSubmit(saveRowKey);
formModes[ele.formKey] = values;
} else {
formModes[ele.formKey] = ele.formModel;

562
src/views/secondDev/createFlow.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="page-bg-wrap">
<a-spin tip="Loading..." :spinning="loading">
<a-spin :spinning="loading" tip="加载中...">
<div class="geg-flow-page">
<div class="top-toolbar">
<a-space :size="10" wrap>
@ -10,7 +10,7 @@
</slot>
关闭
</a-button>
<a-button type="primary" :disabled="data.submitLoading" @click="saveLaunch">
<a-button :disabled="data.submitLoading" type="primary" @click="saveLaunch">
<slot name="icon">
<send-outlined />
</slot>
@ -37,9 +37,7 @@
</a-space>
</div>
<div class="flow-content">
<FormInformation :key="randKey" ref="formInformation" :disabled="false"
:formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos"
:opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
<FormInformation :key="randKey" ref="formInformation" :disabled="false" :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
</div>
</div>
<a-modal :visible="showFlowChart" centered class="geg" closable title="流程图" width="1200px">
@ -54,311 +52,317 @@
</template>
<script setup>
import { useRouter } from 'vue-router';
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
import FormInformation from '/@/views/secondDev/FormInformation.vue';
import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
import { getStartProcessInfo, getReStartProcessInfo, reLaunch, postLaunch, postApproval, postGetNextTaskMaybeArrival } from '/@/api/workflow/task';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
import { nextTick, onMounted, ref, toRaw, reactive } from 'vue';
import { postDraft, putDraft } from '/@/api/workflow/process';
import { useI18n } from '/@/hooks/web/useI18n';
import { separator } from '/@bpmn/config/info';
import { message } from 'ant-design-vue';
import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
import useEventBus from '/@/hooks/event/useEventBus';
import { useRouter } from 'vue-router';
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
import FormInformation from '/@/views/secondDev/FormInformation.vue';
import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
import { getStartProcessInfo, getReStartProcessInfo, reLaunch, postLaunch, postApproval, postGetNextTaskMaybeArrival } from '/@/api/workflow/task';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
import { nextTick, onMounted, ref, toRaw, reactive } from 'vue';
import { postDraft, putDraft } from '/@/api/workflow/process';
import { useI18n } from '/@/hooks/web/useI18n';
import { separator } from '/@bpmn/config/info';
import { message } from 'ant-design-vue';
import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
import useEventBus from '/@/hooks/event/useEventBus';
const { bus, CREATE_FLOW } = useEventBus();
const { bus, CREATE_FLOW } = useEventBus();
const router = useRouter();
const tabStore = useMultipleTabStore();
const router = useRouter();
const tabStore = useMultipleTabStore();
const { t } = useI18n();
const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
const currentRoute = router.currentRoute.value;
const rParams = currentRoute.params;
const fullPath = currentRoute.fullPath;;
const rSchemaId = rParams.arg1;
const rDraftsId = rParams.arg2;
const taskId = ref();
const loading = ref(false)
const draftsJsonStr = localStorage.getItem('draftsJsonStr');
let formInformation = ref();
const opinionDlg = ref();
let pageMode = 'new';
const showFlowChart = ref(false);
const disableSubmit = ref(false);
const mainFormModels = ref();
let randKey = ref('randkey'); // 强制表单重新渲染
let approvalData = reactive({
isCountersign: false,
isAddOrSubSign: false,
stampInfo: {
stampId: '',
password: ''
},
buttonConfigs: [],
approvedType: ApproveType.AGREE,
approvedResult: ApproveCode.AGREE,
approvedContent: '',
rejectNodeActivityId: '',
rejectNodeActivityIds: [],
circulateConfigs: [],
nextTaskUser: {} // 格式为taskKey: 用户id（逗号分隔）
});
const { t } = useI18n();
const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
const currentRoute = router.currentRoute.value;
const rParams = currentRoute.params;
const fullPath = currentRoute.fullPath;
const rSchemaId = rParams.arg1;
const rDraftsId = rParams.arg2;
const taskId = ref();
const loading = ref(false);
const draftsJsonStr = localStorage.getItem('draftsJsonStr');
let formInformation = ref();
const opinionDlg = ref();
let pageMode = 'new';
const showFlowChart = ref(false);
const disableSubmit = ref(false);
const mainFormModels = ref();
let randKey = ref('randkey'); // 强制表单重新渲染
let approvalData = reactive({
isCountersign: false,
isAddOrSubSign: false,
stampInfo: {
stampId: '',
password: ''
},
buttonConfigs: [],
approvedType: ApproveType.AGREE,
approvedResult: ApproveCode.AGREE,
approvedContent: '',
rejectNodeActivityId: '',
rejectNodeActivityIds: [],
circulateConfigs: [],
nextTaskUser: {} // 格式为taskKey: 用户id（逗号分隔）
});
if (draftsJsonStr) {
localStorage.removeItem('draftsJsonStr');
pageMode = 'draft';
}
function closeFlowChart() {
showFlowChart.value = false;
}
function openFlowChart() {
showFlowChart.value = true;
}
function close() {
tabStore.closeTab(currentRoute, router);
}
const props = defineProps({
rowKeyData: {
type: String
}
});
onMounted(async () => {
try {
// 发起流程
let res = await getStartProcessInfo(rSchemaId);
const title = res?.schemaInfo?.name;
if (title) {
const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
tabStore.changeTitle(fullPath, `${tabPrefix}：${title}`);
}
initProcessData(res);
} catch (error) { }
randKey.value = Math.random() + '';
// 这里的顺序不能变 表单不渲染的时候 设置表单初值没用
await nextTick();
await initDraftsFormData();
});
async function initDraftsFormData() {
//isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
if (draftsJsonStr) {
let formDataJson = JSON.parse(draftsJsonStr);
let formData = [];
localStorage.removeItem('draftsJsonStr');
pageMode = 'draft';
}
data.formInfos.forEach((item) => {
if (formDataJson && item.formConfig && item.formConfig.key && formDataJson[item.formConfig.key]) {
formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
function closeFlowChart() {
showFlowChart.value = false;
}
function openFlowChart() {
showFlowChart.value = true;
}
function close() {
tabStore.closeTab(currentRoute, router);
}
const props = defineProps({
rowKeyData: {
type: String
}
});
onMounted(async () => {
try {
// 发起流程
let res = await getStartProcessInfo(rSchemaId);
const title = res?.schemaInfo?.name;
if (title) {
const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
tabStore.changeTitle(fullPath, `${tabPrefix}：${title}`);
}
initProcessData(res);
} catch (error) {}
randKey.value = Math.random() + '';
// 这里的顺序不能变 表单不渲染的时候 设置表单初值没用
await nextTick();
await initDraftsFormData();
});
async function initDraftsFormData() {
//isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
if (draftsJsonStr) {
let formDataJson = JSON.parse(draftsJsonStr);
let formData = [];
data.formInfos.forEach((item) => {
if (formDataJson && item.formConfig && item.formConfig.key && formDataJson[item.formConfig.key]) {
formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
}
});
await formInformation.value.setFormData(formData);
}
}
async function saveDraft() {
try {
disableSubmit.value = true;
let formModels = await formInformation.value.saveDraftData();
if (rDraftsId !== '0') {
let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
showResult(res, '保存草稿');
} else {
let res = await postDraft(rSchemaId, formModels, props.rowKeyData);
showResult(res, '保存草稿');
}
} catch (error) {
notificationError('保存草稿');
}
}
function showResult(res, title) {
if (res) {
notificationSuccess(title);
} else {
notificationError(title);
}
}
function createFlowSuccess(taskList) {
/*opinionDlg.value.toggleDialog({
isClose: true
});*/
if (taskList) {
approvalCreate();
} else {
message.success('流程发起成功');
data.submitLoading = false;
loading.value = false;
setTimeout(() => {
bus.emit(CREATE_FLOW, {});
close();
}, 500);
}
}
async function approvalCreate() {
const params = await getApproveParams();
const nextNodes = await postGetNextTaskMaybeArrival(params);
opinionDlg.value.toggleDialog({
action: 'agree',
nextNodes,
rejectCancel: () => {
loading.value = false;
data.submitLoading = false;
},
callback: (args) => {
approvalData.approvedContent = args.opinion;
approvalData.nextTaskUser = args.nextTaskUser;
onFinish({});
}
});
await formInformation.value.setFormData(formData);
}
}
async function saveDraft() {
try {
disableSubmit.value = true;
let formModels = await formInformation.value.saveDraftData();
if (rDraftsId !== '0') {
let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
showResult(res, '保存草稿');
} else {
let res = await postDraft(rSchemaId, formModels, props.rowKeyData);
showResult(res, '保存草稿');
}
} catch (error) {
notificationError('保存草稿');
}
}
function showResult(res, title) {
if (res) {
notificationSuccess(title);
} else {
notificationError(title);
}
}
function createFlowSuccess(taskList) {
/*opinionDlg.value.toggleDialog({
isClose: true
});*/
if (taskList) {
approvalCreate();
} else {
message.success('流程发起成功');
data.submitLoading = false;
loading.value = false
function flowSuccess() {
opinionDlg.value.toggleDialog({
isClose: true
});
message.success('操作成功');
setTimeout(() => {
bus.emit(CREATE_FLOW, {});
close();
}, 500);
}
}
async function approvalCreate() {
const params = await getApproveParams();
let fileFolderIds = getUploadFileFolderIds(mainFormModels.value);
let system = formInformation.value.getSystemType();
const nextNodes = await postGetNextTaskMaybeArrival(params);
opinionDlg.value.toggleDialog({
action: 'agree',
nextNodes,
rejectCancel: () => {
loading.value = false;
},
callback: (args) => {
approvalData.approvedContent = args.opinion;
approvalData.nextTaskUser = args.nextTaskUser;
onFinish({});
}
});
}
function flowSuccess() {
opinionDlg.value.toggleDialog({
isClose: true
});
message.success('操作成功');
setTimeout(() => {
bus.emit(CREATE_FLOW, {});
close();
}, 500);
}
function flowFail() {
opinionDlg.value.stopLoading();
}
async function onFinish(values) {
try {
if (/*validateSuccess.value*/ true) {
let params = await getApproveParams();
await postApproval(params);
flowSuccess();
data.submitLoading = false;
loading.value = false
}
} catch (error) {
flowFail();
function flowFail() {
opinionDlg.value.stopLoading();
}
}
async function getApproveParams() {
let formModels = mainFormModels.value;
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,
nextTaskUser: approvalData.nextTaskUser
};
}
async function saveLaunch() {
data.submitLoading = true;
loading.value = true
try {
let validateForms = await formInformation.value.validateForm();
async function onFinish(values) {
try {
if (/*validateSuccess.value*/ true) {
let params = await getApproveParams();
await postApproval(params);
flowSuccess();
data.submitLoading = false;
loading.value = false;
}
} catch (error) {
flowFail();
}
}
async function getApproveParams() {
let formModels = mainFormModels.value;
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,
nextTaskUser: approvalData.nextTaskUser
};
}
if (validateForms.length > 0) {
let successValidate = validateForms.filter((ele) => {
return ele.validate;
});
if (successValidate.length == validateForms.length) {
mainFormModels.value = await formInformation.value.getFormModels();
for (let i in mainFormModels.value) {
const item = mainFormModels.value[i]
if (!item['_id']) {
throw new Error('发起失败');
} else {
delete item['_id']
async function saveLaunch() {
data.submitLoading = true;
loading.value = true;
try {
let validateForms = await formInformation.value.validateForm();
let system = formInformation.value.getSystemType();
if (validateForms.length > 0) {
let successValidate = validateForms.filter((ele) => {
return ele.validate;
});
if (successValidate.length == validateForms.length) {
mainFormModels.value = await formInformation.value.getFormModels(true);
for (let i in mainFormModels.value) {
const item = mainFormModels.value[i];
if (!item['_id']) {
throw new Error('发起失败');
} else {
delete item['_id'];
}
}
}
let relationTasks = [];
if (data.predecessorTasks && data.predecessorTasks.length > 0) {
relationTasks = data.predecessorTasks.map((ele) => {
return { taskId: ele.taskId, schemaId: ele.schemaId };
});
}
let fileFolderIds = getUploadFileFolderIds(mainFormModels.value);
//如果传入了processId 代表是重新发起流程
let res;
res = await postLaunch(rSchemaId, mainFormModels.value, relationTasks, fileFolderIds, system);
// 下一节点审批人
let taskList = [];
if (res && res.length > 0) {
taskId.value = res[0].taskId
taskList = res
.filter((ele) => {
return ele.isMultiInstance == false && ele.isAppoint == true;
})
.map((ele) => {
return {
taskId: ele.taskId,
taskName: ele.taskName,
provisionalApprover: ele.provisionalApprover,
selectIds: []
};
let relationTasks = [];
if (data.predecessorTasks && data.predecessorTasks.length > 0) {
relationTasks = data.predecessorTasks.map((ele) => {
return { taskId: ele.taskId, schemaId: ele.schemaId };
});
if (taskList.length > 0) {
notificationError('提交失败', '流程设计错误，开始后的第一个节点必须是审批人为发起人的起草节点。');
data.submitLoading = false;
loading.value = false
}
let fileFolderIds = getUploadFileFolderIds(mainFormModels.value);
if (taskId.value) {
// 如果在草稿节点取消，重新从草稿开始走
return createFlowSuccess(true);
}
//如果传入了processId 代表是重新发起流程
let res;
res = await postLaunch(rSchemaId, mainFormModels.value, relationTasks, fileFolderIds, system);
// 下一节点审批人
let taskList = [];
if (res && res.length > 0) {
taskId.value = res[0].taskId;
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) {
notificationError('提交失败', '流程设计错误，开始后的第一个节点必须是审批人为发起人的起草节点。');
data.submitLoading = false;
loading.value = false;
} else {
createFlowSuccess(taskList);
}
} else {
createFlowSuccess(taskList);
createFlowSuccess();
}
} else {
createFlowSuccess();
data.submitLoading = false;
notificationError(t('发起流程'), t('表单校验未通过'));
loading.value = false;
}
} else {
data.submitLoading = false;
notificationError(t('发起流程'), t('表单校验未通过'));
loading.value = false
}
} catch (error) {
data.submitLoading = false;
loading.value = false;
notificationError(t('发起流程'), t('发起流程失败'));
}
} catch (error) {
data.submitLoading = false;
loading.value = 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]]);
});
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;
}
});
return fileFolderIds;
}
</script>
<style lang="less"></style>

4
src/views/workflow/task/components/flow/FormInformation.vue
View File

@ -300,13 +300,13 @@
}
return formModes;
}
async function getFormModels() {
async function getFormModels(saveRowKey) {
let formModes = {};
for (let index = 0; index < forms.configs.length; index++) {
const ele = forms.configs[index];
if (ele.formType == FormType.SYSTEM) {
let values = await itemRefs.value[index].workflowSubmit();
let values = await itemRefs.value[index].workflowSubmit(saveRowKey);
formModes[ele.formKey] = values;
} else {
formModes[ele.formKey] = ele.formModel;