lyh

gydxnbplus/src/components/RuleManagement.vue

@@ -3,50 +3,108 @@
     <div class="form">
       <div class="form-item">
         <label for="ruleName">规则名称:</label>
-        <input type="text" id="ruleName" v-model="ruleName" placeholder="输入规则名称" style="width: 70%;border: 1px solid #ddd;
-  border-radius: 4px;height: 28px" />
+        <input
+            type="text"
+            id="ruleName"
+            v-model="ruleName"
+            placeholder="输入规则名称"
+            style="width: 70%;border: 1px solid #ddd; border-radius: 4px;height: 28px"
+        />
       </div>
 
       <div class="form-item">
         <label for="roundNumber">轮次数:</label>
-        <select id="roundNumber" v-model="selectedRoundNumber" class="select1">
-          <option v-for="number in roundNumberOptions" :key="number" :value="number">{{ number }}次</option>
+        <select
+            id="roundNumber"
+            v-model="selectedRoundNumber"
+            class="select1"
+        >
+          <option
+              v-for="number in roundNumberOptions"
+              :key="number"
+              :value="number"
+          >
+            {{ number }}次
+          </option>
         </select>
       </div>
 
       <div class="form-item">
         <label for="roundTime">轮次时间:</label>
-        <select id="roundTime" v-model="selectedRoundTime" class="select1">
-          <option v-for="time in roundTimeOptions" :key="time" :value="time">{{ time }}分钟</option>
+        <select
+            id="roundTime"
+            v-model="selectedRoundTime"
+            class="select1"
+        >
+          <option
+              v-for="time in roundTimeOptions"
+              :key="time"
+              :value="time"
+          >
+            {{ time }}分钟
+          </option>
         </select>
       </div>
 
       <div class="form-item">
         <label for="intervalDuration">间隔时长:</label>
-        <select id="intervalDuration" v-model="selectedIntervalDuration" class="select1">
-          <option v-for="duration in intervalDurationOptions" :key="duration" :value="duration">{{ duration }}分钟</option>
+        <select
+            id="intervalDuration"
+            v-model="selectedIntervalDuration"
+            class="select1"
+        >
+          <option
+              v-for="duration in intervalDurationOptions"
+              :key="duration"
+              :value="duration"
+          >
+            {{ duration }}分钟
+          </option>
         </select>
       </div>
 
       <div class="form-item search-button">
-        <el-button @click="queryrule" :icon="Search" class="search">搜索</el-button>
-        <el-button @click="resetForm" :icon="Refresh" class="resetForm">重置</el-button>
+        <el-button @click="queryrule" :icon="Search" class="search">
+          搜索
+        </el-button>
+        <el-button @click="resetForm" :icon="Refresh" class="resetForm">
+          重置
+        </el-button>
       </div>
     </div>
   </div>
-  <el-button type="primary" :icon="Plus" style="margin-left: 18px" @click="showAddRule = true">
+  <el-button
+      type="primary"
+      :icon="Plus"
+      style="margin-left: 18px"
+      @click="showAddRule = true"
+  >
     新增
   </el-button>
   <el-button type="success" :icon="EditPen">修改</el-button>
   <el-button type="danger" :icon="Delete">删除</el-button>
-  <el-button type="warning" @click="exportData" :icon="Download">导出</el-button>
-  <el-icon style="margin-left: 67%;border-radius: 50%; padding: 5px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #999;"><Search /></el-icon>
-  <el-icon style="margin-left: 5px;border-radius: 50%; padding: 5px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #999;"><Refresh /></el-icon>
+  <el-button type="warning" @click="exportData" :icon="Download">
+    导出
+  </el-button>
+  <el-icon
+      style="margin-left: 67%;border-radius: 50%; padding: 5px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #999"
+  >
+    <Search />
+  </el-icon>
+  <el-icon
+      style="margin-left: 5px;border-radius: 50%; padding: 5px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #999"
+  >
+    <Refresh />
+  </el-icon>
 
   <el-col style="margin-top: 4px">
