xj-admin/src/views/archivesManage/employee/archiveFlow/safekeeping/safekeeping.vue

<template>
    <div>
        <BasicTables
            @register="registerTable"
            @go-add="addInside"
            @go-export="exportExcel"
            :task-code="props.taskCode"
            :task-params="props.taskParams"
        >
            <template #btnTop>
                <div class="btn-top-d">
                    本月{{ info }}人员数量：<span>{{ topInfo?.currentMonth }}</span> 上月{{ info }}人员数量：<span>{{ topInfo?.lastMonth }}</span>
                    本年{{ info }}人员数量：<span>{{ topInfo?.currentYear }}</span>
                </div>
            </template>
        </BasicTables>
        <div class="inside-modal" ref="outer">
            <inside-modal @register="registerModal" :getContainer="outer" @success="handleSuccess" />
        </div>
    </div>
</template>
<script setup lang="ts">
    import BasicTables from '/@/components/Table/src/BasicTables.vue';
    import { useListPage } from '/@/hooks/system/useListPages';
    import { columns, searchSchema } from '/@/views/archivesManage/employee/archiveFlow/safekeeping/safekeeping.data';
    import InsideModal from '/@/views/archivesManage/employee/archiveFlow/safekeeping/components/safekeepingModal.vue';
    import { useModal } from '/@/components/Modal';
    import { onMounted, ref } from 'vue';
    import { exportApi, listApi, statApi } from '/@/views/archivesManage/employee/archiveFlow/safekeeping/safekeeping.api';

    const props = defineProps({
        type: {
            type: String,
            default: () => '3',
        },
        taskCode: {
            type: String,
            default: () => 'userFrozenTaskCode',
        },
        taskParams: {
            type: Object,
            default: () => {},
        },
    });

    const [registerModal, { openModal }] = useModal();

    const outer = ref();
    const info = ref(props.type === '3' ? '封存' : '注销');
    const topInfo = ref({
        currentMonth: 0,
        currentYear: 0,
        lastMonth: 0,
    });

    const { tableContext, onExportXls } = useListPage({
        tableProps: {
            api: listApi,
            pageTitle: `长庆油田已${info.value}员工`,
            columns,
            canResize: false,
            searchInfo: { type: props.type },
            btnArr: ['edit', 'delete', 'exportRecord'],
            btnArrText: { add: `新增${info.value}员工`, search: '列表查询', export: '信息导出', print: '信息打印' },
            formConfig: {
                schemas: searchSchema,
                autoSubmitOnEnter: true,
                showAdvancedButton: false,
                fieldMapToNumber: [],
            },
            showIndexColumn: true,
            indexColumnProps: {
                dataIndex: 'listIndex',
                width: 70,
            },
            actionColumn: {
                width: 120,
                fixed: 'right',
            },
        },
    });

    const [registerTable, { reload, getForm }, {}] = tableContext;

    function exportExcel() {
        let form = getForm().getFieldsValue();
        let optionConfig = {
            exportConfig: {
                name: `长庆油田${props.type === '3' ? '封存' : '注销'}员工`,
                url: exportApi,
                params: { ...form, isXlsx: true, type: props.type },
            },
        };
        onExportXls(optionConfig);
    }

    onMounted(() => {
        initTop();
    });

    function initTop() {
        statApi({ type: props.type })
            .then((res) => {
                topInfo.value = { ...topInfo.value, ...res };
            })
            .catch((e) => {
                console.log(e);
            });
    }

    function addInside() {
        openModal(true, { type: props.type });
    }

    function handleSuccess() {
        reload();
    }
</script>
<style scoped lang="less">
    .btn-top-d {
        padding: 15px 10px;
        border-radius: 7px;
        font-size: 15px;
        background: #ffffff;

        > span {
            color: #5087ec;
            margin-right: 20px;
        }
    }

    .inside-modal {
        :deep(.ant-modal) {
            top: 10px !important;
        }

        :deep(.ant-modal-footer) {
            display: none;
        }

        :deep(.ant-modal-body) {
            height: calc(100vh - 80px);
            overflow: hidden;
            .scrollbar__view {
                height: 100%;
                > div {
                    height: 100% !important;
                    min-height: 100% !important;
                    max-height: 100% !important;
                }
            }
        }
    }
</style>