eta_front/src/views/dataSource_manage/components/DelEDBTable.vue

<template>
    <div class="del-table-wrap">
        <div>
            <img src="~@/assets/img/data_m/set_icon.png" alt="" style="cursor: pointer;float:right" @click="showSetTableCols=true">
        </div>
        <el-table
            v-loading="tableLoading"
            ref="tableIns"
            :data="tableData"
            border
            @sort-change="handleTableSortChange"
        >
            <el-table-column
                v-for="col in tableColOpts"
                :key="col.ColumnKey"
                :column-key="col.ColumnKey"
                :label="col.ColumnName"
                :prop="col.ColumnKey"
                :sortable="col.IsSort===1?'custom':false"
                align="center"
                :width="getColWidth(col.ColumnKey)"
            >
                <template slot="header" slot-scope="scope">
                    <span>{{col.ColumnName}}</span>
                    <el-tooltip 
                        effect="dark" 
                        :content="getTableHeadTips(col.ColumnKey)" 
                        placement="top-start"
                    >
                        <i class="el-icon-info" v-if="tipsKeysArr.includes(col.ColumnKey)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
            <div slot="empty">
                <tableNoData text="暂无数据"/>
            </div>
        </el-table>
        <el-pagination
          layout="total,prev,pager,next,jumper"
          background
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
          style="float: right;margin-top:20px"
        />
        <!-- 自定义列表 -->
        <SetTableCols v-model="showSetTableCols" :ColumnType="3" @change="handleTableColChange"/>
    </div>
</template>

<script>
import {apiDataSource} from '@/api/modules/dataSource'
import SetTableCols from './SetTableCols.vue'
export default {
    components:{SetTableCols},
    data() {
        return {
            tipsKeysArr:['EdbNameSource','ErDataUpdateDate'], 
            tableLoading:false,
            tableColOpts:[],
            tableData:[],
            pageSize:15,
            page:1,
            total:0,
            filterState:{
                sortKey:'',
                sortType:'',
            },

            showSetTableCols:false,
        }
    },
    created() {
        this.getTableColOpts()
    },
    methods: {
        //获取表格数据
        getTableList(){
            this.tableLoading=true
            apiDataSource.GLDelTableList({
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                SortParam:this.filterState.sortKey,
                SortType:this.filterState.sortType,
                CreateTime:''
            }).then(res=>{
                this.tableLoading=false
                if(res.Ret===200){
                    const arr=res.Data.List||[]
                    this.tableData=arr
                    this.total=res.Data.Paging.Totals
                }
            })
        },

        handleCurrentChange(e){
            this.page=e
            this.getTableList()
        },

        // 获取表格列配置项
        getTableColOpts(){
            this.tableColOpts=[]
            this.tableLoading=true
            apiDataSource.GLTableColOpts({ColumnType:3}).then(res=>{
                if(res.Ret===200){
                    const arr=res.Data.List||[]
                    this.tableColOpts=arr.filter(item=>item.IsShow===1)
                    this.$nextTick(()=>{
                        // this.$refs.tableIns.doLayout()
                        this.tableLoading=false
                    })
                    this.getTableList()
                }
            })
        },

        handleTableColChange(){
            this.getTableColOpts()
        },

        handleShowSetTableCol(){
            this.showSetTableCols=true
        },

        // 筛选项刷新列表
        handleRefreshList(){
            this.page=1
            this.getTableList()
        },

        // 排序
        handleTableSortChange({column, prop, order}){
            console.log(column, prop, order);
            this.filterState.sortKey=prop
            this.filterState.sortType=order==='descending'?'desc':order==='ascending'?'asc':''
            this.handleRefreshList()
        },

        // table说明文案
        getTableHeadTips(key){
            const tipsMap={
                EdbNameSource:'指标在数据源的全称',
                ErDataUpdateDate:'指标数据发生变化的最早日期',
            }
            return tipsMap[key]
        },

        // 设置列的宽度
        getColWidth(key){
            const widthMap={
                DataUpdateTime:'150px',
                ErDataUpdateDate:'200px',
                StartDate:'150px',
                LatestDate:'150px',
                CreateTime:'150px'
            }

            return widthMap[key]
        }
    },
}
</script>

<style lang="scss" scoped>
.del-table-wrap{
    .top-wrap{
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;
        .set-icon{
            width: 40px;
            cursor: pointer;
        }
    }
}
</style>