-    <el-table :data="tableData3">
-<!--//多选列-->
-      <el-table-column type="selection" style="width: 5%;" align="center"></el-table-column>
+    <el-table :data="paginatedData">
+      <!--//多选列-->
+      <el-table-column
+          type="selection"
+          style="width: 5%;"
+          align="center"
+      ></el-table-column>
 
       <el-table-column
           v-if="false"
@@ -54,69 +112,95 @@
           name="foodRuleID"
           label="ID"
           align="center"
-          min-width="200">
-      </el-table-column>
+          min-width="200"
+      ></el-table-column>
 
       <el-table-column
           prop="foodRuleName"
           name="foodRuleName"
           label="规则名称"
           align="center"
-          min-width="200">
-      </el-table-column>
+          min-width="200"
+      ></el-table-column>
       <el-table-column
           name="totalRounds"
           prop="totalRounds"
           label="轮次数"
           align="center"
-          min-width="200">
-      </el-table-column>
+          min-width="200"
+      ></el-table-column>
       <el-table-column
           name="roundsTime"
           prop="roundsTime"
           label="轮次时间(分钟)"
           align="center"
-          min-width="200">
-      </el-table-column>
+          min-width="200"
+      ></el-table-column>
       <el-table-column
           name="roundSpacingTime"
           prop="roundSpacingTime"
           label="间隔时长(分钟)"
           align="center"
-          min-width="200">
-      </el-table-column>
+          min-width="200"
+      ></el-table-column>
       <el-table-column label="操作" align="center" min-width="200">
         <template v-slot="scope">
-          <el-button @click="manageUser(scope.row);this.wawawa=false;" type="primary" :icon="EditPen">用户管理</el-button>
-          <el-button @click="deleteRule(scope.row)" type="danger" :icon="Delete">删除</el-button>
+          <el-button
+              @click="manageUser(scope.row);this.wawawa=false;"
+              type="primary"
+              :icon="EditPen"
+          >
+            用户管理
+          </el-button>
+          <el-button
+              @click="deleteRule(scope.row)"
+              type="danger"
+              :icon="Delete"
+          >
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
   </el-col>
 
   <div class="pagination-container" style="margin-left: 70%">
-    <span style="width: 150px;margin-right: -90px" >共{{ totalDataCount }}条</span>
-    <el-select v-model="pageSizeOptionsValue" placeholder="每页条数" style="width: 120px">
+    <span style="width: 150px;margin-left: -80px">
+      共{{ totalDataCount }}条，当前第{{ currentPage }}页
+    </span>
+    <el-select
+        v-model="pageSizeOptionsValue"
+        placeholder="每页条数"
+        style="width: 80px"
+        @change="updatePageSize"
+    >
       <el-option
           v-for="option in pageSizeOptions"
-          :key="option.value"
-          :label="option.label"
-          :value="option.value"
+          :key="option"
+          :label="option + '条'"
+          :value="option"
       ></el-option>
     </el-select>
-    <el-button @click="prevPage" :disabled="currentPage === 1" style="margin-left: 10px">
+    <el-button
+        @click="prevPage"
+        :disabled="currentPage === 1"
+        style="margin-left: 10px"
+    >
       &lt;
     </el-button>
     <span>{{ currentPage }}</span>
-
-    <el-button @click="nextPage">
+    <el-button @click="nextPage" :disabled="currentPage === totalPages">
       &gt;
     </el-button>
-    <el-button @click="goToPage" >前往</el-button>
-    <el-input v-model="gotoPage"  style="width: 50px;" >
-    </el-input>
+    <el-button @click="goToPage">前往</el-button>
+    <el-input
+        v-model="gotoPage"
+        style="width: 100px;"
+        type="text"
+        min="1"
+        :max="totalPages"
+    ></el-input>
     <span style="margin-right: 50px">页</span>
-
   </div>
 
   <div class="container">
@@ -124,100 +208,177 @@
       <div class="add-rule-dialog">
         <div class="form-item">
           <label for="addruleName" class="label-style">规则名称:</label>
-          <input type="text" id="addruleName" v-model="addruleName" placeholder="输入规则名称" class="input-style" />
+          <input
+              type="text"
+              id="addruleName"
+              v-model="addruleName"
+              placeholder="输入规则名称"
+              class="input-style"
+          />
         </div>
         <div class="form-item">
           <label for="addroundNumber" class="label-style">轮次数:</label>
