@a2simcode/ui 0.0.45 → 0.0.47

package/docs/examples/table/field-selection.vue

@@ -0,0 +1,87 @@
+<template>
+  <div style="margin-bottom: 10px">
+    <j-button type="primary" label="获取选中数据" @click="getSelection" />
+  </div>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      ref="tableRef"
+      :columns="columns"
+      :records="records"
+      is-multiple
+      select-field="checkState"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableRef = ref()
+
+const getSelection = () => {
+  const records = tableRef.value.getSelection()
+  console.log(records)
+  alert(`选中了 ${records.length} 条数据，详情请查看控制台`)
+}
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Product Name',
+    config: {
+      label: 'Product Name',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
+    checkState: true,
+  },
+  {
+    'Order ID': 'CA-2017-152157',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Logitech Wireless Mouse',
+    checkState: {
+      text: '已选',
+      checked: true,
+      disable: false,
+    },
+  },
+  {
+    'Order ID': 'US-2017-108966',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'HON Mesh Task Chair',
+    checkState: false,
+  },
+  {
+    'Order ID': 'US-2016-108967',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Avery Binder Labels',
+    checkState: {
+      checked: false,
+      disable: true, // 禁用
+    },
+  },
+])
+</script>

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

@@ -0,0 +1,140 @@
+<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: 'Order Info',
+    config: {
+      label: 'Order Info',
+      align: 'center',
+    },
+    children: [
+      {
+        id: 'Order ID',
+        config: {
+          label: 'Order ID',
+          width: 150,
+          align: 'left',
+          frozen: 'left',
+        },
+      },
+      {
+        id: 'Order Date',
+        config: {
+          label: 'Order Date',
+          width: 150,
+          align: 'center',
+          frozen: 'left',
+        },
+      },
+    ],
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 150,
+      align: 'left',
+    },
+  },
+  {
+    id: 'Quantity',
+    config: {
+      label: 'Quantity',
+      width: 150,
+      align: 'right',
+    },
+  },
+  {
+    id: 'Sales',
+    config: {
+      label: 'Sales',
+      width: 150,
+      align: 'right',
+    },
+  },
+  {
+    id: 'Profit',
+    config: {
+      label: 'Profit',
+      width: 150,
+      align: 'right',
+      frozen: 'right',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Copiers',
+    Region: 'West',
+    City: 'Los Angeles',
+    'Order Date': '2016-11-08',
+    Quantity: 2,
+    Sales: 2399.99,
+    Profit: 400.0,
+  },
+  {
+    'Order ID': 'CA-2017-152157',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Logitech Wireless Mouse',
+    Category: 'Technology',
+    'Sub-Category': 'Accessories',
+    Region: 'West',
+    City: 'San Francisco',
+    'Order Date': '2017-03-15',
+    Quantity: 3,
+    Sales: 89.97,
+    Profit: 25.5,
+  },
+  {
+    'Order ID': 'US-2017-108966',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'HON Mesh Task Chair',
+    Category: 'Furniture',
+    'Sub-Category': 'Chairs',
+    Region: 'East',
+    City: 'New York',
+    'Order Date': '2017-06-21',
+    Quantity: 4,
+    Sales: 799.96,
+    Profit: 120.0,
+  },
+  {
+    'Order ID': 'US-2016-108967',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Avery Binder Labels',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Labels',
+    Region: 'Central',
+    City: 'Chicago',
+    'Order Date': '2016-02-03',
+    Quantity: 10,
+    Sales: 15.9,
+    Profit: 5.2,
+  },
+  {
+    'Order ID': 'CA-2015-108968',
+    'Customer ID': 'ML-12515',
+    'Product Name': 'Apple iPhone 7',
+    Category: 'Technology',
+    'Sub-Category': 'Phones',
+    Region: 'South',
+    City: 'Dallas',
+    'Order Date': '2015-09-12',
+    Quantity: 1,
+    Sales: 699.0,
+    Profit: 80.0,
+  },
+])
+</script>

package/docs/examples/table/height-mode.vue

