@a2simcode/ui 0.0.66 → 0.0.67

package/docs/components/meta/comp.ts

@@ -53,6 +53,12 @@ export default {
       "description": "是否是表格单元格",
       "type": "boolean",
       "default": "false"
+    },
+    {
+      "name": "getTableProvide",
+      "description": "获取表格提供的方法",
+      "type": "func",
+      "default": "undefined"
     }
   ],
   "events": [

package/docs/components/meta/table.ts

@@ -136,6 +136,36 @@ export default {
       "description": "编辑参数",
       "type": "EditConfigType",
       "default": "() => ({})"
+    },
+    {
+      "name": "emptyTipText",
+      "description": "空数据提示文本",
+      "type": "string",
+      "default": "'暂无数据'"
+    },
+    {
+      "name": "subColumns",
+      "description": "子表列配置",
+      "type": "any[]",
+      "default": "() => []"
+    },
+    {
+      "name": "isSubShowNumber",
+      "description": "是否显示子表序号",
+      "type": "boolean",
+      "default": "true"
+    },
+    {
+      "name": "subActions",
+      "description": "子表行内操作按钮配置",
+      "type": "ButtonCompType[]",
+      "default": "() => []"
+    },
+    {
+      "name": "loadChildren",
+      "description": "子表/树形数据懒加载函数（children 为 true 时触发）",
+      "type": "(record: Record<string, any>) => Promise<any[]>",
+      "default": "null"
     }
   ],
   "events": [

package/docs/components/table.md

@@ -125,6 +125,40 @@
   </template>
 </Demo>
 
+## 子表
+
+通过 `subColumns` 属性配置子表列信息（Master-Detail）。
+
+<Demo :source-code="tableSubTableCode">
+  <template #source>
+    <table-sub-table />
+  </template>
+  <template #description>
+    传入 `subColumns` 数组配置子表列，配置格式与 `columns` 一致。
+    默认情况下，插件会查找记录中的 `children` 字段作为子表数据。
+    
+    此外，还可以通过以下属性控制子表行为：
+    - `isSubShowNumber`: 是否显示子表序号，默认为 `true`。
+    - `subActions`: 配置子表行内操作按钮，格式与 `actions` 一致。
+  </template>
+</Demo>
+
+## 子表异步数据加载（懒加载）
+
+当子表数据量较大时，可以将主表记录的 `children` 设置为 `true` 作为“需要懒加载”的标识；在用户展开该行时，组件会调用 `loadChildren(record)` 异步获取子表数据，并自动写入并展开。
+
+- 触发条件：展开行且 `originData.children === true`
+- 成功后：会把返回的数组设置为该行的子数据（下次再展开不会重复请求）
+
+<Demo :source-code="tableSubTableLazyCode">
+  <template #source>
+    <table-sub-table-lazy />
+  </template>
+  <template #description>
+    将主表行的 <code>children</code> 设置为 <code>true</code> 作为懒加载标识；展开该行时会调用 <code>loadChildren(record)</code> 获取子表数据并写入。
+  </template>
+</Demo>
+
 ## 多选
 
 通过 `isMultiple` 属性开启多选。
@@ -238,6 +272,8 @@ 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 TableSubTable from '../examples/table/sub-table.vue'
+import TableSubTableLazy from '../examples/table/sub-table-lazy.vue'
 import TableMultiple from '../examples/table/multiple.vue'
 import TableSingleSelection from '../examples/table/single-selection.vue'
 import TableFieldSelection from '../examples/table/field-selection.vue'
@@ -256,6 +292,8 @@ 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 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'
 import tableSingleSelectionCode from '../examples/table/single-selection.vue?raw'
 import tableFieldSelectionCode from '../examples/table/field-selection.vue?raw'

package/docs/examples/form/basic.vue

@@ -340,16 +340,15 @@ const schema = [
                   label: '',
                   field: 'name',
                 },
-                getCompConfig: (data) => {
-                  console.log(data, 'getCompConfig')
+                getCompConfig: ({ row }) => {
                   return {
-                    // prepend: h(
-                    //   'span',
-                    //   {
-                    //     style: { color: 'blue' },
-                    //   },
-                    //   row.type,
-                    // ),
+                    prepend: h(
+                      'span',
+                      {
+                        style: { color: 'blue' },
+                      },
+                      row.type
+                    ),
                   }
                 },
               },
@@ -359,6 +358,53 @@ const schema = [
       },
     ],
   },
