@a2simcode/ui 0.0.68 → 0.0.70

package/docs/components/table.md

@@ -125,6 +125,19 @@
   </template>
 </Demo>
 
+## 树形异步数据加载（懒加载）
+
+当数据量较大时，可以将记录的 `children` 设置为 `true` 作为懒加载标识；展开该行时，组件会调用 `loadChildren(record)` 异步获取子节点并写入。
+
+<Demo :source-code="tableTreeLazyCode">
+  <template #source>
+    <table-tree-lazy />
+  </template>
+  <template #description>
+    设置 <code>isTree</code> 并在某些行上标记 <code>children: true</code>。展开时将调用 <code>loadChildren(record)</code> 获取并填充该行的子节点。
+  </template>
+</Demo>
+
 ## 子表
 
 通过 `subColumns` 属性配置子表列信息（Master-Detail）。
@@ -272,6 +285,7 @@ import TableFrozenColumn from '../examples/table/frozen-column.vue'
 import TableHeightMode from '../examples/table/height-mode.vue'
 import TableTreeColumn from '../examples/table/tree-column.vue'
 import TableTreeData from '../examples/table/tree-data.vue'
+import TableTreeLazy from '../examples/table/tree-lazy.vue'
 import TableSubTable from '../examples/table/sub-table.vue'
 import TableSubTableLazy from '../examples/table/sub-table-lazy.vue'
 import TableMultiple from '../examples/table/multiple.vue'
@@ -292,6 +306,7 @@ import tableFrozenColumnCode from '../examples/table/frozen-column.vue?raw'
 import tableHeightModeCode from '../examples/table/height-mode.vue?raw'
 import tableTreeColumnCode from '../examples/table/tree-column.vue?raw'
 import tableTreeDataCode from '../examples/table/tree-data.vue?raw'
+import tableTreeLazyCode from '../examples/table/tree-lazy.vue?raw'
 import tableSubTableCode from '../examples/table/sub-table.vue?raw'
 import tableSubTableLazyCode from '../examples/table/sub-table-lazy.vue?raw'
 import tableMultipleCode from '../examples/table/multiple.vue?raw'

package/docs/examples/page/log.vue