@@ -0,0 +1,99 @@
+<template>
+  <div style="width: 100%">
+    <div style="margin-bottom: 16px">
+      <el-radio-group v-model="heightMode">
+        <el-radio-button value="full">充满父容器 (Full)</el-radio-button>
+        <el-radio-button value="auto">内容自适应 (Auto)</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <div
+      :style="{
+        position: 'relative',
+        width: '100%',
+        height: heightMode === 'full' ? '500px' : 'auto',
+      }"
+    >
+      <j-table
+        :columns="columns"
+        :records="records"
+        :height-mode="heightMode"
+        :max-height="heightMode === 'auto' ? 300 : undefined"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const heightMode = ref<'full' | 'auto'>('auto')
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Product Name',
+    config: {
+      label: 'Product Name',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Category',
+    config: {
+      label: 'Category',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
+    Category: 'Office Supplies',
+  },
+  {
+    'Order ID': 'CA-2017-152157',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Logitech Wireless Mouse',
+    Category: 'Technology',
+  },
+  {
+    'Order ID': 'US-2017-108966',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'HON Mesh Task Chair',
+    Category: 'Furniture',
+  },
+  {
+    'Order ID': 'US-2016-108967',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Avery Binder Labels',
+    Category: 'Office Supplies',
+  },
+  {
+    'Order ID': 'CA-2015-108968',
+    'Customer ID': 'ML-12515',
+    'Product Name': 'Apple iPhone 7',
+    Category: 'Technology',
+  },
+])
+</script>

package/docs/examples/table/multiple.vue

