@a2simcode/ui 0.0.70 → 0.0.72

package/docs/examples/table-panel/pagination.vue

@@ -1,133 +1,133 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table-panel
-      ref="tablePanelRef"
-      row-key="orderId"
-      :columns="columns"
-      :load-data="loadData"
-      :is-page="true"
-      :page-size="10"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessageBox } from 'element-plus'
-
-const tablePanelRef = ref()
-
-const columns = ref([
-  {
-    id: 'orderId',
-    type: '',
-    config: {
-      label: '订单号',
-      width: 150,
-      filter: {
-        isSearchKeyword: true,
-      },
-    },
-  },
-  {
-    id: 'customerId',
-    type: '',
-    config: {
-      label: '客户编号',
-      width: 120,
-      filter: {
-        isSearchKeyword: true,
-      },
-    },
-  },
-  {
-    id: 'productName',
-    type: '',
-    config: {
-      label: '产品名称',
-      filter: {
-        isSearchKeyword: true,
-      },
-    },
-  },
-  {
-    id: 'category',
-    type: '',
-    config: {
-      label: '类别',
-      width: 120,
-    },
-  },
-  {
-    id: 'region',
-    type: '',
-    config: {
-      label: '区域',
-      width: 100,
-    },
-  },
-  {
-    id: 'sales',
-    type: '',
-    config: {
-      label: '销售额',
-      width: 100,
-      align: 'right',
-    },
-  },
-])
-
-// 生成模拟数据
-const generateMockData = (count: number) => {
-  const categories = ['办公用品', '科技产品', '家具']
-  const regions = ['华东', '华南', '华北', '华中', '西南', '西北']
-  const data = []
-
-  for (let i = 1; i <= count; i++) {
-    data.push({
-      orderId: `ORD-${String(i).padStart(6, '0')}`,
-      customerId: `CUS-${String(Math.floor(Math.random() * 10000)).padStart(5, '0')}`,
-      productName: `产品名称 ${i}`,
-      category: categories[Math.floor(Math.random() * categories.length)],
-      region: regions[Math.floor(Math.random() * regions.length)],
-      sales: (Math.random() * 10000).toFixed(2),
-    })
-  }
-
-  return data
-}
-
-const allData = generateMockData(100)
-
-const loadData = async (params: Record<string, any>) => {
-  // 检测是否有查询过滤参数
-  const hasKeyword = params.keyword?.value
-  const hasFilter = params.filter?.cond?.length > 0
-  
-  if (hasKeyword || hasFilter) {
-    ElMessageBox.alert(
-      '查询过滤功能需要后端支持。在实际使用中，请将查询参数（keyword 和 filter）传递给后端接口进行数据过滤。',
-      '提示',
-      {
-        confirmButtonText: '知道了',
-        type: 'info',
-      }
-    )
-  }
-  
-  // 模拟异步分页加载
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const { pagination } = params
-      const { rows, page } = pagination || { rows: 10, page: 1 }
-      const start = (page - 1) * rows
-      const end = start + rows
-
-      resolve({
-        rows: allData.slice(start, end),
-        records: allData.length,
-      })
-    }, 300)
-  })
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      ref="tablePanelRef"
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      :is-page="true"
+      :page-size="10"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+
+const tablePanelRef = ref()
+
+const columns = ref([
+  {
+    id: 'orderId',
+    type: '',
+    config: {
+      label: '订单号',
+      width: 150,
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+  {
+    id: 'customerId',
+    type: '',
+    config: {
+      label: '客户编号',
+      width: 120,
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+  {
+    id: 'productName',
+    type: '',
+    config: {
+      label: '产品名称',
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+  {
+    id: 'category',
+    type: '',
+    config: {
+      label: '类别',
+      width: 120,
+    },
+  },
+  {
+    id: 'region',
+    type: '',
+    config: {
+      label: '区域',
+      width: 100,
+    },
+  },
+  {
+    id: 'sales',
+    type: '',
+    config: {
+      label: '销售额',
+      width: 100,
+      align: 'right',
+    },
+  },
+])
+
+// 生成模拟数据
+const generateMockData = (count: number) => {
+  const categories = ['办公用品', '科技产品', '家具']
+  const regions = ['华东', '华南', '华北', '华中', '西南', '西北']
+  const data = []
+
+  for (let i = 1; i <= count; i++) {
+    data.push({
+      orderId: `ORD-${String(i).padStart(6, '0')}`,
+      customerId: `CUS-${String(Math.floor(Math.random() * 10000)).padStart(5, '0')}`,
+      productName: `产品名称 ${i}`,
+      category: categories[Math.floor(Math.random() * categories.length)],
+      region: regions[Math.floor(Math.random() * regions.length)],
+      sales: (Math.random() * 10000).toFixed(2),
+    })
+  }
+
+  return data
+}
+
+const allData = generateMockData(100)
+
+const loadData = async (params: Record<string, any>) => {
+  // 检测是否有查询过滤参数
+  const hasKeyword = params.keyword?.value
+  const hasFilter = params.filter?.cond?.length > 0
+  
+  if (hasKeyword || hasFilter) {
+    ElMessageBox.alert(
+      '查询过滤功能需要后端支持。在实际使用中，请将查询参数（keyword 和 filter）传递给后端接口进行数据过滤。',
+      '提示',
+      {
+        confirmButtonText: '知道了',
+        type: 'info',
+      }
+    )
+  }
+  
+  // 模拟异步分页加载
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const { pagination } = params
+      const { rows, page } = pagination || { rows: 10, page: 1 }
+      const start = (page - 1) * rows
+      const end = start + rows
+
+      resolve({
+        rows: allData.slice(start, end),
+        records: allData.length,
+      })
+    }, 300)
+  })
+}
+</script>

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

@@ -1,100 +1,118 @@
-<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>
+<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'
+import * as VTable from '@visactor/vtable'
+
+VTable.register.icon('loading', {
+  type: 'image',
+  width: 16,
+  height: 16,
+  src: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/loading-circle.gif',
+  name: 'loading',
+  positionType: VTable.TYPES.IconPosition.contentLeft,
+  marginLeft: 0,
+  marginRight: 4,
+  visibleTime: 'always',
+  hover: {
+    width: 22,
+    height: 22,
+    bgColor: 'rgba(101,117,168,0.1)',
+  },
+  isGif: true,
+})
+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>