-          <select id="addroundNumber" v-model="selectedAddRoundNumber" class="select11" style="width: 63%">
-            <option v-for="number in roundNumberOptions" :key="number" :value="number">{{ number }}次</option>
+          <select
+              id="addroundNumber"
+              v-model="selectedAddRoundNumber"
+              class="select11"
+              style="width: 63%"
+          >
+            <option
+                v-for="number in roundNumberOptions"
+                :key="number"
+                :value="number"
+            >
+              {{ number }}次
+            </option>
           </select>
         </div>
         <div class="form-item">
           <label for="addroundTime" class="label-style">轮次时间:</label>
-          <select id="addroundTime" v-model="selectedAddRoundTime" class="select11">
-            <option v-for="time in roundTimeOptions" :key="time" :value="time">{{ time }}分钟</option>
+          <select
+              id="addroundTime"
+              v-model="selectedAddRoundTime"
+              class="select11"
+          >
+            <option
+                v-for="time in roundTimeOptions"
+                :key="time"
+                :value="time"
+            >
+              {{ time }}分钟
+            </option>
           </select>
         </div>
         <div class="form-item">
           <label for="addintervalDuration" class="label-style">间隔时长:</label>
-          <select id="addintervalDuration" v-model="selectedAddIntervalDuration" class="select11">
-            <option v-for="duration in intervalDurationOptions" :key="duration" :value="duration">{{ duration }}分钟</option>
+          <select
+              id="addintervalDuration"
+              v-model="selectedAddIntervalDuration"
+              class="select11"
+          >
+            <option
+                v-for="duration in intervalDurationOptions"
+                :key="duration"
+                :value="duration"
+            >
+              {{ duration }}分钟
+            </option>
           </select>
         </div>
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="showAddRule = false" class="cancel-button">取消</el-button>
-          <el-button type="primary" @click="addDepartment" class="confirm-button">确定</el-button>
+          <el-button @click="showAddRule = false" class="cancel-button">
+            取消
+          </el-button>
+          <el-button type="primary" @click="addDepartment" class="confirm-button">
+            确定
+          </el-button>
         </span>
       </template>
     </el-dialog>
   </div>
 
-
-
-
-
-
   <!-- 编辑部门登录框 -->
   <el-dialog v-model="RootLogin" title="供应商请登录">
-    <div class="form-edit-dialog" >
-
+    <div class="form-edit-dialog">
       <div class="form-item">
         <label for="RootLink" class="label-style">用户账号:</label>
-        <input type="text" id="RootLink" v-model="RootLink" placeholder="输入用户账号" class="input-style" />
+        <input
+            type="text"
+            id="RootLink"
+            v-model="RootLink"
+            placeholder="输入用户账号"
+            class="input-style"
+        />
       </div>
       <div class="form-item">
         <label for="RootPass" class="label-style">用户密码:</label>
-        <input type="text" id="YourPass" v-model="RootPass" placeholder="输入用户密码" class="input-style" />
+        <input
+            type="text"
+            id="YourPass"
+            v-model="RootPass"
+            placeholder="输入用户密码"
+            class="input-style"
+        />
       </div>
     </div>
     <template #footer>
-          <span class="dialog-footer" style="margin-top: 20px">
-            <el-button type="primary" @click="queryRoot">确定</el-button>
-            <el-button @click="RootLogin = false">取消</el-button>
-
-          </span>
+      <span class="dialog-footer" style="margin-top: 20px">
+        <el-button type="primary" @click="queryRoot">确定</el-button>
+        <el-button @click="RootLogin = false">取消</el-button>
+      </span>
     </template>
   </el-dialog>
   <!-- 编辑部门对话框 -->
   <el-dialog :data="queryLoginID" v-model="wawawa" title="编辑部门">
     <div class="form-edit-dialog">
       <div class="form-item">
-        <label for="FoodRuleID" class="label-style">用户ID:</label>
-        <input type="text" id="FoodRuleID" v-model="FoodRuleID" placeholder="输入用户账号" class="input-style" />
+        <label for="FoodRuleID" class="label-style">用户 ID:</label>
+        <input
+            type="text"
+            id="FoodRuleID"
+            v-model="FoodRuleID"
+            placeholder="输入用户账号"
+            class="input-style"
+        />
       </div>
 
       <div class="form-item">
         <label for="FoodRuleName" class="label-style">规则名称:</label>
