<template>
|
<div class="product">
|
<div class="borrower" v-for="(item, index) in borrowerArr" :key="index">
|
<el-form
|
:model="borrowerForm[0]"
|
:rules="rules"
|
ref="borrowerForm"
|
size="small"
|
inline
|
:style="{ 'margin-bottom': '36px' }"
|
label-width="165px"
|
>
|
<p class="title">
|
<span></span>
|
质押物信息
|
</p>
|
<div class="form">
|
<el-form-item
|
label="出质人类型"
|
v-if="borrowerArr[index].borrowerType.visible"
|
prop="borrowerType"
|
>
|
<el-select
|
v-model="borrowerForm[index].borrowerType"
|
clearable
|
filterable
|
:disabled="!borrowerArr[index].borrowerType.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in borrowertypeList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="出质人名称"
|
v-if="borrowerArr[index].debtorName.visible"
|
prop="debtorName"
|
:required="borrowerArr[index].debtorName.required"
|
>
|
<el-autocomplete
|
style="width: 100%"
|
clearable
|
v-model="borrowerForm[index].debtorName"
|
:fetch-suggestions="remoteMethod"
|
placeholder="请输入内容"
|
@select="setCertid"
|
:disabled="!borrowerArr[index].debtorName.writeAble"
|
></el-autocomplete>
|
</el-form-item>
|
<el-form-item
|
label="出质人证件类型"
|
v-if="borrowerArr[index].debtorCertType.visible"
|
prop="debtorCertType"
|
>
|
<el-select
|
v-model="borrowerForm[index].debtorCertType"
|
filterable
|
clearable
|
placeholder="支持输入搜索选择"
|
:disabled="!borrowerArr[index].debtorCertType.writeAble"
|
>
|
<el-option
|
v-for="item in debtorCertTypeList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 出质人证件类型，个人是身份证，企业为统一信用代码 -->
|
<el-form-item
|
:label="
|
borrowerArr[index].borrowerType.value === '01'
|
? '出质人统一社会信用代码'
|
: '出质人身份证号码'
|
"
|
label-width="200px"
|
v-if="borrowerArr[index].debtorCertId.visible"
|
prop="debtorCertId"
|
:required="borrowerArr[index].debtorCertId.required"
|
>
|
<el-input
|
v-model="borrowerForm[index].debtorCertId"
|
:disabled="!borrowerArr[index].debtorCertId.writeAble"
|
placeholder="请输入"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item
|
label="法人名称"
|
v-if="borrowerArr[index].corporaterName.visible"
|
prop="corporaterName"
|
:required="borrowerArr[index].corporaterName.required"
|
>
|
<el-input
|
v-model="borrowerForm[index].corporaterName"
|
:disabled="!borrowerArr[index].corporaterName.writeAble"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="法人证件号码"
|
v-if="borrowerArr[index].corporaterCertId.visible"
|
prop="corporaterCertId"
|
:required="borrowerArr[index].corporaterCertId.required"
|
>
|
<el-input
|
v-model="borrowerForm[index].corporaterCertId"
|
:disabled="!borrowerArr[index].corporaterCertId.writeAble"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="法人手机号码"
|
v-if="borrowerArr[index].corporaterPhone.visible"
|
prop="corporaterPhone"
|
:required="borrowerArr[index].corporaterPhone.required"
|
>
|
<el-input
|
v-model="borrowerForm[index].corporaterPhone"
|
:disabled="!borrowerArr[index].corporaterPhone.writeAble"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
label="通讯地址（省）"
|
v-if="borrowerArr[index].province.visible"
|
prop="province"
|
>
|
<el-select
|
v-model="borrowerForm[index].province"
|
filterable
|
clearable
|
:disabled="!borrowerArr[index].province.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="
|
getprovince(
|
borrowerForm[index].province,
|
'pledgeInfoList',
|
borrowerForm[index],
|
function (arr) {
|
pledgeInfoList = arr;
|
}
|
)
|
"
|
>
|
<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="borrowerArr[index].city.visible"
|
prop="city"
|
>
|
<el-select
|
v-model="borrowerForm[index].city"
|
filterable
|
clearable
|
:disabled="!borrowerArr[index].city.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="
|
getcity(
|
borrowerForm[index].city,
|
'pledgeInfoCountyList',
|
borrowerForm[index],
|
function (arr) {
|
pledgeInfoCountyList = arr;
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(item, index) in pledgeInfoList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item
|
:label="borrowerArr[index].county.filedDescription"
|
v-if="borrowerArr[index].county.visible"
|
prop="county"
|
>
|
<el-select
|
v-model="borrowerForm[index].county"
|
filterable
|
clearable
|
:disabled="!borrowerArr[index].county.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item, index) in pledgeInfoCountyList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
:label="borrowerArr[index].address.filedDescription"
|
v-if="borrowerArr[index].address.visible"
|
prop="address"
|
>
|
<el-input
|
type="textarea"
|
autosize
|
v-model="borrowerForm[index].address"
|
:disabled="!borrowerArr[index].address.writeAble"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-col :span="24">
|
<el-form-item
|
label="质押财产描述"
|
v-if="applyInfo.occurtype != '01'"
|
prop="pledgedDesc"
|
class="pledged-desc-form-item"
|
>
|
<el-input
|
:rows="5"
|
type="textarea"
|
v-model="borrowerForm[index].pledgedDesc"
|
:disabled="!borrowerArr[index].pledgedDesc.writeAble"
|
style="width: 300%"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</div>
|
<div
|
class="borrower"
|
v-if="applyInfo.occurtype != '01'"
|
style="width: 100%"
|
>
|
<p class="title">
|
<span></span>
|
质押财产明细
|
</p>
|
<el-button
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
v-if="writeAble"
|
@click="addPledge"
|
size="medium"
|
>新增</el-button
|
>
|
<el-table
|
stripe
|
:data="pledgeData"
|
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 style="padding-left: 8px">货物名称</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px" v-show="!row.isEdit">{{
|
row.goodsName
|
}}</span>
|
<el-input
|
style="padding-left: 15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.goodsName"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">货柜号</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px" v-show="!row.isEdit">{{
|
row.containerNo
|
}}</span>
|
<el-input
|
style="padding-left: 15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.containerNo"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">货物价值</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 15px" v-show="!row.isEdit">{{
|
row.goodsValues
|
}}</span>
|
<el-input
|
style="padding-left: 15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.goodsValues"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="110" v-if="writeAble">
|
<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>
|
</el-form>
|
</div>
|
<div :class="[applyInfo.phaseNo >= '0040' ? 'fixedBtn' : 'btn']">
|
<!-- <el-button
|
size="medium"
|
plain
|
@click="saveDraft"
|
v-if="
|
(applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0010') &&
|
!isReadonly
|
"
|
>保存草稿</el-button
|
> -->
|
<el-button size="medium" plain @click="save" v-if="writeAble"
|
>保存</el-button
|
>
|
<el-button
|
size="medium"
|
plain
|
@click="prevStep"
|
v-if="
|
(applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0010') &&
|
!isReadonly
|
"
|
>上一步</el-button
|
>
|
<el-button size="medium" plain @click="prevStep" v-else>上一步</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="submit()"
|
v-if="
|
(applyInfo.phaseNo == '0040' ||
|
applyInfo.phaseNo == '0010' ||
|
applyInfo.phaseNo == '0060') &&
|
!isReadonly
|
"
|
>下一步</el-button
|
>
|
<el-button size="medium" type="primary" @click="nextPage()" v-else
|
>下一步</el-button
|
>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
getDictionaryList,
|
getPledgedInfo,
|
savePledgedInfo,
|
qryPledgedDetailList,
|
findDataByNameOrCodes,
|
savePledgedDetailInfo,
|
delPledgedDetailInfo,
|
getProvinceCodeList,
|
} from "@/api/product";
|
import common from "@/utils/common";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
pledgedSerialNo: "", //质押信息流水号
|
initialArr: [], //初始化数据
|
borrowerForm: [],//质押信息form表单
|
borrowerArr: [],//质押信息数据
|
rules: {},
|
borrowertypeList: [],
|
debtorCertTypeList: [],
|
options: [],
|
pledgeData: [], //质押物数据本地增删改
|
initialPledgeDataArr: [], //质押物数据初始状态
|
pledgeForm: [], //服务器返回质押物数据数据
|
writeAble: true,
|
provinceList: [],
|
pledgeInfoList: [],
|
pledgeInfoCountyList: [],
|
};
|
},
|
computed: {
|
isReadonly() {
|
return (
|
this.$parent._data.applyMenu[this.$parent._data.activeIndex].readonly ==
|
"Y"
|
);
|
},
|
},
|
components: {},
|
async created() {
|
this.requestGetPledgedInfo();
|
this.requestqryPledgedDetailList();
|
//借款人类型选项
|
this.borrowertypeList = await this.qryDictionaryList("BorrowerType");
|
this.debtorCertTypeList = await this.qryDictionaryList("CertType");
|
},
|
methods: {
|
async requestGetPledgedInfo() {
|
const resp = await getPledgedInfo({
|
applySerialNo: this.applyInfo.serialNo,
|
});
|
this.pledgedSerialNo = resp.result.serialNo.value;
|
this.getPledgeInfo(resp.result);
|
},
|
//查询质押明细列表
|
async requestqryPledgedDetailList() {
|
const resp = await qryPledgedDetailList({
|
applySerialNo: this.applyInfo.serialNo,
|
pledgedSerialNo: this.pledgedSerialNo,
|
});
|
this.pledgeData = [];
|
this.initialPledgeDataArr = [];
|
this.pledgeForm = resp.result;
|
if (resp.result.length) {
|
resp.result.forEach((val) => {
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key];
|
}
|
this.pledgeData.push(obj);
|
this.initialPledgeDataArr.push(Object.assign({}, obj));
|
});
|
}
|
},
|
//单元格css
|
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" };
|
}
|
}
|
}
|
}
|
},
|
// 远程搜索枚举值
|
async remoteMethod(columnValue = "", cb) {
|
var results = [];
|
if (!columnValue) {
|
this.options = [];
|
return;
|
}
|
await findDataByNameOrCodes({ code: columnValue })
|
.then((res) => {
|
if (res.result) {
|
const list = res.result.map((res) => {
|
res.value = res.name;
|
res.id = res.creditCode;
|
return res;
|
});
|
cb(list);
|
}
|
})
|
.catch((err) => {
|
this.options = [];
|
this.lodingy = false;
|
});
|
},
|
setCertid(e) {
|
if (e.creditCode) {
|
// this.$set(this.$refs.borrowerForm, "debtorCertId", e.creditCode);
|
// this.$set(this.$refs.borrowerForm, "debtorName", e.name);
|
this.borrowerForm[0].debtorName = e.name;
|
this.borrowerForm[0].debtorCertId = e.creditCode;
|
// this.qryEnterpriseList()
|
}
|
},
|
qryDictionaryList(code) {
|
return new Promise((resolve) => {
|
getDictionaryList({
|
codeNo: code,
|
}).then((res) => {
|
resolve(res.result);
|
});
|
});
|
},
|
// 处理数据,将数据重新排列
|
async getPledgeInfo(result) {
|
this.borrowerArr = [];
|
this.borrowerForm = [];
|
this.initialArr = [];
|
this.borrowerArr.push(result);
|
// 取数组第一个作为校验规则
|
this.borrowerArr.forEach((val, index) => {
|
if (index == 0) {
|
for (const key in val) {
|
this.rules[key] = [];
|
// 自定义规则校验
|
switch (key) {
|
case "debtorName":
|
this.rules[key].push({
|
required: true,
|
message: "请输入出质人名称",
|
trigger: "blur",
|
});
|
break;
|
case "debtorCertId":
|
this.rules[key].push({
|
required: true,
|
message: "请输入出质人证件号码",
|
trigger: "blur",
|
});
|
break;
|
case "corporaterName":
|
this.rules[key].push({
|
required: true,
|
message: "请输入法人名称",
|
trigger: "blur",
|
});
|
break;
|
case "corporaterCertId":
|
this.rules[key].push({
|
required: true,
|
message: "请输入法人证件号码",
|
trigger: "blur",
|
});
|
break;
|
case "corporaterPhone":
|
this.rules[key].push({
|
required: true,
|
message: "请输入法人手机号",
|
trigger: "blur",
|
});
|
this.rules[key].push(common.validate("phone"));
|
break;
|
case "province":
|
this.rules[key].push({
|
required: true,
|
message: "请选择通讯地址（省）",
|
trigger: "blur",
|
});
|
break;
|
case "city":
|
this.rules[key].push({
|
required: true,
|
message: "请选择通讯地址（市）",
|
trigger: "blur",
|
});
|
break;
|
case "county":
|
this.rules[key].push({
|
required: true,
|
message: "请选择通讯地址（区）",
|
trigger: "blur",
|
});
|
break;
|
case "address":
|
this.rules[key].push({
|
required: true,
|
message: "请输入详细地址",
|
trigger: "blur",
|
});
|
break;
|
default:
|
break;
|
}
|
}
|
}
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key].value;
|
}
|
this.borrowerForm.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
// 获取省枚举值
|
getProvinceCodeList({}).then((res) => {
|
this.provinceList = res.result;
|
});
|
// 根据省获取市
|
this.borrowerForm[0].province
|
? (this.pledgeInfoList = await common.qryCityCodeList(
|
this.borrowerForm[0].province
|
))
|
: "";
|
// 根据市获取区
|
this.borrowerForm[0].city
|
? (this.pledgeInfoCountyList = await common.qryAreaCodeList(
|
this.borrowerForm[0].city
|
))
|
: "";
|
},
|
//新增质押物
|
addPledge() {
|
for (let i = 0; i < this.pledgeData.length; i++) {
|
if (this.pledgeData[i].isEdit) {
|
this.$message.warning("请先保存当前担保人信息再新增");
|
return;
|
}
|
}
|
this.pledgeData.unshift({
|
goodsName: "", //货物名称
|
containerNo: "", //货柜号
|
goodsValues: "", //货物价值
|
isEdit: true,
|
});
|
},
|
//修改质押财产列表信息
|
handleEdit(row) {
|
for (let i = 0; i < this.pledgeData.length; i++) {
|
if (this.pledgeData.length > 1 && this.pledgeData[i].isEdit) {
|
this.$message.warning("请先保存当前担保人信息");
|
return;
|
}
|
}
|
this.$set(row, "isEdit", true);
|
this.$set(row, "isCancel", true);
|
},
|
async handleSave(row, index) {
|
if (!row.goodsName) {
|
this.$message.warning("货物名称不能为空");
|
return;
|
}
|
if (!row.containerNo) {
|
this.$message.warning("货柜号不能为空");
|
return;
|
}
|
if (!row.goodsValues) {
|
this.$message.warning("货物价值不能为空");
|
return;
|
}
|
const resp = await savePledgedDetailInfo({
|
applySerialNo: this.applyInfo.serialNo,
|
pledgedSerialNo: this.pledgedSerialNo,
|
...row,
|
});
|
if (resp.code == "00") {
|
this.requestqryPledgedDetailList();
|
}
|
},
|
handleCancel(row, index) {
|
const arr = [];
|
for (let i = 0; i < this.initialPledgeDataArr.length; i++) {
|
if (i == index) {
|
for (const key in row) {
|
if (
|
key != "isEdit" &&
|
key != "isCancel" &&
|
row[key] != this.initialPledgeDataArr[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.initialPledgeDataArr[index]) {
|
if (this.initialPledgeDataArr[index].hasOwnProperty(val)) {
|
this.pledgeData[index][key] = this.initialPledgeDataArr[index][key];
|
}
|
}
|
});
|
});
|
|
} else {
|
this.$set(row, "isEdit", false);
|
this.$set(row, "isCancel", false);
|
}
|
},
|
handleDelete(row, index) {
|
if (!row.isEdit) {
|
common.comfirm(
|
"提示",
|
`请确认是否删除质押物: ${row.goodsName}`,
|
async () => {
|
if (row.serialNo) {
|
const res = await delPledgedDetailInfo({
|
serialNo: row.serialNo,
|
});
|
if (res.code != "00") return;
|
}
|
this.$message.success("删除成功");
|
this.requestqryPledgedDetailList();
|
}
|
);
|
} else {
|
this.$message.success("删除成功");
|
this.requestqryPledgedDetailList();
|
}
|
},
|
prevStep() {
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == "质押物信息") {
|
let objectTypeOFF;
|
const ispubile =
|
this.applyInfo.borrowertype == "01" &&
|
this.applyInfo.objectType == "CreditApplyCommon";
|
if (this.applyInfo.productID.indexOf("OFF_") > -1 || ispubile) {
|
objectTypeOFF = "CreditFlowPublic";
|
}
|
common.tabInfo(
|
this.applyMenu[index - 1].tabname,
|
objectTypeOFF ? objectTypeOFF : this.applyInfo.flowno,
|
this
|
);
|
}
|
});
|
},
|
//提交下一步
|
async submit(arr) {},
|
// 下一页
|
async nextPage() {
|
if (!common.validateForm(this.$refs.borrowerForm).flag) return;
|
this.$parent._data.loading = true;
|
// 保存
|
const res = await savePledgedInfo(this.borrowerForm[0]);
|
this.$parent._data.loading = false;
|
// 保存成功查询列表数据
|
if (res.code == "00") {
|
this.requestGetPledgedInfo();
|
this.$message.success("保存成功");
|
// 调用父组件的查询左侧tab的方法
|
this.$parent.updateApplyTabTree("质押物信息");
|
}
|
},
|
async save() {
|
this.$parent._data.loading = true;
|
// 保存
|
const res = await savePledgedInfo(this.borrowerForm[0]);
|
this.$parent._data.loading = false;
|
// 保存成功查询列表数据
|
if (res.code == "00") {
|
this.requestGetPledgedInfo();
|
this.$message.success("保存成功");
|
}
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
next();
|
},
|
};
|
</script>
|
<style scoped>
|
.pledged-desc-form-item {
|
display: block;
|
}
|
</style>
|
