geg-gas-web/src/views/secondDev/createFlow.vue

<template>
    <a-spin :spinning="loading" tip="加载中...">
        <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 v-if="!disabled" :disabled="data.submitLoading" type="primary" @click="saveLaunch">
                            <slot name="icon">
                                <send-outlined />
                            </slot>
                            提交
                        </a-button>
                        <a-button v-if="customFormConfig.codeList.includes(curPageCode)&&!disabled" @click="onSave">
                          <slot name="icon"><save-outlined /></slot>保存
                        </a-button>
                        <a-button v-if="!customFormConfig.codeList.includes(curPageCode)&&!disabled" :disabled="data.submitLoading" @click="saveDraft">
                            <slot name="icon">
                                <clock-circle-outlined />
                            </slot>
                            暂存
                        </a-button>
                        <a-button @click="handleDelete" danger v-if="rDraftsId != '0'"> 删除 </a-button>
                        <a-button @click="openFlowChart">
                            <slot name="icon">
                                <apartment-outlined />
                            </slot>
                            流程图
                        </a-button>
                        <div v-if="customFormConfig.codeList.includes(curPageCode)&&!disabled">
                          <a-button>
                            <slot name="icon"><download-outlined /></slot>下载模板
                          </a-button>
                          <a-button>
                            <slot name="icon"><upload-outlined /></slot>导入
                          </a-button>
                        </div>
                    </a-space>
                </div>
                <div class="flow-content">
                    <component v-if="customFormConfig.codeList.includes(curPageCode)" :is="componentName" :disabled="disabled"  ref="formInformation"  />
                    <FormInformation v-else :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" @cancel="closeFlowChart">
                <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>
    </a-spin>
