jianghu-ui 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jianghu-ui",
-  "version": "1.0.4",
+  "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

@@ -844,6 +844,23 @@ export default {
     dense: {
       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
     }
   },
   data() {
@@ -852,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,
@@ -1130,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) {
@@ -1267,7 +1304,7 @@ export default {
     },
     getColumnRawValue(header, item, value) {
       if (header && typeof header.valueGetter === 'function') {
-        return header.valueGetter(item, header);
+        return header.valueGetter.call(this.context, item, header);
       }
       if (value !== undefined) return value;
       const key = header?.value;
@@ -1276,7 +1313,7 @@ export default {
     },
     applyValueFormatter(header, rawValue, item, index = 0) {
       if (header && typeof header.valueFormatter === 'function') {
-        const formatted = header.valueFormatter(rawValue, item, header, index);
+        const formatted = header.valueFormatter.call(this.context, rawValue, item, header, index);
         if (formatted !== undefined && formatted !== null) {
           return formatted;
         }
@@ -1537,7 +1574,7 @@ export default {
       if (!this.actionColumn || !this.actionColumn.buttons) return [];
       return this.actionColumn.buttons.filter(btn => {
         if (typeof btn.visible === 'function') {
-          return btn.visible(row);
+          return btn.visible.call(this.context, row);
         }
         return btn.visible !== false;
       });
@@ -1549,7 +1586,7 @@ export default {
         if (!confirmed) return;
       }
       if (btn.onClick) {
-        await btn.onClick(row);
+        await btn.onClick.call(this.context, row);
       }
     },
     // 复制到剪贴板
@@ -1587,7 +1624,7 @@ export default {
       this.$emit('selection-change', payload);
       this.$emit('input', selectedItems);
       if (this.rowSelection && typeof this.rowSelection.onChange === 'function') {
-        this.rowSelection.onChange(payload.selectedRowKeys, selectedItems);
+        this.rowSelection.onChange.call(this.context, payload.selectedRowKeys, selectedItems);
       }
     },
     // 页码改变
@@ -1630,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();
@@ -1639,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();
@@ -1650,7 +1689,7 @@ export default {
         const value = queryData[key];
         const meta = this.filterFieldMetaMap[key];
         if (meta && typeof meta.transform === 'function') {
-          const result = meta.transform(value, queryData);
+          const result = meta.transform.call(this.context, value, queryData);
           if (result && typeof result === 'object' && !Array.isArray(result)) {
             Object.assign(filters, result);
             return;
@@ -1816,6 +1855,7 @@ export default {
     // 重置到第一页
     reset() {
       this.currentPage = 1;
+      this.$emit('update:page', 1);
       this.reload();
     },
     // 清空选择
@@ -1874,7 +1914,7 @@ export default {
       const snapshot = this.getColumnStateSnapshot();
       this.$emit('columns-state-change', snapshot);
       if (this.columnsState && typeof this.columnsState.onChange === 'function') {
-        this.columnsState.onChange(snapshot);
+        this.columnsState.onChange.call(this.context, snapshot);
       }
       this.persistColumnState(snapshot);
     },