<template>
|
<div class="product">
|
<el-tabs v-model="tabIndex" type="card" @tab-remove='delBuyer'>
|
<el-tab-pane
|
v-for="(item, index) in buyerForm"
|
:key="index"
|
:label="item.customername?item.customername:'买方'"
|
:name="index+''"
|
:closable="index!=0&&(applyInfo.phaseNo=='0010')"
|
>
|
<el-form
|
:model="buyerForm[index]"
|
:rules="rules"
|
ref="buyerForm"
|
label-width="165px"
|
inline
|
size="small"
|
style="margin-bottom: 36px"
|
>
|
<el-form-item label="姓名" v-if="buyerArr[index].customername.visible" prop="customername">
|
<el-input
|
v-model="buyerForm[index].customername"
|
:disabled="!buyerArr[index].customername.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="性别" v-if="buyerArr[index].sex.visible" prop="sex">
|
<el-select
|
v-model="buyerForm[index].sex"
|
clearable
|
filterable
|
:disabled="!buyerArr[index].sex.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in sexList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否作为借款人" v-if="buyerArr[index].asborrower.visible" prop="asborrower">
|
<el-select
|
v-model="buyerForm[index].asborrower"
|
clearable
|
filterable
|
:disabled="!buyerArr[index].asborrower.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in YesNo"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="与第一买方关系"
|
v-if="buyerArr[index].firstbuyerrrelationship.visible"
|
prop="firstbuyerrrelationship"
|
>
|
<el-select
|
v-model="buyerForm[index].firstbuyerrrelationship"
|
clearable
|
filterable
|
:disabled="!buyerArr[index].firstbuyerrrelationship.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in borrowerrelationshiplist"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="证件类型" v-if="buyerArr[index].certtype.visible" prop="certtype">
|
<el-select
|
v-model="buyerForm[index].certtype"
|
clearable
|
filterable
|
:disabled="!buyerArr[index].certtype.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in certtypeList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="证件号码" v-if="buyerArr[index].certid.visible" prop="certid">
|
<el-input
|
v-model="buyerForm[index].certid"
|
:disabled="!buyerArr[index].certid.writeAble"
|
@change="buyerForm[index].certid=buyerForm[index].certid.toUpperCase()"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="手机号码" v-if="buyerArr[index].phone.visible" prop="phone">
|
<el-input v-model="buyerForm[index].phone" :disabled="!buyerArr[index].phone.writeAble"></el-input>
|
</el-form-item>
|
<el-form-item label="婚姻状况" v-if="buyerArr[index].marriage.visible" prop="marriage">
|
<el-select
|
v-model="buyerForm[index].marriage"
|
clearable
|
filterable
|
:disabled="!buyerArr[index].marriage.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item,index) in marriageList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
<div class="btn">
|
<el-button
|
size="medium"
|
plain
|
@click="addBuyer"
|
v-if="applyInfo.phaseNo=='0010'"
|
>添加买方</el-button>
|
<el-button
|
size="medium"
|
plain
|
@click="saveDraft(buyerForm)"
|
v-if="applyInfo.phaseNo=='0010'"
|
>保存草稿</el-button>
|
<el-button size="medium" plain @click="save(buyerForm)" 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(buyerForm)"
|
v-if="applyInfo.phaseNo=='0010'"
|
>下一步</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="nextPage()"
|
v-else
|
>下一页</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
qryCustomerInfoList,
|
getProvinceCodeList,
|
getDictionaryList,
|
saveMultipleCustomerInfo,
|
delCustomerInfo,
|
submitMultipleCustomerInfo
|
} from "@/api/product";
|
import { setStorage, getStorage, removeStorage } from "@/utils/storage";
|
import common from "@/utils/common";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
initialArr: [],
|
buyerForm: [],
|
buyerArr: [],
|
marriageList: [],
|
borrowerrelationshiplist: [],
|
certtypeList: [],
|
YesNo: [],
|
sexList: [],
|
rules: {},
|
tabIndex:'0',
|
writeAble:false
|
};
|
},
|
async created() {
|
this.$parent._data.loading = true
|
const result = await this.getCustomerInfoList();
|
this.getBuyerData(result);
|
// 根据字段判断页面是否可编剧
|
this.writeAble = this.buyerArr[0].customername.writeAble
|
// 获取与第一买方关系下拉
|
this.borrowerrelationshiplist = await this.qryDictionaryList(
|
"CustomerRelationShip"
|
);
|
// 证件类型下拉
|
this.certtypeList = await this.qryDictionaryList("CertType");
|
// 获取婚姻状况下拉
|
this.marriageList = await this.qryDictionaryList("MarRiage");
|
// 性别
|
this.sexList = await this.qryDictionaryList("Sex");
|
// 是否作为借款人
|
this.YesNo = await this.qryDictionaryList("YesNo");
|
this.$parent._data.loading = false
|
},
|
methods: {
|
// 处理数据重新排列
|
async getBuyerData(result) {
|
// 初始化数据
|
this.buyerArr = result;
|
this.buyerForm = [];
|
this.initialArr = [];
|
this.buyerArr.forEach(async (val, index) => {
|
// 取数组第一个作为校验规则
|
if (index == 0) {
|
for (const key in val) {
|
this.rules[key] = [];
|
// 自定义规则校验
|
switch (key) {
|
case "customername":
|
this.rules[key].push(common.validate("name"));
|
break;
|
case "phone":
|
this.rules[key].push(common.validate("phone"));
|
break;
|
case "certid":
|
const checkCertid = (rule, value, callback) =>
|
common.checkCertid(
|
this.buyerForm[index].certtype,
|
value,
|
callback
|
);
|
this.rules[key].push({
|
validator: checkCertid,
|
trigger: "change"
|
});
|
break;
|
default:
|
break;
|
}
|
// 必填校验
|
if (val[key].required) {
|
this.rules[key].push({
|
required: true,
|
message: `请输入${val[key].filedDescription}`,
|
trigger: "change"
|
});
|
}
|
}
|
}
|
// 将数据重新排列
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key].value;
|
val[key].value = "";
|
}
|
this.buyerForm.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
},
|
qryDictionaryList(code) {
|
return new Promise(resolve => {
|
getDictionaryList({
|
codeNo: code
|
}).then(res => {
|
resolve(res.result);
|
});
|
});
|
},
|
// 查询买方信息
|
getCustomerInfoList() {
|
return new Promise(resolve => {
|
qryCustomerInfoList({
|
applySerialNo: this.applyInfo.serialNo,
|
sellerorbuyer: "02"
|
}).then(res => {
|
resolve(res.result);
|
});
|
});
|
},
|
// 添加买方
|
addBuyer() {
|
const validateForm = common.validateForm(this.$refs.buyerForm)
|
this.tabIndex = validateForm.index === undefined ? this.tabIndex : '' + validateForm.index
|
if(!validateForm.flag)return;
|
const obj = {};
|
for (const key in this.buyerArr[0]) {
|
obj[key] = this.buyerArr[0][key].value;
|
}
|
this.buyerForm.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
this.buyerArr.push(this.buyerArr[0]);
|
this.tabIndex = `${this.buyerForm.length-1}`
|
},
|
// 保存买方接口
|
saveBuyer(arr) {
|
return new Promise(resolve => {
|
saveMultipleCustomerInfo({
|
customerInfolist: arr
|
}).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 提交买方接口
|
submitBuyer(arr) {
|
return new Promise(resolve => {
|
submitMultipleCustomerInfo({
|
customerInfolist: arr
|
}).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 保存草稿
|
async saveDraft(arr) {
|
for (let i = 0; i < arr.length; i++) {
|
if (!arr[i].customername && !arr[i].certtype && !arr[i].certid) {
|
this.$message.warning("客户名称,证件类型,证件号码不能为空");
|
return;
|
}
|
}
|
this.$parent._data.loading = true;
|
arr.forEach(val => {
|
val.sellerorbuyer = "02";
|
val.applyserialno = this.applyInfo.serialNo;
|
});
|
const res = await this.saveBuyer(arr);
|
if (res.code == "00") {
|
const result = await this.getCustomerInfoList();
|
this.getBuyerData(result);
|
this.$message.success("保存成功");
|
// 保存草稿需要调用父组件的查询左侧tab的方法
|
this.$parent.getApplyTabTree();
|
}
|
this.$parent._data.loading = false;
|
},
|
// 保存
|
async save(arr) {
|
const validateForm = common.validateForm(this.$refs.buyerForm)
|
this.tabIndex = validateForm.index === undefined ? this.tabIndex : '' + validateForm.index
|
if(!validateForm.flag)return;
|
this.$parent._data.loading = true;
|
arr.forEach(val => {
|
val.sellerorbuyer = "02";
|
val.applyserialno = this.applyInfo.serialNo;
|
});
|
const res = await this.saveBuyer(arr);
|
if (res.code == "00") {
|
const result = await this.getCustomerInfoList();
|
this.getBuyerData(result);
|
this.$message.success("保存成功");
|
}
|
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(arr) {
|
const validateForm = common.validateForm(this.$refs.buyerForm)
|
this.tabIndex = validateForm.index === undefined ? this.tabIndex : '' + validateForm.index
|
if(!validateForm.flag)return;
|
this.$parent._data.loading = true;
|
arr.forEach(val => {
|
val.sellerorbuyer = "02";
|
val.applyserialno = this.applyInfo.serialNo;
|
});
|
const res = await this.submitBuyer(arr);
|
if (res.code == "00") {
|
const result = await this.getCustomerInfoList();
|
this.getBuyerData(result);
|
this.nextPage();
|
}
|
this.$parent._data.loading = false;
|
},
|
// 删除
|
delBuyer(index) {
|
if (this.buyerForm[index].serialno) {
|
common.comfirm('提示',`请确认是否删除买方：${this.buyerForm[index].customername}`,()=>{
|
this.$parent._data.loading = true;
|
delCustomerInfo({
|
delInfolist: [
|
{
|
applyserialno: this.applyInfo.serialNo,
|
certid: this.buyerForm[index].certid,
|
certtype: this.buyerForm[index].certtype
|
}
|
]
|
}).then(res => {
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
this.$message.success("删除成功");
|
this.buyerForm.splice(index, 1);
|
this.buyerArr.splice(index, 1);
|
this.tabIndex = `${index-1}`
|
}
|
});
|
})
|
} else {
|
this.buyerForm.splice(index, 1);
|
this.buyerArr.splice(index, 1);
|
this.tabIndex = `${index-1}`
|
}
|
}
|
},
|
beforeRouteLeave(to, from, next) {
|
for (let i = 0; i < this.buyerForm.length; i++) {
|
for (const key in this.buyerForm[i]) {
|
if (this.initialArr[i].hasOwnProperty(key)) {
|
if (this.buyerForm[i][key] != this.initialArr[i][key]) {
|
// 页面有数据未保存
|
common.comfirm("提示", "当前页面有数据未保存，是否放弃保存？", () => {
|
next();
|
});
|
return;
|
}
|
}
|
}
|
}
|
next();
|
}
|
};
|
</script>
|
