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

<template>
    <div class="flow-page">
        <FormInformation
            v-if="!isSelfForm"
            :key="renderKey"
            ref="formInformation"
            :disabled="readonly"
            :formAssignmentData="data.formAssignmentData"
            :formInfos="data.formInfos"
            :opinions="data.opinions"
            :opinionsComponents="data.opinionsComponents"
            @get-form-configs="(config) => (formConfigs = config)"
        />
        <component v-else-if="data" :is="componentName" :formData="data" :flowData="flowData" />
    </div>
</template>

<script setup>
    import { useRouter } from 'vue-router';
    import { onMounted, reactive, ref, unref, createVNode, provide, defineExpose, computed, defineAsyncComponent } from 'vue';
    import FormInformation from './flowFormInformation.vue';
    import { getApprovalProcess } from '/@/api/workflow/task';
    import Title from '/@/components/Title/src/Title.vue';
    import { message, Modal } from 'ant-design-vue';
    const selfFormList = [
        // 流程编码
        // 'exchange_opinion',
        // 'audit_programme'
    ];
    const selfFormMap = {
        // 流程编码对应文件路径
        // 'exchange_opinion': 'auditOperationsCenter/exchangeViews/index.vue',
        // 'audit_programme': 'auditOperationsCenter/preAuditProgramme/index.vue'
    };
    const isSelfForm = computed(() => {
        return selfFormList.includes(props.data.item.code);
    });

    const componentName = computed(() => {
        return defineAsyncComponent({
            loader: () => import(`../${selfFormMap[props.data.item.code]}`)
        });
    });

    const readonly = ref(true); // 查看流程会触发只读模式
    const renderKey = ref('');
    const formConfigs = ref();
    const formInformation = ref();
    const props = defineProps({
        data: {
            type: Object,
            default: () => null
        },
        flowData: {
            type: Object,
            default: () => null
        }
    });

    onMounted(async () => {});

    defineExpose({});
</script>
<style lang="less" scoped>
    .flow-page {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }
</style>