Skip to content

Y
yd-csf-front
Commit 4548137e by yuzhenWang
Options

合并test最新分支代码

parent 7f6b6010
Showing with 1142 additions and 704 deletions
src/api/common.js
......@@ -95,3 +95,19 @@ export function getClientUser(data) {
data: data
})
}
// 银行列表
export function getBankList(data) {
return request({
url: '/base/api/bank/page',
method: 'post',
data: data
})
}
// 转介人列表
export function getUserSaleExpandList(data) {
return request({
url: '/insurance/base/api/userSaleExpand/page',
method: 'post',
data: data
})
}
src/api/sign/appointment.js
......@@ -222,3 +222,4 @@ export function delSigleAppointment(appointmentBizId) {
method: 'delete'
})
}
src/formJson/appointmentInfo.js
......@@ -115,7 +115,7 @@ const appointmentInfo = [
moudleType: 'referrerDtoList',
dataLength: 1, //设置dataLength,用于控制子级dom的个数，子级保存一个样例数据，便于加子级数据
showTable: true,
showMoudle: true, //模块是否展示
showMoudle: false, //模块是否展示
addChildren: true, //是否可以新增子级dom
addChildrenTxt: '陪同转介人', //新增按钮得文本
fatherRequired: false, //父级必填,代表个人资料这个模块有必填项
......@@ -268,7 +268,7 @@ const appointmentInfo = [
lg: 8 //栅格布局份数
},
{
label: '开户时间段(止,先选择开始时间)',
label: '开户时间(止)',
key: 'openAccountEndTime',
domType: 'DatePicker',
required: false,
......@@ -330,6 +330,7 @@ const appointmentInfo = [
inputType: 'textarea',
required: false,
maxLength: 300,
rows: 5, //文本域行数
disabled: false,
placeholder: '请输入',
show: true,
......@@ -339,26 +340,42 @@ const appointmentInfo = [
lg: 24 //栅格布局份数
},
{
label: '',
title: '所需资料',
key: 'information',
domType: 'Div',
label: '所需资料',
key: 'materials',
domType: 'Input',
inputType: 'textarea',
required: false,
maxLength: 30,
maxLength: 300,
rows: 5, //文本域行数
disabled: false,
placeholder: '请输入',
show: true,
informationList: [
{ name: '1、身份证' },
{ name: '2、港澳通行证/护照' },
{ name: '3、出生证明（18岁以下受保人）' },
{ name: '4、结婚证（如夫妻为对方支付保费）' },
{ name: '5、通关小白条' }
],
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 24, //栅格布局份数
lg: 24 //栅格布局份数
}
// {
// label: '',
// title: '所需资料',
// key: 'information',
// domType: 'Div',
// required: false,
// maxLength: 30,
// disabled: false,
// placeholder: '请输入',
// show: true,
// informationList: [
// { name: '1、身份证' },
// { name: '2、港澳通行证/护照' },
// { name: '3、出生证明（18岁以下受保人）' },
// { name: '4、结婚证（如夫妻为对方支付保费）' },
// { name: '5、通关小白条' }
// ],
// labelWidth: '120px', //标签宽度
// sm: 24, //栅格布局份数
// lg: 24 //栅格布局份数
// }
]
}
// 业务信息
......
src/formJson/productPlan.js
import { anchorKey } from 'element-plus/es/components/anchor/src/constants.mjs'
const productPlan = [
{
fatherTitle: '',
fatherTitle: '基础信息',
keyType: 'Object', //用于表单收集值时，判断是数组还是对象
key: 'apiProductPlanMainInfoDto',
child: 'no', //有子级dom,需要循环展示
anchorKey: 'apiProductPlanMainInfoDto',
showMoudle: true, //模块是否展示
showTable: false, //是否展示表格
fatherRequired: true, //父级必填,代表个人资料这个模块有必填项
data: [
{
label: '保险公司',
key: 'companyName',
domType: 'SearchSelect',
required: true,
maxLength: 30,
disabled: false,
placeholder: '请输入',
show: true,
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
labelPosition: 'top', //标签的位置
lg: 8 //栅格布局份数
},
{
label: '保险种类',
key: 'insuranceTypeName',
domType: 'SearchSelect',
required: true,
maxLength: 30,
disabled: false,
placeholder: '请输入',
show: true,
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
labelPosition: 'top', //标签的位置
lg: 8 //栅格布局份数
},
{
label: '产品名称',
key: 'productName',
key: 'productLaunchName',
domType: 'SearchSelect',
required: true,
maxLength: 30,
......@@ -22,13 +53,27 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '地区',
key: 'region',
label: '供款期数',
key: 'issueNumber',
domType: 'Select',
required: true,
disabled: false,
placeholder: '请选择',
dictType: 'issueNumber',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保障年期',
key: 'guaranteePeriod',
domType: 'Input',
inputType: 'text',
required: false,
inputType: 'number',
required: true,
maxLength: 20,
disabled: true,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
......@@ -37,8 +82,8 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '货币',
key: 'currency',
label: '保单币种',
key: 'policyCurrency',
domType: 'Select',
required: true,
disabled: false,
......@@ -51,14 +96,14 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '供款年期',
key: 'paymentTerm',
domType: 'Select',
required: true,
label: '保单额度(重疾)',
key: 'sumInsured',
domType: 'Input',
inputType: 'number',
required: false,
maxLength: 20,
disabled: false,
placeholder: '请选择',
dictType: 'paymentTerm',
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
......@@ -95,14 +140,13 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '保额',
key: 'sumInsured',
domType: 'Input',
inputType: 'number',
label: '首期付款方式',
key: 'initialPaymentMethod',
domType: 'Select',
required: false,
maxLength: 20,
disabled: false,
placeholder: '请输入',
placeholder: '请选择',
dictType: 'csf_ap_first_issue',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
......@@ -110,13 +154,14 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '是否预缴保费',
key: 'isPrepay',
domType: 'Select',
label: '保单征费',
key: 'policyLevy',
domType: 'Input',
inputType: 'number',
required: true,
maxLength: 20,
disabled: false,
placeholder: '请选择',
dictType: 'sys_no_yes',
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
......@@ -124,13 +169,13 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '首期付款方式',
key: 'initialPaymentMethod',
label: '是否预缴',
key: 'isPrepay',
domType: 'Select',
required: false,
required: true,
disabled: false,
placeholder: '请选择',
dictType: 'csf_ap_first_issue',
dictType: 'sys_no_yes',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
......@@ -138,13 +183,13 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '续期付款方式',
key: 'renewalPaymentMethod',
label: '是否追溯',
key: 'isTraceable',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
dictType: 'csf_ap_first_issue',
dictType: 'sys_no_yes',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
......@@ -152,13 +197,13 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '红利分配方式',
key: 'dividendDistributionMethod',
label: '保单日期回溯',
key: 'isBacktrack',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
dictType: 'csf_ap_dividend',
dictType: 'sys_no_yes',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
......@@ -166,8 +211,8 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '保单日期回溯',
key: 'isBacktrack',
label: '是否参加递增保障权益',
key: 'isJoin',
domType: 'Select',
required: false,
disabled: false,
......@@ -180,32 +225,62 @@ const productPlan = [
lg: 8 //栅格布局份数
},
{
label: '保单生效日',
key: 'policyEffectiveDate',
domType: 'DatePicker',
label: '红利分配方式',
key: 'dividendDistributionMethod',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
show: false,
dictType: 'csf_ap_dividend',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '是否参加递增保障权益',
key: 'isJoin',
label: '续期付款方式',
key: 'renewalPaymentMethod',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
dictType: 'sys_no_yes',
dictType: 'csf_ap_first_issue',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
}
// {
// label: '地区',
// key: 'region',
// domType: 'Input',
// inputType: 'text',
// required: false,
// maxLength: 20,
// disabled: true,
// placeholder: '请输入',
// show: true,
// labelPosition: 'top', //标签的位置
// labelWidth: '120px', //标签宽度
// sm: 12, //栅格布局份数
// lg: 8 //栅格布局份数
// },
// {
// label: '保单生效日',
// key: 'policyEffectiveDate',
// domType: 'DatePicker',
// required: false,
// disabled: false,
// placeholder: '请选择',
// show: false,
// labelPosition: 'top', //标签的位置
// labelWidth: '120px', //标签宽度
// sm: 12, //栅格布局份数
// lg: 8 //栅格布局份数
// }
]
},
//附加险
......@@ -214,10 +289,11 @@ const productPlan = [
fatherTitle: '附加险',
keyType: 'Array', //用于表单收集值时，判断是数组还是对象
key: 'apiProductPlanAdditionalInfoDtoList',
child: 'yes', //有子级dom,需要循环展示
anchorKey: 'apiProductPlanAdditionalInfoDtoList',
fatherRequired: true, //父级必填,代表个人资料这个模块有必填项
addBtn: true,
emptySpan: 24, //空状态得span
addChildren: true,
addChildrenTxt: '新增附加险',
showTable: true, //是否展示表格
data: [
// {
// id: Date.now() + Math.floor(Math.random() * 1000), //唯一标识
......@@ -347,6 +423,169 @@ const productPlan = [
// }
// ]
// }
],
// 弹窗表单的配置
formItem: [
{
label: '产品名称',
value: '',
key: 'addProductName',
domType: 'SearchSelect',
required: false,
maxLength: 30,
disabled: false,
placeholder: '请输入',
show: true,
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
labelPosition: 'top', //标签的位置
lg: 8 //栅格布局份数
},
{
label: '供款期数',
key: 'paymentTerm',
value: '',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
dictType: 'paymentTerm',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保障年期(若是终身，输入999)',
key: 'sumInsured',
value: '',
domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保单币种',
key: 'currency',
value: '',
domType: 'Select',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
dictType: 'bx_currency_type',
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保单额度(重疾)',
key: 'sumInsured',
value: '',
domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '每期保费',
key: 'premium',
value: '',
domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保障地区',
key: 'guaranteeRegion',
value: '',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保障级别',
value: '',
key: 'insuranceType',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '自付额',
value: '',
key: 'deductibles',
domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '附加保障',
value: '',
key: 'additionalSafeguards',
domType: 'Input',
inputType: 'textarea',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 24, //栅格布局份数
lg: 24 //栅格布局份数
}
]
}
]
......
src/store/modules/dict.js
......@@ -9,7 +9,9 @@ const useDictStore = defineStore('dict', {
insureCompanyList: [], //保险公司数据
clientUserList: [], //用户数据，转介人
dictTypeLists: [], //字典列表，根据请求得不同会变化，所以使用之前需要使用useDictLists请求数据
signNameList: []
signNameList: [],
bankList: [], //银行列表
userSaleExpandList: [] //最新转介人列表
}),
actions: {
// 获取字典
......@@ -84,6 +86,14 @@ const useDictStore = defineStore('dict', {
// 设置签单人姓名列表
setSignNameList(nameList) {
this.signNameList = nameList
},
//设置银行列表
setBankList(list) {
this.bankList = list
},
//设置最新转介人列表
setUserSaleExpandList(list) {
this.userSaleExpandList = list
}
}
})
......
src/views/sign/FnaList/edit.vue
......@@ -128,7 +128,13 @@ import AppointmentEdit from '@/views/sign/appointment/appointmentEdit'
import useUserStore from '@/store/modules/user'
import useDictStore from '@/store/modules/dict'
import { addFna, getProcessDetail, updateProcess, getCustomerDetail } from '@/api/sign/fna'
import { listTenantUser, getInsuranceProductList, getAdditionalProductList } from '@/api/common'
import {
listTenantUser,
getInsuranceProductList,
getAdditionalProductList,
getBankList,
getUserSaleExpandList
} from '@/api/common'
import Customer from './components/customer'
import FanForm from './components/fanForm'
......@@ -246,6 +252,38 @@ const getDictsData = async () => {
})
dictStore.setAdditionalProductList(response3.data.records)
}
const params4 = {
pageNo: 1,
pageSize: 99999
}
const response4 = await getBankList(params4)
if (response4.code == 200) {
response4.data.records = response4.data.records.map(item => {
return {
...item,
label: item.bankName,
value: item.bankBizId
}
})
dictStore.setBankList(response4.data.records)
}
const params5 = {
pageNo: 1,
pageSize: 99999
}
const response5 = await getUserSaleExpandList(params5)
if (response5.code == 200) {
response5.data.records = response5.data.records.map(item => {
return {
...item,
label: item.realName,
value: item.userSaleBizId
}
})
dictStore.setUserSaleExpandList(response5.data.records)
}
// 请求每个流程中所涉及到的字典值数据
proxy.useDictLists([
'csf_employment',
......
src/views/sign/appointment/appointmentEdit.vue
......@@ -111,6 +111,10 @@
@policyEditSuccess="getPolicyDetail"
:pageSource="pageSource"
:showSubmitBtn="showSubmitBtn"
:tabIndex="tabsList.findIndex(t => t.name === 'productPlan')"
anchorContainer=".appointmentTabPaneBox"
:fatherTabName="tabName"
:editStatus="editStatus"
/>
</div>
<div v-if="tab.name === 'policyholder'">
......@@ -330,7 +334,13 @@ import {
uploadExcel
} from '@/api/sign/appointment'
import { getPolicyfollow, getPolicyInfo, signName } from '@/api/sign/underwritingMain'
import { listTenantUser, getInsuranceProductList, getAdditionalProductList } from '@/api/common'
import {
listTenantUser,
getInsuranceProductList,
getAdditionalProductList,
getBankList,
getUserSaleExpandList
} from '@/api/common'
import { Check, Edit } from '@element-plus/icons-vue'
import { ref, nextTick, onUnmounted } from 'vue'
......@@ -381,7 +391,7 @@ const policyNo = ref('') //新单跟进保单号
const currentPolicyholderInfo = ref({}) //存储下投保人信息，受保人模块要用到
const tabsList = ref([
{
label: '预约信息',
label: '签约信息',
name: 'appointmentInfo',
id: 1,
key: 'appointmentBizId'
......@@ -638,17 +648,17 @@ const getDictsData = async () => {
pageSize: 10
}
// const response2 = await getInsuranceProductList(params2)
// if (response2.code == 200) {
// response2.data.records = response2.data.records.map(item => {
// return {
// ...item,
// label: item.productName,
// value: item.productBizId
// }
// })
// dictStore.setInsureProductList(response2.data.records)
// }
const response2 = await getInsuranceProductList(params2)
if (response2.code == 200) {
response2.data.records = response2.data.records.map(item => {
return {
...item,
label: item.productName,
value: item.productBizId
}
})
dictStore.setInsureProductList(response2.data.records)
}
const params3 = {
pageNo: 1,
pageSize: 10
......@@ -665,7 +675,39 @@ const getDictsData = async () => {
})
dictStore.setAdditionalProductList(response3.data.records)
}
const params4 = {
pageNo: 1,
pageSize: 99999
}
const response4 = await getBankList(params4)
if (response4.code == 200) {
response4.data.records = response4.data.records.map(item => {
return {
...item,
label: item.bankName,
value: item.bankBizId
}
})
dictStore.setBankList(response4.data.records)
}
const params5 = {
pageNo: 1,
pageSize: 99999
}
const response5 = await getUserSaleExpandList(params5)
if (response5.code == 200) {
console.log('response5', response5)
response5.data.records = response5.data.records.map(item => {
return {
...item,
label: item.realName,
value: item.userSaleBizId
}
})
dictStore.setUserSaleExpandList(response5.data.records)
}
proxy.useDictLists([
'csf_employment',
'sys_no_yes',
......@@ -764,13 +806,14 @@ const isArray = value => {
const isObject = value => {
return typeof value === 'object' && value !== null && !Array.isArray(value)
}
const handleSubmit = type => {
const handleSubmit = async type => {
// 提交得时候要拿到各个步骤得表单数据
if (appointmentInfoRef.value) {
submitAppointmentObj.value.apiAppointmentInfoDto =
appointmentInfoRef.value[0].handleFormValues()
const result = await appointmentInfoRef.value[0].handleFormValues()
submitAppointmentObj.value.apiAppointmentInfoDto = result
if (!submitAppointmentObj.value.apiAppointmentInfoDto) return
}
if (productPlanRef.value) {
submitAppointmentObj.value.apiProductPlanInfoDto = productPlanRef.value[0].handleSubmitForm()
}
......@@ -952,7 +995,7 @@ watch(
tabsList.value = [
{
label: '预约信息',
label: '签约信息',
name: 'appointmentInfo',
id: 1,
key: 'appointmentBizId'
......@@ -1000,7 +1043,7 @@ watch(
// getAppointmentInfo(idsObj.value.appointmentBizId)
tabsList.value = [
{
label: '预约信息',
label: '签约信息',
name: 'appointmentInfo',
id: 1,
key: 'appointmentBizId'
......
src/views/sign/appointment/components/appointmentInfo.vue
<template>
<div v-if="processedAppointmentData.length > 0">
<div ref="appointmentRef">
<!-- <el-row>
<el-col :span="24">
<div class="topBtn">
<el-button
v-if="props.idsObj.appointmentBizId"
type="primary"
icon="EditPen"
@click="handleEditStatus(!editStatus)"
>编辑</el-button
>
</div>
</el-col>
</el-row> -->
<!-- v-if="customerRightRef" -->
<CommonForm
:anchorList="anchorList"
:affixOffset="360"
......@@ -56,6 +42,7 @@
v-model="form[child.key]"
:placeholder="child.placeholder"
maxlength="30"
:rows="child.rows"
:disabled="editStatus"
/>
<el-select
......@@ -123,7 +110,9 @@
v-if="child.domType === 'SearchSelect'"
filterable
:allow-create="child.allowCreate"
:reserve-keyword="false"
reserve-keyword
@change="handleSelectChange(father, child)"
:remote-method="query => searchSelectList(query, child.key)"
placeholder="请输入关键词搜索"
:loading="searchLoadingStates[child.key]"
:disabled="editStatus"
......@@ -169,6 +158,9 @@
<el-table :data="father.data" border v-if="father.data.length > 0">
<template v-if="father.key == 'referrerDtoList'">
<el-table-column label="姓名" prop="realName" align="center">
<template #header>
<span class="required-label">姓名</span>
</template>
<template #default="scope">
<el-select
v-model="scope.row.realName"
......@@ -176,9 +168,7 @@
remote
reserve-keyword
placeholder="请输入关键词搜索"
:remote-method="
query => searchSelectList(query, 'realName', scope.row)
"
:remote-method="query => searchSelectList(query, 'realName')"
:loading="searchLoadingStates['realName']"
:disabled="editStatus"
>
......@@ -192,9 +182,9 @@
</template>
</el-table-column>
<el-table-column label="手机号" prop="phone" align="center">
<!-- <template #header>
<template #header>
<span class="required-label">手机号</span>
</template> -->
</template>
<template #default="scope">
<el-input
v-model="scope.row.phone"
......@@ -205,9 +195,9 @@
</template>
</el-table-column>
<el-table-column label="邮箱" prop="email" align="center">
<!-- <template #header>
<span class="required-label">手机号</span>
</template> -->
<template #header>
<span class="required-label">邮箱</span>
</template>
<template #default="scope">
<el-input
v-model="scope.row.email"
......@@ -273,6 +263,35 @@
@close="handleCloseDrawer"
@confirmCountry="confirmDrawer"
/>
<!-- <CommonDialog
dialogTitle="签约信息错误提示"
confirmText="下载行程单"
cancleText="关闭"
dialogWidth="70%"
:openDialog="showError"
@close="showError = false"
>
<div class="dialogBox">
<div class="dialogItem" v-for="item in detailData">
<div class="dialogItemTitle">{{ item.title }}</div>
<DetailPanel
:data="item.data"
:row-span="24"
col-gap="10px"
label-width="120px"
row-height="45px"
:show-col-border="true"
/>
</div>
<div class="remarkBOx">
<div class="remarkTitle">备注</div>
<div class="remarkContent" v-if="appointmentSummeryInfo.remark">
{{ appointmentSummeryInfo.remark }}
</div>
<div class="remarkEmpty" v-else>暂无备注</div>
</div>
</div>
</CommonDialog> -->
</div>
</template>
<script setup name="appointmentInfo">
......@@ -286,6 +305,7 @@ import Address from '@/views/components/address'
import { watch, nextTick } from 'vue'
import { getCustomerDetail } from '@/api/sign/fna'
import { editAppointmentInfo, newPolicy } from '@/api/sign/appointment'
import { getBankList, getUserSaleExpandList } from '@/api/common'
import CommonForm from '@/views/components/commonForm'
import CardOne from '@/components/formCard/cardOne'
import useDictStore from '@/store/modules/dict'
......@@ -293,28 +313,27 @@ import useDictStore from '@/store/modules/dict'
const dictStore = useDictStore() //获取字典数据
const props = defineProps({
activeName: { type: String, default: '' }, //tab名称
fatherTabName: { type: String, default: '' }, //一级tab名称
formStatus: { type: String, default: '' }, //父组件状态，新增、修改
idsObj: { type: Object, default: () => ({}) }, //父组件传递过来的id对象
apiAppointmentInfoDto: { type: Object, default: () => ({}) }, //父组件传递过来的预约信息的详情
appointmentStatus: { type: Number }, //父组件传递过来的预约的状态
customerBizId: { type: String, default: '' }, //提交状态，新增、修改
fatherTabName: { type: String, default: '' }, //一级tab名称
anchorContainer: { type: String, default: '' }, //锚点滚动容器
editStatus: { type: Boolean, default: true }, //编辑状态
tabIndex: { type: [String, Number], default: '' } //tab索引
})
const emit = defineEmits(['handleSuccessEdit'])
const { proxy } = getCurrentInstance()
// const { csf_id_type, sys_gender } = proxy.useDict('csf_id_type', 'sys_gender')
const appointmentRef = ref(null)
const anchorList = ref([]) //锚点列表
// const anchorList = ref([]) //锚点列表
const showPhoneDrawer = ref(false) //电话抽屉开关
const showAddressDrawer = ref(false) //地址抽屉开关
const showCountryDrawer = ref(false) //国家/地区抽屉开关
const drawerInfo = ref({}) // 用于存储所有arrowRight类型的输入框输入值
const saveKey = ref({}) // 用于存储当前点击的drawer框返回的对象,修改的时候回显值也要存key
const errorFields = ref([]) // 存储校验失败的字段信息
// const editStatus = ref(true) // 表单是否可编辑,若是修改初始不可编辑
const openList = ref(false) // 客户列表弹窗
const oldObjInfo = ref({}) // 修改时存储原始数据，便于撤销操作
const consultKey = ref({})
......@@ -427,20 +446,52 @@ const deleteChildren = (father, childIndex) => {
processedAppointmentData.value = processedData
}
// 搜索方法
const searchSelectList = async (query, field) => {
const searchSelectList = async (query, key) => {
// 设置该字段的加载状态
searchLoadingStates.value[field.key] = true
searchLoadingStates.value[key] = true
let queryString = query.trim()
try {
// 根据不同的字段key调用不同的API
if (field.key === 'bankName') {
console.log('searchOptions.value[field.key]', searchOptions.value[field.key])
if (key === 'bankName') {
const params4 = {
pageNo: 1,
pageSize: 10,
queryContent: queryString
}
const response4 = await getBankList(params4)
if (response4.code == 200) {
response4.data.records = response4.data.records.map(item => {
return {
...item,
label: item.bankName,
value: item.bankBizId
}
})
searchOptions.value[key] = response4.data.records
}
} else if (key == 'realName') {
const params5 = {
pageNo: 1,
pageSize: 10,
queryContent: queryString
}
const response5 = await getUserSaleExpandList(params5)
if (response5.code == 200) {
response5.data.records = response5.data.records.map(item => {
return {
...item,
label: item.realName,
value: item.userSaleBizId
}
})
searchOptions.value[key] = response5.data.records
}
}
} catch (error) {
console.error(`${field.label} 搜索失败`, error)
searchOptions.value[field.key] = []
console.error(` 搜索失败`, error)
searchOptions.value[key] = []
} finally {
searchLoadingStates.value[field.key] = false
searchLoadingStates.value[key] = false
}
}
const disabledDate = (time, child) => {
......@@ -455,22 +506,7 @@ const disabledDate = (time, child) => {
// 默认禁用今天及今天之前
return inputDate.isBefore(today, 'day') || inputDate.isSame(today, 'day')
break
// case 'arrivalTime':
// // 如果允许选择今天，只禁用今天之前的日期
// return inputDate.isBefore(today, 'day')
// break
// case 'departureTime':
// // 获取开始日期（需要从表单数据中获取）
// const startTime1 = form.value.arrivalTime
// if (startTime1) {
// const arrivalDate = dayjs(startTime1).startOf('day')
// // 只禁用到达日期之前的日期，允许选择同一天
// return inputDate.isBefore(arrivalDate, 'day')
// } else {
// // 如果没有选择到达时间，禁用今天之前的日期
// return inputDate.isBefore(today, 'day')
// }
// break
case 'confirmAppointmentTime':
return inputDate.isBefore(today, 'day')
break
......@@ -549,51 +585,6 @@ const handleDateChange = child => {
} else if (child.key === 'confirmAppointmentTime' && form.value[child.key]) {
resetShow({ type: 'child', key: 'newPolicyButton', status: true, flag: 'show' })
}
// if (child.key === 'confirmAppointmentTime' && form.value[child.key]) {
// if (form.value['arrivalTime']) {
// const appointmentTimestamp = dayjs(form.value['confirmAppointmentTime']).valueOf()
// const arrivalTimestamp = dayjs(form.value['arrivalTime']).valueOf()
// if (appointmentTimestamp < arrivalTimestamp) {
// proxy.$modal.msgError('预约时间早于到港时间,请重新选择预约时间')
// form.value['confirmAppointmentTime'] = ''
// return
// } else if (appointmentTimestamp > arrivalTimestamp) {
// } else {
// proxy.$modal.msgError('预约时间应晚于到港时间,请重新选择预约时间')
// form.value['confirmAppointmentTime'] = ''
// return
// }
// }
// resetShow({ type: 'child', key: 'newPolicyButton', status: true, flag: 'show' })
// } else if (child.key === 'confirmAppointmentTime' && !form.value[child.key]) {
// resetShow({ type: 'child', key: 'newPolicyButton', status: false, flag: 'show' })
// } else if (child.key === 'arrivalTime') {
// if (form.value['confirmAppointmentTime']) {
// const appointmentTimestamp = dayjs(form.value['confirmAppointmentTime']).valueOf()
// const arrivalTimestamp = dayjs(form.value['arrivalTime']).valueOf()
// if (appointmentTimestamp < arrivalTimestamp) {
// proxy.$modal.msgError('预约时间早于到港时间,请重新选择到港时间')
// form.value['arrivalTime'] = ''
// form.value['departureTime'] = ''
// resetShow({ type: 'child', key: 'departureTime', status: true, flag: 'disabled' })
// } else if (appointmentTimestamp > arrivalTimestamp) {
// console.log('预约时间晚于到港时间')
// } else {
// proxy.$modal.msgError('到港时间应早于预约时间,请重新选择到港时间')
// form.value['arrivalTime'] = ''
// form.value['departureTime'] = ''
// resetShow({ type: 'child', key: 'departureTime', status: true, flag: 'disabled' })
// }
// }
// } else if (child.key === 'confirmAppointmentTime') {
// if (form.value['arrivalTime']) {
// const appointmentTimestamp = dayjs(form.value['confirmAppointmentTime']).valueOf()
// const arrivalTimestamp = dayjs(form.value['arrivalTime']).valueOf()
// console.log('appointmentTimestamp', appointmentTimestamp)
// console.log('arrivalTimestamp', arrivalTimestamp)
// }
// }
}
// 获取字典数据
const fetchDictData = dictType => {
......@@ -629,15 +620,10 @@ const validateEnglish = (rule, value, callback) => {
// 处理表单配置，添加字典数据
const processFormData = async () => {
anchorList.value = []
// 深拷贝原始数据
const processedData = JSON.parse(JSON.stringify(appointmentDomData))
for (const section of processedData) {
if (section.showMoudle) {
anchorList.value.push({ title: section.anchorKey, name: section.fatherTitle })
}
if (section.data) {
for (const field of section.data) {
if (section.key == 'openAccount') {
......@@ -651,7 +637,10 @@ const processFormData = async () => {
field.options = fetchDictData(field.dictType)
}
if (field.key == 'bankName') {
searchOptions.value[field.key] = fetchDictData(field.dictType)
searchOptions.value[field.key] = dictStore.bankList
}
if (field.key == 'realName') {
searchOptions.value[field.key] = dictStore.userSaleExpandList
}
if (field.required) {
if (field.key === 'firstNamePinyin') {
......@@ -673,7 +662,8 @@ const processFormData = async () => {
// editStatus.value = true
setFormValue(props.apiAppointmentInfoDto, processedData)
} else {
// editStatus.value = false
// 新增给默认值
form.value['isReferrerAccompany'] = form.value['isOpenAccount'] = form.value['isUseCar'] = 0
processedAppointmentData.value = processedData
}
}
......@@ -813,12 +803,12 @@ const resetShow = obj => {
}
const handleSelectChange = (father, child) => {
switch (child.key) {
case 'isAccompany':
case 'isReferrerAccompany':
// 选择吸烟，展示吸烟数量
if (form.value[child.key] == '1') {
resetShow({ type: 'father', key: 'consult', status: true })
resetShow({ type: 'father', key: 'referrerDtoList', status: true })
} else {
resetShow({ type: 'father', key: 'consult', status: false })
resetShow({ type: 'father', key: 'referrerDtoList', status: false })
}
break
......@@ -829,6 +819,23 @@ const handleSelectChange = (father, child) => {
} else {
resetShow({ type: 'father', key: 'openAccount', status: false })
}
break
case 'bankName':
// 选择吸烟，展示吸烟数量
if (form.value[child.key]) {
if (
searchOptions.value[child.key].findIndex(item => item.value == form.value[child.key]) !==
-1
) {
searchOptions.value[child.key].forEach(item => {
if (item.value == form.value[child.key]) {
form.value['materials'] = item.materials
}
})
} else {
form.value['materials'] = ''
}
}
break
......@@ -893,9 +900,9 @@ const setFormValue = (obj, formData) => {
} else {
field.disabled = false
}
if (field.key == 'bankName') {
searchOptions.value[field.key] = fetchDictData(field.dictType)
}
// if (field.key == 'bankName') {
// searchOptions.value[field.key] = fetchDictData(field.dictType)
// }
// 处理时间
if (field.key == 'openAccountEndTime' && obj[field.key]) {
// 开始时间是否在结束时间之前
......@@ -1037,111 +1044,133 @@ const getInvalidFields = fields => {
return errors
}
// 处理表单填写得数据
const handleFormValues = () => {
let submitObj = { ...form.value }
const pattern = /Time$/ // 以Time结尾
return new Promise(resolve => {
let submitObj = { ...form.value }
const pattern = /Time$/
//处理表单数据
for (const key1 in form.value) {
// 不开户去除开户相关信息
if (key1 == 'isOpenAccount' && form.value[key1] === 0) {
for (const key4 in openAccountKey.value) {
delete submitObj[key4]
}
}
// 没顾问去除顾问相关信息
if (key1 == 'isAccompany' && form.value[key1] === 0) {
for (const key5 in consultKey.value) {
delete submitObj[key5]
}
}
if (pattern.test(key1) && form.value[key1]) {
submitObj[key1] = proxy.formatToDateTime(form.value[key1])
}
for (const key2 in saveKey.value) {
//要判断drawerType
switch (saveKey.value[key2].objType) {
case 'phone':
if (key1 == key2) {
for (const key3 in saveKey.value[key2]) {
submitObj[key3] = saveKey.value[key2][key3]
proxy.$refs['appointmentInfoFormRef'].validate((valid, fields) => {
if (valid) {
errorFields.value = [] // 清空错误信息
//处理表单数据
for (const key1 in form.value) {
// 不开户去除开户相关信息
if (key1 == 'isOpenAccount' && form.value[key1] == 0) {
for (const key4 in openAccountKey.value) {
delete submitObj[key4]
}
}
break
case 'address':
if (key1 == key2) {
addressList.push(saveKey.value[key2])
}
break
case 'country':
if (key1 == key2) {
submitObj['country'] = saveKey.value[key2]['countryCode']
submitObj['countryName'] = saveKey.value[key2]['name']
if (pattern.test(key1) && form.value[key1]) {
submitObj[key1] = proxy.formatToDateTime(form.value[key1])
}
break
default:
break
}
}
}
if (submitObj['departureTime']) {
// 开始时间是否在结束时间之前
if (
submitObj['arrivalTime'] &&
!dayjs(submitObj['arrivalTime']).isBefore(dayjs(submitObj['departureTime']))
) {
proxy.$message.error('预约信息模块--离港时间必须晚于到港时间！！')
return undefined
}
}
// 处理电话和地址相关的
for (const key2 in saveKey.value) {
//要判断drawerType
switch (saveKey.value[key2].objType) {
case 'phone':
if (key1 == key2) {
for (const key3 in saveKey.value[key2]) {
submitObj[key3] = saveKey.value[key2][key3]
}
}
return submitObj
}
// 表单提交
const submitForm = () => {
// return
proxy.$refs['appointmentInfoFormRef'].validate((valid, fields) => {
if (valid) {
let submitObj = handleFormValues()
console.log('====================================')
console.log('submitObj', submitObj)
console.log('====================================')
// return
if (!submitObj) return
if (props.idsObj.appointmentBizId) {
editAppointmentInfo(submitObj).then(res => {
if (res.code == 200) {
handleEditStatus(true)
proxy.$message.success('预约信息修改成功')
emit('handleSuccessEdit')
break
case 'address':
if (key1 == key2) {
addressList.push(saveKey.value[key2])
}
break
case 'country':
if (key1 == key2) {
submitObj['country'] = saveKey.value[key2]['countryCode']
submitObj['countryName'] = saveKey.value[key2]['name']
}
break
default:
break
}
}
}
if (submitObj['bankName']) {
searchOptions.value['bankName'].forEach(item => {
if (submitObj['bankName'] == item.bankBizId) {
submitObj['bankName'] = item.bankName
}
})
}
if (submitObj['departureTime']) {
// 开始时间是否在结束时间之前
if (
submitObj['arrivalTime'] &&
!dayjs(submitObj['arrivalTime']).isBefore(dayjs(submitObj['departureTime']))
) {
errorFields.value.push({
message: '预约信息模块--离港时间必须晚于到港时间！！'
})
return undefined
}
}
let obj = {
realName: '转介人姓名',
phone: '转介人手机',
email: '转介人邮箱'
}
processedAppointmentData.value.forEach(item => {
if (item.key == 'referrerDtoList') {
if (form.value['isReferrerAccompany'] == 1 && item.data.length > 0) {
submitObj['referrerDtoList'] = item.data.map((item1, index) => {
if (item1.realName) {
searchOptions.value['realName'].forEach(item2 => {
if (item1.realName == item2.userSaleBizId) {
item1.realName = item2.realName
}
})
}
for (const key in item1) {
if (!item1[key]) {
errorFields.value.push({
message: `第${index + 1}行${obj[key]}不能为空`
})
}
}
return {
realName: item1.realName,
phone: item1.phone,
email: item1.email
}
})
} else if (form.value['isReferrerAccompany'] == 1 && item.data.length == 0) {
errorFields.value.push({
message: '预约信息模块--转介人陪同时，陪同转介人信息不能为空！！'
})
}
}
})
if (errorFields.value.length > 0) {
proxy.$message.error(errorFields.value[0].message)
}
resolve(errorFields.value.length == 0 ? submitObj : null)
} else {
errorFields.value = getInvalidFields(fields)
if (errorFields.value.length > 0) {
proxy.$message.error(errorFields.value[0].message)
}
resolve(undefined)
}
errorFields.value = [] // 清空错误信息
} else {
// 获取校验失败的字段信息
errorFields.value = getInvalidFields(fields)
if (errorFields.value.length > 0) {
proxy.$message.error(errorFields.value[0].message)
}
}
})
}
const resetForm = () => {
proxy.$modal
.confirm('是否确认撤销所作操作？')
.then(function () {
form.value = { ...oldObjInfo.value }
editStatus.value = true
processedAppointmentData.value = JSON.parse(JSON.stringify(oldAppointmentData.value))
proxy.$refs['appointmentInfoFormRef'].resetFields()
})
.catch(() => {})
})
}
const anchorList = computed(() => {
let data = []
for (const section of processedAppointmentData.value) {
if (section.showMoudle) {
data.push({ title: section.anchorKey, name: section.fatherTitle })
}
}
return data
})
watch(
() => props.activeName,
newVal => {
......@@ -1178,6 +1207,11 @@ defineExpose({
})
</script>
<style lang="scss" scoped>
.required-label::before {
content: '*';
color: #f56c6c;
margin-right: 4px;
}
.domEmpty {
width: 100%;
height: 100%;
......
src/views/sign/appointment/components/productPlan.vue
<template>
<div>
<div v-if="processedProductData.length > 0">
<el-row>
<div v-if="processedProductData.length > 0">
<div ref="productRef">
<!-- <el-row>
<el-col :span="24">
<div class="topBtn">
<!-- v-if="props.idsObj.appointmentBizId" -->
<el-button
v-if="props.showSubmitBtn"
type="primary"
......@@ -14,211 +13,249 @@
>
</div>
</el-col>
</el-row>
<el-form ref="productFormRef" :model="form" :rules="rules">
<el-row v-for="father in processedProductData" style="margin-bottom: 10px">
<div class="formBox formFna">
<div class="fatherLable">
<span>{{ father.fatherTitle }}</span>
<el-button
style="margin-left: 10px"
v-if="father.addBtn"
type="primary"
icon="Plus"
@click="addChildren(father)"
size="small"
:disabled="editStatus"
>新增</el-button
>
</div>
<div class="subTitle" v-if="father.subTitle">{{ father.subTitle }}</div>
<el-row v-if="father.child == 'no'" :gutter="20">
<template v-for="child in father.data" :key="child.key">
<el-col :sm="child.sm" :lg="child.lg" class="formItem" v-if="child.show">
<div>
<el-form-item
:label="child.label"
:prop="father.key + '.' + child.key"
:key="child.key"
:label-width="child.labelWidth"
:label-position="child.labelPosition"
>
<el-input
v-if="child.domType === 'Input'"
:type="child.inputType"
v-model="form[father.key][child.key]"
:placeholder="child.placeholder"
maxlength="30"
:disabled="child.disabled"
:style="{ width: child.inputWidth ? child.inputWidth : '100%' }"
/>
<el-select
v-if="child.domType === 'Select'"
v-model="form[father.key][child.key]"
:placeholder="child.placeholder"
@change="handleSelectChange(father, child)"
:disabled="child.disabled"
>
<el-option
v-for="item in child.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-date-picker
style="width: 100%"
v-if="child.domType === 'DatePicker'"
v-model="form[father.key][child.key]"
type="date"
:placeholder="child.placeholder"
:disabled="child.disabled"
/>
<el-checkbox-group
v-if="child.domType === 'Checkbox'"
v-model="form[father.key][child.key]"
:disabled="child.disabled"
>
<el-checkbox
v-for="item in child.options"
:key="item.value"
:label="item.value"
</el-row> -->
<CommonForm
:anchorList="anchorList"
:affixOffset="360"
:anchorOffset="10"
:scrollContainerSelector="anchorContainer"
:scrollOffset="10"
:domIndex="tabIndex"
:activeName="activeName"
v-if="productRef"
>
<template #form-right>
<el-form ref="productFormRef" :model="form" :rules="rules">
<el-row
v-for="father in processedProductData"
style="margin-bottom: 10px"
:id="father.anchorKey"
>
<div class="formBox formFna">
<CardOne :title="father.fatherTitle">
<template #content>
<el-row v-if="!father.showTable" :gutter="20">
<template v-for="child in father.data" :key="child.key">
<el-col :sm="child.sm" :lg="child.lg" class="formItem" v-if="child.show">
<div>
<el-form-item
:label="child.label"
:prop="father.key + '.' + child.key"
:key="child.key"
:label-width="child.labelWidth"
:label-position="child.labelPosition"
>
<el-input
v-if="child.domType === 'Input'"
:type="child.inputType"
v-model="form[father.key][child.key]"
:placeholder="child.placeholder"
maxlength="30"
:disabled="editStatus"
:style="{ width: child.inputWidth ? child.inputWidth : '100%' }"
/>
<el-select
v-if="child.domType === 'Select'"
v-model="form[father.key][child.key]"
:placeholder="child.placeholder"
@change="handleSelectChange(father, child)"
:disabled="editStatus"
>
<el-option
v-for="item in child.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-date-picker
style="width: 100%"
v-if="child.domType === 'DatePicker'"
v-model="form[father.key][child.key]"
type="date"
:placeholder="child.placeholder"
:disabled="editStatus"
/>
<el-checkbox-group
v-if="child.domType === 'Checkbox'"
v-model="form[father.key][child.key]"
:disabled="editStatus"
>
<el-checkbox
v-for="item in child.options"
:key="item.value"
:label="item.value"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
<el-select
v-model="form[father.key][child.key]"
v-if="child.domType === 'SearchSelect'"
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索"
:remote-method="query => searchSelectList(query, child.key)"
:loading="searchLoadingStates[child.key]"
:disabled="editStatus"
@change="handleSearchSelectChange(father, child)"
>
<el-option
v-for="item in searchOptions[child.key] || []"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</div>
</el-col>
</template>
</el-row>
<!-- 是表格数据 -->
<el-row v-if="father.showTable">
<el-col :span="24" v-if="father.addChildren">
<el-button
:disabled="editStatus"
type="primary"
icon="Plus"
size="small"
style="margin-bottom: 10px"
@click="addChildren(father, scope.$index)"
>{{ father.addChildrenTxt }}</el-button
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
<el-select
v-model="form[father.key][child.key]"
v-if="child.domType === 'SearchSelect'"
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索"
:remote-method="query => searchSelectList(query, child.key)"
:loading="searchLoadingStates[child.key]"
:disabled="child.disabled"
@change="handleSearchSelectChange(father, child)"
>
<el-option
v-for="item in searchOptions[child.key] || []"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</div>
</el-col>
</template>
</el-col>
<el-table :data="father.data" border v-if="father.data.length > 0">
<template v-if="father.key == 'apiProductPlanAdditionalInfoDtoList'">
<el-table-column label="姓名" prop="realName" align="center" />
<el-table-column width="60px" align="center" label="操作">
<template #default="scope">
<el-icon
class="deleteIcon"
@click="deleteChildren(father, scope.$index)"
><Delete
/></el-icon>
</template>
</el-table-column>
</template>
</el-table>
</el-row>
<!-- 有子孙的dom -->
<!-- <el-row v-if="father.child == 'yes' && father.data.length > 0" :gutter="20">
<template v-for="(child, childIndex) in father.data" :key="child.id">
<el-col :span="child.span">
<div
class="childLabel"
v-if="father.key == 'apiProductPlanAdditionalInfoDtoList'"
@click="deleteChildren(father, childIndex)"
>
<span>{{ `${child.childTitle}-${childIndex + 1}` }}</span>
<el-icon
v-if="child.deleteBtn"
style="color: red; font-size: 18px; margin-left: 10px"
><Delete
/></el-icon>
</div>
</el-col>
<template v-for="grandchildren in child.children" :key="grandchildren.key">
<el-col
:sm="grandchildren.sm"
:lg="grandchildren.lg"
class="formItem"
v-if="
grandchildren.show && form[father.key] && form[father.key][childIndex]
"
>
<el-form-item
:label="grandchildren.label"
:prop="grandchildren.key"
:key="grandchildren.key"
:label-width="grandchildren.labelWidth"
:label-position="grandchildren.labelPosition"
>
<el-input
v-if="grandchildren.domType === 'Input'"
:type="grandchildren.inputType"
v-model="form[father.key][childIndex][grandchildren.key]"
:placeholder="grandchildren.placeholder"
maxlength="30"
:disabled="grandchildren.disabled"
/>
<el-select
v-if="grandchildren.domType === 'Select'"
v-model="form[father.key][childIndex][grandchildren.key]"
:placeholder="grandchildren.placeholder"
:disabled="grandchildren.disabled"
>
<el-option
v-for="item in grandchildren.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-date-picker
style="width: 100%"
v-if="grandchildren.domType === 'DatePicker'"
v-model="form[father.key][childIndex][grandchildren.key]"
type="date"
:placeholder="grandchildren.placeholder"
:disabled="grandchildren.disabled"
/>
<el-select
v-model="form[father.key][childIndex][grandchildren.key]"
v-if="grandchildren.domType === 'SearchSelect'"
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索"
:remote-method="query => searchSelectList(query, grandchildren.key)"
:loading="searchLoadingStates[grandchildren.key]"
:disabled="grandchildren.disabled"
>
<el-option
v-for="item in searchOptions[grandchildren.key] || []"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</template>
</template>
</el-row> -->
</template>
</CardOne>
</div>
</el-row>
<!-- 有子孙的dom -->
<el-row v-if="father.child == 'yes' && father.data.length > 0" :gutter="20">
<template v-for="(child, childIndex) in father.data" :key="child.id">
<el-col :span="child.span">
<div
class="childLabel"
v-if="father.key == 'apiProductPlanAdditionalInfoDtoList'"
@click="deleteChildren(father, childIndex)"
>
<span>{{ `${child.childTitle}-${childIndex + 1}` }}</span>
<el-icon
v-if="child.deleteBtn"
style="color: red; font-size: 18px; margin-left: 10px"
><Delete
/></el-icon>
</div>
</el-col>
<template v-for="grandchildren in child.children" :key="grandchildren.key">
<el-col
:sm="grandchildren.sm"
:lg="grandchildren.lg"
class="formItem"
v-if="grandchildren.show && form[father.key] && form[father.key][childIndex]"
<el-row v-if="props.showSubmitBtn">
<el-col>
<div class="tabButton">
<el-button
type="success"
icon="Check"
@click="submitForm()"
size="large"
:disabled="editStatus"
>保存</el-button
>
<el-form-item
:label="grandchildren.label"
:prop="grandchildren.key"
:key="grandchildren.key"
:label-width="grandchildren.labelWidth"
:label-position="grandchildren.labelPosition"
>
<el-input
v-if="grandchildren.domType === 'Input'"
:type="grandchildren.inputType"
v-model="form[father.key][childIndex][grandchildren.key]"
:placeholder="grandchildren.placeholder"
maxlength="30"
:disabled="grandchildren.disabled"
/>
<!-- 下拉框 -->
<el-select
v-if="grandchildren.domType === 'Select'"
v-model="form[father.key][childIndex][grandchildren.key]"
:placeholder="grandchildren.placeholder"
:disabled="grandchildren.disabled"
>
<el-option
v-for="item in grandchildren.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-date-picker
style="width: 100%"
v-if="grandchildren.domType === 'DatePicker'"
v-model="form[father.key][childIndex][grandchildren.key]"
type="date"
:placeholder="grandchildren.placeholder"
:disabled="grandchildren.disabled"
/>
<!-- 搜索下拉框 -->
<el-select
v-model="form[father.key][childIndex][grandchildren.key]"
v-if="grandchildren.domType === 'SearchSelect'"
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索"
:remote-method="query => searchSelectList(query, grandchildren.key)"
:loading="searchLoadingStates[grandchildren.key]"
:disabled="grandchildren.disabled"
>
<el-option
v-for="item in searchOptions[grandchildren.key] || []"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</template>
</template>
</div>
</el-col>
</el-row>
</div>
</el-row>
<el-row v-if="props.showSubmitBtn">
<el-col>
<div class="tabButton">
<el-button
type="success"
icon="Check"
@click="submitForm()"
size="large"
:disabled="editStatus"
>保存</el-button
>
</div>
</el-col>
</el-row>
</el-form>
</el-form>
</template>
</CommonForm>
</div>
</div>
</template>
<script setup name="customer">
import CommonForm from '@/views/components/commonForm'
import CardOne from '@/components/formCard/cardOne'
import useDictStore from '@/store/modules/dict'
import productDomData from '@/formJson/productPlan'
import { watch } from 'vue'
......@@ -240,14 +277,19 @@ const props = defineProps({
pageSource: { type: String, default: '' }, //页面来源
idsObj: { type: Object, default: () => ({}) }, //父组件传递过来的id对象
apiProductPlanInfoDto: { type: Object, default: () => ({}) }, //父组件传递过来的预约信息的详情
appointmentStatus: { type: Number } //父组件传递过来的预约的状态
appointmentStatus: { type: Number }, //父组件传递过来的预约的状态
fatherTabName: { type: String, default: '' }, //一级tab名称
anchorContainer: { type: String, default: '' }, //锚点滚动容器
editStatus: { type: Boolean, default: true }, //编辑状态
tabIndex: { type: [String, Number], default: '' } //tab索引
})
const emit = defineEmits(['handleSuccessEdit', 'policyEditSuccess'])
const { proxy } = getCurrentInstance()
// const { sys_no_yes } = proxy.useDict('sys_no_yes')
const saveKey = ref({}) // 用于存储当前点击的drawer框返回的对象,修改的时候回显值也要存key
const productRef = ref(null) // 用于存储当前点击的drawer框返回的对象,修改的时候回显值也要存key
const errorFields = ref([]) // 存储校验失败的字段信息
const editStatus = ref(true) // 表单是否可编辑,若是修改初始不可编辑
const anchorList = ref([]) // 存储校验失败的字段信息
// const editStatus = ref(true) // 表单是否可编辑,若是修改初始不可编辑
const openList = ref(false) // 客户列表弹窗
const oldObjInfo = ref({}) // 修改时存储原始数据，便于撤销操作
const currencyType = ref([]) // 是否列表
......@@ -266,17 +308,207 @@ const data = reactive({
}
})
const { form, rules, processedProductData, queryParams, oldProductDomData, tempForm } = toRefs(data)
const resetForm = () => {
proxy.$modal
.confirm('是否确认撤销所作操作？')
.then(function () {
form.value = { ...oldObjInfo.value }
editStatus.value = true
processedProductData.value = JSON.parse(JSON.stringify(oldProductDomData.value))
proxy.$refs['productFormRef'].resetFields()
// 添加表单子级dom
const addChildren = father => {
if (editStatus.value) {
proxy.$message.warning('请先点击编辑')
return
}
return
const processedData = JSON.parse(JSON.stringify(processedProductData.value))
let obj = {
// id: Date.now() + Math.floor(Math.random() * 1000), //唯一标识
span: 24, //栅格布局份数
childTitle: '附加险',
deleteBtn: true,
children: [
{
label: '产品名称',
key: 'addProductName',
domType: 'SearchSelect',
required: true,
maxLength: 30,
disabled: false,
placeholder: '请输入',
show: true,
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
labelPosition: 'top', //标签的位置
lg: 8 //栅格布局份数
},
{
label: '保额',
key: 'sumInsured',
domType: 'Input',
inputType: 'number',
required: true,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保费',
key: 'premium',
domType: 'Input',
inputType: 'number',
required: true,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保障地区',
key: 'guaranteeRegion',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '货币',
key: 'currency',
domType: 'Select',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
dictType: 'bx_currency_type',
options: fetchDictData('bx_currency_type'),
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '等级',
key: 'insuranceType',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '自付额',
key: 'deductibles',
domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '附加保障',
key: 'additionalSafeguards',
domType: 'Input',
inputType: 'textarea',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 24, //栅格布局份数
lg: 24 //栅格布局份数
}
]
}
for (const section of processedData) {
if (father.key == 'apiProductPlanAdditionalInfoDtoList' && section.key == father.key) {
section.data.push(obj)
}
}
//更新form表单对应的数据，以便收集填写的值
form.value[father.key].push(obj)
processedProductData.value = processedData
}
const deleteChildren = (father, childIndex) => {
if (editStatus.value) {
proxy.$message.warning('编辑状态下才能删除')
return
}
return
const processedData = JSON.parse(JSON.stringify(processedProductData.value))
if (
props.idsObj.appointmentBizId &&
form.value[father.key][childIndex].additionalBizId &&
(props.pageSource == 'appointmentList' || props.pageSource == 'fnaList')
) {
delAdditional(form.value[father.key][childIndex].additionalBizId).then(res => {
if (res.code == 200) {
proxy.$message.success('附加险删除成功')
for (const section of processedData) {
if (father.key == 'apiProductPlanAdditionalInfoDtoList' && section.key == father.key) {
section.data.splice(childIndex, 1)
}
}
//更新form表单对应的数据，以便收集填写的值
form.value[father.key].splice(childIndex, 1)
emit('handleSuccessEdit')
}
})
} else if (
props.idsObj.policyBizId &&
form.value[father.key][childIndex].id &&
props.pageSource == 'policyList'
) {
delPolicyAdditional(form.value[father.key][childIndex].id).then(res => {
if (res.code == 200) {
proxy.$message.success('附加险删除成功')
for (const section of processedData) {
if (father.key == 'apiProductPlanAdditionalInfoDtoList' && section.key == father.key) {
section.data.splice(childIndex, 1)
}
}
//更新form表单对应的数据，以便收集填写的值
form.value[father.key].splice(childIndex, 1)
emit('policyEditSuccess')
}
})
} else {
for (const section of processedData) {
if (father.key == 'apiProductPlanAdditionalInfoDtoList' && section.key == father.key) {
section.data.splice(childIndex, 1)
}
}
//更新form表单对应的数据，以便收集填写的值
form.value[father.key].splice(childIndex, 1)
}
.catch(() => {})
processedProductData.value = processedData
}
const handleSearchSelectChange = (father, child) => {
let productItem = dictStore.insureProductList.filter(item => {
......@@ -383,6 +615,7 @@ const processFormData = async () => {
const processedData = JSON.parse(JSON.stringify(productDomData))
for (const section of processedData) {
anchorList.value.push({ title: section.anchorKey, name: section.fatherTitle })
if (section.fatherRequired) {
rules.value[section.key] = {}
}
......@@ -470,7 +703,7 @@ const processFormData = async () => {
// idsObj.appointmentBizId
// 证明是修改
if (props.showSubmitBtn) {
editStatus.value = true
// editStatus.value = true
// processedProductData.value = processedData
//在流程和预约的时候要调用这个方法回显修改数据
console.log('====================================')
......@@ -478,210 +711,11 @@ const processFormData = async () => {
console.log('====================================')
setFormValue(props.apiProductPlanInfoDto, processedData)
} else {
editStatus.value = false
// editStatus.value = false
processedProductData.value = processedData
}
}
// 添加表单子级dom
const addChildren = father => {
if (editStatus.value) {
proxy.$message.warning('请先点击编辑')
return
}
const processedData = JSON.parse(JSON.stringify(processedProductData.value))
let obj = {
// id: Date.now() + Math.floor(Math.random() * 1000), //唯一标识
span: 24, //栅格布局份数
childTitle: '附加险',
deleteBtn: true,
children: [
{
label: '产品名称',
key: 'addProductName',
domType: 'SearchSelect',
required: true,
maxLength: 30,
disabled: false,
placeholder: '请输入',
show: true,
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
labelPosition: 'top', //标签的位置
lg: 8 //栅格布局份数
},
{
label: '保额',
key: 'sumInsured',
domType: 'Input',
inputType: 'number',
required: true,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保费',
key: 'premium',
domType: 'Input',
inputType: 'number',
required: true,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '保障地区',
key: 'guaranteeRegion',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '货币',
key: 'currency',
domType: 'Select',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
dictType: 'bx_currency_type',
options: fetchDictData('bx_currency_type'),
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '等级',
key: 'insuranceType',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '自付额',
key: 'deductibles',
domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 12, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '附加保障',
key: 'additionalSafeguards',
domType: 'Input',
inputType: 'textarea',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 24, //栅格布局份数
lg: 24 //栅格布局份数
}
]
}
for (const section of processedData) {
if (father.key == 'apiProductPlanAdditionalInfoDtoList' && section.key == father.key) {
section.data.push(obj)
}
}
//更新form表单对应的数据，以便收集填写的值
form.value[father.key].push(obj)
processedProductData.value = processedData
}
const deleteChildren = (father, childIndex) => {
if (editStatus.value) {
proxy.$message.warning('编辑状态下才能删除')
return
}
const processedData = JSON.parse(JSON.stringify(processedProductData.value))
if (
props.idsObj.appointmentBizId &&
form.value[father.key][childIndex].additionalBizId &&
(props.pageSource == 'appointmentList' || props.pageSource == 'fnaList')
) {
delAdditional(form.value[father.key][childIndex].additionalBizId).then(res => {
if (res.code == 200) {
proxy.$message.success('附加险删除成功')
for (const section of processedData) {
if (father.key == 'apiProductPlanAdditionalInfoDtoList' && section.key == father.key) {
section.data.splice(childIndex, 1)
}
}
//更新form表单对应的数据，以便收集填写的值
form.value[father.key].splice(childIndex, 1)
emit('handleSuccessEdit')
}
})
} else if (
props.idsObj.policyBizId &&
form.value[father.key][childIndex].id &&
props.pageSource == 'policyList'
) {
delPolicyAdditional(form.value[father.key][childIndex].id).then(res => {
if (res.code == 200) {
proxy.$message.success('附加险删除成功')
for (const section of processedData) {
if (father.key == 'apiProductPlanAdditionalInfoDtoList' && section.key == father.key) {
section.data.splice(childIndex, 1)
}
}
//更新form表单对应的数据，以便收集填写的值
form.value[father.key].splice(childIndex, 1)
emit('policyEditSuccess')
}
})
} else {
for (const section of processedData) {
if (father.key == 'apiProductPlanAdditionalInfoDtoList' && section.key == father.key) {
section.data.splice(childIndex, 1)
}
}
//更新form表单对应的数据，以便收集填写的值
form.value[father.key].splice(childIndex, 1)
}
processedProductData.value = processedData
}
// 根据联动重置表单项的显示与否
const resetShow = (childKey, status) => {
console.log(childKey, status)
......@@ -1073,16 +1107,22 @@ const submitForm = saveType => {
}
})
}
// 因为tab嵌套了两层，所以需要监听父组件的tab否则锚点的显示就会有bug
watch(
() => props.fatherTabName,
newVal => {
if (newVal) {
productRef.value = null
}
}
)
watch(
() => props.activeName,
newVal => {
tempForm.value = { ...form.value }
if (newVal === 'productPlan') {
openList.value = false
setTimeout(() => {
processFormData()
}, 500)
processFormData()
}
}
)
......
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