diff --git a/src/api/basic/basicstudentavatar.ts b/src/api/basic/basicstudentavatar.ts
index d54a600..0525c67 100644
--- a/src/api/basic/basicstudentavatar.ts
+++ b/src/api/basic/basicstudentavatar.ts
@@ -6,7 +6,7 @@ import request from '/@/utils/request';
  */
 export const fetchList = (query?: any) => {
 	return request({
-		url: '/basic/basicstudent/avatar/list',
+		url: '/basic/basicstudent/avatar/page',
 		method: 'get',
 		params: query,
 	});
diff --git a/src/api/stuwork/watermonthreport.ts b/src/api/stuwork/watermonthreport.ts
index 72334e7..4de78e0 100644
--- a/src/api/stuwork/watermonthreport.ts
+++ b/src/api/stuwork/watermonthreport.ts
@@ -1,14 +1,86 @@
 import request from '/@/utils/request';
 
 /**
- * 查看水电明细
- * @param roomNo 宿舍号
+ * 分页查询宿舍水电月明细
+ * @param query
  */
-export const lookDetails = (roomNo: string) => {
+export const fetchList = (query?: any) => {
+	return request({
+		url: '/stuwork/watermonthreport/page',
+		method: 'get',
+		params: query,
+	});
+};
+
+/**
+ * 新增宿舍水电月明细
+ * @param data
+ */
+export const addObj = (data: any) => {
+	return request({
+		url: '/stuwork/watermonthreport',
+		method: 'post',
+		data,
+	});
+};
+
+/**
+ * 获取详情
+ * @param id
+ */
+export const getDetail = (id: string) => {
+	return request({
+		url: '/stuwork/watermonthreport/detail',
+		method: 'get',
+		params: { id },
+	});
+};
+
+/**
+ * 编辑宿舍水电月明细
+ * @param data
+ */
+export const editObj = (data: any) => {
+	return request({
+		url: '/stuwork/watermonthreport/edit',
+		method: 'post',
+		data,
+	});
+};
+
+/**
+ * 删除宿舍水电月明细
+ * @param ids
+ */
+export const delObj = (ids: string[]) => {
+	return request({
+		url: '/stuwork/watermonthreport/delete',
+		method: 'post',
+		data: ids,
+	});
+};
+
+/**
+ * 查看水电明细
+ * @param params 查询参数
+ */
+export const lookDetails = (params: any) => {
 	return request({
 		url: '/stuwork/watermonthreport/lookDetails',
 		method: 'get',
-		params: { roomNo },
+		params,
+	});
+};
+
+/**
+ * 根据角色查看明细
+ * @param params 查询参数
+ */
+export const lookDetail = (params: any) => {
+	return request({
+		url: '/stuwork/watermonthreport/lookDetail',
+		method: 'get',
+		params,
 	});
 };
 
@@ -46,4 +118,4 @@ export const getFloorStats = (params: any) => {
 		method: 'get',
 		params,
 	});
-};
+};
\ No newline at end of file
diff --git a/src/views/basic/basicstudentavatar/index.vue b/src/views/basic/basicstudentavatar/index.vue
index f6592ee..f9de007 100644
--- a/src/views/basic/basicstudentavatar/index.vue
+++ b/src/views/basic/basicstudentavatar/index.vue
@@ -150,44 +150,10 @@ const searchForm = reactive({
 	classCode: '',
 });
 