@@ -0,0 +1,178 @@
+<template>
+  <div style="margin-bottom: 10px">
+    <j-button type="primary" label="获取选中数据" @click="getSelection" />
+    <j-button label="选中前两行" @click="setSelection" />
+  </div>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table ref="tableRef" :columns="columns" :records="records" is-multiple />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableRef = ref()
+
+const getSelection = () => {
+  const records = tableRef.value.getSelection()
+  console.log(records)
+  alert(`选中了 ${records.length} 条数据，详情请查看控制台`)
+}
+
+const setSelection = () => {
+  const selectedRecords = [records.value[0], records.value[1]]
+  tableRef.value.setSelection(selectedRecords)
+}
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Product Name',
+    config: {
+      label: 'Product Name',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Category',
+    config: {
+      label: 'Category',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Quantity',
+    config: {
+      label: 'Quantity',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+  {
+    id: 'Sales',
+    config: {
+      label: 'Sales',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+  {
+    id: 'Profit',
+    config: {
+      label: 'Profit',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
+    Category: 'Office Supplies',
+    Quantity: 2,
+    Sales: 2399.99,
+    Profit: 400.0,
+  },
+  {
+    'Order ID': 'CA-2017-152157',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Logitech Wireless Mouse',
+    Category: 'Technology',
+    Quantity: 3,
+    Sales: 89.97,
+    Profit: 25.5,
+  },
+  {
+    'Order ID': 'US-2017-108966',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'HON Mesh Task Chair',
+    Category: 'Furniture',
+    Quantity: 4,
+    Sales: 799.96,
+    Profit: 120.0,
+  },
+  {
+    'Order ID': 'US-2016-108967',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Avery Binder Labels',
+    Category: 'Office Supplies',
+    Quantity: 10,
+    Sales: 15.9,
+    Profit: 5.2,
+  },
+  {
+    'Order ID': 'CA-2015-108968',
+    'Customer ID': 'ML-12515',
+    'Product Name': 'Apple iPhone 7',
+    Category: 'Technology',
+    Quantity: 1,
+    Sales: 699.0,
+    Profit: 80.0,
+  },
+  {
+    'Order ID': 'CA-2016-108969',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Staples Paper',
+    Category: 'Office Supplies',
+    Quantity: 20,
+    Sales: 40.0,
+    Profit: 12.0,
+  },
+  {
+    'Order ID': 'US-2016-108970',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Dell Monitor 24"',
+    Category: 'Technology',
+    Quantity: 2,
+    Sales: 320.0,
+    Profit: 60.0,
+  },
+  {
+    'Order ID': 'US-2017-108971',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'Office Chair Ergonomic',
+    Category: 'Furniture',
+    Quantity: 1,
+    Sales: 199.0,
+    Profit: 35.0,
+  },
+  {
+    'Order ID': 'CA-2017-108972',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Notebook Set',
+    Category: 'Office Supplies',
+    Quantity: 15,
+    Sales: 60.0,
+    Profit: 18.0,
+  },
+  {
+    'Order ID': 'US-2015-108973',
+    'Customer ID': 'ML-12515',
+    'Product Name': 'Bluetooth Headset',
+    Category: 'Technology',
+    Quantity: 2,
+    Sales: 150.0,
+    Profit: 30.0,
+  },
+])
+</script>

package/docs/examples/table/pagination.vue

@@ -0,0 +1,151 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      ref="tableRef"
+      v-model:table-page="currentPage"
+      v-model:page-size="pageSize"
+      :columns="columns"
+      :records="records"
+      :is-page="true"
+      :page-total="pageTotal"
+      @load-page-data="handleLoadPageData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Product Name',
+    config: {
+      label: 'Product Name',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Category',
+    config: {
+      label: 'Category',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Sub-Category',
+    config: {
+      label: 'Sub-Category',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Region',
+    config: {
+      label: 'Region',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'City',
+    config: {
+      label: 'City',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Order Date',
+    config: {
+      label: 'Order Date',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'Quantity',
+    config: {
+      label: 'Quantity',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+  {
+    id: 'Sales',
+    config: {
+      label: 'Sales',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+  {
+    id: 'Profit',
+    config: {
+      label: 'Profit',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+])
+
+let records: Record<string, any>[] = []
+const tableRef = ref()
+const allData = ref<any[]>([])
+const currentPage = ref(1)
+const pageSize = ref(20)
+const pageTotal = ref(0)
+
+// 加载分页数据
+const handleLoadPageData = ({ page, rows }: { page: number; rows: number }) => {
+  const start = (page - 1) * rows
+  const end = start + rows
+  records = allData.value.slice(start, end)
+
+  tableRef.value?.setRecords(records)
+}
+
+const generateLocalData = () => {
+  const data: any[] = []
+  for (let i = 1; i <= 100; i++) {
+    data.push({
+      'Order ID': `CA-2016-${150000 + i}`,
+      'Customer ID': `CU-${10000 + i}`,
+      'Product Name': `Sample Product ${i}`,
+      Category: i % 2 === 0 ? 'Office Supplies' : 'Technology',
+      'Sub-Category': i % 3 === 0 ? 'Chairs' : 'Accessories',
+      Region: i % 4 === 0 ? 'West' : 'East',
+      City: i % 5 === 0 ? 'Los Angeles' : 'New York',
+      'Order Date': `2016-01-${(i % 28) + 1}`.padStart(10, '0'),
+      Quantity: (i % 10) + 1,
+      Sales: 50 + i,
+      Profit: 10 + (i % 20),
+    })
+  }
+  return data
+}
+
+onMounted(() => {
+  allData.value = generateLocalData()
+  pageTotal.value = allData.value.length
+  handleLoadPageData({ page: currentPage.value, rows: pageSize.value })
+})
+</script>

package/docs/examples/table/single-selection.vue

@@ -0,0 +1,64 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      ref="tableRef"
+      :columns="columns"
+      :records="records"
+      @selection-changed="onSelectionChanged"
+    />
+  </div>
+  <div style="margin-top: 10px">Selected: {{ selected }}</div>
+  <div style="margin-top: 10px">
+    <el-button @click="getSelectionManual">Get Selection Manually</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableRef = ref()
+const selected = ref<any[]>([])
+
+const onSelectionChanged = (selection: any[]) => {
+  console.log('selection changed', selection)
+  selected.value = selection
+}
+
+const getSelectionManual = () => {
+  if (tableRef.value) {
+    const selection = tableRef.value.getSelection()
+    console.log('manual selection', selection)
+    selected.value = selection
+  }
+}
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+  },
+  {
+    'Order ID': 'CA-2016-138688',
+    'Customer ID': 'DV-13045',
+  },
+])
+</script>