|
@@ -21,7 +21,8 @@
|
|
|
style="width:240px;margin-left:30px;"></el-input>
|
|
|
</div>
|
|
|
<div class="table-box">
|
|
|
- <el-table :data="tableData" border>
|
|
|
+ <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"
|
|
@@ -29,6 +30,9 @@
|
|
|
: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">
|
|
@@ -50,11 +54,14 @@ import { databankInterface } from "@/api/api.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- sourceList:[],
|
|
|
- choosedSource:'web',
|
|
|
- frequencyList:[],
|
|
|
- selectValue:'',
|
|
|
- inputValue:'',
|
|
|
+ sourceList:[],//数据源列表
|
|
|
+ choosedSource:'',//选择的数据源
|
|
|
+
|
|
|
+ frequencyList:[],//频度列表
|
|
|
+ selectValue:'',//选择的频度
|
|
|
+
|
|
|
+ inputValue:'',//搜索框
|
|
|
+
|
|
|
tableColumnList:[
|
|
|
{
|
|
|
key:'Code',
|
|
@@ -89,13 +96,22 @@ export default {
|
|
|
sortable:true
|
|
|
}
|
|
|
],
|
|
|
- tableData:[],
|
|
|
+ tableData:[],//表格数据
|
|
|
pageNo:1,
|
|
|
- pageSize:10,
|
|
|
+ pageSize:15,
|
|
|
total:0,
|
|
|
-
|
|
|
+ SortField:0,
|
|
|
+ SortRule:0,
|
|
|
+ tableLoading:false,
|
|
|
};
|
|
|
},
|
|
|
+ watch:{
|
|
|
+ choosedSource(newVal){
|
|
|
+ if(newVal){
|
|
|
+ this.handleCurrentChange(1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
getFrequencyList(){
|
|
|
databankInterface.getFrequencyList().then(res=>{
|
|
@@ -103,40 +119,54 @@ export default {
|
|
|
this.frequencyList = res.Data||[]
|
|
|
})
|
|
|
},
|
|
|
- async getSourceList(){
|
|
|
- await databankInterface.getSourceList().then(res=>{
|
|
|
+ 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
|
|
|
+ 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()
|
|
|
},
|
|
|
- async pageInit(){
|
|
|
- await this.getSourceList()
|
|
|
- this.getFrequencyList()
|
|
|
- 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.pageInit()
|
|
|
+ this.getSourceList()
|
|
|
+ this.getFrequencyList()
|
|
|
}
|
|
|
};
|
|
|
</script>
|