@a2simcode/ui 0.0.284 → 0.0.286

package/docs/examples/table-panel/remote-selection.vue

@@ -0,0 +1,159 @@
+<template>
+  <div style="margin-bottom: 10px; display: flex; gap: 8px; align-items: center">
+    <j-button type="primary" label="设置跨页选中" @click="setAllSelected" />
+    <span style="color: #606266; font-size: 13px"
+      >设置跨页选中后，点击表格右上角「仅选中」按钮，将按选中 ID 从接口拉取完整选中数据</span
+    >
+  </div>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      ref="tablePanelRef"
+      row-key="orderId"
+      is-multiple
+      select-state-key="selected"
+      remote-selection
+      :columns="columns"
+      :load-data="loadData"
+      :is-page="true"
+      :page-size="10"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tablePanelRef = ref()
+// 外部维护选中的 ID 集合
+const selectedIds = ref(new Set<string>())
+
+// 选中变化时用事件携带的 keys（跨页选中的完整 ID 列表）整体同步
+const handleSelect = ({ keys }: { keys: string[] }) => {
+  selectedIds.value = new Set(keys)
+}
+
+// 程序化设置跨页选中（ORD-000001 在第 1 页，ORD-000030 在第 3 页）
+const ids = ['ORD-000001', 'ORD-000030']
+const setAllSelected = () => {
+  selectedIds.value = new Set(ids)
+  // 按 ID 设置跨页选中，选中计数立即生效（无需等待对应页数据加载）
+  tablePanelRef.value?.setSelectionById?.(ids)
+  // 刷新表格，loadData 会根据 selectedIds 标记 selected 字段
+  tablePanelRef.value?.refreshData?.()
+}
+
+const columns = ref([
+  {
+    id: 'orderId',
+    type: '',
+    config: {
+      label: '订单号',
+      width: 150,
+    },
+  },
+  {
+    id: 'customerId',
+    type: '',
+    config: {
+      label: '客户编号',
+      width: 120,
+    },
+  },
+  {
+    id: 'productName',
+    type: '',
+    config: {
+      label: '产品名称',
+    },
+  },
+  {
+    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): Record<string, any>[] => {
+  const categories = ['办公用品', '科技产品', '家具']
+  const regions = ['华东', '华南', '华北', '华中', '西南', '西北']
+  const data: Record<string, any>[] = []
+
+  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)
+
+// 模拟后端分页接口
+// 开启 remote-selection 时，点击「仅选中」会携带 ids（选中 ID 逗号拼接）与 field（rowKey 字段名）调用本方法，按 ID 返回完整选中数据
+const loadData = async (params: Record<string, any>) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      // 仅选中（remote-selection）：按 ids 返回完整选中数据，实际使用中由后端按 ID 列表查询
+      if (params.ids) {
+        const idSet = new Set(String(params.ids).split(','))
+        const selectedData = allData.filter((item) => idSet.has(item[params.field]))
+        selectedData.forEach((item) => {
+          item.selected = true
+        })
+        resolve({
+          rows: selectedData,
+          records: selectedData.length,
+        })
+        return
+      }
+
+      const { pagination } = params
+      const { rows, page } = pagination || { rows: 10, page: 1 }
+      const start = (page - 1) * rows
+      const end = start + rows
+
+      // 获取当前页数据
+      const pageData = allData.slice(start, end)
+
+      // 根据 selectedIds 标记 selected 字段
+      // select-state-key="selected" 会让表格自动根据此字段初始化选中状态
+      pageData.forEach((item) => {
+        item.selected = selectedIds.value.has(item.orderId)
+      })
+
+      resolve({
+        rows: pageData,
+        records: allData.length,
+      })
+    }, 300)
+  })
+}
+</script>

package/docs/examples/table-panel/search-list.vue

