<template>
|
<div class="product" ref="product">
|
<div class="infoList">
|
<ul>
|
<li v-if="ownerlArr[0] && ownerlArr[0].ownerNo.visible"><span>车位/储藏室编号</span>：{{ownerlArr?ownerlArr[0].ownerNo.value:''}}</li>
|
<li v-if="ownerlArr[0] && ownerlArr[0].carOwnerNature.visible"><span>车位性质</span>：{{ownerlArr?ownerlArr[0].carOwnerNature.valueDesc:''}}</li>
|
</ul>
|
</div>
|
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
|
<el-tab-pane v-for="(item, index) in ownerlArr" :key="index" :label="item.projectStructureName.value" :name="index.toString()">
|
<el-form :model="ownerlForm[index]" :rules="rules[index]" ref="ownerlForm" label-width="165px" inline
|
size="small">
|
<div class="_block">
|
<p class="title">
|
<span></span>
|
物业明细信息
|
</p>
|
<div class="form">
|
<template v-for="(data, i) in ownerlKey[0]">
|
<el-form-item :label="data.label" v-if="ownerlArr[index][data.field] && ownerlArr[index][data.field].visible" :prop="data.field"
|
:class="{ 'isLong': data.isLong }">
|
<el-input v-model="ownerlForm[index][data.field]" autosize :type="data.field=='houseAddress' ? 'textarea' : data.type || 'input'"
|
:disabled="!ownerlArr[index][data.field].writeAble" v-if="!applyInfoProp">
|
</el-input>
|
<span v-else class="text-span">
|
{{ownerlForm[index][data.field]}}
|
</span>
|
</el-form-item>
|
</template>
|
</div>
|
</div>
|
<div class="_block">
|
<p class="title">
|
<span></span>
|
产权人信息
|
</p>
|
<el-table stripe :data="ownerlForm[index].ownerInfoList"
|
style="margin-top: 30px" class="owner-table"
|
highlight-current-row
|
:header-cell-style="{ background: '#f5f5f5', color: '#222222' }">
|
<el-table-column prop="cstName" label="业主姓名"> </el-table-column>
|
<el-table-column prop="phoneNumber" label="业主手机号"> </el-table-column>
|
<el-table-column prop="certId" label="业主身份证号"> </el-table-column>
|
<el-table-column width="420px" prop="contactAddress" label="联系地址"> </el-table-column>
|
</el-table>
|
|
</div>
|
<div class="_block">
|
<p class="title">
|
<span></span>
|
其他信息 <el-button style="margin-left:20px" size="small" type="primary" @click="reflashbtn">刷新</el-button>
|
</p>
|
<div class="form">
|
<template v-for="(data, i) in ownerlKey[1]">
|
<el-form-item :label="data.label" v-if="ownerlArr[index][data.field] && ownerlArr[index][data.field].visible" :prop="data.field"
|
:class="{ 'isLong': data.isLong }">
|
|
<span v-if="applyInfoProp" class="text-span">
|
{{ownerlForm[index][data.field]}}
|
</span>
|
<el-date-picker
|
v-else-if="data.isDate"
|
v-model="ownerlForm[index][data.field]"
|
type="date"
|
:disabled="!ownerlArr[index][data.field].writeAble"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
placeholder="选择日期"
|
>
|
</el-date-picker>
|
<el-input v-model="ownerlForm[index][data.field]" :type="data.type || 'input'"
|
:disabled="!ownerlArr[index][data.field].writeAble" v-else>
|
</el-input>
|
</el-form-item>
|
</template>
|
</div>
|
|
<el-table stripe :data="ownerlForm[index].priceInfoList"
|
style="margin-top: 30px; "
|
highlight-current-row
|
:header-cell-style="{ background: '#f5f5f5', color: '#222222' }">
|
<el-table-column min-width="100" prop="priceTypeName" label=""> </el-table-column>
|
<el-table-column min-width="200" prop="amount" label="应收">
|
<template slot-scope="scope">
|
{{formatMoney(scope.row.amount)}}
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200" prop="actAmount" label="已收">
|
<template slot-scope="scope">
|
{{formatMoney(scope.row.actAmount)}}
|
</template></el-table-column>
|
<el-table-column min-width="200" prop="uncAmount" label="未收">
|
<template slot-scope="scope">
|
{{formatMoney(scope.row.uncAmount)}}
|
</template></el-table-column>
|
<el-table-column min-width="200" prop="planDate" label="计划时间"> </el-table-column>
|
</el-table>
|
</div>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
<div class="fixedBtn">
|
<!-- <el-button size="medium" plain @click="saveDraft(ownerlForm)" v-if="applyInfo.phaseNo == '0040' && !isReadonly">
|
保存草稿
|
</el-button>
|
<el-button size="medium" plain @click="save(ownerlForm)" 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" >上一步</el-button>
|
<!-- <el-button size="medium" type="primary" @click="submit(ownerlForm)"
|
v-if="(applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0060') && !isReadonly">下一步</el-button> -->
|
<el-button size="medium" type="primary" @click="nextPage()">下一步</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
qryOwnerHouseDetail,
|
// saveMultipleownerlInfo,
|
// submitMultipleownerlInfo,
|
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: [], //初始数据
|
ownerlForm: [],
|
ownerlArr: [],
|
activeName:'0',
|
rules: {},
|
repayTypeList: [],
|
fundUnitList: [],
|
provinceList: [],
|
cityList: [],
|
countyList: [],
|
areaList: [],
|
yesNoList: [],
|
ownerlKey: [[
|
{ field: 'projectStructureName', label: '小区/项目名称' },
|
{ field: 'houseAddress', label: '房产地址' },
|
// { field: 'corporateName', label: '业主姓名' },
|
// { field: 'corporateCertId', label: '业主手机号' },
|
// { field: 'corporatePhone', label: '业主身份证号' },
|
], [
|
{ field: 'loanName', label: '按揭银行名称' },
|
{ field: 'predictLoanDate', label: '按揭发放时间', isDate: true },
|
{ field: 'actDeliveryDate', label: '实际交房时间', isDate: true },
|
{ field: 'rightHandleDate', label: '产权办证日期', isDate: true },
|
{ field: 'consultantName', label: '置业顾问姓名' },
|
{ field: 'tradeStatus', label: '状态' },
|
]]
|
};
|
},
|
async created() {
|
if(!this.applyInfoProp) {
|
this.applyInfo= this.$store.state.product.applyInfo
|
} else{
|
this.applyInfo= this.applyInfoProp
|
}
|
this.$parent._data.loading = true;
|
const ownerlResult = await this.qryOwnerHouseDetail();
|
console.log('ownerlResult',ownerlResult)
|
this.getCollaterData(ownerlResult)
|
|
// // 兑付状态
|
// this.yesNoList = await this.qryDictionaryList('YesNo');
|
this.$parent._data.loading = false;
|
},
|
components: {
|
Branch,
|
},
|
props: {
|
// 申请编号
|
applyInfoProp: {
|
type: Object,
|
defaul: ()=> {
|
return this.$store.state.product.applyInfo
|
}
|
}
|
},
|
methods: {
|
async reflashbtn(){
|
const loading = this.$loading({
|
lock: true,
|
text: '沃土信息更新中...',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
const ownerlResult = await this.qryOwnerHouseDetail('1');
|
if(ownerlResult && ownerlResult.length > 0){
|
this.getCollaterData(ownerlResult)
|
this.$message.success('更新成功')
|
}
|
setTimeout(() => {
|
loading.close();
|
}, 1000);
|
},
|
handleClick(tab){
|
this.activeName = tab.index.toString()
|
},
|
// 金额格式化
|
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)
|
})
|
})
|
},
|
//查询核心企业信息
|
qryOwnerHouseDetail(refresh) {
|
const refreshs =refresh ? {refresh:1} : {}
|
return new Promise((resolve) => {
|
qryOwnerHouseDetail({
|
...refreshs,
|
applySerialNo: this.applyInfo.serialNo,
|
}).then((res) => {
|
resolve(res.result);
|
});
|
});
|
},
|
|
async getCollaterData(result) {
|
this.ownerlArr = [];
|
this.ownerlForm = [];
|
this.initialArr = [];
|
this.ownerlArr.push(...result)
|
this.rules = [];
|
console.log('result',this.ownerlArr)
|
// 初始化数据和校验规则
|
this.ownerlArr.forEach(async (item, index) => {
|
const obj = {};
|
const rule = {}
|
item.obj = {}
|
item.rule = {}
|
for (const key in item) {
|
// 格式化金额
|
if (
|
key == "ownerlAmt" || key == "valuation" || key == "evaluation"
|
) {
|
item[key].value = this.formatMoney(item[key].value);
|
}
|
// 自定义校验规则,涉及金额将进行格式化
|
item.rule[key] = [];
|
if (item[key].required) {
|
item.rule[key].push({
|
required: true,
|
message: `请输入${item[key].filedDescription}`,
|
trigger: "change",
|
});
|
}
|
for (const key in item) {
|
if(key =='ownerInfoList' || key =='priceInfoList') {
|
item.obj[key] = item[key]
|
}
|
else if(typeof item[key] == 'object' ) {
|
item.obj[key] = item[key].value;
|
}
|
}
|
}
|
});
|
this.ownerlArr.forEach(res=>{
|
this.ownerlForm.push(res.obj);
|
this.initialArr.push(Object.assign({}, res.obj));
|
this.rules.push(res.rule)
|
})
|
},
|
|
// // 提交接口
|
// submitInfo(arr) {
|
// return new Promise((resolve) => {
|
// arr.forEach(val => {
|
// for (const key in val) {
|
// // 格式化金额
|
// if (
|
// key == "ownerlAmt" || key == "valuation" || key == "evaluation"
|
// ) {
|
// val[key] = this.moneyFomatNumber(val[key], 2);
|
// }
|
// }
|
// })
|
// submitMultipleownerlInfo({ 'ownerlInfoList': arr }).then((res) => {
|
// resolve(res);
|
// });
|
// });
|
// },
|
// 上一步或上一页
|
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.ownerlForm).flag) return;
|
this.$parent._data.loading = true;
|
const res = await this.submitInfo(arr);
|
if (res.code == "00") {
|
const ownerlResult = await this.qryOwnerHouseDetail();
|
this.getCollaterData(ownerlResult.ownerlInfoList)
|
this.$parent._data.loading = false;
|
this.nextPage();
|
}
|
},
|
// 下一页
|
nextPage() {
|
// 调用父组件的查询左侧tab的方法
|
this.$parent.updateApplyTabTree("沃土信息");
|
},
|
},
|
// beforeRouteLeave(to, from, next) {
|
// !this.ownerlForm.length ||
|
// common.compareFormData(this.initialArr, this.ownerlForm, next)
|
// ? next()
|
// : "";
|
// },
|
};
|
</script>
|
<style>
|
.product .form .el-form-item.isLong {
|
width: 100% !important;
|
}
|
.product .form .text-span {
|
|
display: inline-flex;
|
height: 40px;
|
align-items: center;
|
vertical-align: middle;
|
line-height: 24px;
|
min-width: 40px;
|
}
|
.product .infoList ul li{
|
display: inline-block;
|
margin-right: 30px;
|
margin-bottom: 20px;
|
margin-top: 10px;
|
}
|
</style>
|
