1.template
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="已开户的存款" name="first">
<div class="timeChoose">
<span class="dateCheck">按开户日期查询</span>
<el-date-picker
v-model="startTime_first"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions0"
></el-date-picker>
<el-date-picker
v-model="endTime_first"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions1"
></el-date-picker>
<a class="buy_btn_advance confirm_btn" @click="queryOp_1()">查询</a>
<a class="buy_btn_advance confirm_btn" @click="Inqueryreset1()">重置</a>
</div>
<div>
<table id="tabOne">
<tr>
<td>序号</td>
<td>产品名称</td>
<td>账户余额(元)</td>
<td>年化利率</td>
<td>存期</td>
<td>借记卡子账户</td>
<td>开户日期</td>
<td>到期日期</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in tableData " ref="oneTableData">
<!-- <td>SALE_NO</td> -->
<td>{{index+1}}</td>
<td>{{item.prdName}}</td>
<td>{{item.accRemaining|formatMoney}}</td>
<td>{{item.annualInsrate|replaceClose}}</td>
<td>{{item.depositTerm|stringformat}}</td>
<td>{{item.subAccount}}</td>
<td>{{item.accOpenDate|fmtdt}}</td>
<td>{{item.expireDate|fmtdt}}</td>
<td>
<a
class="buy_advanceAdd btn_reset"
@click="formerAbstract(item)"
>查看详情</a>
<a v-if="item.ifExtractPart==1" class="buy_advanceAdd btn_reset" @click="affirmAbstract(item)">部分提取</a>
<a class="buy_advanceAdd btn_reset" @click="cancelAccount(item)">销户</a>
</td>
</tr>
</table>
</div>
</el-tab-pane>
<el-tab-pane label="已销户的存款" name="second">
<div class="timeChoose">
<span class="dateCheck">按销户日期查询</span>
<el-date-picker
v-model="startTime_second"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions0"
></el-date-picker>
<el-date-picker
v-model="endTime_second"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions1"
></el-date-picker>
<a class="buy_btn_advance confirm_btn" @click="queryOp_2()">查询</a>
<a class="buy_btn_advance confirm_btn" @click="Inqueryreset_2()">重置</a>
</div>
<div>
<table id="tabTwo">
<tr>
<td>序号</td>
<td>产品名称</td>
<td>认购金额(元)</td>
<td>年化利率</td>
<td>存期</td>
<td>借记卡子账户</td>
<td>开户日期</td>
<td>到期日期</td>
<td>销户日期</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in tableData_2 " ref="thirdTableData">
<!-- <td>SALE_NO</td> -->
<td>{{index+1}}</td>
<td>{{item.prdName}}</td>
<td>{{item.subMoney|formatMoney}}</td>
<td>{{item.annualInsrate|replaceClose}}</td>
<td>{{item.depositTerm|stringformat}}</td>
<td>{{item.subAccount}}</td>
<td>{{item.accOpenDate|fmtdt}}</td>
<td>{{item.expireDate|fmtdt}}</td>
<td>{{item.accCloseDate|fmtdt}}</td>
<td>
<a
class="buy_advanceAdd btn_reset"
@click="formerAbstract(item)"
>查看详情</a>
</td>
</tr>
</table>
</div>
</el-tab-pane>
<el-tab-pane label="交易明细" name="third">
<div class="timeChoose">
<span class="dateCheck">按开户日期查询</span>
<el-date-picker
v-model="startTime_third"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions00"
></el-date-picker>
<el-date-picker
v-model="endTime_third"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions11"
></el-date-picker>
<a class="buy_btn_advance confirm_btn" @click="queryOp_3()">查询</a>
<a class="buy_btn_advance confirm_btn" @click="Inqueryreset_3()">重置</a>
</div>
<div>
<table id="tabThird">
<tr>
<td>序号</td>
<td>交易时间</td>
<td>交易金额 (元)</td>
<td>交易名称</td>
<td>产品名称</td>
<td>产品代码</td>
<td>交易流水号</td>
<td>交易状态</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in tableData_3" ref="twoTableData">
<!-- <td>SALE_NO</td> -->
<td>{{index+1}}</td>
<td>{{item.dealDate|fmtdt1}}</td>
<td>{{item.dealMoney|formatMoney}}</td>
<td>{{item.dealName}}</td>
<td>{{item.prdName}}</td>
<td>{{item.prdCode}}</td>
<td>{{item.dealSerialnum}}</td>
<td>{{item.dealStatus}}</td>
<td>
<a
class="buy_advanceAdd btn_reset"
@click="checkAbstract(item)"
>查看详情</a>
</td>
</tr>
</table>
</div>
</el-tab-pane>
</el-tabs>2.script
watch:{
activeName(){
if(this.activeName=='first'){
this.pageNo=1
this.getTableData();
}
else if(this.activeName=='second'){
this.pageNo=1
this.getTableData_2();
}else{
this.pageNo=1
this.getTableData_3();
}
}
},
methods:{
getTableData() {
let parames = {
functionName: "espDepositeServiceOuter",
methodName: "getEspHold",
pageNo: this.pageNo,
pageSize: this.pageSize,
data: {
cis: this.$store.state.flowData.custInfo.cis, //用户id
// "orgnCode":"801030", //网点代码
startTime: this.timeRecord1.start, //开始时间
endTime: this.timeRecord1.end, //结束时间
holdType:'1'
}
};
console.log("查询参数：",parames);
this.$axios({
method: "post",
url: "/CallMethod",
data: JSON.stringify(parames),
headers: {
accept: "application/json",
"Content-Type": "application/json;charset=UTF-8"
}
})
.then(res => {
console.log("签约信息查询结果======", res.data);
if (res.data.errorCode == "ERRORCODE0000") {
this.pages = Math.ceil(
res.data.sumCount / this.pageSize
);
this.tableData = res.data.data.Record;
this.$store.commit("addEspList", res.data.data.Record);
console.log(res.data.data.Record);
} else {
console.log(res.data.errorMsg);
}
})
.catch(error => {
// this.isErroyWarn = true;
console.log(error);
});
},
},
mounted() {
if(!this.$route.query.activeName){
this.pageNo=1;
this.getTableData();
}
if(this.$route.query.activeName=='first'){
this.activeName=this.$route.query.activeName;
setTimeout(() => {
this.pageNo=this.$route.query.pageNo;
this.getTableData();
}, 1);
}
if(this.$route.query.activeName=='second'){
this.activeName=this.$route.query.activeName;
setTimeout(() => {
this.pageNo=this.$route.query.pageNo;
this.getTableData_2();
}, 1);
}
if(this.$route.query.activeName=='third'){
this.activeName=this.$route.query.activeName;
setTimeout(() => {
this.pageNo=this.$route.query.pageNo;
this.getTableData_3();
}, 1);
}
}
版权声明：本文为weixin_43837268原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。