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

<template>
    <div class="edbinfo-table-wrap">
        <div class="top-wrap">
            <div class="filter-box">
                <el-select
                    v-model="filterState.changeType"
                    placeholder="请选择变更类型"
                    clearable
                    style="width:250px"
                    @change="handleRefreshList"
                >
                    <el-option
                        v-for="item in changeTypeOpt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select> 
            </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"
          @size-change="handleSizeChange"
          :total="total"
          style="float: right;margin-top:20px"
        />
        <!-- 自定义列表 -->
        <SetTableCols v-model="showSetTableCols" :ColumnType="4" @change="handleTableColChange"/>
    </div>
</template>

<script>
import {apiDataSource} from '@/api/modules/dataSource'
import SetTableCols from './SetTableCols.vue'
export default {
    components:{SetTableCols},
    data() {
        return {
            tipsKeysArr:['EdbNameSource','EdbName','ErDataUpdateDate'],
            tableLoading:false,
            tableColOpts:[],
            tableData:[],
            pageSize:15,
            page:1,
            total:0,
            tableLoading:false,
            filterState:{
                dateVal:this.$moment().format('YYYY-MM-DD')||'',
                sortKey:'',
                sortType:'',
                changeType:''
            },
            changeTypeOpt:[
                {
                    label:'基础信息变更',
                    value:1
                },
                {
                    label:'数据明细变更',
                    value:0
                },
                {
                    label:'新增指标',
                    value:2
                }
            ],

            showSetTableCols:false,
        }
    },
    created() {
        this.getTableColOpts()
    },
    methods: {
        //获取表格数据
        getTableList(){
            this.tableLoading=true
            apiDataSource.GLEdbInfoTableList({
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                SortParam:this.filterState.sortKey,
                SortType:this.filterState.sortType,
                CreateTime:this.filterState.dateVal,
                UpdateType:this.filterState.changeType===''?-1:this.filterState.changeType
            }).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()
        },

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

        // 获取表格列配置项
        getTableColOpts(){
            this.tableColOpts=[]
            this.tableLoading=true
            apiDataSource.GLTableColOpts({ColumnType:4}).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
        },

        // 排序
        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:'指标在数据源的全称',
                EdbName:'指标在ETA指标库保存的指标名称',
                ErDataUpdateDate:'指标数据发生变化的最早日期',
            }
            return tipsMap[key]
        },

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

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

<style lang="scss" scoped>
.edbinfo-table-wrap{
    .top-wrap{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 30px;
        .filter-box{
            margin-right: 100px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 20px;
        }
        .right-opt-box{
            display: flex;
            align-items: center;
            gap: 20px;
            .set-icon{
                width: 40px;
                cursor: pointer;
            }
        }
    }
}
</style>