Skip to content

Y
yd-csf-front
Commit 16afea7a by Sweet Zhang
Options

新单跟进

parent 352e73d1
Showing with 662 additions and 38 deletions
src/components/SearchForm/SearchForm.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<el-form ref="formRef" :model="localModel" :rules="formRules" label-width="auto" v-bind="$attrs" :validate-on-rule-change="false"> <el-form ref="formRef" :model="localModel" :rules="formRules" label-width="auto" v-bind="$attrs" :validate-on-rule-change="false">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col v-for="item in visibleConfig" :key="item.prop" :span="item.span || 6"> <el-col v-for="item in visibleConfig" :key="item.prop" :span="item.span || 6">
<el-form-item :label="item.label" :prop="item.prop" :class="{ 'search-form-item': isSearch }"> <el-form-item :label="item.label" :prop="item.prop" :class="{ 'search-form-item': isSearch }" :label-position="item.labelPosition || 'top'">
<!-- Input --> <!-- Input -->
<el-input v-if="item.type === 'input'" v-model="localModel[item.prop]" <el-input v-if="item.type === 'input'" v-model="localModel[item.prop]"
:placeholder="item.placeholder || `请输入${item.label}`" :clearable="true" :placeholder="item.placeholder || `请输入${item.label}`" :clearable="true"
......
src/views/financialCenter/financialBilling.vue
...@@ -143,6 +143,7 @@ import CommonDialog from '@/components/commonDialog' ...@@ -143,6 +143,7 @@ import CommonDialog from '@/components/commonDialog'
import SearchForm from '@/components/SearchForm/SearchForm.vue' import SearchForm from '@/components/SearchForm/SearchForm.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { formatCurrency } from '@/utils/number' import { formatCurrency } from '@/utils/number'
import { Select } from '@element-plus/icons-vue'
// 接口 // 接口
import { getPolicyFortuneList, addCheckRecordaddBatch, updatePayoutAmount, downloadPolicyFortuneAccount } from '@/api/financial/commission' import { getPolicyFortuneList, addCheckRecordaddBatch, updatePayoutAmount, downloadPolicyFortuneAccount } from '@/api/financial/commission'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
...@@ -380,12 +381,6 @@ const operationBtnList = ref([ ...@@ -380,12 +381,6 @@ const operationBtnList = ref([
label: '新增出账', label: '新增出账',
click: handleAdd click: handleAdd
}, },
// {
// key: 'import',
// direction: 'left',
// label: '导入出账',
// click: handleImport
// },
{ {
key: 'export', key: 'export',
direction: 'right', direction: 'right',
......
src/views/financialCenter/financialIncome.vue
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="24" :sm="12" :md="3" :lg="3"> <el-col :xs="24" :sm="12" :md="3" :lg="3">
<el-button type="primary" :icon="Plus" :disabled="!checkFormData?.reconciliationYearMonth" <el-button type="primary" :icon="Plus" :disabled="!checkFormData?.reconciliationYearMonth"
@click="addCheckRecordDialogFlag = true;">新增</el-button> @click="handleAddCheckList()">新增</el-button>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="3" :lg="3"> <el-col :xs="24" :sm="24" :md="3" :lg="3">
<el-button type="primary" :icon="Upload" :disabled="!checkFormData?.reconciliationYearMonth" <el-button type="primary" :icon="Upload" :disabled="!checkFormData?.reconciliationYearMonth"
...@@ -236,8 +236,8 @@ ...@@ -236,8 +236,8 @@
</CommonDialog> </CommonDialog>
<!-- 新增检核记录弹窗 --> <!-- 新增检核记录弹窗 -->
<CommonDialog :dialogTitle='editStatus.value == "add" ? "新增检核记录" : "修改检核记录"' dialogWidth='80%' <CommonDialog :dialogTitle='editStatus.value == "add" ? "新增检核记录" : "修改检核记录"' dialogWidth='80%'
:openDialog=addCheckRecordDialogFlag :showAction='true' :showClose='true' :openDialog=addCheckRecordDialogFlag :showAction='true' :showClose='true' @close='closeDialog()'
@close='closeDialog()' @confirm='handleAddCheckRecord()'> @confirm='handleAddCheckRecord()'>
<el-row> <el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24"> <el-col :xs="24" :sm="24" :md="24" :lg="24">
<SearchForm ref="addCheckRecordFormRef" :config="addCheckRecordConfig" v-model="addReceivablesFormModel" /> <SearchForm ref="addCheckRecordFormRef" :config="addCheckRecordConfig" v-model="addReceivablesFormModel" />
...@@ -287,7 +287,8 @@ import { ...@@ -287,7 +287,8 @@ import {
getPolicyCommissionList, generateCommissionRecord, getPolicyCommissionList, generateCommissionRecord,
addPayrollCheckRecord, commissionExpectedRecord, updateCompareStatus, updateCommissionRecord, deletePolicyCommission, syncExpectedCommission addPayrollCheckRecord, commissionExpectedRecord, updateCompareStatus, updateCommissionRecord, deletePolicyCommission, syncExpectedCommission
} from '@/api/financial/commission' } from '@/api/financial/commission'
import { Plus, Upload, Select } from '@element-plus/icons-vue'
import { InfoFilled, Select, Upload, Plus } from '@element-plus/icons-vue'
import FileUpload from '@/components/FileUpload/index.vue' import FileUpload from '@/components/FileUpload/index.vue'
import { loadDicts, getDictLabel } from '@/utils/useDict' import { loadDicts, getDictLabel } from '@/utils/useDict'
const formatRatio = (row, column, cellValue, index) => { const formatRatio = (row, column, cellValue, index) => {
...@@ -623,6 +624,7 @@ const handleAddCheckRecord = async () => { ...@@ -623,6 +624,7 @@ const handleAddCheckRecord = async () => {
console.log(params) console.log(params)
await updateCommissionRecord(params.value) await updateCommissionRecord(params.value)
ElMessage.success('更新检核记录成功') ElMessage.success('更新检核记录成功')
addCheckRecordDialogFlag.value = false
resetForm('addReceivablesFormModel') resetForm('addReceivablesFormModel')
} else { } else {
...@@ -635,7 +637,7 @@ const handleAddCheckRecord = async () => { ...@@ -635,7 +637,7 @@ const handleAddCheckRecord = async () => {
await addPayrollCheckRecord([params.value]) await addPayrollCheckRecord([params.value])
ElMessage.success('新增检核记录成功') ElMessage.success('新增检核记录成功')
addCheckRecordDialogFlag.value = false addCheckRecordDialogFlag.value = false
resetForm('addReceivablesFormModel') resetForm('addReceivablesFormModel')
checkRecordTableData.value = [] checkRecordTableData.value = []
} }
checkRecordQuery() checkRecordQuery()
...@@ -647,7 +649,7 @@ const handleAddCheckRecord = async () => { ...@@ -647,7 +649,7 @@ const handleAddCheckRecord = async () => {
const resetForm = (type) => { const resetForm = (type) => {
if (type === 'addReceivablesFormModel') if (type === 'addReceivablesFormModel')
addReceivablesFormModel.value = {} addReceivablesFormModel.value = {}
addCheckRecordFormRef.value.resetForm() addCheckRecordFormRef.value.resetForm()
} }
...@@ -837,6 +839,12 @@ const handleSelect = (e, row) => { ...@@ -837,6 +839,12 @@ const handleSelect = (e, row) => {
return return
} }
} }
const handleAddCheckList = () => {
editStatus.value = 'add'
addReceivablesFormModel.value = { ...selectedRow.value }
addCheckRecordDialogFlag.value = true
resetForm('addReceivablesFormModel')
}
// 设置比对状态api // 设置比对状态api
......
src/views/financialCenter/receivables.vue
...@@ -618,7 +618,7 @@ const handleSelect = async (e, row) => { ...@@ -618,7 +618,7 @@ const handleSelect = async (e, row) => {
{ property: 'amount', label: '入账金额', width: '150' }, { property: 'amount', label: '入账金额', width: '150' },
{ property: 'currentCommissionRatio', label: '入账比例', width: '150' }, { property: 'currentCommissionRatio', label: '入账比例', width: '150' },
{ property: 'commissionDate', label: '入账日', width: '150' }, { property: 'commissionDate', label: '入账日', width: '150' },
{ property: 'status', label: '入账状态', width: '150' } { property: 'commissionStatus', label: '入账状态', width: '150' }
] ]
// 加载真实数据 // 加载真实数据
const records = await loadEntryRecordData(row.commissionExpectedBizId) const records = await loadEntryRecordData(row.commissionExpectedBizId)
......
src/views/sign/underwritingMain/index.vue
...@@ -9,17 +9,21 @@ ...@@ -9,17 +9,21 @@
</template> </template>
<!-- 列表区域 --> <!-- 列表区域 -->
<template #table> <template #table>
<el-table :data="tableData" height="400" border highlight-current-row style="width: 100%" v-loading="loading"> <el-table :data="tableData" height="500" border highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column prop="policyNo" label="保单号" width="120" fixed="left" sortable /> <el-table-column prop="policyNo" label="保单号" width="200" sortable />
<el-table-column prop="policyNo" label="新单状态" width="120" fixed="left" sortable /> <el-table-column prop="status" label="新单状态" width="120" sortable>
<el-table-column prop="appointmentNo" label="预约编号" width="150" fixed="left" sortable /> <template #default="{ row }">
<el-table-column prop="signDate" label="签单日" width="150" fixed="left" sortable /> {{ getDictLabel('csf_policy_follow_status', row.status) }}
<el-table-column prop="policyBizId" label="最晚缴费日" width="150" fixed="left" sortable /> </template>
<el-table-column prop="policyHolder" label="投保人" width="150" fixed="left" sortable /> </el-table-column>
<el-table-column prop="policyNo" label="受保人" width="150" fixed="left" sortable /> <el-table-column prop="appointmentNo" label="预约编号" width="200" sortable />
<el-table-column prop="insuranceCompany" label="保险公司" width="150" fixed="left" sortable /> <el-table-column prop="signDate" label="签单日" width="200" sortable />
<el-table-column prop="productName" label="产品计划" width="150" fixed="left" sortable /> <el-table-column prop="policyBizId" label="最晚缴费日" width="200" sortable />
<el-table-column prop="paymentNumber" label="缴费年期" width="150" fixed="left" sortable /> <el-table-column prop="policyHolder" label="投保人" width="150" sortable />
<el-table-column prop="policyNo" label="受保人" width="150" sortable />
<el-table-column prop="insuranceCompany" label="保险公司" width="200" sortable />
<el-table-column prop="productName" label="产品计划" width="200" sortable />
<el-table-column prop="paymentTerm" label="缴费年期" width="120" sortable />
<el-table-column fixed="right" label="操作" min-width="80"> <el-table-column fixed="right" label="操作" min-width="80">
<template #default="{ row }"> <template #default="{ row }">
<el-popover placement="right" :width="200" trigger="click"> <el-popover placement="right" :width="200" trigger="click">
...@@ -40,10 +44,36 @@ ...@@ -40,10 +44,36 @@
</template> </template>
</CommonPage> </CommonPage>
<!-- 弹窗--> <!-- 弹窗-->
<CommonDialog dialogTitle='弹窗' dialogWidth='80%' :openDialog=dialogFlag :showAction='false' :showClose='true' <CommonDialog dialogTitle='修改状态' dialogWidth='80%' :openDialog=editStatusDialogFlag :showAction='true'
@close='dialogFlag = false'> :showClose='true' @close='editStatusDialogFlag = false' @confirm='handleEditStatusSubmit'>
内容 <SearchForm ref="editStatusFormRef" :config="editStatusFormConfig" v-model="editStatusFormData" />
</CommonDialog>
<!-- 查看关联记录 -->
<CommonDialog dialogTitle='查看关联记录' dialogWidth='80%' :openDialog=viewRelatedDialogFlag :showAction='false'
:showClose='true' @close='viewRelatedDialogFlag = false'>
<el-table :data="relateRecordTableData" style="width: 100%">
<el-table-column fixed prop="followDate" label="流程编号" width="150" />
<el-table-column prop="name" label="客户姓名" width="120" />
<el-table-column prop="state" label="创建时间" width="120" sortable />
<el-table-column fixed="right" label="操作" min-width="120">
<template #default>
<el-button link type="primary" size="small" @click="viewRelatedDetail(row)">
查看
</el-button>
<el-button link type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</CommonDialog>
<!-- 查看详情、更新数据 -->
<CommonDialog :dialogTitle='mode === "viewDetail" ? "查看详情" : "更新数据"' dialogWidth='80%' :openDialog=viewDetailDialogFlag :showAction='false'
:showClose='true' @close='viewDetailDialogFlag = false' @confirm='handleUpdateSubmit'>
<PolicyDetail v-model="policyDetailFormData" @submit="onSubmit" @cancel="showDialog = false"/>
</CommonDialog> </CommonDialog>
</div> </div>
</template> </template>
...@@ -62,6 +92,10 @@ import { ...@@ -62,6 +92,10 @@ import {
changePolicyStatus, changePolicyStatus,
policyFollowReport policyFollowReport
} from '@/api/sign/underwritingMain' } from '@/api/sign/underwritingMain'
import PolicyDetail from './policyDetail.vue'
const policyDetailFormData = ref({})
const userStore = useUserStore() const userStore = useUserStore()
// 分页相关 // 分页相关
const currentPage = ref(1) const currentPage = ref(1)
...@@ -72,7 +106,65 @@ const loading = ref(false) ...@@ -72,7 +106,65 @@ const loading = ref(false)
const searchFormData = reactive({}) const searchFormData = reactive({})
const selectedRow = ref(null) const selectedRow = ref(null)
// 弹窗相关 // 弹窗相关
const dialogFlag = ref(false) const editStatusDialogFlag = ref(false)
// 修改状态
const editStatusFormData = ref({})
const editStatusFormRef = ref(null)
const editStatusFormConfig = ref([
{
type: 'select',
prop: 'status',
label: '新单状态',
dictType: 'csf_policy_follow_status'
}, {
type: 'date',
prop: 'policyEffectiveDate',
label: '保单生效日',
}, {
type: 'date',
prop: 'policyInsureDate',
label: '保单核保日',
},
])
// 查看关联记录
const viewRelatedDialogFlag = ref(false)
const relateRecordTableData = ref([])
const viewRelatedDetail = (row) => {
ElMessage.info(`查看关联记录详情：${JSON.stringify(row)}`)
}
// 提交修改状态
const handleEditStatusSubmit = async () => {
try {
await editStatusFormRef.value.validate()
const res = await changePolicyStatus({
policyBizId: selectedRow.value.policyBizId,
...editStatusFormData.value
})
if (res.code === 200) {
ElMessage.success('修改状态成功')
editStatusDialogFlag.value = false
loadTableData()
} else {
ElMessage.error(res.msg || '修改状态失败')
}
} catch (error) {
console.error('修改状态失败', error)
}
}
// 查看详情、更新数据
const viewDetailDialogFlag = ref(false)
const onSubmit = (data) => {
console.log('提交的数据:', data)
// 调用 API 保存
alert('提交成功！')
viewDetailDialogFlag.value = false
}
const handleClose = () => {
// 可选：清空数据
}
// 获取新单状态,字典值转化方法 // 获取新单状态,字典值转化方法
onMounted(async () => { onMounted(async () => {
try { try {
...@@ -210,7 +302,8 @@ const searchConfig = ref([ ...@@ -210,7 +302,8 @@ const searchConfig = ref([
const loadTableData = async () => { const loadTableData = async () => {
loading.value = true loading.value = true
const searchParams = searchFormRef.value.getFormData() || {} searchParams.value = searchFormRef.value.getFormData() || {}
console.log(searchParams.value)
try { try {
const params = { const params = {
...searchParams.value, ...searchParams.value,
...@@ -236,39 +329,89 @@ const loadTableData = async () => { ...@@ -236,39 +329,89 @@ const loadTableData = async () => {
const dropdownItems = [ const dropdownItems = [
{ label: '查看详情', value: 'viewDetail' }, { label: '查看详情', value: 'viewDetail' },
{ label: '更新数据', value: 'updateData' }, { label: '更新数据', value: 'updateData' },
{ label: '生成签单报告', value: 'generateReport' },
{ label: '设置新单状态', value: 'setNewSingleStatus' }, { label: '设置新单状态', value: 'setNewSingleStatus' },
{ label: '查看关联', value: 'viewRelated' }, { label: '查看关联', value: 'viewRelated' },
{ label: '生成签单报告', value: 'generateReport' }, // { label: '查看记录', value: 'viewRecord' },
{ label: '更新记录', value: 'updateRecord' },
] ]
const mode = ref('viewDetail')
const handleSelect = async (e, row) => { const handleSelect = async (e, row) => {
selectedRow.value = { ...row } selectedRow.value = { ...row }
mode.value = e
console.log(e, row) console.log(e, row)
switch (e) { switch (e) {
case 'viewDetail': case 'viewDetail':
ElMessage.info('查看详情') // ElMessage.info('查看详情')
viewDetailDialogFlag.value = true
// viewDetailFormData.value = JSON.parse(JSON.stringify(mockEditData))
// 赋值已有数据（深拷贝避免引用问题）
// Object.assign(formData, JSON.parse(JSON.stringify(mockEditData)))
break break
case 'updateData': case 'updateData':
ElMessage.info('更新数据') ElMessage.info('更新数据')
break break
case 'setNewSingleStatus': case 'setNewSingleStatus':
ElMessage.info('设置新单状态') // ElMessage.info('设置新单状态')
editStatusDialogFlag.value = true
editStatusFormData.value = {
status: row.status
}
break break
case 'viewRelated': case 'viewRelated':
ElMessage.info('查看关联') // ElMessage.info('查看关联')
viewRelatedDialogFlag.value = true
break break
case 'generateReport': case 'generateReport':
ElMessage.info('生成签单报告') generateReport(row)
break break
case 'updateRecord': case 'viewRecord':
ElMessage.info('更新记录') ElMessage.info('查看记录')
break break
default: default:
break break
} }
} }
const generateReport = async (row) => {
if (!selectedRow.value) {
ElMessage.warning('请选择要生成报告的新单')
return
}
try {
const response = await policyFollowReport(row.policyBizId)
// 文件名设置为应收款导出_yyyy-MM-dd hh:mm:ss.xlsx,不需要-，用字符串
const fileName = `签单报告_${new Date().toLocaleString().replace(/\//g, '').replace(/:/g, '').replace(/\s/g, '')}.pdf`
await safeDownload(
response,
fileName,
'application/pdf;charset=utf-8'
)
ElMessage.success('报告生成成功')
// 可以添加下载报告的逻辑
} catch (error) {
ElMessage.error(error.message || '报告生成失败')
}
}
const handleUpdateSubmit = async () => {
if (!selectedRow.value) {
ElMessage.warning('请选择要更新的新单')
return
}
try {
const response = await updatePolicyFollow(selectedRow.value)
ElMessage.success('更新成功')
// 刷新当前页数据
loadTableData()
// 关闭弹窗
viewDetailDialogFlag.value = false
} catch (error) {
ElMessage.error(error.message || '更新失败')
}
}
......
src/views/sign/underwritingMain/policyDetail.vue 0 → 100644
<!-- components/FormPage.vue -->
<template>
<div class="form-page">
<el-form ref="formRef" :model="localData" label-width="120px" size="default">
<!-- Tabs -->
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="基础信息" name="basic"></el-tab-pane>
<el-tab-pane label="首期缴费" name="firstPayment"></el-tab-pane>
<el-tab-pane label="介绍人" name="referrer"></el-tab-pane>
<el-tab-pane label="邮寄信息" name="postal"></el-tab-pane>
<el-tab-pane label="关联记录" name="related"></el-tab-pane>
<el-tab-pane label="附件" name="attachment"></el-tab-pane>
</el-tabs>
<!-- 基础信息 Tab 内容 -->
<div v-if="activeTab === 'basic'" class="tab-content">
<!-- 签单信息 -->
<div class="section">
<h3 class="sectionTitle">基础信息</h3>
<SearchForm ref="basicInfoFormRef" :config="basicInfoFormConfig" v-model="basicInfoFormData" />
</div>
<!-- 保单信息 -->
<div class="section">
<h3 class="sectionTitle">保单信息</h3>
<SearchForm ref="policyInfoFormRef" :config="policyInfoFormConfig" v-model="policyInfoFormData" />
</div>
<!-- 基本计划 -->
<div class="section">
<h3 class="sectionTitle">基本计划</h3>
<SearchForm ref="basicPlanFormRef" :config="basicPlanFormConfig" v-model="basicPlanFormData" />
</div>
<!-- 附加计划（可编辑表格） -->
<div class="section">
<h3 class="sectionTitle">附加计划</h3>
<el-button type="primary" size="default" @click="addAdditionalPlan">+ 新增</el-button>
<el-table :data="localData.additionalPlans || []" style="width: 100%; margin-top: 10px" border>
<el-table-column prop="product" label="产品名称" width="180">
<template #default="{ row }">
<el-input v-model="row.product" size="default" />
</template>
</el-table-column>
<el-table-column prop="frequency" label="付款频率" width="150">
<template #default="{ row }">
<el-select v-model="row.frequency" size="default" placeholder="选择">
<el-option label="月付" value="monthly" />
<el-option label="年付" value="yearly" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="term" label="保障期限" width="150">
<template #default="{ row }">
<el-input v-model="row.term" size="default" />
</template>
</el-table-column>
<el-table-column prop="periods" label="供款期数" width="150">
<template #default="{ row }">
<el-input v-model="row.periods" size="default" />
</template>
</el-table-column>
<el-table-column prop="currency" label="保单币种" width="150">
<template #default="{ row }">
<el-input v-model="row.currency" size="default" />
</template>
</el-table-column>
<el-table-column prop="premium" label="每期保费" width="150">
<template #default="{ row }">
<el-input v-model="row.premium" size="default" />
</template>
</el-table-column>
<el-table-column prop="fee" label="保单征费" width="150">
<template #default="{ row }">
<el-input v-model="row.fee" size="default" />
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="{ $index }">
<el-button size="default" type="danger" @click="deleteRow($index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 其他 Tab 内容 -->
<div v-if="activeTab === 'firstPayment'" class="tab-content">
<!-- 签单信息 -->
<div class="section">
<h3 class="sectionTitle">缴费信息</h3>
<SearchForm ref="firstPremiumFormRef" :config="firstPremiumFormConfig"
v-model="firstPremiumFormData" />
</div>
</div>
<!-- 其他 Tab 占位（你可以按需填充） -->
<div v-else class="tab-placeholder">
<el-empty description="该 Tab 内容待开发" />
</div>
<!-- 底部按钮 -->
<div class="form-footer">
<el-button size="default" @click="handleCancel">取消</el-button>
<el-button type="primary" size="default" @click="handleSubmit">确认</el-button>
</div>
</el-form>
</div>
</template>
<script setup>
import { ref, reactive, watch, nextTick } from 'vue'
import SearchForm from '@/components/SearchForm/SearchForm.vue'
const basicInfoFormRef = ref()
const basicInfoFormData = ref({})
const basicInfoFormConfig = ref([
{
type: 'date',
prop: 'signDate',
label: '签单日',
}, {
type: 'select',
prop: 'currency',
label: '签单员',
dictType: 'bx_currency_type',
}, {
type: 'input',
prop: 'policyNo',
label: '签单员执业编号',
}, {
type: 'select',
prop: 'currency',
label: '签单地点',
dictType: 'bx_currency_type'
},
])
// 保单信息
const policyInfoFormRef = ref()
const policyInfoFormData = ref({})
const policyInfoFormConfig = ref([
{
type: 'date',
prop: 'endDate',
label: '保单号',
}, {
type: 'date',
prop: 'effectiveDate',
label: '保单生效日',
}, {
type: 'date',
prop: 'effectiveDate',
label: '保单截止日',
}, {
type: 'date',
prop: 'underwritingDate',
label: '保单核保日',
}, {
type: 'date',
prop: 'underwritingDate',
label: '保单回执日',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '回执状态',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '是否开通直接支付',
}, {
type: 'input',
prop: 'insurer',
label: '保单持有人',
}, {
type: 'input',
prop: 'insurer',
label: '保单受保人',
}, {
type: 'select',
prop: 'insuranceType',
label: '受保人年龄',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '宽限期',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '是否参加递增保障权益',
},
])
// 基本计划
const basicPlanFormRef = ref()
const basicPlanFormData = ref({})
const basicPlanFormConfig = ref([
{
type: 'select',
prop: 'paymentFrequency',
label: '保险公司',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '保险险种',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '产品名称',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '付款频率',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '保障期限',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '保额（重疾险）',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '供款期数',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '保单币种',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '每期保费',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '保单征费',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '是否预缴',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '是否追溯',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '回溯日期',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '首期付款方式',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '续期付款方式',
}, {
type: 'select',
prop: 'paymentFrequency',
label: '红利付款方式',
},
])
// 首期保费
const firstPremiumFormRef = ref()
const firstPremiumFormData = ref({})
const firstPremiumFormConfig = ref([
{
type: 'input',
prop: 'amount',
label: '首期保费',
inputType: 'decimal',
decimalDigits: 2,
rules: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ pattern: /^\d+(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'blur' }
]
}, {
type: 'input',
prop: 'amount',
label: '保单征费',
inputType: 'decimal',
decimalDigits: 2,
rules: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ pattern: /^\d+(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'blur' }
]
}, {
type: 'select',
prop: 'currency',
label: '首期缴费方式',
dictType: 'bx_currency_type'
}, {
type: 'input',
prop: 'amount',
label: '首期已缴保费',
inputType: 'decimal',
decimalDigits: 2,
rules: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ pattern: /^\d+(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'blur' }
]
}, {
type: 'input',
prop: 'amount',
label: '首期待缴保费',
inputType: 'decimal',
decimalDigits: 2,
rules: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ pattern: /^\d+(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'blur' }
]
}, {
type: 'input',
prop: 'amount',
label: '首期缴费总额',
inputType: 'decimal',
decimalDigits: 2,
rules: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ pattern: /^\d+(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'blur' }
]
}, {
type: 'select',
prop: 'statusList',
label: '缴费状态',
multiple: true,
dictType: 'csf_fortune_status'
}, {
type: 'date',
prop: 'commissionDate',
label: '最晚缴费日',
placeholder: '请选择'
}, {
type: 'textarea',
prop: 'policyNo',
label: '首期保费优惠'
},
])
// ===== Props & Emits =====
const props = defineProps({
modelValue: {
type: Object,
default: () => ({})
}
})
const emit = defineEmits(['update:modelValue', 'submit', 'cancel'])
// ===== 本地响应式数据 =====
const defaultFormData = () => ({
signDate: '',
agentId: '',
location: '',
policyNo: '',
effectiveDate: '',
endDate: '',
underwritingDate: '',
insurer: '',
insuranceType: '',
productName: '',
paymentFrequency: '',
additionalPlans: []
})
// ✅ 使用 ref 而不是 reactive
const localData = ref(defaultFormData())
// ✅ 只在挂载时初始化一次（避免 watch 形成闭环）
onMounted(() => {
if (props.modelValue) {
// 深拷贝 + 合并默认值，防止缺失字段
localData.value = { ...defaultFormData(), ...props.modelValue }
}
})
// ✅ 监听 localData 变化，emit 出去（用于 v-model）
watch(
() => localData.value,
(newVal) => {
emit('update:modelValue', newVal)
},
{ deep: true }
)
// ===== 表单引用 & 验证规则 =====
const formRef = ref()
const activeTab = ref('basic')
// ===== 添加附加险计划方法 =====
const addAdditionalPlan = () => {
localData.additionalPlans.push({
product: '',
frequency: '',
term: '',
periods: '',
currency: '',
premium: '',
fee: ''
})
}
const deleteRow = (index) => {
localData.additionalPlans.splice(index, 1)
}
const handleTabClick = (tab) => {
console.log('切换到 Tab:', tab.name)
}
const handleSubmit = () => {
formRef.value?.validate((valid) => {
if (valid) {
emit('submit', { ...localData })
}
})
}
const handleCancel = () => {
emit('cancel')
}
// 如果外部 modelValue 更新（比如重新加载数据），同步到 localData
watch(
() => props.modelValue,
(newVal) => {
if (newVal) {
Object.assign(localData, defaultFormData(), newVal)
}
},
{ deep: true }
)
</script>
<style scoped>
.form-page {
padding: 10px;
background: #fff;
border-radius: 4px;
padding-top: 0;
}
.tab-placeholder {
padding: 40px 0;
}
.form-footer {
text-align: center;
margin-top: 30px;
}
.sectionTitle {
margin: 0 0 15px 0;
font-size: 16px;
line-height: 1;
position: relative;
padding-left: 16px;
}
.sectionTitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 20px;
background-color: #007bff;
border-radius: 5px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment