659 lines
17 KiB
Vue
659 lines
17 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<div class="insurance-manage-container">
|
|
<div class="page-header">
|
|
<h2 class="page-title">保险信息管理</h2>
|
|
<a-button type="primary" @click="showAddModal">
|
|
<template #icon>
|
|
<icon-plus />
|
|
</template>
|
|
新增保险
|
|
</a-button>
|
|
</div>
|
|
|
|
<!-- 搜索表单 -->
|
|
<a-card class="search-card" :bordered="false">
|
|
<a-form :model="searchForm" layout="inline">
|
|
<a-form-item label="保险公司" field="insuranceCompanyId">
|
|
<a-select
|
|
v-model="searchForm.insuranceCompanyId"
|
|
placeholder="请选择保险公司"
|
|
allow-clear
|
|
:loading="loadingCompanies"
|
|
style="width: 200px"
|
|
>
|
|
<a-option
|
|
v-for="company in companyList"
|
|
:key="company.id"
|
|
:value="company.id"
|
|
>
|
|
{{ company.insuranceCompanyName }}
|
|
</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="保险类型" field="insuranceTypeId">
|
|
<a-select
|
|
v-model="searchForm.insuranceTypeId"
|
|
placeholder="请选择保险类型"
|
|
allow-clear
|
|
:loading="loadingTypes"
|
|
style="width: 200px"
|
|
>
|
|
<a-option
|
|
v-for="type in typeList"
|
|
:key="type.id"
|
|
:value="type.id"
|
|
>
|
|
{{ type.insuranceTypeName }}
|
|
</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="用户" field="userId">
|
|
<a-input
|
|
v-model="searchForm.userId"
|
|
placeholder="请输入用户ID"
|
|
style="width: 200px"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button type="primary" @click="handleSearch">
|
|
<template #icon>
|
|
<icon-search />
|
|
</template>
|
|
搜索
|
|
</a-button>
|
|
<a-button @click="handleReset">
|
|
<template #icon>
|
|
<icon-refresh />
|
|
</template>
|
|
重置
|
|
</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-card>
|
|
|
|
<!-- 保险信息表格 -->
|
|
<a-card class="table-card" :bordered="false">
|
|
<a-table
|
|
:columns="columns"
|
|
:data="insuranceList"
|
|
:pagination="paginationConfig"
|
|
:loading="loading"
|
|
row-key="id"
|
|
@page-change="handlePageChange"
|
|
>
|
|
<template #insuranceCompany="{ record }">
|
|
<span>{{ getCompanyName(record.insuranceCompanyId) }}</span>
|
|
</template>
|
|
|
|
<template #insuranceType="{ record }">
|
|
<span>{{ getTypeName(record.insuranceTypeId) }}</span>
|
|
</template>
|
|
|
|
<template #status="{ record }">
|
|
<a-tag
|
|
:color="record.status === 'active' ? 'green' : 'red'"
|
|
>
|
|
{{ record.status === 'active' ? '有效' : '失效' }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<template #actions="{ record }">
|
|
<a-space>
|
|
<a-button type="primary" size="small" @click="editRecord(record)">
|
|
编辑
|
|
</a-button>
|
|
<a-button type="primary" status="danger" size="small" @click="deleteRecord(record)">
|
|
删除
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
</a-table>
|
|
</a-card>
|
|
|
|
<!-- 新增/编辑保险信息模态框 -->
|
|
<a-modal
|
|
v-model:visible="modalVisible"
|
|
:title="isEdit ? '编辑保险信息' : '新增保险信息'"
|
|
width="600px"
|
|
@ok="handleSubmit"
|
|
@cancel="handleCancel"
|
|
>
|
|
<a-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
:rules="formRules"
|
|
layout="vertical"
|
|
>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="保险公司" field="insuranceCompanyId">
|
|
<a-select
|
|
v-model="formData.insuranceCompanyId"
|
|
placeholder="请选择保险公司"
|
|
:loading="loadingCompanies"
|
|
>
|
|
<a-option
|
|
v-for="company in companyList"
|
|
:key="company.insuranceCompanyId"
|
|
:value="company.insuranceCompanyId"
|
|
>
|
|
{{ company.insuranceCompanyName }}
|
|
</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
|
|
<a-col :span="12">
|
|
<a-form-item label="保险类型" field="insuranceTypeId">
|
|
<a-select
|
|
v-model="formData.insuranceTypeId"
|
|
placeholder="请选择保险类型"
|
|
:loading="loadingTypes"
|
|
>
|
|
<a-option
|
|
v-for="type in typeList"
|
|
:key="type.insuranceTypeId"
|
|
:value="type.insuranceTypeId"
|
|
>
|
|
{{ type.insuranceTypeName }}
|
|
</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="选择人员" field="userId">
|
|
|
|
<a-select
|
|
v-model="formData.userId"
|
|
placeholder="请选择员工"
|
|
allow-search
|
|
:filter-option="false"
|
|
@search="searchEmployees"
|
|
>
|
|
<a-option
|
|
v-for="employee in employeeOptions"
|
|
:key="employee.userId"
|
|
:value="employee.userId"
|
|
>
|
|
{{ employee.nickname || employee.name }} ({{ employee.deptName }})
|
|
</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
|
|
|
|
<a-col :span="12">
|
|
<a-form-item label="保险单号" field="insuranceBillCode">
|
|
<a-input v-model="formData.insuranceBillCode" placeholder="请输入保险单号" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="生效日期" field="effectiveDate">
|
|
<a-date-picker
|
|
v-model="formData.effectiveDate"
|
|
placeholder="请选择生效日期"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
|
|
<a-col :span="12">
|
|
<a-form-item label="到期日期" field="expireDate">
|
|
<a-date-picker
|
|
v-model="formData.expireDate"
|
|
placeholder="请选择到期日期"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="保险金额" field="insuranceAmount">
|
|
<a-input-number
|
|
v-model="formData.insuranceAmount"
|
|
placeholder="请输入保险金额"
|
|
:precision="2"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
|
|
<a-col :span="12">
|
|
<a-form-item label="保险费" field="insurancePremium">
|
|
<a-input-number
|
|
v-model="formData.insurancePremium"
|
|
placeholder="请输入保险费"
|
|
:precision="2"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-form-item label="受益人" field="beneficiary">
|
|
<a-input v-model="formData.beneficiary" placeholder="请输入受益人" />
|
|
</a-form-item>
|
|
<a-col :span="12">
|
|
<a-form-item label="上传保单" field="attachInfoId">
|
|
<a-upload
|
|
:custom-request="uploadInsuranceFile"
|
|
>
|
|
<a-button type="primary">
|
|
<template #icon><icon-upload /></template>
|
|
上传保单
|
|
</a-button>
|
|
</a-upload>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-form-item label="备注" field="remark">
|
|
<a-textarea
|
|
v-model="formData.remark"
|
|
placeholder="请输入备注"
|
|
:auto-size="{ minRows: 3, maxRows: 6 }"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</div>
|
|
</GiPageLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, computed } from 'vue'
|
|
import { Message, Modal } from '@arco-design/web-vue'
|
|
import { IconPlus, IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon'
|
|
import * as InsuranceAPI from '@/apis/insurance'
|
|
import { listAllUser } from '@/apis/system/user'
|
|
import type { InsuranceInfo, InsuranceListParams } from '@/apis/insurance'
|
|
import * as InsuranceCompanyAPI from '@/apis/insurance-company'
|
|
import * as InsuranceTypeAPI from '@/apis/insurance-type'
|
|
import { addAttachInsurance } from '@/apis/attach-info'
|
|
|
|
// 数据状态
|
|
const loading = ref(false)
|
|
const loadingCompanies = ref(false)
|
|
const loadingTypes = ref(false)
|
|
const modalVisible = ref(false)
|
|
const isEdit = ref(false)
|
|
const formRef = ref()
|
|
|
|
// 列表数据
|
|
const insuranceList = ref<InsuranceInfo[]>([])
|
|
const companyList = ref<any[]>([])
|
|
const typeList = ref<any[]>([])
|
|
|
|
// 搜索表单
|
|
const searchForm = reactive<InsuranceListParams>({
|
|
insuranceCompanyId: '',
|
|
insuranceTypeId: '',
|
|
userId: ''
|
|
})
|
|
|
|
// 分页配置
|
|
const paginationConfig = reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
showTotal: true,
|
|
showJumper: true
|
|
})
|
|
|
|
// 表单数据
|
|
const formData = reactive<InsuranceInfo>({
|
|
id: '',
|
|
attachInfoId: '',
|
|
insuranceCompanyId: '',
|
|
insuranceTypeId: '',
|
|
userId: '',
|
|
insuranceBillCode: '',
|
|
effectiveDate: '',
|
|
expireDate: '',
|
|
insuranceAmount: 0,
|
|
insurancePremium: 0,
|
|
beneficiary: '',
|
|
remark: ''
|
|
})
|
|
|
|
// 表单验证规则
|
|
const formRules = {
|
|
insuranceCompanyId: [
|
|
{ required: true, message: '请选择保险公司' }
|
|
],
|
|
insuranceTypeId: [
|
|
{ required: true, message: '请选择保险类型' }
|
|
],
|
|
userId: [
|
|
{ required: true, message: '请输入用户ID' }
|
|
],
|
|
insuranceBillCode: [
|
|
{ required: true, message: '请输入保险单号' }
|
|
],
|
|
effectiveDate: [
|
|
{ required: true, message: '请选择生效日期' }
|
|
],
|
|
expireDate: [
|
|
{ required: true, message: '请选择到期日期' }
|
|
],
|
|
insuranceAmount: [
|
|
{ required: true, message: '请输入保险金额' }
|
|
],
|
|
insurancePremium: [
|
|
{ required: true, message: '请输入保险费' }
|
|
]
|
|
}
|
|
|
|
// 表格列定义
|
|
const columns = [
|
|
{
|
|
title: '用户名称',
|
|
dataIndex: 'name',
|
|
width: 100
|
|
},
|
|
{
|
|
title: '保险公司',
|
|
dataIndex: 'insuranceCompanyName',
|
|
slotName: 'insuranceCompanyName',
|
|
width: 150
|
|
},
|
|
{
|
|
title: '保险类型',
|
|
dataIndex: 'insuranceTypeName',
|
|
slotName: 'insuranceTypeName',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '保险单号',
|
|
dataIndex: 'insuranceBillCode',
|
|
width: 150
|
|
},
|
|
{
|
|
title: '生效日期',
|
|
dataIndex: 'effectiveDate',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '到期日期',
|
|
dataIndex: 'expireDate',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '保险金额',
|
|
dataIndex: 'insuranceAmount',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
slotName: 'status',
|
|
width: 80
|
|
},
|
|
{
|
|
title: '操作',
|
|
slotName: 'actions',
|
|
width: 150,
|
|
fixed: 'right'
|
|
}
|
|
]
|
|
|
|
// 获取保险公司名称
|
|
const getCompanyName = (id: string) => {
|
|
const company = companyList.value.find(c => c.id === id)
|
|
return company ? company.insuranceCompanyName : '-'
|
|
}
|
|
// 获取保险类型名称
|
|
const getTypeName = (id: string) => {
|
|
const type = typeList.value.find(t => t.id === id)
|
|
return type ? type.insuranceTypeName : '-'
|
|
}
|
|
|
|
// 获取保险公司列表
|
|
const getCompanyList = async () => {
|
|
try {
|
|
loadingCompanies.value = true
|
|
const response = await InsuranceCompanyAPI.getInsuranceCompanyList({})
|
|
|
|
console.log('保险公司列表响应:', response)
|
|
|
|
if (response.data) {
|
|
companyList.value = response.data || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取保险公司列表失败:', error)
|
|
Message.error('获取保险公司列表失败')
|
|
} finally {
|
|
loadingCompanies.value = false
|
|
}
|
|
}
|
|
|
|
// 获取保险类型列表
|
|
const getTypeList = async () => {
|
|
try {
|
|
loadingTypes.value = true
|
|
const response = await InsuranceTypeAPI.getInsuranceTypeList()
|
|
|
|
console.log('保险类型列表响应:', response)
|
|
|
|
if (response.data) {
|
|
typeList.value = response.data || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取保险类型列表失败:', error)
|
|
Message.error('获取保险类型列表失败')
|
|
} finally {
|
|
loadingTypes.value = false
|
|
}
|
|
}
|
|
|
|
// 获取保险信息列表
|
|
const getInsuranceList = async () => {
|
|
try {
|
|
loading.value = true
|
|
const params: InsuranceListParams = {
|
|
...searchForm,
|
|
current: paginationConfig.current,
|
|
size: paginationConfig.pageSize
|
|
}
|
|
|
|
const response = await InsuranceAPI.getInsuranceList(params)
|
|
|
|
console.log('保险信息列表响应:', response)
|
|
|
|
if (response.data) {
|
|
insuranceList.value = response.data || []
|
|
paginationConfig.total = response.data.total || 0
|
|
}
|
|
} catch (error) {
|
|
console.error('获取保险信息列表失败:', error)
|
|
Message.error('获取保险信息列表失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
// 搜索员工
|
|
const searchEmployees = (keyword: string) => {
|
|
fetchEmployeeOptions(keyword)
|
|
}
|
|
const employeeOptions = ref<any[]>([])
|
|
// 获取员工列表
|
|
const fetchEmployeeOptions = async (keyword?: string) => {
|
|
try {
|
|
const response = await listAllUser({ description: keyword })
|
|
employeeOptions.value = response.data || []
|
|
} catch (error) {
|
|
console.error('获取员工列表失败:', error)
|
|
Message.error('获取员工列表失败')
|
|
} finally {
|
|
}
|
|
}
|
|
const uploadInsuranceFile = async (options: any) => {
|
|
if(!formData.userId || !formData.insuranceBillCode){
|
|
Message.error('请先选择员工和输入保险单号')
|
|
return
|
|
}
|
|
const uploadForm = new FormData()
|
|
uploadForm.append('file', options.fileItem.file)
|
|
uploadForm.append('userDefinedPath', `${formData.userId}/${formData.insuranceBillCode}`)
|
|
const response = await addAttachInsurance(uploadForm)
|
|
console.log('上传保险文件响应:', response)
|
|
formData.attachInfoId = response.data
|
|
}
|
|
// 搜索
|
|
const handleSearch = () => {
|
|
paginationConfig.current = 1
|
|
getInsuranceList()
|
|
}
|
|
|
|
// 重置搜索
|
|
const handleReset = () => {
|
|
Object.assign(searchForm, {
|
|
insuranceCompanyId: '',
|
|
insuranceTypeId: '',
|
|
userId: ''
|
|
})
|
|
paginationConfig.current = 1
|
|
getInsuranceList()
|
|
}
|
|
|
|
// 分页变化
|
|
const handlePageChange = (page: number) => {
|
|
paginationConfig.current = page
|
|
getInsuranceList()
|
|
}
|
|
|
|
// 显示新增模态框
|
|
const showAddModal = () => {
|
|
isEdit.value = false
|
|
resetForm()
|
|
modalVisible.value = true
|
|
}
|
|
|
|
// 编辑记录
|
|
const editRecord = (record: InsuranceInfo) => {
|
|
isEdit.value = true
|
|
Object.assign(formData, record)
|
|
modalVisible.value = true
|
|
}
|
|
|
|
// 删除记录
|
|
const deleteRecord = (record: InsuranceInfo) => {
|
|
Modal.confirm({
|
|
title: '确认删除',
|
|
content: '确定要删除这条保险信息吗？',
|
|
okText: '确认',
|
|
cancelText: '取消',
|
|
onOk: async () => {
|
|
try {
|
|
await InsuranceAPI.deleteInsurance(record.id!)
|
|
Message.success('删除成功')
|
|
await getInsuranceList()
|
|
} catch (error) {
|
|
console.error('删除失败:', error)
|
|
Message.error('删除失败')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 表单提交
|
|
const handleSubmit = async () => {
|
|
try {
|
|
await formRef.value?.validate()
|
|
|
|
if (isEdit.value) {
|
|
await InsuranceAPI.updateInsurance(formData.id!, formData)
|
|
Message.success('更新成功')
|
|
} else {
|
|
await InsuranceAPI.createInsurance(formData)
|
|
Message.success('创建成功')
|
|
}
|
|
|
|
modalVisible.value = false
|
|
resetForm()
|
|
await getInsuranceList()
|
|
} catch (error) {
|
|
console.error('操作失败:', error)
|
|
Message.error('操作失败，请重试')
|
|
}
|
|
}
|
|
|
|
// 取消操作
|
|
const handleCancel = () => {
|
|
modalVisible.value = false
|
|
resetForm()
|
|
}
|
|
|
|
// 重置表单
|
|
const resetForm = () => {
|
|
Object.assign(formData, {
|
|
id: '',
|
|
attachInfoId: '',
|
|
insuranceCompanyId: '',
|
|
insuranceTypeId: '',
|
|
userId: '',
|
|
insuranceBillCode: '',
|
|
effectiveDate: '',
|
|
expireDate: '',
|
|
insuranceAmount: 0,
|
|
insurancePremium: 0,
|
|
beneficiary: '',
|
|
remark: ''
|
|
})
|
|
formRef.value?.resetFields()
|
|
}
|
|
|
|
// 初始化
|
|
const init = async () => {
|
|
await Promise.all([
|
|
getCompanyList(),
|
|
getTypeList(),
|
|
fetchEmployeeOptions(),
|
|
getInsuranceList()
|
|
])
|
|
}
|
|
|
|
// 组件挂载
|
|
onMounted(() => {
|
|
init()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.insurance-manage-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.page-title {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.search-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.table-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style> |