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 @@
"xlsx": "^0.18.5"
},
"devDependencies": {
"@types/node": "^25.0.3",
"@vitejs/plugin-vue": "5.2.4",
"sass-embedded": "1.89.1",
"typescript": "^5.9.3",
"unplugin-auto-import": "0.18.6",
"unplugin-vue-setup-extend-plus": "1.0.1",
"vite": "6.3.5",
"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": {
"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>
<CommonPage
:operationBtnList="operationBtnList"
:visibleDefaultButtons="visibleDefaultButtons"
:showSearchForm="true"
:show-pagination="true"
>
......@@ -10,7 +9,6 @@
<el-form
:model="searchFormData"
ref="searchFormRef"
label-width="120px"
label-position="top"
class="search-form"
>
......@@ -70,47 +68,11 @@
<!-- 列表区域 -->
<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
:data="tableData"
height="350"
height="260"
border
highlight-current-row
style="width: 100%"
......@@ -193,13 +155,50 @@
</el-table>
</template>
</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>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
<script setup name="Receivables">
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 { formatCurrency } from '@/utils/number'
// 分页相关
const currentPage = ref(1)
......@@ -212,7 +211,7 @@ const loading = ref(false)
// 搜索表单数据
const searchFormData = reactive({
policyNo: '',
incomeDateRange: [] as string[],
incomeDateRange: [''] ,
incomeStatus: '',
incomeTerm: '',
incomeItem: '',
......@@ -335,7 +334,7 @@ const searchFormItems = ref([
])
// 表格数据
const tableData = ref<any[]>([
const tableData = ref([
// 示例数据
{
id: 1,
......@@ -394,11 +393,7 @@ const statisticsData = ref({
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 = () => {
......@@ -442,9 +437,9 @@ const handleQuery = async () => {
loadTableData()
}
// 控制要显示的默认按钮
const visibleDefaultButtons = ref(['add', 'import', 'export']) // 只显示新增和查询两个默认按钮
// const visibleDefaultButtons = ref(['add', 'import', 'export']) // 只显示新增和查询两个默认按钮
// 按钮配置
const operationBtnList = ref<OperationButton[]>([
const operationBtnList = ref([
{
key: 'add',
direction: 'left',
......@@ -472,12 +467,12 @@ const operationBtnList = ref<OperationButton[]>([
}
])
// 表格操作
const handleViewDetail = (row: any) => {
const handleViewDetail = (row) => {
ElMessage.info(`查看应收款详情：${row.receivableNo}`)
// 这里可以打开详情弹窗或跳转到详情页
}
const handleDelete = async (row: any) => {
const handleDelete = async (row) => {
try {
await ElMessageBox.confirm(
`确定要删除应收款 "${row.receivableNo}" 吗？`,
......@@ -501,12 +496,12 @@ const handleDelete = async (row: any) => {
}
// 分页事件
const handleSizeChange = (val: number) => {
const handleSizeChange = (val) => {
pageSize.value = val
loadTableData()
}
const handleCurrentChange = (val: number) => {
const handleCurrentChange = (val) => {
currentPage.value = val
loadTableData()
}
......@@ -574,17 +569,6 @@ onMounted(() => {
</script>
<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 {
display: flex;
......@@ -599,22 +583,17 @@ onMounted(() => {
}
.statistics-card {
height: 120px;
margin-bottom: 20px;
margin-bottom: 15px;
.card-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
.card-label {
font-size: 14px;
color: var(--el-text-color-secondary);
margin-bottom: 8px;
}
.card-value {
font-size: 24px;
font-weight: 600;
......@@ -625,11 +604,6 @@ onMounted(() => {
// 响应式调整
@media (max-width: 768px) {
.search-form {
:deep(.el-col) {
margin-bottom: 10px;
}
}
.statistics-cards {
.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