Skip to content

Y
yd-csf-front
Commit 77e2d6d1 by yuzhenWang
Options

切换分支

parent 26ba6893
Showing with 1014 additions and 471 deletions
src/api/sign/fna.js
...@@ -161,3 +161,11 @@ export function searchScopeList(data) { ...@@ -161,3 +161,11 @@ export function searchScopeList(data) {
data: data data: data
}) })
} }
// 得到计算值
export function calculateFieldValue(data) {
return request({
url: '/csf/api/common/calculate/fieldValue',
method: 'post',
data: data
})
}
src/components/commonAnchor/index.vue 0 → 100644
<template>
<div>
<el-affix :offset="affixOffset">
<el-anchor
:direction="direction"
:type="type"
:offset="anchorOffset"
@click="handleAnchorClick"
>
<el-anchor-link
v-for="item in anchorList"
:href="'#' + item.title"
:title="item.name"
@click="e => handleLinkClick(e, item.title)"
/>
</el-anchor>
</el-affix>
</div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
const props = defineProps({
direction: {
type: String,
default: 'vertical'
},
type: {
type: String,
default: 'default'
},
anchorOffset: {
type: Number,
default: 30
},
affixOffset: {
type: Number,
default: 60
},
anchorList: {
type: Array,
default: () => {
return []
}
},
// 新增：滚动容器的选择器
scrollContainerSelector: {
type: String,
default: ''
},
// 新增：滚动到元素时额外的偏移量
scrollOffset: {
type: Number,
default: 0
},
domIndex: {
type: Number,
default: 1
}
})
const emit = defineEmits(['anchor-click'])
// 处理锚点点击
const handleAnchorClick = e => {
// 阻止默认的锚点跳转
e.preventDefault()
}
// 处理链接点击
const handleLinkClick = (e, anchorId) => {
e.preventDefault()
e.stopPropagation()
emit('anchor-click', anchorId)
// 延迟执行滚动，确保 DOM 已经更新
setTimeout(() => {
scrollToAnchor(anchorId)
}, 50)
}
// 滚动到锚点
const scrollToAnchor = anchorId => {
const targetElement = document.getElementById(anchorId)
if (!targetElement) return
let scrollContainer
if (props.scrollContainerSelector) {
scrollContainer = document.querySelectorAll(props.scrollContainerSelector)
}
if (scrollContainer.length > 0) {
// 计算在容器内的相对位置
const containerRect = scrollContainer[props.domIndex].getBoundingClientRect()
const targetRect = targetElement.getBoundingClientRect()
// 计算滚动位置
const scrollTop =
targetRect.top -
containerRect.top +
scrollContainer[props.domIndex].scrollTop -
props.scrollOffset
// 平滑滚动
scrollContainer[props.domIndex].scrollTo({
top: scrollTop,
behavior: 'smooth'
})
} else {
// 如果没有指定容器，使用默认滚动
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
}
}
// 暴露方法给父组件
defineExpose({
scrollToAnchor
})
</script>
src/components/formCard/cardOne.vue 0 → 100644
<template>
<div class="cardOneContainer">
<el-card class="cardStyle">
<template #header>
<div class="cardOneheader">
<div class="cardOneLeft">
<div class="mainTitle">{{ title }}</div>
<slot name="headerRight"></slot>
</div>
<div class="subTitle" v-if="desTitle">{{ desTitle }}</div>
</div>
</template>
<slot name="content"></slot>
</el-card>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
title: {
type: String,
default: ''
},
desTitle: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.cardOneContainer {
width: 100%;
box-sizing: border-box;
}
.cardStyle {
width: 100%;
margin-bottom: 10px;
border: none !important;
/* :deep (.el-card__header) {
border: none !important;
} */
}
.headerStyle {
border: none !important;
}
.cardOneheader {
width: 100%;
}
.cardOneLeft {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.mainTitle {
font-size: 18px;
/* border-left: 4px solid #0052d9; */
padding-left: 5px;
display: flex;
align-items: center;
/* border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; */
}
.mainTitle::before {
content: '';
display: inline-block;
width: 4px;
height: 22px;
background: #0052d9;
margin-right: 5px;
border-radius: 4px;
}
.subTitle {
background: rgba(0, 119, 238, 0.05);
width: 100%;
padding: 10px 10px;
font-size: 14px;
color: rgba(56, 56, 56, 1);
display: flex;
align-items: center;
margin-top: 5px;
border-radius: 3px;
}
</style>
src/formJson/customer.js
const customer = [ const customer = [
// 基础信息
{ {
fatherTitle: '客户', fatherTitle: '基础信息',
type: 'object', type: 'object',
key: 'personInfo', key: 'personInfo',
anchorKey: 'personInfo',
showTable: false,
data: [ data: [
// {
// label: '姓氏',
// key: 'lastName',
// type: 'Input',
// inputType: 'text',
// required: false,
// maxLength: 5,
// disabled: false,
// placeholder: '请输入',
// show: true,
// labelPosition: 'top', //标签的位置
// labelWidth: '120px', //标签宽度
// sm: 8, //栅格布局份数
// lg: 8 //栅格布局份数
// },
// {
// label: '名字',
// key: 'firstName',
// type: 'Input',
// inputType: 'text',
// required: false,
// maxLength: 10,
// disabled: false,
// placeholder: '请输入',
// show: true,
// labelPosition: 'top', //标签的位置
// labelWidth: '120px', //标签宽度
// sm: 8, //栅格布局份数
// lg: 8 //栅格布局份数
// },
{ {
label: '名字', label: '名字(中文)',
key: 'name', key: 'nameCn',
type: 'Input', domType: 'Input',
unit: '历史客户',
unitColor: 'rgba(0, 82, 217, 1)',
inputType: 'text', inputType: 'text',
required: false, required: true,
maxLength: 15, maxLength: 15,
disabled: false, disabled: false,
placeholder: '请输入2~6位汉字',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '姓名(拼音/英文)',
key: 'namePyEn',
domType: 'Input',
inputType: 'text',
required: true,
maxLength: 30,
disabled: false,
placeholder: '请输入', placeholder: '请输入',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
...@@ -50,29 +41,13 @@ const customer = [ ...@@ -50,29 +41,13 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
// { // {
// label: '姓氏拼音', // label: '称谓',
// key: 'lastNamePinyin', // key: 'title',
// type: 'Input', // domType: 'Select',
// inputType: 'text', // required: true,
// required: false,
// maxLength: 30,
// disabled: false, // disabled: false,
// placeholder: '请输入', // placeholder: '请选择',
// show: true, // dictType: 'csf_customer_title',
// labelPosition: 'top', //标签的位置
// labelWidth: '120px', //标签宽度
// sm: 8, //栅格布局份数
// lg: 8 //栅格布局份数
// },
// {
// label: '姓名拼音',
// key: 'pinyin',
// type: 'Input',
// inputType: 'text',
// required: false,
// maxLength: 30,
// disabled: false,
// placeholder: '请输入',
// show: true, // show: true,
// labelPosition: 'top', //标签的位置 // labelPosition: 'top', //标签的位置
// labelWidth: '120px', //标签宽度 // labelWidth: '120px', //标签宽度
...@@ -80,14 +55,13 @@ const customer = [ ...@@ -80,14 +55,13 @@ const customer = [
// lg: 8 //栅格布局份数 // lg: 8 //栅格布局份数
// }, // },
{ {
label: '名字-英文', label: '证件类型',
key: 'firstNamePinyin', key: 'documentType',
type: 'Input', domType: 'Select',
inputType: 'text',
required: true, required: true,
maxLength: 30,
disabled: false, disabled: false,
placeholder: '请输入', placeholder: '请选择',
dictType: 'csf_id_type',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
...@@ -95,24 +69,26 @@ const customer = [ ...@@ -95,24 +69,26 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '称谓', label: '证件号码',
key: 'title', key: 'idNumber',
type: 'Select', domType: 'Input',
inputType: 'text',
required: true, required: true,
maxLength: 20,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请输入',
dictType: 'csf_customer_title',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '性别', label: '性别',
key: 'gender', key: 'gender',
type: 'Select', domType: 'Select',
required: false, required: true,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请选择',
dictType: 'sys_gender', dictType: 'sys_gender',
...@@ -124,8 +100,8 @@ const customer = [ ...@@ -124,8 +100,8 @@ const customer = [
}, },
{ {
label: '生日', label: '生日',
key: 'birthdate', key: 'birthday',
type: 'DatePicker', domType: 'DatePicker',
required: true, required: true,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请选择',
...@@ -138,7 +114,7 @@ const customer = [ ...@@ -138,7 +114,7 @@ const customer = [
{ {
label: '年龄', label: '年龄',
key: 'age', key: 'age',
type: 'Input', domType: 'Input',
inputType: 'number', inputType: 'number',
maxLength: 30, maxLength: 30,
required: true, required: true,
...@@ -151,31 +127,28 @@ const customer = [ ...@@ -151,31 +127,28 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '移动电话', label: '国籍(国家/地区)',
key: 'phone', key: 'nationality',
type: 'arrowRight', domType: 'arrowRight',
required: true, required: true,
disabled: false, disabled: false,
placeholder: '请填写', placeholder: '请填写',
show: true, show: true,
drawerType: 'phone', drawerType: 'country',
phone: {},
code: 'areaCode',
value: '',
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '邮箱', label: '出生地',
key: 'email', key: 'birthplace',
type: 'Input', domType: 'Input',
inputType: 'text', inputType: 'text',
maxLength: 30, required: false,
required: true, maxLength: 300,
disabled: false, disabled: false,
placeholder: '请输入', placeholder: '请输入出生地(省市)',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
...@@ -183,9 +156,9 @@ const customer = [ ...@@ -183,9 +156,9 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '是否吸烟', label: '是否拥有其他国家公民身份（如美国、日本等）',
key: 'smoke', key: 'isOtherCountry',
type: 'Select', domType: 'Select',
required: false, required: false,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请选择',
...@@ -197,85 +170,70 @@ const customer = [ ...@@ -197,85 +170,70 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '吸烟数量(支/天)', label: '是否吸烟',
key: 'smokeQuantity', key: 'smokingStatus',
type: 'Input', domType: 'Select',
inputType: 'number', required: true,
maxLength: 30,
required: false,
disabled: false, disabled: false,
placeholder: '请输入', placeholder: '请选择',
show: false, dictType: 'sys_no_yes',
show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
// { // {
// label: '公司类型', // label: '吸烟数量(支/天)',
// key: 'companyType', // key: 'smokeQuantity',
// type: 'Select', // domType: 'Input',
// inputType: 'number',
// maxLength: 30,
// required: false, // required: false,
// disabled: false, // disabled: false,
// placeholder: '请选择', // placeholder: '请输入',
// dictType: 'sys_status', // show: false,
// show: true // labelPosition: 'top', //标签的位置
// labelWidth: '120px', //标签宽度
// sm: 8, //栅格布局份数
// lg: 8 //栅格布局份数
// }, // },
{ {
label: '客户类型', label: '婚姻状况',
key: 'customerType', key: 'maritalStatus',
type: 'Select', domType: 'Select',
required: false, required: true,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请选择',
dictType: 'csf_customer_type', dictType: 'csf_marriage',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
// {
// label: '客户来源',
// key: 'source',
// type: 'Select',
// required: false,
// disabled: false,
// placeholder: '请选择',
// dictType: 'sys_status',
// show: true
// },
{ {
label: '行业', label: '教育程度',
key: 'companyType', key: 'educationLevel',
type: 'Input', domType: 'Select',
inputType: 'text',
maxLength: 300,
required: true, required: true,
disabled: false, disabled: false,
placeholder: '请输入', placeholder: '请选择',
dictType: 'csf_education',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
} },
]
},
{
fatherTitle: '基本情况',
type: 'object',
key: 'basic',
// description: '证件信息至少填写一项',
data: [
{ {
label: '婚姻状况', label: '是否退休',
key: 'marriage', key: 'isRetirement',
type: 'Select', domType: 'Select',
required: true, required: true,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请选择',
dictType: 'csf_marriage', dictType: 'sys_no_yes',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
...@@ -283,28 +241,44 @@ const customer = [ ...@@ -283,28 +241,44 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '国籍(国家/地区)', label: '退休年龄',
key: 'country', key: 'retirementAge',
type: 'arrowRight', domType: 'Input',
required: true, inputType: 'number',
maxLength: 30,
required: false,
disabled: false, disabled: false,
placeholder: '请填写', placeholder: '请输入',
show: false,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '风险偏好',
key: 'riskAppetite',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
dictType: 'csf_ap_risk',
show: true, show: true,
drawerType: 'country',
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '出生地', label: '体重(KG)',
key: 'birthplace', key: 'weight',
type: 'Input', domType: 'Input',
inputType: 'text', inputType: 'number',
required: false, required: false,
maxLength: 300, maxLength: 300,
disabled: false, disabled: false,
placeholder: '请输入出生地(省市)', placeholder: '请输入身高(kg)',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
...@@ -312,30 +286,96 @@ const customer = [ ...@@ -312,30 +286,96 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '教育程度', label: '身高(CM)',
key: 'education', key: 'height',
type: 'Select', domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入身高(cm)',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: 'BMI',
key: 'bmi',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
}
]
},
// 税务信息
{
fatherTitle: '税务信息',
keyType: 'Array', //用于表单收集值时，判断是数组还是对象
key: 'apiTaxationDtoList',
anchorKey: 'apiTaxationDtoList',
moudleType: 'apiTaxationDtoList',
dataLength: 1, //设置dataLength,用于控制子级dom的个数，子级保存一个样例数据，便于加子级数据
showTable: true,
addChildren: true, //是否可以新增子级dom
addChildrenTxt: '税务', //新增按钮得文本
fatherRequired: false, //父级必填,代表个人资料这个模块有必填项
isOpen: false, //dom是否展开
data: [
// {
// id: Date.now() + Math.floor(Math.random() * 1000), //唯一标识
// span: 24, //栅格布局份数
// taxCountry: '',
// taxNumber: ''
// }
]
},
// 联系信息
{
fatherTitle: '联系信息',
type: 'object',
key: 'contactInfo',
anchorKey: 'contactInfo',
showTable: false,
data: [
{
label: '移动电话',
key: 'mobile',
domType: 'arrowRight',
required: true, required: true,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请填写',
dictType: 'csf_education',
show: true, show: true,
drawerType: 'phone',
mobile: {},
code: 'mobileCode',
value: '',
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '住宅电话', label: '住宅电话',
key: 'residenceTelephone', key: 'residenceMobile',
type: 'arrowRight', domType: 'arrowRight',
required: false, required: false,
disabled: false, disabled: false,
placeholder: '请填写', placeholder: '请填写',
show: true, show: true,
drawerType: 'phone', drawerType: 'phone',
residenceTelephone: {}, residenceMobile: {},
code: 'residenceAreaCode', code: 'residenceMobileCode',
maxLength: 20, maxLength: 20,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
...@@ -344,8 +384,8 @@ const customer = [ ...@@ -344,8 +384,8 @@ const customer = [
}, },
{ {
label: '固定电话', label: '固定电话',
key: 'fixedPhone', key: 'landline',
type: 'Input', domType: 'Input',
inputType: 'number', inputType: 'number',
required: false, required: false,
disabled: false, disabled: false,
...@@ -358,13 +398,14 @@ const customer = [ ...@@ -358,13 +398,14 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '是否长期出国', label: '邮箱',
key: 'longtimeAbroad', key: 'email',
type: 'Select', domType: 'Input',
required: false, inputType: 'text',
maxLength: 30,
required: true,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请输入',
dictType: 'sys_no_yes',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
...@@ -372,15 +413,31 @@ const customer = [ ...@@ -372,15 +413,31 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '证件地址',
key: 'certificateAddress',
domType: 'Input',
inputType: 'text',
required: true,
maxLength: 20,
disabled: false,
placeholder: '请输入',
show: false,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '通讯地址', label: '通讯地址',
key: 'residenceAddress', key: 'mailingAddress',
type: 'arrowRight', domType: 'arrowRight',
required: false, required: false,
disabled: false, disabled: false,
placeholder: '请填写', placeholder: '请填写',
show: true, show: true,
drawerType: 'address', drawerType: 'address',
residenceAddress: {}, mailingAddress: {},
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
...@@ -389,7 +446,7 @@ const customer = [ ...@@ -389,7 +446,7 @@ const customer = [
{ {
label: '住宅地址', label: '住宅地址',
key: 'residentialAddress', key: 'residentialAddress',
type: 'arrowRight', domType: 'arrowRight',
required: false, required: false,
disabled: false, disabled: false,
placeholder: '请填写', placeholder: '请填写',
...@@ -400,38 +457,41 @@ const customer = [ ...@@ -400,38 +457,41 @@ const customer = [
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
},
{
label: '通讯地址邮政编号',
key: 'mailingAddressCode',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
} }
// {
// label: '邮寄地址',
// key: 'mailingAddress',
// type: 'arrowRight',
// required: false,
// disabled: false,
// placeholder: '请填写',
// show: true,
// drawerType: 'address',
// mailingAddress: {},
// labelPosition: 'top', //标签的位置
// labelWidth: '120px', //标签宽度
// sm: 8, //栅格布局份数
// lg: 8 //栅格布局份数
// }
] ]
}, },
// 工作信息
{ {
fatherTitle: '证件信息', fatherTitle: '工作信息',
type: 'object', type: 'object',
key: 'pid', key: 'companyInfo',
// description: '证件信息至少填写一项', anchorKey: 'companyInfo',
showTable: false,
data: [ data: [
{ {
label: '证件类型', label: '就业情况',
key: 'idType', key: 'employmentStatus',
type: 'Select', domType: 'Select',
required: true, required: false,
disabled: false, disabled: false,
placeholder: '请选择', placeholder: '请选择',
dictType: 'csf_id_type', dictType: 'sys_no_yes',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
...@@ -439,12 +499,12 @@ const customer = [ ...@@ -439,12 +499,12 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '证件号码', label: '公司/学校名称',
key: 'idCard', key: 'csName',
type: 'Input', domType: 'Input',
inputType: 'text', inputType: 'text',
required: true, required: false,
maxLength: 20, maxLength: 300,
disabled: false, disabled: false,
placeholder: '请输入', placeholder: '请输入',
show: true, show: true,
...@@ -454,31 +514,70 @@ const customer = [ ...@@ -454,31 +514,70 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '身份证地址', label: '行业',
key: 'idCardAddress', key: 'industry',
type: 'Input', domType: 'Input',
inputType: 'text', inputType: 'text',
maxLength: 300,
required: false, required: false,
maxLength: 20,
disabled: false, disabled: false,
placeholder: '请输入', placeholder: '请输入',
show: false, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
} },
] {
}, label: '现时每月收入',
{ key: 'currentMonthlyIncome',
fatherTitle: '公司信息', domType: 'Input',
type: 'object', unit: 'HKD',
key: 'companyInfo', inputType: 'number',
data: [ required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{ {
label: '公司名称', label: '总工作年期',
key: 'companyName', key: 'totalWorkingYears',
type: 'Input', domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '受雇于现职年期',
key: 'currentTenure',
domType: 'Input',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '职位',
key: 'position',
domType: 'Input',
inputType: 'text', inputType: 'text',
required: false, required: false,
maxLength: 300, maxLength: 300,
...@@ -492,25 +591,29 @@ const customer = [ ...@@ -492,25 +591,29 @@ const customer = [
}, },
{ {
label: '公司电话', label: '公司电话',
key: 'companyTelephone', key: 'companyMobile',
type: 'arrowRight', commonKey: true,
customerKey: 'companyTelephone',
customerCode: 'companyAreaCode',
domType: 'arrowRight',
required: false, required: false,
disabled: false, disabled: false,
placeholder: '请填写', placeholder: '请填写',
show: true, show: true,
drawerType: 'phone', drawerType: 'phone',
companyTelephone: {}, companyMobile: {}, //带有区号得电话一定要有一个和key一样得对象用于收集区号和号码
code: 'companyAreaCode', code: 'companyMobileCode',
maxLength: 20, maxLength: 20,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '180px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '公司地址', label: '公司地址',
key: 'companyAddress', key: 'companyAddress',
type: 'arrowRight', customerKey: 'companyAddress',
domType: 'arrowRight',
required: false, required: false,
disabled: false, disabled: false,
placeholder: '请填写', placeholder: '请填写',
...@@ -523,9 +626,9 @@ const customer = [ ...@@ -523,9 +626,9 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '公司地址邮编', label: '公司地址邮编号',
key: 'companyAddressPostcode', key: 'companyAddressCode',
type: 'Input', domType: 'Input',
inputType: 'text', inputType: 'text',
required: false, required: false,
maxLength: 20, maxLength: 20,
...@@ -536,16 +639,43 @@ const customer = [ ...@@ -536,16 +639,43 @@ const customer = [
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数 sm: 8, //栅格布局份数
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}
]
},
// 财务信息
{
fatherTitle: '财务信息',
type: 'object',
key: 'financeInfo',
anchorKey: 'financeInfo',
showTable: false,
data: [
{
label: '平均每月收入',
key: 'monthIncome',
domType: 'Input',
unit: 'HKD',
inputType: 'number',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入平均每月收入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
}, },
{ {
label: '职位', label: '平均每月支出',
key: 'position', key: 'monthExpenditure',
type: 'Input', domType: 'Input',
inputType: 'text', unit: 'HKD',
inputType: 'number',
required: false, required: false,
maxLength: 300, maxLength: 300,
disabled: false, disabled: false,
placeholder: '请输入', placeholder: '请输入平均每月支出',
show: true, show: true,
labelPosition: 'top', //标签的位置 labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度 labelWidth: '120px', //标签宽度
...@@ -553,9 +683,10 @@ const customer = [ ...@@ -553,9 +683,10 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '工作年期', label: '总流动资产',
key: 'workYear', key: 'totalCurrentAssets',
type: 'Input', domType: 'Input',
unit: 'HKD',
inputType: 'number', inputType: 'number',
required: false, required: false,
maxLength: 300, maxLength: 300,
...@@ -568,9 +699,10 @@ const customer = [ ...@@ -568,9 +699,10 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
}, },
{ {
label: '现时每月收入', label: '总负债额',
key: 'salary', key: 'totalDebt',
type: 'Input', domType: 'Input',
unit: 'HKD',
inputType: 'number', inputType: 'number',
required: false, required: false,
maxLength: 300, maxLength: 300,
...@@ -583,6 +715,90 @@ const customer = [ ...@@ -583,6 +715,90 @@ const customer = [
lg: 8 //栅格布局份数 lg: 8 //栅格布局份数
} }
] ]
},
//其他信息
{
fatherTitle: '其他信息',
type: 'object',
key: 'otherInfo',
anchorKey: 'otherInfo',
showTable: false,
showMoudle: true, //模块是否展示
data: [
{
label: '旅行',
key: 'travel',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '运动',
key: 'exercise',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
dictType: 'csf_ap_exercise',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '游戏',
key: 'game',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
dictType: 'csf_ap_game',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '电影/戏剧',
key: 'movieDrama',
domType: 'Select',
required: false,
disabled: false,
placeholder: '请选择',
dictType: 'csf_ap_movie',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '美食',
key: 'delicacy',
domType: 'Input',
inputType: 'text',
required: false,
maxLength: 300,
disabled: false,
placeholder: '请输入',
show: true,
labelPosition: 'top', //标签的位置
labelWidth: '120px', //标签宽度
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
}
]
} }
] ]
export default customer export default customer
src/views/sign/FnaList/components/customer.vue
<template> <template>
<div> <div>
<div v-if="processedCustomerData.length > 0"> <div v-if="processedCustomerData.length > 0" class="customerContainer">
<el-row> <div class="editBtn">
<el-col :span="24"> <el-button
<div class="topBtn"> v-if="props.customerBizId"
<el-button type="warning" icon="DocumentAdd" @click="exportInfo" type="primary"
>从已有列表中导入</el-button icon="EditPen"
> @click="handleEditStatus"
<el-button >编辑</el-button
v-if="props.customerBizId" >
type="primary" </div>
icon="EditPen" <div class="customerLeft" v-if="customerRightRef">
@click="handleEditStatus" <CommonAnchor
style="margin-left: 10px" :anchorList="anchorList"
>编辑</el-button :affixOffset="250"
> :anchorOffset="10"
</div> :scrollContainerSelector="'.tabPaneBox'"
</el-col> :scrollOffset="10"
</el-row> :domIndex="1"
<el-form ref="customerRef" :model="form" :rules="rules" label-width="120px"> />
<el-row v-for="father in processedCustomerData" style="margin-bottom: 10px"> </div>
<div class="formBox"> <div class="customerRight" ref="customerRightRef">
<div class="fatherLable">{{ father.fatherTitle }}</div> <el-form ref="customerRef" :model="form" :rules="rules" label-width="120px">
<div class="fatherDes">{{ father.description }}</div> <el-row v-for="(father, fIndex) in processedCustomerData" :id="father.anchorKey">
<div class="formBox">
<el-row :gutter="20"> <CardOne :title="father.fatherTitle">
<template v-for="child in father.data" :key="child.key"> <template #content>
<el-col :sm="child.sm" :lg="child.lg" class="formItem" v-if="child.show"> <el-row :gutter="20" v-if="!father.showTable">
<div> <template v-for="child in father.data" :key="child.key">
<!-- <el-form-item <el-col :sm="child.sm" :lg="child.lg" class="formItem" v-if="child.show">
:label="child.label" <div>
:prop="child.key" <el-form-item
:key="child.key" :label="
:label-width="child.labelWidth" child.key === 'residentialAddress' && child.type === 'arrowRight'
:label-position="child.labelPosition" ? ''
> --> : child.label
<el-form-item "
:label=" :prop="child.key"
child.key === 'residentialAddress' && child.type === 'arrowRight' :key="child.key"
? '' :label-width="child.labelWidth"
: child.label :label-position="child.labelPosition"
"
:prop="child.key"
:key="child.key"
:label-width="child.labelWidth"
:label-position="child.labelPosition"
>
<!-- 自定义 label 插槽 -->
<template
v-if="child.key === 'residentialAddress' && child.type === 'arrowRight'"
#label
>
<div class="custom-label">
<span>{{ child.label }}</span>
<el-checkbox-group
v-model="form.isCopyAddress"
size="small"
style="margin-left: 8px"
@change="changeAddressStatus(child)"
:disabled="copyAddress"
> >
<el-checkbox :value="true" name="isCopyAddress"> <!-- 自定义 label 插槽 -->
同通讯地址 <template
</el-checkbox> v-if="
</el-checkbox-group> child.key === 'residentialAddress' && child.type === 'arrowRight'
"
#label
>
<div class="custom-label">
<span>{{ child.label }}</span>
<el-checkbox-group
v-model="form.isCopyAddress"
size="small"
style="margin-left: 8px"
@change="changeAddressStatus(child)"
:disabled="copyAddress"
>
<el-checkbox :value="true" name="isCopyAddress">
同通讯地址
</el-checkbox>
</el-checkbox-group>
</div>
</template>
<el-input
v-if="child.domType === 'Input'"
:type="child.inputType"
v-model="form[child.key]"
:placeholder="child.placeholder"
maxlength="30"
:disabled="child.disabled"
@change="handleInputChange(child)"
>
<template #append v-if="child.unit" @click="handleAppendInput(child)">
<span :style="{ color: child.unitColor }">{{ child.unit }}</span>
</template>
</el-input>
<el-select
v-if="child.domType === 'Select'"
v-model="form[child.key]"
:placeholder="child.placeholder"
@change="handleSelectChange(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[child.key]"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:placeholder="child.placeholder"
:disabled="child.disabled"
:disabled-date="time => disabledDate(time, child)"
:default-value="defaultDisplayDate"
@change="handleDateChange(child)"
/>
<el-input
v-if="child.domType === 'arrowRight'"
v-model="form[child.key]"
:placeholder="child.placeholder"
@click="handleFoucs(child)"
:suffix-icon="ArrowRight"
readonly
:disabled="child.disabled"
>
</el-input>
</el-form-item>
</div> </div>
</template> </el-col>
<el-input </template>
v-if="child.type === 'Input'" </el-row>
:type="child.inputType" <el-row v-if="father.showTable">
v-model="form[child.key]" <el-col :span="24" v-if="father.addChildren">
:placeholder="child.placeholder" <el-button
maxlength="30" :disabled="editStatus"
:disabled="child.disabled" type="primary"
@change="handleInputChange(child)" icon="Plus"
/> size="small"
<el-select style="margin-bottom: 10px"
v-if="child.type === 'Select'" @click="addChildren(father)"
v-model="form[child.key]" >{{ father.addChildrenTxt }}</el-button
:placeholder="child.placeholder"
@change="handleSelectChange(child)"
:disabled="child.disabled"
> >
<el-option </el-col>
v-for="item in child.options" <el-table :data="father.data" border v-if="father.data.length > 0">
:key="item.value" <template v-if="father.key == 'apiTaxationDtoList'">
:label="item.label" <el-table-column label="税务国家" prop="taxCountry" align="center">
:value="item.value" <template #default="scope">
/> <el-input
</el-select> size="default"
<el-date-picker placeholder="请输入"
style="width: 100%" v-model="scope.row.taxCountry"
v-if="child.type === 'DatePicker'" :disabled="editStatus"
v-model="form[child.key]" />
type="date" </template>
:placeholder="child.placeholder" </el-table-column>
:disabled="child.disabled" <el-table-column label="税务编号" prop="taxId" align="center">
:disabled-date="time => disabledDate(time, child)" <template #default="scope">
:default-value="defaultDisplayDate" <el-input
@change="handleDateChange(child)" v-model="scope.row.taxId"
/> size="default"
placeholder="请输入"
:disabled="editStatus"
/>
</template>
</el-table-column>
<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>
</template>
</CardOne>
</div>
</el-row>
<el-input <el-row>
v-if="child.type === 'arrowRight'" <el-col>
v-model="form[child.key]" <div class="tabButton">
:placeholder="child.placeholder" <el-button
@click="handleFoucs(child)" type="primary"
:suffix-icon="ArrowRight" icon="RefreshRight"
readonly @click="resetForm"
:disabled="child.disabled" size="large"
> :disabled="editStatus"
</el-input> >取消</el-button
</el-form-item> >
</div> <el-button
</el-col> type="primary"
</template> icon="Check"
</el-row> @click="submitForm"
</div> size="large"
</el-row> :disabled="editStatus"
>提交</el-button
>
</div>
</el-col>
</el-row>
</el-form>
</div>
<el-row>
<el-col>
<div class="tabButton">
<el-button
type="primary"
icon="RefreshRight"
@click="resetForm"
size="large"
:disabled="editStatus"
>取消</el-button
>
<el-button
type="primary"
icon="Check"
@click="submitForm"
size="large"
:disabled="editStatus"
>提交</el-button
>
</div>
</el-col>
</el-row>
</el-form>
<el-dialog title="客户信息" v-model="openList" width="600px" append-to-body> <el-dialog title="客户信息" v-model="openList" width="600px" append-to-body>
<div> <div>
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px"> <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
...@@ -184,7 +237,7 @@ ...@@ -184,7 +237,7 @@
</div> </div>
<div class="infoItem"> <div class="infoItem">
<span>出生日期：</span> <span>出生日期：</span>
<span> {{ formatToDate(item.birthdate) || '暂无' }}</span> <span> {{ formatToDate(item.birthday) || '暂无' }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -213,6 +266,7 @@ ...@@ -213,6 +266,7 @@
@close="handleCloseDrawer" @close="handleCloseDrawer"
@confirmCountry="confirmDrawer" @confirmCountry="confirmDrawer"
/> />
<!-- 历史客户的弹窗 -->
</div> </div>
</template> </template>
<script setup name="customer"> <script setup name="customer">
...@@ -224,7 +278,8 @@ import customerDomData from '@/formJson/customer' ...@@ -224,7 +278,8 @@ import customerDomData from '@/formJson/customer'
import Country from '@/views/components/country' import Country from '@/views/components/country'
import Phone from '@/views/components/phone' import Phone from '@/views/components/phone'
import Address from '@/views/components/address' import Address from '@/views/components/address'
import CommonAnchor from '@/components/commonAnchor'
import CardOne from '@/components/formCard/cardOne'
import { watch } from 'vue' import { watch } from 'vue'
import { import {
addCustomer, addCustomer,
...@@ -237,12 +292,18 @@ import useDictStore from '@/store/modules/dict' ...@@ -237,12 +292,18 @@ import useDictStore from '@/store/modules/dict'
const dictStore = useDictStore() //获取字典数据 const dictStore = useDictStore() //获取字典数据
const props = defineProps({ const props = defineProps({
activeName: { type: String, default: '' }, //tab名称 activeName: { type: String, default: '' }, //tab名称
tabPaneRef: {
type: Object,
default: null
},
fearthStatus: { type: String, default: '' }, //父组件状态，新增、修改 fearthStatus: { type: String, default: '' }, //父组件状态，新增、修改
customerBizId: { type: String, default: '' } //提交状态，新增、修改 customerBizId: { type: String, default: '' } //提交状态，新增、修改
}) })
const emit = defineEmits(['handleSuccess']) const emit = defineEmits(['handleSuccess'])
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const { csf_id_type, sys_gender } = proxy.useDict('csf_id_type', 'sys_gender') const { csf_id_type, sys_gender } = proxy.useDict('csf_id_type', 'sys_gender')
const anchorList = ref([]) //锚点列表
const customerRightRef = ref(null)
const showPhoneDrawer = ref(false) //电话抽屉开关 const showPhoneDrawer = ref(false) //电话抽屉开关
const showAddressDrawer = ref(false) //地址抽屉开关 const showAddressDrawer = ref(false) //地址抽屉开关
const showCountryDrawer = ref(false) //国家/地区抽屉开关 const showCountryDrawer = ref(false) //国家/地区抽屉开关
...@@ -330,6 +391,40 @@ const data = reactive({ ...@@ -330,6 +391,40 @@ const data = reactive({
} }
}) })
const { form, rules, processedCustomerData, queryParams, oldCustomerData } = toRefs(data) const { form, rules, processedCustomerData, queryParams, oldCustomerData } = toRefs(data)
const handleAppendInput = child => {}
// 添加表单子级dom
const addChildren = father => {
const processedData = JSON.parse(JSON.stringify(processedCustomerData.value))
let obj4 = {
id: Date.now() + Math.floor(Math.random() * 1000), //唯一标识
span: 24, //栅格布局份数
taxCountry: '',
taxNumber: ''
}
for (const section of processedData) {
if (father.key == 'apiTaxationDtoList' && section.key == father.key) {
section.data.push(obj4)
}
}
//更新form表单对应的数据，以便收集填写的值
// form.value[father.key].push(obj)
processedCustomerData.value = processedData
}
const deleteChildren = (father, childIndex) => {
if (editStatus.value) {
proxy.$modal.confirm(`请先点击编辑再进行删除操作`, { showCancel: '0', title: '填写提示' })
return
}
const processedData = JSON.parse(JSON.stringify(processedCustomerData.value))
for (const section of processedData) {
if (father.key == 'apiTaxationDtoList' && section.key == father.key) {
section.data.splice(childIndex, 1)
}
}
processedCustomerData.value = processedData
}
const copyAddress = computed(() => { const copyAddress = computed(() => {
const residenceAddressIndex = addressQuickList.value.findIndex( const residenceAddressIndex = addressQuickList.value.findIndex(
item => item.type === 'residenceAddress' item => item.type === 'residenceAddress'
...@@ -366,15 +461,15 @@ const handleInputChange = child => { ...@@ -366,15 +461,15 @@ const handleInputChange = child => {
} }
const handleDateChange = child => { const handleDateChange = child => {
let age = null let age = null
if (child.key == 'birthdate') { if (child.key == 'birthday') {
age = calculateExactAge(proxy.formatToDate(form.value.birthdate)) age = calculateExactAge(proxy.formatToDate(form.value.birthday))
if (age >= 18) { if (age >= 18) {
form.value.age = age form.value.age = age
} }
} }
} }
const disabledDate = (time, child) => { const disabledDate = (time, child) => {
if (child.key == 'birthdate') { if (child.key == 'birthday') {
// 计算18年前的今天 // 计算18年前的今天
const eighteenYearsAgo = dayjs().subtract(18, 'year') const eighteenYearsAgo = dayjs().subtract(18, 'year')
// 禁用今天之后的日期和18年前的今天之后的日期 // 禁用今天之后的日期和18年前的今天之后的日期
...@@ -441,10 +536,12 @@ const fetchDictData = dictType => { ...@@ -441,10 +536,12 @@ const fetchDictData = dictType => {
} }
// 处理表单配置，添加字典数据 // 处理表单配置，添加字典数据
const processFormData = async () => { const processFormData = async () => {
anchorList.value = []
// 深拷贝原始数据 // 深拷贝原始数据
const processedData = JSON.parse(JSON.stringify(customerDomData)) const processedData = JSON.parse(JSON.stringify(customerDomData))
for (const section of processedData) { for (const section of processedData) {
anchorList.value.push({ title: section.anchorKey, name: section.fatherTitle })
if (section.data) { if (section.data) {
for (const field of section.data) { for (const field of section.data) {
if (field.dictType) { if (field.dictType) {
...@@ -452,7 +549,7 @@ const processFormData = async () => { ...@@ -452,7 +549,7 @@ const processFormData = async () => {
field.options = fetchDictData(field.dictType) field.options = fetchDictData(field.dictType)
} }
if (field.required) { if (field.required) {
if (field.key === 'firstNamePinyin') { if (field.key === 'namePyEn') {
rules.value[field.key] = [ rules.value[field.key] = [
{ required: true, message: `${field.label}不能为空`, trigger: 'blur' }, { required: true, message: `${field.label}不能为空`, trigger: 'blur' },
{ validator: validateEnglish, trigger: 'change' } { validator: validateEnglish, trigger: 'change' }
...@@ -480,6 +577,9 @@ const processFormData = async () => { ...@@ -480,6 +577,9 @@ const processFormData = async () => {
form.value.customerType = 'INDIVIDUAL' form.value.customerType = 'INDIVIDUAL'
processedCustomerData.value = oldCustomerData.value = processedData processedCustomerData.value = oldCustomerData.value = processedData
} }
console.log('====================================')
console.log('anchorList.value', anchorList.value)
console.log('====================================')
} }
//弹出右侧抽屉 //弹出右侧抽屉
...@@ -623,40 +723,25 @@ const confirmDrawer = info => { ...@@ -623,40 +723,25 @@ const confirmDrawer = info => {
handleCloseDrawer() handleCloseDrawer()
} }
// 根据联动重置表单项的显示与否
const resetShow = (key, status) => {
for (const section of processedCustomerData.value) {
if (section.data) {
for (const field of section.data) {
if (field.key == key) {
// 获取字典数据
field.show = status
if (!status) {
form.value[key] = ''
}
}
}
}
}
}
const handleSelectChange = child => { const handleSelectChange = child => {
switch (child.key) { switch (child.key) {
case 'smoke': // case 'smokingStatus':
// 选择吸烟，展示吸烟数量 // // 选择吸烟，展示吸烟数量
if (form.value[child.key] == '1') { // if (form.value[child.key] == '1') {
resetShow('smokeQuantity', true) // resetShow('smokeQuantity', true)
} else { // } else {
resetShow('smokeQuantity', false) // resetShow('smokeQuantity', false)
} // }
break // break
case 'idType': // case 'idType':
// 选择吸烟，展示吸烟数量 // // 选择吸烟，展示吸烟数量
if (form.value[child.key] == 'idCard') { // if (form.value[child.key] == 'idCard') {
resetShow('idCardAddress', true) // resetShow('idCardAddress', true)
} else { // } else {
resetShow('idCardAddress', false) // resetShow('idCardAddress', false)
} // }
break // break
default: default:
break break
} }
...@@ -690,11 +775,15 @@ const setFormValue = (obj, formData, exportValue) => { ...@@ -690,11 +775,15 @@ const setFormValue = (obj, formData, exportValue) => {
// 深拷贝原始数据 // 深拷贝原始数据
const processedData = JSON.parse(JSON.stringify(formData)) const processedData = JSON.parse(JSON.stringify(formData))
for (const section of processedData) { for (const section of processedData) {
// 这里还要回显受供养人数，等调试的时候再加
// if (section.key == 'personInfo') {
// section.data.push()
// }
if (section.data) { if (section.data) {
for (const field of section.data) { for (const field of section.data) {
if (obj.smokeQuantity && field.key == 'smokeQuantity') { // if (obj.smokeQuantity && field.key == 'smokeQuantity') {
field.show = true // field.show = true
} // }
//证件类型是身份证，身份证地址就显示否则不显示 //证件类型是身份证，身份证地址就显示否则不显示
if (field.key == 'idCardAddress' && obj.idType == 'idCard') { if (field.key == 'idCardAddress' && obj.idType == 'idCard') {
field.show = true field.show = true
...@@ -788,8 +877,8 @@ const setFormValue = (obj, formData, exportValue) => { ...@@ -788,8 +877,8 @@ const setFormValue = (obj, formData, exportValue) => {
} }
} }
}) })
if (form.value['birthdate']) { if (form.value['birthday']) {
let age = calculateExactAge(proxy.formatToDate(form.value.birthdate)) let age = calculateExactAge(proxy.formatToDate(form.value.birthday))
if (age >= 18) { if (age >= 18) {
form.value.age = age form.value.age = age
} }
...@@ -805,12 +894,6 @@ const setFormValue = (obj, formData, exportValue) => { ...@@ -805,12 +894,6 @@ const setFormValue = (obj, formData, exportValue) => {
oldObjInfo.value = JSON.parse(JSON.stringify(form.value)) oldObjInfo.value = JSON.parse(JSON.stringify(form.value))
} }
processedCustomerData.value = oldCustomerData.value = processedData processedCustomerData.value = oldCustomerData.value = processedData
// console.log('====================================')
// console.log('processedCustomerData.value', processedCustomerData.value)
// console.log('====================================')
// console.log('====================================')
// console.log('form', form.value)
// console.log('====================================')
} }
// 数组去重 // 数组去重
function removeDuplicates(arr, key) { function removeDuplicates(arr, key) {
...@@ -841,9 +924,10 @@ const getInvalidFields = fields => { ...@@ -841,9 +924,10 @@ const getInvalidFields = fields => {
} }
// 表单提交 // 表单提交
const submitForm = () => { const submitForm = () => {
//提交得时候要处理税务国家得数据。表格得值收集在processedCustomerData中，所以需要从processedCustomerData中取值
let submitObj = { ...form.value } let submitObj = { ...form.value }
let addressList = [] let addressList = []
submitObj['birthdate'] = proxy.formatToDate(submitObj['birthdate']) submitObj['birthday'] = proxy.formatToDate(submitObj['birthday'])
proxy.$refs['customerRef'].validate((valid, fields) => { proxy.$refs['customerRef'].validate((valid, fields) => {
if (valid) { if (valid) {
...@@ -876,7 +960,7 @@ const submitForm = () => { ...@@ -876,7 +960,7 @@ const submitForm = () => {
} }
} }
} }
submitObj['birthdate'] = proxy.formatToDate(submitObj['birthdate']) submitObj['birthday'] = proxy.formatToDate(submitObj['birthday'])
submitObj['addressList'] = addressList submitObj['addressList'] = addressList
// 删除多余字段 // 删除多余字段
deleteKeyList.value.forEach(item => { deleteKeyList.value.forEach(item => {
...@@ -933,7 +1017,7 @@ const resetForm = () => { ...@@ -933,7 +1017,7 @@ const resetForm = () => {
form.value = { ...oldObjInfo.value } form.value = { ...oldObjInfo.value }
editStatus.value = true editStatus.value = true
} else { } else {
resetShow('smokeQuantity', false) // resetShow('smokeQuantity', false)
proxy.$refs['customerRef'].resetFields() proxy.$refs['customerRef'].resetFields()
} }
processedCustomerData.value = JSON.parse(JSON.stringify(oldCustomerData.value)) processedCustomerData.value = JSON.parse(JSON.stringify(oldCustomerData.value))
...@@ -954,12 +1038,40 @@ watch( ...@@ -954,12 +1038,40 @@ watch(
() => props.activeName, () => props.activeName,
newVal => { newVal => {
if (newVal === 'customer') { if (newVal === 'customer') {
customerRightRef.value = null
processFormData() processFormData()
} }
} }
) )
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.customerContainer {
display: flex;
height: 100%;
box-sizing: border-box;
position: relative;
}
.editBtn {
position: fixed;
right: 3.5%;
top: 22%;
z-index: 999;
}
.customerLeft {
width: 15%;
height: 100vh;
}
.customerRight {
width: calc(100% - 15%);
border-left: 3px solid rgb(247 247 247);
padding-left: 10px;
box-sizing: border-box;
}
.deleteIcon {
color: red;
font-size: 18px;
padding-top: 10px;
}
.custom-label { .custom-label {
width: 100%; width: 100%;
display: flex; display: flex;
......
src/views/sign/FnaList/edit.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- <div>
<el-button type="primary" icon="Back" @click="handleBack" style="margin-bottom: 10px"
>返回</el-button
>
</div> -->
<el-card shadow="never"> <el-card shadow="never">
<div class="cardHeader"> <div class="cardHeader">
<div class="left"> <div class="left">
...@@ -25,22 +19,8 @@ ...@@ -25,22 +19,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="right">
<el-button
:disabled="!(processInfo.customerBizId && processInfo.fnaFormBizId)"
type="success"
:icon="Check"
>{{ processInfo.appointmentBizId ? '已预约' : '立即预约' }}</el-button
>
<el-button
:disabled="!(processInfo.customerBizId && processInfo.fnaFormBizId)"
type="primary"
plain
>生成副本</el-button
>
</div> -->
</div> </div>
<div class="tabsBox"> <div class="tabsBox" ref="tabPaneRef">
<el-tabs v-model="activeName" class="demo-tabs" :before-leave="beforeTabLeave"> <el-tabs v-model="activeName" class="demo-tabs" :before-leave="beforeTabLeave">
<el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name"> <el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name">
<div :class="{ tabPaneBox: activeName !== 'appointment' }"> <div :class="{ tabPaneBox: activeName !== 'appointment' }">
...@@ -98,6 +78,7 @@ ...@@ -98,6 +78,7 @@
:fearthStatus="route.query.type" :fearthStatus="route.query.type"
:customerBizId="processInfo.customerBizId" :customerBizId="processInfo.customerBizId"
@handleSuccess="handleSuccess" @handleSuccess="handleSuccess"
:tabPaneRef="tabPaneRef"
/> />
<div v-if="tab.name === 'fnaform'"> <div v-if="tab.name === 'fnaform'">
<FanForm <FanForm
...@@ -155,6 +136,7 @@ const processInfo = ref({ ...@@ -155,6 +136,7 @@ const processInfo = ref({
const updateStatus = ref(false) const updateStatus = ref(false)
const dictTypeLists = ref([]) const dictTypeLists = ref([])
const customerInfo = ref({}) const customerInfo = ref({})
const tabPaneRef = ref(null)
const tabsList = ref([ const tabsList = ref([
{ {
label: '总览', label: '总览',
...@@ -181,15 +163,15 @@ const tabsList = ref([ ...@@ -181,15 +163,15 @@ const tabsList = ref([
id: 3, id: 3,
status: '0', status: '0',
key: 'appointmentBizId' key: 'appointmentBizId'
},
{
label: '关联新单',
name: 'newpolicy',
id: 4,
status: '0',
key: 'policyBizld'
} }
// { // {
// label: '关联新单',
// name: 'newpolicy',
// id: 4,
// status: '0',
// key: 'policyBizld'
// }
// {
// label: '关联保单', // label: '关联保单',
// name: 'policy', // name: 'policy',
// id: 5, // id: 5,
...@@ -533,11 +515,40 @@ getDictsData() ...@@ -533,11 +515,40 @@ getDictsData()
} }
} }
} }
/* .tabPaneBox {
height: calc(100vh - 275px);
overflow-y: auto;
padding-right: 10px;
} */
.tabPaneBox { .tabPaneBox {
/* height: calc(100vh - 317px); */
height: calc(100vh - 275px); height: calc(100vh - 275px);
overflow-y: auto; overflow-y: auto;
padding-right: 10px; padding-right: 10px;
position: relative;
}
/* 确保滚动区域有正确的滚动行为 */
.tabPaneBox {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* 隐藏滚动条但保留功能 */
.tabPaneBox::-webkit-scrollbar {
width: 6px;
}
.tabPaneBox::-webkit-scrollbar-track {
background: #f1f1f1;
}
.tabPaneBox::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.tabPaneBox::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
} }
.overviewBox { .overviewBox {
display: flex; display: flex;
......
src/views/sign/FnaList/index.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
> >
<!-- 查询条件插槽 --> <!-- 查询条件插槽 -->
<template #searchForm> <template #searchForm>
<el-form :model="queryParams" ref="queryRef" label-width="78px"> <el-form :model="queryParams" ref="queryRef" label-width="78px" label-position="top">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :sm="12" :lg="6" :xs="24"> <el-col :sm="12" :lg="6" :xs="24">
<el-form-item label="创建时间"> <el-form-item label="创建时间">
...@@ -176,15 +176,16 @@ const operationBtnList = ref([ ...@@ -176,15 +176,16 @@ const operationBtnList = ref([
icon: 'Plus', icon: 'Plus',
type: 'primary', type: 'primary',
direction: 'left', direction: 'left',
size: 'small', size: 'large',
click: handleAdd click: handleAdd
}, },
{ {
label: '搜索', label: '搜索',
icon: 'Search', icon: 'Search',
type: 'primary', type: 'primary',
direction: 'right', direction: 'right',
size: 'small', size: 'large',
click: handleQuery click: handleQuery
}, },
{ {
...@@ -192,7 +193,7 @@ const operationBtnList = ref([ ...@@ -192,7 +193,7 @@ const operationBtnList = ref([
icon: 'Refresh', icon: 'Refresh',
type: 'info', type: 'info',
direction: 'right', direction: 'right',
size: 'small', size: 'large',
click: resetQuery click: resetQuery
} }
]) ])
......
src/views/sign/appointment/index.vue
...@@ -467,7 +467,7 @@ function resetQuery() { ...@@ -467,7 +467,7 @@ function resetQuery() {
proxy.resetForm('queryRef') proxy.resetForm('queryRef')
queryParams.value = { queryParams.value = {
pageNo: 1, pageNo: 1,
pageSize: 8, pageSize: 10,
startTime: '', startTime: '',
endTime: '' endTime: ''
} }
...@@ -487,21 +487,6 @@ function handleDelete(row) { ...@@ -487,21 +487,6 @@ function handleDelete(row) {
}) })
.catch(() => {}) .catch(() => {})
} }
/** 重置操作表单 */
function reset() {
form.value = {
pageNo: 1,
pageSize: 8
}
proxy.resetForm('tenantRef')
}
/** 新增按钮操作 */
function handleAdd() {
router.push('/sign/FnaList/edit?type=add')
}
/** 修改按钮操作 */ /** 修改按钮操作 */
function handleUpdate(row) { function handleUpdate(row) {
// 对预约status进行转换，到编辑页面在转换会有时机问题 // 对预约status进行转换，到编辑页面在转换会有时机问题
......
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