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

<template>
    <div class="process-monitoring-page">
        <a-spin :spinning="spinning" tip="请稍后...">
            <a-tabs tab-position="top" v-model:activeKey="activeKey" type="card">
                <a-tab-pane :key="1" :tab="'表单信息'" force-render> </a-tab-pane>
                <a-tab-pane :key="2" :tab="'流程信息'"> </a-tab-pane>
                <a-tab-pane :key="3" :tab="'流转记录'" style="overflow: auto"> </a-tab-pane>
                <!-- <a-tab-pane :key="4" :tab="'附件汇总'">
                    <SummaryOfAttachments :processId="processId"/>
                </a-tab-pane> -->
                <a-tab-pane :key="5" :tab="'流程变更记录'"> </a-tab-pane>
                <a-tab-pane :key="6" :tab="'审批记录'"> </a-tab-pane>
                <a-tab-pane :key="7" :tab="'流程变量'"> </a-tab-pane>
                <!-- <a-tab-pane :key="8 + index" v-for="(item, index) in predecessorTasks" :tab="item.schemaName">
                <LookRelationTask
                    v-show="activeKey === 8 + index"
                    :taskId="item.taskId"
                    :processId="item.processId"
                    position="left"
                />
                </a-tab-pane> -->
            </a-tabs>
            <div class="tab-content" v-if="dataComplete">
                <processMonitoringFlowPage :data="data" :flowData="flowData" v-show="activeKey == '1'"></processMonitoringFlowPage>
                <ProcessInformationWithInfo :process-id="processId" :data="data" :flowData="flowData" v-if="activeKey == '2'" :canClick="true" :key="ProcessInformationKey" />
                <FlowRecord :list="data.taskRecords" :processId="processId" v-show="activeKey == '3'" />
                <ChangeRecord v-if="activeKey == 5" :processId="processId" :formDataId="data.formInfos[0].formData.id" :formInfos="data.formInfos" />
                <AuditRecord :processId="processId" :schemaId="schemaId" :xml="xml" v-show="activeKey == '6'" />
                <ProcVarPage :processId="processId" :schemaId="schemaId" :xml="xml" v-show="activeKey == '7'" />
            </div>
        </a-spin>
    </div>
</template>

<script setup lang="ts">
    import { ref, onMounted, unref, provide } from 'vue';

    import FlowRecord from '/@/views/workflow/task/components/flow/FlowRecord.vue';
    import ProcessInformationWithInfo from '/@/views/workflow/task/components/flow/ProcessInformationWithInfo.vue';
    import SummaryOfAttachments from '/@/views/workflow/task/components/flow/SummaryOfAttachments.vue';
    import LookRelationTask from '/@/views/workflow/task/components/flow/LookRelationTask.vue';
    import { SchemaTaskItem } from '/@/model/workflow/bpmnConfig';
    import ChangeRecord from '/@/views/formChange/formChangeLog/index.vue';
    import AuditRecord from '/@/views/auditOpt/auditRecord/index.vue';
    import processMonitoringFlowPage from './processMonitoringFlowPage.vue';
    // import ProcVarPage from '/@/views/editProVar/procVarManage/index.vue';
    import { getApprovalProcess } from '/@/api/workflow/task';
    import { Modal } from 'ant-design-vue';

    import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
    const { data, initProcessData } = userTaskItem();

    import { useRouter } from 'vue-router';
    const router = useRouter();
    const currentRoute = router.currentRoute.value;
    const fullPath = currentRoute.fullPath;
    const rQuery = currentRoute.query;
    const rParams = currentRoute.params;
    const schemaId = ref(rParams.arg1);
    const processId = ref(rParams.arg2);
    const ProcessInformationKey = ref(0);

    const spinning = ref(false);
    const dataComplete = ref(false);

    const flowInfo = ref({
        schemaId: schemaId.value,
        processId: processId.value
    });
    const flowData = ref({});
    provide('flowInfo', flowInfo);
    provide('refreshApproveInfo', getApproveInfo);

    const activeKey = ref(1);

    onMounted(async () => {
        await getApproveInfo();
    });
    async function getApproveInfo() {
        try {
            spinning.value = true;
            let res = await getApprovalProcess('', unref(processId.value));
            initProcessData(res);
            flowData.value = res;
            spinning.value = false;
            dataComplete.value = true;
            ProcessInformationKey.value++;
        } catch (error) {
            console.error('processMonitoringPage Error', error);
        }
    }
</script>
<style lang="less" scoped>
    .process-monitoring-page {
        height: 100%;
        width: 100%;
        :deep(.ant-spin-nested-loading) {
            height: 100%;
            width: 100%;
            display: flex;
            .ant-spin-container {
                height: 100%;
                display: flex;
                flex-direction: column;
                flex: 1;
                padding: 20px;
                .ant-tabs-nav {
                    margin: 0;
                }
                .top-toolbar {
                    display: flex;
                    border-bottom: none;
                    padding: 16px 0;
                }
                .tab-content {
                    flex: 1;
                    min-height: 0;
                    overflow: auto;
                    box-sizing: border-box;
                    display: flex;
                    .process-information-with-info {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        .flow-record-box {
                            flex: 1;
                        }
                    }
                }
            }
        }
    }
</style>