@@ -0,0 +1,207 @@
+<template> 
+   <div class="j-block j-user-center-log" style="height: 600px;"> 
+     <j-page :noPadding="true" :schema="schema" ref="indexRef" /> 
+   </div> 
+ </template> 
+ <script lang="ts" setup> 
+ import type { TableColumnCompConfig, ColumnSchemaConfig,LayerParamType } from '@a2simcode/ui'; 
+ 
+ import { ref, h, defineComponent, resolveComponent } from 'vue'; 
+ import { iconLoaded, loadIcon } from '@iconify/vue'; 
+ 
+ const indexRef = ref(); 
+ 
+ const ExecuteResultLayer = defineComponent({ 
+   name: 'ExecuteResultLayer', 
+   props: { 
+     text: { 
+       type: String, 
+       default: '', 
+     }, 
+   }, 
+   setup(props) { 
+     const JCodeMirror = resolveComponent('j-code-mirror'); 
+     return () => 
+       h( 
+         JCodeMirror, 
+         { 
+           readOnly: true, 
+           value: props.text || '', 
+         } 
+       ); 
+   }, 
+ }); 
+ 
+ const browsers = [ 
+   { name: 'Chrome', icon: 'logos:chrome' }, 
+   { name: 'Firefox', icon: 'logos:firefox' }, 
+   { name: 'Safari', icon: 'logos:safari' }, 
+   { name: 'Edge', icon: 'logos:microsoft-edge' }, 
+ ]; 
+ 
+ interface ColumnType {
+    label: string;
+    id: string;
+ }
+
+ const columns: ColumnType[] = [ 
+   { label: '浏览器', id: 'j_BrowserTag' }, 
+   { 
+     label: '类型', 
+     id: 'j_CategoryId', 
+   }, 
+   { label: '时间', id: 'j_CreateDate' }, 
+   { label: '时长(ms)', id: 'j_Times' }, 
+   { label: '请求接口', id: 'j_Url' }, 
+   { label: '请求类型', id: 'j_OperateType' }, 
+   { label: 'IP', id: 'j_IPAddress' }, 
+   { label: '结果', id: 'j_Result' }, 
+   { label: '描述', id: 'j_ExecuteResult' }, 
+ ]; 
+ 
+ const columnsConfig: Record<string, TableColumnCompConfig> = { 
+   j_BrowserTag: { 
+     width: 72, 
+     type: 'j-icon', 
+     align: 'center', 
+   }, 
+   j_CategoryId: { 
+     type: 'j-tag', 
+     width: 72, 
+     align: 'center', 
+     dataType: 'options', 
+     options: [ 
+       { label: '登录', value: 1, color: '#e8ffea' }, 
+       { label: '访问', value: 2, color: '#e8f3ff' }, 
+       { label: '操作', value: 3, color: '#e5f9f8' }, 
+       { label: '文件下载', value: 5, color: '#fff7e8' }, 
+       { label: '文件预览', value: 6, color: '#f5f2ff' }, 
+       { label: '接口请求', value: 7, color: '#f0f5ff' }, 
+       { label: '接口限流', value: 8, color: '#fffce8' }, 
+       { label: '接口熔断', value: 9, color: '#fff2e8' }, 
+       { label: '异常', value: 4, color: '#ffece8' }, 
+     ], 
+   }, 
+   j_CreateDate: { 
+     width: 160, 
+     dataType: 'dateTime', 
+   }, 
+   j_Times: { 
+     width: 80, 
+     align: 'center', 
+   }, 
+   j_Url: { 
+     width: 200, 
+     isSearchKeyword: true, 
+   }, 
+   j_OperateType: { 
+     width: 80, 
+     align: 'center', 
+   }, 
+ 
+   j_IPAddress: { 
+     width: 120, 
+     isSearchKeyword: true, 
+   }, 
+   j_Result: { 
+     type: 'j-tag', 
+     width: 72, 
+     align: 'center', 
+     dataType: 'options', 
+     fieldFormat: (row: Record<string, any>) => (row.j_Result === 1 ? 1 : 2), 
+     options: [ 
+       { label: '成功', value: 1, color: '#e8ffea' }, 
+       { label: '失败', value: 2, color: '#ffece8' }, 
+     ], 
+   }, 
+   j_ExecuteResult: { 
+     type: 'link', 
+     width: 60, 
+     align: 'center', 
+     fieldFormat: () => '查看', 
+     click: ({ row, openLayer }: { row: any,openLayer: (params: LayerParamType) => void }) => { 
+       openLayer({ 
+         title: '描述', 
+         name: ExecuteResultLayer, 
+         config: { text: row?.j_ExecuteResult || '' }, 
+         width: 1000, 
+         height: 600, 
+         hasBtns: false, 
+       }); 
+     }, 
+   }, 
+ }; 
+ 
+ const myColumns: ColumnSchemaConfig[] = []; 
+ columns.forEach((item) => { 
+   const config = columnsConfig[item.id || ''] || {}; 
+   const schemaItem: ColumnSchemaConfig = { 
+     id: item.id || '', 
+     type: config.type || '', 
+     config: { ...config, label: item.label || '' }, 
+   }; 
+   myColumns.push(schemaItem); 
+ }); 
+ 
+ // Mock API
+ const api = {
+    getMyPage: async (params: any) => {
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 300));
+        return {
+            total: 20,
+            rows: Array.from({ length: 10 }).map((_, i) => ({
+                j_Id: i + 1,
+                j_BrowserTag: browsers[i % browsers.length].name,
+                j_CategoryId: (i % 9) + 1,
+                j_CreateDate: new Date().toISOString(),
+                j_Times: Math.floor(Math.random() * 1000),
+                j_Url: `/api/v1/resource/${i}`,
+                j_OperateType: ['GET', 'POST', 'PUT', 'DELETE'][i % 4],
+                j_IPAddress: `192.168.1.${i}`,
+                j_Result: i % 5 === 0 ? 2 : 1,
+                j_ExecuteResult: JSON.stringify({ status: 200, message: 'Success' })
+            }))
+        }
+    }
+ }
+
+ const schema = [ 
+     { 
+       id: 'mainTable', 
+       type: 'j-table-panel', 
+       config: { 
+         columns: myColumns, 
+         rowKey: 'j_Id', 
+         sort: 'j_CreateDate DESC', 
+         isPage: true, 
+         loadData: async (params: Record<string, any>) => { 
+           let res = await api.getMyPage(params); 
+           if (res && res.rows) { 
+             const iconsToLoad = new Set(); 
+             res.rows.forEach((item: any) => { 
+               const browser = browsers.find( 
+                 (b) => item.j_BrowserTag && item.j_BrowserTag === b.name 
+               ); 
+               if (browser) { 
+                 item.j_BrowserTag = browser.icon; 
+                 iconsToLoad.add(browser.icon); 
+               } 
+             }); 
+ 
+             await Promise.all( 
+               [...iconsToLoad].map(async (icon) => { 
+                 if (!iconLoaded(icon as string)) { 
+                   await loadIcon(icon as string); 
+                 } 
+               }) 
+             ); 
+           } 
+ 
+           console.log(res, 'res'); 
+           return res; 
+         }, 
+       }, 
+     }, 
+   ];
+ </script> 

