<template>
|
<div class="voucherInfo">
|
<header>
|
<p>
|
<span></span>
|
凭证信息
|
</p>
|
<!-- 凭证校验只有案场才有 -->
|
<p v-if="applyInfo.flowno == 'CreditFlowCase'">
|
<el-button plain v-if="applyInfo.phaseNo=='0110'" @click="checkVoucher">凭证校验</el-button>
|
</p>
|
</header>
|
<el-button type="primary" v-if="writeAble" icon="el-icon-circle-plus-outline" @click="addvoucher" size="medium">新增凭证</el-button>
|
<el-table
|
stripe
|
:data="voucherData"
|
style="margin-top:30px"
|
:header-cell-class-name="headerCellClass"
|
:cell-style="cell"
|
:cell-class-name="cellClass"
|
highlight-current-row
|
>
|
<el-table-column min-width="180">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">凭证类型</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.documentTypeDesc}}</span>
|
<el-select style="padding-left:15px" v-model="row.documentType" filterable placeholder="请选择" size="small" v-show="row.isEdit">
|
<el-option
|
v-for="item in documentTypeList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="180">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">凭证金额</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.certificateAmount}}</span>
|
<el-input style="padding-left:15px" size="small" v-show="row.isEdit" v-model="row.certificateAmount" placeholder="请输入" @blur="row.certificateAmount=formatMoney(row.certificateAmount)"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="180">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">凭证日期</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.voucherDate}}</span>
|
<div style="padding-left:15px">
|
<el-date-picker
|
v-model="row.voucherDate"
|
type="date"
|
v-show="row.isEdit"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="180">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">凭证用途</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.certificateUseDesc}}</span>
|
<el-select v-model="row.certificateUse" style="padding-left:15px" filterable placeholder="请选择" size="small" v-show="row.isEdit">
|
<el-option
|
v-for="item in certificateUseList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="180">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">是否属于首期款凭证</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.firstParagraphDesc}}</span>
|
<el-select style="padding-left:15px" v-model="row.firstParagraph" filterable placeholder="请选择" size="small" v-show="row.isEdit">
|
<el-option
|
v-for="item in firstParagraphList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="180">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">凭证序列号</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.certificateSerialNumber}}</span>
|
<el-input style="padding-left:15px" size="small" v-show="row.isEdit" v-model="row.certificateSerialNumber" placeholder="请输入" require></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="180" show-overflow-tooltip>
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">购房楼栋房号</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.housename}}</span>
|
<el-select
|
style="padding-left:15px"
|
v-model="row.housename"
|
filterable
|
placeholder="请选择"
|
size="small"
|
v-show="row.isEdit"
|
@change="selHousename(row)"
|
>
|
<el-option
|
v-for="(item,index) in buildRoomList"
|
:key="index"
|
:label="item.buildroom"
|
:value="item.buildroom">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注" min-width='180' show-overflow-tooltip>
|
<template slot-scope="{row}">
|
<span v-show="!row.isEdit">{{row.bak}}</span>
|
<el-input size="small" v-show="row.isEdit" v-model="row.bak" maxlength="80" placeholder="请输入" require></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="凭证管理" width="110" v-if="writeAble" fixed="right">
|
<template slot-scope="scope">
|
<el-button type="text" @click.native="handleEdit(scope.row)" v-if="!scope.row.isEdit">修改</el-button>
|
<el-button type="text" @click.native="handleSave(scope.row)" v-else>保存</el-button>
|
<el-button type="text" @click.native="handleCancel(scope.row,scope.$index)" v-if="scope.row.isCancel">取消</el-button>
|
<el-button type="text" @click.native="handleDelete(scope.row,scope.$index)" v-else>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<script>
|
import {
|
qryVoucherList,
|
qryBuildRoomList,
|
getDictionaryList,
|
saveVoucher,
|
delVoucher,
|
checkPayInAdvance
|
} from '@api/product'
|
import common from '@/utils/common'
|
import { setStorage,getStorage } from '@/utils/storage'
|
export default {
|
props: ['writeAble'],
|
data () {
|
return {
|
applyInfo:this.$store.state.product.applyInfo,
|
voucherData:[],
|
initialArr:[],
|
documentTypeList:[],
|
certificateUseList:[],
|
firstParagraphList:[],
|
buildRoomList:[],
|
}
|
},
|
async created () {
|
// 查询凭证信息
|
this.getVoucherList()
|
// 凭证类型
|
this.documentTypeList = await this.qryDictionaryList('DocumentType')
|
// 凭证用途
|
this.certificateUseList = await this.qryDictionaryList('CertificateUse')
|
// 是否属于首期款
|
this.firstParagraphList = await this.qryDictionaryList('FirstParagraph')
|
// 购房楼栋房号
|
this.getBuildRoomList()
|
},
|
methods: {
|
cellClass() {
|
return "cellClass";
|
},
|
headerCellClass() {
|
return "headerCellClass";
|
},
|
cell({ row, column, rowIndex, columnIndex }) {
|
const { applyInfo } = this;
|
const { refuseFlag } = applyInfo;
|
if (refuseFlag == 1) {
|
const { businessApplyInfo } = this.$store.state.product.fields;
|
const { voucherInfo } = businessApplyInfo;
|
if(voucherInfo&&voucherInfo.length){
|
for (let i = 0; i < voucherInfo.length; i++) {
|
const object = voucherInfo[i];
|
for (const key in object) {
|
if (row[key] != object[key] && column.property == key) {
|
return { color: "#222", "font-weight": "700" };
|
}
|
}
|
}
|
}
|
}
|
},
|
selHousename(row){
|
for (let i = 0; i < this.buildRoomList.length; i++) {
|
if(this.buildRoomList[i].buildroom == row.housename){
|
row.serialNumber = this.buildRoomList[i].serialno
|
}
|
}
|
},
|
// 凭证校验
|
checkVoucher(){
|
this.$parent.$parent.$parent.$parent._data.loading = true
|
checkPayInAdvance({serialNo:this.applyInfo.serialNo}).then(res=>{
|
this.$parent.$parent.$parent.$parent._data.loading = false
|
if(res.code == '00'){
|
common.alert('提示',res.msg,()=>{})
|
}
|
})
|
},
|
// 金额格式化
|
formatMoney(value) {
|
if(value){
|
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;
|
}
|
},
|
//楼栋房号列表查询(凭证信息辅助接口)
|
getBuildRoomList(){
|
qryBuildRoomList({applyserialno:this.applyInfo.serialNo}).then(res=>{
|
this.buildRoomList = res.result
|
})
|
},
|
// 查询凭证信息
|
getVoucherList(){
|
qryVoucherList({businessNo:this.applyInfo.serialNo}).then(res=>{
|
this.voucherData = []
|
// this.writeAble = res.result.length?res.result[0].documentType.writeAble:true
|
res.result.forEach(val => {
|
const obj = {}
|
for (const key in val) {
|
obj[key]=val[key].value
|
obj.certificateAmount = this.formatMoney(obj.certificateAmount)
|
obj.documentTypeDesc=val.documentType.valueDesc
|
obj.certificateUseDesc=val.certificateUse.valueDesc
|
obj.firstParagraphDesc=val.firstParagraph.valueDesc
|
}
|
this.voucherData.push(obj)
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
})
|
},
|
qryDictionaryList(code){
|
return new Promise(resolve=>{
|
getDictionaryList({
|
codeNo: code
|
}).then(res=>{
|
resolve(res.result)
|
})
|
})
|
},
|
// 新增凭证
|
addvoucher(){
|
for (let i = 0; i < this.voucherData.length; i++) {
|
if(this.voucherData[i].isEdit){
|
this.$message.warning('请先保存当前凭证信息再新增')
|
return;
|
}
|
};
|
this.voucherData.unshift({
|
documentType:'',
|
certificateAmount:'',
|
voucherDate:'',
|
certificateUse:'',
|
firstParagraph:'',
|
certificateSerialNumber:'',
|
housename:'',
|
bak:'',
|
isEdit:true,
|
})
|
},
|
// 保存
|
handleSave(row){
|
if(!row.documentType){
|
this.$message.warning('凭证类型不能为空')
|
return;
|
}
|
if(!row.certificateAmount){
|
this.$message.warning('凭证金额不能为空')
|
return;
|
}
|
if(!row.voucherDate){
|
this.$message.warning('凭证日期不能为空')
|
return;
|
}
|
if(!row.certificateUse){
|
this.$message.warning('凭证用途不能为空')
|
return;
|
}
|
if(!row.firstParagraph){
|
this.$message.warning('是否属于首期款凭证不能为空')
|
return;
|
}
|
if(!row.certificateSerialNumber){
|
this.$message.warning('凭证序列号不能为空')
|
return;
|
}
|
if(!row.housename){
|
this.$message.warning('购房楼栋房号不能为空')
|
return;
|
}
|
row.bizApplyId = this.applyInfo.serialNo;
|
row.customerId = this.applyInfo.customerid;
|
saveVoucher(row).then(res=>{
|
if(res.code=='00'){
|
this.$message.success('保存成功')
|
this.getVoucherList()
|
}
|
})
|
},
|
// 修改
|
handleEdit(row){
|
for (let i = 0; i < this.voucherData.length; i++) {
|
if(this.voucherData.length>1&&this.voucherData[i].isEdit){
|
this.$message.warning('请先保存当前凭证信息')
|
return;
|
}
|
};
|
this.$set(row,'isEdit',true)
|
this.$set(row, "isCancel", true);
|
},
|
// 取消
|
handleCancel(row,index){
|
const arr = []
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if(i == index){
|
for (const key in row) {
|
if(key != 'isEdit' && key != 'isCancel' && row[key] != this.initialArr[i][key]){
|
arr.push(key)
|
}
|
}
|
}
|
}
|
if(arr.length){
|
common.comfirm('提示','当前有数据未保存，是否放弃保存？',()=>{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
arr.forEach(val => {
|
for (const key in this.initialArr[index]) {
|
if (this.initialArr[index].hasOwnProperty(val)) {
|
this.voucherData[index][key] = this.initialArr[index][key]
|
}
|
}
|
});
|
})
|
}else{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
}
|
},
|
// 删除
|
handleDelete(row,index){
|
// for (let i = 0; i < this.voucherData.length; i++) {
|
// if(this.voucherData.length==1&&!this.voucherData[i].isEdit){
|
// this.$message.warning('凭证信息至少保留一个')
|
// return;
|
// }
|
// };
|
if(row.serialno){
|
common.comfirm('提示','请确认是否删除该凭证信息?',()=>{
|
delVoucher({serialNo:row.serialno}).then(res=>{
|
if(res.code=='00'){
|
this.$message.success('删除成功')
|
this.getVoucherList()
|
}
|
})
|
})
|
}else{
|
this.voucherData.splice(index,1)
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="stylus">
|
.voucherInfo
|
width 100%
|
padding 0 0 60px 10px
|
.el-table
|
.cellClass
|
height 48px
|
padding 0
|
.cell
|
line-height 18px
|
.headerCellClass
|
height 47px
|
padding 0
|
background-color: #f5f5f5
|
.cell
|
line-height 20px
|
color #222222
|
>p
|
margin-bottom 20px
|
.el-date-editor
|
width 100%
|
.red-star
|
width 7px
|
display inline-block
|
vertical-align: middle;
|
color: #FF4300;
|
</style>
|
