jianghu-ui 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jianghu-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "JianghuJS UI Component Library with Storybook, Vue 2, and Vuetify 2",
   "main": "src/index.js",
   "scripts": {

package/src/components/JhAddressSelect/JhAddressSelect.vue

@@ -123,8 +123,8 @@
                 </v-list>
              </div>
 
-             <div v-if="level >= 2" class="jh-cascader-column">
-                 <v-list dense class="pa-0" v-if="cities.length">
+             <div v-if="level >= 2 && internalValue.province && cities.length" class="jh-cascader-column">
+                 <v-list dense class="pa-0">
                    <v-list-item v-for="item in cities" :key="item.code" @click="onCityClick(item)" :class="{'v-item--active v-list-item--active primary--text': internalValue.city === item.code}">
                       <v-list-item-content><v-list-item-title :title="item.name">{{ item.name }}</v-list-item-title></v-list-item-content>
                       <v-list-item-action v-if="level > 2"><v-icon small>mdi-chevron-right</v-icon></v-list-item-action>
@@ -132,8 +132,8 @@
                 </v-list>
              </div>
 
-             <div v-if="level >= 3" class="jh-cascader-column">
-                 <v-list dense class="pa-0" v-if="districts.length">
+             <div v-if="level >= 3 && internalValue.city && districts.length" class="jh-cascader-column">
+                 <v-list dense class="pa-0">
                    <v-list-item v-for="item in districts" :key="item.code" @click="onDistrictClick(item)" :class="{'v-item--active v-list-item--active primary--text': internalValue.district === item.code}">
                       <v-list-item-content><v-list-item-title :title="item.name">{{ item.name }}</v-list-item-title></v-list-item-content>
                       <v-list-item-action v-if="level > 3"><v-icon small>mdi-chevron-right</v-icon></v-list-item-action>
@@ -141,8 +141,8 @@
                 </v-list>
              </div>
 
-             <div v-if="level >= 4" class="jh-cascader-column">
-                 <v-list dense class="pa-0" v-if="towns.length">
+             <div v-if="level >= 4 && internalValue.district && towns.length" class="jh-cascader-column">
+                 <v-list dense class="pa-0">
                    <v-list-item v-for="item in towns" :key="item.code" @click="onTownClick(item)" :class="{'v-item--active v-list-item--active primary--text': internalValue.town === item.code}">
                       <v-list-item-content><v-list-item-title :title="item.name">{{ item.name }}</v-list-item-title></v-list-item-content>
                    </v-list-item>

package/src/components/JhTable/JhTable.stories.js

@@ -1442,3 +1442,74 @@ export const SelectionAlertRender = {
     `
   })
 };
+
+// 受控服务端分页 (完全由父组件控制)
+export const 受控服务端分页 = {
+  render: () => ({
+    components: { JhTable },
+    data() {
+      return {
+        headers: sampleHeaders,
+        items: [],
+        loading: false,
+        page: 1,
+        itemsPerPage: 10,
+        serverItemsLength: 0,
+      };
+    },
+    mounted() {
+      this.loadData();
+    },
+    watch: {
+      page() {
+        console.log('Page changed to:', this.page);
+        this.loadData();
+      },
+      itemsPerPage() {
+        console.log('Items per page changed to:', this.itemsPerPage);
+        // 通常改变每页大小时建议重置到第一页，但这里取决于业务逻辑
+        // 注意：v-data-table 可能会自动触发 update:page 为 1
+        this.loadData();
+      },
+    },
+    methods: {
+      async loadData() {
+        this.loading = true;
+        console.log(`Loading data: page=${this.page}, size=${this.itemsPerPage}`);
+        
+        // 模拟 API 延迟
+        await new Promise(resolve => setTimeout(resolve, 300));
+        
+        const total = allMockData.length;
+        const start = (this.page - 1) * this.itemsPerPage;
+        const end = start + this.itemsPerPage;
+        
+        this.items = allMockData.slice(start, end);
+        this.serverItemsLength = total;
+        this.loading = false;
+      },
+    },
+    template: `
+      <div>
+        <div class="mb-4 pa-4 orange lighten-5 rounded">
+          <strong>受控服务端分页示例 (无 request 函数)</strong>
+          <p class="mb-0 mt-2">完全由父组件控制 page 和 itemsPerPage，模拟传统的 v-data-table 服务端分页用法。</p>
+          <div class="mt-2">
+            Page: {{ page }} | ItemsPerPage: {{ itemsPerPage }} | Total: {{ serverItemsLength }}
+          </div>
+        </div>
+        <jh-table
+          :headers="headers"
+          :items="items"
+          :loading="loading"
+          :page.sync="page"
+          :items-per-page.sync="itemsPerPage"
+          :server-items-length="serverItemsLength"
+          :footer-props="{
+            'items-per-page-options': [5, 10, 20]
+          }"
+        />
+      </div>
+    `,
+  }),
+};

package/src/components/JhTable/JhTable.vue

@@ -845,6 +845,19 @@ export default {
       type: Boolean,
       default: false
     },
+    // ========== v-data-table 透传 Props (补充) ==========
+    page: {
+      type: Number,
+      default: undefined
+    },
+    serverItemsLength: {
+      type: Number,
+      default: undefined
+    },
+    value: {
+      type: Array,
+      default: undefined
+    },
     context: {
       type: Object,
       default: null
@@ -856,13 +869,13 @@ export default {
       searchInputInternal: this.searchInput,
       currentLoading: this.loading,
       currentItems: this.items || [],
-      currentPage: this.pagination ? this.pagination.current || 1 : 1,
+      currentPage: this.page !== undefined ? this.page : (this.pagination ? this.pagination.current || 1 : 1),
       currentItemsPerPage: this.itemsPerPage,
-      serverItemsLength: -1,
+      serverItemsLength: this.serverItemsLength !== undefined ? this.serverItemsLength : -1,
       internalColumns: [],
       currentDensity: this.size,
       isFullscreen: false,
-      selectedItems: [],
+      selectedItems: this.value || [],
       filterValues: {},
       pollingTimer: null,
       searchDebounceTimer: null,
@@ -1134,6 +1147,26 @@ export default {
     }
   },
   watch: {
+    page(val) {
+      if (val !== undefined && val !== this.currentPage) {
+        this.currentPage = val;
+      }
+    },
+    serverItemsLength(val) {
+      if (val !== undefined) {
+        this.serverItemsLength = val;
+      }
+    },
+    value(val) {
+      if (val !== undefined) {
+        this.selectedItems = val;
+      }
+    },
+    itemsPerPage(val) {
+      if (val !== undefined && val !== this.currentItemsPerPage) {
+        this.currentItemsPerPage = val;
+      }
+    },
     headers: {
       immediate: true,
       handler(val) {
@@ -1634,6 +1667,7 @@ export default {
       const filters = this.transformFilterValues(queryData);
       this.filterValues = filters;
       this.currentPage = 1; // 重置到第一页
+      this.$emit('update:page', 1);
       this.$emit('filter-search', filters);
       if (this.request) {
         this.reload();
@@ -1643,6 +1677,7 @@ export default {
     handleFilterReset() {
       this.filterValues = {};
       this.currentPage = 1; // 重置到第一页
+      this.$emit('update:page', 1);
       this.$emit('filter-reset');
       if (this.request) {
         this.reload();
@@ -1820,6 +1855,7 @@ export default {
     // 重置到第一页
     reset() {
       this.currentPage = 1;
+      this.$emit('update:page', 1);
       this.reload();
     },
     // 清空选择