@@ -1,207 +1,207 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table-panel
-      row-key="orderId"
-      :columns="columns"
-      :search-list="searchList"
-      :load-data="loadData"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const columns = ref([
-  {
-    id: 'orderId',
-    type: '',
-    config: {
-      label: '订单号',
-      width: 150,
-      filter: {
-        isSearchKeyword: true,
-      },
-    },
-  },
-  {
-    id: 'productName',
-    type: '',
-    config: {
-      label: '产品名称',
-      filter: {
-        isSearchKeyword: true,
-      },
-    },
-  },
-  {
-    id: 'category',
-    type: '',
-    config: {
-      label: '类别',
-      width: 120,
-      dataType: 'options',
-      options: [
-        { label: '办公用品', value: '办公用品' },
-        { label: '科技产品', value: '科技产品' },
-        { label: '家具', value: '家具' },
-      ],
-    },
-  },
-  {
-    id: 'region',
-    type: '',
-    config: {
-      label: '区域',
-      width: 100,
-      dataType: 'options',
-      options: [
-        { label: '华东', value: '华东' },
-        { label: '华南', value: '华南' },
-        { label: '华北', value: '华北' },
-        { label: '华中', value: '华中' },
-        { label: '西南', value: '西南' },
-      ],
-    },
-  },
-  {
-    id: 'orderDate',
-    type: '',
-    config: {
-      label: '订单日期',
-      width: 140,
-      dataType: 'dateTime',
-    },
-  },
-  {
-    id: 'sales',
-    type: 'number',
-    config: {
-      label: '销售额',
-      width: 100,
-      align: 'right',
-    },
-  },
-])
-
-const searchList = ref([
-  {
-    id: 'region',
-    type: 'j-input',
-    config: {
-      label: '区域',
-    },
-  },
-  {
-    id: 'category',
-    type: 'j-select',
-    config: {
-      label: '类别',
-      options: [
-        { label: '办公用品', value: '办公用品' },
-        { label: '科技产品', value: '科技产品' },
-        { label: '家具', value: '家具' },
-      ],
-    },
-  },
-])
-
-const mockData = [
-  {
-    orderId: 'CA-2016-152156',
-    productName: 'Canon ImageCLASS 2200 Advanced Copier',
-    category: '办公用品',
-    region: '华东',
-    orderDate: '2016-11-08',
-    sales: 2399.99,
-  },
-  {
-    orderId: 'CA-2017-152157',
-    productName: 'Logitech Wireless Mouse',
-    category: '科技产品',
-    region: '华南',
-    orderDate: '2017-03-15',
-    sales: 89.97,
-  },
-  {
-    orderId: 'US-2017-108966',
-    productName: 'HON Mesh Task Chair',
-    category: '家具',
-    region: '华北',
-    orderDate: '2017-06-21',
-    sales: 799.96,
-  },
-  {
-    orderId: 'US-2016-108967',
-    productName: 'Avery Binder Labels',
-    category: '办公用品',
-    region: '华中',
-    orderDate: '2016-02-03',
-    sales: 15.9,
-  },
-  {
-    orderId: 'CA-2018-152158',
-    productName: 'IKEA Desk Lamp',
-    category: '办公用品',
-    region: '华东',
-    orderDate: '2018-05-20',
-    sales: 45.0,
-  },
-]
-
-let hasShownTip = false
-
-const loadData = async (params: Record<string, any>) => {
-  if (!hasShownTip && (params.filter?.cond?.length > 0 || params.keyword?.value)) {
-    hasShownTip = true
-    ElMessage.info('此示例使用前端模拟筛选，仅用于展示 searchList 的固定条件效果。')
-  }
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      let result = [...mockData]
-
-      if (params.keyword?.value) {
-        const keyword = params.keyword.value.toLowerCase()
-        const fields = params.keyword.fields || []
-        result = result.filter((item: any) =>
-          fields.some((field: string) =>
-            String(item[field] || '')
-              .toLowerCase()
-              .includes(keyword)
-          )
-        )
-      }
-
-      if (params.filter?.cond?.length > 0) {
-        params.filter.cond.forEach((cond: any) => {
-          result = result.filter((item: any) => {
-            const value = item[cond.field]
-            switch (cond.method) {
-              case 'eq':
-                return value === cond.value
-              case 'ne':
-                return value !== cond.value
-              case 'like':
-                return String(value || '').includes(String(cond.value || ''))
-              case 'in': {
-                const list = Array.isArray(cond.value) ? cond.value : [cond.value]
-                return list.includes(value)
-              }
-              case 'nin': {
-                const list = Array.isArray(cond.value) ? cond.value : [cond.value]
-                return !list.includes(value)
-              }
-              default:
-                return true
-            }
-          })
-        })
-      }
-
-      resolve(result)
-    }, 300)
-  })
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      row-key="orderId"
+      :columns="columns"
+      :search-list="searchList"
+      :load-data="loadData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'orderId',
+    type: '',
+    config: {
+      label: '订单号',
+      width: 150,
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+  {
+    id: 'productName',
+    type: '',
+    config: {
+      label: '产品名称',
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+  {
+    id: 'category',
+    type: '',
+    config: {
+      label: '类别',
+      width: 120,
+      dataType: 'options',
+      options: [
+        { label: '办公用品', value: '办公用品' },
+        { label: '科技产品', value: '科技产品' },
+        { label: '家具', value: '家具' },
+      ],
+    },
+  },
+  {
+    id: 'region',
+    type: '',
+    config: {
+      label: '区域',
+      width: 100,
+      dataType: 'options',
+      options: [
+        { label: '华东', value: '华东' },
+        { label: '华南', value: '华南' },
+        { label: '华北', value: '华北' },
+        { label: '华中', value: '华中' },
+        { label: '西南', value: '西南' },
+      ],
+    },
+  },
+  {
+    id: 'orderDate',
+    type: '',
+    config: {
+      label: '订单日期',
+      width: 140,
+      dataType: 'dateTime',
+    },
+  },
+  {
+    id: 'sales',
+    type: 'number',
+    config: {
+      label: '销售额',
+      width: 100,
+      align: 'right',
+    },
+  },
+])
+
+const searchList = ref([
+  {
+    id: 'region',
+    type: 'j-input',
+    config: {
+      label: '区域',
+    },
+  },
+  {
+    id: 'category',
+    type: 'j-select',
+    config: {
+      label: '类别',
+      options: [
+        { label: '办公用品', value: '办公用品' },
+        { label: '科技产品', value: '科技产品' },
+        { label: '家具', value: '家具' },
+      ],
+    },
+  },
+])
+
+const mockData = [
+  {
+    orderId: 'CA-2016-152156',
+    productName: 'Canon ImageCLASS 2200 Advanced Copier',
+    category: '办公用品',
+    region: '华东',
+    orderDate: '2016-11-08',
+    sales: 2399.99,
+  },
+  {
+    orderId: 'CA-2017-152157',
+    productName: 'Logitech Wireless Mouse',
+    category: '科技产品',
+    region: '华南',
+    orderDate: '2017-03-15',
+    sales: 89.97,
+  },
+  {
+    orderId: 'US-2017-108966',
+    productName: 'HON Mesh Task Chair',
+    category: '家具',
+    region: '华北',
+    orderDate: '2017-06-21',
+    sales: 799.96,
+  },
+  {
+    orderId: 'US-2016-108967',
+    productName: 'Avery Binder Labels',
+    category: '办公用品',
+    region: '华中',
+    orderDate: '2016-02-03',
+    sales: 15.9,
+  },
+  {
+    orderId: 'CA-2018-152158',
+    productName: 'IKEA Desk Lamp',
+    category: '办公用品',
+    region: '华东',
+    orderDate: '2018-05-20',
+    sales: 45.0,
+  },
+]
+
+let hasShownTip = false
+
+const loadData = async (params: Record<string, any>) => {
+  if (!hasShownTip && (params.filter?.cond?.length > 0 || params.keyword?.value)) {
+    hasShownTip = true
+    ElMessage.info('此示例使用前端模拟筛选，仅用于展示 searchList 的固定条件效果。')
+  }
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      let result = [...mockData]
+
+      if (params.keyword?.value) {
+        const keyword = params.keyword.value.toLowerCase()
+        const fields = params.keyword.fields || []
+        result = result.filter((item: any) =>
+          fields.some((field: string) =>
+            String(item[field] || '')
+              .toLowerCase()
+              .includes(keyword)
+          )
+        )
+      }
+
+      if (params.filter?.cond?.length > 0) {
+        params.filter.cond.forEach((cond: any) => {
+          result = result.filter((item: any) => {
+            const value = item[cond.field]
+            switch (cond.method) {
+              case 'eq':
+                return value === cond.value
+              case 'ne':
+                return value !== cond.value
+              case 'like':
+                return String(value || '').includes(String(cond.value || ''))
+              case 'in': {
+                const list = Array.isArray(cond.value) ? cond.value : [cond.value]
+                return list.includes(value)
+              }
+              case 'nin': {
+                const list = Array.isArray(cond.value) ? cond.value : [cond.value]
+                return !list.includes(value)
+              }
+              default:
+                return true
+            }
+          })
+        })
+      }
+
+      resolve(result)
+    }, 300)
+  })
+}
+</script>