<template>
|
<div class="product" ref="product">
|
<div v-for="(item, index) in collateralArr" :key="index">
|
<el-form :model="collateralForm[index]" :rules="rules[index]" ref="collateralForm" label-width="165px" inline
|
size="small">
|
<div class="_block">
|
<p class="title">
|
<span></span>
|
{{ collateralForm[index].collateralType == '2' ? '动产' : '不动产' }}抵押物
|
</p>
|
<div class="form" style="margin: 0">
|
<el-form-item :label="collateralForm[index].collateralType == '2' ? '动产抵押物' : '不动产抵押物'"
|
prop="hasCollateral">
|
<el-select v-model="collateralForm[index].hasCollateral"
|
:disabled="!collateralArr[index].hasCollateral.writeAble" placeholder="请选择">
|
<el-option v-for="(item, index) in yesNoList" :key="index" :label="item.itemname" :value="item.itemno">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="form" v-if="collateralForm[index].hasCollateral == 1">
|
<template v-for="(data, i) in collateralKey[index]">
|
<el-form-item :label="data.label" v-if="collateralArr[index][data.field].visible" :prop="data.field"
|
:class="{ 'isLong': data.isLong }">
|
<el-input v-model="collateralForm[index][data.field]" :type="data.type || 'input' "
|
:disabled="!collateralArr[index][data.field].writeAble" v-if="data.isMoney"
|
@blur="collateralForm[index][data.field] = formatMoney(collateralForm[index][data.field])">
|
</el-input>
|
<el-input v-model="collateralForm[index][data.field]" :type="data.type || 'input' "
|
:disabled="!collateralArr[index][data.field].writeAble" v-else>
|
</el-input>
|
</el-form-item>
|
</template>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
<div class="fixedBtn">
|
<el-button size="medium" plain @click="saveDraft(collateralForm)" v-if="applyInfo.phaseNo == '0040' && !isReadonly ">保存草稿
|
</el-button>
|
<el-button size="medium" plain @click="save(collateralForm)" v-if="applyInfo.phaseNo == '0060' && !isReadonly">保存</el-button>
|
<el-button size="medium" plain @click="prevStep"
|
v-if="(applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0060') && !isReadonly">上一步</el-button>
|
<el-button size="medium" plain @click="prevStep" v-else>上一步</el-button>
|
<el-button size="medium" type="primary" @click="submit(collateralForm)"
|
v-if="(applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0060') && !isReadonly">下一步</el-button>
|
<el-button size="medium" type="primary" @click="nextPage()" v-else>下一步</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
qryCollateralInfo,
|
saveMultipleCollateralInfo,
|
submitMultipleCollateralInfo,
|
getDictionaryList
|
} from "@/api/product";
|
import common from "@/utils/common";
|
import Branch from "@views/product/components/Branch";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
initialArr: [], //初始数据
|
collateralForm: [],
|
collateralArr: [],
|
rules: {},
|
repayTypeList: [],
|
fundUnitList: [],
|
provinceList: [],
|
cityList: [],
|
countyList: [],
|
areaList: [],
|
yesNoList: [],
|
collateralKey: [[
|
{ field: 'mortgagor', label: '抵押人' },
|
{ field: 'mortgagorCertId', label: '统一社会信用代码' },
|
{ field: 'corporateName', label: '抵押企业法人姓名' },
|
{ field: 'corporateCertId', label: '抵押企业法人身份证号码' },
|
{ field: 'corporatePhone', label: '抵押企业法人手机号码' },
|
{ field: 'collateralAmt', label: '抵押金额' , isMoney: true},
|
{ field: 'postalAddress', label: '通讯地址', isLong: true, type: 'textarea' },
|
{ field: 'collateralDesc', label: '抵押财产信息描述', isLong: true , type: 'textarea'}
|
], [
|
{ field: 'mortgagor', label: '抵押人' },
|
{ field: 'mortgagorCertId', label: '身份证号码' },
|
{ field: 'mortgagorPhone', label: '手机号码' },
|
{ field: 'collateralNo', label: '房产证编号' },
|
{ field: 'valuation', label: '房产估价协商值' , isMoney: true },
|
{ field: 'evaluation', label: '房产评估价' , isMoney: true },
|
{ field: 'useRightTerm', label: '房产使用权期限' },
|
{ field: 'postalAddress', label: '通讯地址', isLong: true, type: 'textarea' },
|
{ field: 'collateralAddress', label: '房产地址', isLong: true, type: 'textarea' },
|
]]
|
};
|
},
|
async created() {
|
this.$parent._data.loading = true;
|
const collateralResult = await this.qryCollateralInfo();
|
this.getCollaterData(collateralResult.collateralInfoList)
|
|
// 兑付状态
|
this.yesNoList = await this.qryDictionaryList('YesNo');
|
this.$parent._data.loading = false;
|
},
|
components: {
|
Branch,
|
},
|
computed: {
|
isReadonly() {
|
return this.$parent._data.applyMenu[this.$parent._data.activeIndex].readonly == 'Y'
|
}
|
},
|
methods: {
|
// 金额格式化
|
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;
|
}
|
},
|
|
//金额变成数字
|
moneyFomatNumber(number, n) {
|
if (typeof number == 'number') return number
|
if (number != null && number != "" && number != undefined) {
|
number = number.replace(/,/g, ""); //去除千分位的','
|
if (isNaN(number)) {
|
//判断是否是数字
|
number = "0";
|
} else {
|
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //n幂
|
number = number.toString();
|
}
|
} else {
|
number = "0";
|
}
|
//a.indexOf(x,y);返回x值在a字符串值中从y位置开始检索首次出现的位置
|
var numLength = number.indexOf(".");
|
//判断传递的值是整数增加小数点再补"0"
|
if (numLength < 0) {
|
numLength = number.length;
|
number += ".";
|
}
|
//不足n位小数的，循环补"0"
|
while (number.length <= numLength + n) {
|
number += "0";
|
}
|
return number;
|
},
|
|
qryDictionaryList(code) {
|
return new Promise(resolve => {
|
getDictionaryList({
|
codeNo: code
|
}).then(res => {
|
resolve(res.result)
|
})
|
})
|
},
|
//查询核心企业信息
|
qryCollateralInfo() {
|
return new Promise((resolve) => {
|
qryCollateralInfo({
|
applySerialno: this.applyInfo.serialNo,
|
}).then((res) => {
|
resolve(res.result);
|
});
|
});
|
},
|
|
async getCollaterData(result) {
|
|
this.collateralArr = [];
|
this.collateralForm = [];
|
this.initialArr = [];
|
this.collateralArr = result;
|
this.rules = [];
|
// 初始化数据和校验规则
|
this.collateralArr.forEach(async (val, index) => {
|
const obj = {};
|
const rule = {}
|
for (const key in val) {
|
// 格式化金额
|
if (
|
key == "collateralAmt" || key == "valuation" || key == "evaluation"
|
) {
|
val[key].value = this.formatMoney(val[key].value);
|
}
|
// 自定义校验规则,涉及金额将进行格式化
|
rule[key] = [];
|
if (val[key].required) {
|
console.log(this.collateralKey[index])
|
rule[key].push({
|
required: true,
|
message: `请输入${val[key].filedDescription}`,
|
trigger: "change",
|
});
|
}
|
if(this.isReadonly) {
|
val[key].writeAble = false
|
}
|
obj[key] = val[key].value;
|
}
|
this.rules.push(rule)
|
this.collateralForm.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
},
|
|
// 保存接口
|
saveInfo(arr) {
|
return new Promise((resolve) => {
|
arr.forEach(val=>{
|
for (const key in val) {
|
// 格式化金额
|
if (
|
key == "collateralAmt" || key == "valuation" || key == "evaluation"
|
) {
|
val[key] = this.moneyFomatNumber(val[key], 2);
|
}
|
}
|
})
|
saveMultipleCollateralInfo({ 'collateralInfoList': arr }).then((res) => {
|
resolve(res);
|
});
|
});
|
},
|
// 提交接口
|
submitInfo(arr) {
|
return new Promise((resolve) => {
|
arr.forEach(val=>{
|
for (const key in val) {
|
// 格式化金额
|
if (
|
key == "collateralAmt" || key == "valuation" || key == "evaluation"
|
) {
|
val[key] = this.moneyFomatNumber(val[key], 2);
|
}
|
}
|
})
|
submitMultipleCollateralInfo({ 'collateralInfoList': arr }).then((res) => {
|
resolve(res);
|
});
|
});
|
},
|
|
// 保存草稿
|
async saveDraft(arr) {
|
this.$parent._data.loading = true;
|
|
const res = await this.saveInfo(arr);
|
if (res.code == "00") {
|
const collateralResult = await this.qryCollateralInfo();
|
this.getCollaterData(collateralResult.collateralInfoList)
|
this.$message.success("保存成功");
|
// 保存草稿需要调用父组件的查询左侧tab的方法
|
}
|
this.$parent._data.loading = false;
|
},
|
// 保存并校验数据完整性
|
async save(arr) {
|
if (!common.validateForm(this.$refs.collateralForm).flag) return;
|
this.$parent._data.loading = true;
|
const res = await this.saveInfo(arr);
|
if (res.code == "00") {
|
const collateralResult = await this.qryCollateralInfo();
|
this.getCollaterData(collateralResult.collateralInfoList)
|
this.$message.success("保存成功");
|
}
|
this.$parent._data.loading = false;
|
},
|
// 上一步或上一页
|
prevStep() {
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == "抵押物信息") {
|
common.tabInfo(
|
this.applyMenu[index - 1].tabname,
|
this.applyInfo.flowno,
|
this
|
);
|
}
|
});
|
},
|
// 提交
|
async submit(arr) {
|
if (!common.validateForm(this.$refs.collateralForm).flag) return;
|
this.$parent._data.loading = true;
|
const res = await this.submitInfo(arr);
|
if (res.code == "00") {
|
const collateralResult = await this.qryCollateralInfo();
|
this.getCollaterData(collateralResult.collateralInfoList)
|
this.$parent._data.loading = false;
|
this.nextPage();
|
}
|
},
|
// 下一页
|
nextPage() {
|
// 调用父组件的查询左侧tab的方法
|
this.$parent.updateApplyTabTree("抵押物信息");
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
!this.collateralForm.length ||
|
common.compareFormData(this.initialArr, this.collateralForm, next)
|
? next()
|
: "";
|
},
|
};
|
</script>
|
<style>
|
.product .form .el-form-item.isLong {
|
width: 100% !important;
|
}
|
</style>
|
