@a2simcode/ui 0.0.176 → 0.0.177

package/docs/examples/table/tree-set-selection.vue

@@ -1,75 +1,75 @@
-<template>
-  <div style="margin-bottom: 10px">
-    <j-button type="primary" label="获取选中数据" @click="getSelection" />
-    <j-button label="选中父子节点" @click="setSelectionDemo" />
-  </div>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table
-      ref="tableRef"
-      :columns="columns"
-      :records="records"
-      is-tree
-      is-multiple
-      row-key="id"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tableRef = ref()
-
-const getSelection = () => {
-  const list = tableRef.value.getSelection()
-  console.log(list)
-  alert(`选中了 ${list.length} 条数据，详情请查看控制台`)
-}
-
-const setSelectionDemo = () => {
-  const selected: any[] = []
-  if (records.value[1]?.children?.[0]) selected.push(records.value[1].children[0])
-  tableRef.value.setSelection(selected)
-}
-
-const columns = ref([
-  {
-    id: 'name',
-    config: {
-      label: '名称',
-      width: 240,
-      align: 'left',
-    },
-  },
-  {
-    id: 'value',
-    config: {
-      label: '值',
-      width: 120,
-      align: 'right',
-    },
-  },
-])
-
-const records = ref([
-  {
-    id: 'dept-1',
-    name: '总部',
-    value: 60000,
-    children: [
-      { id: 'dept-1-hr', name: '人力资源', value: 15000 },
-      { id: 'dept-1-fin', name: '财务部', value: 18000 },
-      { id: 'dept-1-it', name: '信息技术', value: 27000 },
-    ],
-  },
-  {
-    id: 'dept-2',
-    name: '分部',
-    value: 35000,
-    children: [
-      { id: 'dept-2-sale', name: '销售部', value: 16000 },
-      { id: 'dept-2-support', name: '支持中心', value: 19000 },
-    ],
-  },
-])
-</script>
+<template>
+  <div style="margin-bottom: 10px">
+    <j-button type="primary" label="获取选中数据" @click="getSelection" />
+    <j-button label="选中父子节点" @click="setSelectionDemo" />
+  </div>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      ref="tableRef"
+      :columns="columns"
+      :records="records"
+      is-tree
+      is-multiple
+      row-key="id"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableRef = ref()
+
+const getSelection = () => {
+  const list = tableRef.value.getSelection()
+  console.log(list)
+  alert(`选中了 ${list.length} 条数据，详情请查看控制台`)
+}
+
+const setSelectionDemo = () => {
+  const selected: any[] = []
+  if (records.value[1]?.children?.[0]) selected.push(records.value[1].children[0])
+  tableRef.value.setSelection(selected)
+}
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '名称',
+      width: 240,
+      align: 'left',
+    },
+  },
+  {
+    id: 'value',
+    config: {
+      label: '值',
+      width: 120,
+      align: 'right',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: 'dept-1',
+    name: '总部',
+    value: 60000,
+    children: [
+      { id: 'dept-1-hr', name: '人力资源', value: 15000 },
+      { id: 'dept-1-fin', name: '财务部', value: 18000 },
+      { id: 'dept-1-it', name: '信息技术', value: 27000 },
+    ],
+  },
+  {
+    id: 'dept-2',
+    name: '分部',
+    value: 35000,
+    children: [
+      { id: 'dept-2-sale', name: '销售部', value: 16000 },
+      { id: 'dept-2-support', name: '支持中心', value: 19000 },
+    ],
+  },
+])
+</script>

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

@@ -1,229 +1,229 @@
-<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,
-      isNotFilter: true,
-    },
-  },
-  {
-    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: '删除',
-    config: { danger: 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>
+<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,
+      isNotFilter: true,
+    },
+  },
+  {
+    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: '删除',
+    config: { danger: 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>