<template>
|
<div class="ownerList">
|
<div class="list-content">
|
<FormList
|
:info="formInfo"
|
:isShowDetail="false"
|
@handleClick="isShowDetail = !isShowDetail"
|
@updateValue="updateValue"
|
:buttonsList="[1, 2]"
|
@onSubmit="onSubmit"
|
@setValueInfo="setValueInfo"
|
:isChangeArray="false"
|
></FormList>
|
<div class="tabContent" v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-text="拼命加载中">
|
<el-tabs v-model="activeName" @tab-click="handleClick" v-if="ownerlArr && ownerlArr.length >0" 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]"
|
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 }"
|
>
|
<span 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>
|
其他信息
|
</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 class="text-span">
|
{{ ownerlForm[index][data.field] }}
|
</span>
|
</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>
|
<div v-if="ownerlArr && ownerlArr.length <1" class="nodata">
|
请输入客户姓名和身份证号查询沃土信息
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
/**
|
* 贷款合同发送
|
*/
|
import FormList from "./components/FormList";
|
import { qryOwnerHouseDetail } from "@/api/product";
|
|
export default {
|
components: {
|
FormList,
|
},
|
data() {
|
return {
|
// 搜索表单字段及描述
|
formInfo: [
|
{
|
type: "input",
|
label: "客户姓名",
|
value: "",
|
name: "custName",
|
},
|
{
|
type: "input",
|
label: "身份证号",
|
value: "",
|
name: "certId",
|
},
|
],
|
initialArr: [], //初始数据
|
// 表单结果数据
|
fullscreenLoading:false,
|
valueInfo: {},
|
isShowDetail: false,
|
isClick:0,
|
activeName: "0",
|
ownerlForm: [],
|
ownerlArr: [],
|
objectType: "ContractSendApply",
|
// 是否显示所有表单项
|
loading: '',
|
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: "状态" },
|
],
|
],
|
};
|
},
|
created() {
|
},
|
methods: {
|
// 页面初始化处理
|
async init() {
|
this.getList();
|
const ownerlResult = await this.qryOwnerHouseDetail();
|
console.log('ownerlResult',ownerlResult)
|
this.loading.colse()
|
this.getCollaterData(ownerlResult);
|
},
|
handleClick(tab) {
|
this.activeName = tab.index.toString();
|
},
|
// 设置表单结果数据
|
setValueInfo(info = {}) {
|
this.valueInfo = info;
|
},
|
|
// 获取当前数据列表
|
async getList() {
|
const ownerlResult = await this.qryOwnerHouseDetail();
|
this.fullscreenLoading = false
|
console.log("ownerlResult", ownerlResult);
|
this.getCollaterData(ownerlResult);
|
},
|
//查询核心企业信息
|
qryOwnerHouseDetail() {
|
return new Promise((resolve) => {
|
qryOwnerHouseDetail({
|
certId: this.valueInfo.certId || '',
|
custName: this.valueInfo.custName || '',
|
}).then((res) => {
|
resolve(res.result);
|
})
|
});
|
},
|
// 更新数据
|
updateValue(value, item) {
|
let { name } = item;
|
this.setOrGetFormInfo(name, { value });
|
},
|
|
async getCollaterData(result) {
|
this.ownerlArr = [];
|
this.ownerlForm = [];
|
this.initialArr = [];
|
this.ownerlArr.push(...result);
|
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] = [];
|
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));
|
});
|
},
|
// 金额格式化
|
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;
|
}
|
},
|
// 更新表单数据或查找某项数据
|
setOrGetFormInfo(nameKey, newInfo) {
|
let { formInfo } = this;
|
let index = formInfo.findIndex(({ name }) => name === nameKey);
|
let result = {};
|
if (!isNaN(index)) {
|
this.$set(this.formInfo, index, { ...formInfo[index], ...newInfo });
|
result = this.formInfo[index];
|
}
|
if (typeof newInfo === "undefined") {
|
return result;
|
}
|
},
|
// 查询操作
|
onSubmit() {
|
if(this.valueInfo.certId && this.valueInfo.certId){
|
this.fullscreenLoading = true;
|
this.isClick = this.isClic
|
this.getList();
|
return
|
}else{
|
this.ownerlForm = []
|
this.ownerlArr = []
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="postcss" scoped>
|
.list-content {
|
font-size: 14px;
|
}
|
.export-excle {
|
margin: 20px 0;
|
}
|
.ownerList {
|
|
& >>> .form {
|
width: 100%;
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-pack: start;
|
-ms-flex-pack: start;
|
justify-content: flex-start;
|
-ms-flex-wrap: wrap;
|
flex-wrap: wrap;
|
}
|
& >>> .el-form{
|
width: 100%;
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-pack: start;
|
-ms-flex-pack: start;
|
justify-content: flex-start;
|
-ms-flex-wrap: wrap;
|
flex-wrap: wrap;
|
}
|
|
|
& >>> .form .el-form-item .el-form-item__label {
|
line-height: 16px;
|
}
|
& >>> .form .el-form-item .el-form-item__content {
|
/* width: 100%; */
|
line-height: 22px;
|
vertical-align: middle;
|
}
|
|
& >>> ._block {
|
width: 100%;
|
margin: 0
|
}
|
|
& >>> .el-form-item {
|
align-items: center;
|
display: flex;
|
width: 33.33%;
|
margin: 0 0 24px 0;
|
padding-right: 60px;
|
box-sizing:border-box ;
|
}
|
& >>> .el-table {
|
|
padding-right: 40px;
|
}
|
|
|
& >>> .title {
|
|
margin: 30px 0 20px 0;
|
padding: 0 0 0 10px;
|
border-left: solid 2px #0081F0;
|
line-height: 16px;
|
font-size: 14px;
|
color: #222222;
|
}
|
|
& >>> .btn, & >>> .fixedBtn {
|
display: none;
|
}
|
|
& >>> .el-input.is-disabled .el-input__inner {
|
border: none;
|
background: none;
|
}
|
}
|
.nodata{
|
text-align: center;
|
padding-top: 150px;
|
border-top: 1px solid #eee;
|
color: #827f7f;
|
}
|
</style>
|
