parent
8e63fe4b83
commit
7e291e6722
14 changed files with 1039 additions and 19 deletions
@ -0,0 +1,7 @@ |
||||
import axios from '@/utils/request'; |
||||
// 保险
|
||||
export const saveFund = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/fundProducts/save', data)).data; |
||||
export const batchDeletion = async (data: number[]): Promise<any> => (await axios.post(`/product/fundProducts/batchDeletion`, data)).data; |
||||
export const fundProductList = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/fundProducts/fundProductList`, data)).data; |
||||
export const findById = async (id: number): Promise<any> => (await axios.post(`/product/fundProducts/findById?id=${id}`)).data; |
||||
export const getAListOfAShares = async (keyWord: string): Promise<any> => (await axios.post(`/product/aShares/data/getAListOfAShares?keyWord=${keyWord}`)).data; |
||||
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,596 @@ |
||||
<template> |
||||
<div> |
||||
<el-tabs v-model="curTab"> |
||||
<el-tab-pane :label="id ? '产品要素' : '新增产品'" |
||||
name="tab1"> |
||||
<el-form label-width="100px" |
||||
label-suffix="：" |
||||
class="form" |
||||
status-icon> |
||||
<el-form-item label="基金名称" |
||||
prop="fundName"> |
||||
<el-input placeholder="取个有吸引力的产品名，限20字。" |
||||
maxlength="20" |
||||
v-model="form.fundName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="基金类型" |
||||
prop="fundType"> |
||||
<el-select v-model="form.fundType" |
||||
placeholder="请选择"> |
||||
<el-option v-for="item in config[1]?.subject?.itemList" |
||||
:key="item" |
||||
:label="item.options" |
||||
:value="item.itemId" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="募集规模"> |
||||
<div> |
||||
<el-input placeholder="请输入" |
||||
v-model="form.fundraisingScale"> |
||||
<template #append>万元</template> |
||||
</el-input> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="运作方式" |
||||
prop="modeOfOperation"> |
||||
<el-select v-model="form.modeOfOperation" |
||||
placeholder="请选择"> |
||||
<el-option v-for="item in config[3]?.subject?.itemList" |
||||
:key="item" |
||||
:label="item.options" |
||||
:value="item.itemId" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="持股配置"> |
||||
<div class="flex-1"> |
||||
<p class="">输入心仪的A股代码或名称，组建属于你的股票基金，比重合计必须为100%，最多配置10支股票。</p> |
||||
<div class="flex"> |
||||
<p class="field-name w-[300px] mr-32">股票</p> |
||||
<p class="field-name w-[100px] mr-32">比重(%)</p> |
||||
<div class="field-name"> |
||||
<el-icon class="cursor-pointer" |
||||
:size="16" |
||||
color="#333" |
||||
@click="addStock"> |
||||
<Plus /> |
||||
</el-icon> |
||||
</div> |
||||
</div> |
||||
<div v-for="(item, i) in form.shareholdingAllocationsList" |
||||
:key="i" |
||||
class="flex items-center mb-2"> |
||||
<div class="w-[300px] mr-32"> |
||||
<el-select-v2 class="w-full" |
||||
v-model="item.stockCode" |
||||
filterable |
||||
remote |
||||
:remote-method="val => remoteMethod(val, item)" |
||||
clearable |
||||
:options="item.stocks" |
||||
:loading="loading" |
||||
placeholder="请输入A股代码或者名称" /> |
||||
</div> |
||||
<div class="w-[100px] mr-32"> |
||||
<el-input placeholder="请输入" |
||||
v-model="item.proportion"></el-input> |
||||
</div> |
||||
<div> |
||||
<el-icon class="cursor-pointer" |
||||
:size="16" |
||||
color="#333" |
||||
@click="delStock(i)"> |
||||
<Minus /> |
||||
</el-icon> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="费率配置"> |
||||
<div class="flex-1"> |
||||
<p class="mt-1 mb-2 text-base">确认份额时长。</p> |
||||
<!-- 份额时长 --> |
||||
<div class="flex items-center mb-3"> |
||||
客户T时买入，T+ |
||||
<el-input class="w-[100px] mx-2" |
||||
placeholder="请输入" |
||||
v-model="form.buyingDuration"></el-input> |
||||
<el-select class="w-[100px] mr-2" |
||||
v-model="form.buyingUnit" |
||||
placeholder="请选择"> |
||||
<el-option v-for="item in config[5]?.recordChildren[0]?.recordChildren[1]?.subject?.itemList" |
||||
:key="item" |
||||
:value="item.options" /> |
||||
</el-select> |
||||
确认申购份额期间，资金进入冻结账户。 |
||||
</div> |
||||
<div class="flex items-center"> |
||||
客户T时卖出，T+ |
||||
<el-input class="w-[100px] mx-2" |
||||
placeholder="请输入" |
||||
v-model="form.sellingTime"></el-input> |
||||
<el-select class="w-[100px] mr-2" |
||||
v-model="form.soldUnit" |
||||
placeholder="请选择"> |
||||
<el-option v-for="item in config[5]?.recordChildren[0]?.recordChildren[1]?.subject?.itemList" |
||||
:key="item" |
||||
:value="item.options" /> |
||||
</el-select> |
||||
确认赎回金额期间，资金进入冻结账户。 |
||||
</div> |
||||
|
||||
<!-- 买入费率 --> |
||||
<p class="mt-10 mb-2 text-xs text-[#ef3838]">买入费率（单笔费率应小于5.00%，5000元）</p> |
||||
<div class="flex"> |
||||
<p class="field-name w-[400px] mr-32">金额</p> |
||||
<p class="field-name w-[100px] mr-32">费率</p> |
||||
<div class="field-name"> |
||||
<el-icon class="cursor-pointer" |
||||
:size="16" |
||||
color="#333" |
||||
@click="addRatio(0)"> |
||||
<Plus /> |
||||
</el-icon> |
||||
</div> |
||||
</div> |
||||
<div v-for="(item, i) in form.buySellRatioList0" |
||||
:key="i" |
||||
class="flex items-center mb-2"> |
||||
<div class="w-[400px] mr-10"> |
||||
<el-input v-if="i" |
||||
class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
disabled |
||||
v-model="form.buySellRatioList0[i - 1].input2"></el-input> |
||||
<el-input v-else |
||||
class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
disabled |
||||
v-model="item.input1"></el-input> |
||||
{{ i ? '万' : ' ' }} |
||||
<span class="mx-2"> |
||||
<= 买入金额</span> |
||||
<template v-if="i !== form.buySellRatioList0.length - 1"> |
||||
< |
||||
<el-input class="w-[100px] mx-2" |
||||
placeholder="请输入" |
||||
v-model="item.input2"></el-input> |
||||
万 |
||||
</template> |
||||
</div> |
||||
|
||||
<div class="mr-32"> |
||||
<el-input class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
v-model="item.rate"></el-input> |
||||
<el-select class="w-[80px]" |
||||
v-model="item.rateUnit" |
||||
placeholder="请选择"> |
||||
<el-option v-for="item in units" |
||||
:key="item" |
||||
:value="item" /> |
||||
</el-select> |
||||
</div> |
||||
|
||||
<div v-if="i"> |
||||
<el-icon class="cursor-pointer" |
||||
:size="16" |
||||
color="#333" |
||||
@click="delRatio(0, i)"> |
||||
<Minus /> |
||||
</el-icon> |
||||
</div> |
||||
</div> |
||||
<div class="mt-5 text-xs text-[#7a7a7a]"> |
||||
<p>申购计算：</p> |
||||
<p class="my-2">净申购金额 = 申购金额 / (1 + 申购费用)</p> |
||||
<p>申购费用 = 申购金额 - 净申购金额</p> |
||||
<p class="mt-2">申购份额 = 净申购金额 / T时基金份额净值</p> |
||||
</div> |
||||
|
||||
<!-- 运作费率 --> |
||||
<p class="mt-10 mb-2 text-xs text-[#ef3838]">运作费率（单笔费率应小于5.00%）</p> |
||||
<div class="flex"> |
||||
<span class="w-[140px]">管理费</span> |
||||
<el-input class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
v-model="form.operationManagementRate"></el-input>% |
||||
</div> |
||||
<div class="flex my-2"> |
||||
<span class="w-[140px]">托管费</span> |
||||
<el-input class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
v-model="form.operatingEscrowRate"></el-input>% |
||||
</div> |
||||
<div class="flex"> |
||||
<span class="w-[140px]">销售服务费</span> |
||||
<el-input class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
v-model="form.operatingSalesServiceRates"></el-input>% |
||||
</div> |
||||
<div class="mt-5 text-xs text-[#7a7a7a]"> |
||||
<p>运作费计算：</p> |
||||
<p class="my-2">管理费 = （前一日的基金资产净值 x 管理费率）/ 365</p> |
||||
<p>托管费 = （前一日的基金资产净值 x 管理费率）/ 365</p> |
||||
<p class="mt-2">销售服务费 = （前一日的基金资产净值 x 管理费率）/ 365</p> |
||||
</div> |
||||
|
||||
<!-- 赎回费率 --> |
||||
<p class="mt-10 mb-2 text-xs text-[#ef3838]">赎回费率（单笔费率应小于5.00%，5000元）</p> |
||||
<div class="flex"> |
||||
<p class="field-name w-[600px] mr-32">持有时长</p> |
||||
<p class="field-name w-[100px] mr-32">费率</p> |
||||
<div class="field-name"> |
||||
<el-icon class="cursor-pointer" |
||||
:size="16" |
||||
color="#333" |
||||
@click="addRatio(1)"> |
||||
<Plus /> |
||||
</el-icon> |
||||
</div> |
||||
</div> |
||||
<div v-for="(item, i) in form.buySellRatioList1" |
||||
:key="i" |
||||
class="flex items-center mb-2"> |
||||
<div class="w-[600px] mr-10"> |
||||
<el-input v-if="i" |
||||
class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
disabled |
||||
v-model="form.buySellRatioList1[i - 1].input2"></el-input> |
||||
<el-input v-else |
||||
class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
disabled |
||||
v-model="item.input1"></el-input> |
||||
|
||||
<el-select class="w-[100px]" |
||||
v-model="item.soldUnit1" |
||||
placeholder="请选择"> |
||||
<el-option v-for="item in times" |
||||
:key="item" |
||||
:value="item" /> |
||||
</el-select> |
||||
|
||||
<span class="mx-2"> |
||||
<= 持有时长</span> |
||||
<template v-if="i !== form.buySellRatioList1.length - 1"> |
||||
< |
||||
<el-input class="w-[100px] mx-2" |
||||
placeholder="请输入" |
||||
v-model="item.input2"></el-input> |
||||
|
||||
<el-select class="w-[100px]" |
||||
v-model="item.soldUnit2" |
||||
placeholder="请选择"> |
||||
<el-option v-for="item in times" |
||||
:key="item" |
||||
:value="item" /> |
||||
</el-select> |
||||
</template> |
||||
</div> |
||||
|
||||
<div class="mr-32"> |
||||
<el-input class="w-[100px] mr-2" |
||||
placeholder="请输入" |
||||
v-model="item.rate"></el-input> |
||||
<el-select class="w-[80px]" |
||||
v-model="item.rateUnit" |
||||
placeholder="请选择"> |
||||
<el-option v-for="item in units" |
||||
:key="item" |
||||
:value="item" /> |
||||
</el-select> |
||||
</div> |
||||
|
||||
<div> |
||||
<el-icon class="cursor-pointer" |
||||
:size="16" |
||||
color="#333" |
||||
@click="delRatio(1, i)"> |
||||
<Minus /> |
||||
</el-icon> |
||||
</div> |
||||
</div> |
||||
<div class="mt-5 text-xs text-[#7a7a7a]"> |
||||
<p>赎回计算：</p> |
||||
<p class="my-2">赎回费用 = 赎回总额 x 赎回费率</p> |
||||
<p>赎回金额 = 赎回总额 - 赎回费用</p> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<div class="flex justify-end"> |
||||
<div class="submit" |
||||
@click="submit">完成</div> |
||||
</div> |
||||
</el-form> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref, reactive, computed, watch, onMounted, defineEmits } from 'vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { Plus, Minus } from '@element-plus/icons-vue'; |
||||
import { insuranceProductDetails, addInsuranceProducts } from '@/api/insurance'; |
||||
import { getAListOfAShares, saveFund } from '@/api/fund'; |
||||
import { getProcessInformationBasedOnRoles, addOperation } from '@/api/judgment'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
import { handleId } from '@/utils/common'; |
||||
import { getStatus } from '@/store/useProduct'; |
||||
import Info from './Info.vue'; |
||||
import Cookies from 'js-cookie'; |
||||
|
||||
const emit = defineEmits(['getList']); |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const id = computed(() => route.query.id); |
||||
const projectId = +Cookies.get('sand-projectId'); |
||||
const levelId = +Cookies.get('sand-level'); |
||||
const curTab = ref<string>('tab1'); |
||||
const config = ref<any[]>([]); |
||||
const info = ref<Record<string, any>>(null); |
||||
const units = ref<string[]>(['%', '元']); |
||||
const times = ref<string[]>(['分钟', '天', '小时', '月']); |
||||
const loading = ref<boolean>(false); |
||||
const form = reactive({ |
||||
checkPointId: levelId, |
||||
projectId, |
||||
buyingDuration: '', |
||||
buyingUnit: '天', |
||||
fundName: '', |
||||
fundType: '', |
||||
fundraisingScale: '', |
||||
modeOfOperation: '', |
||||
operatingEscrowRate: '', |
||||
operatingSalesServiceRates: '', |
||||
operationManagementRate: '', |
||||
sellingTime: '', |
||||
soldUnit: '天', |
||||
buySellRatioList0: [ |
||||
{ |
||||
input1: '0', |
||||
input2: '', |
||||
rate: '', |
||||
rateUnit: '%', |
||||
type: 0, |
||||
}, |
||||
{ |
||||
input1: '', |
||||
input2: '', |
||||
rate: '', |
||||
rateUnit: '%', |
||||
type: 0, |
||||
}, |
||||
], |
||||
buySellRatioList1: [ |
||||
{ |
||||
input1: '0', |
||||
input2: '', |
||||
rate: '', |
||||
rateUnit: '%', |
||||
soldUnit1: '分钟', |
||||
soldUnit2: '分钟', |
||||
type: 1, |
||||
}, |
||||
{ |
||||
input1: '', |
||||
input2: '', |
||||
rate: '', |
||||
rateUnit: '%', |
||||
soldUnit1: '分钟', |
||||
soldUnit2: '分钟', |
||||
type: 1, |
||||
}, |
||||
], |
||||
shareholdingAllocationsList: [ |
||||
{ |
||||
latestPrice: '', |
||||
proportion: '', |
||||
stockCode: '', |
||||
stockName: '', |
||||
stocks: [], |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
// 配置项 |
||||
const getConfig = async () => { |
||||
const { process } = await getProcessInformationBasedOnRoles(1161); |
||||
config.value = process; |
||||
}; |
||||
// 详情 |
||||
const getDetail = async () => { |
||||
if (id.value) { |
||||
try { |
||||
const { data } = await insuranceProductDetails(id.value); |
||||
info.value = data; |
||||
} finally { |
||||
} |
||||
} |
||||
}; |
||||
// 新增持股 |
||||
const addStock = () => { |
||||
form.shareholdingAllocationsList.length < 10 |
||||
? form.shareholdingAllocationsList.push({ |
||||
latestPrice: '', |
||||
proportion: '', |
||||
stockCode: '', |
||||
stockName: '', |
||||
stocks: [], |
||||
}) |
||||
: ElMessage.error('持股最多不能超过10只！'); |
||||
}; |
||||
// 删除持股 |
||||
const delStock = (i: number) => { |
||||
form.shareholdingAllocationsList.length > 1 && form.shareholdingAllocationsList.splice(i, 1); |
||||
}; |
||||
// 查询股票 |
||||
const remoteMethod = (query: string, item: Record<string, any>) => { |
||||
if (query !== '') { |
||||
loading.value = true; |
||||
setTimeout(async () => { |
||||
loading.value = false; |
||||
const { aShares } = await getAListOfAShares(query); |
||||
aShares.forEach((e) => { |
||||
e.label = e.f14; |
||||
e.value = e.f12; |
||||
}); |
||||
item.stocks = aShares; |
||||
}, 200); |
||||
} else { |
||||
item.stocks = []; |
||||
} |
||||
}; |
||||
|
||||
// 新增一行费率 |
||||
const addRatio = (type: number) => { |
||||
if (form['buySellRatioList' + type].length === 5) { |
||||
ElMessage.error('规则最多只能添加5条！'); |
||||
} else { |
||||
const temp = { |
||||
input1: '', |
||||
input2: '', |
||||
rate: '', |
||||
rateUnit: '%', |
||||
type, |
||||
}; |
||||
if (type) { |
||||
temp.soldUnit1 = '分钟'; |
||||
temp.soldUnit2 = '分钟'; |
||||
} |
||||
form['buySellRatioList' + type].push(temp); |
||||
} |
||||
}; |
||||
// 删除一行费率 |
||||
const delRatio = (type: number, i: number) => { |
||||
form['buySellRatioList' + type].length > 1 && form['buySellRatioList' + type].splice(i, 1); |
||||
}; |
||||
|
||||
watch( |
||||
() => route.query, |
||||
() => { |
||||
getDetail(); |
||||
}, |
||||
{ |
||||
immediate: true, |
||||
}, |
||||
); |
||||
|
||||
const getId = (str: string): string | number => { |
||||
const result = config.value[5]?.recordChildren[0]?.recordChildren[1]?.subject?.itemList?.find((e) => e.options === str); |
||||
return result?.itemId || ''; |
||||
}; |
||||
// 新增判分记录 |
||||
const addRecord = async (data: Record<string, any>) => { |
||||
const preIds = `1,${levelId},1161`; // 1，关卡id，角色（这个页面是基金产品经理新增产品） |
||||
const rule = [ |
||||
handleId(1162, 308, data.fundName, preIds + ',1162', 3), |
||||
handleId(1163, 309, 764, preIds + ',1163', 1), |
||||
handleId(1164, 310, data.fundraisingScale, preIds + ',1164', 3), |
||||
handleId(1165, 311, 765, preIds + ',1165', 1), |
||||
]; |
||||
|
||||
const stockId = 1167; |
||||
data.shareholdingAllocationsList.forEach((e, i) => { |
||||
rule.push(handleId(1177, 312, e.stockName, `${preIds},1166,${stockId + i},1177`, 3)); |
||||
rule.push(handleId(1178, 313, e.proportion + '%', `${preIds},1166,${stockId + i},1178`, 3)); |
||||
}); |
||||
rule.push( |
||||
handleId(1181, 314, data.buyingDuration, preIds + ',1179,1180,1181', 3), |
||||
handleId(1182, 315, getId(data.buyingUnit), preIds + ',1179,1180,1182', 3), |
||||
handleId(1184, 314, data.sellingTime, preIds + ',1179,1183,1184', 3), |
||||
handleId(1185, 315, getId(data.soldUnit), preIds + ',1179,1183,1185', 3), |
||||
); |
||||
|
||||
// 处理买入费率 |
||||
const buyId = 1187; |
||||
data.buySellRatioList0.forEach((e, i) => { |
||||
e.amountOrDuration && rule.push(handleId(1192, 316, e.amountOrDuration, `${preIds},1179,1186,${buyId + i},1192`, 3)); |
||||
e.rate && rule.push(handleId(1193, 318, e.rate + e.rateUnit, `${preIds},1179,1186,${buyId + i},1193`, 3)); |
||||
}); |
||||
|
||||
// 处理赎回费率 |
||||
const sellId = 1200; |
||||
data.buySellRatioList1.forEach((e, i) => { |
||||
e.amountOrDuration && rule.push(handleId(1205, 314, e.amountOrDuration, `${preIds},1179,1199,${sellId + i},1205`, 3)); |
||||
e.rate && rule.push(handleId(1206, 318, e.rate + e.rateUnit, `${preIds},1179,1199,${sellId + i},1206`, 3)); |
||||
}); |
||||
|
||||
rule.push( |
||||
handleId(1196, 319, data.operationManagementRate + '%', preIds + ',1179,1195,1196', 3), |
||||
handleId(1197, 320, data.operatingEscrowRate + '%', preIds + ',1179,1195,1197', 3), |
||||
handleId(1198, 321, data.operatingSalesServiceRates + '%', preIds + ',1179,1195,1198', 3), |
||||
); |
||||
|
||||
await addOperation({ |
||||
checkpointId: levelId, |
||||
parentId: preIds, |
||||
lcJudgmentRuleReq: rule, |
||||
projectId, |
||||
}); |
||||
}; |
||||
// 提交 |
||||
const submit = async () => { |
||||
try { |
||||
const param = JSON.parse(JSON.stringify(form)); |
||||
|
||||
if (!param.fundName) return ElMessage.error('请输入保险名称'); |
||||
if (!param.fundType) return ElMessage.error('请选择基金类型'); |
||||
if (!param.fundraisingScale) return ElMessage.error('请输入募集规模'); |
||||
if (!param.modeOfOperation) return ElMessage.error('请选择运作方式'); |
||||
if (!param.shareholdingAllocationsList.length || !param.shareholdingAllocationsList.filter((e) => e.stockCode).length) return ElMessage.error('请配置持股'); |
||||
|
||||
// 计算持股权重是否等于100 |
||||
let sum = 0; |
||||
param.shareholdingAllocationsList.forEach((e) => { |
||||
if (e.stockCode && e.proportion) { |
||||
sum += +e.proportion; |
||||
} |
||||
}); |
||||
if (sum !== 100) return ElMessage.error('持股权重总和需等于100，请重新配置'); |
||||
if (!param.buyingDuration || !param.sellingTime) return ElMessage.error('请输入份额时长'); |
||||
if (!param.operationManagementRate) return ElMessage.error('请输入管理费'); |
||||
if (!param.operatingEscrowRate) return ElMessage.error('请输入托管费'); |
||||
if (!param.operatingSalesServiceRates) return ElMessage.error('请输入销售服务费'); |
||||
|
||||
// 持股配置处理 |
||||
param.shareholdingAllocationsList.forEach((e) => { |
||||
if (e.stockCode) { |
||||
const item = e.stocks.find((n) => n.f12 === e.stockCode); |
||||
e.stockName = item.f14; |
||||
e.latestPrice = item.f18; |
||||
delete e.stocks; |
||||
} |
||||
}); |
||||
|
||||
// 处理费率 |
||||
param.buySellRatioList0.forEach((e, i) => { |
||||
e.amountOrDuration = i ? param.buySellRatioList0[i - 1].input2 : e.input1; |
||||
if (i !== param.buySellRatioList0.length - 1) e.amountOrDuration += `-${e.input2}万`; |
||||
}); |
||||
param.buySellRatioList1.forEach((e, i) => { |
||||
e.amountOrDuration = i ? param.buySellRatioList1[i - 1].input2 + param.buySellRatioList1[i - 1].soldUnit2 : e.input1; |
||||
if (i !== param.buySellRatioList1.length - 1) e.amountOrDuration += `-${e.input2}${e.soldUnit2}`; |
||||
}); |
||||
param.buySellRatioList = [...param.buySellRatioList0, ...param.buySellRatioList1]; |
||||
|
||||
const recordParam = JSON.parse(JSON.stringify(param)); |
||||
delete param.buySellRatioList0; |
||||
delete param.buySellRatioList1; |
||||
await saveFund(param); |
||||
addRecord(recordParam); |
||||
ElMessage.success('提交成功！'); |
||||
emit('getList', 1); |
||||
} finally { |
||||
} |
||||
}; |
||||
onMounted(() => { |
||||
getConfig(); |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url(../../../styles/form.scss); |
||||
</style> |
||||
@ -0,0 +1,137 @@ |
||||
<template> |
||||
<div class="block flex" |
||||
style="padding-top: 0"> |
||||
<div class="left w-[241px] min-w-[241px] pr-5 py-4"> |
||||
<div class="flex justify-center items-center py-2 mb-3 text-sm text-[#006BFF] bg-[rgba(0,107,255,0.1)] border border-solid border-[#006BFF] rounded-[10px] cursor-pointer" |
||||
@click="toAdd"> |
||||
<el-icon class="mr-1" |
||||
:size="16" |
||||
color="#006BFF"> |
||||
<Plus /> |
||||
</el-icon> |
||||
新增产品 |
||||
</div> |
||||
<div class="flex justify-end mb-4"> |
||||
<img src="@/assets/images/fold.png" |
||||
alt="" |
||||
class="cursor-pointer" |
||||
@click="toList" /> |
||||
</div> |
||||
<ul class="products"> |
||||
<li v-for="(item, i) in list" |
||||
:key="i" |
||||
:class="{ active: item.id === id }" |
||||
@click="switchProduct(item.id)"> |
||||
<el-popconfirm title="您确定删除吗？" |
||||
@confirm="handleDelete(item.id)"> |
||||
<template #reference> |
||||
<img src="@/assets/images/trash.png" |
||||
alt="" |
||||
class="del" /> |
||||
</template> |
||||
</el-popconfirm> |
||||
|
||||
<h6>{{ item.fundName }}</h6> |
||||
<p class="type">{{ item.fundraisingScale }}万募集规模</p> |
||||
<p class="type">买入费率{{ item.buying }}，赎回费率{{ item.sale }}</p> |
||||
<p class="date">创建日期：{{ item.createTime.split(' ')[0] }}</p> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="right flex-1 px-5 pt-2"> |
||||
<detail v-if="action === 'detail'"></detail> |
||||
<add v-else-if="action === 'add'" |
||||
@getList="getList"></add> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { computed, onMounted, ref, watch } from 'vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { Plus } from '@element-plus/icons-vue'; |
||||
import { fundProductList, batchDeletion } from '@/api/fund'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
import Detail from './Detail.vue'; |
||||
import Add from './Add.vue'; |
||||
import Cookies from 'js-cookie'; |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const action = ref<any>(''); |
||||
const projectId = +Cookies.get('sand-projectId'); |
||||
const levelId = +Cookies.get('sand-level'); |
||||
|
||||
const list = ref<Array<any>>([]); |
||||
const loading = ref<boolean>(false); |
||||
const id = computed(() => +route.query.id); |
||||
// 列表 |
||||
const getList = async (first: any) => { |
||||
loading.value = true; |
||||
try { |
||||
const { data } = await fundProductList({ pageNum: 1, pageSize: 1000, checkPointId: levelId, projectId }); |
||||
list.value = data.data.records; |
||||
first && list.value.length && switchProduct(list.value[0].id); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
onMounted(() => { |
||||
getList(); |
||||
}); |
||||
|
||||
watch( |
||||
route, |
||||
(route: any) => { |
||||
action.value = route.params.action; |
||||
}, |
||||
{ |
||||
immediate: true, |
||||
}, |
||||
); |
||||
// 产品切换 |
||||
const switchProduct = (id: number) => { |
||||
router.push(`/product/fund/detail?id=` + id); |
||||
}; |
||||
// 新增 |
||||
const toAdd = () => { |
||||
router.push(`/product/fund/add`); |
||||
}; |
||||
// 返回列表 |
||||
const toList = () => { |
||||
router.push(`/product/fund`); |
||||
}; |
||||
const handleDelete = async (id: number) => { |
||||
await batchDeletion([id]); |
||||
getList(1); |
||||
ElMessage.success('删除成功！'); |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.left { |
||||
border-right: 1px solid #e9eff2; |
||||
} |
||||
.products { |
||||
@apply max-h-[calc(100vh-205px)] pr-1 overflow-auto; |
||||
li { |
||||
@apply relative p-5 pt-7 mb-5 rounded-[10px] cursor-pointer border border-solid border-[transparent] bg-[url('@/assets/images/10.png')] bg-[length:100%_100%] bg-no-repeat; |
||||
&.active { |
||||
@apply border-[#CAE0FF]; |
||||
} |
||||
} |
||||
.del { |
||||
@apply absolute top-0 right-0; |
||||
} |
||||
h6 { |
||||
@apply text-[#14436b]; |
||||
} |
||||
.type, |
||||
.status { |
||||
@apply my-[15px] text-sm text-[#333]; |
||||
} |
||||
.date { |
||||
@apply text-sm text-[#8798a9]; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,21 @@ |
||||
<template> |
||||
<div> |
||||
<el-tabs v-model="curTab"> |
||||
<el-tab-pane label="产品详情" |
||||
name="tab1"> |
||||
<info /> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue'; |
||||
import Info from './Info.vue'; |
||||
|
||||
const curTab = ref<string>('tab1'); |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url(../../../styles/form.scss); |
||||
</style> |
||||
@ -0,0 +1,105 @@ |
||||
<template> |
||||
<div class="info mt-2"> |
||||
<h2 class="text-center text-lg">{{ info.fundName }}</h2> |
||||
<p class="text">基金类型：{{ info.fundType }}</p> |
||||
<p class="text">基金规模：{{ info.fundraisingScale }}万元</p> |
||||
<p class="text">运作方式：{{ info.modeOfOperation }}</p> |
||||
<p class="text mt-10">持股配置：</p> |
||||
<div class="text"> |
||||
<div class="flex"> |
||||
<p class="w-[130px] mr-32">股票</p> |
||||
<p class="">比重(%)</p> |
||||
</div> |
||||
<div v-for="(item, i) in info.shareholdingAllocationsList" |
||||
:key="item" |
||||
class="flex"> |
||||
<p class="w-[130px] mr-32">{{ item.stockName }}({{ item.stockCode }})</p> |
||||
<p class="">{{ item.proportion }}</p> |
||||
</div> |
||||
</div> |
||||
<p class="text mt-10">费率配置：</p> |
||||
<p class="text">客户T时买入，T+{{ info.buyingDuration }}{{ info.buyingUnit }}确认申购份额期间，资金进入冻结账户。</p> |
||||
<p class="text">客户T时卖出，T+{{ info.sellingTime }}{{ info.soldUnit }}确认赎回金额期间，资金进入冻结账户。</p> |
||||
|
||||
<p class="text mt-5">买入费率</p> |
||||
<div class="text"> |
||||
<div class="flex"> |
||||
<p class="w-[130px] mr-32">金额</p> |
||||
<p class="">费率</p> |
||||
</div> |
||||
<div v-for="(item, i) in info.purchaseRateList" |
||||
:key="item" |
||||
class="flex"> |
||||
<p class="w-[130px] mr-32">{{ item.amountOrDuration }}</p> |
||||
<p class="">{{ item.rate }}{{ item.rateUnit |
||||
}}</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<p class="text mt-5">管理费{{ info.operationManagementRate }}%</p> |
||||
<p class="text">托管费{{ info.operatingEscrowRate }}%</p> |
||||
<p class="text">销售服务费{{ info.operatingSalesServiceRates }}%</p> |
||||
|
||||
<p class="text mt-5">赎回费率</p> |
||||
<div class="text"> |
||||
<div class="flex"> |
||||
<p class="w-[130px] mr-32">持有时长</p> |
||||
<p class="">费率</p> |
||||
</div> |
||||
<div v-for="(item, i) in info.sellingRateList" |
||||
:key="item" |
||||
class="flex"> |
||||
<p class="w-[130px] mr-32">{{ item.amountOrDuration }}</p> |
||||
<p class="">{{ item.rate }}{{ item.rateUnit }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref, computed, watch, onMounted } from 'vue'; |
||||
import { findById } from '@/api/fund'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const id = computed(() => +route.query.id); |
||||
const info = ref<Record<string, any>>({}); |
||||
|
||||
// 详情 |
||||
const getDetail = async () => { |
||||
if (id.value) { |
||||
try { |
||||
const { data } = await findById(id.value); |
||||
info.value = data; |
||||
} finally { |
||||
} |
||||
} |
||||
}; |
||||
watch( |
||||
() => route.query, |
||||
() => { |
||||
getDetail(); |
||||
}, |
||||
{ |
||||
immediate: true, |
||||
}, |
||||
); |
||||
</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]; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,155 @@ |
||||
<template> |
||||
<div class="block"> |
||||
<div class="flex justify-between items-center mb-5"> |
||||
<search v-model="params.fundName" |
||||
@change="initList"></search> |
||||
<div class="filter"> |
||||
<div class="add-btn" |
||||
@click="toAdd"> |
||||
<img src="@/assets/images/plus.png" |
||||
alt="" |
||||
class="icon" /> |
||||
新增产品 |
||||
</div> |
||||
<img src="@/assets/images/9.png" |
||||
alt="" |
||||
class="ml-4 cursor-pointer" |
||||
@click="toCardList" /> |
||||
</div> |
||||
</div> |
||||
<el-table ref="table" |
||||
v-loading="loading" |
||||
:data="list" |
||||
@sort-change="handleSort"> |
||||
<el-table-column prop="fundName" |
||||
label="基金名称" |
||||
min-width="150"></el-table-column> |
||||
<el-table-column prop="fundCode" |
||||
label="基金代码" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="fundType" |
||||
label="基金类型" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="fundraisingScale" |
||||
label="募集规模" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="modeOfOperation" |
||||
label="运作方式" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="buying" |
||||
label="买入费率" |
||||
min-width="120"></el-table-column> |
||||
<el-table-column prop="sale" |
||||
label="赎回费率" |
||||
min-width="120"></el-table-column> |
||||
<el-table-column prop="createTime" |
||||
label="创建日期" |
||||
width="180" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column label="操作" |
||||
width="140"> |
||||
<template #default="{ row }"> |
||||
<el-popconfirm title="您确定删除吗？" |
||||
@confirm.stop="handleDelete(row.id)"> |
||||
<template #reference> |
||||
<el-button type="text" |
||||
size="small">删除</el-button> |
||||
</template> |
||||
</el-popconfirm> |
||||
<el-button type="text" |
||||
@click="toDetail(`/product/fund/detail`, row.id)" |
||||
size="small">产品详情</el-button> |
||||
</template></el-table-column> |
||||
</el-table> |
||||
<el-pagination v-model:currentPage="currentPage" |
||||
v-model:pageSize="pageSize" |
||||
:total="total" |
||||
:page-sizes="pageSizes" |
||||
:layout="pageLayout" |
||||
@size-change="getList()" |
||||
@current-change="getList()" |
||||
small |
||||
background |
||||
class="px-3 py-2 justify-end"></el-pagination> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { computed, onMounted, ref, reactive, watch } from 'vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { pageSizes, pageLayout, toParams, resetParams } from '@/utils/common'; |
||||
import { fundProductList, batchDeletion } from '@/api/fund'; |
||||
import Search from '@/components/Search.vue'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
import Cookies from 'js-cookie'; |
||||
import { productState, getExpertStatus, getStatus } from '@/store/useProduct'; |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const projectId = +Cookies.get('sand-projectId'); |
||||
const levelId = +Cookies.get('sand-level'); |
||||
const params = reactive({ |
||||
createDateSort: '', |
||||
fundName: '', |
||||
checkPointId: levelId, |
||||
projectId, |
||||
}); |
||||
const currentPage = ref<number>(1); |
||||
const pageSize = ref<number>(10); |
||||
const total = ref<number>(0); |
||||
const table = ref<any>(); |
||||
|
||||
const list = ref<Array<any>>([]); |
||||
const loading = ref<boolean>(false); |
||||
const stop = () => {}; |
||||
// 列表 |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const { data } = await fundProductList({ pageNum: currentPage.value, pageSize: pageSize.value, ...toParams(params) }); |
||||
list.value = data.data.records; |
||||
total.value = data.data.total; |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
// 重置列表 |
||||
const initList = async () => { |
||||
currentPage.value = 1; |
||||
getList(); |
||||
}; |
||||
onMounted(() => { |
||||
getList(); |
||||
}); |
||||
|
||||
watch([params, () => route.query], initList); |
||||
const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => { |
||||
params.createDateSort = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : ''; |
||||
getList(); |
||||
}; |
||||
// 新增 |
||||
const toAdd = () => { |
||||
router.push({ |
||||
path: `/product/fund/add`, |
||||
}); |
||||
}; |
||||
// 产品详情 |
||||
const toDetail = async (path: string, id: number) => { |
||||
router.push({ |
||||
path, |
||||
query: { |
||||
id, |
||||
}, |
||||
}); |
||||
}; |
||||
// 卡片模式 |
||||
const toCardList = () => { |
||||
router.push('/product/fund/detail'); |
||||
}; |
||||
|
||||
const handleDelete = async (id: number) => { |
||||
await batchDeletion([id]); |
||||
getList(); |
||||
ElMessage.success('删除成功！'); |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue