From 7472c25c0a111348b725966c385af799e2f2c41c Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Wed, 23 Nov 2022 12:03:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20`@pureadmin/table`?= =?UTF-8?q?=20=E8=A1=8C=E3=80=81=E5=88=97=E6=8B=96=E6=8B=BD=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/en.yaml | 2 + locales/zh-CN.yaml | 2 + package.json | 4 +- pnpm-lock.yaml | 10 +-- src/assets/svg/hot.svg | 1 + src/router/modules/table.ts | 18 ++-- src/store/modules/app.ts | 7 +- src/store/modules/types.ts | 1 + src/views/components/draggable/index.vue | 10 ++- .../pure-table/{components => base}/base.vue | 0 .../{components => base}/border.vue | 0 .../column-template/columns.tsx | 0 .../column-template/index.vue | 0 .../{components => base}/customIndex.vue | 0 .../pure-table/{components => base}/data.ts | 0 .../{components => base}/expand.vue | 0 .../{components => base}/filters.vue | 0 .../{components => base}/fixColumn.vue | 0 .../{components => base}/fixHeader.vue | 0 .../{components => base}/fluidHeight.vue | 0 .../{components => base}/groupHeader.vue | 0 .../header-renderer/columns.tsx | 0 .../header-renderer/index.vue | 0 .../{components => base}/imgPreview.vue | 0 .../{components => base}/layout.vue | 0 src/views/pure-table/{ => base}/list.tsx | 48 +++++----- .../pure-table/{components => base}/merge.vue | 0 .../{components => base}/multipleChoice.vue | 0 .../{components => base}/nestProp.vue | 0 .../pure-table/{components => base}/radio.vue | 0 .../{components => base}/sortable.vue | 0 .../{components => base}/status.vue | 0 .../{components => base}/stripe.vue | 0 .../{components => base}/totalRow.vue | 0 .../pure-table/{components => base}/tree.vue | 0 src/views/pure-table/components/index.ts | 47 ---------- src/views/pure-table/high.vue | 56 ++++++++++++ src/views/pure-table/high/data.ts | 88 +++++++++++++++++++ .../pure-table/high/drag/column/columns.tsx | 68 ++++++++++++++ .../pure-table/high/drag/column/index.vue | 16 ++++ .../pure-table/high/drag/row/columns.tsx | 69 +++++++++++++++ src/views/pure-table/high/drag/row/index.vue | 16 ++++ src/views/pure-table/high/list.tsx | 20 +++++ src/views/pure-table/index.vue | 13 ++- 44 files changed, 406 insertions(+), 90 deletions(-) create mode 100644 src/assets/svg/hot.svg rename src/views/pure-table/{components => base}/base.vue (100%) rename src/views/pure-table/{components => base}/border.vue (100%) rename src/views/pure-table/{components => base}/column-template/columns.tsx (100%) rename src/views/pure-table/{components => base}/column-template/index.vue (100%) rename src/views/pure-table/{components => base}/customIndex.vue (100%) rename src/views/pure-table/{components => base}/data.ts (100%) rename src/views/pure-table/{components => base}/expand.vue (100%) rename src/views/pure-table/{components => base}/filters.vue (100%) rename src/views/pure-table/{components => base}/fixColumn.vue (100%) rename src/views/pure-table/{components => base}/fixHeader.vue (100%) rename src/views/pure-table/{components => base}/fluidHeight.vue (100%) rename src/views/pure-table/{components => base}/groupHeader.vue (100%) rename src/views/pure-table/{components => base}/header-renderer/columns.tsx (100%) rename src/views/pure-table/{components => base}/header-renderer/index.vue (100%) rename src/views/pure-table/{components => base}/imgPreview.vue (100%) rename src/views/pure-table/{components => base}/layout.vue (100%) rename src/views/pure-table/{ => base}/list.tsx (75%) rename src/views/pure-table/{components => base}/merge.vue (100%) rename src/views/pure-table/{components => base}/multipleChoice.vue (100%) rename src/views/pure-table/{components => base}/nestProp.vue (100%) rename src/views/pure-table/{components => base}/radio.vue (100%) rename src/views/pure-table/{components => base}/sortable.vue (100%) rename src/views/pure-table/{components => base}/status.vue (100%) rename src/views/pure-table/{components => base}/stripe.vue (100%) rename src/views/pure-table/{components => base}/totalRow.vue (100%) rename src/views/pure-table/{components => base}/tree.vue (100%) delete mode 100644 src/views/pure-table/components/index.ts create mode 100644 src/views/pure-table/high.vue create mode 100644 src/views/pure-table/high/data.ts create mode 100644 src/views/pure-table/high/drag/column/columns.tsx create mode 100644 src/views/pure-table/high/drag/column/index.vue create mode 100644 src/views/pure-table/high/drag/row/columns.tsx create mode 100644 src/views/pure-table/high/drag/row/index.vue create mode 100644 src/views/pure-table/high/list.tsx diff --git a/locales/en.yaml b/locales/en.yaml index f11573397..d2e78c5c3 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -95,6 +95,8 @@ menus: hsExecl: Export Excel hsInfiniteScroll: Table Infinite Scroll hsdanmaku: Danmaku Components + hsPureTableBase: Base Usage + hsPureTableHigh: High Usage status: hsLoad: Loading... login: diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index fa1e29d2a..fb50c89db 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -95,6 +95,8 @@ menus: hsExecl: 导出Excel hsInfiniteScroll: 表格无限滚动 hsdanmaku: 弹幕组件 + hsPureTableBase: 基础用法 + hsPureTableHigh: 高级用法 status: hsLoad: 加载中... login: diff --git a/package.json b/package.json index 3eb219734..0c77cbbc3 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@logicflow/extension": "^1.1.30", "@pureadmin/components": "^1.1.0", "@pureadmin/descriptions": "^1.1.0", - "@pureadmin/table": "^1.6.0", + "@pureadmin/table": "^1.7.0", "@pureadmin/utils": "^1.6.7", "@vueuse/core": "^9.5.0", "@vueuse/motion": "2.0.0-beta.12", @@ -107,7 +107,7 @@ "@types/nprogress": "0.2.0", "@types/qrcode": "^1.4.2", "@types/qs": "^6.9.7", - "@types/sortablejs": "^1.13.0", + "@types/sortablejs": "^1.15.0", "@typescript-eslint/eslint-plugin": "^5.43.0", "@typescript-eslint/parser": "^5.43.0", "@vitejs/plugin-vue": "^3.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac80caca0..61a6f9bd1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,7 +20,7 @@ specifiers: "@logicflow/extension": ^1.1.30 "@pureadmin/components": ^1.1.0 "@pureadmin/descriptions": ^1.1.0 - "@pureadmin/table": ^1.6.0 + "@pureadmin/table": ^1.7.0 "@pureadmin/theme": ^2.4.0 "@pureadmin/utils": ^1.6.7 "@types/element-resize-detector": 1.1.3 @@ -33,7 +33,7 @@ specifiers: "@types/nprogress": 0.2.0 "@types/qrcode": ^1.4.2 "@types/qs": ^6.9.7 - "@types/sortablejs": ^1.13.0 + "@types/sortablejs": ^1.15.0 "@typescript-eslint/eslint-plugin": ^5.43.0 "@typescript-eslint/parser": ^5.43.0 "@vitejs/plugin-vue": ^3.2.0 @@ -132,7 +132,7 @@ dependencies: "@logicflow/extension": 1.1.31 "@pureadmin/components": 1.1.0_vue@3.2.45 "@pureadmin/descriptions": 1.1.1_element-plus@2.2.22 - "@pureadmin/table": 1.6.0_element-plus@2.2.22 + "@pureadmin/table": 1.7.0_element-plus@2.2.22 "@pureadmin/utils": 1.6.7_aotapuqn7htzdjltsyimavekky "@vueuse/core": 9.5.0_vue@3.2.45 "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45 @@ -1379,10 +1379,10 @@ packages: vue: 3.2.45 dev: false - /@pureadmin/table/1.6.0_element-plus@2.2.22: + /@pureadmin/table/1.7.0_element-plus@2.2.22: resolution: { - integrity: sha512-ryTZbfkNT/PTUS6pdrq7vuHr3f74lXs6kgRHaAPz64iTZmzaeVzf27TPakf4YDEcnQ/Gw6RqlQzE71W9m+P48w== + integrity: sha512-6SWHJFiMf0V3L+Y5/1MZMClZo8QrOvkpLjkqeaZFO5N80Th17Nv1I4Feve6HPPS4dFBf5J0oRPr8L6OjjdaASw== } peerDependencies: element-plus: ^2.0.0 diff --git a/src/assets/svg/hot.svg b/src/assets/svg/hot.svg new file mode 100644 index 000000000..817e54c37 --- /dev/null +++ b/src/assets/svg/hot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts index de721ebd6..fa765d0d9 100644 --- a/src/router/modules/table.ts +++ b/src/router/modules/table.ts @@ -1,10 +1,12 @@ +import { $t } from "@/plugins/i18n"; +import hot from "@/assets/svg/hot.svg?component"; import type { RouteConfigsTable } from "/#/index"; const flowChartRouter: RouteConfigsTable = { path: "/pure-table", redirect: "/pure-table/index", meta: { - icon: "mdi:table-large", + icon: hot, title: "pure-admin-table", rank: 4 }, @@ -14,11 +16,15 @@ const flowChartRouter: RouteConfigsTable = { name: "PureTable", component: () => import("@/views/pure-table/index.vue"), meta: { - title: "pure-admin-table", - extraIcon: { - svg: true, - name: "team-iconxinpin" - } + title: $t("menus.hsPureTableBase") + } + }, + { + path: "/pure-table/high", + name: "PureTableHigh", + component: () => import("@/views/pure-table/high.vue"), + meta: { + title: $t("menus.hsPureTableHigh") } } ] diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index b185c5654..79a6acb4e 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -19,7 +19,9 @@ export const useAppStore = defineStore({ layout: storageLocal.getItem("responsive-layout")?.layout ?? getConfig().Layout, - device: deviceDetection() ? "mobile" : "desktop" + device: deviceDetection() ? "mobile" : "desktop", + // 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api + sortSwap: false }), getters: { getSidebarStatus() { @@ -56,6 +58,9 @@ export const useAppStore = defineStore({ }, setLayout(layout) { this.layout = layout; + }, + setSortSwap(val) { + this.sortSwap = val; } } }); diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts index 22fa40478..95228fc93 100644 --- a/src/store/modules/types.ts +++ b/src/store/modules/types.ts @@ -19,6 +19,7 @@ export type appType = { }; layout: string; device: string; + sortSwap: boolean; }; export type multiType = { diff --git a/src/views/components/draggable/index.vue b/src/views/components/draggable/index.vue index 247fef940..74fbcd78c 100644 --- a/src/views/components/draggable/index.vue +++ b/src/views/components/draggable/index.vue @@ -1,13 +1,16 @@ + + + + diff --git a/src/views/pure-table/high/data.ts b/src/views/pure-table/high/data.ts new file mode 100644 index 000000000..0ad9b38e6 --- /dev/null +++ b/src/views/pure-table/high/data.ts @@ -0,0 +1,88 @@ +import dayjs from "dayjs"; +import { clone } from "@pureadmin/utils"; + +const date = dayjs(new Date()).format("YYYY-MM-DD"); + +const tableData = [ + { + date, + name: "Tom", + address: "No. 189, Grove St, Los Angeles" + }, + { + date, + name: "Jack", + address: "No. 189, Grove St, Los Angeles" + }, + { + date, + name: "Dick", + address: "No. 189, Grove St, Los Angeles" + }, + { + date, + name: "Harry", + address: "No. 189, Grove St, Los Angeles" + }, + { + date, + name: "Sam", + address: "No. 189, Grove St, Los Angeles" + }, + { + date, + name: "Lucy", + address: "No. 189, Grove St, Los Angeles" + }, + { + date, + name: "Mary", + address: "No. 189, Grove St, Los Angeles" + }, + { + date, + name: "Mike", + address: "No. 189, Grove St, Los Angeles" + } +]; + +const tableDataMore = clone(tableData, true).map(item => + Object.assign(item, { + state: "California", + city: "Los Angeles", + "post-code": "CA 90036" + }) +); + +const tableDataImage = clone(tableData, true).map((item, index) => + Object.assign(item, { + image: `https://xiaoxian521.github.io/pure-admin-table/imgs/${ + index + 1 + }.jpg` + }) +); + +const tableDataSortable = clone(tableData, true).map((item, index) => + Object.assign(item, { + date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}` + }) +); + +const tableDataDrag = clone(tableData, true).map((item, index) => { + delete item["address"]; + return Object.assign( + { + id: index + 1, + date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}` + }, + item + ); +}); + +export { + tableData, + tableDataDrag, + tableDataMore, + tableDataImage, + tableDataSortable +}; diff --git a/src/views/pure-table/high/drag/column/columns.tsx b/src/views/pure-table/high/drag/column/columns.tsx new file mode 100644 index 000000000..4bb04d343 --- /dev/null +++ b/src/views/pure-table/high/drag/column/columns.tsx @@ -0,0 +1,68 @@ +import Sortable from "sortablejs"; +import { tableDataDrag } from "../../data"; +import { ref, nextTick, onMounted } from "vue"; + +// 行拖拽演示 +export function useColumns() { + const dataList = ref(tableDataDrag); + + const columnsDrag = ref([ + { + label: "ID", + prop: "id" + }, + { + label: "日期", + prop: "date" + }, + { + label: "姓名", + prop: "name" + } + ]); + + const columns = ref([ + { + label: "ID", + prop: index => columnsDrag.value[index].prop as string + }, + { + label: "日期", + prop: index => columnsDrag.value[index].prop as string + }, + { + label: "姓名", + prop: index => columnsDrag.value[index].prop as string + } + ]); + + const columnDrop = (event: { preventDefault: () => void }) => { + event.preventDefault(); + nextTick(() => { + const wrapper: HTMLElement = document.querySelector( + ".el-table__header-wrapper tr" + ); + Sortable.create(wrapper, { + animation: 300, + delay: 0, + onEnd: ({ newIndex, oldIndex }) => { + const oldItem = columnsDrag.value[oldIndex]; + columnsDrag.value.splice(oldIndex, 1); + columnsDrag.value.splice(newIndex, 0, oldItem); + } + }); + }); + }; + + onMounted(() => { + nextTick(() => { + columnDrop(event); + }); + }); + + return { + columns, + dataList, + columnsDrag + }; +} diff --git a/src/views/pure-table/high/drag/column/index.vue b/src/views/pure-table/high/drag/column/index.vue new file mode 100644 index 000000000..edc95e7fb --- /dev/null +++ b/src/views/pure-table/high/drag/column/index.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/views/pure-table/high/drag/row/columns.tsx b/src/views/pure-table/high/drag/row/columns.tsx new file mode 100644 index 000000000..96f8c063a --- /dev/null +++ b/src/views/pure-table/high/drag/row/columns.tsx @@ -0,0 +1,69 @@ +import Sortable from "sortablejs"; +import { ref, nextTick } from "vue"; +import { tableDataDrag } from "../../data"; + +// 行拖拽演示 +export function useColumns() { + const dataList = ref(tableDataDrag); + + const rowDrop = (event: { preventDefault: () => void }) => { + event.preventDefault(); + nextTick(() => { + const wrapper: HTMLElement = document.querySelector( + ".el-table__body-wrapper tbody" + ); + Sortable.create(wrapper, { + animation: 300, + handle: ".drag-btn", + onEnd: ({ newIndex, oldIndex }) => { + const currentRow = dataList.value.splice(oldIndex, 1)[0]; + dataList.value.splice(newIndex, 0, currentRow); + } + }); + }); + }; + + const columns: TableColumnList = [ + // { + // width: 60, + // cellRenderer: () => ( + // void }) => + // rowDrop(event) + // } + // /> + // ) + // }, + { + label: "ID", + prop: "id", + cellRenderer: ({ row }) => ( +
+ void }) => + rowDrop(event) + } + /> +