+  {
+    type: 'j-table',
+    config: {
+      label: '规则格式',
+      field: 'ruleFormat',
+      heightMode: 'auto',
+      maxHeight: 300,
+      editConfig: { isAddBtn: true, isRemoveBtn: true },
+    },
+    children: [
+      {
+        type: 'j-select',
+        config: {
+          label: '前缀',
+          width: 120,
+          field: 'itemType',
+          dataType: 'options',
+          options: [
+            { value: '0', label: '自定义' },
+            { value: '1', label: '日期' },
+            { value: '2', label: '流水号' },
+            { value: '3', label: '公司' },
+            { value: '4', label: '部门' },
+            { value: '5', label: '用户' },
+            { value: '6', label: '表字段' },
+          ],
+          change: (data) => {
+            console.log(data)
+            data.row.Product = 'xxx'
+          },
+        },
+      },
+      {
+        id: 'Product',
+        config: {
+          label: 'Product Name',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+    ],
+    // on: {
+    //   change: (data: any) => {
+    //     console.log(data, 'change')
+    //   }
+    // }
+  },
 ]
 
 onMounted(() => {

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

@@ -0,0 +1,97 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      :columns="columns"
+      :records="records"
+      :sub-columns="subColumns"
+      :load-children="loadChildren"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'orderId',
+    config: {
+      label: 'Order ID',
+      width: 150,
+    },
+  },
+  {
+    id: 'customer',
+    config: {
+      label: 'Customer',
+      width: 'auto',
+    },
+  },
+  {
+    id: 'amount',
+    config: {
+      label: 'Amount',
+      width: 150,
+    },
+  },
+])
+
+const records = ref([
+  {
+    orderId: 'ORD-001',
+    customer: 'John Doe',
+    amount: '$1,200',
+    children: [
+      { id: 'P001', product: 'Laptop', quantity: 1, price: '$1,000' },
+      { id: 'P002', product: 'Mouse', quantity: 2, price: '$50' },
+    ],
+  },
+  {
+    orderId: 'ORD-002',
+    customer: 'Jane Smith',
+    amount: '$800',
+    children: true,
+  },
+])
+
+const subColumns = [
+  {
+    id: 'product',
+    config: {
+      label: 'Product',
+      width: 200,
+    },
+  },
+  {
+    id: 'quantity',
+    config: {
+      label: 'Quantity',
+      width: 100,
+    },
+  },
+  {
+    id: 'price',
+    config: {
+      label: 'Price',
+      width: 100,
+    },
+  },
+]
+
+const fetchDetailFromServer = async (orderId: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 600))
+
+  if (orderId === 'ORD-002') {
+    return [
+      { id: 'P003', product: 'Monitor', quantity: 1, price: '$300' },
+      { id: 'P004', product: 'Headset', quantity: 1, price: '$200' },
+    ]
+  }
+
+  return []
+}
+
+const loadChildren = async (record: any) => {
+  return await fetchDetailFromServer(record.orderId)
+}
+</script>

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

@@ -0,0 +1,103 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      :columns="columns"
+      :records="records"
+      :sub-columns="subColumns"
+      :is-sub-show-number="true"
+      :sub-actions="subActions"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'orderId',
+    config: {
+      label: 'Order ID',
+      width: 150,
+    },
+  },
+  {
+    id: 'customer',
+    config: {
+      label: 'Customer',
+      width: 'auto',
+    },
+  },
+  {
+    id: 'amount',
+    config: {
+      label: 'Amount',
+      width: 150,
+    },
+  },
+])
+
+const records = ref([
+  {
+    orderId: 'ORD-001',
+    customer: 'John Doe',
+    amount: '$1,200',
+    children: [
+      { id: 'P001', product: 'Laptop', quantity: 1, price: '$1,000' },
+      { id: 'P002', product: 'Mouse', quantity: 2, price: '$50' },
+      { id: 'P003', product: 'Keyboard', quantity: 1, price: '$100' },
+    ],
+  },
+  {
+    orderId: 'ORD-002',
+    customer: 'Jane Smith',
+    amount: '$800',
+    children: [
+      { id: 'P004', product: 'Monitor', quantity: 2, price: '$300' },
+      { id: 'P005', product: 'Headset', quantity: 1, price: '$200' },
+    ],
+  },
+  {
+    orderId: 'ORD-003',
+    customer: 'Bob Johnson',
+    amount: '$150',
+    children: [
+      { id: 'P006', product: 'USB Hub', quantity: 3, price: '$50' },
+    ],
+  },
+])
+
+const subColumns = [
+  {
+    id: 'product',
+    config: {
+      label: 'Product',
+      width: 200,
+    },
+  },
+  {
+    id: 'quantity',
+    config: {
+      label: 'Quantity',
+      width: 100,
+    },
+  },
+  {
+    id: 'price',
+    config: {
+      label: 'Price',
+      width: 100,
+    },
+  },
+]
+
+const subActions = [
+  {
+    id: 'view',
+    label: '查看详情',
+    click: ({ data }) => {
+      console.log('查看详情:', data)
+    },
+  },
+]
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",
@@ -68,8 +68,9 @@
     "@codemirror/state": "^6.5.4",
     "@codemirror/view": "^6.39.13",
     "@iconify/vue": "^5.0.0",
-    "@visactor/vtable": "^1.23.1",
-    "@visactor/vtable-editors": "^1.23.1",
+    "@visactor/vtable": "^1.23.3",
+    "@visactor/vtable-editors": "^1.23.3",
+    "@visactor/vtable-plugins": "^1.23.3",
     "@vueuse/core": "^14.2.0",
     "async-validator": "^4.2.5",
     "codemirror": "^6.0.2",