基本配置修改 优化

src/views/kitchen/detection/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="app-container">
+    <!-- 查询表单 -->
+    <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="small" style="margin-bottom: 10px;">
+      <el-form-item label="样品名称">
+        <el-input v-model="queryParams.yangpinmingcheng" placeholder="输入样品名称"></el-input>
+      </el-form-item>
+      <el-form-item label="检测结果">
+        <el-select v-model="queryParams.jiancejieguo" placeholder="选择检测结果" clearable>
+          <el-option label="合格" value="合格"></el-option>
+          <el-option label="不合格" value="不合格"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
+        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据表格 -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      style="width: 100%"
+      :row-key="(row, index) => index"
+      fit>
+      <el-table-column
+        type="index"
+        label="序号"
+        width="60"
+        :index="indexMethod"
+      />
+      <el-table-column prop="yangpinbianhao" label="样品编号" />
+      <el-table-column prop="yangpinmingcheng" label="样品名称" />
+      <el-table-column prop="jiancexiangmu" label="检测项目" />
+      <el-table-column prop="jiancezhi" label="检测值" />
+      <el-table-column prop="jiancejieguo" label="检测结果" />
+      <el-table-column prop="jianceriqi" label="检测日期" />
+    </el-table>
+
+    <!-- 分页 -->
+     <el-pagination
+      style="margin-top: 10px; text-align: right;"
+      background
+      layout="prev, pager, next, jumper, total"
+      :current-page.sync="pagination.pageNum"
+      :page-size.sync="pagination.pageSize"
+      :total="pagination.total"
+      @current-change="pageChange">
+    </el-pagination>
+
+
+  </div>
+</template>
+
+<script>
+import request from '@/utils/request'
+
+export default {
+  name: 'DetectionList',
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        yangpinmingcheng: '',
+        jiancejieguo: ''
+      },
+      tableData: [],
+      pagination: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  mounted() {
+    this.getDetectionList()
+  },
+  methods: {
+    // 计算分页序号
+    indexMethod(index) {
+      return (this.pagination.pageNum - 1) * this.pagination.pageSize + index + 1
+    },
+    getDetectionList() {
+      request({
+        url: '/smart-canteen/detection/listByCondition',
+        method: 'get',
+        params: {
+          ...this.queryParams,
+          pageNum: this.pagination.pageNum,
+          pageSize: this.pagination.pageSize
+        }
+      }).then(res => {
+        this.tableData = res.rows
+        this.pagination.total = Number(res.total)
+
+      }).catch(err => {
+        console.error('获取检测明细失败', err)
+      })
+    },
+    search() {
+      this.pagination.pageNum = 1
+      this.getDetectionList()
+    },
+    reset() {
+      this.queryParams.yangpinmingcheng = ''
+      this.queryParams.jiancejieguo = ''
+      this.pagination.pageNum = 1
+      this.getDetectionList()
+    },
+    pageChange(page) {
+      this.pagination.pageNum = page
+      this.getDetectionList()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+</style>