-        <input prop="foodSupplierLink" type="text" id="FoodRuleName" v-model="FoodRuleName" class="input-style" />
+        <input
+            prop="foodSupplierLink"
+            type="text"
+            id="FoodRuleName"
+            v-model="FoodRuleName"
+            class="input-style"
+        />
       </div>
       <div class="form-item">
         <label for="TotalRounds" class="label-style">轮次数（次）:</label>
-        <input prop="foodSupplierPass" type="text" id="TotalRounds" v-model="TotalRounds"  class="input-style" />
+        <input
+            prop="foodSupplierPass"
+            type="text"
+            id="TotalRounds"
+            v-model="TotalRounds"
+            class="input-style"
+        />
       </div>
       <div class="form-item">
         <label for="RoundsTime" class="label-style">轮次时间（分钟）:</label>
-        <input prop="foodSupplierPass" type="text" id="RoundsTime" v-model="RoundsTime"  class="input-style" />
+        <input
+            prop="foodSupplierPass"
+            type="text"
+            id="RoundsTime"
+            v-model="RoundsTime"
+            class="input-style"
+        />
       </div>
       <div class="form-item">
         <label for="RoundSpacingTime" class="label-style">间隔时长（分钟）:</label>
-        <input prop="foodSupplierPass" type="text" id="RoundSpacingTime" v-model="TotalRounds"  class="input-style" />
+        <input
+            prop="foodSupplierPass"
+            type="text"
+            id="RoundSpacingTime"
+            v-model="TotalRounds"
+            class="input-style"
+        />
       </div>
     </div>
     <template #footer>
-    <span class="dialog-footer" style="margin-top: 20px">
-      <el-button type="primary" @click="editRule">确定</el-button>
-      <el-button @click="wawawa = false">取消</el-button>
-    </span>
+      <span class="dialog-footer" style="margin-top: 20px">
+        <el-button type="primary" @click="editRule">确定</el-button>
+        <el-button @click="wawawa = false">取消</el-button>
+      </span>
     </template>
   </el-dialog>
 </template>
+
 <script>
 import * as XLSX from 'xlsx';
 import http from '@/utils/http';
 // import axios from "axios";
-import { ref,  } from 'vue';
+import { ref } from 'vue';
 // import { Delete, Download, EditPen, Plus, Refresh, Search } from "@element-plus/icons-vue";
 
 export default {
@@ -231,9 +392,9 @@ export default {
       ]),
       showAddRule: ref(false),
       addruleName: ref(''),
-      roundNumberOptions: ref([1, 2, 3, 4, 5,]),
-      roundTimeOptions: ref([5, 10, 15, 20, 25,]),
-      intervalDurationOptions: ref([1, 2, 3, 4, 5,]),
+      roundNumberOptions: ref([1, 2, 3, 4, 5]),
+      roundTimeOptions: ref([5, 10, 15, 20, 25]),
+      intervalDurationOptions: ref([1, 2, 3, 4, 5]),
       selectedAddRoundNumber: ref(''),
       selectedAddRoundTime: ref(''),
       selectedAddIntervalDuration: ref(''),
@@ -242,49 +403,62 @@ export default {
       showEditDialogVisible: ref(false),
       selectedIntervalDuration: ref(''),
       ruleName: ref(''),
-      pageSize: 10,
-      RootLogin:ref(false),
-      wawawa:ref(false),
+      pageSizeOptionsValue: ref(5),
+      RootLogin: ref(false),
+      wawawa: ref(false),
       totalDataCount: ref(0),
-      currentPage: ref(1),
-      gotoPage: ref(''),
       departmentName: ref(''),
       phoneNumber: ref(''),
-      YourID:ref(''),
-      FoodRuleID:ref(''),
-      FoodRuleName:ref(''),
-      TotalRounds:ref(''),
-      RoundsTime:ref(''),
-      RoundSpacingTime:ref(''),
-      pageSizeOptions: [
-        { value: 10, label: '10 条/页' },
-        { value: 20, label: '20 条/页' },
-        { value: 30, label: '30 条/页' }
-      ],
-      pageSizeOptionsValue: ref(10)
+      YourID: ref(''),
+      FoodRuleID: ref(''),
+      // FoodRuleName: ref(''),
+      TotalRounds: ref(''),
+      RoundsTime: ref(''),
+      RoundSpacingTime: ref(''),
+      currentPage: ref(1),
+      pageSizeOptions: [5, 10, 15, 20],
+      gotoPage:ref(1)
     };
   },
