eta_front/src/views/dataEntry_manage/thirdBase/DatabankBase.vue

<template>
    <!-- 数据宝页面 -->
    <div class="data-bank-base-wrap">
        <div class="select-box">
            <el-radio-group v-model="choosedSource" size="medium" @input="handleCurrentChange(1)">
                <el-radio-button v-for="source in sourceList" 
                    :key="source.EdbSourceId" 
                    :label="source.EdbSourceId">{{source.SourceName}}</el-radio-button>
            </el-radio-group>
            <el-select v-model="selectValue" @change="handleCurrentChange(1)"
                placeholder="请选择频度"
                clearable
                style="width:240px;margin-left: auto;">
                <el-option v-for="item in frequencyList" 
                    :key="item" :value="item" :label="item" />
            </el-select>
            <el-input v-model="inputValue" @input="handleCurrentChange(1)"
            placeholder="指标ID/指标名称"
            clearable
            prefix-icon="el-icon-search"
            style="width:240px;margin-left:30px;"></el-input>
        </div>
        <div class="table-box">
            <el-table :data="tableData" border  @sort-change="sortChange" 
                v-loading="tableLoading" element-loading-text="数据加载中...">
                <el-table-column v-for="column in tableColumnList" 
                    align="center"
                    :key="column.key"
                    :label="column.label"
                    :prop="column.key"
                    :min-width="column.minWidth"
                    :sortable="column.sortable"></el-table-column>
                <div class="empty-box" slot="empty">
                    <tableNoData text="暂无数据"/>
                </div>
            </el-table>
        </div>
        <div class="page-box">
          <el-pagination
                layout="total,prev,pager,next,jumper"
                background
                :current-page="pageNo"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total"
            >
          </el-pagination>
        </div>
    </div>
</template>

<script>
import { databankInterface } from "@/api/api.js";
export default {
    data() {
        return {
            sourceList:[],//数据源列表
            choosedSource:'',//选择的数据源

            frequencyList:[],//频度列表
            selectValue:'',//选择的频度

            inputValue:'',//搜索框

            tableColumnList:[
                {
                    key:'Code',
                    label:'指标ID'
                },
                {
                    key:'Name',
                    label:'指标名称',
                    minWidth:200,
                },
                {
                    key:'Frequency',
                    label:'频度'
                },
                {
                    key:'Unit',
                    label:'单位'
                },
                {
                    key:'DateFirst',
                    label:'指标开始时间',
                    sortable:true,
                },
                {
                    key:'DateLast',
                    label:'指标最新时间',
                    sortable:true
                },
                {
                    key:'TimeLastUpdate',
                    label:'更新时间',
                    sortable:true
                }
            ],
            tableData:[],//表格数据
            pageNo:1,
            pageSize:15,
            total:0,
            SortField:0,
            SortRule:0,
            tableLoading:false,
        };
    },
    watch:{
        choosedSource(newVal){
            if(newVal){
                this.handleCurrentChange(1)
            }
        }
    },
    methods: {
        getFrequencyList(){
            databankInterface.getFrequencyList().then(res=>{
                if(res.Ret!==200) return 
                this.frequencyList = res.Data||[]
            })
        },
        getSourceList(){
            databankInterface.getSourceList().then(res=>{
                if(res.Ret!==200) return
                this.sourceList = res.Data||[]
                this.choosedSource = this.sourceList[0].EdbSourceId
            })
        },
        getTableData(){
            this.tableLoading=true
            databankInterface.getDataList({
                Source:Number(this.choosedSource),
                CurrentIndex:this.pageNo,
                PageSize:this.pageSize,
                Frequency:this.selectValue,
                Keyword:this.inputValue,
                SortField:this.SortField,
                SortRule:this.SortRule
            }).then(res=>{
                if(res.Ret!==200) return 
                if(!res.Data) return 
                this.tableData = res.Data.List
                this.total = res.Data.Paging.Totals
                this.tableLoading=false
            })
        },
        handleCurrentChange(page){
            this.pageNo = page
            this.getTableData()
        },
        sortChange({prop,order}){
            const propMap = {
                'DateFirst':1,
                'DateLast':2,
                'TimeLastUpdate':3
            }
            const orderMap = {
                'ascending':1,
                'descending':2
            }
            this.SortRule = orderMap[order]||0
            this.SortField = propMap[prop]||0
            this.handleCurrentChange(1)
        }

    },
    mounted(){
        this.getSourceList()
        this.getFrequencyList()
    }
};
</script>

<style scoped lang="scss">
.data-bank-base-wrap{
    box-sizing: border-box;
    background-color: #fff;
    padding:20px 30px;
    border-radius: 4px;
    .select-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .table-box{
        margin:30px 0;
    }
    .page-box{
        text-align: right;
    }
}
</style>