<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>