<template>
|
<div
|
class="loanApprovalApply"
|
v-loading.fullscreen.lock="waiting"
|
element-loading-background="transparent"
|
>
|
<el-form
|
ref="loanApprovalApply"
|
:model="loanApprovalApply"
|
inline
|
label-width="95px"
|
size="small"
|
>
|
<el-form-item label="申请编号" prop="serialNo">
|
<el-input v-model="loanApprovalApply.serialNo" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="客户名称" prop="customerName">
|
<el-input v-model="loanApprovalApply.customerName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="处理标识" prop="isHandle">
|
<el-select v-model="loanApprovalApply.isHandle" placeholder="请选择">
|
<el-option label="待处理" value="00"></el-option>
|
<el-option label="已处理" value="01"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="当前流程阶段" prop="phaseNo" v-show="isshow">
|
<el-select
|
v-model="loanApprovalApply.phaseNo"
|
clearable
|
multiple
|
filterable
|
placeholder="请选择"
|
collapse-tags
|
:title="title"
|
@mouseenter.native="mouseEnter(loanApprovalApply.phaseNo,flowPhaseList,'taskKey','taskName')"
|
>
|
<el-option
|
v-for="item in flowPhaseList"
|
:key="item.taskKey"
|
:label="item.taskName"
|
:value="item.taskKey"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="产品名称" v-show="isshow" prop="productid">
|
<el-select
|
v-model="loanApprovalApply.productid"
|
clearable
|
multiple
|
filterable
|
placeholder="请选择"
|
collapse-tags
|
:title="title"
|
@mouseenter.native="mouseEnter(loanApprovalApply.productid,productList,'productCode','productName')"
|
@change="selectproduct(loanApprovalApply.productid)"
|
>
|
<el-option
|
v-for="item in productList"
|
:key="item.productCode"
|
:label="item.productName"
|
:value="item.productCode"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="产品维度" v-show="isshow" prop="productDimension">
|
<el-select
|
v-model="loanApprovalApply.productDimension"
|
clearable
|
multiple
|
filterable
|
placeholder="请选择"
|
collapse-tags
|
:title="title"
|
@mouseenter.native="mouseEnter(loanApprovalApply.productDimension,dimensionList,'dimensionCode','dimensionsName')"
|
>
|
<el-option
|
v-for="(item,index) in dimensionList"
|
:key="index"
|
:label="item.dimensionsName"
|
:value="item.dimensionCode"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="业务城市" v-show="isshow" prop="businessCity">
|
<el-select
|
v-model="loanApprovalApply.businessCity"
|
clearable
|
multiple
|
filterable
|
placeholder="请选择"
|
collapse-tags
|
:title="title"
|
@mouseenter.native="mouseEnter(loanApprovalApply.businessCity,cityList,'itemno','itemname')"
|
>
|
<el-option
|
v-for="(item,index) in cityList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="项目名称" v-show="isshow" prop="projectname">
|
<el-input v-model="loanApprovalApply.projectname" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="报单日期" v-show="isshow" prop="inputDate">
|
<el-date-picker
|
v-model="loanApprovalApply.inputDate"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="selDate"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item size="small">
|
<el-button style="padding:8px 15px;" plain @click="resetForm('loanApprovalApply')">重置</el-button>
|
<el-button style="margin-left: 22px;padding:8px 15px;" type="primary" @click="handleSearch(loanApprovalApply)">搜索</el-button>
|
<el-button type="text" v-show="!isshow" @click="show()">
|
展开
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</el-button>
|
<el-button type="text" v-show="isshow" @click="show()">
|
收起
|
<i class="el-icon-arrow-up el-icon--right"></i>
|
</el-button>
|
</el-form-item>
|
</el-form>
|
<el-button
|
class="addPreApprovalApply"
|
type="primary"
|
icon="iconfont icon-zengjia1"
|
size="small"
|
@click="addLoanApprovalApply"
|
>新增非预审批申请</el-button>
|
<div class="table">
|
<el-table
|
:data="loanApplyFlowList"
|
:cell-class-name="cellClass"
|
:header-cell-class-name="headerCellClass"
|
v-loading="loading"
|
highlight-current-row
|
stripe
|
>
|
<el-table-column type="index" width="40" label=" "></el-table-column>
|
<el-table-column prop="serialNo" label="申请编号" width="160">
|
<template slot-scope="scope">
|
<span>{{ scope.row.serialNo?scope.row.serialNo:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="productName" label="产品名称" width="150">
|
<template slot-scope="scope">
|
<span>{{ scope.row.productName?scope.row.productName:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="customerName" label="客户名称" width="150">
|
<template slot-scope="scope">
|
<span>{{ scope.row.customerName?scope.row.customerName:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="occurtypeDesc" label="业务类型" width="100">
|
<template slot-scope="scope">
|
<span>{{ scope.row.occurtypeDesc?scope.row.occurtypeDesc:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="projectname" label="项目名称" width="120">
|
<template slot-scope="scope">
|
<span>{{ scope.row.projectname?scope.row.projectname:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="hopebusinesssum" label="申请金额" width="130">
|
<template slot-scope="scope">
|
<span>{{ scope.row.hopebusinesssum?scope.row.hopebusinesssum = formatMoney(scope.row.hopebusinesssum):'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="businesssum" label="授信/放款金额" width="130">
|
<template slot-scope="scope">
|
<span v-if="scope.row.productID == 'ZBD'">{{ scope.row.productcreditamtlimit?scope.row.productcreditamtlimit = formatMoney(scope.row.productcreditamtlimit):'--' }}</span>
|
<span v-else>{{ scope.row.businesssum?scope.row.businesssum = formatMoney(scope.row.businesssum):'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="贷款期限" width="85">
|
<template slot-scope="scope">
|
<span v-if="scope.row.businessTermMonth">{{ scope.row.businessTermMonth }}月</span>
|
<span v-else>{{ scope.row.businessTermDay?scope.row.businessTermDay+'日':'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="repaymenttypeDesc" label="还款方式" width="120">
|
<template slot-scope="scope">
|
<span>{{ scope.row.repaymenttypeDesc?scope.row.repaymenttypeDesc:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="businessCityDesc" label="业务城市" width="95">
|
<template slot-scope="scope">
|
<span>{{ scope.row.businessCityDesc?scope.row.businessCityDesc:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="productdimensionname" label="产品维度" width="180">
|
<template slot-scope="scope">
|
<span>{{ scope.row.productdimensionname?scope.row.productdimensionname:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="currentphasename" label="当前流程阶段" width="160">
|
<template slot-scope="scope">
|
<span>{{ scope.row.currentphasename?scope.row.currentphasename:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="inputdate" label="报单日期" width="100">
|
<template slot-scope="scope">
|
<span>{{ scope.row.inputdate?scope.row.inputdate:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="inputtime" label="报单时间" width="100">
|
<template slot-scope="scope">
|
<span>{{ scope.row.inputtime?scope.row.inputtime:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="operateusername" label="报单人" width="95">
|
<template slot-scope="scope">
|
<span>{{ scope.row.operateusername?scope.row.operateusername:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="operateorgname" label="报单人直属机构" width="240">
|
<template slot-scope="scope">
|
<span>{{ scope.row.operateorgname?scope.row.operateorgname:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="operatefirstinternallevelname" label="报单人所属一级内部机构" width="180">
|
<template slot-scope="scope">
|
<span>{{ scope.row.operatefirstinternallevelname?scope.row.operatefirstinternallevelname:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="currentusername" label="当前处理人" width="100">
|
<template slot-scope="scope">
|
<span>{{ scope.row.currentusername?scope.row.currentusername:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="curoperateorgname" label="当前处理人直属机构" width="240">
|
<template slot-scope="scope">
|
<span>{{ scope.row.curoperateorgname?scope.row.curoperateorgname:'--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作管理" fixed="right" width="130">
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
style="margin:0 20px 0 0"
|
@click="handler(scope.row,scope.row.btns[0])"
|
>{{scope.row.btns[0]}}</el-button>
|
<el-popover
|
:ref="scope.$index"
|
@show="scope.row.isSwitch=true;$set(loanApplyFlowList,scope.$index,scope.row)"
|
@hide="scope.row.isSwitch=false;$set(loanApplyFlowList,scope.$index,scope.row)"
|
placement="bottom"
|
trigger="hover"
|
popper-class="custom_popper"
|
>
|
<div style="text-align: center; margin: 2px 0">
|
<el-button
|
type="text"
|
v-for="(item,index) in scope.row.btns"
|
:key="index"
|
v-show="index!=0"
|
@click="scope._self.$refs[scope.$index].doClose();handler(scope.row,item)"
|
>{{item}}</el-button>
|
</div>
|
<el-button style="margin:0 10px 0 0" type="text" slot="reference" :disabled="scope.row.btns.length<2">
|
更多
|
<i
|
v-show="!scope.row.btns.length<2"
|
:class="[{'el-icon-arrow-down':!scope.row.isSwitch},{'el-icon-arrow-up':scope.row.isSwitch}]"
|
></i>
|
</el-button>
|
</el-popover>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="currentPage"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="10"
|
layout="prev, pager, next, jumper, total, sizes"
|
:total="total"
|
></el-pagination>
|
</div>
|
<AddApply v-if="isAddApply" v-on:closeApply="closeApply" :visible="isAddApply" title="贷款申请信息"></AddApply>
|
<Trial v-if="isTrial" v-on:closeTrial="closeTrial" :visible="isTrial"></Trial>
|
</div>
|
</template>
|
<script>
|
import "./index.styl";
|
import { setStorage } from "@/utils/storage";
|
import {
|
qryFlowPhaseList,
|
qryProdList,
|
qryDimensionList,
|
getAllCityAreaList,
|
qryApplyFlowList,
|
cancelApplyLoan,
|
resetApply
|
} from "@/api/product";
|
import common from '@/utils/common'
|
import AddApply from "../../components/AddApply";
|
import Trial from "../../components/Trial";
|
export default {
|
data() {
|
return {
|
isshow: false,
|
isAddApply: false,
|
isTrial: false,
|
loanApprovalApply: {
|
isHandle: "00",
|
phaseFlag: "03",
|
projectname: "",
|
serialNo: "",
|
currentPage: "1",
|
pageSize: "10"
|
},
|
loanApplyFlowList: [],
|
flowPhaseList: "",
|
productList: "",
|
dimensionList: "",
|
cityList: "",
|
title: "",
|
total: 0,
|
currentPage: 1,
|
waiting: false,
|
loading: false,
|
isSwitch: true,
|
};
|
},
|
mounted() {
|
var _this = this;
|
window.onresize = function() {
|
// 定义窗口大小变更通知事件
|
_this.clientWidth = window.parent.document.body.clientWidth;
|
};
|
},
|
activated() {
|
//获取当前流程阶段列表
|
qryFlowPhaseList({}).then(res => {
|
this.flowPhaseList = res.result;
|
});
|
//获取产品列表
|
qryProdList({}).then(res => {
|
this.productList = res.result;
|
});
|
//获取业务城市列表
|
getAllCityAreaList({ queryFlag: "02" }).then(res => {
|
this.cityList = res.result;
|
});
|
//调用产品维度下拉方法
|
this.getDimensionList({});
|
//调用查询贷款申请列表方法
|
this.getApplyFlowList(this.loanApprovalApply);
|
},
|
components: {
|
AddApply,
|
Trial
|
},
|
methods: {
|
// 金额格式化
|
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
|
);
|
}
|
},
|
// 鼠标悬浮获取选中的name
|
mouseEnter(valArr, array, key, name) {
|
this.title = "";
|
if (valArr.length) {
|
for (let i = 0; i < valArr.length; i++) {
|
for (let j = 0; j < array.length; j++) {
|
if (valArr[i] == array[j][key]) {
|
this.title += this.title ? "," + array[j][name] : array[j][name];
|
break;
|
}
|
}
|
}
|
}
|
},
|
selDate(val) {
|
if (!val) {
|
this.loanApprovalApply.beginDate = "";
|
this.loanApprovalApply.endDate = "";
|
}
|
},
|
headerCellClass() {
|
return "headerCellClass";
|
},
|
cellClass() {
|
return "cellClass";
|
},
|
// 试算
|
handleTrial(row) {
|
this.isTrial = true;
|
this.$store.commit("SET_applyInfo", row);
|
},
|
// 新增贷款申请
|
addLoanApprovalApply() {
|
this.isAddApply = true;
|
},
|
// 处理列表各种操作管理
|
handler(row,key){
|
switch (key) {
|
case '修改':
|
this.edit(row)
|
break;
|
case '详情':
|
this.detail(row)
|
break;
|
case '还款试算':
|
this.handleTrial(row)
|
break;
|
case '取消申请':
|
this.withdraw(row)
|
break;
|
case '重新申请':
|
this.resetApply(row)
|
break;
|
case '补充资料':
|
this.supply(row)
|
break;
|
default:
|
break;
|
}
|
},
|
// 排序展示列表需要的按钮
|
showBtn(array){
|
array.forEach(val => {
|
val.btns = []
|
val.updateFlag==1?val.btns.push('修改'):''
|
val.detailFlag==1?val.btns.push('详情'):''
|
val.btns.push('还款试算')
|
val.cancelFlag==1?val.btns.push('取消申请'):''
|
val.resetFlag==1?val.btns.push('重新申请'):''
|
val.supplyFlag==1?val.btns.push('补充资料'):''
|
});
|
},
|
//查询贷款申请列表
|
getApplyFlowList(form) {
|
const obj = {};
|
for (const key in form) {
|
if (form[key] instanceof Array) {
|
if (form[key].length) {
|
obj[key] = form[key].join(",");
|
}
|
} else {
|
obj[key] = form[key];
|
}
|
}
|
this.loading = true;
|
qryApplyFlowList(obj).then(res => {
|
this.loading = false;
|
if (res.result.records.length) {
|
this.loanApplyFlowList = res.result.records;
|
this.showBtn(this.loanApplyFlowList)
|
this.total = res.result.total;
|
} else {
|
// 判断当前页没数据的页码如果是1就不用刷新
|
if (form.currentPage > 1) {
|
form.currentPage--;
|
this.getApplyFlowList(form);
|
} else {
|
this.loanApplyFlowList = res.result.records;
|
this.showBtn(this.loanApplyFlowList)
|
this.total = res.result.total;
|
}
|
}
|
});
|
},
|
//根据产品获取产品维度列表
|
selectproduct(params) {
|
this.getDimensionList({ productid: params.join(",") });
|
},
|
getDimensionList(params) {
|
qryDimensionList(params).then(res => {
|
this.dimensionList = res.result;
|
});
|
},
|
// 详情
|
detail(row) {
|
this.$router.push({
|
path: `/comprehensiveTransaction/loanDetail/${row.serialNo}`,
|
query: {
|
occurType: row.occurtype,
|
flowno: row.flowno,
|
objectType: row.objectType,
|
customerID: row.customerid
|
}
|
});
|
},
|
// 补充资料
|
supply(row) {
|
this.$store.commit("SET_applyInfo", row);
|
this.$router.push({ path: "/supplement" });
|
},
|
//点击修改
|
edit(row) {
|
this.$store.commit("SET_applyInfo", row);
|
this.$router.push({ path: "/loanApplyEdit" });
|
},
|
// 取消申请
|
withdraw(row) {
|
common.comfirm("取消申请确认",`请确认是否需要取消申请单:${row.serialNo}(单号)?`,()=>{
|
cancelApplyLoan({
|
objectNo: row.serialNo,
|
taskNo: row.ftSerialNo
|
}).then(res => {
|
if (res.code == "00") {
|
this.$message({
|
message: "取消申请成功",
|
type: "success"
|
});
|
this.getApplyFlowList(this.loanApprovalApply);
|
}
|
});
|
})
|
},
|
//重新申请
|
resetApply(row) {
|
common.comfirm("重置申请确认",`请确认是否需要重新激活申请单:${row.serialNo}(单号)?`,()=>{
|
resetApply({
|
objectNo: row.serialNo,
|
taskNo: row.ftSerialNo,
|
phaseFlag: "4"
|
}).then(res => {
|
this.waiting = false;
|
if (res.code == "00") {
|
this.$store.commit("SET_applyInfo", row);
|
this.$router.push({ path: "/loanApplyEdit" });
|
}
|
});
|
})
|
},
|
//设置每页多少条
|
handleSizeChange(val) {
|
this.loanApprovalApply.pageSize = val;
|
this.getApplyFlowList(this.loanApprovalApply);
|
},
|
//查询当前页
|
handleCurrentChange(val) {
|
this.loanApprovalApply.currentPage = val;
|
this.getApplyFlowList(this.loanApprovalApply);
|
},
|
// 点击展开或收起
|
show() {
|
this.isshow = !this.isshow;
|
},
|
// 搜索
|
handleSearch(form) {
|
if (form.inputDate) {
|
form.beginDate = form.inputDate[0];
|
form.endDate = form.inputDate[1];
|
}
|
form.currentPage = 1;
|
this.currentPage = 1;
|
this.getApplyFlowList(form);
|
},
|
// 重置搜索表单
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
// 关闭弹窗
|
closeApply(data) {
|
this.isAddApply = data;
|
},
|
closeTrial(data) {
|
this.isTrial = data;
|
}
|
}
|
};
|
</script>
|
