parent
4385cfab8c
commit
2350694630
21 changed files with 658 additions and 75 deletions
@ -0,0 +1,6 @@ |
|||||||
|
import axios from '@/utils/request'; |
||||||
|
// 金融市场
|
||||||
|
export const queryStorage = async (id: number): Promise<any> => (await axios.get(`/backend/core/storage/${id}`)).data; |
||||||
|
export const bankingProductMarketsList = async (data: Record<string, any>): Promise<any> => |
||||||
|
(await axios.post('/product/product/bank/products/market/bankingProductMarketsList', data)).data; |
||||||
|
export const insuranceMarketList = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/insurance/products/market/insuranceMarketList', data)).data; |
||||||
@ -0,0 +1,294 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<h6 class="pl-3 mb-4 text-lg font-semibold text-[#333] border-l-[5px] border-l-[#006BFF]">保险市场</h6> |
||||||
|
<div class="filter block"> |
||||||
|
<dl> |
||||||
|
<dt>申购费率：</dt> |
||||||
|
<div class="vals"> |
||||||
|
<dd v-for="(item, i) in rates" |
||||||
|
:key="i" |
||||||
|
:class="{ active: params.insuranceType === item.id }" |
||||||
|
@click="filterClick(item, 'insuranceType')">{{ item.name }}</dd> |
||||||
|
</div> |
||||||
|
</dl> |
||||||
|
<dl> |
||||||
|
<dt>成立年限：</dt> |
||||||
|
<div class="vals"> |
||||||
|
<dd v-for="(item, i) in times" |
||||||
|
:key="i" |
||||||
|
:class="{ active: params.guarantyStyleId === item.id }" |
||||||
|
@click="filterClick(item, 'guarantyStyleId')">{{ item.name }}</dd> |
||||||
|
</div> |
||||||
|
</dl> |
||||||
|
<dl> |
||||||
|
<dt>基金规模：</dt> |
||||||
|
<div class="vals"> |
||||||
|
<dd v-for="(item, i) in scales" |
||||||
|
:key="i" |
||||||
|
:class="{ active: params.loanPeriod === item.name }" |
||||||
|
@click="filterClick(item, 'loanPeriod')">{{ item.name }}</dd> |
||||||
|
</div> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
<div class="block mt-3"> |
||||||
|
<div class="search mb-2"> |
||||||
|
<input type="text" |
||||||
|
placeholder="搜索" |
||||||
|
maxlength="20" /> |
||||||
|
<img src="@/assets/images/search.png" |
||||||
|
alt="" |
||||||
|
class="icon" /> |
||||||
|
</div> |
||||||
|
<el-table ref="table" |
||||||
|
v-loading="loading" |
||||||
|
:data="list"> |
||||||
|
<el-table-column prop="productName" |
||||||
|
label="基金代码" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="productTypeText" |
||||||
|
label="基金名称" |
||||||
|
min-width="110"></el-table-column> |
||||||
|
<el-table-column prop="guarantyStyle" |
||||||
|
label="现净值" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="loanPeriod" |
||||||
|
label="日增长率(%)" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="loanLimit" |
||||||
|
label="近1周(%)" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="userName" |
||||||
|
label="近1月(%)" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="userName" |
||||||
|
label="近3月(%)" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="userName" |
||||||
|
label="成立来(%)" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="userName" |
||||||
|
label="基金规模(万元)" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="operationTime" |
||||||
|
label="产品经理" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="operationTime" |
||||||
|
label="发布日期" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="id" |
||||||
|
label="操作" |
||||||
|
width="100"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button type="text" |
||||||
|
size="small" |
||||||
|
@click="toDetail(row)">查看详情</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> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { onMounted, ref, reactive, watch } from 'vue'; |
||||||
|
import { ElMessage } from 'element-plus'; |
||||||
|
import { pageSizes, pageLayout, toParams } from '@/utils/common'; |
||||||
|
import { fundProductList, batchDeletion } from '@/api/fund'; |
||||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
|
||||||
|
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 rates = ref<Record<string, any>[]>([ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
name: '不限', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '0', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: '0-0.5%', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '>0.5%', |
||||||
|
}, |
||||||
|
]); |
||||||
|
const times = ref<Record<string, any>[]>([ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
name: '不限', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '<=1个月', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: '1-6个月', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '6个月-1年', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
name: '>1年', |
||||||
|
}, |
||||||
|
]); |
||||||
|
const scales = ref<Record<string, any>[]>([ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
name: '不限', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '<=300万', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: '300-500万', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '500-1000万', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
name: '>1000万', |
||||||
|
}, |
||||||
|
]); |
||||||
|
|
||||||
|
const list = ref<Record<string, 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}?id=${id}&name=${params.fundName}`); |
||||||
|
}; |
||||||
|
// 卡片模式 |
||||||
|
const toCardList = () => { |
||||||
|
router.push(`/product/fund/${list.value.length ? `detail?id=${list.value[0].id}&name=${params.fundName}` : `add?name=${params.fundName}`}`); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleDelete = async (id: number) => { |
||||||
|
await batchDeletion([id]); |
||||||
|
getList(); |
||||||
|
ElMessage.success('删除成功！'); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.filter { |
||||||
|
dl { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 17px; |
||||||
|
&:last-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
dt, |
||||||
|
dd { |
||||||
|
font-size: 14px; |
||||||
|
font-family: MiSans; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.vals { |
||||||
|
display: inline-flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
dd { |
||||||
|
padding: 6px 10px; |
||||||
|
margin-right: 10px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.active { |
||||||
|
color: #fff; |
||||||
|
background: #006bff; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.search { |
||||||
|
position: relative; |
||||||
|
width: 320px; |
||||||
|
padding: 0 12px; |
||||||
|
background-color: #f6f8fc; |
||||||
|
border-radius: 8px; |
||||||
|
input { |
||||||
|
width: 90%; |
||||||
|
height: 36px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 36px; |
||||||
|
color: #333; |
||||||
|
border: 0; |
||||||
|
background-color: transparent; |
||||||
|
&:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
} |
||||||
|
.icon { |
||||||
|
position: absolute; |
||||||
|
top: 9px; |
||||||
|
right: 12px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,261 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<h6 class="pl-3 mb-4 text-lg font-semibold text-[#333] border-l-[5px] border-l-[#006BFF]">保险市场</h6> |
||||||
|
<div class="filter block"> |
||||||
|
<dl> |
||||||
|
<dt>险种分类：</dt> |
||||||
|
<div class="vals"> |
||||||
|
<dd v-for="(item, i) in insuranceTypes" |
||||||
|
:key="i" |
||||||
|
:class="{ active: params.insuranceType === item.id }" |
||||||
|
@click="filterClick(item, 'insuranceType')">{{ item.name }}</dd> |
||||||
|
</div> |
||||||
|
</dl> |
||||||
|
<dl v-if="params.insuranceType !== 311"> |
||||||
|
<dt>承保年龄：</dt> |
||||||
|
<div class="vals"> |
||||||
|
<dd v-for="(item, i) in ages" |
||||||
|
:key="i" |
||||||
|
:class="{ active: params.coverageAge === item.id }" |
||||||
|
@click="filterClick(item, 'coverageAge')">{{ item.id }}</dd> |
||||||
|
</div> |
||||||
|
</dl> |
||||||
|
<dl> |
||||||
|
<dt>保障期限：</dt> |
||||||
|
<div class="vals"> |
||||||
|
<dd v-for="(item, i) in times" |
||||||
|
:key="i" |
||||||
|
:class="{ active: params.protectionPeriod === item.id }" |
||||||
|
@click="filterClick(item, 'protectionPeriod')">{{ item.id }}</dd> |
||||||
|
</div> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
<div class="block mt-3"> |
||||||
|
<div class="search mb-2"> |
||||||
|
<input type="text" |
||||||
|
v-model="params.insuranceName" |
||||||
|
placeholder="搜索" |
||||||
|
maxlength="20" /> |
||||||
|
<img src="@/assets/images/search.png" |
||||||
|
alt="" |
||||||
|
class="icon" /> |
||||||
|
</div> |
||||||
|
<el-table ref="table" |
||||||
|
v-loading="loading" |
||||||
|
:data="list"> |
||||||
|
<el-table-column prop="insuranceName" |
||||||
|
label="保险名称" |
||||||
|
min-width="110"></el-table-column> |
||||||
|
<el-table-column prop="insuranceTypeName" |
||||||
|
label="险种分类" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column v-if="params.insuranceType !== 311" |
||||||
|
prop="guarantyStyle" |
||||||
|
label="承保年龄" |
||||||
|
min-width="80"> |
||||||
|
|
||||||
|
<template #default="{ row }"> |
||||||
|
{{ row.minimumAge + '-' + row.maximumAge + '周岁' }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="insuranceDeadline" |
||||||
|
label="保险期限" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="premiumAmount" |
||||||
|
label="保费（元）" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="userName" |
||||||
|
label="产品经理" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<el-table-column prop="operationTime" |
||||||
|
label="发布日期" |
||||||
|
min-width="80"></el-table-column> |
||||||
|
<!-- <el-table-column prop="id" |
||||||
|
label="操作" |
||||||
|
width="100"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button type="text" |
||||||
|
size="small" |
||||||
|
@click="toDetail(row)">查看详情</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> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { onMounted, ref, reactive, watch } from 'vue'; |
||||||
|
import { pageSizes, pageLayout, toParams } from '@/utils/common'; |
||||||
|
import { insuranceMarketList } from '@/api/finance'; |
||||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
|
||||||
|
const router = useRouter(); |
||||||
|
const route = useRoute(); |
||||||
|
const projectId = +Cookies.get('sand-projectId'); |
||||||
|
const levelId = +Cookies.get('sand-level'); |
||||||
|
const params = reactive({ |
||||||
|
insuranceName: '', |
||||||
|
insuranceType: '', |
||||||
|
coverageAge: '不限', |
||||||
|
protectionPeriod: '不限', |
||||||
|
checkPointId: levelId, |
||||||
|
projectId, |
||||||
|
}); |
||||||
|
const currentPage = ref<number>(1); |
||||||
|
const pageSize = ref<number>(10); |
||||||
|
const total = ref<number>(0); |
||||||
|
const table = ref<any>(); |
||||||
|
const insuranceTypes = ref<Record<string, any>[]>([ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
name: '不限', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 310, |
||||||
|
name: '意外险', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 311, |
||||||
|
name: '财产险', |
||||||
|
}, |
||||||
|
]); |
||||||
|
const ages = ref<Record<string, any>[]>([ |
||||||
|
{ |
||||||
|
id: '不限', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '中年', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '少儿', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '老人', |
||||||
|
}, |
||||||
|
]); |
||||||
|
const times = ref<Record<string, any>[]>([ |
||||||
|
{ |
||||||
|
id: '不限', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '<=1个月', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '1-6个月', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '6个月-1年', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '>1年', |
||||||
|
}, |
||||||
|
]); |
||||||
|
const list = ref<Record<string, any>[]>([]); |
||||||
|
const loading = ref<boolean>(false); |
||||||
|
// 列表 |
||||||
|
const getList = async () => { |
||||||
|
loading.value = true; |
||||||
|
try { |
||||||
|
const { data } = await insuranceMarketList({ pageNum: currentPage.value, pageSize: pageSize.value, ...toParams(params) }); |
||||||
|
list.value = data.records; |
||||||
|
total.value = data.total; |
||||||
|
} finally { |
||||||
|
loading.value = false; |
||||||
|
} |
||||||
|
}; |
||||||
|
// 重置列表 |
||||||
|
const initList = async () => { |
||||||
|
currentPage.value = 1; |
||||||
|
getList(); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
getList(); |
||||||
|
}); |
||||||
|
|
||||||
|
watch([params, () => route.query], initList); |
||||||
|
// 筛选点击 |
||||||
|
const filterClick = (item: Record<string, any>, key: string) => { |
||||||
|
params[key] = item.id; |
||||||
|
}; |
||||||
|
// 新增 |
||||||
|
const toAdd = () => { |
||||||
|
router.push({ |
||||||
|
path: `/product/insurance/add`, |
||||||
|
}); |
||||||
|
}; |
||||||
|
// 产品详情 |
||||||
|
const toDetail = async (row: Record<string, any>) => { |
||||||
|
router.push(`/product/insurance/detail?id=${row.id}&name=${params.insuranceName}`); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.filter { |
||||||
|
dl { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 17px; |
||||||
|
&:last-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
dt, |
||||||
|
dd { |
||||||
|
font-size: 14px; |
||||||
|
font-family: MiSans; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.vals { |
||||||
|
display: inline-flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
dd { |
||||||
|
padding: 6px 10px; |
||||||
|
margin-right: 10px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.active { |
||||||
|
color: #fff; |
||||||
|
background: #006bff; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.search { |
||||||
|
position: relative; |
||||||
|
width: 320px; |
||||||
|
padding: 0 12px; |
||||||
|
background-color: #f6f8fc; |
||||||
|
border-radius: 8px; |
||||||
|
input { |
||||||
|
width: 90%; |
||||||
|
height: 36px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 36px; |
||||||
|
color: #333; |
||||||
|
border: 0; |
||||||
|
background-color: transparent; |
||||||
|
&:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
} |
||||||
|
.icon { |
||||||
|
position: absolute; |
||||||
|
top: 9px; |
||||||
|
right: 12px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue