@a2simcode/ui 0.0.264 → 0.0.266

package/docs/examples/table/icon.vue

@@ -1,85 +1,85 @@
-<template>
-  <div style="position: relative; width: 100%; height: 300px">
-    <j-table v-if="iconsReady" :columns="columns" :records="records" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { getIcon, iconLoaded, loadIcon } from '@iconify/vue'
-import { onBeforeMount, ref } from 'vue'
-
-const iconsReady = ref(false)
-
-const browsers = [
-  { name: 'Chrome', icon: 'logos:chrome' },
-  { name: 'Firefox', icon: 'logos:firefox' },
-  { name: 'Safari', icon: 'logos:safari' },
-  { name: 'Edge', icon: 'logos:microsoft-edge' },
-]
-
-const toSvg = (iconName: string) => {
-  const iconData = getIcon(iconName)
-  if (!iconData) return ''
-  return `<svg viewBox="0 0 ${iconData.width} ${iconData.height}">${iconData.body}</svg>`
-}
-
-const records = ref<Record<string, any>[]>([])
-
-onBeforeMount(async () => {
-  // @ts-ignore
-  if (import.meta.env.SSR) {
-    iconsReady.value = true
-    return
-  }
-
-  const icons = browsers.map((item) => item.icon)
-
-  await Promise.all(
-    icons.map(async (icon) => {
-      if (!iconLoaded(icon)) {
-        await loadIcon(icon)
-      }
-    })
-  )
-
-  records.value = browsers.map((item) => {
-    return {
-      ...item,
-      svg: toSvg(item.icon),
-    }
-  })
-
-  iconsReady.value = true
-})
-
-const columns = ref([
-  {
-    id: 'name',
-    config: {
-      label: '浏览器',
-      width: 150,
-      align: 'left',
-    },
-  },
-  {
-    id: 'icon',
-    type: 'j-icon',
-    config: {
-      label: '图标（Iconify）',
-      width: 120,
-      align: 'center',
-      size: 24,
-    },
-  },
-  {
-    id: 'svg',
-    type: 'j-icon',
-    config: {
-      label: '图标（SVG）',
-      width: 120,
-      align: 'center',
-      size: 24,
-    },
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 300px">
+    <j-table v-if="iconsReady" :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getIcon, iconLoaded, loadIcon } from '@iconify/vue'
+import { onBeforeMount, ref } from 'vue'
+
+const iconsReady = ref(false)
+
+const browsers = [
+  { name: 'Chrome', icon: 'logos:chrome' },
+  { name: 'Firefox', icon: 'logos:firefox' },
+  { name: 'Safari', icon: 'logos:safari' },
+  { name: 'Edge', icon: 'logos:microsoft-edge' },
+]
+
+const toSvg = (iconName: string) => {
+  const iconData = getIcon(iconName)
+  if (!iconData) return ''
+  return `<svg viewBox="0 0 ${iconData.width} ${iconData.height}">${iconData.body}</svg>`
+}
+
+const records = ref<Record<string, any>[]>([])
+
+onBeforeMount(async () => {
+  // @ts-ignore
+  if (import.meta.env.SSR) {
+    iconsReady.value = true
+    return
+  }
+
+  const icons = browsers.map((item) => item.icon)
+
+  await Promise.all(
+    icons.map(async (icon) => {
+      if (!iconLoaded(icon)) {
+        await loadIcon(icon)
+      }
+    })
+  )
+
+  records.value = browsers.map((item) => {
+    return {
+      ...item,
+      svg: toSvg(item.icon),
+    }
+  })
+
+  iconsReady.value = true
+})
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '浏览器',
+      width: 150,
+      align: 'left',
+    },
+  },
+  {
+    id: 'icon',
+    type: 'j-icon',
+    config: {
+      label: '图标（Iconify）',
+      width: 120,
+      align: 'center',
+      size: 24,
+    },
+  },
+  {
+    id: 'svg',
+    type: 'j-icon',
+    config: {
+      label: '图标（SVG）',
+      width: 120,
+      align: 'center',
+      size: 24,
+    },
+  },
+])
+</script>

package/docs/examples/table/layer-form.vue