package/docs/examples/table/tree-lazy.vue

@@ -0,0 +1,80 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      :columns="columns"
+      :records="records"
+      is-tree
+      :load-children="loadChildren"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'category',
+    config: {
+      label: '类别',
+      width: 200,
+    },
+  },
+  {
+    id: 'amount',
+    config: {
+      label: '销售额',
+      width: 'auto',
+    },
+  },
+  {
+    id: 'profit',
+    config: {
+      label: '利润',
+      width: 120,
+    },
+  },
+])
+
+const records = ref([
+  {
+    category: '办公用品',
+    amount: '129.70',
+    profit: '-60.70',
+    children: [
+      { category: '信封', amount: '125.44', profit: '42.56' },
+      { category: '器具', amount: '1375.92', profit: '550.2' },
+    ],
+  },
+  {
+    category: '技术',
+    amount: '229.70',
+    profit: '90.70',
+    children: true,
+  },
+  {
+    category: '家具',
+    amount: '329.00',
+    profit: '120.30',
+    children: [
+      { category: '桌子', amount: '125.44', profit: '42.56' },
+      { category: '椅子', amount: '1375.92', profit: '550.2' },
+    ],
+  },
+])
+
+const delay = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+const loadChildren = async (record: any) => {
+  await delay(600)
+  if (record.category === '技术') {
+    return [
+      { category: '设备', amount: '225.44', profit: '462.56' },
+      { category: '配件', amount: '375.92', profit: '550.2' },
+      { category: '电话', amount: '175.92', profit: '750.2' },
+    ]
+  }
+  return []
+}
+</script>
+

package/docs/examples/table-panel/sub-table-lazy.vue

@@ -0,0 +1,100 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      :columns="columns"
+      :load-data="loadData"
+      :sub-columns="subColumns"
+      :load-children="loadChildren"
+      row-key="id"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ColumnSchemaConfig } from '@a2simcode/ui'
+
+const columns: ColumnSchemaConfig[] = [
+  {
+    id: 'id',
+    type: '',
+    config: {
+      align: 'center',
+      label: 'ID',
+      width: 100,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 200,
+    },
+  },
+  {
+    id: 'value',
+    type: 'j-switch',
+    config: {
+      label: '值',
+      width: 100,
+      align: 'center',
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+  },
+]
+
+const subColumns: ColumnSchemaConfig[] = [
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: '子ID',
+      width: 100,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '子名称',
+      width: 200,
+    },
+  },
+  {
+    id: 'value',
+    type: '',
+    config: {
+      label: '子值',
+      width: 100,
+    },
+  },
+]
+
+const loadData = async (params: Record<string, any>) => {
+  console.log('Loading main table data with params:', params)
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const data = [
+        { id: '1', name: 'Parent 1', value: 1, children: true },
+        { id: '2', name: 'Parent 2', value: 0, children: true },
+      ]
+      resolve(data)
+    }, 500)
+  })
+}
+
+const loadChildren = async (record: Record<string, any>): Promise<any[]> => {
+  console.log('Loading children for record:', record)
+  // 模拟异步加载数据
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const children = [
+        { id: record.id + '-1', name: record.name + ' Child 1', value: Math.random() * 100 },
+        { id: record.id + '-2', name: record.name + ' Child 2', value: Math.random() * 100 },
+      ]
+      resolve(children)
+    }, 1000)
+  })
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",