Skip to content

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

封装货币函数

parent f1cd0c02
Showing with 98 additions and 79 deletions
package.json
...@@ -42,13 +42,16 @@ ...@@ -42,13 +42,16 @@
"xlsx": "^0.18.5" "xlsx": "^0.18.5"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^25.0.3",
"@vitejs/plugin-vue": "5.2.4", "@vitejs/plugin-vue": "5.2.4",
"sass-embedded": "1.89.1", "sass-embedded": "1.89.1",
"typescript": "^5.9.3",
"unplugin-auto-import": "0.18.6", "unplugin-auto-import": "0.18.6",
"unplugin-vue-setup-extend-plus": "1.0.1", "unplugin-vue-setup-extend-plus": "1.0.1",
"vite": "6.3.5", "vite": "6.3.5",
"vite-plugin-compression": "0.5.1", "vite-plugin-compression": "0.5.1",
"vite-plugin-svg-icons": "2.0.1" "vite-plugin-svg-icons": "2.0.1",
"vue-tsc": "^3.1.8"
}, },
"overrides": { "overrides": {
"quill": "2.0.2" "quill": "2.0.2"
......
src/utils/number.js 0 → 100644
// 格式化金额为货币格式
export function formatCurrency(value) {
if (value === undefined || value === null) return '¥0.00'
return '¥' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
}
export default {
formatCurrency
}
\ No newline at end of file
src/views/financialCenter/receivables.vue
<template> <template>
<CommonPage <CommonPage
:operationBtnList="operationBtnList" :operationBtnList="operationBtnList"
:visibleDefaultButtons="visibleDefaultButtons"
:showSearchForm="true" :showSearchForm="true"
:show-pagination="true" :show-pagination="true"
> >
...@@ -10,7 +9,6 @@ ...@@ -10,7 +9,6 @@
<el-form <el-form
:model="searchFormData" :model="searchFormData"
ref="searchFormRef" ref="searchFormRef"
label-width="120px"
label-position="top" label-position="top"
class="search-form" class="search-form"
> >
...@@ -70,47 +68,11 @@ ...@@ -70,47 +68,11 @@
<!-- 列表区域 --> <!-- 列表区域 -->
<template #table> <template #table>
<!-- 统计信息卡片 -->
<div class="statistics-cards" v-if="statisticsData.totalPolicyCount > 0">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<el-card shadow="hover" class="statistics-card">
<div class="card-content">
<div class="card-label">应收款总金额</div>
<div class="card-value">{{ formatCurrency(statisticsData.totalAmount) }}</div>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<el-card shadow="hover" class="statistics-card">
<div class="card-content">
<div class="card-label">已入账金额</div>
<div class="card-value">{{ formatCurrency(statisticsData.totalPaidAmount) }}</div>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<el-card shadow="hover" class="statistics-card">
<div class="card-content">
<div class="card-label">待入账金额</div>
<div class="card-value">{{ formatCurrency(statisticsData.pendingAmount) }}</div>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<el-card shadow="hover" class="statistics-card">
<div class="card-content">
<div class="card-label">总保单数</div>
<div class="card-value">{{ statisticsData.totalPolicyCount }}</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
<!-- 应收款管理列表 --> <!-- 应收款管理列表 -->
<el-table <el-table
:data="tableData" :data="tableData"
height="350" height="260"
border border
highlight-current-row highlight-current-row
style="width: 100%" style="width: 100%"
...@@ -193,13 +155,50 @@ ...@@ -193,13 +155,50 @@
</el-table> </el-table>
</template> </template>
</CommonPage> </CommonPage>
<!-- 统计信息卡片 -->
<div class="statistics-cards" v-if="statisticsData.totalPolicyCount > 0">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<el-card shadow="hover" class="statistics-card">
<div class="card-content">
<div class="card-label">应收款总金额</div>
<div class="card-value">{{ formatCurrency(statisticsData.totalAmount) }}</div>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<el-card shadow="hover" class="statistics-card">
<div class="card-content">
<div class="card-label">已入账金额</div>
<div class="card-value">{{ formatCurrency(statisticsData.totalPaidAmount) }}</div>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<el-card shadow="hover" class="statistics-card">
<div class="card-content">
<div class="card-label">待入账金额</div>
<div class="card-value">{{ formatCurrency(statisticsData.pendingAmount) }}</div>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<el-card shadow="hover" class="statistics-card">
<div class="card-content">
<div class="card-label">总保单数</div>
<div class="card-value">{{ statisticsData.totalPolicyCount }}</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template> </template>
<script setup lang="ts"> <script setup name="Receivables">
import { ref, reactive, onMounted, watch } from 'vue'
import CommonPage from '@/components/commonPage' import CommonPage from '@/components/commonPage'
import type { OperationButton } from '@/components/commonPage' import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { formatCurrency } from '@/utils/number'
// 分页相关 // 分页相关
const currentPage = ref(1) const currentPage = ref(1)
...@@ -212,7 +211,7 @@ const loading = ref(false) ...@@ -212,7 +211,7 @@ const loading = ref(false)
// 搜索表单数据 // 搜索表单数据
const searchFormData = reactive({ const searchFormData = reactive({
policyNo: '', policyNo: '',
incomeDateRange: [] as string[], incomeDateRange: [''] ,
incomeStatus: '', incomeStatus: '',
incomeTerm: '', incomeTerm: '',
incomeItem: '', incomeItem: '',
...@@ -335,7 +334,7 @@ const searchFormItems = ref([ ...@@ -335,7 +334,7 @@ const searchFormItems = ref([
]) ])
// 表格数据 // 表格数据
const tableData = ref<any[]>([ const tableData = ref([
// 示例数据 // 示例数据
{ {
id: 1, id: 1,
...@@ -394,11 +393,7 @@ const statisticsData = ref({ ...@@ -394,11 +393,7 @@ const statisticsData = ref({
totalPolicyCount: 2 totalPolicyCount: 2
}) })
// 货币格式化
const formatCurrency = (value: number) => {
if (value === undefined || value === null) return '¥0.00'
return '¥' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
}
// 按钮事件处理 // 按钮事件处理
const handleAdd = () => { const handleAdd = () => {
...@@ -442,9 +437,9 @@ const handleQuery = async () => { ...@@ -442,9 +437,9 @@ const handleQuery = async () => {
loadTableData() loadTableData()
} }
// 控制要显示的默认按钮 // 控制要显示的默认按钮
const visibleDefaultButtons = ref(['add', 'import', 'export']) // 只显示新增和查询两个默认按钮 // const visibleDefaultButtons = ref(['add', 'import', 'export']) // 只显示新增和查询两个默认按钮
// 按钮配置 // 按钮配置
const operationBtnList = ref<OperationButton[]>([ const operationBtnList = ref([
{ {
key: 'add', key: 'add',
direction: 'left', direction: 'left',
...@@ -472,12 +467,12 @@ const operationBtnList = ref<OperationButton[]>([ ...@@ -472,12 +467,12 @@ const operationBtnList = ref<OperationButton[]>([
} }
]) ])
// 表格操作 // 表格操作
const handleViewDetail = (row: any) => { const handleViewDetail = (row) => {
ElMessage.info(`查看应收款详情：${row.receivableNo}`) ElMessage.info(`查看应收款详情：${row.receivableNo}`)
// 这里可以打开详情弹窗或跳转到详情页 // 这里可以打开详情弹窗或跳转到详情页
} }
const handleDelete = async (row: any) => { const handleDelete = async (row) => {
try { try {
await ElMessageBox.confirm( await ElMessageBox.confirm(
`确定要删除应收款 "${row.receivableNo}" 吗？`, `确定要删除应收款 "${row.receivableNo}" 吗？`,
...@@ -501,12 +496,12 @@ const handleDelete = async (row: any) => { ...@@ -501,12 +496,12 @@ const handleDelete = async (row: any) => {
} }
// 分页事件 // 分页事件
const handleSizeChange = (val: number) => { const handleSizeChange = (val) => {
pageSize.value = val pageSize.value = val
loadTableData() loadTableData()
} }
const handleCurrentChange = (val: number) => { const handleCurrentChange = (val) => {
currentPage.value = val currentPage.value = val
loadTableData() loadTableData()
} }
...@@ -574,17 +569,6 @@ onMounted(() => { ...@@ -574,17 +569,6 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.search-form {
padding: 10px 0;
:deep(.el-form-item) {
margin-bottom: 20px;
.el-form-item__label {
font-weight: 500;
}
}
}
.pagination-wrapper { .pagination-wrapper {
display: flex; display: flex;
...@@ -599,22 +583,17 @@ onMounted(() => { ...@@ -599,22 +583,17 @@ onMounted(() => {
} }
.statistics-card { .statistics-card {
height: 120px; margin-bottom: 15px;
margin-bottom: 20px;
.card-content { .card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
.card-label { .card-label {
font-size: 14px;
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
margin-bottom: 8px; margin-bottom: 8px;
} }
.card-value { .card-value {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
...@@ -625,11 +604,6 @@ onMounted(() => { ...@@ -625,11 +604,6 @@ onMounted(() => {
// 响应式调整 // 响应式调整
@media (max-width: 768px) { @media (max-width: 768px) {
.search-form {
:deep(.el-col) {
margin-bottom: 10px;
}
}
.statistics-cards { .statistics-cards {
.el-col { .el-col {
......
tsconfig.json 0 → 100644
{
"compilerOptions": {
"target": "es2020",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["es2020", "dom", "dom.iterable"],
"skipLibCheck": true,
// 重要：必须和 vite.config.js 中的别名对应
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": ["node_modules", "dist", "**/*.js"]
}
\ 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