@@ -1,133 +1,133 @@
-<template>
-  <div>
-    <div style="position: relative; width: 100%; height: 360px">
-      <j-table :columns="columns" :records="records" />
-    </div>
-
-    <div style="margin-top: 16px">
-      <div style="margin-bottom: 8px; font-weight: 600">当前表格数据</div>
-      <pre
-        style="
-          margin: 0;
-          padding: 12px;
-          background: #f7f8fa;
-          border-radius: 4px;
-          overflow: auto;
-        "
-      >{{ JSON.stringify(records, null, 2) }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'name',
-    config: {
-      label: '姓名',
-      width: 160,
-    },
-  },
-  {
-    id: 'department',
-    config: {
-      label: '部门',
-      width: 160,
-    },
-  },
-  {
-    id: 'phone',
-    config: {
-      label: '手机号',
-      width: 180,
-    },
-  },
-  {
-    id: 'setting',
-    type: 'j-layerform',
-    config: {
-      label: '资料设置',
-      width: 120,
-      align: 'center',
-      buttonLabel: '编辑资料',
-      layerLabel: '编辑员工资料',
-      layerWidth: 640,
-      layerHeight: 320,
-      formConfig: {
-        labelWidth: 90,
-        labelPosition: 'right',
-        size: 'default',
-        gutter: 16,
-        span: 12,
-      },
-      schema: [
-        {
-          id: 'name',
-          type: 'j-input',
-          config: {
-            label: '姓名',
-            placeholder: '请输入姓名',
-          },
-        },
-        {
-          id: 'department',
-          type: 'j-select',
-          config: {
-            label: '部门',
-            placeholder: '请选择部门',
-            dataType: 'options',
-            options: [
-              { label: '研发部', value: '研发部' },
-              { label: '产品部', value: '产品部' },
-              { label: '运营部', value: '运营部' },
-            ],
-          },
-        },
-        {
-          id: 'phone',
-          type: 'j-input',
-          config: {
-            label: '手机号',
-            placeholder: '请输入手机号',
-          },
-        },
-        {
-          id: 'remark',
-          type: 'j-input',
-          config: {
-            label: '备注',
-            placeholder: '请输入备注',
-            span: 24,
-          },
-        },
-      ],
-    },
-  },
-])
-
-const records = ref([
-  {
-    id: '1',
-    name: '张三',
-    department: '研发部',
-    phone: '13800000001',
-    remark: '负责前端模块',
-  },
-  {
-    id: '2',
-    name: '李四',
-    department: '产品部',
-    phone: '13800000002',
-    remark: '负责需求梳理',
-  },
-  {
-    id: '3',
-    name: '王五',
-    department: '运营部',
-    phone: '13800000003',
-    remark: '负责活动投放',
-  },
-])
-</script>
+<template>
+  <div>
+    <div style="position: relative; width: 100%; height: 360px">
+      <j-table :columns="columns" :records="records" />
+    </div>
+
+    <div style="margin-top: 16px">
+      <div style="margin-bottom: 8px; font-weight: 600">当前表格数据</div>
+      <pre
+        style="
+          margin: 0;
+          padding: 12px;
+          background: #f7f8fa;
+          border-radius: 4px;
+          overflow: auto;
+        "
+      >{{ JSON.stringify(records, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '姓名',
+      width: 160,
+    },
+  },
+  {
+    id: 'department',
+    config: {
+      label: '部门',
+      width: 160,
+    },
+  },
+  {
+    id: 'phone',
+    config: {
+      label: '手机号',
+      width: 180,
+    },
+  },
+  {
+    id: 'setting',
+    type: 'j-layerform',
+    config: {
+      label: '资料设置',
+      width: 120,
+      align: 'center',
+      buttonLabel: '编辑资料',
+      layerLabel: '编辑员工资料',
+      layerWidth: 640,
+      layerHeight: 320,
+      formConfig: {
+        labelWidth: 90,
+        labelPosition: 'right',
+        size: 'default',
+        gutter: 16,
+        span: 12,
+      },
+      schema: [
+        {
+          id: 'name',
+          type: 'j-input',
+          config: {
+            label: '姓名',
+            placeholder: '请输入姓名',
+          },
+        },
+        {
+          id: 'department',
+          type: 'j-select',
+          config: {
+            label: '部门',
+            placeholder: '请选择部门',
+            dataType: 'options',
+            options: [
+              { label: '研发部', value: '研发部' },
+              { label: '产品部', value: '产品部' },
+              { label: '运营部', value: '运营部' },
+            ],
+          },
+        },
+        {
+          id: 'phone',
+          type: 'j-input',
+          config: {
+            label: '手机号',
+            placeholder: '请输入手机号',
+          },
+        },
+        {
+          id: 'remark',
+          type: 'j-input',
+          config: {
+            label: '备注',
+            placeholder: '请输入备注',
+            span: 24,
+          },
+        },
+      ],
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '张三',
+    department: '研发部',
+    phone: '13800000001',
+    remark: '负责前端模块',
+  },
+  {
+    id: '2',
+    name: '李四',
+    department: '产品部',
+    phone: '13800000002',
+    remark: '负责需求梳理',
+  },
+  {
+    id: '3',
+    name: '王五',
+    department: '运营部',
+    phone: '13800000003',
+    remark: '负责活动投放',
+  },
+])
+</script>

