Skip to content

I
isc-web-vue
Commit 7c9ac51c by huangshunlin
Options

牌价分页 设置默认pagesize和pagenum

parent c7440a4b
Showing with 123 additions and 113 deletions
src/page/Home/components/ForeignExchangeRates.vue
<template> <template>
<div style="height: 40%"> <div style="height: 40%">
<CardWrapper title="外汇牌价" :isShowRefresh="true" v-on="$listeners" v-bind="$attrs" @refresh="refresh" > <CardWrapper
<div class="content"> title="外汇牌价"
<div class="rates-top"> :isShowRefresh="true"
<div class="rates-items"> v-on="$listeners"
<div class="rates-items-title">汇总种类：</div> v-bind="$attrs"
<div class="rates-items-description">即期牌价</div> @refresh="refresh"
</div> >
<div class="rates-items"> <div class="content">
<div class="rates-items-title">货币名称：</div> <div class="rates-top">
<div class="rates-items-description">CNY-人民币</div> <div class="rates-items">
</div> <div class="rates-items-title">汇总种类：</div>
<div class="rates-items"> <div class="rates-items-description">即期牌价</div>
<div class="rates-items-title">牌价时间：</div> </div>
<div class="rates-items-description">{{today}}</div> <div class="rates-items">
</div> <div class="rates-items-title">货币名称：</div>
<!-- <div class="rates-items"> <div class="rates-items-description">CNY-人民币</div>
</div>
<div class="rates-items">
<div class="rates-items-title">牌价时间：</div>
<div class="rates-items-description">{{ today }}</div>
</div>
<!-- <div class="rates-items">
<div class="rates-items-title">生效日期：</div> <div class="rates-items-title">生效日期：</div>
<div class="rates-items-description">{{today}}</div> <div class="rates-items-description">{{today}}</div>
</div> --> </div> -->
</div> </div>
<el-table :data="xrtData" style="width: 100%" stripe :highlight-current-row="true" height="calc(100% - 30px)"> <el-table
<el-table-column prop="curnam" label="货币名称"> :data="xrtData"
</el-table-column> style="width: 100%"
<el-table-column prop="midrat" label="中间价"> stripe
</el-table-column> :highlight-current-row="true"
<el-table-column prop="buyrat" label="现汇买入价"> height="calc(100% - 30px)"
</el-table-column> >
<el-table-column prop="selrat" label="现汇卖出价"> <el-table-column prop="curnam" label="货币名称"> </el-table-column>
</el-table-column> <el-table-column prop="midrat" label="中间价"> </el-table-column>
<!-- <el-table-column prop="buy1rat" label="现钞买入价"> <el-table-column prop="buyrat" label="现汇买入价"> </el-table-column>
<el-table-column prop="selrat" label="现汇卖出价"> </el-table-column>
<!-- <el-table-column prop="buy1rat" label="现钞买入价">
</el-table-column> </el-table-column>
<el-table-column prop="sel1rat" label="现钞卖出价"> <el-table-column prop="sel1rat" label="现钞卖出价">
</el-table-column> --> </el-table-column> -->
</el-table> </el-table>
<!--<c-paging-table <!--<c-paging-table
:data="xrtData" :data="xrtData"
:columns="xrtColumns" :columns="xrtColumns"
:highlight-current-row="true" :highlight-current-row="true"
...@@ -45,14 +53,14 @@ ...@@ -45,14 +53,14 @@
:border="true" :border="true"
> >
</c-paging-table>--> </c-paging-table>-->
</div> </div>
</CardWrapper> </CardWrapper>
</div> </div>
</template> </template>
<script> <script>
import CardWrapper from "./CardWrapper"; import CardWrapper from "./CardWrapper";
import {queryFXRateList} from "~/service/manage/xrt.js"; import { queryFXRateList } from "~/service/manage/xrt.js";
import moment from "moment"; import moment from "moment";
export default { export default {
...@@ -60,126 +68,128 @@ export default { ...@@ -60,126 +68,128 @@ export default {
components: { CardWrapper }, components: { CardWrapper },
data() { data() {
return { return {
today:'', today: "",
xrtData: [], xrtData: [],
xrtColumns: [ xrtColumns: [
{ label: '货币名称', prop: 'curnam', width: 'auto' }, { label: "货币名称", prop: "curnam", width: "auto" },
{ label: '中间价', prop: 'midrat', width: 'auto' }, { label: "中间价", prop: "midrat", width: "auto" },
{ label: '现汇买入价', prop: 'buyrat', width: 'auto' }, { label: "现汇买入价", prop: "buyrat", width: "auto" },
{ label: '现汇卖出价', prop: 'selrat', width: 'auto' }, { label: "现汇卖出价", prop: "selrat", width: "auto" },
{ label: '现钞卖出价', prop: 'sel1rat', width: 'auto' }, { label: "现钞卖出价", prop: "sel1rat", width: "auto" },
{ label: '现钞买入价', prop: 'buy1rat', width: 'auto' }, { label: "现钞买入价", prop: "buy1rat", width: "auto" },
], ],
xrtmodel: { xrtmodel: {
cur:"", cur: "",
curnam:"", curnam: "",
begdat:"", begdat: "",
enddat:"", enddat: "",
buyrat:0, buyrat: 0,
selrat:0, selrat: 0,
sel1rat:0, sel1rat: 0,
buy1rat:0, buy1rat: 0,
pageNum: 0, pageNum: 0,
pageSize: 0, pageSize: 0,
total: 0 total: 0,
}, },
}; };
}, },
mounted(){ mounted() {
this.today = moment(new Date()).format("YYYY.MM.DD HH:mm") this.today = moment(new Date()).format("YYYY.MM.DD HH:mm");
}, },
created() { created() {
this.xrtmodel.begdat = this.getNowDate(); this.xrtmodel.begdat = this.getNowDate();
this.xrtmodel.enddat = "2999-12-31"; this.xrtmodel.enddat = "2999-12-31";
this.xrtmodel.pageNum = 1;
this.xrtmodel.pageSize = 10;
this.onInfXrtSearch(); this.onInfXrtSearch();
}, },
methods: { methods: {
getNowDate() { getNowDate() {
const timeOne = new Date() const timeOne = new Date();
const year = timeOne.getFullYear() const year = timeOne.getFullYear();
let month = timeOne.getMonth() + 1 let month = timeOne.getMonth() + 1;
let day = timeOne.getDate() let day = timeOne.getDate();
month = month < 10 ? '0' + month : month month = month < 10 ? "0" + month : month;
day = day < 10 ? '0' + day : day day = day < 10 ? "0" + day : day;
const NOW_MONTHS_AGO = `${year}-${month}-${day}` const NOW_MONTHS_AGO = `${year}-${month}-${day}`;
return NOW_MONTHS_AGO return NOW_MONTHS_AGO;
}, },
onInfXrtSearch() { onInfXrtSearch() {
queryFXRateList(this.xrtmodel).then(res => { queryFXRateList(this.xrtmodel).then((res) => {
if(res.respCode == SUCCESS) { if (res.respCode == SUCCESS) {
const list = res.data.list const list = res.data.list;
this.xrtData = list this.xrtData = list;
this.xrtmodel.pageNum = res.data.pageNumber this.xrtmodel.pageNum = res.data.pageNumber;
this.xrtmodel.pageSize = res.data.pageSize this.xrtmodel.pageSize = res.data.pageSize;
this.xrtmodel.total = res.data.total this.xrtmodel.total = res.data.total;
} }
}) });
}, },
queryFunc(pageNumber, pageSize) { queryFunc(pageNumber, pageSize) {
this.xrtmodel.pageNum = pageNumber this.xrtmodel.pageNum = pageNumber;
this.xrtmodel.pageSize = pageSize this.xrtmodel.pageSize = pageSize;
this.onInfXrtSearch() this.onInfXrtSearch();
}, },
refresh(){ refresh() {
this.today = moment(new Date()).format("YYYY.MM.DD HH:mm") this.today = moment(new Date()).format("YYYY.MM.DD HH:mm");
this.xrtmodel.begdat = this.getNowDate(); this.xrtmodel.begdat = this.getNowDate();
this.xrtmodel.enddat = "2299-12-31"; this.xrtmodel.enddat = "2299-12-31";
this.onInfXrtSearch(); this.onInfXrtSearch();
} },
} },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.content { .content {
width: 100%; width: 100%;
padding: 12px 0; padding: 12px 0;
height: 100%; height: 100%;
} }
.rates-top { .rates-top {
position: absolute; position: absolute;
top:38px; top: 38px;
// right:0; // right:0;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
background: #fff; background: #fff;
display: flex; display: flex;
line-height: 36px; line-height: 36px;
justify-content: flex-start; justify-content: flex-start;
font-size: 14px; font-size: 14px;
// padding: 0 20px; // padding: 0 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.rates-items { .rates-items {
// width: 30%; // width: 30%;
display:flex; display: flex;
// flex-direction: column; // flex-direction: column;
// padding: 0 0 15px; // padding: 0 0 15px;
} }
.rates-items .rates-items-title { .rates-items .rates-items-title {
// width: 100%; // width: 100%;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
display: inline; display: inline;
color:var(--text-secondary-color) color: var(--text-secondary-color);
} }
.rates-items .rates-items-description { .rates-items .rates-items-description {
// width: 100%; // width: 100%;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding-right: 10px; padding-right: 10px;
color:var(--text-color-1) color: var(--text-color-1);
} }
.content /deep/ .el-table{ .content /deep/ .el-table {
margin-top:30px; margin-top: 30px;
} }
.content /deep/ .el-table::before { .content /deep/ .el-table::before {
height: 0px; height: 0px;
} }
.content /deep/ .el-table th { .content /deep/ .el-table th {
color: var(--warning-text-color); color: var(--warning-text-color);
background: #fcf6ec; background: #fcf6ec;
line-height: 22px; line-height: 22px;
} }
.content /deep/ .el-table tr { .content /deep/ .el-table tr {
background: #f9f9f9; background: #f9f9f9;
...@@ -204,7 +214,7 @@ export default { ...@@ -204,7 +214,7 @@ export default {
padding: 7px 0; padding: 7px 0;
} }
.content /deep/ .el-table .cell { .content /deep/ .el-table .cell {
height: 21px; height: 21px;
line-height: 21px; line-height: 21px;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment