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>
    </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 } 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 } 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';

    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 draftsJsonStr = localStorage.getItem('draftsJsonStr');
    let formInformation = ref();
    let pageMode = 'new';
    const showFlowChart = ref(false);
    const disableSubmit = ref(false);
    let randKey = ref('randkey'); // 强制表单重新渲染

    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({
        schemaId: {
            type: String,
            required: true
        },
        draftsId: {
            type: String
        },
        taskId: {
            type: String,
            required: false,
            default: ''
        },
        processId: {
            type: String,
            required: false,
            default: ''
        },
        formData: {
            type: Object
        },
        formId: {
            type: String
        },
        rowKeyData: {
            type: String
        }
    });

    onMounted(async () => {
        try {
            if (props.processId) {
                // 重新发起
                let res = await getReStartProcessInfo(props.taskId, props.processId);
                res.taskApproveOpinions = [];
                initProcessData(res);
            } else if (props.schemaId && props.formId) {
                let res = await getStartProcessInfo(props.schemaId);

                if (props.formData && props.formId) {
                    res.formInfos.map((m) => {
                        if (m.formConfig.formId === props.formId) {
                            m.formData = toRaw(props.formData);
                        }
                    });
                }
                initProcessData(res);
            } else {
                // 发起流程
                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 flowSuccess() {
        /*opinionDlg.value.toggleDialog({
            isClose: true
        });*/
        message.success('流程发起成功');
        setTimeout(() => {
            close();
        }, 500);
    }

    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) {
                    let formModels = 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(formModels);
                    //如果传入了processId  代表是重新发起流程
                    let res;
                    if (props.processId) {
                        res = await reLaunch(props.processId, props.schemaId, formModels, relationTasks, fileFolderIds, system);
                    } else {
                        res = await postLaunch(rSchemaId, formModels, relationTasks, fileFolderIds, system);
                    }

                    // 下一节点审批人
                    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) {
                            notificationError('提交失败', '流程设计错误，开始后的第一个节点必须是审批人为发起人的起草节点。');
                            data.submitLoading = false;
                        } else {
                            data.submitLoading = false;
                            flowSuccess();
                        }
                    } else {
                        data.submitLoading = false;
                        flowSuccess();
                    }
                } 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>