-// 配置 useTable - 接口返回的数据结构是 { classes: [], students: [] }
+// 配置 useTable - 标准分页查询
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: searchForm,
-	pageList: async (queryParams: any) => {
-		const res = await fetchList(queryParams);
-		// 接口返回的数据结构是 { classes: [], students: [] }
-		// 需要将 students 数组转换为表格数据，并关联班级信息
-		if (res.data && res.data.students) {
-			const students = res.data.students || [];
-			const classes = res.data.classes || [];
-			const classMap = new Map();
-			classes.forEach((cls: any) => {
-				classMap.set(cls.classCode, cls);
-			});
-
-			// 将学生数据与班级信息合并
-			const dataList = students.map((stu: any) => {
-				const classInfo = classMap.get(stu.classCode);
-				return {
-					...stu,
-					className: classInfo ? classInfo.classNo : stu.className || '',
-					classNo: classInfo ? classInfo.classNo : '',
-				};
-			});
-
-			return {
-				...res,
-				data: {
-					records: dataList,
-					total: dataList.length,
-					current: 1,
-					size: dataList.length,
-					pages: 1,
-				},
-			};
-		}
-		return res;
-	},
+	pageList: fetchList,
 	props: {
 		item: 'records',
 		totalCount: 'total',
diff --git a/src/views/stuwork/watermonthreport/form.vue b/src/views/stuwork/watermonthreport/form.vue
new file mode 100644
index 0000000..5114d6c
--- /dev/null
+++ b/src/views/stuwork/watermonthreport/form.vue
@@ -0,0 +1,262 @@
+<template>
+  <el-dialog
+    :title="form.id ? '编辑水电月明细' : '新增水电月明细'"
+    v-model="visible"
+    :close-on-click-modal="false"
+    draggable
+    width="550px">
+    <el-form
+      ref="dataFormRef"
+      :model="form"
+      :rules="dataRules"
+      label-width="100px"
+      v-loading="loading">
+      <el-row :gutter="24">
+        <el-col :span="24" class="mb20">
+          <el-form-item label="房间号" prop="roomNo">
+            <el-input
+              v-model="form.roomNo"
+              placeholder="请输入房间号"
+              clearable
+              maxlength="50" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="年份" prop="year">
+            <el-date-picker
+              v-model="form.year"
+              type="year"
+              placeholder="选择年份"
+              value-format="YYYY"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="月份" prop="month">
+            <el-select
+              v-model="form.month"
+              placeholder="请选择月份"
+              style="width: 100%">
+              <el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="类型" prop="flag">
+            <el-select
+              v-model="form.flag"
+              placeholder="请选择类型"
+              style="width: 100%"
+              @change="handleFlagChange">
+              <el-option label="用电" :value="2" />
+              <el-option label="用水" :value="4" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="水表类型" prop="meterNum">
+            <el-select
+              v-model="form.meterNum"
+              placeholder="请选择水表类型"
+              style="width: 100%"
+              :disabled="form.flag !== 4">
+              <el-option label="冷水" :value="10" />
+              <el-option label="热水" :value="11" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="用量" prop="subiMonthSum">
+            <el-input-number
+              v-model="form.subiMonthSum"
+              :min="0"
+              :precision="2"
+              :controls="false"
+              placeholder="请输入用量"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="费用" prop="subWatFlagSum">
+            <el-input-number
+              v-model="form.subWatFlagSum"
+              :min="0"
+              :precision="2"
+              :controls="false"
+              placeholder="请输入费用"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="日期" prop="waterDate">
+            <el-date-picker
+              v-model="form.waterDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="YYYY-MM-DD"
+              style="width: 100%" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="备注" prop="remarks">
+            <el-input
+              v-model="form.remarks"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注"
+              maxlength="200" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="WaterMonthReportFormDialog">
+import { ref, reactive, nextTick } from 'vue'
+import { useMessage } from '/@/hooks/message'
+import { addObj, editObj, getDetail } from '/@/api/stuwork/watermonthreport'
+
+const emit = defineEmits(['refresh'])
+
+// 定义变量内容
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  roomNo: '',
+  year: '',
+  month: '',
+  flag: undefined as number | undefined,
+  meterNum: undefined as number | undefined,
+  subiMonthSum: undefined as number | undefined,
+  subWatFlagSum: undefined as number | undefined,
+  waterDate: '',
+  remarks: ''
+})
+
+// 定义校验规则
+const dataRules = reactive({
+  roomNo: [
+    { required: true, message: '请输入房间号', trigger: 'blur' }
+  ],
+  year: [
+    { required: true, message: '请选择年份', trigger: 'change' }
+  ],
+  month: [
+    { required: true, message: '请选择月份', trigger: 'change' }
+  ],
+  flag: [
+    { required: true, message: '请选择类型', trigger: 'change' }
+  ]
+})
+
+// 类型变化处理
+const handleFlagChange = () => {
+  if (form.flag !== 4) {
+    form.meterNum = undefined
+  }
+}
+
+// 打开弹窗
+const openDialog = async (row?: any) => {
+  visible.value = true
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+    form.id = ''
+    form.roomNo = ''
+    form.year = ''
+    form.month = ''
+    form.flag = undefined
+    form.meterNum = undefined
+    form.subiMonthSum = undefined
+    form.subWatFlagSum = undefined
+    form.waterDate = ''
+    form.remarks = ''
+
+    // 编辑时填充数据
+    if (row?.id) {
+      loading.value = true
+      getDetail(row.id).then((res: any) => {
+        if (res.data) {
+          form.id = res.data.id
+          form.roomNo = res.data.roomNo || ''
+          form.year = res.data.year ? String(res.data.year) : ''
+          form.month = res.data.month
+          form.flag = res.data.flag
+          form.meterNum = res.data.meterNum
+          form.subiMonthSum = res.data.subiMonthSum
+          form.subWatFlagSum = res.data.subWatFlagSum
+          form.waterDate = res.data.waterDate || ''
+          form.remarks = res.data.remarks || ''
+        }
+      }).finally(() => {
+        loading.value = false
+      })
+    }
+  })
+}
+
+// 提交表单
+const onSubmit = async () => {
+  if (!dataFormRef.value) return
+
+  await dataFormRef.value.validate(async (valid: boolean) => {
+    if (!valid) return
+
+    loading.value = true
+    try {
+      const submitData = {
+        id: form.id || undefined,
+        roomNo: form.roomNo,
+        year: form.year ? parseInt(form.year) : undefined,
+        month: form.month,
+        flag: form.flag,
+        meterNum: form.meterNum,
+        subiMonthSum: form.subiMonthSum,
+        subWatFlagSum: form.subWatFlagSum,
+        waterDate: form.waterDate,
+        remarks: form.remarks
+      }
+
+      if (form.id) {
+        await editObj(submitData)
+        useMessage().success('编辑成功')
+      } else {
+        await addObj(submitData)
+        useMessage().success('新增成功')
+      }
+      visible.value = false
+      emit('refresh')
+    } catch (err: any) {
+      useMessage().error(err.msg || (form.id ? '编辑失败' : '新增失败'))
+    } finally {
+      loading.value = false
+    }
+  })
+}
+
+// 暴露方法给父组件
+defineExpose({
+  openDialog
+})
+</script>
\ No newline at end of file
diff --git a/src/views/stuwork/watermonthreport/index.vue b/src/views/stuwork/watermonthreport/index.vue
new file mode 100644
index 0000000..9b832be
--- /dev/null
+++ b/src/views/stuwork/watermonthreport/index.vue
@@ -0,0 +1,328 @@
+<template>
+  <div class="modern-page-container">
+    <div class="page-wrapper">
+      <!-- 搜索表单卡片 -->
+      <el-card v-show="showSearch" class="search-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Search /></el-icon>
+              筛选条件
+            </span>
+          </div>
+        </template>
+        <el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
+          <el-form-item label="房间号" prop="roomNo">
+            <el-input
+              v-model="searchForm.roomNo"
+              placeholder="请输入房间号"
+              clearable
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="年份" prop="year">
+            <el-date-picker
+              v-model="searchForm.year"
+              type="year"
+              placeholder="选择年份"
+              value-format="YYYY"
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="月份" prop="month">
+            <el-select
+              v-model="searchForm.month"
+              placeholder="请选择月份"
+              clearable
+              style="width: 200px">
+              <el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="类型" prop="flag">
+            <el-select
+              v-model="searchForm.flag"
+              placeholder="请选择类型"
+              clearable
+              style="width: 200px">
+              <el-option label="用电" :value="2" />
+              <el-option label="用水" :value="4" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
+            <el-button icon="Refresh" @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+
+      <!-- 内容卡片 -->
+      <el-card class="content-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Document /></el-icon>
+              宿舍水电月明细列表
+            </span>
+            <div class="header-actions">
+              <el-button
+                icon="Plus"
+                type="primary"
+                v-auth="'stuwork_watermonthreport_add'"
+                @click="formDialogRef.openDialog()">
+                新增
+              </el-button>
+              <right-toolbar
+                v-model:showSearch="showSearch"
+                class="ml10"
+                @queryTable="getDataList">
+                <TableColumnControl
+                  ref="columnControlRef"
+                  :columns="tableColumns"
+                  v-model="visibleColumns"
+                  trigger-type="default"
+                  trigger-circle
+                  @change="handleColumnChange"
+                  @order-change="handleColumnOrderChange"
+                >
+                  <template #trigger>
+                    <el-tooltip class="item" effect="dark" content="列设置" placement="top">
+                      <el-button circle style="margin-left: 0;">
+                        <el-icon><Menu /></el-icon>
+                      </el-button>
+                    </el-tooltip>
+                  </template>
+                </TableColumnControl>
+              </right-toolbar>
+            </div>
+          </div>
+        </template>
+
+        <!-- 表格 -->
+        <el-table
+          :data="state.dataList"
+          v-loading="state.loading"
+          stripe
+          :cell-style="tableStyle.cellStyle"
+          :header-cell-style="tableStyle.headerCellStyle"
+          class="modern-table">
+          <el-table-column type="index" label="序号" width="70" align="center">
+            <template #header>
+              <el-icon><List /></el-icon>
+            </template>
+            <template #default="{ $index }">
+              {{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
+            </template>
+          </el-table-column>
+          <template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
+            <el-table-column
+              v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
+              :prop="col.prop"
+              :label="col.label"
+              show-overflow-tooltip
+              align="center"
+              :min-width="col.minWidth"
+              :width="col.width">
+              <template #header>
+                <el-icon><component :is="columnConfigMap[col.prop]?.icon || Document" /></el-icon>
+                <span style="margin-left: 4px">{{ col.label }}</span>
+              </template>
+              <!-- 类型列 -->
+              <template v-if="col.prop === 'flag'" #default="scope">
+                <el-tag size="small" :type="scope.row.flag === 2 ? 'warning' : 'primary'" effect="plain">
+                  {{ scope.row.flag === 2 ? '用电' : '用水' }}
+                </el-tag>
+              </template>
+              <!-- 水表类型列 -->
+              <template v-else-if="col.prop === 'meterNum'" #default="scope">
+                <span>{{ formatMeterNum(scope.row.meterNum) }}</span>
+              </template>
+              <!-- 用量列 -->
+              <template v-else-if="col.prop === 'subiMonthSum'" #default="scope">
+                <span>{{ scope.row.subiMonthSum ?? '-' }} {{ scope.row.flag === 2 ? '度' : '吨' }}</span>
+              </template>
+              <!-- 费用列 -->
+              <template v-else-if="col.prop === 'subWatFlagSum'" #default="scope">
+                <span class="text-primary">¥{{ scope.row.subWatFlagSum ?? '0' }}</span>
+              </template>
+              <!-- 月份列 -->
+              <template v-else-if="col.prop === 'month'" #default="scope">
+                <span>{{ scope.row.month }}月</span>
+              </template>
+            </el-table-column>
+          </template>
+          <el-table-column label="操作" width="160" align="center" fixed="right">
+            <template #header>
+              <el-icon><Setting /></el-icon>
+              <span style="margin-left: 4px">操作</span>
+            </template>
+            <template #default="scope">
+              <el-button
+                icon="Edit"
+                link
+                type="primary"
+                v-auth="'stuwork_watermonthreport_edit'"
+                @click="handleEdit(scope.row)">
+                编辑
+              </el-button>
+              <el-button
+                icon="Delete"
+                link
+                type="danger"
+                v-auth="'stuwork_watermonthreport_del'"
+                @click="handleDelete(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-wrapper">
+          <pagination
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            v-bind="state.pagination" />
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 新增/编辑表单弹窗 -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList" />
+  </div>
+</template>
+
+<script setup lang="ts" name="WaterMonthReport">
+import { reactive, ref, onMounted, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObj } from "/@/api/stuwork/watermonthreport";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import TableColumnControl from '/@/components/TableColumnControl/index.vue'
+import FormDialog from './form.vue'
+import { List, Setting, Document, HomeFilled, Calendar, Clock, Coin, Menu, Search } from '@element-plus/icons-vue'
+import { useTableColumnControl } from '/@/hooks/tableColumn'
+
+// 定义变量内容
+const route = useRoute()
+const searchFormRef = ref()
+const columnControlRef = ref<any>()
+const showSearch = ref(true)
+const formDialogRef = ref()
+
+// 表格列配置
+const tableColumns = [
+  { prop: 'roomNo', label: '房间号', width: 120 },
+  { prop: 'year', label: '年份', width: 100 },
+  { prop: 'month', label: '月份', width: 100 },
+  { prop: 'flag', label: '类型', width: 100 },
+  { prop: 'meterNum', label: '水表类型', width: 100 },
+  { prop: 'subiMonthSum', label: '用量', width: 120 },
+  { prop: 'subWatFlagSum', label: '费用', width: 120 },
+  { prop: 'waterDate', label: '日期', width: 120 },
+  { prop: 'remarks', label: '备注', minWidth: 150 }
+]
+
+// 列配置映射（用于图标显示）
+const columnConfigMap: Record<string, { icon: any }> = {
+  roomNo: { icon: HomeFilled },
+  year: { icon: Calendar },
+  month: { icon: Calendar },
+  flag: { icon: Clock },
+  meterNum: { icon: Clock },
+  subiMonthSum: { icon: Coin },
+  subWatFlagSum: { icon: Coin },
+  waterDate: { icon: Calendar },
+  remarks: { icon: Document }
+}
+
+// 使用表格列控制hook
+const {
+  visibleColumns,
+  visibleColumnsSorted,
+  checkColumnVisible,
+  handleColumnChange,
+  handleColumnOrderChange
+} = useTableColumnControl(tableColumns, route.path)
+
+// 搜索表单
+const searchForm = reactive({
+  roomNo: '',
+  year: '',
+  month: '',
+  flag: ''
+})
+
+// 格式化水表类型
+const formatMeterNum = (value: number) => {
+  if (value === 10) return '冷水'
+  if (value === 11) return '热水'
+  return '-'
+}
+
+// 配置 useTable
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: searchForm,
+  pageList: fetchList,
+  props: {
+    item: 'records',
+    totalCount: 'total'
+  },
+  createdIsNeed: true
+})
+
+// table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  tableStyle
+} = useTable(state)
+
+// 查询
+const handleSearch = () => {
+  getDataList()
+}
+
+// 重置
+const handleReset = () => {
+  searchFormRef.value?.resetFields()
+  searchForm.roomNo = ''
+  searchForm.year = ''
+  searchForm.month = ''
+  searchForm.flag = ''
+  getDataList()
+}
+
+// 编辑
+const handleEdit = (row: any) => {
+  formDialogRef.value?.openDialog(row)
+}
+
+// 删除
+const handleDelete = async (row: any) => {
+  try {
+    await useMessageBox().confirm('确定要删除该记录吗？')
+    await delObj([row.id])
+    useMessage().success('删除成功')
+    getDataList()
+  } catch (err: any) {
+    if (err !== 'cancel') {
+      useMessage().error(err.msg || '删除失败')
+    }
+  }
+}
+
+// 初始化
+onMounted(() => {
+  nextTick(() => {
+    if (visibleColumns.value.length === 0) {
+    }
+  })
+})
+</script>
+
+<style scoped lang="scss">
+@import '/@/assets/styles/modern-page.scss';
+.text-primary {
+  color: #409eff;
+  font-weight: 500;
+}
+</style>
\ No newline at end of file