{row.id}

+
+ ) + }, + { + label: "日期", + prop: "date" + }, + { + label: "姓名", + prop: "name" + } + ]; + + return { + columns, + dataList + }; +} diff --git a/src/views/pure-table/high/drag/row/index.vue b/src/views/pure-table/high/drag/row/index.vue new file mode 100644 index 000000000..65ee65fe9 --- /dev/null +++ b/src/views/pure-table/high/drag/row/index.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx new file mode 100644 index 000000000..0fb397b74 --- /dev/null +++ b/src/views/pure-table/high/list.tsx @@ -0,0 +1,20 @@ +import RowDrag from "./drag/row/index.vue"; +import ColumnDrag from "./drag/column/index.vue"; + +const rendContent = (val: string) => + `代码位置：src/views/pure-table/high/${val}/index.vue`; + +export const list = [ + { + key: "rowDrag", + content: rendContent("drag/row"), + title: "拖拽表格（行拖拽）", + component: RowDrag + }, + { + key: "columnDrag", + content: rendContent("drag/column"), + title: "拖拽表格（列拖拽）", + component: ColumnDrag + } +]; diff --git a/src/views/pure-table/index.vue b/src/views/pure-table/index.vue index 6b26bba01..c5ce67b87 100644 --- a/src/views/pure-table/index.vue +++ b/src/views/pure-table/index.vue @@ -1,5 +1,5 @@