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

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

@@ -1,9 +1,6 @@
 <template>
   <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>
+    <el-form ref="queryRef" v-show="showSearch" class="report-filter page-filter" :model="queryParams" :inline="true" label-width="88px">
       <el-form-item label="客户ID" prop="customerId">
         <el-input-number v-model="queryParams.customerId" :min="1" :controls="false" placeholder="请输入客户ID" />
       </el-form-item>
@@ -22,12 +19,21 @@
       <el-form-item label="生产批次" prop="batchNo">
         <el-input v-model="queryParams.batchNo" placeholder="请输入生产批次" clearable maxlength="64" @keyup.enter="handleQuery" />
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['report:consumption:list']">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery" v-hasPermi="['report:consumption:list']">重置</el-button>
-      </el-form-item>
+      <div class="report-filter__footer">
+        <el-form-item class="report-filter__date" label="使用时间">
+          <el-date-picker v-model="dateRange" type="daterange" value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
+        </el-form-item>
+        <el-form-item class="report-filter__actions">
+          <el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['report:consumption:list']">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery" v-hasPermi="['report:consumption:list']">重置</el-button>
+        </el-form-item>
+      </div>
     </el-form>
 
+    <el-row :gutter="10" class="mb8 report-toolbar">
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
+    </el-row>
+
     <el-alert v-if="loadError" :title="loadError" type="error" :closable="false" show-icon class="mb8" />
     <el-table v-loading="loading" class="report-table data-table" stripe border height="calc(100vh - 330px)" :data="reportList">
       <template #empty><el-empty description="暂无产线消耗数据" /></template>
@@ -67,11 +73,65 @@
 
 <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-filter {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 0 14px;
+  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) { width: 100%; margin-right: 0; margin-bottom: 12px; }
+.report-filter :deep(.el-form-item__content) { flex: 1; min-width: 0; }
+.report-filter :deep(.el-input),
+.report-filter :deep(.el-input-number),
+.report-filter :deep(.el-select),
+.report-filter :deep(.el-date-editor) { width: 100% !important; min-width: 0; }
+.report-filter__footer {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+  width: 100%;
+  min-width: 0;
+}
+.report-filter__footer :deep(.el-form-item) {
+  margin-right: 0;
+  margin-bottom: 12px;
+}
+.report-filter .report-filter__date {
+  flex: 0 1 420px;
+  width: 420px;
+  min-width: 0;
+  max-width: 100%;
+}
+.report-filter .report-filter__actions {
+  flex: 0 0 auto;
+  width: auto;
+}
+.report-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
 .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%; } }
+@media (max-width: 900px) {
+  .report-filter { grid-template-columns: 1fr; padding: 14px 14px 2px; }
+  .report-filter__footer {
+    grid-column: 1;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+  .report-filter .report-filter__date {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+  .report-filter .report-filter__actions { align-self: flex-end; margin-bottom: 12px; }
+  .report-toolbar :deep(.el-button) { margin-left: 0; }
+}
 </style>
 
 <script setup name="ReportConsumption">
@@ -79,6 +139,7 @@ import { listConsumptionReport } from '@/api/report/consumption'
 
 const { proxy } = getCurrentInstance()
 const reportList = ref([])
+const showSearch = ref(true)
 const loading = ref(false)
 const loadError = ref('')
 const total = ref(0)