You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
365 lines
15 KiB
365 lines
15 KiB
<template> |
|
<div class="info my-2"> |
|
<h1 v-if="riskInfo" |
|
class="mb-3 text-xl font-semibold text-center">{{ info.productName }}产品手册</h1> |
|
<h6 class="step-name">{{ route.params.action !== 'config' ? '一、' : '' }}产品定义</h6> |
|
<p class="text">{{ info.productDefinition }}</p> |
|
<h6 class="step-name mt-5">{{ route.params.action !== 'config' ? '二、' : '' }}产品要素</h6> |
|
<p class="text">产品名称：{{ info.productName }}</p> |
|
<p class="text">贷款币种：人民币</p> |
|
<p v-if="info.loanPurpose" |
|
class="text"> |
|
贷款用途：{{ |
|
info.loanPurpose === '购房' |
|
? '可用于住房按揭贷款、二手房住房按揭贷款。' |
|
: info.loanPurpose === '消费' |
|
? '贷款用途可用于除购房之外的合法个人消费支出，不得用于投资经营，不得用于无指定用途的个人支出。' |
|
: info.loanPurpose === '经营' && !info.productType |
|
? '可用于个人或其企业生产和经营活动中临时性、季节性等流动资金周转以及购置、安装或修理小型设备和装潢经营性场所所需的人民币贷款业务。' |
|
: info.loanPurpose === '创业' |
|
? '用于创业或再创业过程中的资金需求。' |
|
: info.loanPurpose === '经营' && info.productType |
|
? '用于短期生产经营周转的可循环的人民币信用贷款业务。' |
|
: info.otherPurposesOfLoan |
|
}} |
|
</p> |
|
<div v-if="info.guarantyStyle" |
|
class="flex my-2"> |
|
<p class="text whitespace-nowrap">担保方式：</p> |
|
<p v-html="info.guarantyStyle" |
|
class="text"></p> |
|
</div> |
|
|
|
<p class="text">贷款期限：{{ info.minimumTermOfLoan }}月 - {{ info.maximumTermOfLoan }}月</p> |
|
<p class="text">贷款限额：{{ info.minimumLoan }}万元 - {{ info.loanCeiling }}万元</p> |
|
<p class="text">贷款利率：{{ info.minimumAprOnLoan }}% - {{ info.maximumAnnualInterestRate }}%</p> |
|
<p class="text">还款方式：{{ info.modeRepayment }}</p> |
|
|
|
<div v-if="info.prospectiveBorrowerText" |
|
class="flex my-2"> |
|
<p class="text whitespace-nowrap">适用条件：</p> |
|
<div class="text" |
|
v-html="info.prospectiveBorrowerText"></div> |
|
</div> |
|
|
|
<template v-if="riskInfo"> |
|
<h6 class="step-name mt-5">{{ route.params.action !== 'add' ? '三、' : '' }}材料要求</h6> |
|
<p v-if="riskInfo?.accountMaterials" |
|
class="text">办理账户-提供材料：{{ riskInfo?.accountMaterials }}</p> |
|
<p v-if="riskInfo?.sendingAccount" |
|
class="text">办理账户-发放账户：借记卡或放款专户</p> |
|
<p v-if="riskInfo?.loanApplicationMethod" |
|
class="text">贷款申请-申请方式：{{ riskInfo?.loanApplicationMethod }}</p> |
|
<p v-if="riskInfo?.borrowerMaterial" |
|
class="text">贷款申请-提供材料-借款人材料：{{ riskInfo?.borrowerMaterial }}</p> |
|
<template v-if="info.productType"> |
|
<p v-if="riskInfo?.enterpriseMaterial" |
|
class="text">贷款申请-提供材料-企业材料：{{ riskInfo?.enterpriseMaterial }}</p> |
|
<p v-if="riskInfo?.collateral" |
|
class="text">贷款申请-提供材料-抵押物：{{ riskInfo?.collateral }}</p> |
|
</template> |
|
<template v-else> |
|
<p v-if="riskInfo?.mateMaterial" |
|
class="text">贷款申请-提供材料-配偶材料：{{ riskInfo?.mateMaterial }}</p> |
|
<p v-if="riskInfo?.businessMaterials" |
|
class="text">贷款申请-提供材料-经营类材料：{{ riskInfo?.businessMaterials }}</p> |
|
</template> |
|
<p v-if="riskInfo?.supplementaryMaterials" |
|
class="text">贷款申请-提供材料-补充材料：{{ riskInfo?.supplementaryMaterials }}</p> |
|
<p v-if="riskInfo?.runBatchObject" |
|
class="text">系统跑批准入风控策略-跑批对象：{{ riskInfo?.runBatchObject }}</p> |
|
|
|
<template v-if="info.bankRiskControlAllocationTacticsList && info.bankRiskControlAllocationTacticsList.length"> |
|
<template v-for="(item, i) in info.bankRiskControlAllocationTacticsList"> |
|
<p v-if="item.tacticsSelectedStatus" |
|
:key="i" |
|
class="text flex"> |
|
系统跑批{{ item.pointName }}：{{ item.tacticsName || '无需跑批' }} |
|
|
|
<img v-if="item.tacticsName" |
|
src="@/assets/svgs/preview.svg" |
|
alt="" |
|
class="cursor-pointer ml-2" |
|
@click="preview(item, i)"> |
|
</p> |
|
</template> |
|
</template> |
|
|
|
<template v-if="info.creditScoringStrategyList && info.creditScoringStrategyList.length"> |
|
<template v-for="(item, i) in info.creditScoringStrategyList"> |
|
<p v-if="item.tacticsSelectedStatus" |
|
:key="i" |
|
class="text flex"> |
|
系统跑批{{ item.pointName }}：{{ item.tacticsName || '无需跑批' }} |
|
|
|
<img v-if="item.tacticsName" |
|
src="@/assets/svgs/preview.svg" |
|
alt="" |
|
class="cursor-pointer ml-2" |
|
@click="previewCredits(item, i)"> |
|
</p> |
|
</template> |
|
</template> |
|
|
|
<p v-if="info?.personalRiskDegreeStrategySelectedStatus === 803 || info?.enterpriseRiskDegreeStrategySelectedStatus === 803" |
|
class="text">系统跑批风险度策略： |
|
{{ info?.personalRiskDegreeStrategySelectedStatus === 803 ? '个人风险度策略' : '' }} |
|
{{ info?.personalRiskDegreeStrategySelectedStatus === 803 && info?.enterpriseRiskDegreeStrategySelectedStatus === 803 ? '，' : '' }} |
|
{{ info?.enterpriseRiskDegreeStrategySelectedStatus === 803 ? '企业风险度策略' : '' }}</p> |
|
|
|
<template v-if="info.interestRatePricingModelList && info.interestRatePricingModelList.length"> |
|
<template v-for="(item, i) in info.interestRatePricingModelList"> |
|
<p v-if="item.tacticsSelectedStatus" |
|
:key="i" |
|
class="text flex"> |
|
系统跑批{{ item.pointName }}：{{ item.tacticsName || '无需跑批' }} |
|
|
|
<img v-if="item.tacticsName" |
|
src="@/assets/svgs/preview.svg" |
|
alt="" |
|
class="cursor-pointer ml-2" |
|
@click="previewRate(item, i)"> |
|
</p> |
|
</template> |
|
</template> |
|
|
|
<p v-if="info?.enterpriseQuotaModelStr" |
|
class="text">系统跑批企业额度模型：{{ info?.enterpriseQuotaModelStr }}</p> |
|
|
|
<p v-if="riskInfo?.dueDiligenceMode" |
|
class="text">尽职调查-尽调方式：{{ riskInfo?.dueDiligenceMode }}</p> |
|
<p v-if="riskInfo?.dueDiligenceContent" |
|
class="text">尽职调查-尽调内容：{{ riskInfo?.dueDiligenceContent }}</p> |
|
<p v-if="riskInfo?.reviewContent" |
|
class="text">贷款审查-审查内容：{{ riskInfo?.reviewContent }}</p> |
|
<p v-if="riskInfo?.reviewSignature" |
|
class="text">贷款审查-审查签字：{{ riskInfo?.reviewSignature }}</p> |
|
<p v-if="riskInfo?.reviewApproveContent" |
|
class="text">贷款审批-审批内容：{{ riskInfo?.reviewApproveContent }}</p> |
|
<p v-if="riskInfo?.approvalSignature" |
|
class="text">贷款审批-审批签字：{{ riskInfo?.approvalSignature }}</p> |
|
<p v-if="riskInfo?.contractMaterials" |
|
class="text">签订合同-提供的材料：{{ riskInfo?.contractMaterials }}</p> |
|
<p v-if="riskInfo?.loanContract" |
|
class="text">需要签订借贷合同：{{ riskInfo?.loanContract }}</p> |
|
<p v-if="riskInfo?.mortgageContract" |
|
class="text">需要签订抵押合同：{{ riskInfo?.mortgageContract }}</p> |
|
<p v-if="riskInfo?.pledgeContract" |
|
class="text">需要签订质押合同：{{ riskInfo?.pledgeContract }}</p> |
|
<p v-if="riskInfo?.guaranteeContract" |
|
class="text">需要签订担保合同：{{ riskInfo?.guaranteeContract }}</p> |
|
|
|
<template v-if="info.postLoanSelectionStrategyList && info.postLoanSelectionStrategyList.length"> |
|
<template v-for="(item, i) in info.postLoanSelectionStrategyList"> |
|
<p v-if="item.tacticsSelectedStatus" |
|
:key="i" |
|
class="text flex"> |
|
系统跑批{{ item.pointName }}：{{ item.tacticsName || '无需跑批' }} |
|
|
|
<img v-if="item.tacticsName" |
|
src="@/assets/svgs/preview.svg" |
|
alt="" |
|
class="cursor-pointer ml-2" |
|
@click="previewAfter(item, i)"> |
|
</p> |
|
</template> |
|
</template> |
|
|
|
<h6 class="step-name mt-5">{{ route.params.action !== 'add' ? '四、' : '' }}业务流程</h6> |
|
<p class="text">1、贷款人APP向智信银行公司业务部门提交借款申请，同时提交贷款用途证明文件以及有关资料；</p> |
|
<p class="text">2、智信银行对贷款人的贷款申请进行审查，同时根据实际情况要求借款人提供补充资料；</p> |
|
<p class="text">3、智信银行内部审批通过后，与贷款人签订借款合同；</p> |
|
<p class="text">4、贷款人落实有关提款前提条件，根据贷款合同提款。</p> |
|
|
|
<template v-if="route.params.action !== 'add'"> |
|
<h6 class="step-name mt-5">五、注意要点</h6> |
|
<p class="text"> |
|
贷款人在使用款额度时，必须明确说明贷款用途。贷款人必须在获得循环贷款额度后，方可在额度与用途范围内申请贷款，受理机构仅限在原经办行，同时逐笔上报中心核批。单笔贷款金额不得超过贷款人单笔消费（或投资）总金额的80%。 |
|
</p> |
|
</template> |
|
</template> |
|
</div> |
|
|
|
<div v-if="approvals.length" |
|
class="mt-10"> |
|
<div v-for="(item, i) in approvals" |
|
:key="i" |
|
class="audit"> |
|
<div class="line"> |
|
<span class="field">审批意见：</span> |
|
<span class="status">{{ getStatus(item?.status) }}</span> |
|
</div> |
|
<div class="line"> |
|
<span class="field">意见描述：</span> |
|
{{ item.opinionDescription }} |
|
</div> |
|
<p class="mb-2 text-sm text-[#333] text-right">审查日期：{{ item.approvalTime }}</p> |
|
<p class="mb-2 text-sm text-[#333] text-right">审查员：{{ item.examinationApprovalOfficer }}</p> |
|
</div> |
|
</div> |
|
|
|
<el-drawer v-model="visible" |
|
:title="curPreviewTitle" |
|
size="100%" |
|
custom-class="model-drawer"> |
|
<component v-if="loadedComponents[activeComponent]" |
|
:is="loadedComponents[activeComponent]" |
|
v-model:row="curRow" |
|
disabled |
|
:key="curRow.strategyId" /> |
|
</el-drawer> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { ref, computed, watch, defineExpose, defineAsyncComponent, markRaw } from 'vue'; |
|
import { findById, approvalRecord } from '@/api/bank'; |
|
import { useRouter, useRoute } from 'vue-router'; |
|
import { getStatus } from '@/store/useProduct'; |
|
import { getUsername } from '@/utils/common'; |
|
|
|
const emit = defineEmits(['updateAudits']); |
|
const route = useRoute(); |
|
const id = computed(() => +route.query.id); |
|
const info = ref<Record<string, any>>({}); |
|
const riskInfo = ref<Record<string, any>>(null); |
|
const approvals = ref<Record<string, any>[]>([]); |
|
const userName = ref<string>(); |
|
|
|
const visible = ref<boolean>(false); |
|
const curRow = ref<Record<string, any>>(); |
|
const curPreviewTitle = ref<string>(); |
|
const asyncComponents = { |
|
'150': defineAsyncComponent(() => import('../strategy/150/Detail.vue')), |
|
'151': defineAsyncComponent(() => import('../strategy/151/Detail.vue')), |
|
'152': defineAsyncComponent(() => import('../strategy/152/Detail.vue')), |
|
'153': defineAsyncComponent(() => import('../strategy/153/Detail.vue')), |
|
'154': defineAsyncComponent(() => import('../strategy/154/Detail.vue')), |
|
'155': defineAsyncComponent(() => import('../strategy/155/Detail.vue')), |
|
'156': defineAsyncComponent(() => import('../strategy/156/Detail.vue')), |
|
'512': defineAsyncComponent(() => import('../strategy/512/Detail.vue')), |
|
'513': defineAsyncComponent(() => import('../strategy/513/Detail.vue')), |
|
'772': defineAsyncComponent(() => import('../interestRate/772/Detail.vue')), |
|
'935': defineAsyncComponent(() => import('../interestRate/935/Detail.vue')), |
|
'936': defineAsyncComponent(() => import('../interestRate/936/Detail.vue')), |
|
'1029': defineAsyncComponent(() => import('../afterLoan/1029/Detail.vue')), |
|
'1030': defineAsyncComponent(() => import('../afterLoan/1030/Detail.vue')), |
|
'1031': defineAsyncComponent(() => import('../afterLoan/1031/Detail.vue')), |
|
'1032': defineAsyncComponent(() => import('../afterLoan/1032/Detail.vue')), |
|
'1033': defineAsyncComponent(() => import('../afterLoan/1033/Detail.vue')), |
|
}; |
|
const loadedComponents = markRaw({}); |
|
const activeComponent = ref<string>(''); |
|
|
|
// 加载组件的方法 |
|
const loadComponent = async (componentName: string) => { |
|
if (!loadedComponents[componentName]) { |
|
try { |
|
loadedComponents[componentName] = asyncComponents[componentName]; |
|
activeComponent.value = componentName; |
|
} catch (error) { |
|
console.error(`Failed to load component ${componentName}`, error); |
|
} |
|
} else { |
|
activeComponent.value = componentName; |
|
} |
|
}; |
|
|
|
// 详情 |
|
const getDetail = async () => { |
|
userName.value = await getUsername(); |
|
|
|
if (id.value) { |
|
try { |
|
const { data } = await findById(id.value); |
|
info.value = data; |
|
if (info.value.riskControlDetails) riskInfo.value = data.riskControlDetails; |
|
|
|
const res = await approvalRecord({ |
|
id: id.value, |
|
}); |
|
approvals.value = res.list; |
|
emit('updateAudits', res.list.length); |
|
} finally { |
|
} |
|
} |
|
}; |
|
watch( |
|
() => route.query, |
|
() => { |
|
getDetail(); |
|
}, |
|
{ |
|
immediate: true, |
|
}, |
|
); |
|
|
|
// 预览策略 |
|
const preview = async (row: Record<string, any>, i: number) => { |
|
curRow.value = { |
|
strategyId: row.tacticsId, |
|
strategyName: row.tacticsName, |
|
}; |
|
await loadComponent(Object.keys(asyncComponents)[i]); |
|
curPreviewTitle.value = `查看${row.pointName}`; |
|
visible.value = true; |
|
}; |
|
// 预览信用评分策略 |
|
const previewCredits = async (row: Record<string, any>, i: number) => { |
|
curRow.value = { |
|
id: row.tacticsId, |
|
}; |
|
await loadComponent(i ? '513' : '512'); |
|
curPreviewTitle.value = `查看${row.pointName}`; |
|
visible.value = true; |
|
}; |
|
// 预览利率模型 |
|
const previewRate = async (row: Record<string, any>, i: number) => { |
|
curRow.value = { |
|
id: row.tacticsId, |
|
modelName: row.tacticsName, |
|
}; |
|
await loadComponent(i === 2 ? '936' : i ? '772' : '935'); |
|
curPreviewTitle.value = `查看${row.pointName}`; |
|
visible.value = true; |
|
}; |
|
// 预览贷后管理 |
|
const previewAfter = async (row: Record<string, any>, i: number) => { |
|
curRow.value = { |
|
strategyId: row.tacticsId, |
|
strategyName: row.tacticsName, |
|
}; |
|
await loadComponent(Object.keys(asyncComponents)[i + 12]); |
|
curPreviewTitle.value = `查看${row.pointName}`; |
|
visible.value = true; |
|
}; |
|
|
|
defineExpose({ |
|
info, |
|
}); |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.info { |
|
.step-name { |
|
@apply mb-3 text-sm font-semibold text-[#006bff]; |
|
} |
|
.line { |
|
@apply flex mb-2; |
|
} |
|
.label { |
|
@apply mr-1 text-sm font-semibold text-[#333] leading-[32px]; |
|
} |
|
.text { |
|
@apply text-sm text-[#333] leading-[32px]; |
|
} |
|
} |
|
.audit { |
|
@apply py-5 px-4 mb-[30px] bg-[#f9fafc] rounded-[10px]; |
|
.line { |
|
@apply mb-[18px] text-sm leading-[1.6]; |
|
} |
|
.field { |
|
@apply text-sm font-semibold; |
|
} |
|
} |
|
</style>
|
|
|