Skip to content

Y
yd-csf-front
Commit c58ec623 by Sweet Zhang
Options

应收款管理、弹窗组件修改

parent 44ffb5e2
Showing with 268 additions and 119 deletions
index.html
...@@ -33,6 +33,9 @@ ...@@ -33,6 +33,9 @@
color: #383838; color: #383838;
padding: 0.2em 0; padding: 0.2em 0;
} }
.el-dialog__header.dialog-header.show-close {
padding-right: 0 ;
}
#loader-wrapper { #loader-wrapper {
position: fixed; position: fixed;
......
src/App.vue
<template> <template>
<el-watermark :font="font" :content="content">
<router-view /> <router-view />
</el-watermark>
</template> </template>
<script setup> <script setup>
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme' import { handleThemeStyle } from '@/utils/theme'
import { reactive } from 'vue'
const font = reactive({
color: 'rgba(0, 0, 0, .15)',
})
const content = reactive('csf')
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
......
src/api/financial/commission.js
...@@ -256,3 +256,19 @@ export function expectedFortuneStatistics(data) { ...@@ -256,3 +256,19 @@ export function expectedFortuneStatistics(data) {
data: data data: data
}) })
} }
// 入账记录查询
export function commissionEntryRecord(data) {
return request({
url: '/csf/api/commission/compare/records',
method: 'post',
data: data
})
}
// 入账操作记录查询
export function commissionEntryEditRecords(data) {
return request({
url: '/csf/api/commission/edit/records',
method: 'post',
data: data
})
}
src/components/commonDialog/index.vue
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
:close-on-click-modal="closeOnClickModal" :close-on-click-modal="closeOnClickModal"
:before-close="handleClose" :before-close="handleClose"
center center
:show-close="false" :show-close="showClose"
header-class="dialog-header"
> >
<template #header> <template #header>
<div class="titleBox">{{ dialogTitle }}</div> <div class="titleBox">{{ dialogTitle }}</div>
...@@ -18,7 +19,7 @@ ...@@ -18,7 +19,7 @@
</div> </div>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer" v-if="showAction">
<!-- 取消按钮 --> <!-- 取消按钮 -->
<el-button type="info" plain v-if="showCancle" @click="close">{{ cancleText }}</el-button> <el-button type="info" plain v-if="showCancle" @click="close">{{ cancleText }}</el-button>
<!-- 确认按钮 --> <!-- 确认按钮 -->
...@@ -50,7 +51,14 @@ const props = defineProps({ ...@@ -50,7 +51,14 @@ const props = defineProps({
type: String, type: String,
default: '确认' default: '确认'
}, },
showAction: {
type: Boolean,
default: true
},
showClose: {
type: Boolean,
default: false
},
showConfirm: { showConfirm: {
type: Boolean, type: Boolean,
default: true default: true
...@@ -78,11 +86,9 @@ const props = defineProps({ ...@@ -78,11 +86,9 @@ const props = defineProps({
const showDialog = ref(props.openDialog) const showDialog = ref(props.openDialog)
const emit = defineEmits(['confirm', 'close']) const emit = defineEmits(['confirm', 'close'])
const close = () => { const close = () => {
showDialog.value = false
emit('close') emit('close')
} }
const confirm = () => { const confirm = () => {
showDialog.value = false
emit('confirm') emit('confirm')
} }
const handleClose = done => { const handleClose = done => {
...@@ -109,6 +115,7 @@ watch( ...@@ -109,6 +115,7 @@ watch(
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 15px 0; padding: 15px 0;
color: rgba(0,0,0,0.9);
} }
.content { .content {
padding: 0 15px; padding: 0 15px;
...@@ -120,4 +127,5 @@ watch( ...@@ -120,4 +127,5 @@ watch(
align-items: center; align-items: center;
padding: 20px 0; padding: 20px 0;
} }
</style> </style>
src/views/financialCenter/receivables.vue
<template> statistics-cards<template>
<CommonPage <CommonPage :operationBtnList="operationBtnList" :showSearchForm="true" :show-pagination="true" :total="pageTotal"
:operationBtnList="operationBtnList" :current-page="currentPage" :page-size="pageSize" @size-change="handleSizeChange"
:showSearchForm="true" @current-change="handleCurrentChange">
:show-pagination="true"
:total="pageTotal"
:current-page="currentPage"
:page-size="pageSize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
<!-- 搜索区域 --> <!-- 搜索区域 -->
<template #searchForm> <template #searchForm>
<SearchForm <SearchForm ref="searchFormRef" v-model="searchFormData" :fields="searchFields" label-position="top"
ref="searchFormRef" :label-width="null" :inline="false" :gutter="20" class="custom-search-form" />
v-model="searchFormData"
:fields="searchFields"
label-position="top"
:label-width="null"
:inline="false"
:gutter="20"
class="custom-search-form"
/>
</template> </template>
<!-- 列表区域 --> <!-- 列表区域 -->
<template #table> <template #table>
<!-- 统计信息卡片 -->
<div class="statistics-cards" v-if="statisticsData.totalPolicyCount > 0">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
<el-statistic title="应收款总金额" :value="statisticsData.totalAmount" />
</el-col>
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
<el-statistic title="已入账金额" :value="statisticsData.totalPaidAmount" />
</el-col>
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
<el-statistic title="待入账金额（估）" :value="statisticsData.pendingPaidAmount" />
</el-col>
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
<el-statistic title="已入账比例" :value="statisticsData.paidAmountRatio" />
</el-col>
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
<el-statistic title="总保单数" :value="statisticsData.totalPolicyCount" />
</el-col>
</el-row>
</div>
<!-- 应收款管理列表 --> <!-- 应收款管理列表 -->
<el-table <el-table :data="tableData" height="400" border highlight-current-row style="width: 100%"
:data="tableData" v-loading="loading">
height="400"
border
highlight-current-row
style="width: 100%"
v-loading="loading"
>
<el-table-column prop="commissionBizType" label="应收款类型" width="120" fixed="left" sortable /> <el-table-column prop="commissionBizType" label="应收款类型" width="120" fixed="left" sortable />
<el-table-column prop="receivableNo" label="应收款编号" width="120" /> <el-table-column prop="receivableNo" label="应收款编号" width="120" />
<el-table-column prop="policyNo" label="保单号" width="120" /> <el-table-column prop="policyNo" label="保单号" width="120" />
...@@ -88,62 +86,79 @@ ...@@ -88,62 +86,79 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="remark" label="备注" width="150" /> <el-table-column prop="remark" label="备注" width="150" />
<el-table-column fixed="right" label="操作" min-width="120">
<template #default="{ row }">
<el-popover placement="right" :width="200" trigger="click">
<template #reference>
<el-icon>
<MoreFilled />
</el-icon>
</template>
<el-menu @select="handleSelect($event, row)" popper-class="custom-menu">
<el-menu-item :index="item.value" v-for="item in dropdownItems" :key="item.value">{{
item.label
}}</el-menu-item>
</el-menu>
</el-popover>
</template>
</el-table-column>
</el-table> </el-table>
</template> </template>
</CommonPage> </CommonPage>
<!-- 统计信息卡片 --> <!-- 比对状态表格弹窗-->
<div class="statistics-cards" v-if="statisticsData.totalPolicyCount > 0"> <CommonDialog dialogTitle="入账记录" dialogWidth="80%" :openDialog="entryRecordDialogTableVisible" :showAction="false" :showClose="true" @close="entryRecordDialogTableVisible=false">
<el-row :gutter="20"> <el-table :data="entryRecordDialogTableData" border style="width: 100%">
<el-col :xs="24" :sm="12" :md="4" :lg="4"> <el-table-column v-for="item in entryRecordDialogTableColumns" :key="item.property"
<el-card shadow="hover" class="statistics-card"> :property="item.property" :label="item.label" :width="item.width" />
<div class="card-content"> <el-table-column fixed="right" label="操作" min-width="120">
<div class="card-label">应收款总金额</div> <template #default>
<div class="card-value">{{ formatCurrency(statisticsData.totalAmount) }}</div> <el-button link type="primary" size="small" @click="handleClick">
</div> 查看比对记录
</el-card> </el-button>
</el-col> </template>
<el-col :xs="24" :sm="12" :md="4" :lg="4"> </el-table-column>
<el-card shadow="hover" class="statistics-card"> </el-table>
<div class="card-content"> </CommonDialog>
<div class="card-label">已入账金额</div>
<div class="card-value">{{ formatCurrency(statisticsData.totalPaidAmount) }}</div> <!-- 操作记录表格弹窗-->
</div> <CommonDialog dialogTitle="操作记录" dialogWidth="80%" :openDialog="actionRecordsDialogVisible" :showAction="false" :showClose="true" @close="actionRecordsDialogVisible=false">
</el-card> <el-table :data="actionRecordsDialogTableData" border style="width: 100%">
</el-col> <el-table-column v-for="item in actionRecordsDialogTableColumns" :key="item.property"
<el-col :xs="24" :sm="12" :md="4" :lg="4"> :property="item.property" :label="item.label" :width="item.width" />
<el-card shadow="hover" class="statistics-card"> </el-table>
<div class="card-content"> </CommonDialog>
<div class="card-label">待入账金额</div>
<div class="card-value">{{ formatCurrency(statisticsData.pendingPaidAmount) }}</div> <!-- 设置状态 弹窗-->
</div> <CommonDialog dialogTitle="设置入账状态" dialogWidth="80%" :openDialog="setStatusDialogTableVisible" @close="setStatusDialogTableVisible=false" @confirm="setStatusDialogTableVisible=false">
</el-card> <el-form :model="form">
</el-col> <el-form-item label="入账状态" label-width="120">
<el-col :xs="24" :sm="12" :md="4" :lg="4"> <el-select v-model="form.status" placeholder="请选择入账状态">
<el-card shadow="hover" class="statistics-card"> <el-option label="Zone No.1" value="shanghai" />
<div class="card-content"> <el-option label="Zone No.2" value="beijing" />
<div class="card-label">已入账比例</div> </el-select>
<div class="card-value">{{ statisticsData.paidAmountRatio }}</div> </el-form-item>
</div> <el-form-item label="修改理由" :label-width="120">
</el-card> <el-input v-model="form.desc" type="textarea" />
</el-col> </el-form-item>
<el-col :xs="24" :sm="12" :md="4" :lg="4"> </el-form>
<el-card shadow="hover" class="statistics-card"> <template #footer>
<div class="card-content"> <div class="dialog-footer">
<div class="card-label">总保单数</div> <el-button @click="setStatusDialogTableVisible = false">取消</el-button>
<div class="card-value">{{ statisticsData.totalPolicyCount }}</div> <el-button type="primary" @click="setStatusDialogTableVisible = false">
</div> 确认
</el-card> </el-button>
</el-col>
</el-row>
</div> </div>
</template>
</CommonDialog>
</template> </template>
<script setup name="Receivables"> <script setup name="Receivables">
import CommonPage from '@/components/commonPage' import CommonPage from '@/components/commonPage'
import CommonDialog from '@/components/commonDialog'
import { ref, reactive, onMounted, watch } from 'vue' import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { formatCurrency } from '@/utils/number' import { formatCurrency } from '@/utils/number'
import { receivedFortuneList } from '@/api/financial/commission' import { receivedFortuneList, commissionEntryRecord, commissionEntryEditRecords } from '@/api/financial/commission'
import SearchForm from '@/components/SearchForm/index.vue' import SearchForm from '@/components/SearchForm/index.vue'
import { searchCompanies, searchCommissionTypes } from '@/api/search' import { searchCompanies, searchCommissionTypes } from '@/api/search'
// 分页相关 // 分页相关
...@@ -151,7 +166,84 @@ const currentPage = ref(1) ...@@ -151,7 +166,84 @@ const currentPage = ref(1)
const pageSize = ref(10) const pageSize = ref(10)
const pageTotal = ref(0) const pageTotal = ref(0)
const loading = ref(false) const loading = ref(false)
// 表格操作菜单
const dropdownItems = [
{ label: '入账记录', value: 'entryRecord' },
{ label: '设置状态', value: 'setStatus' }
]
const entryRecordDialogTableVisible = ref(false)
const setStatusDialogTableVisible = ref(false)
const actionRecordsDialogVisible = ref(false)
const actionRecordsDialogTableData = ref([])
const entryRecordDialogTableData = ref([])
const entryRecordDialogTableColumns = ref([])
const actionRecordsDialogTableColumns = ref([])
const form = reactive({
status: '',
desc: '',
})
const selectedRow = ref(null)
const handleSelect = (e, row) => {
console.log(e, row)
selectedRow.value = row
if (e === 'entryRecord') {
entryRecordDialogTableVisible.value = true
entryRecordDialogTableColumns.value = [
{ property: 'commissionPeriod', label: '佣金期数', width: '100' },
{ property: 'totalPeriod', label: '总期数', width: '150' },
{ property: 'exchangeRate', label: '结算汇率（实）', width: '150' },
{ property: 'currency', label: '入账币种', width: '150' },
{ property: 'amount', label: '入账金额', width: '150' },
{ property: 'commissionPeriod', label: '入账比例', width: '150' },
{ property: 'commissionPeriod', label: '入账日', width: '150' },
{ property: 'status', label: '入账状态', width: '150' }
]
// 加载入账记录-假数据等待接口修改
loadEntryRecordData(selectedRow.value.commissionExpectedBizId).then(records => {
entryRecordDialogTableData.value = records =
[{
commissionPeriod: '2023-08-01',
totalPeriod: '2023-08-31',
exchangeRate: '1.2345',
currency: '假数据，等接口改CNY',
amount: '10000.00',
commissionPeriod: '10%',
commissionPeriod: '2023-08-01',
status: '已入账'
}]
})
} else if (e === 'setStatus') {
setStatusDialogTableVisible.value = true
}
}
const handleClick = () => {
actionRecordsDialogVisible.value = true
actionRecordsDialogTableColumns.value = [
{ property: 'commissionPeriod', label: '检核年月', width: '100' },
{ property: 'totalPeriod', label: '比对状态', width: '150' },
{ property: 'exchangeRate', label: '入账比例', width: '150' },
{ property: 'currency', label: '应入账比例', width: '150' },
{ property: 'amount', label: '对账公司', width: '150' },
{ property: 'createTime', label: '比对时间', width: '150' },
{ property: 'userName', label: '比对人', width: '150' }
]
// 加载入账操作记录-假数据等待接口修改
loadEntryEditRecordData(selectedRow.value.commissionExpectedBizId).then(records => {
actionRecordsDialogTableData.value = records =
[{
commissionPeriod: '2023-08-01',
totalPeriod: '2023-08-31',
exchangeRate: '1.2345',
currency: '假数据，等接口改CNY',
amount: '10000.00',
commissionPeriod: '10%',
commissionPeriod: '2023-08-01',
status: '已入账'
}]
})
}
// 搜索表单数据 - 修正字段名 // 搜索表单数据 - 修正字段名
const searchFormData = reactive({ const searchFormData = reactive({
...@@ -198,18 +290,6 @@ const searchFields = ref([ ...@@ -198,18 +290,6 @@ const searchFields = ref([
label: '入账状态', label: '入账状态',
placeholder: '请选择入账状态', placeholder: '请选择入账状态',
colSpan: 6, colSpan: 6,
options: [
{ label: '已入账', value: '1' },
{ label: '待入账', value: '0' },
{ label: '部分入账', value: '2' }
]
},
{
type: 'remote-multi-select',
field: 'commissionNameList',
label: '入账项目',
placeholder: '请输入关键词搜索',
colSpan: 6,
remoteConfig: { remoteConfig: {
type: 'commissionType', type: 'commissionType',
apiMethod: searchCommissionTypes, apiMethod: searchCommissionTypes,
...@@ -219,12 +299,20 @@ const searchFields = ref([ ...@@ -219,12 +299,20 @@ const searchFields = ref([
remark: item.remark remark: item.remark
})), })),
defaultOptions: [ defaultOptions: [
{ label: '佣金', value: 'COMMISSION' }, { label: '已入账', value: '1' },
{ label: '服务费', value: 'SERVICE_FEE' } { label: '待入账', value: '0' },
{ label: '部分入账', value: '2' }
] ]
} }
}, },
{ {
type: 'input',
field: 'commissionNameList',
label: '入账项目',
placeholder: '请输入关键词搜索',
colSpan: 6,
},
{
type: 'remote-multi-select', type: 'remote-multi-select',
field: 'reconciliationCompanyList', field: 'reconciliationCompanyList',
label: '对账公司', label: '对账公司',
...@@ -244,28 +332,18 @@ const searchFields = ref([ ...@@ -244,28 +332,18 @@ const searchFields = ref([
colSpan: 6, colSpan: 6,
}, },
{ {
type: 'remote-multi-select', type: 'input',
field: 'insurerBizId', field: 'insurerBizId',
label: '保险公司', label: '保险公司',
placeholder: '请输入关键词搜索保险公司', placeholder: '请输入关键词搜索保险公司',
colSpan: 6, colSpan: 6,
remoteConfig: {
type: 'insurer',
apiMethod: (params) => searchCompanies({ ...params, type: 'insurer' }),
defaultOptions: []
}
}, },
{ {
type: 'remote-multi-select', type: 'input',
field: 'productLaunchBizId', field: 'productLaunchBizId',
label: '产品计划', label: '产品计划',
placeholder: '请输入关键词搜索产品计划', placeholder: '请输入关键词搜索产品计划',
colSpan: 6, colSpan: 6,
remoteConfig: {
type: 'product',
apiMethod: (params) => searchCompanies({ ...params, type: 'product' }),
defaultOptions: []
}
}, },
{ {
type: 'select', type: 'select',
...@@ -280,16 +358,11 @@ const searchFields = ref([ ...@@ -280,16 +358,11 @@ const searchFields = ref([
] ]
}, },
{ {
type: 'remote-multi-select', type: 'input',
field: 'teamBizId', field: 'teamBizId',
label: '出单团队', label: '出单团队',
placeholder: '请输入关键词搜索出单团队', placeholder: '请输入关键词搜索出单团队',
colSpan: 6, colSpan: 6,
remoteConfig: {
type: 'team',
apiMethod: (params) => searchCompanies({ ...params, type: 'team' }),
defaultOptions: []
}
} }
]) ])
...@@ -334,15 +407,10 @@ const handleReset = () => { ...@@ -334,15 +407,10 @@ const handleReset = () => {
} }
const handleQuery = async () => { const handleQuery = async () => {
// 表单验证
// const valid = await proxy.$refs.searchFormRef.validate()
// if (!valid) return
ElMessage.info('执行查询操作')
loadTableData() loadTableData()
} }
// 控制要显示的默认按钮 // 控制要显示的默认按钮
// const visibleDefaultButtons = ref(['add', 'import', 'export']) // 只显示新增和查询两个默认按钮 const visibleDefaultButtons = ref(['add', 'import', 'export']) // 只显示新增和查询两个默认按钮
// 按钮配置 // 按钮配置
const operationBtnList = ref([ const operationBtnList = ref([
{ {
...@@ -409,7 +477,42 @@ const loadTableData = async () => { ...@@ -409,7 +477,42 @@ const loadTableData = async () => {
} catch (error) { } catch (error) {
console.error('加载数据失败:', error) console.error('加载数据失败:', error)
ElMessage.error('加载数据失败') // ElMessage.error('加载数据失败')
} finally {
loading.value = false
}
}
// 入账记录查询
const loadEntryRecordData = async (cbd) => {
loading.value = true
try {
const params = {
commissionBizId: cbd
}
const response = await commissionEntryRecord(params)
const records = response.data.records
return records
} catch (error) {
console.error('加载数据失败:', error)
// ElMessage.error('加载数据失败')
} finally {
loading.value = false
}
}
// 入账操作记录查询
const loadEntryEditRecordData = async (cbd) => {
loading.value = true
try {
const params = {
commissionBizId: cbd
}
const response = await commissionEntryEditRecords(params)
const records = response.data.records
return records
} catch (error) {
console.error('加载数据失败:', error)
// ElMessage.error('加载数据失败')
} finally { } finally {
loading.value = false loading.value = false
} }
...@@ -424,6 +527,12 @@ onMounted(() => { ...@@ -424,6 +527,12 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.statistics-cards {
margin-bottom: 5px;
background: RGBA(0,82,217,0.03);
border-radius: 8px;
padding: 10px 20px;
}
.page-search-container { .page-search-container {
padding: 20px; padding: 20px;
background: #fff; background: #fff;
...@@ -438,4 +547,7 @@ onMounted(() => { ...@@ -438,4 +547,7 @@ onMounted(() => {
text-align: right; text-align: right;
} }
.el-menu {
border: none;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment