<template>
|
<div class="owner">
|
<p>
|
<span></span>
|
产权人明细信息
|
</p>
|
<el-button
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
v-if="show"
|
@click="addowner"
|
size="medium"
|
>新增产权人</el-button>
|
<el-button
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
size="medium"
|
@click="selectOwner"
|
v-if="(applyInfo.flowno == 'MortgageFlow' || applyInfo.flowno == 'BuildingBusinessFlow') && show"
|
>选择产权人</el-button>
|
<el-table
|
stripe
|
:data="ownerData"
|
style="margin-top:30px"
|
highlight-current-row
|
:cell-style="cell"
|
:header-cell-style="{background:'#f5f5f5',color:'#222222'}"
|
>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">产权人姓名</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.propertyowner}}</span>
|
<el-input
|
style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.propertyowner"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">产权人证件类型</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:8px" v-show="!row.isEdit">{{row.certtypeDesc}}</span>
|
<el-select
|
style="display:block;padding-left:15px"
|
v-model="row.certtype"
|
filterable
|
placeholder="请选择"
|
size="small"
|
v-show="row.isEdit"
|
>
|
<el-option
|
v-for="item in certtypeList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">产权人证件号码</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:8px" v-show="!row.isEdit">{{row.certid}}</span>
|
<el-input
|
style="padding-left:15px"
|
maxlength="50"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.certid"
|
placeholder="请输入"
|
@change="row.certid = row.certid.toUpperCase()"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="产权人管理" min-width="110" v-if="show">
|
<template slot-scope="scope">
|
<el-button type="text" @click.native="handleEdit(scope.row)" v-if="!scope.row.isEdit">修改</el-button>
|
<el-button type="text" @click.native="handleSave(scope.row,scope.$index)" v-else>保存</el-button>
|
<el-button type="text" @click.native="handleCancel(scope.row,scope.$index)" v-if="scope.row.isCancel">取消</el-button>
|
<el-button type="text" @click.native="handleDelete(scope.row,scope.$index)" v-else>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<script>
|
import {
|
qryPropertyList,
|
getDictionaryList,
|
delProperty,
|
saveProperty
|
} from "@api/product";
|
import { setStorage, getStorage } from "@/utils/storage";
|
import common from '@/utils/common'
|
export default {
|
props: ["propertyData", "index", "show", "propertyList"],
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
ownerData: [],
|
ownerForm: [],
|
initialArr: [],
|
certtypeList: []
|
};
|
},
|
computed: {
|
isowner() {
|
return this.propertyData.isowner;
|
}
|
},
|
watch: {
|
isowner(val) {
|
this.getOwnerInfo(val);
|
},
|
propertyList(array) {
|
this.ownerData = array;
|
},
|
propertyData() {
|
this.getPropertyList();
|
}
|
},
|
created() {
|
const that = this;
|
if (this.propertyData.serialno) {
|
// 查询产权人信息,这里不直接用getPropertyList是因为一开始只要调用一次
|
qryPropertyList({
|
applyserialno: this.applyInfo.serialNo,
|
relativeserialno: this.propertyData.serialno
|
}).then(res => {
|
this.ownerData = [];
|
this.initialArr = [];
|
this.ownerForm = res.result;
|
if (res.result.length) {
|
res.result.forEach(val => {
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key].value;
|
obj.certtypeDesc = val["certtype"].valueDesc;
|
}
|
this.ownerData.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
}
|
this.propertyData.index = this.index;
|
this.propertyData.propertyList = this.ownerData;
|
this.$emit("sendPropertyForm", this.propertyData);
|
if (this.propertyData.isowner) {
|
this.getOwnerInfo(this.propertyData.isowner);
|
}
|
});
|
}
|
// 证件类型列表
|
this.qryDictionaryList("CertType", function(arr) {
|
that.certtypeList = arr;
|
});
|
},
|
methods: {
|
cell({ row, column, rowIndex, columnIndex }) {
|
const { applyInfo, index } = this;
|
const { refuseFlag } = applyInfo;
|
if (refuseFlag == 1) {
|
const { houseInfoBatch } = this.$store.state.product.fields;
|
const { propertyList } = houseInfoBatch[index]
|
for (let i = 0; i < propertyList.length; i++) {
|
const object = propertyList[i];
|
for (const key in object) {
|
if (row[key] != object[key] && column.property == key) {
|
return { color: "#222", "font-weight": "700" };
|
}
|
}
|
}
|
}
|
},
|
selectOwner(){
|
this.$emit('selectOwner',true)
|
},
|
async getOwnerInfo(val) {
|
if (val == 1) {
|
// 是产权人需要自动添加产权人信息
|
if (this.propertyData.serialno) {
|
// 如果产权人已经有产权人信息则直接return,没有则调接口保存产权人
|
for (let index = 0; index < this.ownerData.length; index++) {
|
if (this.ownerData[index].certid == this.propertyData.certid) {
|
return;
|
}
|
}
|
const res = await this.save({
|
applyserialno: this.applyInfo.serialNo,
|
relativeserialno: this.propertyData.serialno,
|
propertyowner: this.propertyData.customername,
|
certtype: this.propertyData.cuscerttype,
|
certid: this.propertyData.certid
|
});
|
if (res.code == "00") {
|
this.getPropertyList();
|
}
|
} else {
|
this.certtypeList.forEach(val => {
|
if (this.propertyData.cuscerttype == val.itemno) {
|
this.ownerData.unshift({
|
certtypeDesc: val.itemname,
|
propertyowner: this.propertyData.customername,
|
certtype: this.propertyData.cuscerttype,
|
certid: this.propertyData.certid,
|
applyserialno: this.applyInfo.serialNo
|
});
|
}
|
});
|
}
|
} else {
|
// 非产权人需要删除借款人的产权信息
|
if (this.propertyData.serialno) {
|
this.ownerData.forEach(async val => {
|
if (val.certid == this.propertyData.certid) {
|
const res = await this.del(val.serialno);
|
if (res.code == "00") {
|
this.getPropertyList();
|
}
|
}
|
});
|
} else {
|
this.ownerData.forEach((val, index) => {
|
if (val.certid == this.propertyData.certid) {
|
this.ownerData.splice(index, 1);
|
}
|
});
|
}
|
}
|
this.propertyData.index = this.index;
|
this.propertyData.propertyList = this.ownerData;
|
this.$emit("sendPropertyForm", this.propertyData);
|
},
|
qryDictionaryList(code, callback) {
|
getDictionaryList({
|
codeNo: code
|
}).then(res => {
|
callback(res.result);
|
});
|
},
|
// 查询产权人信息
|
getPropertyList() {
|
if(!this.propertyData.serialno)return
|
qryPropertyList({
|
applyserialno: this.applyInfo.serialNo,
|
relativeserialno: this.propertyData.serialno
|
}).then(res => {
|
this.ownerData = [];
|
this.ownerForm = res.result;
|
if (res.result.length) {
|
res.result.forEach(val => {
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key].value;
|
obj.certtypeDesc = val["certtype"].valueDesc;
|
}
|
this.ownerData.push(obj);
|
});
|
}
|
this.propertyData.index = this.index;
|
this.propertyData.propertyList = this.ownerData;
|
this.$emit("sendPropertyForm", this.propertyData);
|
});
|
},
|
// 添加产权人
|
addowner() {
|
for (let i = 0; i < this.ownerData.length; i++) {
|
if (this.ownerData[i].isEdit) {
|
this.$message.warning("请先保存当前产权人信息再新增");
|
return;
|
}
|
}
|
this.ownerData.unshift({
|
propertyowner: "",
|
certtypeDesc: "",
|
certid: "",
|
isEdit: true
|
});
|
},
|
// 保存
|
async handleSave(row, index) {
|
if (!row.propertyowner) {
|
this.$message.warning("产权人姓名不能为空");
|
return;
|
}
|
if (!row.certtype) {
|
this.$message.warning("产权人证件类型不能为空");
|
return;
|
}
|
if (!row.certid) {
|
this.$message.warning("产权人证件号码不能为空");
|
return;
|
}
|
if (
|
!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(
|
row.certid
|
) &&
|
row.certtype == "01"
|
) {
|
this.$message.warning("产权人证件号码格式不正确");
|
return;
|
}
|
for (let i = 0; i < this.ownerData.length; i++) {
|
if (
|
index != i &&
|
row.certid == this.ownerData[i].certid &&
|
row.certtype == this.ownerData[i].certtype &&
|
row.propertyowner == this.ownerData[i].propertyowner
|
) {
|
this.$message.warning("产权人已存在,请重新填写");
|
return;
|
}
|
}
|
row.applyserialno = this.applyInfo.serialNo;
|
if (this.propertyData.serialno) {
|
row.relativeserialno = this.propertyData.serialno;
|
// 同步返回保存是否成功
|
const res = await this.save(row);
|
if (res.code == "00") {
|
this.getPropertyList();
|
} else {
|
return;
|
}
|
} else {
|
this.certtypeList.forEach(val => {
|
if (row.certtype == val.itemno) {
|
this.$set(row, "isEdit", false);
|
this.$set(row, "certtypeDesc", val.itemname);
|
}
|
});
|
this.propertyData.index = this.index;
|
this.propertyData.propertyList = this.ownerData;
|
this.$emit("sendPropertyForm", this.propertyData);
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if(i == index){
|
return;
|
}
|
}
|
this.initialArr.push(Object.assign({}, row));
|
}
|
},
|
// 保存接口
|
save(row) {
|
return new Promise(resolve => {
|
saveProperty(row).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 删除接口
|
del(serialno) {
|
return new Promise(resolve => {
|
delProperty({ serialNo: serialno }).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 修改
|
handleEdit(row) {
|
for (let i = 0; i < this.ownerData.length; i++) {
|
if (this.ownerData.length > 1 && this.ownerData[i].isEdit) {
|
this.$message.warning("请先保存当前产权人信息");
|
return;
|
}
|
}
|
this.$set(row, "isEdit", true);
|
this.$set(row, "isCancel", true);
|
},
|
// 取消
|
handleCancel(row,index){
|
const arr = []
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if(i == index){
|
for (const key in row) {
|
if(key != 'isEdit' && key != 'isCancel' && row[key] != this.initialArr[i][key]){
|
arr.push(key)
|
}
|
}
|
}
|
}
|
if(arr.length){
|
common.comfirm('提示','当前有数据未保存，是否放弃保存？',()=>{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
arr.forEach(val => {
|
for (const key in this.initialArr[index]) {
|
if (this.initialArr[index].hasOwnProperty(val)) {
|
this.ownerData[index][key] = this.initialArr[index][key]
|
}
|
}
|
});
|
})
|
}else{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
}
|
},
|
// 删除
|
handleDelete(row, index) {
|
for (let i = 0; i < this.ownerData.length; i++) {
|
if (this.ownerData.length == 1 && !this.ownerData[i].isEdit) {
|
this.$message.warning("至少保留一个产权人信息");
|
return;
|
}
|
}
|
if(!row.isEdit){
|
common.comfirm('提示',`请确认是否需要产权人：${row.propertyowner}?`,async ()=>{
|
if (row.serialno) {
|
const res = await this.del(row.serialno);
|
if (res.code == "00") {
|
this.$message.success("删除成功");
|
this.getPropertyList();
|
}
|
}else{
|
this.getPropertyList();
|
}
|
})
|
}else{
|
this.getPropertyList();
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="stylus">
|
.owner
|
width: 100%;
|
padding-left 10px
|
.red-star
|
width 7px
|
display inline-block
|
vertical-align: middle;
|
color: #FF4300;
|
>.el-button
|
padding 9px 12px
|
>p
|
height: 20px;
|
color: #222222;
|
font-weight: 500;
|
font-size: 14px;
|
position: relative;
|
margin-bottom: 30px;
|
span
|
width: 2px;
|
height: 14px;
|
background-color: #0081F0;
|
position: absolute;
|
left: -10px;
|
top: 50%;
|
transform: translateY(-50%);
|
</style>
|
