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

<template>
    <div class="detail-table-wrap">
        <div class="top-wrap">
        <div class="filter-box">
            <el-select
                v-model="filterState.terminalCode"
                placeholder="终端编码"
                multiple
                clearable
                collapse-tags
                style="width:250px"
                @change="handleRefreshList"
            >
                <el-option
                    v-for="item in terminalCodeOpts"
                    :key="item.TerminalCode"
                    :label="item.Name"
                    :value="item.TerminalCode"
                />
            </el-select> 
            <el-cascader
                v-model="filterState.user"
                placeholder="创建人"
                :options="sysUserOpts"
                :props="props"
                collapse-tags
                :show-all-levels="false"
                clearable
                @change="handleRefreshList"
                filterable
                style="width:250px"
            />
            <el-select
                v-model="filterState.frequency"
                placeholder="频度"
                multiple
                clearable
                collapse-tags
                style="width:250px"
                @change="handleRefreshList"
            >
                <el-option
                    v-for="item in frequencyOpt"
                    :key="item"
                    :label="item"
                    :value="item"
                />
            </el-select>
            <el-input
                placeholder="指标ID/指标名称"
                prefix-icon="el-icon-search"
                v-model="filterState.keyword"
                clearable
                style="width:250px"
                @input="handleRefreshList"
            />
        </div>
        <img src="~@/assets/img/data_m/set_icon.png" alt="" style="cursor: pointer;" @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>
                <template slot-scope="scope">
                    <span v-if="col.ColumnKey==='IsAdd'">{{scope.row.IsAdd===1?'是':'否'}}</span>
                    <span v-else-if="col.ColumnKey==='NeedRefresh'">{{scope.row.NeedRefresh===1?'是':'否'}}</span>
                    <span v-else-if="col.ColumnKey==='HasRefresh'">{{scope.row.HasRefresh===1?'是':'否'}}</span>
                    <span v-else-if="col.ColumnKey==='DataUpdateResult'">{{scope.row.DataUpdateResult===1?'是':'否'}}</span>
                    
                    <span v-else>{{scope.row[col.ColumnKey]}}</span>
                </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="1" @change="handleTableColChange"/>
    </div>
</template>

<script>
import {apiDataSource} from '@/api/modules/dataSource'
import {frequencyOpt} from '../utils/config'
import SetTableCols from './SetTableCols.vue'
import { departInterence } from "@/api/api.js";
export default {
    components:{SetTableCols},
    data() {
        return {
            tipsKeysArr:['EdbNameSource','DataUpdateTime','ErDataUpdateDate','NeedRefresh','HasRefresh','UpdateTime'],
            frequencyOpt,
            terminalCodeOpts:[],
            sysUserOpts:[],
            props: {
                value: "AdminId",
                label: "RealName",
                children: "ChildrenList",
                multiple: true,
                emitPath:false
            },
            filterState:{
                frequency:'',
                keyword:'',
                sortKey:'',
                sortType:'',
                terminalCode:'',
                user:[],
                dateVal:this.$moment().format('YYYY-MM-DD')||''
            },
            checkAll:false,
            tableColOpts:[],
            tableData:[],
            pageSize:10,
            page:1,
            total:0,
            tableLoading:false,

            showSetTableCols:false,

        }
    },
    created() {
        this.getTableColOpts()
        this.getTerminalCodeOpts()
        this.getSysUserList()
    },
    methods: {
        //获取表格数据
        getTableList(){
            this.tableLoading=true
            apiDataSource.GLDetailTableList({
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                SortParam:this.filterState.sortKey,
                SortType:this.filterState.sortType,
                CreateTime:this.filterState.dateVal,
                TerminalCode:this.filterState.terminalCode?this.filterState.terminalCode.join(','):'',
                SysUserId:this.filterState.user?this.filterState.user.join(','):'',
                Frequency:this.filterState.frequency?this.filterState.frequency.join(','):'',
                KeyWord:this.filterState.keyword
            }).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.tableLoading=true
            this.tableColOpts=[]
            apiDataSource.GLTableColOpts({ColumnType:1}).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()
        },

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

        // 获取终端编码数据
        getTerminalCodeOpts(){
            apiDataSource.terminalCodeArr().then(res=>{
                if(res.Ret===200){
                    this.terminalCodeOpts=res.Data.List||[]
                }
            })
        },

        // 获取所有系统用户
        async getSysUserList() {
            const res = await departInterence.getQuestionAdminList();
            if (res.Ret === 200) {
                this.sysUserOpts = res.Data.List||[];
            }
        },

        handleShowSetTableCol(){
            this.showSetTableCols=true
        },

        // table说明文案
        getTableHeadTips(key){
            const tipsMap={
                EdbNameSource:'指标在数据源的全称',
                DataUpdateTime:'指标最近一次数据发生变化的时间',
                ErDataUpdateDate:'指标数据发生变化的最早日期',
                NeedRefresh:'该指标今日是否设置了定时刷新任务',
                HasRefresh:'该指标是否发起了刷新任务',
                UpdateTime:'指标最近一次执行刷新任务的时间'
            }
            return tipsMap[key]
        },

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

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

<style lang="scss">
.detail-table-wrap{
    .top-wrap{
        .el-cascader__search-input{
            min-width: 30px;
        }
    }
}

</style>
<style lang="scss" scoped>
.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>