gasInjection-project/src/views/vent/reportManager/comment/NormalHisTable.vue

<template>
    <div>
        <BasicTable @register="registerTable" :rowSelection="rowSelection">
            <template #action="{ record }">
                <a class="table-action-link" @click="handleEdit(record)">预览</a>
                <a class="table-action-link" @click="handleDownLoad(record)">下载</a>
                <slot name="action" v-bind="{ record }"></slot>
            </template>
            <template #bodyCell="{ column, record }">
                <slot name="filterCell" v-bind="{ column, record }"></slot>
            </template>
        </BasicTable>
        <DeviceModal :editID="editID" :reportLogHis="reportLogHis" :fileType="fileType" @register="registerModal" :addOredit="addOredit" />
    </div>
</template>
  
<script lang="ts" setup>
//ts语法
import { ref, reactive, toRaw, defineExpose, watch } from 'vue';
import { BasicTable, } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import DeviceModal from './DeviceModal.vue';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import { useListPage } from '/@/hooks/system/useListPage';

const props = defineProps({
    columns: {
        type: Array,
        // required: true,
        default: () => [],
    },
    list: {
        type: Function,
        required: true,
    },
    //历史记录下载文件接口
    downLoad: {
        type: Function,
        required: true,
    },
    designScope: {
        type: String,
    },
    title: {
        type: String,
    },
});

//区分打开编辑或新增弹窗
let addOredit = ref('')
//文件ID
let editID = ref(0);
let fileType = ref(''); //文件类型

let  reportLogHis=ref('')//是否为报表记录编辑

const record = reactive({});

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

const columnList = getTableHeaderColumns('');

// 列表页面公共参数、方法
const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
    designScope: props.designScope,
    tableProps: {
        title: props.title,
        api: props.list,
        columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
        showTableSetting: false,
        // size: 'small',
        // bordered: false,
        formConfig: {
            showAdvancedButton: true,
            // labelWidth: 100,
            labelAlign: 'left',
            labelCol: {
                xs: 24,
                sm: 24,
                md: 24,
                lg: 9,
                xl: 7,
                xxl: 5,
            },
            schemas: [],
        },
        useSearchForm: false,
        striped: true,
        actionColumn: {
            width: 180,
        },
        beforeFetch: (params) => {
            return Object.assign(params, { column: 'createTime', });
        },
    },
});

//注册table数据
const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;

/**
 * 编辑事件
 */
function handleEdit(data) {
    addOredit.value = 'edit'
    reportLogHis.value='reportLog'
    Object.assign(record, toRaw(data));
    let index = record.fileName.indexOf('.');
    fileType.value = record.fileName.substring(index + 1);
    editID.value = record.id;
    console.log(editID.value,'报表历史记录ID')
    openModal(true, {
        record,
    });
}

//下载文件
function handleDownLoad(record) {
    console.log(record, '下载');
    props.downLoad({ id: record.id }).then((res) => {
        console.log(res, '报表历史记录下载');
        let filename = `${record.fileName}`;
        downFilePublic(res, filename);
    });
}
// 下载公用方法
function downFilePublic(content, fileName) {
    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
    // IE10以上支持blob但是依然不支持download
    if ('download' in document.createElement('a')) {
        // 支持a标签download的浏览器
        const link = document.createElement('a'); // 创建a标签
        link.download = fileName; // a标签添加属性
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); // 执行下载
        URL.revokeObjectURL(link.href); // 释放url
        document.body.removeChild(link); // 释放标签
    } else {
        // 其他浏览器
        navigator.msSaveBlob(blob, fileName);
    }
}

defineExpose({
    doRequest, onExportXls, onImportXls, reload, getForm
});

</script>
  
<style scoped lang="less">
@ventSpace: zxm;
@vent-table-no-hover: #00bfff10;

:deep(.@{ventSpace}-table-cell-row-hover) {
    background: #264d8833 !important;
}

:deep(.@{ventSpace}-table-row-selected) {
    background: #268bc522 !important;
}

:deep(.@{ventSpace}-table-tbody > tr > td) {
    background-color: #0dc3ff05;
}

:deep(.jeecg-basic-table-row__striped) {
    td {
        background-color: @vent-table-no-hover !important;
    }
}

:deep(.@{ventSpace}-select-dropdown) {

    .@{ventSpace}-select-item-option-selected,
    .@{ventSpace}-select-item-option-active {
        background-color: #ffffff33 !important;
    }

    .@{ventSpace}-select-item:hover {
        background-color: #ffffff33 !important;
    }
}</style>