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

<template>
    <div class="page-bg-wrap">
        <div class="itc-create-flow">
            <div class="toolbar">
                <a-space :size="10" wrap>
                    <a-button style="margin-right: 10px">
                        <slot name="icon">
                            <close-outlined />
                        </slot>
                        关闭
                    </a-button>
                    <a-button type="primary">
                        <slot name="icon">
                            <send-outlined />
                        </slot>
                        提交
                    </a-button>
                    <a-button @click="saveDraft" :disabled="disableSubmit">
                        <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 } from '/@/api/workflow/task';
    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
    import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';

    const router = useRouter();
    const tabStore = useMultipleTabStore();

    import { nextTick, onMounted, ref, toRaw } from 'vue';
    import { postDraft, putDraft } from '/@/api/workflow/process';
    import { useI18n } from '/@/hooks/web/useI18n';

    const { t } = useI18n();
    const { data, initProcessData, notificationSuccess, notificationError } = userTaskItem();
    const currentRoute = router.currentRoute;
    const rParams = currentRoute.value.query;
    const rSchemaId = rParams.schemaId;
    const rDraftsId = rParams.draftsId;
    const draftsJsonStr = localStorage.getItem('draftsJsonStr');
    let formInformation = ref();
    const showFlowChart = ref(false);
    const disableSubmit = ref(false);
    let randKey = ref('randkey'); // 强制表单重新渲染

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

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

    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) {
                    tabStore.changeTitle('new_' + rSchemaId, '新建 - ' + 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) {
                let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
                showResult(res, t('保存草稿'));
            } else {
                let res = await postDraft(rSchemaId, formModels, props.rowKeyData);
                showResult(res, t('保存草稿'));
            }
        } catch (error) {
            notificationError(t('保存草稿'));
        }
    }

    function showResult(res, title) {
        if (res) {
            notificationSuccess(title);
        } else {
            notificationError(title);
        }
    }
</script>

<style lang="less">
    .itc-create-flow {
        padding: 10px;
        background-color: #fff;

        .toolbar {
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
    }

    .page-bg-wrap {
        background-color: rgb(246 247 249);
        padding: 10px;
    }
</style>