<template>
|
<el-container>
|
<el-main :style="{ padding: 0 }">
|
<ScrollToTab
|
:tabId="`#${tabScroll}`"
|
:contentId="`#${contentScroll}`"
|
:tabIndex="tabIndex"
|
@changeTab="changeTab"
|
ref="scrollTab"
|
>
|
<div class="scroll-content">
|
<ul class="tab-scroll" :id="tabScroll" :style="{height: flowno != 'ZBDEntInfoAlterFlow'?`${clientHeight-102}px`:`${clientHeight}px`}">
|
<li class="back-section">
|
<el-button
|
v-if="from !== 'newCts' && !noBackBtn"
|
size="small"
|
icon="el-icon-back"
|
round
|
@click="goBack"
|
>返回列表</el-button>
|
</li>
|
<li
|
v-for="(item, index) in treeList"
|
:key="index"
|
@click="changeTab(index, true)"
|
class="tab-list"
|
:class="{active: tabIndex === index}"
|
>
|
<a>{{item.tabname}}</a>
|
</li>
|
</ul>
|
|
<ul
|
class="content-scroll"
|
:id="contentScroll"
|
:style="{height: flowno != 'ZBDEntInfoAlterFlow'?`${clientHeight-102}px`:`${clientHeight}px`}"
|
>
|
<li v-for="(item, index) in treeList" :key="index" class="content-list">
|
<div
|
class="scroll-inner"
|
:style="{minHeight: index === treeList.length - 1 ? `${clientHeight - 90}px` : 'auto'}"
|
>
|
<p class="scroll-title">{{item.tabname}}</p>
|
<div class="inner-content">
|
<div class="info" v-if="index == 0">
|
<el-form label-width="100px" size="medium" :inline="true" :model="formInline" class="demo-form-inline form-large">
|
<el-form-item label="客户姓名">
|
<el-input disabled v-model="formInline.customerName" ></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号">
|
<el-input disabled v-model="formInline.certId" ></el-input>
|
</el-form-item>
|
<el-form-item label="手机号码">
|
<el-input disabled v-model="formInline.phone" ></el-input>
|
</el-form-item>
|
<el-form-item label="婚姻状态">
|
<el-input disabled v-model="formInline.marriageDesc" ></el-input>
|
</el-form-item>
|
<el-form-item label="匹配产品">
|
<el-select disabled style="width:100%" v-model="formInline.productId" placeholder="请选择">
|
<el-option label="加盟商经营贷" value="JMSJYD"></el-option>
|
<el-option label="个人场景贷" value="YZD"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="门店名称">
|
<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" disabled v-model="formInline.shopName" ></el-input>
|
</el-form-item>
|
<el-form-item label="处理人">
|
<el-input disabled v-model="formInline.operationUserName" ></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="info" v-if="index == 1">
|
<ClientsImageData />
|
</div>
|
<div class="info" v-if="index == 2">
|
<FlowList v-if="formInline.objecttype" :serialNo="indInfoPreSerialno" :objectType="formInline.objecttype" :phaseno="formInline.phaseno"/>
|
</div>
|
<div class="info" v-if="index == 3">
|
<OpinionList v-if="formInline.objecttype" :serialNo="indInfoPreSerialno" :businessNo="indInfoPreSerialno" :objectType="formInline.objecttype"/>
|
<div
|
class="tab-form-buttons" v-if="index==3 && hidemenu">
|
<p v-if="isEdit">
|
<el-button class="comm-button" @click="goBack">返回</el-button>
|
</p>
|
<p v-if="isEdit">
|
<el-button class="comm-button" type="primary" @click="submitChildren">提交</el-button>
|
</p>
|
<p v-if="!isEdit">
|
<el-button class="comm-button" type="primary" @click="goBack">返回</el-button>
|
</p>
|
</div>
|
</div>
|
<div class="info" v-if="index==4">
|
<el-form label-width="100px" size="medium" :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="审批结果">
|
<el-select :disabled="!isEdit" style="width:100%" v-model="formInline.phasechoice" placeholder="请选择">
|
<el-option v-for="(item,index) in opinionCodeList" :key="index" :label="item.itemname" :value="item.itemno"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="授信额度" v-if="formInline.phasechoice =='01' && formInline.phaseno=='0080'">
|
<el-input @focus="formatMoney" placeholder="最大金额不能超过300000" :disabled="!isEdit" @blur="checkMoney" v-model="trialPartMoneyToPage" ></el-input>
|
</el-form-item>
|
<el-form-item label="审批意见" class="textarea" style="width:90%">
|
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" :disabled="!isEdit" v-model="formInline.phaseopinion2" ></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div
|
class="tab-form-buttons" v-if="index==4">
|
<p v-if="isEdit">
|
<el-button class="comm-button" @click="goBack">返回</el-button>
|
</p>
|
<p v-if="isEdit">
|
<el-button class="comm-button" type="primary" @click="submitChildren">提交</el-button>
|
</p>
|
<p v-if="!isEdit">
|
<el-button class="comm-button" type="primary" @click="goBack">返回</el-button>
|
</p>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</ScrollToTab>
|
</el-main>
|
</el-container>
|
</template>
|
<script>
|
/**
|
* 贷款申请查询详情页
|
*/
|
import {
|
qryCustomerInfo,
|
saveCustomerInfo,
|
customerNextSubmit,
|
qryOpinionCodeList,
|
submitCustomerInfo
|
} from "@/api/product";
|
import common from "@/utils/common";
|
import ScrollToTab from "./components/ScrollToTab";
|
import FlowList from "@/views/comprehensiveTransaction/components/tabsComponent/FlowList.vue";
|
import OpinionList from "@/views/comprehensiveTransaction/components/tabsComponent/OpinionList.vue";
|
|
import ClientsImageData from '../product/public/clientsImageData/index.vue'
|
// 资方可查看菜单
|
const capitalTabTree = ['借款人信息', '物业信息', '贷款申请信息', '主/共借人征信信息', '影像资料信息', '还款计划', '还款入账记录', '电子合同信息']
|
|
export default {
|
components: {
|
ScrollToTab,
|
ClientsImageData,
|
FlowList,
|
OpinionList
|
},
|
data() {
|
return {
|
from: "",
|
noBackBtn: "",
|
formInline:{
|
productId:'JMSJYD'
|
},
|
trialPartMoneyToPage:'',
|
serialNo: "",
|
objectType: "",
|
hidemenu:false,
|
customerID: "",
|
isEdit:false,
|
indInfoPreSerialno:'',
|
flowno: "",
|
alterobjectno: "",
|
treeList: [],
|
loading: false,
|
opinionCodeList:[],
|
tabIndex: 0,
|
moreIndex: -1,
|
clientHeight: 600,
|
tabScroll: "tab_scroll",
|
contentScroll: "content_scroll"
|
};
|
},
|
created() {
|
this.init();
|
this.qryCustomerInfo()
|
this.hidemenu = this.$route.query.hidemenu == 'true' ? true :false
|
const indInfoPreSerialno = this.$route.query.indInfoPreSerialno
|
this.indInfoPreSerialno = indInfoPreSerialno
|
this.qryOpinionCodeList()
|
if(this.$route.query.isEdit == 'true'){
|
this.isEdit = true
|
}else{
|
this.isEdit =false
|
}
|
|
},
|
mounted() {
|
this.setEleHeight();
|
window.addEventListener("resize", this.setEleHeight);
|
},
|
methods: {
|
init() {
|
const {
|
menuId,
|
from,
|
flowno,
|
objectType,
|
customerID,
|
customerId,
|
occurType,
|
alterobjectno,
|
noBackBtn,
|
} = this.$route.query;
|
if (!parent.g_menu_id && menuId) {
|
parent.g_menu_id = menuId;
|
}
|
this.serialNo = this.$route.params.id;
|
|
this.noBackBtn = noBackBtn;
|
this.from = from;
|
this.objectType = objectType;
|
this.occurType = occurType;
|
this.alterobjectno = alterobjectno
|
// 命名兼容处理
|
this.customerID = customerID || customerId;
|
|
// 默认案场
|
this.flowno = flowno;
|
this.tabIndex = 0;
|
this.moreIndex = -1;
|
this.queryTabTree();
|
},
|
formatMoney(){
|
this.trialPartMoneyToPage = this.toFixedMoney(this.trialPartMoneyToPage)
|
},
|
qryOpinionCodeList(){
|
qryOpinionCodeList({indInfoPreSerialno:this.indInfoPreSerialno}).then(res=>{
|
this.opinionCodeList = res.result
|
})
|
},
|
// 去掉分隔符 最后转成数字 只保留小数点两位
|
toFixedMoney(value){
|
let result = null;
|
if(value){
|
value = value.toString()
|
if(typeof value === 'string'){
|
result = value.indexOf(',') > -1 ? value.replace(/,/gi,'') : value
|
result = Number(Number(result).toFixed(2))
|
}
|
if(typeof value === 'number'){
|
result = Number(value.toFixed(2))
|
}
|
}
|
return result
|
},
|
checkMoney(){
|
if(this.trialPartMoneyToPage){
|
var regNumber=/^[1-9]\d*$/
|
console.log('regNumber.test(this.trialPartMoneyToPage)',regNumber.test(this.trialPartMoneyToPage))
|
if(!regNumber.test(this.trialPartMoneyToPage)){
|
this.$message.error('请输入正确的金额!')
|
this.trialPartMoneyToPage = ''
|
return
|
}
|
if(this.trialPartMoneyToPage > 300000){
|
this.$message.error('最大金额不能超过300000!')
|
this.trialPartMoneyToPage = ''
|
return
|
}
|
var aa = Number(this.trialPartMoneyToPage)
|
if(typeof aa == 'number'){
|
this.trialPartMoneyToPage = common.formatMoney(this.trialPartMoneyToPage)
|
}
|
}
|
},
|
qryCustomerInfo(){
|
const id = this.$route.params.id
|
const indInfoPreSerialno = this.indInfoPreSerialno
|
qryCustomerInfo({customerId:id,indInfoPreSerialno}).then(res=>{
|
if(!res.result.productId){
|
res.result.productId = 'JMSJYD'
|
}
|
if(res.result.creditAmt){
|
this.trialPartMoneyToPage = common.formatMoney(res.result.creditAmt)
|
}
|
if(res.result.phasechoice){
|
res.result.phasechoice = ''
|
}
|
this.formInline = res.result
|
})
|
},
|
setEleHeight() {
|
const clientHeight = document.documentElement.clientHeight;
|
this.clientHeight = clientHeight || 600;
|
},
|
|
// 查询流程详情
|
async queryTabTree() {
|
let { serialNo, objectType, tabIndex, $route } = this;
|
const { tabName: queryTabName, flowno, alterobjecttype, source } = $route.query;
|
this.loading = true;
|
const obj = {
|
objectno: serialNo,
|
objecttype: objectType
|
};
|
this.loading = false;
|
let result = [
|
{
|
"tabname": "借款人信息",
|
"exist": "Y",
|
"gray": "N",
|
"visible": "Y",
|
"open": "",
|
"edit": "",
|
"readonly": "N",
|
"state": "CUSTOMER_INFO"
|
},
|
{
|
"tabname": "影像资料信息",
|
"exist": "Y",
|
"gray": "N",
|
"visible": "Y",
|
"open": "",
|
"edit": "",
|
"readonly": "N",
|
"state": "CUSTOMER_INFO"
|
},
|
{
|
"tabname": "流程流转记录",
|
"exist": "Y",
|
"gray": "N",
|
"visible": "Y",
|
"open": "",
|
"edit": "",
|
"readonly": "N",
|
"state": "CUSTOMER_INFO"
|
},
|
{
|
"tabname": "历史审批意见",
|
"exist": "Y",
|
"gray": "N",
|
"visible": "Y",
|
"open": "",
|
"edit": "",
|
"readonly": "N",
|
"state": "CUSTOMER_INFO"
|
},
|
{
|
"tabname": "审批意见",
|
"exist": "Y",
|
"gray": "N",
|
"visible": "Y",
|
"open": "",
|
"edit": "",
|
"readonly": "N",
|
"state": "CUSTOMER_INFO"
|
}
|
];
|
if(this.$route.query.hidemenu == 'true'){
|
result.splice(4,1)
|
}
|
// 资方查询限制查看权限
|
if(source === 'capital') {
|
result = result.filter(item =>{
|
return capitalTabTree.includes(item.tabname)
|
});
|
}
|
this.treeList = result;
|
this.moreIndex =
|
result.findIndex(({ tabname }) => tabname === "流程流转记录") || 0;
|
|
if (queryTabName) {
|
tabIndex =
|
result.findIndex(({ tabname }) => tabname === queryTabName) || 0;
|
}
|
this.$nextTick(() => this.changeTab(tabIndex));
|
},
|
|
// 切换tab的处理
|
changeTab(index, flg = false) {
|
this.tabIndex = index;
|
this.$refs.scrollTab.setScrollTop(index, flg);
|
this.$nextTick(() => this.$refs.scrollTab.setTabScrollTop());
|
},
|
submitChildren(){
|
const customerId = this.$route.params.id
|
const indInfoPreSerialno = this.indInfoPreSerialno
|
if(!this.hidemenu){
|
if(!this.formInline.phasechoice){
|
this.$message.error('请选择审批结果!')
|
return
|
}
|
if(this.formInline.phasechoice !='01' && !this.formInline.phaseopinion2){
|
this.$message.error('请填写审批意见!')
|
return
|
}
|
if(!this.trialPartMoneyToPage && this.formInline.phasechoice =='01' && this.formInline.phaseno=='0080'){
|
this.$message.error('请输入授信额度!')
|
return
|
}
|
}
|
if(this.formInline.productId == 'JMSJYD'){
|
this.formInline.productName = '加盟商经营贷'
|
}
|
if(this.formInline.productId == 'YZD'){
|
this.formInline.productName = '个人场景贷'
|
}
|
const params = {
|
customerId,
|
ftSerialNo:this.formInline.ftserialno,
|
objectno:indInfoPreSerialno,
|
...this.formInline,
|
creditAmt:this.toFixedMoney(this.trialPartMoneyToPage)
|
}
|
if(this.formInline.phasechoice =='01' && this.formInline.phaseno=='0080'){
|
submitCustomerInfo(params).then(res=>{
|
if(res.code ='00'){
|
this.$message.success('提交成功!')
|
this.goBack()
|
}
|
})
|
}else{
|
saveCustomerInfo(params).then(res=>{
|
this.nextSubmit(params)
|
})
|
}
|
},
|
nextSubmit(params){
|
customerNextSubmit(params).then(res=>{
|
if(res.code == '00'){
|
this.$message.success('提交成功!')
|
this.goBack()
|
}else{
|
this.$message.error(res.msg)
|
}
|
})
|
},
|
goBack(){
|
const { from } = this;
|
window.history.go(-1);
|
},
|
// 保存
|
saveCustomer() {
|
const customerId = this.$route.params.id
|
const indInfoPreSerialno = this.indInfoPreSerialno
|
let name = ''
|
if(this.formInline.productId == 'JMSJYD'){
|
name = '加盟商经营贷'
|
}
|
if(this.formInline.productId == 'YZD'){
|
name = '个人场景贷'
|
}
|
saveCustomerInfo({productId:this.formInline.productId,productName:name,customerId,indInfoPreSerialno}).then(res=>{
|
this.$message.success('保存成功!')
|
// this.goBack()
|
})
|
|
}
|
},
|
computed: {
|
currTabItem() {
|
let { tabIndex, treeList } = this;
|
return treeList[tabIndex] || {};
|
}
|
},
|
watch: {
|
$route() {
|
this.init();
|
}
|
},
|
beforeRouteEnter(to, from, next) {
|
next(vm => {
|
vm.$store.commit("SET_detailBackRoute", from.path);
|
});
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.setEleHeight);
|
}
|
};
|
</script>
|
|
<style lang="postcss" scoped>
|
.detail-header {
|
display: flex;
|
& .header-right {
|
flex: 1;
|
}
|
& .header-right-inner {
|
display: flex;
|
background: #f9f9f9;
|
align-items: center;
|
margin: 0 0 10px;
|
background: #fff;
|
padding: 20px 20px 20px 10px;
|
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.03);
|
& .header-steps {
|
flex: 1;
|
}
|
& .detail-header-control {
|
margin-left: 30px;
|
& >>> .el-button {
|
padding: 4px 5px;
|
border-radius: 2px;
|
border: 1px solid rgba(238, 238, 238, 1);
|
font-size: 12px;
|
color: rgba(119, 119, 119, 1);
|
}
|
}
|
|
& >>> .el-button--text {
|
padding-top: 20px;
|
}
|
}
|
}
|
|
.el-container .el-main {
|
padding: 16px 0;
|
}
|
.el-container .el-header {
|
padding: 0;
|
}
|
.main-tab {
|
padding: 20px;
|
}
|
.main-buttons {
|
display: flex;
|
width: 100%;
|
justify-content: center;
|
padding-top: 80px;
|
& >>> .el-button {
|
padding: 8px 41px;
|
}
|
& >>> .el-button--default {
|
margin-right: 33px;
|
}
|
}
|
.empty-tab {
|
width: 100%;
|
min-height: 550px;
|
}
|
|
.scroll-content {
|
display: flex;
|
& .tab-scroll {
|
width: 128px;
|
padding: 0 16px;
|
overflow-y: auto;
|
list-style: none;
|
font-size: 14px;
|
background: #fff;
|
&::-webkit-scrollbar {
|
width: 0px;
|
height: 10px;
|
}
|
& .tab-list {
|
padding: 0 10px 34px 0;
|
& a {
|
cursor: pointer;
|
font-weight: 400;
|
color: #222222;
|
&:hover {
|
color: #409eff;
|
}
|
}
|
|
&.active {
|
& a {
|
color: #0081f0;
|
}
|
}
|
}
|
& .back-section {
|
background: #fff;
|
border-radius: 0px 4px 0px 0px;
|
padding: 16px 16px 30px 0;
|
& >>> .el-button {
|
padding: 5px 9.5px;
|
border: none;
|
background: rgba(238, 238, 238, 1);
|
border-radius: 12px;
|
font-weight: 400;
|
color: #333333;
|
}
|
& >>> .el-button span {
|
margin-left: 2px;
|
font-size: 12px;
|
}
|
& >>> .el-button i {
|
font-weight: bold;
|
}
|
}
|
}
|
& .content-scroll {
|
flex: 1;
|
overflow-y: auto;
|
position: relative;
|
margin: 0 0 0 20px;
|
& .scroll-inner {
|
background: #fff;
|
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.03);
|
margin-bottom: 20px;
|
& .scroll-title {
|
font-size: 16px;
|
border-bottom: solid 2px #eeeeee;
|
color: #000;
|
padding: 16px 20px;
|
margin-bottom: 10px;
|
font-weight: 500;
|
}
|
& .inner-content {
|
padding: 0 0 20px 20px;
|
& >>> .el-tabs__header {
|
margin: 0;
|
}
|
}
|
}
|
&::-webkit-scrollbar {
|
width: 0;
|
height: 10px;
|
}
|
& .last-scroll-inner {
|
min-height: 620px;
|
}
|
}
|
}
|
.demo-form-inline .textarea{
|
& >>> .el-form-item__content{
|
width: 67.5% !important;
|
}
|
}
|
.demo-form-inline{
|
.el-form-item__content{
|
width: 260px;
|
}
|
}
|
.tab-form-buttons {
|
display: flex;
|
justify-content: center;
|
padding: 60px 0 30px 0;
|
& p {
|
margin: 0 40px 0 0;
|
}
|
& p:last-child {
|
margin-right: 0;
|
}
|
}
|
.form-large{
|
.el-form-item{
|
width: 32%;
|
}
|
& >>> .el-form-item__content{
|
width: 67% !important;
|
}
|
}
|
</style>
|
