From 061d96036541c1d0c88eea95c25b58950de8d289 Mon Sep 17 00:00:00 2001
From: wangxiaoxian <1094175543@qq.com>
Date: Sun, 15 Mar 2026 20:40:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=B9=E7=94=A8=E6=94=AF=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.js                |  13 +-
 src/router/index.js           |  16 ++
 src/views/expenses/Add.vue    | 143 ++++++++++++++
 src/views/expenses/Edit.vue   | 150 +++++++++++++++
 src/views/expenses/List.vue   | 351 ++++++++++++++++++++++++++++++++++
 src/views/statistics/Rent.vue |  18 ++
 6 files changed, 690 insertions(+), 1 deletion(-)
 create mode 100644 src/views/expenses/Add.vue
 create mode 100644 src/views/expenses/Edit.vue
 create mode 100644 src/views/expenses/List.vue

diff --git a/src/api/api.js b/src/api/api.js
index 1276501..f6c88f0 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -84,6 +84,16 @@ export const electricityBillApi = {
   delete: (id) => del(`/electricity-bills/${id}`)
 };
 
+// 费用支出管理API
+export const expenseApi = {
+  getAll: (params = {}) => get('/expenses', params),
+  list: (params = {}) => get('/expenses/list', params),
+  getById: (id) => get(`/expenses/${id}`),
+  create: (data) => post('/expenses', data),
+  update: (id, data) => put(`/expenses/${id}`, data),
+  delete: (id) => del(`/expenses/${id}`)
+};
+
 export default {
   apartment: apartmentApi,
   room: roomApi,
@@ -92,5 +102,6 @@ export default {
   rental: rentalApi,
   statistics: statisticsApi,
   waterBill: waterBillApi,
-  electricityBill: electricityBillApi
+  electricityBill: electricityBillApi,
+  expense: expenseApi
 };
diff --git a/src/router/index.js b/src/router/index.js
index e3fd71f..dbf1231 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -135,6 +135,22 @@ const routes = [
         path: '/menu/list',
         name: 'MenuList',
         component: () => import('@/views/menu/List.vue')
+      },
+      // 费用支出管理
+      {
+        path: '/expenses',
+        name: 'ExpenseList',
+        component: () => import('@/views/expenses/List.vue')
+      },
+      {
+        path: '/expenses/add',
+        name: 'ExpenseAdd',
+        component: () => import('@/views/expenses/Add.vue')
+      },
+      {
+        path: '/expenses/edit/:id',
+        name: 'ExpenseEdit',
+        component: () => import('@/views/expenses/Edit.vue')
       }
     ]
   },
