<template>
|
<div class="trial">
|
<el-dialog :visible.sync="trialVisible" center :modal-append-to-body="false" :close-on-click-modal='false' @close="closeDialog">
|
<el-button type="primary" icon="el-icon-download" size="small" @click="exportExcel" v-no-more-click>导出Excel</el-button>
|
<el-table
|
stripe
|
id="trialData"
|
:max-height='528'
|
:data="trialData"
|
:header-cell-style="{background:'#f5f5f5',color:'#222222'}"
|
highlight-current-row
|
v-loading="loading"
|
>
|
<el-table-column prop="periodno" label="期次" width="50"></el-table-column>
|
<el-table-column prop="pstype" width="150" label="还款计划类型"></el-table-column>
|
<el-table-column prop="paydate" width="120" label="应还日期"></el-table-column>
|
<el-table-column prop="payprincipalamt" width="120" label="应还本金"></el-table-column>
|
<el-table-column prop="waiveprincipalamt" width="120" label="调整本金"></el-table-column>
|
<el-table-column prop="payinterestamt" width="120" label="应还利息"></el-table-column>
|
<el-table-column prop="waiveinterestamt" width="120" label="调整利息"></el-table-column>
|
<el-table-column prop="payinterestamtfee" width="120" label="应还费用"></el-table-column>
|
<el-table-column prop="waivefee" width="120" label="调整费用"></el-table-column>
|
</el-table>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="closeDialog">关闭</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {
|
trialRepaymentPlan,
|
} from '@/api/product'
|
import { setStorage,getStorage } from '@/utils/storage'
|
import FileSaver from "file-saver";
|
import XLSX from "xlsx";
|
export default {
|
props:['visible'],
|
data () {
|
return {
|
trialData:[],
|
loading:false,
|
}
|
},
|
computed: {
|
trialVisible:{
|
get(){
|
return this.visible
|
},
|
set(){}
|
}
|
},
|
created () {
|
this.trialRepaymentPlan()
|
},
|
methods: {
|
// 试算
|
trialRepaymentPlan(){
|
this.loading = true
|
trialRepaymentPlan({
|
serialno:this.$store.state.product.applyInfo.serialNo
|
}).then(res=>{
|
this.loading = false
|
if(res.code=='00'){
|
this.trialData = res.result.paymentScheduleRspList
|
this.trialData.forEach(row => {
|
for (const key in row) {
|
if(
|
key == 'payprincipalamt' ||
|
key == 'waiveprincipalamt' ||
|
key == 'payinterestamt' ||
|
key == 'waiveinterestamt' ||
|
key == 'payinterestamtfee' ||
|
key == 'waivefee'
|
){
|
row[key] = this.formatMoney(row[key])
|
}
|
}
|
});
|
}
|
})
|
},
|
closeDialog(){
|
this.$emit('closeTrial',false)
|
},
|
//设置excel行高列宽
|
auto_width (ws, data) {
|
/*set worksheet max width per col*/
|
const colWidth = data.map(row =>
|
row.map(val => {
|
/*if null/undefined*/
|
return {
|
wch: 15
|
};
|
})
|
);
|
/*start in the first row*/
|
let resultc = colWidth[0];
|
for (let i = 1; i < colWidth.length; i++) {
|
for (let j = 0; j < colWidth[i].length; j++) {
|
if (resultc[j]["wch"] < colWidth[i][j]["wch"]) {
|
resultc[j]["wch"] = colWidth[i][j]["wch"];
|
}
|
}
|
}
|
ws["!cols"] = resultc;
|
const rowHeight = data.map(row => {
|
return {
|
hpt: 15
|
};
|
});
|
ws["!rows"] = rowHeight;
|
},
|
formatJson (filterVal, jsonData) {
|
return jsonData.map(v => filterVal.map(j => v[j]))
|
},
|
exportExcel() {
|
const xlsxParam = { raw: true };//转换成excel时，使用原始的格式
|
const wb = XLSX.utils.table_to_book(document.querySelector('#trialData'),xlsxParam);
|
const filterVal = ['periodno', 'pstype','paydate', 'payprincipalamt','waiveprincipalamt','payinterestamt','waiveinterestamt','payinterestamtfee','waivefee'];
|
const data = this.formatJson(filterVal, this.trialData);
|
this.auto_width(wb.Sheets.Sheet1, data);
|
const wbout = XLSX.write(wb, {
|
bookType: "xlsx",
|
bookSST: true,
|
type: "array"
|
});
|
try {
|
FileSaver.saveAs(
|
new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
|
`${this.$store.state.product.applyInfo.customerName + '-' + this.$store.state.product.applyInfo.productName + '-' + this.$store.state.product.applyInfo.serialNo}.xlsx`
|
);
|
} catch (e) {
|
if (typeof console !== "undefined") console.log(e, wbout);
|
}
|
return wbout;
|
},
|
// 金额格式化
|
formatMoney(value) {
|
if (value||value === 0) {
|
value =
|
parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";
|
if (value == "NaN") return;
|
let l = value
|
.split(".")[0]
|
.split("")
|
.reverse();
|
let r = value.split(".")[1];
|
let t = "";
|
for (let i = 0; i < l.length; i++) {
|
t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? "," : "");
|
}
|
return (
|
t
|
.split("")
|
.reverse()
|
.join("") +
|
"." +
|
r
|
);
|
}
|
},
|
}
|
}
|
</script>
|
<style lang="stylus" scoped>
|
.trial
|
&>>>.el-dialog
|
width auto
|
max-width calc(100% - 180px)
|
min-width 850px
|
max-height 100%
|
overflow hidden
|
margin 0 !important
|
position absolute
|
left 50%
|
top 50%
|
transform translate(-50%,-50%)
|
.el-dialog__body
|
padding 20px
|
#trialData
|
margin-top 20px
|
.el-dialog__header
|
padding 0
|
.el-dialog__footer
|
padding 0 0 20px
|
.el-button
|
width: 120px
|
font-size: 14px
|
line-height: 20px
|
padding: 5px 0
|
</style>
|
