Skip to content

Y
yd-csf-front
Commit 34364a66 by yuzhenWang
Options

封装页面组件

parent 0d20348c
Showing with 645 additions and 28 deletions
src/api/financial/commission.js
......@@ -214,3 +214,11 @@ export function incomeCompareRecords(data) {
data: data
})
}
// 保单号列表
export function policyData(data) {
return request({
url: '/csf/api/CommissionExpected/list/page',
method: 'post',
data: data
})
}
src/api/sign/underwritingMain.js
......@@ -213,3 +213,11 @@ export function changePolicyStatus(data) {
})
}
// 签单人姓名列表
export function signName(data) {
return request({
url: '/csf/api/CommissionExpected/list/page',
method: 'post',
data: data
})
}
src/assets/styles/index.scss
......@@ -11,7 +11,8 @@ body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
sans-serif;
}
label {
......@@ -91,7 +92,7 @@ div:focus {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
content: ' ';
clear: both;
height: 0;
}
......@@ -105,7 +106,8 @@ aside {
display: block;
line-height: 32px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
......@@ -122,7 +124,8 @@ aside {
//main-container全局样式
.app-container {
padding: 20px;
padding: 10px;
box-sizing: border-box;
}
.components-container {
......@@ -131,7 +134,7 @@ aside {
}
.text-center {
text-align: center
text-align: center;
}
.sub-navbar {
......@@ -142,7 +145,13 @@ aside {
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
background: linear-gradient(
90deg,
rgba(32, 182, 249, 1) 0%,
rgba(32, 182, 249, 1) 0%,
rgba(33, 120, 241, 1) 100%,
rgba(33, 120, 241, 1) 100%
);
.subtitle {
font-size: 20px;
......
src/components/commonDialog/index.vue 0 → 100644
<template>
<div class="commonDialog-container">
<el-dialog
style="padding: 0 !important"
v-model="showDialog"
:width="dialogWidth"
append-to-body
:close-on-click-modal="closeOnClickModal"
:before-close="handleClose"
center
:show-close="false"
>
<template #header>
<div class="titleBox">{{ dialogTitle }}</div>
</template>
<slot class="content"></slot>
<template #footer>
<div class="dialog-footer">
<!-- 取消按钮 -->
<el-button type="info" plain v-if="showCancle" @click="close">{{ cancleText }}</el-button>
<!-- 确认按钮 -->
<el-button type="primary" v-if="showConfirm" @click="confirm">{{
confirmText
}}</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, computed, watch, nextTick, onMounted, defineExpose } from 'vue'
const props = defineProps({
dialogTitle: {
type: String,
default: ''
},
cancleText: {
type: String,
default: '取消'
},
showCancle: {
type: Boolean,
default: true
},
confirmText: {
type: String,
default: '确认'
},
showConfirm: {
type: Boolean,
default: true
},
dialogWidth: {
type: [String, Number],
default: '500px'
},
// 是否点击遮罩层关闭弹窗
closeOnClickModal: {
type: Boolean,
default: true
},
// 打开弹窗
openDialog: {
type: Boolean,
default: true
},
// 打开弹窗
center: {
type: Boolean,
default: true
}
})
const showDialog = ref(props.openDialog)
const emit = defineEmits(['confirm', 'close'])
const close = () => {
showDialog.value = false
emit('close')
}
const confirm = () => {
showDialog.value = false
emit('confirm')
}
const handleClose = done => {
close()
done()
}
watch(
() => props.openDialog,
val => {
showDialog.value = val
}
)
</script>
<style scoped lang="scss">
.commonDialog-container {
width: 100%;
}
.titleBox {
width: 100%;
background: rgba(0, 82, 217, 0.05);
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.dialog-footer {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
</style>
src/components/commonPage/index.vue 0 → 100644
<template>
<div class="commonPage-container">
<!-- 条件查询区 -->
<el-card class="cardStyle" v-if="showSearchForm">
<el-row>
<!-- 查询条件插槽 -->
<div ref="searchFormRef" class="search-form-container" :class="{ expanded: isExpanded }">
<slot name="searchForm"></slot>
</div>
<!-- 更多/收起按钮区域 -->
<el-col :span="24" v-if="hasMoreCondition">
<div class="moreBtn">
<el-button v-if="!isExpanded" type="primary" link @click="toggleExpand">
更多<el-icon><Bottom /></el-icon>
</el-button>
<el-button v-else type="primary" link @click="toggleExpand">
收起<el-icon><Top /></el-icon>
</el-button>
</div>
</el-col>
</el-row>
</el-card>
<!-- 表格区域 -->
<el-card class="cardStyle">
<el-row>
<!-- 按钮区域 -->
<el-col :span="24" class="operationBtn">
<div class="operationLeft">
<template v-for="left in leftOperationBtns" :key="left.label">
<el-button
:type="left.type || 'primary'"
:icon="left.icon"
:size="left.size || 'default'"
@click="left.click"
:disabled="left.disabled"
:loading="left.loading"
>
{{ left.label }}
</el-button>
</template>
</div>
<div class="operationRight">
<template v-for="right in rightOperationBtns" :key="right.label">
<el-button
:type="right.type || 'primary'"
:icon="right.icon"
:size="right.size || 'default'"
@click="right.click"
:disabled="right.disabled"
:loading="right.loading"
>
{{ right.label }}
</el-button>
</template>
</div>
</el-col>
<!-- 表格插槽 -->
<slot name="table"></slot>
</el-row>
</el-card>
</div>
</template>
<script setup>
import { ref, computed, watch, nextTick, onMounted, defineExpose } from 'vue'
import { Bottom, Top } from '@element-plus/icons-vue'
const props = defineProps({
// 操作按钮列表
operationBtnList: {
type: Array,
default: () => []
},
// 是否显示查询表单
showSearchForm: {
type: Boolean,
default: true
},
// 分页相关
showPagination: {
type: Boolean,
default: false
},
total: {
type: Number,
default: 0
},
currentPage: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default: () => [10, 20, 50, 100]
},
paginationLayout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
// 默认显示的查询条件数量
defaultVisibleConditions: {
type: Number,
default: 6
}
})
const emit = defineEmits(['size-change', 'current-change', 'btn-click', 'search-toggle'])
// 响应式数据
const isExpanded = ref(false)
const hasMoreCondition = ref(false)
const searchFormRef = ref(null)
const currentPage = ref(props.currentPage)
const pageSize = ref(props.pageSize)
// 计算属性
const leftOperationBtns = computed(() => {
return props.operationBtnList.filter(btn => btn.direction === 'left' || !btn.direction)
})
const rightOperationBtns = computed(() => {
return props.operationBtnList.filter(btn => btn.direction === 'right')
})
// 方法
const toggleExpand = () => {
isExpanded.value = !isExpanded.value
}
const checkConditions = () => {
if (!searchFormRef.value) return
nextTick(() => {
// 查找表单中的所有表单项
const formItems = searchFormRef.value.querySelectorAll('.el-form-item')
const formButtons = searchFormRef.value.querySelectorAll('.el-button')
const totalItems = formItems.length + formButtons.length
hasMoreCondition.value = totalItems > props.defaultVisibleConditions
if (!isExpanded.value && hasMoreCondition.value) {
// 隐藏超出默认数量的条件
let visibleCount = 0
let hiddenCount = 0
// 处理表单项
formItems.forEach((item, index) => {
if (visibleCount < props.defaultVisibleConditions) {
item.style.display = ''
visibleCount++
} else {
item.style.display = 'none'
hiddenCount++
}
})
// 处理按钮项
formButtons.forEach((button, index) => {
if (visibleCount < props.defaultVisibleConditions) {
button.style.display = ''
visibleCount++
} else {
button.style.display = 'none'
hiddenCount++
}
})
} else {
// 显示所有条件
formItems.forEach(item => (item.style.display = ''))
formButtons.forEach(button => (button.style.display = ''))
}
})
}
const handleBtnClick = btn => {
emit('btn-click', btn)
if (btn.click && typeof btn.click === 'function') {
btn.click()
}
}
// 暴露给父组件的方法
defineExpose({
checkConditions,
toggleExpand
})
// 监听器
watch(isExpanded, () => {
checkConditions()
})
watch(
() => props.currentPage,
val => {
currentPage.value = val
}
)
watch(
() => props.pageSize,
val => {
pageSize.value = val
}
)
// 生命周期
onMounted(() => {
if (props.showSearchForm) {
checkConditions()
}
})
</script>
<style scoped>
.commonPage-container {
width: 100%;
}
.cardStyle {
margin-bottom: 10px;
border: none !important;
}
.moreBtn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.operationBtn {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.operationLeft,
.operationRight {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pagination-container {
display: flex;
justify-content: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--el-border-color-lighter);
}
/* 搜索表单容器样式 */
.search-form-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 100%;
align-items: flex-end;
}
/* 响应式调整 */
@media (max-width: 768px) {
.operationBtn {
flex-direction: column;
gap: 10px;
}
.operationLeft,
.operationRight {
width: 100%;
justify-content: center;
}
.search-form-container {
flex-direction: column;
}
.search-form-container :deep(.el-form-item) {
width: 100% !important;
}
}
</style>
src/formJson/policyInfo.js
......@@ -235,8 +235,8 @@ const policyInfo = [
lg: 8 //栅格布局份数
},
{
label: '首期待交保费',
key: 'initialPremiumDue',
label: '首期已交保费',
key: 'initialPremiumPaid',
domType: 'Input',
inputType: 'number',
required: false,
......@@ -251,8 +251,8 @@ const policyInfo = [
lg: 8 //栅格布局份数
},
{
label: '首期已交保费',
key: 'initialPremiumPaid',
label: '首期待交保费',
key: 'initialPremiumDue',
domType: 'Input',
inputType: 'number',
required: false,
......@@ -266,6 +266,7 @@ const policyInfo = [
sm: 8, //栅格布局份数
lg: 8 //栅格布局份数
},
{
label: '最晚缴费日期',
key: 'latestPaymentDate',
......
src/store/modules/dict.js
import { signName } from '../../api/sign/underwritingMain'
const useDictStore = defineStore('dict', {
state: () => ({
dict: new Array(),
......@@ -6,7 +8,8 @@ const useDictStore = defineStore('dict', {
additionalProductList: [], //附加险产品数据
insureCompanyList: [], //保险公司数据
clientUserList: [], //用户数据，转介人
dictTypeLists: [] //字典列表，根据请求得不同会变化，所以使用之前需要使用useDictLists请求数据
dictTypeLists: [], //字典列表，根据请求得不同会变化，所以使用之前需要使用useDictLists请求数据
signNameList: []
}),
actions: {
// 获取字典
......@@ -77,6 +80,10 @@ const useDictStore = defineStore('dict', {
// 设置字典列表
setDictTypeLists(typeList) {
this.dictTypeLists = typeList
},
// 设置签单人姓名列表
setSignNameList(nameList) {
this.signNameList = nameList
}
}
})
......
src/utils/common.js
......@@ -13,8 +13,8 @@ export default function deepClone(obj) {
return clonedObj
}
}
// 处理用户名相同的情况
export function processUserName(users) {
// 处理用户名重名时返回姓名+手机号
export function processSameUserName(users) {
const nameCountMap = new Map()
// 统计 realName 重复情况
......@@ -46,3 +46,32 @@ export function processUserName(users) {
}
})
}
// 处理用户名返回姓名+手机号（手机号固定11位）
export function processUserName(users) {
return users.map(user => {
processUserName
const mobile = user.mobile || ''
if (mobile.length === 11) {
const prefix = mobile.substring(0, 3)
const suffix = mobile.substring(7)
return {
...user,
showName: `${user.realName || ''} ${prefix}****${suffix}`
}
} else if (mobile) {
// 非11位手机号，显示部分信息
const prefix = mobile.substring(0, Math.min(3, mobile.length))
const suffix = mobile.substring(Math.max(mobile.length - 2, 0))
return {
...user,
showName: `${user.realName || ''} ${prefix}***${suffix}`
}
} else {
return {
...user,
showName: user.realName || ''
}
}
})
}
src/views/financialCenter/financialIncome.vue
......@@ -239,7 +239,31 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="保单号" prop="policyNo">
<el-input v-model="incomeForm.policyNo" placeholder="请输入保单号" />
<el-select
v-model="incomeForm.policyNo"
filterable
remote
reserve-keyword
placeholder="请输入保单号"
:remote-method="searchPolicy"
:loading="policyLoading"
@change="plilcyChange"
remote-show-suffix
>
<el-option
v-if="policyOptions.length === 0"
disabled
value=""
label="暂无数据"
style="color: #909399; text-align: center"
/>
<el-option
v-for="item in policyOptions"
:key="item.policyBizId"
:label="item.policyNo"
:value="item.policyNo"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
......@@ -256,12 +280,16 @@
</el-col>
<el-col :span="12">
<el-form-item label="当前期数" prop="commissionPeriod">
<el-input-number v-model="incomeForm.commissionPeriod" :min="1" />
<el-input-number
v-model="incomeForm.commissionPeriod"
:min="1"
@change="periodChange"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="总期数" prop="totalPeriod">
<el-input-number v-model="incomeForm.totalPeriod" :min="1" />
<el-input-number v-model="incomeForm.totalPeriod" :min="1" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="12">
......@@ -437,7 +465,8 @@ import {
updatePolicyCommission,
incomeStatistics,
incomeEditRecords,
incomeCompareRecords
incomeCompareRecords,
policyData
} from '@/api/financial/commission'
import FileUpload from '@/components/FileUpload/index'
......@@ -449,8 +478,8 @@ import { listType } from '@/api/system/dict/type'
// 添加表格引用
const tableRef = ref()
const statisticList = ref([
{ name: '总金额', value: '0', key: 'totalAmount', format: true },
{ name: '总入账金额', value: '0', key: 'totalPaidAmount', format: true },
{ name: '合计应入账金额', value: '0', key: 'totalAmount', format: true },
{ name: '合计实际入账金额', value: '0', key: 'totalPaidAmount', format: true },
{ name: '待入账金额', value: '0', key: 'pendingPaidAmount', format: true },
{ name: '已入账比例', value: '0', key: 'paidAmountRatio', format: false },
{ name: '总保单数', value: '0', key: 'totalPolicyCount', format: false }
......@@ -478,6 +507,46 @@ const currentRowOperation = ref({})
const isSearch = ref(false)
const editStatus = ref('add')
const policyLoading = ref(false)
const policyOptions = ref([])
// 搜索保单方法
const searchPolicy = query => {
policyLoading.value = true
try {
const params = {
policyNo: query,
pageNo: 1,
pageSize: 10
}
policyData(params).then(response => {
policyOptions.value = response.data.records
})
} catch (error) {
console.error('保单号搜索失败', error)
policyOptions.value = []
} finally {
policyLoading.value = false
}
}
const plilcyChange = () => {
policyOptions.value.forEach(item => {
if (incomeForm.policyNo == item.policyNo) {
incomeForm.premium = item.premium
incomeForm.totalPeriod = item.totalPeriod
}
})
}
const periodChange = () => {
if (
incomeForm.totalPeriod &&
incomeForm.commissionPeriod &&
incomeForm.commissionPeriod > incomeForm.totalPeriod
) {
ElMessage.error('当前期数不能大于总期数')
incomeForm.commissionPeriod = '1'
}
}
const getAlignmentData = () => {
let data = {
commissionBizId: currentRowOperation.value.commissionBizId,
......@@ -864,7 +933,7 @@ const handleAdd = () => {
currency: 'HKD',
commissionDate: '',
remark: '',
exchangeRate: '',
exchangeRate: '7.80',
premium: '',
status: ''
})
......
src/views/sign/FnaList/components/customer.vue
......@@ -477,6 +477,7 @@ const processFormData = async () => {
editStatus.value = true
} else {
editStatus.value = false
form.value.customerType = 'INDIVIDUAL'
processedCustomerData.value = oldCustomerData.value = processedData
}
}
......
src/views/sign/FnaList/components/fanForm.vue
......@@ -876,7 +876,6 @@ const setFormValue = (obj, formData) => {
}
}
}
}
}
}
......
src/views/sign/appointment/appointmentEdit.vue
......@@ -318,7 +318,7 @@ import {
editAppointmentDetail,
uploadExcel
} from '@/api/sign/appointment'
import { getPolicyfollow, getPolicyInfo } from '@/api/sign/underwritingMain'
import { getPolicyfollow, getPolicyInfo, signName } from '@/api/sign/underwritingMain'
import { listTenantUser, getInsuranceProductList, getAdditionalProductList } from '@/api/common'
import { Check } from '@element-plus/icons-vue'
import { ref, nextTick, onUnmounted } from 'vue'
......@@ -588,6 +588,28 @@ function getCustomerInfo(customerBizId) {
}
// 获取各个流程所需要得字典数据
const getDictsData = async () => {
if (route.query.source == 'policyList') {
const params4 = {
pageNo: 1,
pageSize: 10,
policyNo: ''
}
const response4 = await signName(params4)
if (response4.code == 200) {
response4.data.records = response4.data.records.map(item => {
// return {
// ...item,
// label: item.productName,
// value: item.additionalProductBizId
// }
return item
})
dictStore.setSignNameList(response4.data.records)
console.log('response4', response4.data.records)
}
return
}
// 获取租户用户列表
const params1 = {
tenantBizId: userStore.projectInfo.tenantBizId,
......@@ -631,6 +653,7 @@ const getDictsData = async () => {
})
dictStore.setAdditionalProductList(response3.data.records)
}
proxy.useDictLists([
'csf_employment',
'sys_no_yes',
......@@ -1082,6 +1105,7 @@ if (route.query.source == 'policyList') {
idsObj.value.appointmentBizId = route.query.appointmentBizId
isEmbed.value = route.query.embed
getDictsData()
tabsList.value = [
{
label: '预计来佣',
......
src/views/sign/underwritingMain/components/expectedCommission.vue
......@@ -528,11 +528,15 @@ watch(
newVal => {
if (newVal === 'expectedCommission') {
searchOptions.value['reconciliationCompany'] = dictStore.insureCompanyList
getTableList()
if (props.policyNo) {
getTableList()
}
}
}
)
getTableList()
if (props.policyNo) {
getTableList()
}
</script>
<style lang="scss" scoped>
.domEmpty {
......
src/views/sign/underwritingMain/components/policyInfo.vue
......@@ -117,12 +117,37 @@
<span class="required-label">姓名</span>
</template>
<template #default="scope">
<el-input
<!-- <el-input
size="default"
placeholder="请输入"
v-model="scope.row.signer"
:disabled="editStatus"
/>
/> -->
<el-select
v-model="scope.row.signer"
filterable
remote
reserve-keyword
placeholder="请选择"
:remote-method="searchName"
:loading="nameLoading"
remote-show-suffix
:disabled="editStatus"
>
<el-option
v-if="nameOptions.length === 0"
disabled
value=""
label="暂无数据"
style="color: #909399; text-align: center"
/>
<el-option
v-for="item in nameOptions"
:key="item.policyBizId"
:label="item.policyNo"
:value="item.policyNo"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="手机号" prop="phone" align="center">
......@@ -246,7 +271,7 @@ import {
getAllCompanys,
getClientUser
} from '@/api/common'
import { updatePolicyfollow, getPolicyfollow } from '@/api/sign/underwritingMain'
import { updatePolicyfollow, getPolicyfollow, signName } from '@/api/sign/underwritingMain'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const dictStore = useDictStore() //获取字典数据
......@@ -294,6 +319,28 @@ const {
tempFanFormValue,
tempFanFormData
} = toRefs(data)
const nameLoading = ref(false)
const nameOptions = ref([])
// 搜索签单人姓名方法
const searchName = query => {
nameLoading.value = true
try {
const params = {
policyNo: query,
pageNo: 1,
pageSize: 10
}
signName(params).then(response => {
nameOptions.value = response.data.records
})
} catch (error) {
console.error('保单号搜索失败', error)
nameOptions.value = []
} finally {
nameLoading.value = false
}
}
const disabledDate = time => {
return time.getTime() > Date.now()
}
......@@ -451,7 +498,8 @@ const processFormData = () => {
loading.value = true
// 深拷贝原始数据
const processedData = JSON.parse(JSON.stringify(policyInfo))
// 给签单员姓名加options
nameOptions.value = dictStore.signNameList
for (const section of processedData) {
if (section.fatherRequired) {
rules.value[section.key] = {}
......
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