调整部分前端布局和后端增删改逻辑

shierfeng-fastapi-frontend/src/views/report/consumption/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <el-form ref="queryRef" :model="queryParams" :inline="true" label-width="76px">
+  <div class="app-container report-page">
+    <el-form ref="queryRef" class="report-filter page-filter" :model="queryParams" :inline="true" label-width="76px">
       <el-form-item label="使用时间">
         <el-date-picker v-model="dateRange" type="daterange" value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
       </el-form-item>
@@ -29,7 +29,7 @@
     </el-form>
 
     <el-alert v-if="loadError" :title="loadError" type="error" :closable="false" show-icon class="mb8" />
-    <el-table v-loading="loading" :data="reportList">
+    <el-table v-loading="loading" class="report-table data-table" stripe border height="calc(100vh - 330px)" :data="reportList">
       <template #empty><el-empty description="暂无产线消耗数据" /></template>
       <el-table-column label="使用记录号" prop="usageNo" min-width="150" :show-overflow-tooltip="true" />
       <el-table-column label="使用时间" prop="occurredAt" width="180">
@@ -65,6 +65,15 @@
   </div>
 </template>
 
+<style scoped>
+.report-page { min-width: 0; }
+.report-filter { padding: 16px 16px 4px; margin-bottom: 12px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 6px; }
+.report-filter :deep(.el-form-item) { margin-bottom: 12px; }
+.report-table :deep(.el-table__header th) { background: var(--el-fill-color-light); font-weight: 600; }
+.report-table :deep(.el-table__cell) { padding: 10px 0; }
+@media (max-width: 900px) { .report-filter :deep(.el-form-item) { width: 100%; } .report-filter :deep(.el-input), .report-filter :deep(.el-input-number), .report-filter :deep(.el-select), .report-filter :deep(.el-date-editor) { width: 100%; } }
+</style>
+
 <script setup name="ReportConsumption">
 import { listConsumptionReport } from '@/api/report/consumption'