@a2simcode/ui 0.0.45 → 0.0.47

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

@@ -0,0 +1,119 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'base_info',
+    config: {
+      label: 'Base Info',
+      width: 'auto',
+      align: 'center',
+    },
+    children: [
+      {
+        id: 'name',
+        config: {
+          label: 'Name',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'age',
+        config: {
+          label: 'Age',
+          width: 'auto',
+          align: 'center',
+        },
+      },
+    ],
+  },
+  {
+    id: 'contact_info',
+    config: {
+      label: 'Contact Info',
+      width: 'auto',
+      align: 'center',
+    },
+    children: [
+      {
+        id: 'phone',
+        config: {
+          label: 'Phone',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'email',
+        config: {
+          label: 'Email',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'address',
+        config: {
+          label: 'Address',
+          width: 'auto',
+          align: 'left',
+        },
+        children: [
+          {
+            id: 'province',
+            config: {
+              label: 'Province',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+          {
+            id: 'city',
+            config: {
+              label: 'City',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+          {
+            id: 'street',
+            config: {
+              label: 'Street',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+        ],
+      },
+    ],
+  },
+])
+
+const records = ref([
+  {
+    name: 'John Brown',
+    age: 18,
+    phone: '123456789',
+    email: 'john@example.com',
+    province: 'Sichuan',
+    city: 'Chengdu',
+    street: 'Kehua North Road',
+  },
+  {
+    name: 'Jim Green',
+    age: 24,
+    phone: '987654321',
+    email: 'jim@example.com',
+    province: 'Guangdong',
+    city: 'Shenzhen',
+    street: 'Nanshan Road',
+  },
+])
+</script>

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

@@ -0,0 +1,141 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" is-tree />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'group',
+    config: {
+      label: 'department',
+      width: 200,
+      align: 'left',
+      fieldFormat(rec: any) {
+        return rec['department'] ?? rec['group'] ?? rec['name']
+      },
+    },
+  },
+  {
+    id: 'total_children',
+    config: {
+      label: 'memebers count',
+      width: 150,
+      align: 'center',
+      fieldFormat(rec: any) {
+        if (rec?.['position']) {
+          return `position:  ${rec['position']}`
+        } else return rec?.['total_children']
+      },
+    },
+  },
+  {
+    id: 'monthly_expense',
+    config: {
+      label: 'monthly expense',
+      width: 150,
+      align: 'right',
+      fieldFormat(rec: any) {
+        if (rec?.['salary']) {
+          return `salary:  ${rec['salary']}`
+        } else return rec?.['monthly_expense']
+      },
+    },
+  },
+  {
+    id: 'new_hires_this_month',
+    config: {
+      label: 'new hires this month',
+      width: 150,
+      align: 'center',
+    },
+  },
+  {
+    id: 'resignations_this_month',
+    config: {
+      label: 'resignations this month',
+      width: 150,
+      align: 'center',
+    },
+  },
+  {
+    id: 'complaints_and_suggestions',
+    config: {
+      label: 'recived complaints counts',
+      width: 150,
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  {
+    group: 'Headquarters',
+    total_children: 3,
+    monthly_expense: 60000,
+    new_hires_this_month: 2,
+    resignations_this_month: 0,
+    complaints_and_suggestions: 1,
+    children: [
+      {
+        department: 'HR',
+        position: 'HR Manager',
+        salary: 15000,
+        monthly_expense: 15000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 0,
+      },
+      {
+        department: 'Finance',
+        position: 'Finance Manager',
+        salary: 18000,
+        monthly_expense: 18000,
+        new_hires_this_month: 0,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 0,
+      },
+      {
+        department: 'IT',
+        position: 'IT Director',
+        salary: 27000,
+        monthly_expense: 27000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 1,
+      },
+    ],
+  },
+  {
+    group: 'Branch Office',
+    total_children: 2,
+    monthly_expense: 35000,
+    new_hires_this_month: 1,
+    resignations_this_month: 1,
+    complaints_and_suggestions: 2,
+    children: [
+      {
+        department: 'Sales',
+        position: 'Sales Manager',
+        salary: 16000,
+        monthly_expense: 16000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 1,
+      },
+      {
+        department: 'Support',
+        position: 'Support Lead',
+        salary: 14000,
+        monthly_expense: 19000,
+        new_hires_this_month: 0,
+        resignations_this_month: 1,
+        complaints_and_suggestions: 1,
+      },
+    ],
+  },
+])
+</script>

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

@@ -0,0 +1,228 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      :buttons="buttons"
+      :actions="actions"
+    />
+  </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: 'enabledMark',
+    type: 'j-switch', // 开关
+    config: {
+      label: '是否在职',
+      width: 100,
+    },
+  },
+  {
+    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 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 = [
+  {
+    orderId: 'CA-2016-152156',
+    customerId: 'CG-12520',
+    productName: 'Canon ImageCLASS 2200 Advanced Copier',
+    category: '办公用品',
+    region: '华东',
+    orderDate: '2016-11-08',
+    quantity: 2,
+    sales: 2399.99,
+    enabledMark: true
+  },
+  {
+    orderId: 'CA-2017-152157',
+    customerId: 'DV-13045',
+    productName: 'Logitech Wireless Mouse',
+    category: '科技产品',
+    region: '华南',
+    orderDate: '2017-03-15',
+    quantity: 3,
+    sales: 89.97,
+    enabledMark: true
+  },
+  {
+    orderId: 'US-2017-108966',
+    customerId: 'SO-20335',
+    productName: 'HON Mesh Task Chair',
+    category: '家具',
+    region: '华北',
+    orderDate: '2017-06-21',
+    quantity: 4,
+    sales: 799.96,
+    enabledMark: false  
+  },
+  {
+    orderId: 'US-2016-108967',
+    customerId: 'AB-10015',
+    productName: 'Avery Binder Labels',
+    category: '办公用品',
+    region: '华中',
+    orderDate: '2016-02-03',
+    quantity: 10,
+    sales: 15.9,
+    enabledMark: true
+  },
+  {
+    orderId: 'CA-2015-108968',
+    customerId: 'ML-12515',
+    productName: 'Apple iPhone 7',
+    category: '科技产品',
+    region: '西南',
+    orderDate: '2015-09-12',
+    quantity: 1,
+    sales: 699.0,
+    enabledMark: false
+  },
+]
+
+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>