添加固定列及点击行展示详情示例 (#58)

* feat: 添加固定列及点击行展示详情示例

* feat: 抽离常量及类型

* feat: 抽离常量及类型

* feat: 添加右固定列

---------

Co-authored-by: LC1 <chuan.liu@linkedsmile.com>

apps/admin/mock/demo/table.ts

@@ -12,6 +12,9 @@ export function createFakeTableData() {
         desc: 'manager',
         password: '123456',
         accessToken: 'fakeToken1',
+        address:'呼伦贝尔市',
+        startTime:'1997-01-26 10:45:00',
+        endTime:'2022-08-08 17:02:15',
         roles: [
           {
             name: 'Super Admin',
@@ -27,6 +30,9 @@ export function createFakeTableData() {
         avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
         desc: 'tester',
         accessToken: 'fakeToken2',
+        address:'鹤壁市',
+        startTime:'2010-07-29 09:23:46	',
+        endTime:'1998-02-27 02:14:58',
         roles: [
           {
             name: 'Tester',

apps/admin/src/pages/demo/table/FixedColumn.vue

@@ -0,0 +1,6 @@
+<template>
+  <FixedColumn/>
+</template>
+<script lang="ts" setup>
+import { FixedColumn } from '@vben/demo'
+</script>

packages/demo/index.ts

@@ -2,3 +2,4 @@ export { default as Card } from './src/Card/index.vue'
 export { default as Form } from './src/Form/index.vue'
 export { default as Table } from './src/Table/index.vue'
 export { default as BasicTable } from './src/Table/basic.vue'
+export { default as FixedColumn } from './src/Table/fixedColumn.vue'

packages/demo/src/Table/basic.vue

@@ -2,10 +2,8 @@
 import {reactive, ref} from 'vue'
 import {VbenColumns} from '../../../vbenComponents/src/table'
 import {getTableData} from '../apis/table'
-// import {msg} from '@vben/vbencomponents'
-// const { createMessage } = useMessage()
+import type {Data} from './schemas'
 
-// createMessage.loading(t('sys.app.menuLoading'))
 const border = ref(false)
 const loading = ref(false)
 const striped = ref(false)
@@ -18,8 +16,11 @@ const columns: VbenColumns = [
     title: '备注',
   },
 ]
-const data = reactive({
-  table: {}
+const data = reactive<Data>({
+  table: {
+    items:[],
+    total:0
+  }
 })
 getTableData().then(res => {
   console.log(res)

packages/demo/src/Table/fixedColumn.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { VbenCellClick } from '../../../vbenComponents/src/table'
+import { getTableData } from '../apis/table'
+import {columns,innerColumns,innerLabels} from './schemas'
+import type {Data} from './schemas'
+
+const border = ref<boolean>(false)
+const loading = ref<boolean>(false)
+const striped = ref<boolean>(false)
+
+const data = reactive<Data>({
+  table: {
+    items: [],
+    total: 0,
+  },
+})
+getTableData().then((res) => {
+  console.log(res)
+  for (let i = 0; i < 4; i++) {
+    res.items = res.items.concat(res.items)
+  }
+  console.log(res)
+  data.table = res
+})
+
+const showDetails = ref<boolean>(false)
+let detailData = reactive<any[]>([])
+const cellClickEvent: VbenCellClick = ({ row }) => {
+  detailData = innerLabels.map((field) => {
+    return { label: field, value: row[field] }
+  })
+  showDetails.value = true
+}
+</script>
+<template>
+  <div class="p-2 h-full">
+    <VbenTable
+      :options="{
+        title: '固定列及点击行展示详情示例',
+        pagination: true,
+        border: border,
+        loading: loading,
+        stripe: striped,
+      }"
+      :columns="columns"
+      :data="data.table.items"
+      @cell-click="cellClickEvent"
+    >
+      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </VbenTable>
+    <VbenModal v-model:show="showDetails" title="查看详情" preset="card">
+      <template #default>
+        <VbenTable
+          border="inner"
+          :sync-resize="showDetails"
+          :row-config="{ isHover: true }"
+          :data="detailData"
+          :columns="innerColumns"
+        />
+      </template>
+    </VbenModal>
+  </div>
+</template>

packages/demo/src/Table/schemas.ts

@@ -0,0 +1,44 @@
+
+import { VbenColumns } from '../../../vbenComponents/src/table'
+
+
+export const columns: VbenColumns = [
+  { field: 'userId', title: 'id', width: 100, fixed: 'left' },
+  { field: 'username', title: '名称', width: 120, fixed: 'left' },
+  { field: 'realname', title: '真实名称', width: 280 },
+  { field: 'address', title: '地址', width: 280 },
+  { field: 'startTime', title: '开始时间', width: 280 },
+  { field: 'endTime', title: '结束时间', width: 280 },
+  {
+    field: 'desc',
+    title: '备注',
+    width: 280,
+    fixed:'right'
+  },
+]
+
+export const innerLabels: string[] = [
+  'userId',
+  'username',
+  'realname',
+  'address',
+  'startTime',
+  'endTime',
+  'desc',
+]
+
+export const innerColumns: VbenColumns = [
+  { field: 'label', title: 'label' },
+  { field: 'value', title: 'value' },
+]
+
+
+
+
+
+export interface Data {
+  table: {
+    items: any[]
+    total: number
+  }
+}

packages/locale/src/lang/en/routes.ts

@@ -16,6 +16,7 @@ export default {
     table: {
       table: 'table',
       basic: 'basic',
+      fixedColumn:'fixedColumn'
     },
   },
 }

packages/locale/src/lang/zh-CN/routes.ts

@@ -16,6 +16,7 @@ export default {
     table: {
       table: '表格',
       basic: '基础表格',
+      fixedColumn:'固定列'
     },
   },
 }

packages/router/src/routes/modules/demo/demo.ts

@@ -28,6 +28,14 @@ const dashboard: RouteRecordItem = {
             title: 'routes.demo.table.basic',
           },
         },
+        {
+          path: 'FixedColumn',
+          name: 'FixedColumn',
+          component: () => import('@/pages/demo/table/FixedColumn.vue'),
+          meta: {
+            title: 'routes.demo.table.fixedColumn',
+          },
+        },
       ],
     },
 

packages/vbenComponents/src/table/src/type.ts

@@ -1,4 +1,4 @@
-import type { VxeGridProps } from 'vxe-table'
+import type { VxeGridProps,VxeTableEvents } from 'vxe-table'
 import { VxeGridPropTypes } from 'vxe-table'
 
 export type VbenTableProps<D = any> = VxeGridProps<D> & {
@@ -9,3 +9,5 @@ export type VbenTableProps<D = any> = VxeGridProps<D> & {
   afterFetch?: Function
 }
 export type VbenColumns = VxeGridPropTypes.Columns
+
+export type VbenCellClick=VxeTableEvents.CellClick