+  computed: {
+    paginatedData() {
+      const start = (this.currentPage - 1) * this.pageSizeOptionsValue;
+      const end = start + this.pageSizeOptionsValue;
+      return this.tableData3.slice(start, end);
+    },
+    totalPages() {
+      return Math.ceil(this.totalDataCount / this.pageSizeOptionsValue);
+    }
+  },
   methods: {
+    updatePageSize() {
+      // 重新获取总数据条数
+      this.queryrule();
+      // 更新当前页码为第一页
+      this.currentPage = 1;
+    },
     queryrule() {
-      let aaa={
-        FoodRuleName: this.ruleName
-        // TotalRounds:this.totalRounds,
-        // RoundsTime:this.roundsTime,
-        // RoundSpacingTime:this.roundSpacingTime
-
-      }
-      console.log(aaa,"哇哇哇法网法网发")
-      http.get('/action/FoodRuleVO/queryRule',aaa).then(response => {
+      let aaa = {
+        FoodRuleName: this.ruleName,
+        TotalRounds:this.selectedRoundNumber,
+        RoundsTime:this.selectedRoundTime,
+        RoundSpacingTime:this.selectedRoundTime
+      };
+      console.log(aaa, "哇哇哇法网法网发");
+      http.get('/action/FoodRuleVO/queryRule', aaa).then(response => {
         this.tableData3 = response;
         console.log(this.tableData3);
       }).catch(error => {
         console.log(error);
       });
+      http.get('/action/FoodRuleVO/queryRulenum').then(numm => {
+        this.totalDataCount = String(numm[0].totalDataCount);
+      });
     },
     exportData() {
       // 直接使用组件实例中的 tableData3数据
       const sheetData = this.tableData3.map(item => ({
-        'ID':item.foodRuleID,
+        'ID': item.foodRuleID,
         '规则名称': item.foodRuleName,
         '轮次数': item.totalRounds,
         '轮次时间(分钟)': item.roundsTime,
@@ -297,28 +471,30 @@ export default {
     },
     addDepartment() {
       // 在这里可以将新增的部门数据添加到 departmentData 中
-      let rules={
+      let rules = {
         FoodRuleName: this.addruleName,
         TotalRounds: this.selectedAddRoundNumber,
         RoundsTime: this.selectedAddRoundTime,
         RoundSpacingTime: this.selectedAddIntervalDuration
       };
+      console.log(rules,"为什么瑞卡恶恶了大量")
       http.post('/action/FoodRuleVO/addRule', rules).then(res => {
-        console.log(res)
-        //添加成功后，从本地数据和总条数中添加该条数据
+        console.log(res);
+        // 添加成功后，从本地数据和总条数中添加该条数据
         this.tableData3 = [...this.tableData3, rules];
-        this.queryrule()
+        this.queryrule();
       }).catch(error => {
         console.log(error);
       });
       // 清空输入框
       this.addruleName = '';
-      this.selectedAddRoundNumber= '';
-      this.selectedAddRoundTime= '';
-      this.selectedAddIntervalDuration= '';
+      this.selectedAddRoundNumber = '';
+      this.selectedAddRoundTime = '';
+      this.selectedAddIntervalDuration = '';
       // 关闭对话框
       this.showAddRule = false;
       // this.totalDataCount.value = this.departmentData.value.length;
+      this.queryrule();
     },
     resetForm() {
       this.ruleName.value = '';
@@ -329,53 +505,48 @@ export default {
     manageUser(row) {
       // this.showEditDialogVisible = true;
       this.RootLogin = true;
-      this.YourID=row.foodRuleID
-      this.FoodRuleID=row.foodRuleID
-      this.FoodRuleName=row.foodRuleName
-      this.TotalRounds=row.totalRounds
-      this.RoundsTime=row.roundsTime
-      this.RoundSpacingTime=row.roundSpacingTime
+      this.YourID = row.foodRuleID;
+      this.FoodRuleID = row.foodRuleID;
+      this.FoodRuleName = row.foodRuleName;
+      this.TotalRounds = row.totalRounds;
+      this.RoundsTime = row.roundsTime;
+      this.RoundSpacingTime = row.roundSpacingTime;
     },
-
-    queryRoot(){
-
+    queryRoot() {
       let querylogin = {
-        ManagerAcc:this.RootLink,
-        ManagerPass:this.RootPass,
+        ManagerAcc: this.RootLink,
+        ManagerPass: this.RootPass,
       };
-      http.post('/action/User/queryRootlyh',querylogin).then(res =>{
-        console.log(res,"wwwwwwwwwwwwwwwww")
-        this.wawawa=true;
-      }).catch(error=>{
-        console.log(error)
-      })
+      http.post('/action/User/queryRootlyh', querylogin).then(res => {
+        console.log(res, "wwwwwwwwwwwwwwwww");
+        this.wawawa = true;
+      }).catch(error => {
+        console.log(error);
+      });
     },
-
     editRule() {
-      let updateRule={
-        FoodRuleID:this.FoodRuleID,
-        FoodRuleName:this.FoodRuleName,
-        TotalRounds:this.TotalRounds,
-        RoundsTime:this.RoundsTime,
-        RoundSpacingTime:this.RoundSpacingTime
+      let updateRule = {
+        FoodRuleID: this.FoodRuleID,
+        FoodRuleName: this.FoodRuleName,
+        TotalRounds: this.TotalRounds,
+        RoundsTime: this.RoundsTime,
+        RoundSpacingTime: this.RoundSpacingTime
       };
-      http.post('/action/FoodRuleVO/updateRule',updateRule).then(res =>{
-        console.log(res,'这里是改好了数据')
-        alert("修改成功")
-        this.queryrule()
-        this.wawawa= false;
-      }).catch(error=>{
-        console.log(error)
-        alert("修改失败")
-      })
-
+      http.post('/action/FoodRuleVO/updateRule', updateRule).then(res => {
+        console.log(res, '这里是改好了数据');
+        alert("修改成功");
+        this.queryrule();
+        this.wawawa = false;
+      }).catch(error => {
+        console.log(error);
+        alert("修改失败");
+      });
     },
-
     deleteRule(row) {
       // 添加确认删除的弹窗
-      console.log(row.foodRuleID)
+      console.log(row.foodRuleID);
       const FoodRuleIDData = {
-        FoodRuleID : row.foodRuleID
+        FoodRuleID: row.foodRuleID
       };
       this.$confirm('确定要删除这条规则吗？', '提示', {
         confirmButtonText: '确定',
@@ -384,7 +555,7 @@ export default {
       }).then(() => {
         // 如果用户确认删除，发送请求到后端删除数据
         http.post('/action/FoodRuleVO/deleteRule', FoodRuleIDData).then(res => {
-          console.log(res)
+          console.log(res);
           // 删除成功后，从本地数据和总条数中移除该条数据
           this.tableData3 = this.tableData3.filter(item => item!== row);
           this.totalDataCount.value--;
@@ -394,34 +565,25 @@ export default {
       }).catch(() => {
         // 用户取消删除操作，不做任何处理
       });
+      this.queryrule();
     },
-
     prevPage() {
-      if (this.currentPage.value > 1) {
-        this.currentPage.value--;
+      if (this.currentPage > 1) {
+        this.currentPage--;
       }
     },
     nextPage() {
-      const totalPages = Math.ceil(this.totalDataCount.value / this.pageSize);
-      if (this.currentPage.value < totalPages) {
-        this.currentPage.value++;
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
       }
     },
     goToPage() {
-      const page = parseInt(this.gotoPage.value);
-      if (!isNaN(page) && page >= 1 && page <= Math.ceil(this.totalDataCount.value / this.pageSize)) {
-        this.currentPage.value = page;
+      const page = parseInt(this.gotoPage);
+      if (!isNaN(page) && page >= 1 && page <= this.totalPages) {
+        this.currentPage = page;
       }
-    },
-    watchPageSizeOptionsValue(newValue) {
-      this.pageSize = newValue;
-      this.currentPage.value = 1; // 切换每页条数时重置到第一页
-      this.totalDataCount.value = this.departmentData.value.length;
     }
   },
-  watch: {
-    pageSizeOptionsValue: 'watchPageSizeOptionsValue'
-  },
   mounted() {
     this.queryrule();
   }

gydxnbplus/src/components/VendorManagement.vue

@@ -42,7 +42,7 @@
     <el-icon style="margin-left: 5px;border-radius: 50%; padding: 5px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #999;"><Refresh /></el-icon>
 
     <el-col style="margin-top: 4px">
-      <el-table :data="tableData2">
+      <el-table :data="paginatedData">
         <el-table-column type="selection" style="width: 5%;" align="center"></el-table-column>
 
         <el-table-column
@@ -107,6 +107,48 @@
     </el-col>
 
 
+
+    <div class="pagination-container" style="margin-left: 70%">
+    <span style="width: 180px;margin-left: -150px">
+        共{{ totalDataCount }}条，当前第{{ currentPage }}页
+    </span>
+      <el-select
+          v-model="pageSizeOptionsValue"
+          placeholder="每页条数"
+          style="width: 80px"
+          @change="updatePageSize"
+      >
+        <el-option
+            v-for="option in pageSizeOptions"
+            :key="option"
+            :label="option + '条'"
+            :value="option"
+        ></el-option>
+      </el-select>
+      <el-button
+          @click="prevPage"
+          :disabled="currentPage === 1"
+          style="margin-left: 10px"
+      >
+        &lt;
+      </el-button>
+      <span>{{ currentPage }}</span>
+      <el-button @click="nextPage" :disabled="currentPage === totalPages">
+        &gt;
+      </el-button>
+      <el-button @click="goToPage">前往</el-button>
+      <el-input
+          v-model="gotoPage"
+          style="width: 50px;"
+          type="text"
+          min="1"
+          :max="totalPages"
+      ></el-input>
+      <span style="margin-right: 50px">页</span>
+    </div>
+
+
+
     <!-- 地图的弹窗 -->
     <el-dialog v-model="dialogMapVisible" class="map-dialog" title="选择位置" width="50%" style="font-weight: bold;height: 60%">
       <div style="background-color: #f8f8f9; padding: 15px; border-radius: 8px;">
@@ -227,6 +269,11 @@ export default {
       YourID:ref(''),
       selectedLatitude: null,
       selectedLongitude: null,
+      totalDataCount: ref(0),
+      pageSizeOptionsValue: ref(5),
+      currentPage: ref(1),
+      pageSizeOptions: [5, 10, 15, 20],
+      gotoPage: ref(1),
       addressInfo:{
         longitude:'',
         latitude:'',
@@ -234,7 +281,21 @@ export default {
       }
     };
   },
+  computed: {
+    paginatedData() {
+      const start = (this.currentPage - 1) * this.pageSizeOptionsValue;
+      const end = start + this.pageSizeOptionsValue;
+      return this.tableData2.slice(start, end);
+    },
+    totalPages() {
+      return Math.ceil(this.totalDataCount / this.pageSizeOptionsValue);
+    }
+  },
   methods: {
+    updatePageSize() {
+      this.querypeople();
+      this.currentPage = 1;
+    },
     querypeople() {
       let params = {
         FoodSupplierName: this.supplierName,
@@ -247,6 +308,25 @@ export default {
       }).catch(error => {
         console.log(error);
       });
+      http.get('/action/FoodSupplierVO/querypeoplenum').then(numm => {
+        this.totalDataCount = String(numm[0].totalDataCount);
+      });
+    },
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
+      }
+    },
+    goToPage() {
+      const page = parseInt(this.gotoPage);
+      if (!isNaN(page) && page >= 1 && page <= this.totalPages) {
+        this.currentPage = page;
+      }
     },
     mywhereIN(row) {
       this.addressInfo.latitude = row.foodSupplierLocationlatitude;