sunyu 序号凑合用了QAQ

src/views/history/index.vue

@@ -35,12 +35,16 @@
         label-width="100px"
       >
         <el-form-item prop="monitoringName">
-          <el-input
-            v-model.trim="queryParams.monitoringName"
+          <el-select
+            v-model="queryParams.monitoringName"
             placeholder="请输入监控点名称"
             clearable
-            @keyup.enter.native="handleQuery"
-          />
+          >
+            <el-option value="01">Camera 01</el-option>
+            <el-option value="02">Camera 02</el-option>
+            <el-option value="03">Camera 03</el-option>
+            <el-option value="04">Camera 04</el-option>
+          </el-select>
         </el-form-item>
 
         <el-form-item prop="monitorState">
@@ -58,11 +62,8 @@
           <el-date-picker
             placeholder="请选择监控时间"
             value-format="yyyy-MM-dd"
-            v-model="queryParams.monitorTime"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
+            v-model="queryParams.monitoringStarttime"
+            type="date"
           >
           </el-date-picker>
           <!--        <el-date-picker clearable-->
@@ -103,7 +104,12 @@
         style="min-height: 650px"
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="序号" align="center" width="100" prop="id" />
+
+        <el-table-column label="序号" align="center" width="100">
+          <template slot-scope="scope">
+            <span>{{ calculateIndex(scope.$index) }}</span>
+          </template>
+        </el-table-column>
         <!--      <template slot-scope="scope">-->
         <!--        <span>{{ (scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize }}</span>-->
         <!--      </template>-->
@@ -198,6 +204,10 @@
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
+        :current-page.sync="currentPage"
+        :page-size="pageSize"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
         @pagination="getList"
       />
 
@@ -234,7 +244,6 @@ export default {
   dicts: ["history_state"],
   data() {
     return {
-      backTag: true,
       carryRowCode: {
         id: "",
         monitoringName: "",
@@ -257,6 +266,9 @@ export default {
       total: 0,
       // history表格数据
       histableList: [],
+      currentPage: 1,
+      pageSize: 10,
+      currentPageData: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -265,10 +277,10 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        monitoringName: null,
-        monitorTime: null,
-        monitorState: null,
-        id: null,
+        monitoringName: undefined,
+        monitorTime: undefined,
+        monitorState: undefined,
+        id: undefined,
       },
       // 表单参数
       form: {},
@@ -278,8 +290,43 @@ export default {
   },
   created() {
     this.getList();
+    this.updateCurrentPageData();
+  },
+  computed: {
+    startIndexOfPage() {
+      return (this.currentPage - 1) * this.total;
     },
+  },
+
   methods: {
+    handleSizeChange(val) {
+      this.total = val;
+      this.updateCurrentPageData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.updateCurrentPageData();
+    },
+    updateCurrentPageData() {
+      const startIndex = (this.currentPage - 1) * this.total;
+      const endIndex = startIndex + this.total;
+      this.currentPageData = this.histableList.slice(startIndex, endIndex);
+    },
+    calculateIndex(index) {
+      return this.startIndexOfPage + index + 1;
+    },
+
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+    nextPage() {
+      const maxPage = Math.ceil(this.items.length / this.total);
+      if (this.currentPage < maxPage) {
+        this.currentPage++;
+      }
+    },
     formatHoursAsHMS(hours) {
       // 确保小时数为整数
       const intHours = Math.floor(hours);
@@ -308,17 +355,12 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        ID: null,
-        monitoringName: null,
-        monitoringStarttime: null,
-        monitoringFinallytime: null,
-        monitorTime: null,
-        monitorState: null,
-        CREATETIME: null,
-        CREATEBY: null,
-        UPDATETIME: null,
-        UPDATEBY: null,
-        delFlag: null,
+        ID: undefined,
+        monitoringName: undefined,
+        monitoringStarttime: undefined,
+        monitoringFinallytime: undefined,
+        monitorTime: undefined,
+        monitorState: undefined,
       };
       this.resetForm("form");
     },
@@ -346,12 +388,6 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.$router.push({
-        name: "back",
-        query: {
-          backTag: true,
-        },
-      });
       this.carryRowCode = row;
       // 查看详情页面(把id换成code)
       this.$router.push({