xj-admin/src/utils/export/exportUtil.vue

<template>
    <BasicDrawer :title="props.drawerTitle" :width="drawerInfo.width" destroy-on-close v-bind="$attrs" @closeFunc="closeFunc" @register="register">
        <BasicTable v-if="initData" @register="registerTable">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'exportUrl'">
                    <a-button type="primary" :disabled="record.exportUrl === null" preIcon="ant-design:vertical-align-bottom-outlined">
                        <span style="text-decoration: underline" @click="exportFile(record.exportUrl)">点击下载</span>
                    </a-button>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <TableAction :actions="getTableAction(record)" />
                </template>
            </template>
        </BasicTable>
    </BasicDrawer>
</template>
<script setup lang="ts">
    import { ref } from 'vue';
    import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue';
    import { useDrawerInner } from '/@/components/Drawer';
    import BasicTable from '/@/components/Table/src/BasicTable.vue';
    import { columns } from './exportUtil.data';
    import { TableAction, useTable } from '/@/components/Table';
    import { getFileAccessHttpUrlDown } from '/@/utils/common/compUtils';
    import { commonExportsInfoDeleteApi, exportList } from '/@/utils/export/exportUtil.api';
    import { TableProps } from '/@/hooks/system/useListPage';
    import { cloneDeep, merge } from 'lodash-es';

    const props = defineProps({
        api: {
            type: Function,
            default: exportList,
        },
        taskCode: {
            type: String,
            required: true,
        },
        inAllFlag: {
            type: Boolean,
            required: false,
        },
        deleteApi: {
            type: Function,
            default: commonExportsInfoDeleteApi,
        },
        export: {
            type: Boolean,
            default: true,
        },
        drawerTitle: {
            type: String,
            default: '查看导出记录',
        },
        params: {
            type: Object,
            default: () => {},
        },
        columns: {
            type: Array,
            default: () => columns,
        },
    });
    const drawerInfo = {
        title: '查看导出记录',
        width: '50%',
        showIndexColumn: true,
        indexColumnProps: {
            width: 50,
        },
    };
    const initData = ref(true);
    let tableProps: TableProps = {
        api: props.api as (...arg: any) => Promise<any>,
        columns: props.columns,
        canResize: true,
        beforeFetch: (params) => {
            params['taskCode'] = props.taskCode;
            params['inAllFlag'] = props.inAllFlag;
            params = { ...params, ...props.params };
            return params;
        },
        showTableSetting: true,
        tableSetting: {
            redo: true,
        },
        bordered: true,
        actionColumn: {
            width: 80,
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
        },
    };

    function getColumns() {
        const columnsUsed = cloneDeep(columns);
        columnsUsed[0].ifShow = props.export;
        return columnsUsed;
    }

    const [register] = useDrawerInner((data) => {
        // data.column && tableProps.value.columns = data.column
        initData.value = true;
        if (data?.tableInfo) {
            merge(tableProps, data.tableInfo);
        }
        if (data?.drawerInfo) {
            merge(drawerInfo, data.drawerInfo);
        }
        setColumns(getColumns());
    });
    const [registerTable, { reload, setColumns }] = useTable(tableProps);
    const exportFile = (url) => {
        window.open(getFileAccessHttpUrlDown(url));
    };
    const closeFunc = () => {
        initData.value = false;
        return true;
    };
    const getTableAction = (record) => {
        return [
            {
                label: '删除',
                onClick: handleDelete.bind(null, record),
            },
        ];
    };
    const handleDelete = async (record) => {
        await props.deleteApi({ id: record.id }, reload);
    };
</script>
<style scoped lang="less">
    :deep(.ant-table-thead:nth-child(1):nth-child(1)) {
        opacity: 0;
    }
    :deep(.ant-popover-buttons) {
        display: flex;
    }
    :deep(.items-center) {
        position: relative;
    }
    .redoIcon {
        font-size: 18px;
        position: absolute;
        right: 20px;
        top: -10px;
        cursor: pointer;
    }
</style>