后台列表统一分页组件，工单/人员/账号改为服务端分页。

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-14 22:19:58 +08:00
parent 9d4889c482
commit 11ec728cf4
5 changed files with 298 additions and 43 deletions
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+/**
+ * 询价后台列表分页条：总数 + 每页条数 + 页码。
+ * 样式对齐 admin-fidelity.css 的 .pagination；翻页只发事件，不请求接口。
+ */
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    total: number;
+    pageNo: number;
+    pageSize: number;
+    /** 文案：共 N {unit} */
+    unit?: string;
+    pageSizeOptions?: number[];
+    disabled?: boolean;
+  }>(),
+  {
+    unit: "条",
+    pageSizeOptions: () => [10, 20, 50, 100],
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: "update:pageNo", v: number): void;
+  (e: "update:pageSize", v: number): void;
+  (e: "change"): void;
+}>();
+
+const totalPages = computed(() => Math.max(1, Math.ceil(Math.max(0, props.total) / Math.max(1, props.pageSize))));
+
+/**
+ * 页码按钮：两端保留，中间省略。
+ * 例：1 … 4 5 6 … 20
+ */
+const pageItems = computed(() => {
+  const total = totalPages.value;
+  const cur = Math.min(Math.max(1, props.pageNo), total);
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1) as Array<number | "ellipsis">;
+  }
+  const set = new Set<number>();
+  set.add(1);
+  set.add(total);
+  for (let p = cur - 1; p <= cur + 1; p++) {
+    if (p >= 1 && p <= total) set.add(p);
+  }
+  if (cur <= 3) {
+    set.add(2);
+    set.add(3);
+    set.add(4);
+  }
+  if (cur >= total - 2) {
+    set.add(total - 1);
+    set.add(total - 2);
+    set.add(total - 3);
+  }
+  const sorted = [...set].sort((a, b) => a - b);
+  const out: Array<number | "ellipsis"> = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (prev && p - prev > 1) out.push("ellipsis");
+    out.push(p);
+    prev = p;
+  }
+  return out;
+});
+
+function go(page: number) {
+  if (props.disabled) return;
+  const next = Math.min(Math.max(1, page), totalPages.value);
+  if (next === props.pageNo) return;
+  emit("update:pageNo", next);
+  emit("change");
+}
+
+function onSizeChange(e: Event) {
+  if (props.disabled) return;
+  const v = Number((e.target as HTMLSelectElement).value);
+  if (!v || v === props.pageSize) return;
+  emit("update:pageSize", v);
+  emit("update:pageNo", 1);
+  emit("change");
+}
+</script>
+
+<template>
+  <div class="pagination admin-pagination">
+    <span class="admin-pagination__total">
+      共 <b>{{ total }}</b> {{ unit }}
+      <span v-if="total > 0" class="admin-pagination__range">
+        （第 {{ pageNo }} / {{ totalPages }} 页）
+      </span>
+    </span>
+    <div class="admin-pagination__right">
+      <label class="admin-pagination__size">
+        每页
+        <select :value="pageSize" :disabled="disabled" @change="onSizeChange">
+          <option v-for="n in pageSizeOptions" :key="n" :value="n">{{ n }}</option>
+        </select>
+      </label>
+      <div class="pages">
+        <button type="button" :disabled="disabled || pageNo <= 1" @click="go(pageNo - 1)">上一页</button>
+        <template v-for="(item, idx) in pageItems" :key="idx + '-' + item">
+          <span v-if="item === 'ellipsis'" class="admin-pagination__ellipsis">…</span>
+          <button
+            v-else
+            type="button"
+            :class="{ 'is-active': item === pageNo }"
+            :disabled="disabled"
+            @click="go(item)"
+          >
+            {{ item }}
+          </button>
+        </template>
+        <button type="button" :disabled="disabled || pageNo >= totalPages" @click="go(pageNo + 1)">下一页</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.admin-pagination__right {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.admin-pagination__size {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #475467;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.admin-pagination__size select {
+  height: 28px;
+  border: 1px solid var(--line, #e4e7ec);
+  border-radius: 6px;
+  padding: 0 8px;
+  background: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  color: #344054;
+  cursor: pointer;
+}
+
+.admin-pagination__range {
+  color: #98a2b3;
+  font-weight: 600;
+  margin-left: 4px;
+}
+
+.admin-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  color: #98a2b3;
+  font-weight: 700;
+}
+
+.pages button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+</style>