WholeProcessPlatform/frontend/src/views/shuJuTianBao/shengPiJiLu.vue

<template>
    <div class="shengPiJiLu-page">
        <!-- 搜索区域组件，具体 props 需根据实际子组件调整 -->
        <GuoYuSheShiShuJuTianBaoSearch @search-finish="handleSearchFinish" @reset="handleReset" />
        <!-- 主表格 -->
        <BasicTable ref="tableRef" :columns="columns" :list-url="queryPageList" :search-params="{}">
            <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'action' || column.dataIndex === 'action'">
                    <div class="flex">
                        <a-button type="link" size="small" @click="handleShowApprovalLog(record)">审批详情</a-button>
                        <a-button type="link" size="small" @click="handleShowChangeLog(record)">变更详情</a-button>
                    </div>
                </template>
                <template v-if="column.dataIndex === 'bizType'">
                    {{ handName(record.bizType, yeWuType) }}
                </template>
                <template v-if="column.dataIndex === 'status'">
                    {{ handName(record.status, shenStatus) }}
                </template>
            </template>
        </BasicTable>

        <!-- 审批操作日志弹框 -->
        <a-modal
            v-model:open="approvalLogVisible"
            title="审批操作日志"
            width="1600px"
            :footer="null"
            destroy-on-close="false"
        >
            <div class="approval-log-modal-content">
                <ApprovalLogSearch 
                    :action-type-dict="actionTypeDict" 
                    @search-finish="handleApprovalLogSearch" 
                    @reset="handleApprovalLogReset" 
                />
                <BasicTable 
                    ref="approvalLogTableRef" 
                    :columns="approvalLogColumns" 
                    :list-url="getApprovalLogList"
                >
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'action'">
                            {{ handName(record.action, actionTypeDict) }}
                        </template>
                    </template>
                </BasicTable>
            </div>
        </a-modal>

        <!-- 数据变更记录弹框 -->
        <a-modal
            v-model:open="changeLogVisible"
            title="数据变更记录"
            width="1600px"
            :footer="null"
            destroy-on-close="false"
        >
            <div class="change-log-modal-content">
                <ChangeLogSearch 
                    :operation-type-dict="operationTypeDict" 
                    @search-finish="handleChangeLogSearch" 
                    @reset="handleChangeLogReset" 
                />
                <BasicTable 
                    ref="changeLogTableRef" 
                    :columns="changeLogColumns" 
                    :list-url="getApprovalChangeLogList"
                >
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'operationType'">
                            {{ handName(record.operationType, operationTypeDict) }}
                        </template>
                        <template v-if="column.dataIndex === 'bizType'">
                            {{ handName(record.bizType, yeWuType) }}
                        </template>
                        <template v-if="column.dataIndex === 'changeJson'">
                            <pre style="max-height: 200px; overflow: auto; margin: 0;">{{ record.changeJson }}</pre>
                        </template>
                    </template>
                </BasicTable>
            </div>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { queryPageList, getApprovalLogList, getApprovalChangeLogList } from '@/api/shengPiJiLu';
import BasicTable from "@/components/BasicTable/index.vue";
import GuoYuSheShiShuJuTianBaoSearch from "./shengPiJiLuSearch.vue";
import ApprovalLogSearch from "./approvalLogSearch.vue";
import ChangeLogSearch from "./changeLogSearch.vue";
import { getDictItemsByCode } from '@/api/dict';
let columns = ref([
    {
        title: '审批批次号',
        dataIndex: 'approvalNo',
        key: 'approvalNo',
        width: 160,
        fixed: 'left'
    },
    {
        title: '业务类型',
        dataIndex: 'bizType',
        key: 'bizType',
        width: 100,
        align: 'center'
    },
    {
        title: '数据条数',
        dataIndex: 'dataCount',
        key: 'dataCount',
        width: 100,
        align: 'center'
    },
    {
        title: '提交人',
        dataIndex: 'applyUserName',
        key: 'applyUserName',
        width: 120,
          align: 'center'
    },
    {
        title: '提交时间',
        dataIndex: 'applyTime',
        key: 'applyTime',
        width: 160,
          align: 'center'

    },
    {
        title: '审批状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        align: 'center',

    },
    {
        title: '审批人',
        dataIndex: 'approverName',
        key: 'approverName',
        width: 120,
         align: 'center'
    },
    {
        title: '审批时间',
        dataIndex: 'approveTime',
        key: 'approveTime',
        width: 160,
         align: 'center'

    },
    {
        title: '审批备注',
        dataIndex: 'remark',
        key: 'remark',
        ellipsis: true,

    },
    {
        title: '操作',
        key: 'action',
        width: 160,
        fixed: 'right',
        align: 'center'
    }
]);
const tableRef = ref()
const handleSearchFinish = (values: any) => {
    console.log(values);
    const filters = [
        values.approvalNo && {
            field: "approvalNo",
            operator: "contains",
            dataType: "string",
            value: values.approvalNo,
        },
        values.status && {
            field: "status",
            operator: "eq",
            dataType: "string",
            value: values.status,
        },
    ].filter(Boolean);


    const filter = {
        logic: "and",
        filters: filters,
    };
    tableRef.value?.getList(filter);
};
const handleReset = (values) => {
    handleSearchFinish(values);
};

