<template>
|
<div class="product">
|
<div v-for="(item,index) in commissionArr" :key="index">
|
<el-form
|
:model="commissionForm[index]"
|
:rules="rules"
|
ref="commissionForm"
|
label-width="165px"
|
inline
|
size="small"
|
>
|
<Project :applySerialNo="applyInfo.serialNo"></Project>
|
<div class="_block">
|
<p class="title">
|
<span></span>
|
融资信息
|
</p>
|
<div class="form">
|
<el-form-item
|
label="应收账款总金额(元)"
|
v-if="item.factortotalamt.visible"
|
prop="factortotalamt"
|
>
|
<el-input
|
v-model="commissionForm[index].factortotalamt"
|
:disabled="!item.factortotalamt.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="垫佣融资总金额(元)" v-if="item.loanamt.visible" prop="loanamt">
|
<el-input v-model="commissionForm[index].loanamt" :disabled="!item.loanamt.writeAble"></el-input>
|
</el-form-item>
|
<el-form-item label="期限单位" v-if="item.loantermunit.visible" prop="loantermunit">
|
<el-select
|
v-model="commissionForm[index].loantermunit"
|
:disabled="!item.loantermunit.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="item in termUnitList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="融资期限" v-if="item.loanterm.visible" prop="loanterm">
|
<el-select
|
v-model="commissionForm[index].loanterm"
|
:disabled="!item.loanterm.writeAble"
|
clearable
|
filterable
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="item in loantermList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
<div class="_block">
|
<p class="title">
|
<span></span>
|
成交明细
|
</p>
|
<el-button
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
size="medium"
|
@click="add"
|
v-if="writeAble"
|
>新增成交信息</el-button>
|
<el-table
|
stripe
|
:data="commissionDetails"
|
style="margin-top:30px"
|
:cell-class-name="cellClass"
|
:header-cell-class-name="headerCellClass"
|
highlight-current-row
|
>
|
<el-table-column min-width="220">
|
<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.lsthouseno}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lsthouseno"
|
maxlength="200"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstbldno}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lstbldno"
|
maxlength="200"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstctrctsq}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lstctrctsq"
|
maxlength="200"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstctrctamt}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lstctrctamt"
|
maxlength="200"
|
placeholder="请输入"
|
@blur="row.lstctrctamt=formatMoney(row.lstctrctamt)"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstcustname}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lstcustname"
|
maxlength="200"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstcustmobile}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lstcustmobile"
|
maxlength="200"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstappdate}}</span>
|
<div style="padding-left:15px">
|
<el-date-picker
|
v-model="row.lstappdate"
|
type="date"
|
v-show="row.isEdit"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期"
|
></el-date-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstctrctdate}}</span>
|
<div style="padding-left:15px">
|
<el-date-picker
|
v-model="row.lstctrctdate"
|
type="date"
|
v-show="row.isEdit"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期"
|
></el-date-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstctrctcomm}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lstctrctcomm"
|
maxlength="200"
|
placeholder="请输入"
|
@blur="row.lstctrctcomm=formatMoney(row.lstctrctcomm)"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstctrctchannel}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lstctrctchannel"
|
maxlength="200"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220">
|
<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.lstfactoramt}}</span>
|
<el-input
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.lstfactoramt"
|
maxlength="200"
|
placeholder="请输入"
|
@blur="row.lstfactoramt=formatMoney(row.lstfactoramt)"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作管理" width="110" fixed="right" 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)" 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>
|
<div class="fixedBtn">
|
<el-button
|
size="medium"
|
plain
|
@click="saveDraft(commissionForm)"
|
v-if="applyInfo.phaseNo=='0040'"
|
>保存草稿</el-button>
|
<el-button
|
size="medium"
|
plain
|
@click="save(commissionForm)"
|
v-if="applyInfo.phaseNo>'0040'"
|
>保存</el-button>
|
<el-button size="medium" plain @click="prevStep" v-if="applyInfo.phaseNo=='0040'">上一步</el-button>
|
<el-button size="medium" plain @click="prevStep" v-else>上一页</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="submit(commissionForm)"
|
v-if="applyInfo.phaseNo=='0040'"
|
>下一步</el-button>
|
<el-button size="medium" type="primary" @click="nextPage()" v-else>下一页</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import common from "@/utils/common";
|
import Project from "./components/Project";
|
import {
|
qryCommissionInfo,
|
saveCommissionDetailInfo,
|
delCommissionDetailInfo,
|
submitCommissionInfo,
|
getDictionaryList,
|
qryCommissionProjectDetail
|
} from "@api/product";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
commissionArr: [],
|
commissionForm: [],
|
commissionDetails: [],
|
initialArr: [],
|
termUnitList: [],
|
loantermList: [],
|
rules: {},
|
loading: false,
|
writeAble: false
|
};
|
},
|
created() {
|
this.init();
|
},
|
components: {
|
Project
|
},
|
methods: {
|
// 初始化
|
async init() {
|
this.$parent._data.loading = true;
|
const { applyInfo } = this;
|
const termUnitList = await getDictionaryList({ codeNo: "TermUnit" });
|
const loantermList = await getDictionaryList({ codeNo: "Businesstermdays" });
|
this.termUnitList = termUnitList.result;
|
this.loantermList = loantermList.result;
|
const res = await qryCommissionInfo({
|
applySerialNo: applyInfo.serialNo
|
});
|
this.writeAble = res.result.loanterm.writeAble;
|
this.commissionArr = [res.result];
|
this.commissionDetails = [];
|
this.commissionForm = [];
|
this.initialArr = [];
|
const obj = {};
|
for (const key in res.result) {
|
if (key == "commissionDetails") {
|
obj[key] = [];
|
res.result[key].forEach(item => {
|
const subObj = {};
|
for (const key in item) {
|
if (
|
key == "lstfactoramt" ||
|
key == "lstctrctamt" ||
|
key == "lstctrctcomm"
|
) {
|
subObj[key] = this.formatMoney(item[key].value);
|
} else {
|
subObj[key] = item[key].value;
|
}
|
}
|
obj[key].push(subObj);
|
this.commissionDetails.push(Object.assign({}, subObj));
|
});
|
} else {
|
this.rules[key] = [];
|
if (res.result[key].required) {
|
this.rules[key].push({
|
required: true,
|
message: `请输入${res.result[key].filedDescription}`,
|
trigger: "change"
|
});
|
}
|
if (key == "factortotalamt" || key == "loanamt") {
|
obj[key] = this.formatMoney(res.result[key].value);
|
} else {
|
obj[key] = res.result[key].value;
|
}
|
}
|
}
|
this.commissionForm.push(obj);
|
this.initialArr.push(JSON.parse(JSON.stringify(obj)));
|
this.$parent._data.loading = false;
|
},
|
// 新增成交明细
|
add() {
|
for (let i = 0; i < this.commissionDetails.length; i++) {
|
if (this.commissionDetails[i].isEdit) {
|
this.$message.warning("请先保存当前成交信息再新增");
|
return;
|
}
|
}
|
this.commissionDetails.push({
|
applyserialno: this.applyInfo.serialNo,
|
lsthouseno: "",
|
lstbldno: "",
|
lstctrctsq: "",
|
lstctrctamt: "",
|
lstcustname: "",
|
lstcustmobile: "",
|
lstappdate: "",
|
lstctrctdate: "",
|
lstctrctcomm: "",
|
lstctrctchannel: "",
|
lstfactoramt: "",
|
isEdit: true
|
});
|
},
|
// 修改
|
handleEdit(row) {
|
for (let i = 0; i < this.commissionDetails.length; i++) {
|
if (
|
this.commissionDetails.length > 1 &&
|
this.commissionDetails[i].isEdit
|
) {
|
this.$message.warning("请先保存当前成交信息");
|
return;
|
}
|
}
|
this.$set(row, "isEdit", true);
|
this.$set(row, "isCancel", true);
|
},
|
// 保存成交明细
|
async handleSave(row) {
|
if (!row.lsthouseno) {
|
this.$message.warning("楼栋号不能为空");
|
return;
|
}
|
if (!row.lstbldno) {
|
this.$message.warning("房号不能为空");
|
return;
|
}
|
if (!row.lstctrctsq) {
|
this.$message.warning("合同面积不能为空");
|
return;
|
}
|
if (!row.lstctrctamt) {
|
this.$message.warning("合同金额不能为空");
|
return;
|
}
|
if (!row.lstcustname) {
|
this.$message.warning("客户名称不能为空");
|
return;
|
}
|
if (!row.lstappdate) {
|
this.$message.warning("认购日期不能为空");
|
return;
|
}
|
if (!row.lstctrctdate) {
|
this.$message.warning("签约日期不能为空");
|
return;
|
}
|
if (!row.lstctrctcomm) {
|
this.$message.warning("应收佣金不能为空");
|
return;
|
}
|
if (!row.lstctrctchannel) {
|
this.$message.warning("经纪公司名称不能为空");
|
return;
|
}
|
if (!row.lstfactoramt) {
|
this.$message.warning("垫佣融资金额不能为空");
|
return;
|
}
|
row.applyserialno = this.applyInfo.serialNo;
|
const res = await saveCommissionDetailInfo(row);
|
if (res.code == "00") {
|
this.init();
|
}
|
},
|
// 保存草稿垫佣项目信息
|
async saveDraft(arr) {
|
this.$parent._data.loading = true;
|
arr[0].tempsaveflag = "1";
|
const res = await submitCommissionInfo(arr[0]);
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
this.$message.success("保存成功");
|
this.init();
|
}
|
},
|
// 保存垫佣项目信息并校验数据完整性
|
async save(arr) {
|
if (!common.validateForm(this.$refs.commissionForm).flag) return;
|
this.$parent._data.loading = true;
|
arr[0].tempsaveflag = "1";
|
const res = await submitCommissionInfo(arr[0]);
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
this.$message.success("保存成功");
|
this.init();
|
}
|
},
|
// 提交垫佣项目信息并跳转下一个tab
|
async submit(arr) {
|
if (!common.validateForm(this.$refs.commissionForm).flag) return;
|
this.$parent._data.loading = true;
|
arr[0].tempsaveflag = "0";
|
const res = await submitCommissionInfo(arr[0]);
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
this.$message.success("提交成功");
|
this.init();
|
this.nextPage();
|
}
|
},
|
// 下一页
|
nextPage() {
|
// 调用父组件的查询左侧tab的方法
|
this.$parent.updateApplyTabTree("准入项目信息");
|
},
|
// 上一页
|
prevStep() {
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == "准入项目信息") {
|
common.tabInfo(
|
this.applyMenu[index - 1].tabname,
|
this.applyInfo.flowno,
|
this
|
);
|
}
|
});
|
},
|
// 取消
|
handleCancel(row, index) {
|
const { commissionForm, commissionDetails } = this;
|
if (
|
common.compareFormData(
|
commissionForm[0].commissionDetails,
|
commissionDetails
|
)
|
) {
|
this.init();
|
} else {
|
common.comfirm("提示", "当前有数据未保存，是否放弃保存？", () => {
|
this.init();
|
});
|
}
|
},
|
// 删除
|
handleDelete(row, index) {
|
if (row.serialno) {
|
common.comfirm("提示", "请确认是否删除该条数据？", async () => {
|
const res = await delCommissionDetailInfo({
|
objectno: row.applyserialno,
|
serialno: row.serialno
|
});
|
if (res.code == "00") {
|
this.$message.success("删除成功");
|
this.init();
|
}
|
});
|
} else {
|
this.commissionDetails.splice(index, 1);
|
}
|
},
|
// 金额格式化
|
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
|
);
|
}
|
},
|
headerCellClass() {
|
return "headerCellClass";
|
},
|
cellClass() {
|
return "cellClass";
|
}
|
},
|
beforeRouteLeave(to, from, next) {
|
!this.commissionForm.length ||
|
common.compareFormData(this.initialArr, this.commissionForm, next)
|
? next()
|
: "";
|
}
|
};
|
</script>
|
|
<style lang="stylus" scoped>
|
div {
|
.el-table {
|
.cellClass {
|
height: 48px;
|
padding: 0;
|
|
.cell {
|
line-height: 18px;
|
}
|
}
|
|
.headerCellClass {
|
height: 47px;
|
padding: 0;
|
background-color: #f5f5f5;
|
|
.cell {
|
line-height: 20px;
|
color: #222222;
|
}
|
}
|
}
|
|
.red-star {
|
width: 7px;
|
display: inline-block;
|
vertical-align: middle;
|
color: #FF4300;
|
}
|
}
|
</style>
|
