<template>
|
<div class="product">
|
<div>
|
<el-form
|
:model="propertyForm"
|
:rules="rules"
|
ref="propertyForm"
|
inline
|
label-width="165px"
|
size="small"
|
>
|
<div class="_block" v-if="applyInfo.occurtype=='01'">
|
<p class="title">
|
<span></span>
|
成交信息
|
</p>
|
<div class="form" v-for="(item,index) in propertyArr.houseSumInfo" :key="'0'+index">
|
<el-form-item
|
label="成交价格"
|
v-if="item.dealsum.visible&&applyInfo.occurtype=='01'"
|
:prop="`houseSumInfo.${index}.dealsum`"
|
:rules="rules.dealsum"
|
>
|
<el-input
|
maxlength="15"
|
v-model="propertyForm.houseSumInfo[index].dealsum"
|
:disabled="!item.dealsum.writeAble"
|
@blur="propertyForm.houseSumInfo[index].dealsum = formatMoney(propertyForm.houseSumInfo[index].dealsum)"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="首付金额(含定金)"
|
v-if="item.firstpayment.visible&&applyInfo.occurtype=='01'"
|
:prop="`houseSumInfo.${index}.firstpayment`"
|
:rules="rules.firstpayment"
|
>
|
<el-input
|
maxlength="15"
|
v-model="propertyForm.houseSumInfo[index].firstpayment"
|
:disabled="!item.firstpayment.writeAble"
|
@blur="propertyForm.houseSumInfo[index].firstpayment = formatMoney(propertyForm.houseSumInfo[index].firstpayment)"
|
></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="_block">
|
<p class="title">
|
<span></span>
|
物业明细信息
|
</p>
|
<el-tabs v-model="tabIndex" type="card" @tab-remove='delProperty'>
|
<el-tab-pane
|
v-for="(item, index) in propertyArr.houseInfoList"
|
:key="index"
|
:label="`物业${index+1}`"
|
:name="index+''"
|
:closable="writeAble"
|
>
|
<div class="_block">
|
<div class="form">
|
<el-input v-model="propertyForm.houseInfoList[index].serialno" v-show="false"></el-input>
|
<el-form-item
|
label="物业类型"
|
v-if="item.propertytype.visible"
|
:prop="`houseInfoList.${index}.propertytype`"
|
:rules="rules.propertytype"
|
>
|
<el-select
|
v-model="propertyForm.houseInfoList[index].propertytype"
|
:disabled="!item.propertytype.writeAble"
|
filterable
|
clearable
|
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="item.certificate.visible"
|
:prop="`houseInfoList.${index}.certificate`"
|
:rules="rules.certificate"
|
>
|
<el-input
|
maxlength="100"
|
v-model="propertyForm.houseInfoList[index].certificate"
|
:disabled="!item.certificate.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="物业地址(省)"
|
v-if="item.houseprovince.visible"
|
:prop="`houseInfoList.${index}.houseprovince`"
|
:rules="rules.houseprovince"
|
>
|
<el-select
|
v-model="propertyForm.houseInfoList[index].houseprovince"
|
:disabled="!item.houseprovince.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
@change="getprovince(propertyForm.houseInfoList[index].houseprovince,'housecityList',propertyForm.houseInfoList[index],function(arr){item.housecityList=arr,$set(propertyArr.houseInfoList,index,item)})"
|
>
|
<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="item.housecity.visible"
|
:prop="`houseInfoList.${index}.housecity`"
|
:rules="rules.housecity"
|
>
|
<el-select
|
v-model="propertyForm.houseInfoList[index].housecity"
|
:disabled="!item.housecity.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
@change="getcity(propertyForm.houseInfoList[index].housecity,'housecountyList',propertyForm.houseInfoList[index],function(arr){item.housecountyList=arr,$set(propertyArr.houseInfoList,index,item)})"
|
>
|
<el-option
|
v-for="(item,index) in item.housecityList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="物业地址(区/县)"
|
v-if="item.housecounty.visible"
|
:prop="`houseInfoList.${index}.housecounty`"
|
:rules="rules.housecounty"
|
>
|
<el-select
|
v-model="propertyForm.houseInfoList[index].housecounty"
|
:disabled="!item.housecounty.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in item.housecountyList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="物业地址(街道/小区 名/单元/房号)"
|
v-if="item.houseaddress.visible"
|
:prop="`houseInfoList.${index}.houseaddress`"
|
:rules="rules.houseaddress"
|
>
|
<el-input
|
v-model="propertyForm.houseInfoList[index].houseaddress"
|
:disabled="!item.houseaddress.writeAble"
|
></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<SelectOwner
|
v-if="propertyForm.houseInfoList[index].isOwner&&writeAble"
|
:index="index"
|
:propertyData="propertyForm.houseInfoList[index]"
|
@closeDialog="closeDialog"
|
@sendPropertyForm="sendProperty"
|
></SelectOwner>
|
<Owner
|
:index="index"
|
:show="writeAble"
|
:propertyData="propertyForm.houseInfoList[index]"
|
:propertyList="propertyForm.houseInfoList[index].propertyList"
|
@sendPropertyForm="sendPropertyForm"
|
@selectOwner='propertyForm.houseInfoList[index].isOwner = true'
|
></Owner>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-form>
|
</div>
|
<div class="fixedBtn">
|
<el-button size="medium" plain @click="addProperty" v-if="writeAble">添加物业信息</el-button>
|
<el-button
|
size="medium"
|
plain
|
@click="saveDraft(propertyForm)"
|
v-if="applyInfo.phaseNo=='0010'"
|
>保存草稿</el-button>
|
<el-button size="medium" plain @click="save(propertyForm)" v-if="applyInfo.phaseNo>'0010'&&writeAble">保存</el-button>
|
<el-button size="medium" plain @click="prevStep" v-if="applyInfo.phaseNo=='0010'">上一步</el-button>
|
<el-button size="medium" plain @click="prevStep" v-else>上一页</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="submit(propertyForm)"
|
v-if="applyInfo.phaseNo=='0010'"
|
>下一步</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="nextPage()"
|
v-else
|
>下一页</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
qryHouseList,
|
getDictionaryList,
|
delHouse,
|
saveMultipleHouse,
|
submitMultipleHouse,
|
getProvinceCodeList
|
} from "@/api/product";
|
import { setStorage, getStorage } from "@/utils/storage";
|
import common from "@/utils/common";
|
import Owner from "@views/product/components/Owner";
|
import SelectOwner from "@views/product/components/SelectOwner";
|
export default {
|
data() {
|
return {
|
applyInfo:this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
initialArr:{},
|
propertyForm: {
|
houseInfoList: [],
|
houseSumInfo: []
|
},
|
propertyArr: {
|
houseInfoList: [],
|
houseSumInfo: []
|
},
|
provinceList: [],
|
propertyTypelist: [],
|
rules: {},
|
tabIndex:'0',
|
writeAble:false
|
};
|
},
|
async created() {
|
this.$parent._data.loading = true;
|
// 查询物业信息
|
const res = await this.getHouseList();
|
this.getPropertyData(res);
|
this.writeAble = this.propertyArr.houseInfoList[0].propertytype.writeAble
|
// 获取物业类型下拉
|
this.propertyTypelist = await this.qryDictionaryList("PropertyTypeSL");
|
// 获取省枚举值
|
getProvinceCodeList({}).then(res => {
|
this.provinceList = res.result;
|
});
|
this.$parent._data.loading = false;
|
},
|
components: {
|
Owner,
|
SelectOwner
|
},
|
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
|
);
|
}
|
},
|
forEachArr(arr) {
|
const array = [];
|
arr.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: "change"
|
});
|
}
|
}
|
}
|
//将数据重新排列
|
const obj = {};
|
for (const key in val) {
|
delete obj["propertyList"];
|
obj[key] = val[key].value;
|
// 初始化value为空,金额格式化
|
if (key == "firstpayment" || key == "dealsum") {
|
obj[key] = this.formatMoney(val[key].value);
|
}
|
val[key].value = "";
|
}
|
obj['isOwner'] = false;
|
array.push(obj);
|
});
|
return array;
|
},
|
copyObj(arr){
|
//将数据重新排列
|
const array = []
|
arr.forEach(val => {
|
const obj = {};
|
for (const key in val) {
|
delete obj["propertyList"];
|
obj[key] = val[key];
|
}
|
array.push(Object.assign({},obj));
|
});
|
return array
|
},
|
// 处理物业信息数据,将数据重新排列
|
async getPropertyData(res) {
|
this.propertyArr.houseInfoList = res.result;
|
this.propertyArr.houseSumInfo = [res.ext];
|
// 正常赋值
|
this.propertyForm.houseSumInfo = this.forEachArr(
|
this.propertyArr.houseSumInfo
|
);
|
this.propertyForm.houseInfoList = this.forEachArr(
|
this.propertyArr.houseInfoList
|
);
|
// 浅克隆拷贝一份初始数据指向不同地址
|
this.initialArr.houseSumInfo = this.copyObj(
|
this.propertyForm.houseSumInfo
|
)
|
this.initialArr.houseInfoList = this.copyObj(
|
this.propertyForm.houseInfoList
|
)
|
this.propertyForm.houseInfoList.forEach(async (val, index) => {
|
// 根据省获取市
|
val.houseprovince
|
? (this.propertyArr.houseInfoList[
|
index
|
].housecityList = await common.qryCityCodeList(val.houseprovince))
|
: "";
|
// 根据市获取区
|
val.housecity
|
? (this.propertyArr.houseInfoList[
|
index
|
].housecountyList = await common.qryAreaCodeList(val.housecity))
|
: "";
|
this.$set(
|
this.propertyArr.houseInfoList,
|
index,
|
this.propertyArr.houseInfoList[index]
|
);
|
});
|
},
|
// 查询物业信息
|
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() {
|
this.$refs.propertyForm.validate(valid => {
|
if (valid) {
|
const obj = {};
|
for (const key in this.propertyArr.houseInfoList[0]) {
|
obj[key] = this.propertyArr.houseInfoList[0][key].value;
|
obj['isOwner'] = false;
|
delete obj["propertyList"];
|
}
|
this.propertyForm.houseInfoList.push(obj);
|
this.initialArr.houseInfoList.push(Object.assign({},obj))
|
this.propertyArr.houseInfoList.push(Object.assign({}, this.propertyArr.houseInfoList[0]));
|
this.tabIndex = `${this.propertyArr.houseInfoList.length-1}`
|
}else{
|
this.$message.warning('当前页面存在必填项未录入或数据录入错误，请检查!')
|
setTimeout(()=>{
|
var isError= document.getElementsByClassName("is-error");
|
this.tabIndex = isError[0].parentElement.parentElement.id.split('-')[1]
|
},1)
|
}
|
});
|
},
|
// 保存接口
|
saveMultipleProperty(obj) {
|
return new Promise(resolve => {
|
saveMultipleHouse({ houseInfoList: obj.houseInfoList,houseSumInfo:obj.houseSumInfo[0] }).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 提交接口
|
submitMultipleProperty(obj) {
|
return new Promise(resolve => {
|
submitMultipleHouse({ houseInfoList: obj.houseInfoList,houseSumInfo:obj.houseSumInfo[0] }).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 物业信息保存并校验数据完整性
|
save(obj) {
|
this.$refs.propertyForm.validate(async valid => {
|
if (valid) {
|
for (let i = 0; i < obj.houseInfoList.length; i++) {
|
obj.houseInfoList[i].applyserialno = this.applyInfo.serialNo;
|
if (!obj.houseInfoList[i].propertyList || !obj.houseInfoList[i].propertyList.length) {
|
this.$message.warning("每个申请单至少填写一个产权人信息");
|
return;
|
}
|
}
|
this.$parent._data.loading = true;
|
const res = await this.saveMultipleProperty(obj);
|
if (res.code == "00") {
|
const res = await this.getHouseList();
|
this.getPropertyData(res);
|
this.$message.success("保存成功");
|
}
|
this.$parent._data.loading = false;
|
}else{
|
this.$message.warning('当前页面存在必填项未录入或数据录入错误，请检查!')
|
setTimeout(()=>{
|
var isError= document.getElementsByClassName("is-error");
|
this.tabIndex = isError[0].parentElement.parentElement.id.split('-')[1]
|
},1)
|
}
|
});
|
},
|
// 物业信息保存草稿
|
async saveDraft(obj) {
|
// 保存需要校验多个物业的项目名称都是一样的并且项目名称不能为空,最后重新调用查询物业信息渲染页面
|
for (let i = 0; i < obj.houseInfoList.length; i++) {
|
obj.houseInfoList[i].applyserialno = this.applyInfo.serialNo;
|
}
|
this.$parent._data.loading = true;
|
const res = await this.saveMultipleProperty(obj);
|
if (res.code == "00") {
|
const res = await this.getHouseList();
|
this.getPropertyData(res);
|
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('物业信息');
|
},
|
// 下一步提交并且需要校验每个物业申请单的产权人至少一个
|
submit(obj) {
|
this.$refs.propertyForm.validate(async valid => {
|
if (valid) {
|
for (let i = 0; i < obj.houseInfoList.length; i++) {
|
obj.houseInfoList[i].applyserialno = this.applyInfo.serialNo;
|
if (!obj.houseInfoList[i].propertyList || !obj.houseInfoList[i].propertyList.length) {
|
this.$message.warning("每个申请单至少填写一个产权人信息");
|
return;
|
}
|
}
|
this.$parent._data.loading = true;
|
const res = await this.submitMultipleProperty(obj);
|
if (res.code == "00") {
|
const res = await this.getHouseList();
|
this.getPropertyData(res);
|
this.nextPage()
|
}
|
this.$parent._data.loading = false;
|
}else{
|
this.$message.warning('当前页面存在必填项未录入或数据录入错误，请检查!')
|
setTimeout(()=>{
|
var isError= document.getElementsByClassName("is-error");
|
this.tabIndex = isError[0].parentElement.parentElement.id.split('-')[1]
|
},1)
|
}
|
});
|
},
|
// 删除物业信息
|
delProperty(index) {
|
if(this.propertyForm.houseInfoList.length==1){
|
this.$message.warning('至少保留一个物业信息')
|
return
|
}
|
if (this.propertyForm.houseInfoList[index].serialno) {
|
common.comfirm('提示',`请确认是否需要删除物业信息（房产证号/不动产权证号：${this.propertyForm.houseInfoList[index].certificate}）?`,()=>{
|
delHouse({ serialNo: this.propertyForm.houseInfoList[index].serialno }).then(async res => {
|
if (res.code == "00") {
|
this.$message.success("删除成功");
|
// 查询物业信息
|
const res = await this.getHouseList();
|
this.getPropertyData(res);
|
this.tabIndex = `${ index-1 >= 0 ? index-1 : index }`
|
}
|
});
|
})
|
} else {
|
this.propertyForm.houseInfoList.splice(index, 1);
|
this.propertyArr.houseInfoList.splice(index, 1);
|
this.tabIndex = `${ index-1 >= 0 ? index-1 : index }`
|
}
|
},
|
closeDialog(data){
|
this.propertyForm.houseInfoList[data].isOwner = false
|
},
|
sendProperty(data){
|
this.$set(this.propertyForm,data.index,data)
|
},
|
sendPropertyForm(data) {
|
this.$set(this.propertyForm,data.index,data)
|
}
|
},
|
beforeRouteLeave(to, from, next) {
|
!this.propertyForm.houseInfoList.length||common.compareFormData(this.initialArr.houseInfoList,this.propertyForm.houseInfoList,next)?next():''
|
}
|
};
|
</script>
|
