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.
395 lines
18 KiB
395 lines
18 KiB
<template> |
|
<div> |
|
<el-tabs v-model="curTab" |
|
@tab-click="tabChange"> |
|
<el-tab-pane label="新增产品" |
|
name="tab1"> |
|
<el-form ref="formRef" |
|
:model="form" |
|
:rules="rules" |
|
label-width="100px" |
|
label-suffix="：" |
|
class="form" |
|
status-icon> |
|
<el-form-item label="产品定义" |
|
prop="productDefinition"> |
|
<el-input type="textarea" |
|
placeholder="用一段话简单介绍一下这个产品或者描述产品的设计理念。例如：本产品根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人可在额度金额内可循环周转使用贷款。" |
|
maxlength="200" |
|
v-model="form.productDefinition"></el-input> |
|
</el-form-item> |
|
<el-form-item label="产品名称" |
|
prop="productName"> |
|
<el-input placeholder="取个有吸引力的产品名，限20字。" |
|
maxlength="20" |
|
v-model="form.productName"></el-input> |
|
</el-form-item> |
|
<el-form-item label="产品币种" |
|
prop="productCurrency"> |
|
<el-select v-model="form.productCurrency" |
|
placeholder="请选择"> |
|
<el-option label="人民币" |
|
:value="1" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="贷款对象" |
|
required> |
|
<div class="flex-1"> |
|
<!-- 企业 --> |
|
<template v-if="form.productType"> |
|
<div class="flex items-center"> |
|
<span class="mr-3 text-[#333] text-sm">企业类型</span> |
|
<el-select v-model="form.productObject" |
|
placeholder="请选择"> |
|
<el-option v-for="(item, i) in config.find((e: any) => e.name === '企业产品-贷款对象')?.recordChildren[0]?.subject?.itemList" |
|
:key="i" |
|
:label="item.options" |
|
:value="item.itemId" /> |
|
</el-select> |
|
</div> |
|
<div class="flex items-center mt-4"> |
|
<span class="mr-3 text-[#333] text-sm">借款人年龄</span> |
|
<div class="num-inputs ml-7"> |
|
<el-input placeholder="最小年龄" |
|
v-model.number="form.minimumAge"></el-input> |
|
<span class="split">-</span> |
|
<el-input placeholder="最大年龄" |
|
v-model.number="form.maximumAge"></el-input> |
|
<span class="unit">周岁</span> |
|
</div> |
|
</div> |
|
</template> |
|
<!-- 个人 --> |
|
<template v-else> |
|
<p class="field-name">选择本产品的贷款对象。</p> |
|
<div class="flex items-center mb-2"> |
|
<el-checkbox class="mt-1" |
|
v-model="form.age" |
|
label="年龄" /> |
|
<div v-if="form.age" |
|
class="num-inputs ml-7"> |
|
<el-input placeholder="最小年龄" |
|
v-model.number="form.minimumAge"></el-input> |
|
<span class="split">-</span> |
|
<el-input placeholder="最大年龄" |
|
v-model.number="form.maximumAge"></el-input> |
|
</div> |
|
</div> |
|
<div class="flex items-center mb-2"> |
|
<el-checkbox v-model="form.edu" |
|
label="学历要求"></el-checkbox> |
|
<el-checkbox-group v-if="form.edu" |
|
class="mt-2 ml-5" |
|
v-model="form.educationalRequirements"> |
|
<el-checkbox v-for="(item, i) in config.find((e: any) => e.name === '个人产品-贷款对象')?.recordChildren[1]?.subject?.itemList" |
|
:key="i" |
|
:label="item.itemId">{{ item.options }}</el-checkbox> |
|
</el-checkbox-group> |
|
</div> |
|
|
|
<div class="flex items-center mb-2"> |
|
<el-checkbox v-model="form.curWL" |
|
label="工作年限"></el-checkbox> |
|
<el-checkbox-group v-if="form.curWL" |
|
class="mt-2 ml-5" |
|
v-model="form.currentWorkingLife"> |
|
<el-checkbox v-for="(item, i) in config.find((e: any) => e.name === '个人产品-贷款对象')?.recordChildren[2]?.subject?.itemList" |
|
:key="i" |
|
:label="item.itemId">{{ item.options }}</el-checkbox> |
|
</el-checkbox-group> |
|
</div> |
|
<el-checkbox v-model="form.providentFundAndSocialSecurity" |
|
label="公积金/社保"></el-checkbox> |
|
</template> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="贷款用途" |
|
prop="loanPurpose"> |
|
<div class="flex-1"> |
|
<p class="field-name">选择本产品贷款资金的用途。</p> |
|
<el-radio-group v-model="form.loanPurpose"> |
|
<template v-if="form.productType"> |
|
<el-radio v-for="(item, i) in config.find((e: any) => e.name === '企业产品-贷款用途')?.subject?.itemList" |
|
:key="i" |
|
:label="item.itemId">{{ item.options }}</el-radio> |
|
</template> |
|
<template v-else> |
|
<el-radio v-for="(item, i) in config.find((e: any) => e.name === '个人产品-贷款用途')?.recordChildren" |
|
:key="i" |
|
:label="item.id">{{ item.name }}</el-radio> |
|
</template> |
|
</el-radio-group> |
|
<el-input v-if="form?.loanPurpose === 107" |
|
class="w-[250px] ml-5" |
|
placeholder="请描述其他贷款用途可用于哪些方面。" |
|
maxlength="10" |
|
v-model="form.otherPurposesOfLoan"></el-input> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="担保方式" |
|
prop="bankGuaranteeTypeIds"> |
|
<div class="flex-1"> |
|
<p class="field-name">选择本产品的担保种类。</p> |
|
<div v-for="(item, i) in config.find((e: any) => e.name === '担保方式')?.recordChildren" |
|
:key="i" |
|
class="mb-2"> |
|
<el-checkbox-group v-model="form.bankGuaranteeTypeIds"> |
|
<el-checkbox :label="item.id">{{ item.name }}</el-checkbox> |
|
<el-checkbox v-show="(item.id === 110 && form.bankGuaranteeTypeIds.includes(110)) || (item.id === 111 && form.bankGuaranteeTypeIds.includes(111))" |
|
v-for="(child, j) in item?.subject?.itemList" |
|
:key="j" |
|
:label="child.itemId">{{ child.options }}</el-checkbox> |
|
</el-checkbox-group> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="贷款额度" |
|
prop="minimumLoan"> |
|
<div class="flex-1"> |
|
<div class="num-inputs"> |
|
<el-input placeholder="最小额度" |
|
min="0" |
|
v-model.number="form.minimumLoan"></el-input> |
|
<span class="split">-</span> |
|
<el-input placeholder="最高额度" |
|
min="0" |
|
v-model.number="form.loanCeiling"></el-input> |
|
<span class="unit">万元</span> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="贷款利率" |
|
prop="minimumAprOnLoan"> |
|
<div class="flex-1"> |
|
<div class="num-inputs"> |
|
<el-input placeholder="最小年利率" |
|
min="0" |
|
v-model.number="form.minimumAprOnLoan"></el-input> |
|
<span class="split">-</span> |
|
<el-input placeholder="最高年利率" |
|
min="0" |
|
v-model.number="form.maximumAnnualInterestRate"></el-input> |
|
<span class="unit">%</span> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="贷款期限" |
|
prop="minimumTermOfLoan"> |
|
<div class="flex-1"> |
|
<div class="num-inputs"> |
|
<el-input placeholder="最小期限" |
|
min="0" |
|
v-model.number="form.minimumTermOfLoan"></el-input> |
|
<span class="split">-</span> |
|
<el-input placeholder="最大期限" |
|
min="0" |
|
v-model.number="form.maximumTermOfLoan"></el-input> |
|
<span class="unit">月</span> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="还款方式" |
|
prop="modeRepayment"> |
|
<div class="flex-1"> |
|
<p class="field-name">选择本产品可以选择的还款方式。</p> |
|
<el-checkbox-group v-model="form.modeRepayment"> |
|
<el-checkbox v-for="(item, i) in config.find((e: any) => e.name === '还款方式')?.subject?.itemList" |
|
:key="i" |
|
:label="item.itemId">{{ item.options }}</el-checkbox> |
|
</el-checkbox-group> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="提前还款" |
|
prop="whetherToSupportEarlyRepayment"> |
|
<div class="flex-1 flex items-center"> |
|
<el-switch v-model="form.whetherToSupportEarlyRepayment" /> |
|
<p class="tips ml-4">本产品是否支持提前还款。</p> |
|
</div> |
|
</el-form-item> |
|
<div class="flex justify-end"> |
|
<div class="submit" |
|
@click="submit(formRef)">完成，提交风控经理</div> |
|
</div> |
|
</el-form> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { ref, reactive, computed, onMounted, defineEmits } from 'vue'; |
|
import { ElMessage } from 'element-plus'; |
|
import type { TabsPaneContext, FormInstance, FormRules } from 'element-plus'; |
|
import { productElement, typeOfGuarantee, save } from '@/api/bank'; |
|
import { getProcessInformationBasedOnRoles, addOperation } from '@/api/judgment'; |
|
import { useRouter, useRoute } from 'vue-router'; |
|
import { handleId } from '@/utils/common'; |
|
|
|
const emit = defineEmits(['getList']); |
|
interface RuleForm { |
|
productDefinition: string; |
|
productName: string; |
|
productCurrency: number; |
|
bankGuaranteeTypeIds: any[]; |
|
currentWorkingLife?: any; |
|
educationalRequirements?: any; |
|
loanCeiling: any; |
|
loanPurpose: any; |
|
productObject: any; |
|
maximumAge: any; |
|
maximumAnnualInterestRate: any; |
|
maximumTermOfLoan: any; |
|
age: boolean; |
|
minimumAge: any; |
|
minimumAprOnLoan: any; |
|
minimumLoan: any; |
|
minimumTermOfLoan: any; |
|
modeRepayment?: any; |
|
otherPurposesOfLoan: string; |
|
productObject: any; |
|
productType: number; |
|
providentFundAndSocialSecurity: any; |
|
whetherToSupportEarlyRepayment?: any; |
|
} |
|
|
|
const router = useRouter(); |
|
const route = useRoute(); |
|
const curTab = ref<string>('tab1'); |
|
const config = ref<any[]>([]); |
|
const formRef = ref<FormInstance>(); |
|
const form = reactive<RuleForm>({ |
|
productDefinition: '', |
|
productName: '', |
|
productCurrency: 1, |
|
bankGuaranteeTypeIds: [], |
|
currentWorkingLife: [], |
|
educationalRequirements: [], |
|
loanCeiling: '', |
|
loanPurpose: '', |
|
productObject: '', |
|
maximumAge: '', |
|
maximumAnnualInterestRate: '', |
|
maximumTermOfLoan: '', |
|
age: false, |
|
minimumAge: '', |
|
minimumAprOnLoan: '', |
|
minimumLoan: '', |
|
minimumTermOfLoan: '', |
|
modeRepayment: [], |
|
otherPurposesOfLoan: '', |
|
productObject: '', |
|
productType: computed(() => +route.query.type), |
|
providentFundAndSocialSecurity: false, |
|
whetherToSupportEarlyRepayment: false, |
|
}); |
|
const rules = reactive<FormRules<RuleForm>>({ |
|
productDefinition: [{ required: true, message: '请输入产品定义', trigger: 'blur' }], |
|
productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }], |
|
productCurrency: [{ required: true, message: '请选择产品币种', trigger: 'change' }], |
|
loanPurpose: [{ required: true, message: '请选择贷款用途', trigger: 'change' }], |
|
bankGuaranteeTypeIds: [{ required: true, message: '请选择担保方式', trigger: 'change' }], |
|
minimumLoan: [{ required: true, message: '请输入贷款额度', trigger: 'blur' }], |
|
minimumAprOnLoan: [{ required: true, message: '请输入贷款利率', trigger: 'blur' }], |
|
minimumTermOfLoan: [{ required: true, message: '请输入贷款期限', trigger: 'blur' }], |
|
modeRepayment: [{ required: true, message: '请选择还款方式', trigger: 'change' }], |
|
}); |
|
|
|
// tab切换回调 |
|
const tabChange = (tab: TabsPaneContext, event: Event) => { |
|
console.log(tab, event); |
|
}; |
|
// 配置项 |
|
const getConfig = async () => { |
|
const { process } = await getProcessInformationBasedOnRoles(form.productType === 1 ? 45 : 44); |
|
config.value = process; |
|
}; |
|
// 提交 |
|
const submit = async (formEl: FormInstance | undefined) => { |
|
if (!formEl) return; |
|
await formEl.validate(async (valid, fields) => { |
|
if (valid) { |
|
try { |
|
const param = JSON.parse(JSON.stringify(form)); |
|
param.currentWorkingLife = param.currentWorkingLife.join(); |
|
param.educationalRequirements = param.educationalRequirements.join(); |
|
param.modeRepayment = param.modeRepayment.join(); |
|
param.providentFundAndSocialSecurity = param.providentFundAndSocialSecurity ? 1 : ''; |
|
param.whetherToSupportEarlyRepayment = param.whetherToSupportEarlyRepayment ? 58 : ''; |
|
// 担保方式 |
|
param.addBankProductsGuarantyStyleReqList = []; |
|
param.bankGuaranteeTypeIds.forEach((e: number) => { |
|
param.addBankProductsGuarantyStyleReqList.push({ |
|
bankGuaranteeTypeId: (e > 22 && e < 33) || (e > 32 && e < 38) ? e : '', |
|
pid: e > 22 && e < 33 ? 110 : e > 32 && e < 38 ? 111 : e, |
|
}); |
|
}); |
|
const { message } = await save(param); |
|
addRecord(param, message); |
|
ElMessage.success('提交成功！'); |
|
emit('getList', 1); |
|
} finally { |
|
} |
|
} else { |
|
console.log('error submit!', fields); |
|
} |
|
}); |
|
}; |
|
// 新增判分记录 |
|
const addRecord = async (data: Record<string, any>, newId: number) => { |
|
const isEnterprise = data.productType === 1; |
|
const preIds = `1,2,41,${data.productType ? 45 : 44},${newId}`; // 1，关卡id，角色（这个页面是产品经理新增产品），个人/企业（44/45） |
|
const lcRule = <Record<string, any>[]>[ |
|
handleId(48, 1, data.productDefinition, preIds + ',48', 3), |
|
handleId(49, 2, data.productName, preIds + ',49', 3), |
|
handleId(50, 3, 1, preIds + ',50', 1), |
|
]; |
|
|
|
// 贷款用途 |
|
if (isEnterprise) { |
|
// 企业 |
|
lcRule.push( |
|
handleId(62, 7, data.productObject, preIds + ',61,62', 1), |
|
handleId(63, 8, '[' + data.minimumAge + ',' + data.maximumAge + ']' + '', preIds + ',61,63', 5), |
|
handleId(65, 19, data.loanPurpose, preIds + ',65', 1), |
|
); |
|
} else { |
|
// 个人 |
|
data.age && lcRule.push(handleId(100, 41, '[' + data.minimumAge + ',' + data.maximumAge + ']' + '', preIds + ',51,100', 5)); |
|
data.edu && lcRule.push(handleId(101, 42, data.educationalRequirements, preIds + ',51,101', 1)); |
|
data.curWL && lcRule.push(handleId(102, 43, data.currentWorkingLife, preIds + ',51,102', 1)); |
|
data.providentFundAndSocialSecurity && lcRule.push(handleId(103, '', '', preIds + ',51,103', '')); // 公积金社保 |
|
|
|
lcRule.push( |
|
data.loanPurpose === 107 ? handleId(107, 11, data.otherPurposesOfLoan, preIds + ',52,107', 3) : handleId(data.loanPurpose, '', '', preIds + ',52,' + data.loanPurpose, 1), |
|
); |
|
} |
|
|
|
// 担保方式 |
|
data.bankGuaranteeTypeIds.includes(108) && lcRule.push(handleId(108, '', '', preIds + ',53,108', '')); |
|
data.bankGuaranteeTypeIds.includes(109) && lcRule.push(handleId(109, '', '', preIds + ',53,109', '')); |
|
data.bankGuaranteeTypeIds.includes(110) && lcRule.push(handleId(110, 13, data.bankGuaranteeTypeIds.filter((e: number) => e > 22 && e < 33).join(), preIds + ',53,110', 1)); |
|
data.bankGuaranteeTypeIds.includes(111) && lcRule.push(handleId(111, 14, data.bankGuaranteeTypeIds.filter((e: number) => e > 32 && e < 38).join(), preIds + ',53,111', 1)); |
|
|
|
lcRule.push( |
|
handleId(54, 15, '[' + data.minimumLoan + ',' + data.loanCeiling + ']', preIds + ',54', 5), |
|
handleId(55, 16, '[' + data.minimumAprOnLoan + ',' + data.maximumAnnualInterestRate + ']', preIds + ',55', 5), |
|
handleId(56, 17, '[' + data.minimumTermOfLoan + ',' + data.maximumTermOfLoan + ']', preIds + ',56', 5), |
|
handleId(57, 18, data.modeRepayment, preIds + ',57', 1), |
|
); |
|
|
|
data.whetherToSupportEarlyRepayment && lcRule.push(handleId(58, '', '', preIds + ',58', '')); |
|
|
|
await addOperation({ |
|
parentId: preIds, |
|
lcJudgmentRuleReq: lcRule, |
|
projectId: 1, |
|
}); |
|
}; |
|
onMounted(() => { |
|
getConfig(); |
|
}); |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url(../../styles/form.scss); |
|
</style>
|
|
|