<template>
|
<div class="product">
|
<Summary
|
:update="update"
|
:serialNo="applyInfo.serialNo"
|
:customerid="applyInfo.customerid"
|
@sendUpdate="sendUpdate"
|
></Summary>
|
<div class="property">
|
<p class="title">
|
<span></span>
|
物业明细信息
|
</p>
|
<el-tabs v-model="tabIndex" type="card" @tab-remove='delProperty'>
|
<el-tab-pane
|
v-for="(item, index) in propertyForm"
|
:key="index"
|
:label="`物业${index+1}`"
|
:name="index+''"
|
:closable="propertyForm.length!=1&&writeAble"
|
>
|
<el-form
|
:model="propertyForm[index]"
|
:rules="rules"
|
ref="propertyForm"
|
inline
|
label-width="165px"
|
size="small"
|
>
|
<el-input v-model="propertyForm[index].serialno" v-show="false"></el-input>
|
<el-form-item label="是否产权人" v-if="propertyArr[index].isowner.visible" prop="isowner">
|
<el-select
|
v-model="propertyForm[index].isowner"
|
:disabled="!propertyArr[index].isowner.writeAble"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option label="是" value="1"></el-option>
|
<el-option label="否" value="0"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="房产地址(省)"
|
v-if="propertyArr[index].houseprovince.visible"
|
prop="houseprovince"
|
>
|
<el-select
|
v-model="propertyForm[index].houseprovince"
|
:disabled="!propertyArr[index].houseprovince.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
@change="getprovince(propertyForm[index].houseprovince,'housecityList',propertyForm[index],function(arr){propertyArr[index].housecityList=arr,$set(propertyArr,index,propertyArr[index])})"
|
>
|
<el-option
|
v-for="(item,index) in provinceList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="房产地址(市)" v-if="propertyArr[index].housecity.visible" prop="housecity">
|
<el-select
|
v-model="propertyForm[index].housecity"
|
:disabled="!propertyArr[index].housecity.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
@change="getcity(propertyForm[index].housecity,'housecountyList',propertyForm[index],function(arr){propertyArr[index].housecountyList=arr,$set(propertyArr,index,propertyArr[index])})"
|
>
|
<el-option
|
v-for="(item,index) in propertyArr[index].housecityList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="房产地址(区)"
|
v-if="propertyArr[index].housecounty.visible"
|
prop="housecounty"
|
>
|
<el-select
|
v-model="propertyForm[index].housecounty"
|
:disabled="!propertyArr[index].housecounty.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in propertyArr[index].housecountyList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="房产地址(街道/小区 名/单元/房号)"
|
v-if="propertyArr[index].houseaddress.visible"
|
prop="houseaddress"
|
>
|
<el-input
|
v-model="propertyForm[index].houseaddress"
|
:disabled="!propertyArr[index].houseaddress.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="房产估值"
|
v-if="propertyArr[index].houseassessment.visible"
|
prop="houseassessment"
|
>
|
<el-input
|
v-model="propertyForm[index].houseassessment"
|
:disabled="!propertyArr[index].houseassessment.writeAble"
|
@blur="propertyForm[index].houseassessment = formatMoney(propertyForm[index].houseassessment)"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="购买时间" v-if="propertyArr[index].timebuying.visible" prop="timebuying">
|
<el-date-picker
|
v-model="propertyForm[index].timebuying"
|
type="date"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期"
|
:disabled="!propertyArr[index].timebuying.writeAble"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item
|
label="物业类型"
|
v-if="propertyArr[index].propertytype.visible"
|
prop="propertytype"
|
>
|
<el-select
|
v-model="propertyForm[index].propertytype"
|
:disabled="!propertyArr[index].propertytype.writeAble"
|
filterable
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in propertyTypelist"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="产权状态" v-if="propertyArr[index].rightstatus.visible" prop="rightstatus">
|
<el-select
|
v-model="propertyForm[index].rightstatus"
|
:disabled="!propertyArr[index].rightstatus.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in rightStatuslist"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="一押贷款机构" v-if="propertyArr[index].oneorgid.visible" prop="oneorgid">
|
<el-input
|
v-model="propertyForm[index].oneorgid"
|
:disabled="!propertyArr[index].oneorgid.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="一押贷款金额" v-if="propertyArr[index].oneamt.visible" prop="oneamt">
|
<el-input
|
v-model="propertyForm[index].oneamt"
|
:disabled="!propertyArr[index].oneamt.writeAble"
|
@blur="propertyForm[index].oneamt = formatMoney(propertyForm[index].oneamt)"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="一押贷款余额" v-if="propertyArr[index].onebalance.visible" prop="onebalance">
|
<el-input
|
v-model="propertyForm[index].onebalance"
|
:disabled="!propertyArr[index].onebalance.writeAble"
|
@blur="propertyForm[index].onebalance = formatMoney(propertyForm[index].onebalance)"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="二押贷款机构" v-if="propertyArr[index].twoorgid.visible" prop="twoorgid">
|
<el-input
|
v-model="propertyForm[index].twoorgid"
|
:disabled="!propertyArr[index].twoorgid.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="二押贷款金额" v-if="propertyArr[index].twoamt.visible" prop="twoamt">
|
<el-input
|
v-model="propertyForm[index].twoamt"
|
:disabled="!propertyArr[index].twoamt.writeAble"
|
@blur="propertyForm[index].twoamt = formatMoney(propertyForm[index].twoamt)"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="二押贷款余额" v-if="propertyArr[index].twobalance.visible" prop="twobalance">
|
<el-input
|
v-model="propertyForm[index].twobalance"
|
:disabled="!propertyArr[index].twobalance.writeAble"
|
@blur="propertyForm[index].twobalance = formatMoney(propertyForm[index].twobalance)"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<Owner
|
v-if="applyInfo.phaseNo>='0040'"
|
:index="index"
|
:show="propertyArr[index].isowner.writeAble"
|
:propertyData="propertyForm[index]"
|
@sendPropertyForm="sendPropertyForm"
|
></Owner>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div :class="[applyInfo.phaseNo >= '0040' ? 'fixedBtn':'btn']">
|
<el-button size="medium" plain @click="noProperty" v-if="writeAble&&hashome==0">无物业信息</el-button>
|
<el-button size="medium" plain @click="addProperty" v-if="writeAble">添加物业信息</el-button>
|
<el-button
|
size="medium"
|
plain
|
@click="saveDraft(propertyForm)"
|
v-if="applyInfo.phaseNo=='0040'||applyInfo.phaseNo=='0010'"
|
>保存草稿</el-button>
|
<el-button
|
size="medium"
|
plain
|
@click="prevStep"
|
v-if="applyInfo.phaseNo=='0040'||applyInfo.phaseNo=='0010'"
|
>上一步</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="submit(propertyForm)"
|
v-if="applyInfo.phaseNo=='0040'||applyInfo.phaseNo=='0010'"
|
>下一步</el-button>
|
<el-button
|
size="medium"
|
plain
|
@click="save(propertyForm)"
|
v-if="applyInfo.phaseNo>'0040'&&writeAble"
|
>保存</el-button>
|
<el-button
|
size="medium"
|
plain
|
@click="prevStep"
|
v-if="applyInfo.phaseNo!='0040'&&applyInfo.phaseNo!='0010'"
|
>上一页</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="nextPage()"
|
v-if="applyInfo.phaseNo!='0040'&&applyInfo.phaseNo!='0010'"
|
>下一页</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
qryHouseList,
|
getDictionaryList,
|
delHouse,
|
saveMultipleHouse,
|
submitMultipleHouse,
|
getProvinceCodeList,
|
noBorrowerFlag
|
} from "@/api/product";
|
import { setStorage, getStorage } from "@/utils/storage";
|
import common from "@/utils/common";
|
import Owner from "@views/product/components/Owner";
|
import Summary from "@views/product/components/Summary";
|
export default {
|
data() {
|
return {
|
applyInfo:this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
initialArr: [], //初始数据
|
propertyForm: [],
|
propertyArr: [],
|
provinceList: [],
|
propertyTypelist: [],
|
rightStatuslist: [],
|
writeAble: false,
|
update: false,
|
hashome: "",
|
tabIndex: "0",
|
rules: {}
|
};
|
},
|
async created() {
|
this.$parent._data.loading = true;
|
// 查询物业信息
|
const res = await this.getHouseList();
|
this.hashome = res.ext.hashome.value;
|
this.getPropertyData(res.result);
|
// 获取物业类型下拉
|
this.propertyTypelist = await this.qryDictionaryList("PropertyType");
|
// 产权状态
|
this.rightStatuslist = await this.qryDictionaryList("RightStatus");
|
// 获取省枚举值
|
getProvinceCodeList({}).then(res => {
|
this.provinceList = res.result;
|
});
|
this.$parent._data.loading = false;
|
},
|
components: {
|
Owner,
|
Summary
|
},
|
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
|
);
|
}
|
},
|
// 无物业信息
|
noBorrowerFlag(){
|
this.$parent._data.loading = true;
|
noBorrowerFlag({
|
applySerialNo: this.applyInfo.serialNo,
|
customerId: this.applyInfo.customerid,
|
requesttype: "03"
|
}).then(res => {
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
this.nextPage()
|
}
|
});
|
},
|
noProperty() {
|
if(this.propertyForm.length == 1 && !this.propertyForm[0].serialno){
|
this.noBorrowerFlag()
|
}else{
|
common.comfirm('提示','该操作会删除申请单下的所有物业信息，请确认是否继续删除？',()=>{
|
this.noBorrowerFlag()
|
})
|
}
|
},
|
sendUpdate(val) {
|
this.update = val;
|
},
|
// 处理数据,将数据重新排列
|
async getPropertyData(result) {
|
this.propertyArr = result;
|
this.propertyForm = [];
|
this.initialArr = [];
|
this.propertyArr.forEach((val, index) => {
|
// 取数组第一个值作为校验规则
|
if (index == 0) {
|
for (const key in val) {
|
this.rules[key] = [];
|
// 必填校验
|
if (val[key].required) {
|
this.rules[key].push({
|
required: true,
|
message: `请输入${val[key].filedDescription}`,
|
trigger: "blur"
|
});
|
}
|
}
|
}
|
//将数据重新排列
|
const obj = {};
|
for (const key in val) {
|
delete obj["propertyList"];
|
obj[key] = val[key].value;
|
// 初始化value为空,金额格式化
|
if (
|
key == "oneamt" ||
|
key == "twoamt" ||
|
key == "twobalance" ||
|
key == "houseassessment" ||
|
key == "onebalance"
|
) {
|
obj[key] = this.formatMoney(val[key].value);
|
}
|
if (
|
key != "customername" &&
|
key != "certid" &&
|
key != "cuscerttype"
|
) {
|
val[key].value = "";
|
}
|
}
|
// 正常赋值
|
this.propertyForm.push(obj);
|
// 将每个对象进行浅克隆在赋值
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
this.propertyForm.forEach(async (val, index) => {
|
// 根据省获取市
|
val.houseprovince
|
? (this.propertyArr[
|
index
|
].housecityList = await common.qryCityCodeList(val.houseprovince))
|
: "";
|
// 根据市获取区
|
val.housecity
|
? (this.propertyArr[
|
index
|
].housecountyList = await common.qryAreaCodeList(val.housecity))
|
: "";
|
this.$set(this.propertyArr, index, this.propertyArr[index]);
|
});
|
// 根据与借款人关系判断页面是否都是只读
|
this.writeAble = this.propertyArr[0].isowner.writeAble;
|
},
|
// 查询物业信息
|
getHouseList() {
|
return new Promise(resolve => {
|
qryHouseList({
|
businessNo: this.applyInfo.serialNo,
|
customerId: this.applyInfo.customerid
|
}).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
qryDictionaryList(code) {
|
return new Promise(resolve => {
|
getDictionaryList({
|
codeNo: code
|
}).then(res => {
|
resolve(res.result);
|
});
|
});
|
},
|
// 添加物业信息
|
addProperty() {
|
const validateForm = common.validateForm(this.$refs.propertyForm)
|
this.tabIndex = validateForm.index === undefined ? this.tabIndex : '' + validateForm.index
|
if(!validateForm.flag)return;
|
const obj = {};
|
for (const key in this.propertyArr[0]) {
|
obj[key] = this.propertyArr[0][key].value;
|
delete obj["propertyList"];
|
}
|
this.propertyForm.push(obj);
|
this.initialArr.push(Object.assign({},obj))
|
this.propertyArr.push(Object.assign({}, this.propertyArr[0]));
|
this.tabIndex = `${this.propertyForm.length-1}`
|
},
|
// 保存接口
|
saveMultipleProperty(arr) {
|
return new Promise(resolve => {
|
saveMultipleHouse({ houseInfoList: arr }).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 提交接口
|
submitMultipleProperty(array) {
|
return new Promise(resolve => {
|
submitMultipleHouse({ houseInfoList: array }).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 物业信息保存并校验数据完整性
|
async save(array) {
|
const validateForm = common.validateForm(this.$refs.propertyForm)
|
this.tabIndex = validateForm.index === undefined ? this.tabIndex : '' + validateForm.index
|
if(!validateForm.flag)return;
|
for (let i = 0; i < array.length; i++) {
|
array[i].applyserialno = this.applyInfo.serialNo;
|
if (this.applyInfo.phaseNo >= "0040") {
|
if (!array[i].propertyList || !array[i].propertyList.length) {
|
this.$message.warning("每个申请单至少填写一个产权人信息");
|
return;
|
}
|
}
|
}
|
this.$parent._data.loading = true;
|
const res = await this.saveMultipleProperty(array);
|
if (res.code == "00") {
|
const res = await this.getHouseList();
|
this.getPropertyData(res.result);
|
// 通知子组件更新物业汇总信息
|
this.update = true;
|
this.$message.success("保存成功");
|
}
|
this.$parent._data.loading = false;
|
},
|
// 物业信息保存草稿
|
async saveDraft(array) {
|
// 保存需要校验多个物业的项目名称都是一样的并且项目名称不能为空,最后重新调用查询物业信息渲染页面
|
for (let i = 0; i < array.length; i++) {
|
array[i].applyserialno = this.applyInfo.serialNo;
|
}
|
this.$parent._data.loading = true;
|
const res = await this.saveMultipleProperty(array);
|
if (res.code == "00") {
|
const res = await this.getHouseList();
|
this.getPropertyData(res.result);
|
// 通知子组件更新物业汇总信息
|
this.update = true;
|
this.$message.success("保存成功");
|
// 保存草稿需要调用父组件的查询左侧tab的方法
|
this.$parent.getApplyTabTree();
|
}
|
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
|
);
|
}
|
});
|
},
|
// 下一页
|
nextPage() {
|
// 调用父组件的查询左侧tab的方法
|
this.$parent.updateApplyTabTree('物业信息');
|
},
|
// 下一步提交并且需要校验每个物业申请单的产权人至少一个
|
async submit(array) {
|
const validateForm = common.validateForm(this.$refs.propertyForm)
|
this.tabIndex = validateForm.index === undefined ? this.tabIndex : '' + validateForm.index
|
if(!validateForm.flag)return;
|
for (let i = 0; i < array.length; i++) {
|
array[i].applyserialno = this.applyInfo.serialNo;
|
if (this.applyInfo.phaseNo >= "0040") {
|
if (!array[i].propertyList || !array[i].propertyList.length) {
|
this.$message.warning("每个申请单至少填写一个产权人信息");
|
return;
|
}
|
}
|
}
|
this.$parent._data.loading = true;
|
const res = await this.submitMultipleProperty(array);
|
if (res.code == "00") {
|
const result = await this.getHouseList();
|
this.getPropertyData(result);
|
this.nextPage()
|
}
|
this.$parent._data.loading = false;
|
},
|
// 删除物业信息
|
delProperty(index) {
|
if (this.propertyForm[index].serialno) {
|
common.comfirm('提示','请确认是否删除物业信息',()=>{
|
delHouse({ serialNo: this.propertyForm[index].serialno }).then(res => {
|
if (res.code == "00") {
|
this.$message.success("删除成功");
|
this.propertyForm.splice(index, 1);
|
this.propertyArr.splice(index, 1);
|
this.tabIndex = `${ index-1 >= 0 ? index-1 : index }`
|
}
|
});
|
})
|
} else {
|
this.propertyForm.splice(index, 1);
|
this.propertyArr.splice(index, 1);
|
this.tabIndex = `${ index-1 >= 0 ? index-1 : index }`
|
}
|
},
|
sendPropertyForm(data) {
|
this.propertyForm[data.index] = data;
|
}
|
},
|
beforeRouteLeave(to, from, next) {
|
for (let i = 0; i < this.propertyForm.length; i++) {
|
for (const key in this.propertyForm[i]) {
|
if (this.initialArr[i].hasOwnProperty(key)) {
|
if (this.propertyForm[i][key] != this.initialArr[i][key]) {
|
// 页面有数据未保存
|
common.comfirm("提示", "当前页面有数据未保存，是否放弃保存？", () => {
|
next();
|
});
|
return;
|
}
|
}
|
}
|
}
|
next();
|
}
|
};
|
</script>
|