// 审批操作日志弹框相关
const approvalLogVisible = ref(false);
const approvalLogTableRef = ref();

const approvalLogColumns = ref([
    {
        title: '操作类型',
        dataIndex: 'action',
        key: 'action',
        width: 120,
        align: 'center'
    },
    {
        title: '操作人',
        dataIndex: 'operatorName',
        key: 'operatorName',
        width: 150,
        align: 'center'
    },
    {
        title: '操作时间',
        dataIndex: 'operateTime',
        key: 'operateTime',
        width: 180
    },
     {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        width: 180
    },
    {
        title: '审批意见',
        dataIndex: 'commentInfo',
        key: 'commentInfo',
        ellipsis: true,
    },
   
]);

// 数据变更记录弹框相关
const changeLogVisible = ref(false);
const changeLogTableRef = ref();

const changeLogColumns = ref([
    {
        title: '业务类型',
        dataIndex: 'bizType',
        key: 'bizType',
        width: 120,
        align: 'center'
    },
    {
        title: '操作类型',
        dataIndex: 'operationType',
        key: 'operationType',
        width: 120,
        align: 'center'
    },
    {
        title: '操作人',
        dataIndex: 'operatorName',
        key: 'operatorName',
        width: 150,
        align: 'center'
    },
    {
        title: '操作时间',
        dataIndex: 'operateTime',
        key: 'operateTime',
        width: 180
    },
    {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        width: 180
    },
    {
        title: '变更内容',
        dataIndex: 'changeJson',
        key: 'changeJson',
        ellipsis: true
    },
    
]);

const currentApprovalId = ref('');
const actionTypeDict = ref([]);
const operationTypeDict = ref([]);

// 显示审批操作日志弹框
const handleShowApprovalLog = (record: any) => {
    currentApprovalId.value = record.id;
    approvalLogVisible.value = true;
    // 延迟调用，确保弹框和 BasicTable 组件完全渲染
    setTimeout(() => {
        const filter = {
            logic: "and",
            filters: [
                {
                    field: "approvalId",
                    operator: "eq",
                    dataType: "string",
                    value: record.id,
                }
            ]
        };
        approvalLogTableRef.value?.getList(filter);
    }, 300);
};

// 审批日志搜索处理
const handleApprovalLogSearch = (values: any) => {
    console.log('审批日志搜索:', values);
    const filters = [
        {
            field: "approvalId",
            operator: "eq",
            dataType: "string",
            value: currentApprovalId.value,
        },
        values.action && {
            field: "action",
            operator: "eq",
            dataType: "string",
            value: values.action,
        },
    ].filter(Boolean);

    const filter = {
        logic: "and",
        filters: filters,
    };
    approvalLogTableRef.value?.getList(filter);
};

// 审批日志重置处理
const handleApprovalLogReset = (values: any) => {
    console.log('审批日志重置:', values);
    handleApprovalLogSearch(values);
};

// 显示数据变更记录弹框
const handleShowChangeLog = (record: any) => {
    currentApprovalId.value = record.id;
    changeLogVisible.value = true;
    // 延迟调用，确保弹框和 BasicTable 组件完全渲染
    setTimeout(() => {
        const filter = {
            logic: "and",
            filters: [
                {
                    field: "approvalId",
                    operator: "eq",
                    dataType: "string",
                    value: record.id,
                }
            ]
        };
        changeLogTableRef.value?.getList(filter);
    }, 300);
};

// 变更日志搜索处理
const handleChangeLogSearch = (values: any) => {
    console.log('变更日志搜索:', values);
    const filters = [
        {
            field: "approvalId",
            operator: "eq",
            dataType: "string",
            value: currentApprovalId.value,
        },
        values.operationType && {
            field: "operationType",
            operator: "eq",
            dataType: "string",
            value: values.operationType,
        },
    ].filter(Boolean);

    const filter = {
        logic: "and",
        filters: filters,
    };
    changeLogTableRef.value?.getList(filter);
};

// 变更日志重置处理
const handleChangeLogReset = (values: any) => {
    console.log('变更日志重置:', values);
    handleChangeLogSearch(values);
};

// 初始化
onMounted(() => {
    dictNmae()
});
const shenStatus = ref([])
const yeWuType = ref([])
const dictNmae = () => {
    getDictItemsByCode({ dictCode: 'shenStatus' }).then((res) => {
        shenStatus.value = res.data;
    });
    getDictItemsByCode({ dictCode: 'yeWuType' }).then((res) => {
        yeWuType.value = res.data;
    });
    // TODO: 待补充操作类型字典
    getDictItemsByCode({ dictCode: 'caoType' }).then((res) => {
        actionTypeDict.value = res.data;
    });
    getDictItemsByCode({ dictCode: 'caoTypeTwo' }).then((res) => {
        operationTypeDict.value = res.data;
    });
}
const handName = (val: any, arr: any) => {
    let dictName1 = ''
    arr.forEach((item: any) => {
        if (item.itemCode == val) {
            dictName1 = item.dictName
        }
    })
    return dictName1    
}
</script>

<style scoped lang="scss">
.shengPiJiLu-page {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 20px;
}

.approval-log-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.change-log-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
</style>