parent
5118e5696d
commit
245def3fe0
16 changed files with 754 additions and 33 deletions
@ -0,0 +1,6 @@ |
|||||||
|
import axios from '@/utils/request'; |
||||||
|
// 保险
|
||||||
|
export const batchDeletion = async (id: number[]): Promise<any> => (await axios.post('/product/insurance/products/batchDeletion', id)).data; |
||||||
|
export const addInsuranceProducts = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/insurance/products/addInsuranceProducts`, data)).data; |
||||||
|
export const insuranceList = async (data: Record<string, any>): Promise<any> => (await axios.post(`/product/insurance/products/insuranceList`, data)).data; |
||||||
|
export const insuranceProductDetails = async (id: number): Promise<any> => (await axios.post(`/product/insurance/products/insuranceProductDetails?id=${id}`)).data; |
||||||
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,239 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-tabs v-model="curTab"> |
||||||
|
<el-tab-pane :label="id ? '产品要素' : '新增产品'" |
||||||
|
name="tab1"> |
||||||
|
<div v-if="info" |
||||||
|
class="audit"> |
||||||
|
<div class="line"> |
||||||
|
<span class="field">审批意见：</span> |
||||||
|
<span class="status">{{ getStatus(+info?.status) }}</span> |
||||||
|
</div> |
||||||
|
<div class="line"> |
||||||
|
<span class="field">意见描述：</span> |
||||||
|
{{ info.opinionDescription }} |
||||||
|
</div> |
||||||
|
<p class="mb-2 text-sm text-[#333] text-right">审查日期：{{ info.approvalTime }}</p> |
||||||
|
<p class="mb-2 text-sm text-[#333] text-right">审查员：公瑾</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-form label-width="100px" |
||||||
|
label-suffix="：" |
||||||
|
class="form" |
||||||
|
status-icon> |
||||||
|
<el-form-item label="保险名称" |
||||||
|
prop="insuranceName"> |
||||||
|
<el-input placeholder="取个有吸引力的产品名，限20字。" |
||||||
|
maxlength="20" |
||||||
|
v-model="form.insuranceName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="险种分类" |
||||||
|
prop="insuranceType"> |
||||||
|
<el-select v-model="form.insuranceType" |
||||||
|
placeholder="请选择"> |
||||||
|
<el-option v-for="item in config[0]?.recordChildren[1]?.subject?.itemList" |
||||||
|
:key="item" |
||||||
|
:label="item.options" |
||||||
|
:value="item.itemId" /> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="承保年龄"> |
||||||
|
<div class="flex items-center"> |
||||||
|
<div class="num-inputs"> |
||||||
|
<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> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="保险额度"> |
||||||
|
<div class="flex-1"> |
||||||
|
<div class="flex"> |
||||||
|
<p class="field-name w-[130px] mr-32">保险责任</p> |
||||||
|
<p class="field-name">保额</p> |
||||||
|
</div> |
||||||
|
<div v-for="(item, i) in config[form.insuranceType === 310 ? 0 : 1]?.recordChildren[2]?.recordChildren" |
||||||
|
:key="i" |
||||||
|
class="flex items-center mb-2"> |
||||||
|
<div class="w-[130px] mr-32"> |
||||||
|
<el-checkbox v-model="item.check" |
||||||
|
:label="item.name" /> |
||||||
|
</div> |
||||||
|
<div v-if="item.check"> |
||||||
|
<el-input placeholder="请输入" |
||||||
|
v-model="item.sumInsured"> |
||||||
|
<template #append>万</template> |
||||||
|
</el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="保费金额" |
||||||
|
prop="minimumLoan"> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入" |
||||||
|
v-model="form.premiumAmount"> |
||||||
|
<template #append>万</template> |
||||||
|
</el-input> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="缴纳形式"> |
||||||
|
<el-radio :label="312" |
||||||
|
v-model="form.formOfPayment">趸交</el-radio> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="保险期限"> |
||||||
|
<div class="flex"> |
||||||
|
<el-input class="mr-2" |
||||||
|
placeholder="请输入" |
||||||
|
v-model="form.insuranceDeadline"></el-input> |
||||||
|
<el-select v-model="form.insuranceDeadlineUnit" |
||||||
|
placeholder="请选择" |
||||||
|
clearable> |
||||||
|
<el-option v-for="item in units" |
||||||
|
:key="item" |
||||||
|
:label="item" |
||||||
|
:value="item" /> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="申请材料"> |
||||||
|
<el-checkbox-group v-model="form.applicationMaterial"> |
||||||
|
<el-checkbox v-for="(item, i) in config[form.insuranceType === 310 ? 0 : 1]?.recordChildren[6]?.subject?.itemList" |
||||||
|
:key="i" |
||||||
|
:label="item.itemId">{{ item.options }}</el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="责任免除"> |
||||||
|
<el-checkbox-group v-model="form.exemptionFromLiability"> |
||||||
|
<el-checkbox v-for="(item, i) in config[0]?.recordChildren[7]?.subject?.itemList" |
||||||
|
:key="i" |
||||||
|
:label="item.itemId">{{ item.options }}</el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
</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 { insuranceProductDetails, addInsuranceProducts } from '@/api/insurance'; |
||||||
|
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: Array<string> = ['年', '个月', '天', '小时']; |
||||||
|
const form = reactive({ |
||||||
|
checkPointId: levelId, |
||||||
|
projectId, |
||||||
|
insuranceName: '', |
||||||
|
applicationMaterial: [], |
||||||
|
exemptionFromLiability: [], |
||||||
|
formOfPayment: '', |
||||||
|
insuranceCoverageConfigList: [], |
||||||
|
insuranceDeadline: '', |
||||||
|
insuranceDeadlineUnit: '', |
||||||
|
maximumAge: '', |
||||||
|
insuranceType: 310, |
||||||
|
premiumAmount: '', |
||||||
|
minimumAge: '', |
||||||
|
}); |
||||||
|
|
||||||
|
// 配置项 |
||||||
|
const getConfig = async () => { |
||||||
|
const { process } = await getProcessInformationBasedOnRoles(275); |
||||||
|
config.value = process; |
||||||
|
}; |
||||||
|
// 详情 |
||||||
|
const getDetail = async () => { |
||||||
|
if (id.value) { |
||||||
|
try { |
||||||
|
const { data } = await insuranceProductDetails(id.value); |
||||||
|
info.value = data; |
||||||
|
} finally { |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
watch( |
||||||
|
() => route.query, |
||||||
|
() => { |
||||||
|
getDetail(); |
||||||
|
}, |
||||||
|
{ |
||||||
|
immediate: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
// 提交 |
||||||
|
const submit = async () => { |
||||||
|
try { |
||||||
|
const param = JSON.parse(JSON.stringify(form)); |
||||||
|
|
||||||
|
if (!param.insuranceName) return ElMessage.error('请输入保险名称'); |
||||||
|
param.insuranceDeadline = param.insuranceDeadline + param.insuranceDeadlineUnit; |
||||||
|
config.value[form.insuranceType === 310 ? 0 : 1]?.recordChildren[2]?.recordChildren.map((e) => { |
||||||
|
e.check && |
||||||
|
e.sumInsured && |
||||||
|
param.insuranceCoverageConfigList.push({ |
||||||
|
insuredLiabilityId: e.subjectId, |
||||||
|
sumInsured: +e.sumInsured, |
||||||
|
}); |
||||||
|
}); |
||||||
|
param.applicationMaterial = param.applicationMaterial.join(); |
||||||
|
param.exemptionFromLiability = param.exemptionFromLiability.join(); |
||||||
|
await addInsuranceProducts(param); |
||||||
|
// addRecord(param); |
||||||
|
ElMessage.success('提交成功！'); |
||||||
|
emit('getList', 1); |
||||||
|
} finally { |
||||||
|
} |
||||||
|
}; |
||||||
|
// 新增判分记录 |
||||||
|
const addRecord = async (data: Record<string, any>) => { |
||||||
|
const preIds = `1,${Cookies.get('sand-level')},41,${data.productType ? 45 : 44}`; // 1，关卡id，角色（这个页面是产品经理新增产品），个人/企业（44/45） |
||||||
|
|
||||||
|
await addOperation({ |
||||||
|
checkpointId: levelId, |
||||||
|
parentId: preIds, |
||||||
|
// lcJudgmentRuleReq: lcRule, |
||||||
|
projectId, |
||||||
|
}); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
getConfig(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import url(../../../styles/form.scss); |
||||||
|
.audit { |
||||||
|
@apply py-5 px-4 mb-[30px] bg-[#f9fafc] rounded-[10px]; |
||||||
|
.line { |
||||||
|
@apply mb-[18px] text-sm leading-[1.6]; |
||||||
|
} |
||||||
|
.field { |
||||||
|
@apply text-sm font-semibold; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,140 @@ |
|||||||
|
<template> |
||||||
|
<div class="block flex" |
||||||
|
style="padding-top: 0"> |
||||||
|
<div class="left w-[241px] min-w-[241px] pr-5 py-4"> |
||||||
|
<div v-if="role == 41" |
||||||
|
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.insuranceId === id }" |
||||||
|
@click="switchProduct(item.insuranceId)"> |
||||||
|
<el-popconfirm title="您确定删除吗？" |
||||||
|
@confirm="handleDelete(item.insuranceId)"> |
||||||
|
<template #reference> |
||||||
|
<img src="@/assets/images/trash.png" |
||||||
|
alt="" |
||||||
|
class="del" /> |
||||||
|
</template> |
||||||
|
</el-popconfirm> |
||||||
|
|
||||||
|
<h6>{{ item.insuranceName }}</h6> |
||||||
|
<p v-if="item.minimumAge && item.maximumAge" |
||||||
|
class="type">{{ item.minimumAge + '-' + item.maximumAge + '周岁' }}</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, defineAsyncComponent } from 'vue'; |
||||||
|
import { ElMessage } from 'element-plus'; |
||||||
|
import { Plus } from '@element-plus/icons-vue'; |
||||||
|
import { insuranceList, batchDeletion } from '@/api/insurance'; |
||||||
|
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 productType = computed(() => route.query.type); // 个人/企业 |
||||||
|
const role = computed(() => +route.query.role || 41); |
||||||
|
const id = computed(() => +route.query.id); |
||||||
|
// 列表 |
||||||
|
const getList = async (first: any) => { |
||||||
|
loading.value = true; |
||||||
|
try { |
||||||
|
const { data } = await insuranceList({ pageNum: 1, pageSize: 1000, checkPointId: levelId, projectId }); |
||||||
|
list.value = data.records; |
||||||
|
first && list.value.length && switchProduct(list.value[0].insuranceId); |
||||||
|
} finally { |
||||||
|
loading.value = false; |
||||||
|
} |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
getList(); |
||||||
|
}); |
||||||
|
|
||||||
|
watch( |
||||||
|
route, |
||||||
|
(route: any) => { |
||||||
|
action.value = route.params.action; |
||||||
|
}, |
||||||
|
{ |
||||||
|
immediate: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
// 产品切换 |
||||||
|
const switchProduct = (id: number) => { |
||||||
|
router.push(`/product/insurance/detail?id=` + id); |
||||||
|
}; |
||||||
|
// 新增 |
||||||
|
const toAdd = () => { |
||||||
|
router.push(`/product/insurance/add`); |
||||||
|
}; |
||||||
|
// 返回列表 |
||||||
|
const toList = () => { |
||||||
|
router.push(`/product/insurance`); |
||||||
|
}; |
||||||
|
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,86 @@ |
|||||||
|
<template> |
||||||
|
<div class="info mt-2"> |
||||||
|
<h2 class="text-center text-lg">{{info.insuranceName}}</h2> |
||||||
|
<p class="text">险种分类：{{ info.insuranceType }}</p> |
||||||
|
<p v-if="info.minimumAge && info.maximumAge" |
||||||
|
class="text">承保年龄：{{ info.minimumAge + '-' + info.maximumAge + '周岁' }}</p> |
||||||
|
<p v-if="info.insuranceDeadline" |
||||||
|
class="text">保险期限：{{ info.insuranceDeadline }}</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.insuranceCoverageConfigList" |
||||||
|
:key="item" |
||||||
|
class="flex"> |
||||||
|
<p class="w-[130px] mr-32">{{item.insuranceCoverage}}</p> |
||||||
|
<p class="">{{item.sumInsured}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<p v-if="info.premiumAmount" |
||||||
|
class="text">保费金额：{{ info.premiumAmount }}万</p> |
||||||
|
<p v-if="info.formOfPayment" |
||||||
|
class="text">缴纳形式：{{ info.formOfPayment }}</p> |
||||||
|
<div v-if="info.applicationMaterialList?.length" |
||||||
|
class="text"> |
||||||
|
申请材料： |
||||||
|
<p v-for="(item, i) in info.applicationMaterialList" |
||||||
|
:key="item">{{ i + 1 }}、{{item}}</p> |
||||||
|
</div> |
||||||
|
<div v-if="info.exemptionFromLiabilityList?.length" |
||||||
|
class="text"> |
||||||
|
责任免除： |
||||||
|
<p v-for="(item, i) in info.exemptionFromLiabilityList" |
||||||
|
:key="item">{{ i + 1 }}、{{item}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { ref, computed, watch, onMounted } from 'vue'; |
||||||
|
import { insuranceProductDetails } from '@/api/insurance'; |
||||||
|
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 insuranceProductDetails(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,221 @@ |
|||||||
|
<template> |
||||||
|
<div class="block"> |
||||||
|
<div class="flex justify-between items-center mb-5"> |
||||||
|
<search v-model="params.insuranceName" |
||||||
|
@change="initList"></search> |
||||||
|
<div class="filter"> |
||||||
|
<div class="select"> |
||||||
|
<el-select v-model="params.insuranceType" |
||||||
|
placeholder="险种分类" |
||||||
|
size="large" |
||||||
|
clearable> |
||||||
|
<el-option v-for="item in insuranceTypes" |
||||||
|
:key="item.id" |
||||||
|
:label="item.name" |
||||||
|
:value="item.id" /> |
||||||
|
</el-select> |
||||||
|
<img src="@/assets/images/7.png" |
||||||
|
alt="" |
||||||
|
class="icon" /> |
||||||
|
</div> |
||||||
|
<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="insuranceName" |
||||||
|
label="保险名称" |
||||||
|
min-width="150"></el-table-column> |
||||||
|
<el-table-column prop="insuranceTypeName" |
||||||
|
label="险种分类" |
||||||
|
min-width="100"></el-table-column> |
||||||
|
<el-table-column prop="minimumAge" |
||||||
|
label="承保年龄" |
||||||
|
min-width="100"> |
||||||
|
<template #default="{ row }"> |
||||||
|
{{ row.minimumAge && row.maximumAge ? row.minimumAge + ' - ' + row.maximumAge + '周岁' : '-' }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="insuranceCoverageConfig" |
||||||
|
label="保险额度（元）" |
||||||
|
min-width="300"> |
||||||
|
<template #default="{ row }"> |
||||||
|
{{ row.insuranceCoverageConfig || '-' }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="insuranceDeadline" |
||||||
|
label="保险期限" |
||||||
|
min-width="100"> |
||||||
|
<template #default="{ row }"> |
||||||
|
{{ row.insuranceDeadline || '-' }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="premiumAmount" |
||||||
|
label="保费金额（元）" |
||||||
|
min-width="120"> |
||||||
|
<template #default="{ row }"> |
||||||
|
{{ row.premiumAmount || '-' }} |
||||||
|
</template> |
||||||
|
</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.insuranceId)"> |
||||||
|
<template #reference> |
||||||
|
<el-button type="text" |
||||||
|
size="small" |
||||||
|
@click.stop="stop">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-popconfirm> |
||||||
|
<el-button type="text" |
||||||
|
@click="toDetail(`/product/insurance/detail`, row.insuranceId)" |
||||||
|
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 { useI18n } from 'vue-i18n'; |
||||||
|
import { pageSizes, pageLayout, toParams, resetParams } from '@/utils/common'; |
||||||
|
import { insuranceList, batchDeletion } from '@/api/insurance'; |
||||||
|
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 { t } = useI18n(); |
||||||
|
const router = useRouter(); |
||||||
|
const route = useRoute(); |
||||||
|
const projectId = +Cookies.get('sand-projectId'); |
||||||
|
const levelId = +Cookies.get('sand-level'); |
||||||
|
const params = reactive({ |
||||||
|
createDateSort: '', |
||||||
|
insuranceName: '', |
||||||
|
insuranceType: '', |
||||||
|
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<Array<any>>([ |
||||||
|
{ |
||||||
|
id: 310, |
||||||
|
name: '意外险', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 311, |
||||||
|
name: '财产险', |
||||||
|
}, |
||||||
|
]); |
||||||
|
const list = ref<Array<any>>([]); |
||||||
|
const loading = ref<boolean>(false); |
||||||
|
const stop = () => {}; |
||||||
|
// 列表 |
||||||
|
const getList = async () => { |
||||||
|
loading.value = true; |
||||||
|
try { |
||||||
|
const { data } = await insuranceList({ 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 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/insurance/add`, |
||||||
|
}); |
||||||
|
}; |
||||||
|
// 产品详情 |
||||||
|
const toDetail = async (path: string, id: number) => { |
||||||
|
router.push({ |
||||||
|
path, |
||||||
|
query: { |
||||||
|
id, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
// 卡片模式 |
||||||
|
const toCardList = () => { |
||||||
|
router.push('/product/insurance/detail'); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleDelete = async (id: number) => { |
||||||
|
await batchDeletion([id]); |
||||||
|
getList(); |
||||||
|
ElMessage.success(t('success')); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.filter { |
||||||
|
@apply inline-flex items-center; |
||||||
|
.select { |
||||||
|
@apply relative mr-[12px]; |
||||||
|
.icon { |
||||||
|
@apply absolute top-[12px] left-5; |
||||||
|
} |
||||||
|
:deep(.el-select) { |
||||||
|
@apply w-[170px]; |
||||||
|
.el-input__inner { |
||||||
|
@apply pl-[41px] rounded-[18px] border-[#dfe9f8]; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.add-btn { |
||||||
|
@apply inline-flex items-center h-[36px] px-[24px] text-sm text-white rounded-[18px] cursor-pointer; |
||||||
|
background: linear-gradient(-36deg, #006bff, #2ab1ff); |
||||||
|
border: 1px solid #ffffff; |
||||||
|
.icon { |
||||||
|
@apply mr-[8px]; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue