@yxhl/specter-pui-vtk 1.0.93 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yxhl/specter-pui-vtk",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "description": "雅心互联 Vue 3 + Vuetify3 组件库",
   "type": "module",
   "main": "./dist/specter-pui.umd.js",

package/src/components/assembly/VtkSinglePage.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="vtk-single-page">
+    <v-row class="pagination-row ma-0" align="center" justify="end">
+      <template v-if="hasTotal">
+        <span class="page-total d-none d-md-flex">共 {{ rowCount }} 条</span>
+
+        <v-select
+          v-model="pagination.limit"
+          :items="pageSizeItems"
+          variant="outlined"
+          density="compact"
+          hide-details
+          class="page-select ml-2 d-none d-md-flex"
+          @update:model-value="handlePageSizeChange"
+        />
+
+        <v-pagination
+          v-model="currentPage"
+          :length="pageCount"
+          :total-visible="6"
+          density="comfortable"
+          size="small"
+          class="page-pagination"
+          @update:model-value="emitPageChange"
+        />
+
+        <span class="page-total ml-2 d-none d-md-flex">到</span>
+        <v-text-field
+          v-model="pagination.pageno"
+          variant="outlined"
+          density="compact"
+          hide-details
+          inputmode="numeric"
+          class="page-go ml-2 d-none d-md-flex"
+          @keyup.enter="goToPage"
+        />
+        <span class="page-total ml-2 d-none d-md-flex">页</span>
+      </template>
+
+      <template v-else>
+        <span class="page-total d-none d-md-flex">第 {{ currentPage }} 页</span>
+
+        <v-select
+          v-model="pagination.limit"
+          :items="pageSizeItems"
+          variant="outlined"
+          density="compact"
+          hide-details
+          class="page-select ml-2 d-none d-md-flex"
+          @update:model-value="handlePageSizeChange"
+        />
+
+        <div class="d-flex">
+          <v-btn
+            variant="outlined"
+            size="small"
+            height="36"
+			class="mr-2"
+            :disabled="currentPage <= 1"
+            @click="previousPage"
+          >
+            上一页
+          </v-btn>
+          <v-btn
+            variant="outlined"
+            size="small"
+            height="36"
+            :disabled="!hasNextPage"
+            @click="nextPage"
+          >
+            下一页
+          </v-btn>
+        </div>
+      </template>
+    </v-row>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+
+defineOptions({
+  name: 'VtkSinglePage'
+});
+
+const props = defineProps({
+  pageData: {
+    type: Object,
+    default: () => ({})
+  },
+  pageSizes: {
+    type: Array,
+    default: () => [15, 20, 30]
+  }
+});
+
+const emit = defineEmits(['pageChange']);
+
+const normalizePositiveInteger = (value, fallback = 1) => {
+  const parsedValue = Number.parseInt(value, 10);
+  return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : fallback;
+};
+
+const initialLimit = computed(() => normalizePositiveInteger(props.pageSizes[0], 15));
+const currentPage = ref(normalizePositiveInteger(props.pageData.pageno));
+const pagination = reactive({
+  pageno: currentPage.value,
+  limit: normalizePositiveInteger(props.pageData.limit, initialLimit.value)
+});
+
+const rowCount = computed(() => Math.max(0, Number(props.pageData.rowCount) || 0));
+const pageCount = computed(() => normalizePositiveInteger(props.pageData.pageCount));
+const hasTotal = computed(() => rowCount.value > 0);
+const pageSizeItems = computed(() => props.pageSizes.map(value => ({
+  title: `${value} 条/页`,
+  value
+})));
+const rowLength = computed(() => {
+  if (Array.isArray(props.pageData.rows)) {
+    return props.pageData.rows.length;
+  }
+
+  return Number.isFinite(Number(props.pageData.rows))
+    ? Number(props.pageData.rows)
+    : null;
+});
+const hasNextPage = computed(() => (
+  rowLength.value === null || rowLength.value >= Number(pagination.limit)
+));
+
+watch(
+  () => props.pageData,
+  newValue => {
+    currentPage.value = normalizePositiveInteger(newValue.pageno, currentPage.value);
+    pagination.pageno = currentPage.value;
+
+    if (newValue.limit != null) {
+      pagination.limit = normalizePositiveInteger(newValue.limit, pagination.limit);
+    }
+  },
+  { deep: true }
+);
+
+watch(currentPage, value => {
+  pagination.pageno = value;
+});
+
+watch(
+  () => props.pageSizes,
+  values => {
+    if (!values.some(value => Number(value) === Number(pagination.limit))) {
+      pagination.limit = initialLimit.value;
+    }
+  },
+  { deep: true }
+);
+
+const emitPageChange = () => {
+  emit('pageChange', {
+    pageno: currentPage.value,
+    limit: Number(pagination.limit)
+  });
+};
+
+const goToPage = () => {
+  const targetPage = Number(pagination.pageno);
+
+  if (Number.isInteger(targetPage) && targetPage >= 1 && targetPage <= pageCount.value) {
+    currentPage.value = targetPage;
+    emitPageChange();
+    return;
+  }
+
+  pagination.pageno = currentPage.value;
+};
+
+const handlePageSizeChange = () => {
+  currentPage.value = 1;
+  emitPageChange();
+};
+
+const previousPage = () => {
+  if (currentPage.value <= 1) return;
+
+  currentPage.value -= 1;
+  emitPageChange();
+};
+
+const nextPage = () => {
+  if (!hasNextPage.value) return;
+
+  currentPage.value += 1;
+  emitPageChange();
+};
+</script>
+
+<style lang="scss" scoped>
+.vtk-single-page {
+  width: 100%;
+  min-height: 60px;
+}
+
+.pagination-row {
+  min-height: 60px;
+  padding: 8px 16px;
+}
+
+.page-total {
+  align-items: center;
+  min-height: 36px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-size: 13px;
+}
+
+.page-select {
+  max-width: 120px;
+}
+
+.page-go {
+  max-width: 72px;
+}
+
+.page-select,
+.page-go {
+  :deep(.v-input__control),
+  :deep(.v-field) {
+    min-height: 36px;
+    height: 36px;
+    font-size: 13px;
+  }
+
+  :deep(.v-field__input) {
+    min-height: 36px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}
+
+.page-pagination {
+  :deep(.v-pagination__item),
+  :deep(.v-pagination__prev),
+  :deep(.v-pagination__next) {
+    font-size: 13px;
+  }
+}
+</style>

package/src/index.js

@@ -20,9 +20,10 @@ export { default as VtkPage } from "./components/assembly/VtkPage.vue";
 export { default as VtkPdf } from "./components/assembly/VtkPdf.vue";
 export { default as VtkProj } from "./components/assembly/VtkProj.vue";
 export { default as VtkRadio } from "./components/assembly/VtkRadio.vue";
-export { default as VtkSearch } from "./components/assembly/VtkSearch.vue";
-export { default as VtkSelect } from "./components/assembly/VtkSelect.vue";
-export { default as VtkStepper } from "./components/assembly/VtkStepper.vue";
+export { default as VtkSearch } from "./components/assembly/VtkSearch.vue";
+export { default as VtkSelect } from "./components/assembly/VtkSelect.vue";
+export { default as VtkSinglePage } from "./components/assembly/VtkSinglePage.vue";
+export { default as VtkStepper } from "./components/assembly/VtkStepper.vue";
 export { default as VtkUpload } from "./components/assembly/VtkUpload.vue";
 
 export * from "./commons/location.js";
@@ -65,9 +66,10 @@ import VtkPage from "./components/assembly/VtkPage.vue";
 import VtkPdf from "./components/assembly/VtkPdf.vue";
 import VtkProj from "./components/assembly/VtkProj.vue";
 import VtkRadio from "./components/assembly/VtkRadio.vue";
-import VtkSearch from "./components/assembly/VtkSearch.vue";
-import VtkSelect from "./components/assembly/VtkSelect.vue";
-import VtkStepper from "./components/assembly/VtkStepper.vue";
+import VtkSearch from "./components/assembly/VtkSearch.vue";
+import VtkSelect from "./components/assembly/VtkSelect.vue";
+import VtkSinglePage from "./components/assembly/VtkSinglePage.vue";
+import VtkStepper from "./components/assembly/VtkStepper.vue";
 import VtkUpload from "./components/assembly/VtkUpload.vue";
 import VtkMessageComponent from "./components/message/vtkMessage.vue";
 
@@ -91,9 +93,10 @@ function install(app, options = {}) {
     VtkPdf,
     VtkProj,
     VtkRadio,
-    VtkSearch,
-    VtkSelect,
-    VtkStepper,
+    VtkSearch,
+    VtkSelect,
+    VtkSinglePage,
+    VtkStepper,
     VtkUpload,
     VtkMessage: VtkMessageComponent
   };
@@ -140,9 +143,10 @@ export default {
   VtkPdf,
   VtkProj,
   VtkRadio,
-  VtkSearch,
-  VtkSelect,
-  VtkStepper,
+  VtkSearch,
+  VtkSelect,
+  VtkSinglePage,
+  VtkStepper,
   VtkUpload,
   request,
   storage,