package/docs/examples/table/link.vue

@@ -1,66 +1,66 @@
-<template>
-  <div style="position: relative; width: 100%; height: 400px">
-    <j-table :columns="columns" :records="records" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const columns = ref([
-  {
-    id: 'name',
-    type: 'link',
-    config: {
-      label: '项目名称',
-      width: 'auto',
-      align: 'left',
-      click: ({ row }: { row: any }) => {
-        ElMessage.success(`点击了项目: ${row.name}`)
-      },
-    },
-  },
-  {
-    id: 'status',
-    config: {
-      label: '状态',
-      width: 'auto',
-      align: 'center',
-    },
-  },
-  {
-    id: 'owner',
-    type: 'link',
-    config: {
-      label: '负责人',
-      width: 'auto',
-      align: 'center',
-      click: ({ row }: { row: any }) => {
-        ElMessage.info(`查看负责人: ${row.owner}`)
-      },
-    },
-  },
-])
-
-const records = ref([
-  {
-    id: '1',
-    name: '项目A',
-    status: '进行中',
-    owner: '张三',
-  },
-  {
-    id: '2',
-    name: '项目B',
-    status: '已完成',
-    owner: '李四',
-  },
-  {
-    id: '3',
-    name: '项目C',
-    status: '待审核',
-    owner: '王五',
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 400px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: 'link',
+    config: {
+      label: '项目名称',
+      width: 'auto',
+      align: 'left',
+      click: ({ row }: { row: any }) => {
+        ElMessage.success(`点击了项目: ${row.name}`)
+      },
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'owner',
+    type: 'link',
+    config: {
+      label: '负责人',
+      width: 'auto',
+      align: 'center',
+      click: ({ row }: { row: any }) => {
+        ElMessage.info(`查看负责人: ${row.owner}`)
+      },
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '项目A',
+    status: '进行中',
+    owner: '张三',
+  },
+  {
+    id: '2',
+    name: '项目B',
+    status: '已完成',
+    owner: '李四',
+  },
+  {
+    id: '3',
+    name: '项目C',
+    status: '待审核',
+    owner: '王五',
+  },
+])
+</script>

package/docs/examples/table/merge-cell.vue

@@ -0,0 +1,78 @@
+<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: 'bumen',
+    config: {
+      label: '部门',
+      width: 120,
+      align: 'center',
+      // 自动合并相邻相同值的单元格
+      mergeCell: true,
+    },
+  },
+  {
+    id: 'zu',
+    config: {
+      label: '组',
+      width: 120,
+      align: 'center',
+      // 自定义合并：同部门且同组时才合并
+      mergeCell: (v1: unknown, v2: unknown, info: any) => {
+        const table = info.table
+        const r1 = info.source.row
+        const r2 = info.target.row
+        const bumenCol = table.getBodyColumnDefine('bumen')
+        const val1 = table.getCellValue(bumenCol?.col ?? 0, r1)
+        const val2 = table.getCellValue(bumenCol?.col ?? 0, r2)
+        return val1 === val2 && v1 === v2
+      },
+    },
+  },
+  {
+    id: 'xingming',
+    config: {
+      label: '姓名',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'zhiwei',
+    config: {
+      label: '职位',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'gongling',
+    config: {
+      label: '工龄(年)',
+      width: 100,
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  { bumen: '技术部', zu: '前端组', xingming: '张三', zhiwei: '高级工程师', gongling: 5 },
+  { bumen: '技术部', zu: '前端组', xingming: '李四', zhiwei: '工程师', gongling: 3 },
+  { bumen: '技术部', zu: '前端组', xingming: '王五', zhiwei: '初级工程师', gongling: 1 },
+  { bumen: '技术部', zu: '后端组', xingming: '赵六', zhiwei: '高级工程师', gongling: 6 },
+  { bumen: '技术部', zu: '后端组', xingming: '钱七', zhiwei: '工程师', gongling: 4 },
+  { bumen: '产品部', zu: '产品设计', xingming: '孙八', zhiwei: '产品经理', gongling: 4 },
+  { bumen: '产品部', zu: '产品设计', xingming: '周九', zhiwei: '产品助理', gongling: 2 },
+  { bumen: '产品部', zu: '用户研究', xingming: '吴十', zhiwei: '用研专家', gongling: 5 },
+  { bumen: '市场部', zu: '品牌组', xingming: '郑十一', zhiwei: '品牌经理', gongling: 7 },
+  { bumen: '市场部', zu: '品牌组', xingming: '王十二', zhiwei: '品牌专员', gongling: 2 },
+  { bumen: '市场部', zu: '渠道组', xingming: '李十三', zhiwei: '渠道经理', gongling: 5 },
+])
+</script>