parent
3e9e1dac1e
commit
cbb444ad55
10 changed files with 291 additions and 199 deletions
@ -1,6 +1,7 @@ |
||||
module.exports = { |
||||
plugins: { |
||||
'tailwindcss/nesting': {}, |
||||
tailwindcss: {}, |
||||
autoprefixer: {}, |
||||
}, |
||||
} |
||||
}; |
||||
|
||||
@ -1,50 +0,0 @@ |
||||
import axios from '@/utils/request'; |
||||
|
||||
export const imageUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/image-upload`; |
||||
export const videoUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/video-upload`; |
||||
export const docUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/doc-upload`; |
||||
export const fileUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/file-upload`; |
||||
|
||||
export const cropImage = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/image-crop', data)).data; |
||||
|
||||
export const queryGlobalModel = async (): Promise<any> => (await axios.get('/backend/core/global-settings/model')).data; |
||||
export const queryGlobalSettings = async (): Promise<any> => (await axios.get('/backend/core/global-settings')).data; |
||||
export const updateGlobalBaseSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/global-settings/base?_method=put', data)).data; |
||||
export const updateGlobalCustomsSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/global-settings/customs?_method=put', data)).data; |
||||
export const updateGlobalUploadSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/global-settings/upload?_method=put', data)).data; |
||||
|
||||
export const querySiteSettings = async (): Promise<any> => (await axios.get('/backend/core/site-settings')).data; |
||||
export const updateSiteBaseSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/site-settings/base?_method=put', data)).data; |
||||
export const updateSiteCustomsSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/site-settings/customs?_method=put', data)).data; |
||||
export const updateSiteWatermarkSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/site-settings/watermark?_method=put', data)).data; |
||||
export const querySiteHtmlSettings = async (): Promise<any> => (await axios.get('/backend/core/site-settings/html')).data; |
||||
export const updateSiteHtmlSettings = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/site-settings/html?_method=put', data)).data; |
||||
export const queryCurrentSiteThemeList = async (): Promise<any> => (await axios.get('/backend/core/site/theme')).data; |
||||
|
||||
export const queryModelList = async (params?: Record<string, any>): Promise<any> => (await axios.get('/backend/core/model', { params })).data; |
||||
export const queryModel = async (id: number): Promise<any> => (await axios.get(`/backend/core/model/${id}`)).data; |
||||
export const createModel = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/model', data)).data; |
||||
export const updateModel = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/model?_method=put', data)).data; |
||||
export const updateModelOrder = async (data: number[]): Promise<any> => (await axios.post('/backend/core/model/order?_method=put', data)).data; |
||||
export const deleteModel = async (data: number[]): Promise<any> => (await axios.post('/backend/core/model?_method=delete', data)).data; |
||||
|
||||
export const queryDictTypeList = async (params?: Record<string, any>): Promise<any> => (await axios.get('/backend/core/dict-type', { params })).data; |
||||
export const queryDictType = async (id: number): Promise<any> => (await axios.get(`/backend/core/dict-type/${id}`)).data; |
||||
export const createDictType = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/dict-type', data)).data; |
||||
export const updateDictType = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/dict-type?_method=put', data)).data; |
||||
export const updateDictTypeOrder = async (data: number[]): Promise<any> => (await axios.post('/backend/core/dict-type/order?_method=put', data)).data; |
||||
export const deleteDictType = async (data: number[]): Promise<any> => (await axios.post('/backend/core/dict-type?_method=delete', data)).data; |
||||
|
||||
export const queryDictList = async (params?: Record<string, any>): Promise<any> => (await axios.get('/backend/core/dict', { params })).data; |
||||
export const queryDict = async (id: number): Promise<any> => (await axios.get(`/backend/core/dict/${id}`)).data; |
||||
export const createDict = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/dict', data)).data; |
||||
export const updateDict = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/dict?_method=put', data)).data; |
||||
export const updateDictOrder = async (data: number[]): Promise<any> => (await axios.post('/backend/core/dict/order?_method=put', data)).data; |
||||
export const deleteDict = async (data: number[]): Promise<any> => (await axios.post('/backend/core/dict?_method=delete', data)).data; |
||||
|
||||
export const queryBlockList = async (params?: Record<string, any>): Promise<any> => (await axios.get('/backend/core/block', { params })).data; |
||||
export const queryBlock = async (id: number): Promise<any> => (await axios.get(`/backend/core/block/${id}`)).data; |
||||
export const createBlock = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/block', data)).data; |
||||
export const updateBlock = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/core/block?_method=put', data)).data; |
||||
export const updateBlockOrder = async (data: number[]): Promise<any> => (await axios.post('/backend/core/block/order?_method=put', data)).data; |
||||
export const deleteBlock = async (data: number[]): Promise<any> => (await axios.post('/backend/core/block?_method=delete', data)).data; |
||||
@ -0,0 +1,8 @@ |
||||
import axios from '@/utils/request'; |
||||
|
||||
export const imageUploadUrl = `${import.meta.env.VITE_BASE_API}/backend/image-upload`; |
||||
export const cropImage = async (data: Record<string, any>): Promise<any> => (await axios.post('/backend/image-crop', data)).data; |
||||
export const getProcess = async (): Promise<any> => (await axios.post('/judgment/judgment/stRecord/getProcess?systemId=19')).data; |
||||
export const getProcessInformationBasedOnRoles = async (id: number): Promise<any> => |
||||
(await axios.post(`/judgment/judgment/stRecord/getProcessInformationBasedOnRoles?systemId=19&parentId=${id}`)).data; |
||||
export const getAllBusiness = async (): Promise<any> => (await axios.post('/judgment/judgment/stRecord/getAllBusiness?systemId=19')).data; |
||||
@ -1,161 +1,273 @@ |
||||
<template> |
||||
<div> |
||||
<el-tabs v-model="curTab" |
||||
@tab-click="tabChange"> |
||||
<el-tab-pane label="新增产品" |
||||
name="tab1"> |
||||
<div class="forms"> |
||||
<div class="line"> |
||||
<label class="label">产品定义：</label> |
||||
<div class="fields"> |
||||
<el-input type="textarea" |
||||
<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"></el-input> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">产品名称：</label> |
||||
<div class="fields"> |
||||
<el-input placeholder="取个有吸引力的产品名，限20字。" |
||||
maxlength="20"></el-input> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">产品币种：</label> |
||||
<div class="fields"> |
||||
<el-select v-model="form.coinType" |
||||
placeholder="请选择"> |
||||
<el-option label="人民币" |
||||
value="1" /> |
||||
maxlength="200" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="产品名称" prop="productName"> |
||||
<el-input placeholder="取个有吸引力的产品名，限20字。" maxlength="20"></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"> |
||||
<p class="field-name">选择本产品的贷款对象。</p> |
||||
<div class="flex items-center mb-2"> |
||||
<el-checkbox-group class="mt-1" v-model="form.age"> |
||||
<el-checkbox label="年龄" /> |
||||
</el-checkbox-group> |
||||
<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> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">贷款对象：</label> |
||||
<div class="fields"> |
||||
<p class="field-name">选择本产品的贷款对象。</p> |
||||
<el-checkbox-group v-model="form.cl"> |
||||
<el-checkbox label="身份证" /> |
||||
<el-checkbox label="身份证" /> |
||||
<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[3]?.subject?.itemList?.slice(2, 6)" :key="i" :label="i + 1">{{ 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[3]?.subject?.itemList?.slice(7, 11)" :key="i" :label="i + 1">{{ item.options }}</el-checkbox> |
||||
</el-checkbox-group> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">贷款用途：</label> |
||||
<div class="fields"> |
||||
<el-checkbox v-model="form.providentFundAndSocialSecurity" label="公积金/社保" :true-label="1" :false-label="2"></el-checkbox> |
||||
</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.cl"> |
||||
<el-radio :label="3">Option A</el-radio> |
||||
<el-radio :label="9">Option C</el-radio> |
||||
<el-radio-group v-model="form.loanPurpose"> |
||||
<el-radio v-for="(item, i) in config[4]?.subject?.itemList" :key="i" :label="item.itemId">{{ item.options }}</el-radio> |
||||
<el-radio :label="4">其他</el-radio> |
||||
</el-radio-group> |
||||
<el-input |
||||
v-if="form?.loanPurpose === 4" |
||||
class="w-[250px] ml-5" |
||||
placeholder="请描述其他贷款用途可用于哪些方面。" |
||||
maxlength="10" |
||||
v-model="form.otherPurposesOfLoan" |
||||
></el-input> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">担保方式：</label> |
||||
<div class="fields"> |
||||
</el-form-item> |
||||
<el-form-item label="担保方式" prop="bankGuaranteeTypeIds"> |
||||
<div class="flex-1"> |
||||
<p class="field-name">选择本产品的担保种类。</p> |
||||
<el-checkbox-group v-model="form.cl"> |
||||
<el-checkbox label="身份证" /> |
||||
<el-checkbox label="身份证" /> |
||||
<div v-for="(item, i) in guaranteees" :key="i" class="mb-2"> |
||||
<el-checkbox-group v-model="form.bankGuaranteeTypeIds"> |
||||
<el-checkbox :label="item.id">{{ item.guarantyStyle }}</el-checkbox> |
||||
<el-checkbox v-for="(child, j) in item?.children" :key="j" :label="child.id">{{ child.guarantyStyle }}</el-checkbox> |
||||
</el-checkbox-group> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">贷款额度：</label> |
||||
<div class="fields"> |
||||
</el-form-item> |
||||
<el-form-item label="贷款额度" prop="minimumLoan"> |
||||
<div class="flex-1"> |
||||
<div class="num-inputs"> |
||||
<el-input placeholder="最小额度" |
||||
min="0"></el-input> |
||||
<el-input placeholder="最小额度" min="0" v-model.number="form.minimumLoan"></el-input> |
||||
<span class="split">-</span> |
||||
<el-input placeholder="最高额度" |
||||
min="0"></el-input> |
||||
<el-input placeholder="最高额度" min="0" v-model.number="form.loanCeiling"></el-input> |
||||
<span class="unit">万元</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">贷款利率：</label> |
||||
<div class="fields"> |
||||
</el-form-item> |
||||
<el-form-item label="贷款利率" prop="minimumAprOnLoan"> |
||||
<div class="flex-1"> |
||||
<div class="num-inputs"> |
||||
<el-input placeholder="最小年利率" |
||||
min="0"></el-input> |
||||
<el-input placeholder="最小年利率" min="0" v-model.number="form.minimumAprOnLoan"></el-input> |
||||
<span class="split">-</span> |
||||
<el-input placeholder="最高年利率" |
||||
min="0"></el-input> |
||||
<el-input placeholder="最高年利率" min="0" v-model.number="form.maximumAnnualInterestRate"></el-input> |
||||
<span class="unit">%</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">贷款期限：</label> |
||||
<div class="fields"> |
||||
</el-form-item> |
||||
<el-form-item label="贷款期限" prop="minimumTermOfLoan"> |
||||
<div class="flex-1"> |
||||
<div class="num-inputs"> |
||||
<el-input placeholder="最小期限" |
||||
min="0"></el-input> |
||||
<el-input placeholder="最小期限" min="0" v-model.number="form.minimumTermOfLoan"></el-input> |
||||
<span class="split">-</span> |
||||
<el-input placeholder="最大期限" |
||||
min="0"></el-input> |
||||
<el-input placeholder="最大期限" min="0" v-model.number="form.maximumTermOfLoan"></el-input> |
||||
<span class="unit">月</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">还款方式：</label> |
||||
<div class="fields"> |
||||
</el-form-item> |
||||
<el-form-item label="还款方式" prop="modeRepayment"> |
||||
<div class="flex-1"> |
||||
<p class="field-name">选择本产品可以选择的还款方式。</p> |
||||
<el-checkbox-group v-model="form.cl"> |
||||
<el-checkbox label="身份证" /> |
||||
<el-checkbox label="身份证" /> |
||||
<el-checkbox-group v-model="form.modeRepayment"> |
||||
<el-checkbox :label="1">等额本息</el-checkbox> |
||||
<el-checkbox :label="2">先息后本</el-checkbox> |
||||
<el-checkbox :label="3">等额本金</el-checkbox> |
||||
</el-checkbox-group> |
||||
</div> |
||||
</div> |
||||
<div class="line"> |
||||
<label class="label">提前还款：</label> |
||||
<div class="fields flex items-center"> |
||||
<el-switch v-model="form.cl" /> |
||||
</el-form-item> |
||||
<el-form-item label="提前还款" prop="whetherToSupportEarlyRepayment"> |
||||
<div class="flex-1 flex items-center"> |
||||
<el-switch :active-value="1" :inactive-value="2" v-model="form.whetherToSupportEarlyRepayment" /> |
||||
<p class="tips ml-4">本产品是否支持提前还款。</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</el-form-item> |
||||
<div class="flex justify-end"> |
||||
<div class="submit">完成，提交审批</div> |
||||
</div> |
||||
<div class="submit" @click="submit(formRef)">完成，提交风控经理</div> |
||||
</div> |
||||
</el-form> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref, onMounted } from 'vue'; |
||||
import { ref, reactive, computed, onMounted } from 'vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import type { TabsPaneContext } from 'element-plus'; |
||||
import { personalRiskControlConfigurationField } from '@/api/bank'; |
||||
import type { TabsPaneContext, FormInstance, FormRules } from 'element-plus'; |
||||
import { productElement, typeOfGuarantee } from '@/api/bank'; |
||||
import { getProcessInformationBasedOnRoles, getAllBusiness } from '@/api/judgment'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
|
||||
interface RuleForm { |
||||
productDefinition: string; |
||||
productName: string; |
||||
productCurrency: number; |
||||
bankGuaranteeTypeIds: any[]; |
||||
currentWorkingLife?: any; |
||||
educationalRequirements?: any; |
||||
loanCeiling?: number; |
||||
loanPurpose?: number; |
||||
maximumAge?: number; |
||||
maximumAnnualInterestRate?: number; |
||||
maximumTermOfLoan?: number; |
||||
minimumAge?: number; |
||||
minimumAprOnLoan?: number; |
||||
minimumLoan?: number; |
||||
minimumTermOfLoan?: number; |
||||
modeRepayment?: any; |
||||
otherPurposesOfLoan: string; |
||||
productObject?: number; |
||||
productType: number; |
||||
providentFundAndSocialSecurity?: number; |
||||
whetherToSupportEarlyRepayment?: number; |
||||
} |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const curTab = ref<string>('tab1'); |
||||
const config = ref<any>({}); |
||||
const form = ref<any>({ |
||||
coinType: 1, |
||||
const guaranteees = ref<any[]>([]); |
||||
const formRef = ref<FormInstance>(); |
||||
const form = reactive<RuleForm>({ |
||||
productDefinition: '', |
||||
productName: '', |
||||
productCurrency: 1, |
||||
bankGuaranteeTypeIds: [], |
||||
currentWorkingLife: [], |
||||
educationalRequirements: [], |
||||
loanCeiling: '', |
||||
loanPurpose: '', |
||||
maximumAge: '', |
||||
maximumAnnualInterestRate: '', |
||||
maximumTermOfLoan: '', |
||||
minimumAge: '', |
||||
minimumAprOnLoan: '', |
||||
minimumLoan: '', |
||||
minimumTermOfLoan: '', |
||||
modeRepayment: [], |
||||
otherPurposesOfLoan: '', |
||||
productObject: '', |
||||
productType: computed(() => +route.query.type), |
||||
providentFundAndSocialSecurity: 2, |
||||
whetherToSupportEarlyRepayment: 2, |
||||
}); |
||||
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(41); |
||||
config.value = process; |
||||
|
||||
const { data } = await typeOfGuarantee(); |
||||
guaranteees.value = data; |
||||
}; |
||||
// 提交 |
||||
const submit = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate(async (valid, fields) => { |
||||
if (valid) { |
||||
try { |
||||
const { data } = await personalRiskControlConfigurationField(); |
||||
config.value = data; |
||||
console.log(33, form.value); |
||||
// const { data } = await productElement(form.value); |
||||
// ElMessage.success('提交成功！'); |
||||
// setTimeout(() => { |
||||
// router.push(``) |
||||
// }, 1500); |
||||
} finally { |
||||
} |
||||
} else { |
||||
console.log('error submit!', fields); |
||||
} |
||||
}); |
||||
}; |
||||
onMounted(() => { |
||||
getConfig(); |
||||
// fetchData(); |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url(../../styles/form.scss); |
||||
.form { |
||||
:deep(.el-form-item__label) { |
||||
@apply font-semibold text-sm text-black; |
||||
} |
||||
|
||||
.field-name { |
||||
@apply mb-3 text-sm font-semibold text-[#333]; |
||||
} |
||||
.tips { |
||||
@apply text-sm text-[#686868]; |
||||
} |
||||
.num-inputs { |
||||
@apply flex items-center; |
||||
.el-input { |
||||
@apply w-[200px]; |
||||
} |
||||
.split { |
||||
@apply mx-2.5 text-white; |
||||
} |
||||
.unit { |
||||
@apply ml-2.5 text-sm text-[#333]; |
||||
} |
||||
} |
||||
.submit { |
||||
@apply py-[15px] px-[22px] text-sm leading-none text-white bg-[#006bff] rounded-xl cursor-pointer; |
||||
&:hover { |
||||
@apply opacity-90; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue