@a2simcode/ui 0.0.46 → 0.0.47

package/docs/examples/table-panel/batch-operations.vue

@@ -0,0 +1,285 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      :buttons="buttons"
+      :batch-buttons="batchButtons"
+      :actions="actions"
+      is-multiple
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+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,
+      dataType: 'options',
+      options: [
+        { label: '办公用品', value: '办公用品' },
+        { label: '科技产品', value: '科技产品' },
+        { label: '家具', value: '家具' },
+      ],
+    },
+  },
+  {
+    id: 'region',
+    type: '',
+    config: {
+      label: '区域',
+      width: 100,
+    },
+  },
+  {
+    id: 'orderDate',
+    type: '',
+    config: {
+      label: '订单日期',
+      width: 120,
+      dataType: 'dateTime',
+    },
+  },
+  {
+    id: 'quantity',
+    type: '',
+    config: {
+      label: '数量',
+      width: 80,
+      align: 'right',
+    },
+  },
+  {
+    id: 'sales',
+    type: '',
+    config: {
+      label: '销售额',
+      width: 100,
+      align: 'right',
+    },
+  },
+])
+
+const buttons = ref([
+  {
+    label: '新增',
+    icon: 'mdi:add',
+    type: 'primary',
+    click: () => {
+      ElMessage.success('点击新增按钮')
+    },
+  },
+  {
+    label: '导出',
+    icon: 'mdi:download',
+    click: () => {
+      ElMessage.info('点击导出按钮')
+    },
+  },
+])
+
+// 批量操作按钮配置
+const batchButtons = ref([
+  {
+    label: '批量删除',
+    icon: 'mdi:delete',
+    type: 'danger',
+    click: (selectedRecords: Record<string, any>[]) => {
+      ElMessageBox.confirm(`确定要删除选中的 ${selectedRecords.length} 条记录吗？`, '批量删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          const orderIds = selectedRecords.map((r) => r.orderId).join('、')
+          ElMessage.success(`已删除: ${orderIds}`)
+        })
+        .catch(() => {
+          ElMessage.info('已取消删除')
+        })
+    },
+  },
+  {
+    label: '批量导出',
+    icon: 'mdi:download',
+    type: 'primary',
+    click: (selectedRecords: Record<string, any>[]) => {
+      const orderIds = selectedRecords.map((r) => r.orderId).join('、')
+      ElMessage.success(`正在导出 ${selectedRecords.length} 条记录: ${orderIds}`)
+    },
+  },
+  {
+    label: '批量审核',
+    icon: 'mdi:check-circle',
+    type: 'success',
+    click: (selectedRecords: Record<string, any>[]) => {
+      const orderIds = selectedRecords.map((r) => r.orderId).join('、')
+      ElMessage.success(`已审核 ${selectedRecords.length} 条记录: ${orderIds}`)
+    },
+  },
+])
+
+const actions = ref([
+  {
+    id: 'edit',
+    label: '编辑',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`编辑: ${row.orderId}`)
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    isDanger: true,
+    click: (row: Record<string, any>) => {
+      ElMessage.warning(`删除: ${row.orderId}`)
+    },
+  },
+])
+
+const mockData = [
+  {
+    id: '1',
+    orderId: 'CA-2016-152156',
+    customerId: 'CG-12520',
+    productName: 'Canon ImageCLASS 2200 Advanced Copier',
+    category: '办公用品',
+    region: '华东',
+    orderDate: '2016-11-08',
+    quantity: 2,
+    sales: 2399.99,
+  },
+  {
+    id: '2',
+    orderId: 'CA-2017-152157',
+    customerId: 'DV-13045',
+    productName: 'Logitech Wireless Mouse',
+    category: '科技产品',
+    region: '华南',
+    orderDate: '2017-03-15',
+    quantity: 3,
+    sales: 89.97,
+  },
+  {
+    id: '3',
+    orderId: 'US-2017-108966',
+    customerId: 'SO-20335',
+    productName: 'HON Mesh Task Chair',
+    category: '家具',
+    region: '华北',
+    orderDate: '2017-06-21',
+    quantity: 4,
+    sales: 799.96,
+  },
+  {
+    id: '4',
+    orderId: 'US-2016-108967',
+    customerId: 'AB-10015',
+    productName: 'Avery Binder Labels',
+    category: '办公用品',
+    region: '华中',
+    orderDate: '2016-02-03',
+    quantity: 10,
+    sales: 15.9,
+  },
+  {
+    id: '5',
+    orderId: 'CA-2015-108968',
+    customerId: 'ML-12515',
+    productName: 'Apple iPhone 7',
+    category: '科技产品',
+    region: '西南',
+    orderDate: '2015-09-12',
+    quantity: 1,
+    sales: 699.0,
+  },
+  {
+    id: '6',
+    orderId: 'CA-2018-108969',
+    customerId: 'ML-12516',
+    productName: 'Samsung Galaxy S8',
+    category: '科技产品',
+    region: '华南',
+    orderDate: '2018-05-20',
+    quantity: 2,
+    sales: 1398.0,
+  },
+  {
+    id: '7',
+    orderId: 'US-2019-108970',
+    customerId: 'AB-10016',
+    productName: 'Office Chair',
+    category: '家具',
+    region: '华东',
+    orderDate: '2019-08-15',
+    quantity: 5,
+    sales: 2495.0,
+  },
+]
+
+const loadData = async (loadDataParams: any) => {
+  console.log(loadDataParams, 'loadDataParams')
+  
+  // 检测是否有查询过滤参数
+  const hasKeyword = loadDataParams.keyword?.value
+  const hasFilter = loadDataParams.filter?.cond?.length > 0
+  
+  if (hasKeyword || hasFilter) {
+    ElMessageBox.alert(
+      '查询过滤功能需要后端支持。在实际使用中，请将查询参数（keyword 和 filter）传递给后端接口进行数据过滤。',
+      '提示',
+      {
+        confirmButtonText: '知道了',
+        type: 'info',
+      }
+    )
+  }
+  
+  // 模拟异步加载数据
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(mockData)
+    }, 300)
+  })
+}
+</script>

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

@@ -0,0 +1,209 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel row-key="orderId" :columns="columns" :load-data="loadData" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+
+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,
+      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: 120,
+      dataType: 'dateTime',
+    },
+  },
+  {
+    id: 'sales',
+    type: '',
+    config: {
+      label: '销售额',
+      width: 100,
+      align: 'right',
+    },
+  },
+])
+
+const mockData = [
+  {
+    orderId: 'CA-2016-152156',
+    customerId: 'CG-12520',
+    productName: 'Canon ImageCLASS 2200 Advanced Copier',
+    category: '办公用品',
+    region: '华东',
+    orderDate: '2016-11-08',
+    sales: 2399.99,
+  },
+  {
+    orderId: 'CA-2017-152157',
+    customerId: 'DV-13045',
+    productName: 'Logitech Wireless Mouse',
+    category: '科技产品',
+    region: '华南',
+    orderDate: '2017-03-15',
+    sales: 89.97,
+  },
+  {
+    orderId: 'US-2017-108966',
+    customerId: 'SO-20335',
+    productName: 'HON Mesh Task Chair',
+    category: '家具',
+    region: '华北',
+    orderDate: '2017-06-21',
+    sales: 799.96,
+  },
+  {
+    orderId: 'US-2016-108967',
+    customerId: 'AB-10015',
+    productName: 'Avery Binder Labels',
+    category: '办公用品',
+    region: '华中',
+    orderDate: '2016-02-03',
+    sales: 15.9,
+  },
+  {
+    orderId: 'CA-2015-108968',
+    customerId: 'ML-12515',
+    productName: 'Apple iPhone 7',
+    category: '科技产品',
+    region: '西南',
+    orderDate: '2015-09-12',
+    sales: 699.0,
+  },
+  {
+    orderId: 'CA-2018-152158',
+    customerId: 'JK-15780',
+    productName: 'IKEA Desk Lamp',
+    category: '家具',
+    region: '华东',
+    orderDate: '2018-05-20',
+    sales: 45.0,
+  },
+]
+
+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(() => {
+      let result = [...mockData]
+
+      // 关键字搜索
+      if (params.keyword?.value) {
+        const keyword = params.keyword.value.toLowerCase()
+        const fields = params.keyword.fields || []
+        result = result.filter((item: any) => {
+          return fields.some((field: string) => {
+            const value = item[field]
+            return value && String(value).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(cond.value)
+              case 'in':
+                return Array.isArray(cond.value) ? cond.value.includes(value) : value === cond.value
+              default:
+                return true
+            }
+          })
+        })
+      }
+
+      resolve(result)
+    }, 300)
+  })
+}
+</script>