金融产品设计及数字化营销沙盘
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
12 KiB

<template>
1 year ago
<div class="max-h-[calc(100vh-250px)] overflow-auto">
<h6 class="title">城市人口及年龄参数</h6>
<el-table class="c-table"
:data="form.ageAduRatioList"
:span-method="ageSpan"
border>
<el-table-column prop="productName"
label="城市总人口 (人)"
align="center">
<template #default="{ row }">
<el-input v-model.number="row.totalPopulation"
placeholder="请输入"
type="number"
min="0"></el-input>
</template>
</el-table-column>
<el-table-column prop="ageStage"
label="年龄 (岁)"
align="center"></el-table-column>
<el-table-column prop="ageRatio"
label="年龄占比 (%)"
align="center">
<template #default="{ row }">
<el-input v-model="row.ageRatio"
placeholder="请输入"></el-input>
</template>
</el-table-column>
</el-table>
<h6 class="title mt-7">学历参数</h6>
<el-table class="c-table"
:data="edus"
:span-method="eduSpan"
border>
<el-table-column prop="ageStage"
label="年龄 (岁)"
align="center"> </el-table-column>
<el-table-column prop="education"
label="学历"
align="center"></el-table-column>
<el-table-column prop="parentIds"
label="学历占比 (%)"
align="center">
<template #default="{ row }">
<el-input v-model="row.eduRatio"
placeholder="请输入"></el-input>
</template>
</el-table-column>
</el-table>
<h6 class="title mt-7">企业数量配置</h6>
<el-table class="c-table"
:data="form.enterpriseNumList"
border>
<el-table-column prop="productName"
label="企业类型"
align="center">
<template #default="{ row }">
{{ row.enterpriseType == 1 ? '小微企业' : '创业企业' }}
</template>
</el-table-column>
<el-table-column prop="parentIds"
label="企业数量(家)"
align="center">
<template #default="{ row }">
<el-input v-model.number="row.number"
placeholder="请输入"
maxlength="3"
type="number"
min="0"></el-input>
</template>
</el-table-column>
</el-table>
<h6 class="title mt-7">单个商品每日需求量</h6>
<el-table class="c-table"
:data="form.commodityDemandList"
border>
<el-table-column prop="typeName"
label="买家类型"
min-width="100"
align="center"> </el-table-column>
<el-table-column prop="parentIds"
label="买家总占比 (%)"
min-width="100"
align="center">
<template #default="{ row }">
<el-input v-model="row.buyerRatio"
placeholder="请输入"></el-input>
</template>
</el-table-column>
<el-table-column prop="parentIds"
label="每次需求人数占比 (%)"
min-width="130"
align="center">
<template #default="{ row }">
<el-input v-model="row.peopleNumRatio"
placeholder="请输入"></el-input>
</template>
</el-table-column>
<el-table-column prop="parentIds"
label="单个买家单次需求"
min-width="200"
align="center">
<template #default="{ row }">
<div class="flex items-center">
<template v-if="row.typeId == 7 || row.typeId == 8">
<span class="mr-2 whitespace-nowrap">一个保险产品一次最多购买</span>
<el-input v-model="row.buyerSingleDemand"
placeholder="请输入"></el-input>
<span class="ml-2"></span>
</template>
<template v-else>
<span class="mr-2 whitespace-nowrap">{{ row.typeId == 9 ? '投入' : '贷款' }}</span>
<el-input v-model="row.buyerSingleDemandMin"
placeholder="请输入"></el-input>
<span class="mx-2">~</span>
<el-input v-model="row.buyerSingleDemandMax"
placeholder="请输入"></el-input>
<span class="ml-2 whitespace-nowrap">万元</span>
</template>
</div>
</template>
</el-table-column>
</el-table>
<h6 class="title mt-7">系统账户起始金额</h6>
<el-form v-if="form.moneyAllocationList.length"
class="w-[300px]"
label-width="120px"
label-suffix=":">
<el-form-item label="银行账户">
<el-input v-model="form.moneyAllocationList[0].startingAmount">
<template #suffix> 万元 </template>
</el-input>
</el-form-item>
<el-form-item label="保险账户">
<el-input v-model="form.moneyAllocationList[1].startingAmount">
<template #suffix> 万元 </template>
</el-input>
</el-form-item>
<el-form-item label="基金账户">
<el-input v-model="form.moneyAllocationList[2].startingAmount">
<template #suffix> 万元 </template>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="flex justify-end">
1 year ago
<div class="submit"
@click="submit">保存修改</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
1 year ago
import type { TableColumnCtx } from 'element-plus';
1 year ago
import { isIllegalNum } from '@/utils/common';
1 year ago
import { saveOrUpdate, systemBuyerFind, ages, edu, accountType, buyerType } from '@/api/config';
import _ from 'lodash';
1 year ago
const added = ref<number>(0);
const edus = ref<Record<string, any>[]>([]);
const form = ref<Record<string, any>>({
ageAduRatioList: [],
commodityDemandList: [],
enterpriseNumList: [
{
enterpriseType: 1,
number: '',
},
{
enterpriseType: 2,
number: '',
},
],
moneyAllocationList: [],
});
1 year ago
// 配置项
const getInfo = async () => {
1 year ago
edus.value = [];
const res = await edu();
const { list } = await ages();
list.map((e) => {
res.list.map((n) => {
edus.value.push({
eduRatio: '',
...n,
...e,
});
});
e.ageRatio = '';
e.totalPopulation = '';
});
form.value.ageAduRatioList = list;
const { data } = await buyerType();
data.map((e) => {
e.buyerRatio = '';
e.buyerSingleDemand = '';
e.buyerSingleDemandMin = '';
e.buyerSingleDemandMax = '';
e.peopleNumRatio = '';
});
form.value.commodityDemandList = data;
const res1 = await accountType();
res1.list.map((e) => {
e.startingAmount = '';
});
form.value.moneyAllocationList = res1.list;
// 以上的是每个模块的每行名称,下面的是整块的详情
const { systemBuyerDTO } = await systemBuyerFind();
if (systemBuyerDTO.ageAduRatioList.length) {
edus.value = _.merge(edus.value, systemBuyerDTO.ageAduRatioList.splice(6));
added.value = 1;
}
systemBuyerDTO.commodityDemandList.map((e) => {
if (e.typeId != 7 && e.typeId != 8 && e.buyerSingleDemand.includes('-')) {
const val = e.buyerSingleDemand.split('-');
e.buyerSingleDemandMin = val[0];
e.buyerSingleDemandMax = val[1];
}
});
_.merge(form.value, systemBuyerDTO);
console.log('🚀 ~ file: Buyer.vue:236 ~ getInfo ~ form.value:', form.value);
};
1 year ago
const submit = async () => {
const param = JSON.parse(JSON.stringify(form.value));
let invalid = 0;
// 年龄
1 year ago
if (isIllegalNum(param.ageAduRatioList[0].totalPopulation)) return ElMessage.error('请输入合理的城市总人口');
1 year ago
param.ageAduRatioList.some((e) => {
1 year ago
if (isIllegalNum(e.ageRatio)) {
1 year ago
ElMessage.error('请输入合理的年龄占比');
invalid = 1;
return true;
}
});
if (invalid) return false;
if (_.sum(param.ageAduRatioList.map((e) => +e.ageRatio)) > 100) return ElMessage.error('占比总和不得超过100%');
// 学历
edus.value.some((e) => {
1 year ago
if (isIllegalNum(e.eduRatio)) {
1 year ago
ElMessage.error('请输入合理的学历占比');
invalid = 1;
return true;
}
});
if (invalid) return false;
// 企业数量配置
param.enterpriseNumList.some((e) => {
1 year ago
if (isIllegalNum(e.number)) {
1 year ago
ElMessage.error('请输入合理的企业数量');
invalid = 1;
return true;
}
});
if (invalid) return false;
// 单个商品每日需求量
param.commodityDemandList.some((e) => {
1 year ago
if (isIllegalNum(e.buyerRatio) || e.buyerRatio > 100) {
1 year ago
ElMessage.error('请输入合理的买家总占比');
invalid = 1;
return true;
}
1 year ago
if (isIllegalNum(e.peopleNumRatio) || e.peopleNumRatio > 100) {
1 year ago
ElMessage.error('请输入合理的每次需求人数占比');
invalid = 1;
return true;
}
1 year ago
if (e.typeId != 7 && e.typeId != 8 && (isIllegalNum(e.buyerSingleDemandMin) || isIllegalNum(e.buyerSingleDemandMax))) {
1 year ago
ElMessage.error('请输入合理的单个买家单次需求');
invalid = 1;
return true;
}
1 year ago
if ((e.typeId == 7 || e.typeId == 8) && isIllegalNum(e.buyerSingleDemand)) {
1 year ago
ElMessage.error('请输入合理的单个买家单次需求');
invalid = 1;
return true;
}
});
if (invalid) return false;
// 系统账户起始金额
if (param.moneyAllocationList[0].startingAmount === '' || isNaN(param.moneyAllocationList[0].startingAmount)) return ElMessage.error('请输入合理的银行账户');
if (param.moneyAllocationList[1].startingAmount === '' || isNaN(param.moneyAllocationList[1].startingAmount)) return ElMessage.error('请输入合理的保险账户');
if (param.moneyAllocationList[2].startingAmount === '' || isNaN(param.moneyAllocationList[2].startingAmount)) return ElMessage.error('请输入合理的基金账户');
param.ageAduRatioList.push(...edus.value);
param.commodityDemandList.map((e) => {
if (e.buyerSingleDemandMin && e.buyerSingleDemandMax) e.buyerSingleDemand = `${e.buyerSingleDemandMin}-${e.buyerSingleDemandMax}`;
});
await saveOrUpdate(param);
ElMessage.success('保存成功!');
getInfo();
};
interface SpanMethodProps {
row: Record<string, any>;
column: TableColumnCtx<Record<string, any>>;
rowIndex: number;
columnIndex: number;
}
// 人口及年龄表格合并
const ageSpan = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex === 0) {
return {
rowspan: 6,
colspan: 1,
};
}
return {
rowspan: 0,
colspan: 0,
};
}
};
// 学历表格合并
const eduSpan = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1,
};
}
return {
rowspan: 0,
colspan: 0,
};
}
};
onMounted(() => {
1 year ago
getInfo();
});
</script>
<style lang="scss" scoped>
@import url(../../../styles/form.scss);
.title {
@apply flex items-center mb-5 text-base text-[#222D42] font-semibold;
&:before {
content: '';
@apply w-1 h-4 mr-2 bg-[#006BFF] rounded-sm;
}
}
</style>