xj-admin/src/utils/import/ImportUtil.vue

<template>
    <BasicDrawer
        :title="props.drawerTitle"
        :width="drawerInfo.width"
        :checkUrl="props.checkUrl"
        :updateUrl="props.updateUrl"
        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 === 'importUrl'">
                    <a-button type="primary" :disabled="record.importUrl === null" preIcon="ant-design:vertical-align-bottom-outlined">
                        <span style="text-decoration: underline" @click="importFile(record.importUrl)">点击下载</span>
                    </a-button>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <TableAction :actions="getTableAction(record)" />
                </template>
            </template>
        </BasicTable>
    </BasicDrawer>
    <ImportDetailModal @register="registerModal" />
</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 './ImportUtil.data';
    import { TableAction, useTable } from '/@/components/Table';
    import { getFileAccessHttpUrlDown } from '/@/utils/common/compUtils';
    import { commonImportsDeleteApi, importList, handlePost } from '/@/utils/import/ImportUtil.api';
    import { TableProps } from '/@/hooks/system/useListPage';
    import { cloneDeep, merge } from 'lodash-es';
    import { useModal } from '/@/components/Modal';
    import ImportDetailModal from '/@/utils/import/ImportDetailModal.vue';

    const [registerModal, { openModal }] = useModal();
    const props = defineProps({
        api: {
            type: Function,
            default: importList,
        },
        taskCode: {
            type: String,
            required: true,
        },
        deleteApi: {
            type: Function,
            default: commonImportsDeleteApi,
        },
        export: {
            type: Boolean,
            default: true,
        },
        drawerTitle: {
            type: String,
            default: '查看导入记录',
        },
        checkUrl: {
            type: String,
            default: '',
        },
        updateUrl: {
            type: String,
            default: '',
        },
        params: {
            type: Object,
            default: () => {},
        },
    });
    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,
        size: 'small',
        canResize: true,
        beforeFetch: (params) => {
            params['taskCode'] = props.taskCode;
            params = { ...params, ...props.params };
            return params;
        },
        showTableSetting: true,
        tableSetting: {
            redo: true,
        },
        bordered: true,
        actionColumn: {
            width: 200,
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
        },
        //自定义默认排序
        defSort: {
            column: 'createDate',
            order: 'desc',
        },
    };

    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 importFile = (url) => {
        window.open(getFileAccessHttpUrlDown(url));
    };
    const closeFunc = () => {
        initData.value = false;
        return true;
    };
    const getTableAction = (record) => {
        return [
            {
                label: '校验',
                onClick: handleCheck.bind(null, record),
                ifShow: props.checkUrl !== '',
                disabled: record.importStatus !== '0',
            },
            {
                label: '更新',
                onClick: handleUpdate.bind(null, record),
                ifShow: props.updateUrl !== '',
                disabled: props.updateUrl == null || record.importStatus !== '3',
            },
            {
                label: '详情',
                onClick: handleShowDetailList.bind(null, record),
                ifShow: props.updateUrl !== '' || props.checkUrl !== '',
            },
            {
                label: '删除',
                color: 'error',
                onClick: handleDelete.bind(null, record),
            },
        ];
    };
    const handleDelete = async (record) => {
        await props.deleteApi({ id: record.id }, reload);
    };
    const handleCheck = async (record) => {
        await handlePost(props.checkUrl, '校验', { id: record.id }, reload);
    };
    const handleUpdate = async (record) => {
        await handlePost(props.updateUrl, '更新', { id: record.id }, reload);
    };
    const handleShowDetailList = (record) => {
        openModal(true, { infoId: record.id });
    };
</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>