geg-gas-web/src/views/secondDev/createFlow.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" :disabled="data.submitLoading" @click="saveLaunch">
                        <slot name="icon">
                            <send-outlined />
                        </slot>
                        提交
                    </a-button>
                    <a-button :disabled="data.submitLoading" @click="saveDraft">
                        <slot name="icon">
                            <clock-circle-outlined />
                        </slot>
                        暂存
                    </a-button>
                    <a-button>
                        <slot name="icon">
                            <printer-outlined />
                        </slot>
                        打印
                    </a-button>
                    <a-button @click="openFlowChart">
                        <slot name="icon">
                            <apartment-outlined />
                        </slot>
                        流程图
                    </a-button>
                </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" />
            </div>
        </div>
        <a-modal :visible="showFlowChart" centered class="geg" closable title="流程图" width="1200px">
            <process-information :process-id="processId" :xml="data.xml" />
            <template #footer>
                <a-button type="primary" @click="closeFlowChart">关闭</a-button>
            </template>
        </a-modal>
        <opinion-dialog ref="opinionDlg" />
    </div>
</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';

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 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 = [];

        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;
        setTimeout(() => {
            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,
        callback: (args) => {
            approvalData.approvedContent = args.opinion;
            approvalData.nextTaskUser = args.nextTaskUser;
            onFinish({});
        }
    });
}
function flowSuccess() {
    opinionDlg.value.toggleDialog({
        isClose: true
    });
    message.success('操作成功');
    setTimeout(() => {
        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;
        }
    } 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
    };
}

async function saveLaunch() {
    data.submitLoading = 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();
                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: []
                            };
                        });
                    if (taskList.length > 0) {
                        notificationError('提交失败', '流程设计错误，开始后的第一个节点必须是审批人为发起人的起草节点。');
                        data.submitLoading = false;
                    } else {
                        createFlowSuccess(taskList);
                    }
                } else {
                    createFlowSuccess();
                }
            } 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;
}
</script>

<style lang="less"></style>