</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, SaveOutlined, DownloadOutlined, UploadOutlined } from '@ant-design/icons-vue';
    import { nextTick, onMounted, ref, toRaw, reactive, computed, defineAsyncComponent } from 'vue';
    import { deleteDraft, postDraft, putDraft } from '/@/api/workflow/process';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { separator } from '/@bpmn/config/info';
    import { message, Modal } from 'ant-design-vue';
    import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
    import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
    import useEventBus from '/@/hooks/event/useEventBus';
    import {customFormConfig} from './customFormConfig'

    const { bus, CREATE_FLOW } = useEventBus();

    const router = useRouter();
    const tabStore = useMultipleTabStore();
    const curPageCode = ref()
    const { t } = useI18n();
    const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
    const currentRoute = router.currentRoute.value;
    const rParams = currentRoute.params;
    const fullPath = currentRoute.fullPath;
    const rQuery = currentRoute.query;
    const rSchemaId = rParams.arg1;
    let rDraftsId = ref(rParams.arg2);
    const taskId = ref();
    const loading = ref(false);
    const draftsJsonStr = localStorage.getItem('draftsJsonStr');
    const formJsonStr = localStorage.getItem('formJsonStr');
    let formInformation = ref();
    const opinionDlg = ref();
    let pageMode = 'new';
    const showFlowChart = ref(false);
    const disableSubmit = ref(false);
    const disabled = ref(currentRoute.query?.disabled)
    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';
    }
    if (formJsonStr) {
        localStorage.removeItem('formJsonStr');
    }

    function closeFlowChart() {
        showFlowChart.value = false;
    }

    function openFlowChart() {
        showFlowChart.value = true;
    }

    function close() {
        tabStore.closeTab(currentRoute, router);
    }

    const props = defineProps({
        rowKeyData: {
            type: String
        }
    });

    const componentName = computed(() => {
      if (!data.formInfos.length) {
        return defineAsyncComponent({
            loader: () => import('/@/views/secondDev/Empty.vue')
        });
      }
      return defineAsyncComponent({
        loader: () => import(`/@/views/${data.formInfos[0]?.functionalModule}/${data.formInfos[0]?.functionName}/components/createForm.vue`)
      });
    });

    onMounted(async () => {
        try {
            // 发起流程
            loading.value = true
            let res = await getStartProcessInfo(rSchemaId);
            loading.value = false
            const title = res?.schemaInfo?.name;
            if (title) {
                const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
                tabStore.changeTitle(fullPath, `${tabPrefix}：${title}`);
            }
            curPageCode.value = res?.schemaInfo?.code
            initProcessData(res);
        } catch (error) {
          loading.value = false
        }
        randKey.value = Math.random() + '';
        // 这里的顺序不能变 表单不渲染的时候 设置表单初值没用
        await nextTick();
        await initDraftsFormData();
        await initFromFormData();
    });

    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 initFromFormData() {
        if (formJsonStr) {
            let formDataJson = JSON.parse(formJsonStr);
            let formData = [];
            if (rQuery.fromKey && formDataJson[rQuery.fromKey]) {
                formData.push(formDataJson[rQuery.fromKey]);
            }
            await formInformation.value.setFormData(formData);
        }
    }

    async function saveDraft() {
        try {
            disableSubmit.value = true;
            let formModels = await formInformation.value.saveDraftData();
            if (rDraftsId.value !== '0') {
                let res = await putDraft(rSchemaId, formModels, rDraftsId.value, props.rowKeyData);
                showResult(res, '保存草稿');
            } else {
                let res = await postDraft(rSchemaId, formModels, props.rowKeyData);
                rDraftsId.value = res;
                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);
        if (nextNodes.length == 0) {
            message.error('流程没有可以选择的下一节点');
            loading.value = false;
            data.submitLoading = false;
            return;
        }
        opinionDlg.value.toggleDialog({
            action: 'agree',
            nextNodes,
            rejectCancel: () => {
                loading.value = false;
                data.submitLoading = 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();
        }
    }

    async function getApproveParams() {
        let formModels = mainFormModels.value;
        let fileFolderIds = []
        let system = {}
        if (customFormConfig.codeList.includes(curPageCode.value)) {
          let key  = data.formInfos[0]?.formConfig?.key
          let obj = {}
          system[key] = false
          fileFolderIds = []
        } else {
          system = formInformation.value.getSystemType();
          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,
            draftId: rDraftsId.value
        };
    }
    async function onSave() {
      let value = await formInformation.value.handleSubmit();
    }
    async function saveLaunchNew() {
        if (!taskId.value && rDraftsId.value != '0') {
            try {
                await new Promise((resolve, reject) => {
                    Modal.confirm({
                        title: '提示',
                        content: '请确认是否提交流程，提交后流程不能删除',
                        okText: '确定',
                        cancelText: '取消',
                        onOk: () => resolve(),
                        onCancel: () => reject()
                    });
                });
            } catch {
                return;
            }
        }
        try {
            // let validateForms = await formInformation.value.validateForm();
            // let system = formInformation.value.getSystemType();
            let key  = data.formInfos[0]?.formConfig?.key
            let system = {}
            let obj = {}
            system[key] = false
            
            let value = await formInformation.value.handleSubmit(true);
            obj[key] = value
            mainFormModels.value = obj
            console.log(mainFormModels.value, 6666)
            if (!value) return

              data.submitLoading = true;
              loading.value = true;
            // if (validateForms.length > 0) {
                // let successValidate = validateForms.filter((ele) => {
                //     return ele.validate;
                // });
                // console.info('validateForms:' + JSON.stringify(validateForms));
                // 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);
                    let fileFolderIds = []
                    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: []
                                };
                            });
                        const strictDesign = false;
                        console.log(taskList, 'taskList')
                        if (strictDesign && taskList.length > 0) {
                            notificationError('提交失败', '流程设计错误，开始后的第一个节点必须是审批人为发起人的起草节点。');
                            data.submitLoading = false;
                            loading.value = false;
                        } else {
                            createFlowSuccess(taskList);
                        }
                    } else {
                        createFlowSuccess();
                    }
                // } else {
                //     data.submitLoading = false;
                //     notificationError(t('发起流程'), t('表单校验未通过'));
                //     loading.value = false;
                // }
            // }
        } catch (error) {
          console.log(error, 'error')
            data.submitLoading = false;
            loading.value = false;
            notificationError(t('发起流程'), t('发起流程失败'));
        }
    }
    async function saveLaunch() {
      if (customFormConfig.codeList.includes(curPageCode.value)){
        saveLaunchNew()
        return
      }
        if (!taskId.value && rDraftsId.value != '0') {
            try {
                await new Promise((resolve, reject) => {
                    Modal.confirm({
                        title: '提示',
                        content: '请确认是否提交流程，提交后流程不能删除',
                        okText: '确定',
                        cancelText: '取消',
                        onOk: () => resolve(),
                        onCancel: () => reject()
                    });
                });
            } catch {
                return;
            }
        }
        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;
                });
                console.info('validateForms:' + JSON.stringify(validateForms));
                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);
                    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: []
                                };
                            });
                        const strictDesign = false;
                        if (strictDesign && taskList.length > 0) {
                            notificationError('提交失败', '流程设计错误，开始后的第一个节点必须是审批人为发起人的起草节点。');
                            data.submitLoading = false;
                            loading.value = false;
                        } else {
                            createFlowSuccess(taskList);
                        }
                    } else {
                        createFlowSuccess();
                    }
                } else {
                    data.submitLoading = false;
                    notificationError(t('发起流程'), t('表单校验未通过'));
                    loading.value = false;
                }
            }
        } 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]]);
                    });
                }
            }
        });
        return fileFolderIds;
    }
    async function handleDelete() {
        Modal.confirm({
            title: '提示信息',
            content: '是否确认删除？删除后无法恢复数据！',
            okText: '确认',
            cancelText: '取消',
            async onOk() {
                try {
                    let res = await deleteDraft([rDraftsId.value]);
                    if (res) {
                        message.success('删除成功');
                        setTimeout(() => {
                            bus.emit(CREATE_FLOW, {});
                            close();
                        }, 500);
                    } else {
                        message.error('删除失败');
                    }
                } catch (error) {}
            },
            onCancel() {}
        });
    }
</script>

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