diff --git a/src/views/expenses/Add.vue b/src/views/expenses/Add.vue
new file mode 100644
index 0000000..ad317e9
--- /dev/null
+++ b/src/views/expenses/Add.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="expense-add">
+    <el-card>
+      <template slot="header">
+        <div class="card-header">
+          <span>添加费用支出</span>
+        </div>
+      </template>
+      <el-form :model="expenseForm" :rules="rules" ref="expenseForm" label-width="100px" class="form-content">
+        <el-form-item label="支出日期" prop="date">
+          <el-date-picker
+            v-model="expenseForm.date"
+            type="date"
+            placeholder="选择支出日期"
+            value-format="yyyy-MM-dd"
+            style="width: 100%;">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="金额" prop="amount">
+          <el-input-number v-model="expenseForm.amount" :min="0" :precision="2" :step="100" style="width: 100%;" placeholder="请输入金额"></el-input-number>
+        </el-form-item>
+        <el-form-item label="类别" prop="category">
+          <el-input v-model="expenseForm.category" placeholder="请输入支出类别（如：房租、水电费、维修费等）"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" v-model="expenseForm.remark" :rows="3" placeholder="请输入备注信息"></el-input>
+        </el-form-item>
+        <el-form-item class="form-actions">
+          <el-button type="primary" @click="submitForm">提交</el-button>
+          <el-button @click="resetForm">重置</el-button>
+          <el-button @click="goBack">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { expenseApi } from '../../api/api'
+
+export default {
+  name: 'ExpenseAdd',
+  data() {
+    return {
+      expenseForm: {
+        date: '',
+        amount: 0,
+        category: '',
+        remark: ''
+      },
+      rules: {
+        date: [
+          { required: true, message: '请选择支出日期', trigger: 'change' }
+        ],
+        amount: [
+          { required: true, message: '请输入金额', trigger: 'blur' },
+          { type: 'number', min: 0.01, message: '金额必须大于0', trigger: 'blur' }
+        ],
+        category: [
+          { required: true, message: '请输入支出类别', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    // 设置默认日期为今天
+    const today = new Date()
+    this.expenseForm.date = today.toISOString().split('T')[0]
+  },
+  methods: {
+    async submitForm() {
+      this.$refs.expenseForm.validate(async (valid) => {
+        if (valid) {
+          try {
+            await expenseApi.create(this.expenseForm)
+            this.$message.success('添加成功')
+            this.$router.push('/finance/expenses')
+          } catch (error) {
+            this.$message.error('添加失败')
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.$refs.expenseForm.resetFields()
+      // 重置后重新设置默认日期
+      const today = new Date()
+      this.expenseForm.date = today.toISOString().split('T')[0]
+    },
+    goBack() {
+      this.$router.push('/expenses')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.expense-add {
+  padding: 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-content {
+  max-width: 600px;
+}
+
+.form-actions {
+  margin-top: 30px;
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 768px) {
+  .form-content {
+    max-width: 100%;
+  }
+  
+  .form-content .el-form-item__label {
+    float: none;
+    display: block;
+    text-align: left;
+    margin-bottom: 5px;
+  }
+  
+  .form-content .el-form-item__content {
+    margin-left: 0 !important;
+  }
+  
+  .form-actions {
+    text-align: center;
+  }
+  
+  .form-actions .el-button {
+    margin-bottom: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/expenses/Edit.vue b/src/views/expenses/Edit.vue
new file mode 100644
index 0000000..37ffc80
--- /dev/null
+++ b/src/views/expenses/Edit.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="expense-edit">
+    <el-card>
+      <template slot="header">
+        <div class="card-header">
+          <span>编辑费用支出</span>
+        </div>
+      </template>
+      <el-form :model="expenseForm" :rules="rules" ref="expenseForm" label-width="100px" class="form-content">
+        <el-form-item label="支出日期" prop="date">
+          <el-date-picker
+            v-model="expenseForm.date"
+            type="date"
+            placeholder="选择支出日期"
+            value-format="yyyy-MM-dd"
+            style="width: 100%;">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="金额" prop="amount">
+          <el-input-number v-model="expenseForm.amount" :min="0" :precision="2" :step="100" style="width: 100%;" placeholder="请输入金额"></el-input-number>
+        </el-form-item>
+        <el-form-item label="类别" prop="category">
+          <el-input v-model="expenseForm.category" placeholder="请输入支出类别（如：房租、水电费、维修费等）"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" v-model="expenseForm.remark" :rows="3" placeholder="请输入备注信息"></el-input>
+        </el-form-item>
+        <el-form-item class="form-actions">
+          <el-button type="primary" @click="submitForm">提交</el-button>
+          <el-button @click="resetForm">重置</el-button>
+          <el-button @click="goBack">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { expenseApi } from '../../api/api'
+
+export default {
+  name: 'ExpenseEdit',
+  data() {
+    return {
+      expenseForm: {
+        id: '',
+        date: '',
+        amount: 0,
+        category: '',
+        remark: ''
+      },
+      rules: {
+        date: [
+          { required: true, message: '请选择支出日期', trigger: 'change' }
+        ],
+        amount: [
+          { required: true, message: '请输入金额', trigger: 'blur' },
+          { type: 'number', min: 0.01, message: '金额必须大于0', trigger: 'blur' }
+        ],
+        category: [
+          { required: true, message: '请输入支出类别', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.loadExpenseData()
+  },
+  methods: {
+    async loadExpenseData() {
+      try {
+        const id = this.$route.params.id
+        const expense = await expenseApi.getById(id)
+        if (expense) {
+          this.expenseForm = expense
+        }
+      } catch (error) {
+        this.$message.error('加载费用支出数据失败')
+      }
+    },
+    async submitForm() {
+      this.$refs.expenseForm.validate(async (valid) => {
+        if (valid) {
+          try {
+            await expenseApi.update(this.expenseForm.id, this.expenseForm)
+            this.$message.success('编辑成功')
+            this.$router.push('/finance/expenses')
+          } catch (error) {
+            this.$message.error('编辑失败')
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.loadExpenseData()
+    },
+    goBack() {
+      this.$router.push('/expenses')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.expense-edit {
+  padding: 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-content {
+  max-width: 600px;
+}
+
+.form-actions {
+  margin-top: 30px;
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 768px) {
+  .form-content {
+    max-width: 100%;
+  }
+  
+  .form-content .el-form-item__label {
+    float: none;
+    display: block;
+    text-align: left;
+    margin-bottom: 5px;
+  }
+  
+  .form-content .el-form-item__content {
+    margin-left: 0 !important;
+  }
+  
+  .form-actions {
+    text-align: center;
+  }
+  
+  .form-actions .el-button {
+    margin-bottom: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/expenses/List.vue b/src/views/expenses/List.vue
new file mode 100644
index 0000000..c640808
--- /dev/null
+++ b/src/views/expenses/List.vue
@@ -0,0 +1,351 @@
+<template>
+  <div class="expense-list">
+    <el-card>
+      <template slot="header">
+        <div class="card-header">
+          <span>费用支出管理</span>
+          <el-button type="primary" size="small" @click="handleAdd" v-if="hasPermission('expenses:add')">添加支出</el-button>
+        </div>
+      </template>
+      
+      <!-- 搜索表单 -->
+      <el-form :inline="true" :model="searchForm" class="search-form">
+        <el-form-item label="支出类别">
+          <el-input v-model="searchForm.category" placeholder="请输入支出类别"></el-input>
+        </el-form-item>
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="searchForm.startDate"
+            type="date"
+            placeholder="选择开始日期"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="searchForm.endDate"
+            type="date"
+            placeholder="选择结束日期"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetSearch">重置</el-button>
+        </el-form-item>
+      </el-form>
+      
+      <!-- PC端表格 -->
+      <div class="table-wrapper hidden-xs-only">
+        <el-table :data="expenses" style="width: 100%" v-loading="isLoading">
+          <el-table-column prop="id" label="ID" width="80"></el-table-column>
+          <el-table-column prop="date" label="支出日期" width="120"></el-table-column>
+          <el-table-column prop="amount" label="金额" width="120">
+            <template slot-scope="scope">
+              <span style="color: #f56c6c; font-weight: bold;">¥{{ scope.row.amount }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="category" label="类别" width="120"></el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
+          <el-table-column label="操作" width="150" fixed="right">
+            <template slot-scope="scope">
+              <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)" v-if="hasPermission('expenses:edit')">编辑</el-button>
+              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" v-if="hasPermission('expenses:delete')">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      
+      <!-- 移动端卡片列表 -->
+      <div class="mobile-list hidden-sm-and-up">
+        <div v-for="item in expenses" :key="item.id" class="mobile-card">
+          <div class="mobile-card-header">
+            <span class="mobile-card-title">{{ item.category }}</span>
+            <span class="mobile-card-amount">¥{{ item.amount }}</span>
+          </div>
+          <div class="mobile-card-body">
+            <div class="mobile-card-item">
+              <span class="mobile-card-label">日期:</span>
+              <span class="mobile-card-value">{{ item.date }}</span>
+            </div>
+            <div class="mobile-card-item">
+              <span class="mobile-card-label">备注:</span>
+              <span class="mobile-card-value">{{ item.remark || '-' }}</span>
+            </div>
+            <div class="mobile-card-item">
+              <span class="mobile-card-label">创建时间:</span>
+              <span class="mobile-card-value">{{ item.createTime }}</span>
+            </div>
+          </div>
+          <div class="mobile-card-footer">
+            <el-button size="mini" type="primary" @click="handleEdit(item.id)" v-if="hasPermission('expenses:edit')">编辑</el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(item.id)" v-if="hasPermission('expenses:delete')">删除</el-button>
+          </div>
+        </div>
+      </div>
+      
+      <div class="pagination-wrapper">
+        <el-pagination
+          :layout="paginationLayout"
+          :total="total"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :current-page="currentPage"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        ></el-pagination>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { expenseApi } from '../../api/api'
+import { hasPermission } from '../../utils/permission'
+
+export default {
+  name: 'ExpenseList',
+  data() {
+    return {
+      expenses: [],
+      total: 0,
+      searchForm: {
+        category: '',
+        startDate: '',
+        endDate: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      isLoading: false,
+      isMobile: false
+    }
+  },
+  computed: {
+    paginationLayout() {
+      return this.isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'
+    }
+  },
+  mounted() {
+    this.checkDevice()
+    window.addEventListener('resize', this.checkDevice)
+    this.loadData()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkDevice)
+  },
+  methods: {
+    hasPermission,
+    checkDevice() {
+      this.isMobile = window.innerWidth <= 768
+    },
+    async loadData() {
+      this.isLoading = true
+      try {
+        // 构建查询参数
+        const params = {
+          category: this.searchForm.category,
+          startDate: this.searchForm.startDate,
+          endDate: this.searchForm.endDate,
+          page: this.currentPage,
+          pageSize: this.pageSize
+        }
+
+        // 加载费用支出数据
+        const expensesResponse = await expenseApi.getAll(params)
+        this.expenses = expensesResponse.data
+        this.total = expensesResponse.total
+      } catch (error) {
+        this.$message.error('加载数据失败')
+      } finally {
+        this.isLoading = false
+      }
+    },
+    handleAdd() {
+      this.$router.push('/expenses/add')
+    },
+    handleEdit(id) {
+      this.$router.push(`/expenses/edit/${id}`)
+    },
+    async handleDelete(id) {
+      this.$confirm('确定要删除这条费用支出记录吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          await expenseApi.delete(id)
+          this.$message.success('删除成功')
+          this.loadData()
+        } catch (error) {
+          this.$message.error('删除失败')
+        }
+      }).catch(() => {
+        // 取消删除
+      })
+    },
+    handleSearch() {
+      this.currentPage = 1
+      this.loadData()
+    },
+    resetSearch() {
+      this.searchForm = {
+        category: '',
+        startDate: '',
+        endDate: ''
+      }
+      this.currentPage = 1
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.loadData()
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.currentPage = 1
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.expense-list {
+  padding: 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-form {
+  margin-bottom: 20px;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.pagination-wrapper {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 移动端卡片列表样式 */
+.mobile-list {
+  display: none;
+}
+
+.mobile-card {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 15px;
+  margin-bottom: 10px;
+}
+
+.mobile-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.mobile-card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.mobile-card-amount {
+  font-size: 18px;
+  font-weight: bold;
+  color: #f56c6c;
+}
+
+.mobile-card-body {
+  margin-bottom: 10px;
+}
+
+.mobile-card-item {
+  display: flex;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.mobile-card-label {
+  color: #909399;
+  min-width: 70px;
+  flex-shrink: 0;
+}
+
+.mobile-card-value {
+  color: #606266;
+  flex: 1;
+  word-break: break-all;
+}
+
+.mobile-card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #ebeef5;
+}
+
+/* 响应式显示控制 */
+@media screen and (max-width: 768px) {
+  .hidden-xs-only {
+    display: none;
+  }
+  
+  .mobile-list {
+    display: block;
+  }
+  
+  .search-form {
+    margin-bottom: 15px;
+  }
+  
+  .search-form .el-form-item {
+    display: block;
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+  
+  .search-form .el-form-item__content {
+    width: 100%;
+  }
+  
+  .search-form .el-input,
+  .search-form .el-select,
+  .search-form .el-date-picker {
+    width: 100%;
+  }
+  
+  .pagination-wrapper {
+    justify-content: center;
+  }
+  
+  .card-header {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  
+  .card-header span {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .hidden-sm-and-up {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/statistics/Rent.vue b/src/views/statistics/Rent.vue
index 5c81357..3b02c40 100644
--- a/src/views/statistics/Rent.vue
+++ b/src/views/statistics/Rent.vue
@@ -27,12 +27,24 @@
               <span class="amount-value">¥{{ scope.row.depositRefunded || 0 }}</span>
             </template>
           </el-table-column>
+          <el-table-column prop="expense" label="费用支出(元)" min-width="150">
+            <template slot-scope="scope">
+              <span class="amount-value">¥{{ scope.row.expense || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="合计收入(元)" min-width="150">
+            <template slot-scope="scope">
+              <span class="amount-value">¥{{ (scope.row.amount || 0) + (scope.row.depositReceived || 0) - (scope.row.depositRefunded || 0) - (scope.row.expense || 0) }}</span>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
       <div class="total-amount">
         <el-tag size="medium" type="primary">总租金收入：{{ totalAmount }} 元</el-tag>
         <el-tag size="medium" type="success" style="margin-left: 10px;">已收押金：{{ totalDepositReceived }} 元</el-tag>
         <el-tag size="medium" type="info" style="margin-left: 10px;">已退押金：{{ totalDepositRefunded }} 元</el-tag>
+        <el-tag size="medium" type="warning" style="margin-left: 10px;">总费用支出：{{ totalExpense }} 元</el-tag>
+        <el-tag size="medium" type="danger" style="margin-left: 10px;">总合计收入：{{ totalIncome }} 元</el-tag>
       </div>
     </el-card>
   </div>
@@ -57,6 +69,12 @@ export default {
     },
     totalDepositRefunded() {
       return this.rentData.reduce((sum, item) => sum + (item.depositRefunded || 0), 0)
+    },
+    totalExpense() {
+      return this.rentData.reduce((sum, item) => sum + (item.expense || 0), 0)
+    },
+    totalIncome() {
+      return this.rentData.reduce((sum, item) => sum + (item.amount || 0) + (item.depositReceived || 0) - (item.depositRefunded || 0) - (item.expense || 0), 0)
     }
   },
   mounted() {