From c16ee6cf681e3d713b6fcfc9d7de41a2424fd3bb Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Wed, 23 Nov 2022 15:17:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20`@pureadmin/table`?= =?UTF-8?q?=20=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 15 +++- .../pure-table/high/contextmenu/columns.tsx | 70 +++++++++++++++++++ .../pure-table/high/contextmenu/index.vue | 15 ++++ .../pure-table/high/drag/column/columns.tsx | 5 +- .../pure-table/high/drag/row/columns.tsx | 3 +- src/views/pure-table/high/list.tsx | 7 ++ 7 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 src/views/pure-table/high/contextmenu/columns.tsx create mode 100644 src/views/pure-table/high/contextmenu/index.vue diff --git a/package.json b/package.json index 0c77cbbc3..e1a107552 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "dependencies": { "@amap/amap-jsapi-loader": "^1.0.1", "@ctrl/tinycolor": "^3.4.1", + "@howdyjs/mouse-menu": "^2.0.5", "@logicflow/core": "^1.1.30", "@logicflow/extension": "^1.1.30", "@pureadmin/components": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 61a6f9bd1..43b4c3c76 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,7 @@ specifiers: "@commitlint/config-conventional": 13.1.0 "@ctrl/tinycolor": ^3.4.1 "@faker-js/faker": ^7.5.0 + "@howdyjs/mouse-menu": ^2.0.5 "@iconify-icons/carbon": ^1.2.8 "@iconify-icons/ep": ^1.2.7 "@iconify-icons/fa": ^1.2.3 @@ -128,6 +129,7 @@ specifiers: dependencies: "@amap/amap-jsapi-loader": 1.0.1 "@ctrl/tinycolor": 3.4.1 + "@howdyjs/mouse-menu": 2.0.5_vue@3.2.45 "@logicflow/core": 1.1.31 "@logicflow/extension": 1.1.31 "@pureadmin/components": 1.1.0_vue@3.2.45 @@ -995,6 +997,18 @@ packages: "@floating-ui/core": 1.0.2 dev: false + /@howdyjs/mouse-menu/2.0.5_vue@3.2.45: + resolution: + { + integrity: sha512-20e7mmmFOOLNOHC/38zEWnLgZaNTrZ2GSYhUf4XpaE99ehn4Gq0vf5K/DlALliFQ1zsrfdhIrC13+HNQHyBZKQ== + } + peerDependencies: + vue: ">=3.0.0" + dependencies: + tslib: 1.14.1 + vue: 3.2.45 + dev: false + /@humanwhocodes/config-array/0.11.7: resolution: { @@ -8531,7 +8545,6 @@ packages: { integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== } - dev: true /tslib/2.3.0: resolution: diff --git a/src/views/pure-table/high/contextmenu/columns.tsx b/src/views/pure-table/high/contextmenu/columns.tsx new file mode 100644 index 000000000..a8b350b38 --- /dev/null +++ b/src/views/pure-table/high/contextmenu/columns.tsx @@ -0,0 +1,70 @@ +import { ref } from "vue"; +import { tableDataDrag } from "../data"; +import { clone } from "@pureadmin/utils"; +import { message } from "@pureadmin/components"; +import { CustomMouseMenu } from "@howdyjs/mouse-menu"; + +export function useColumns() { + const dataList = ref(clone(tableDataDrag, true)); + + const columns: TableColumnList = [ + { + label: "ID", + prop: "id" + }, + { + label: "日期", + prop: "date" + }, + { + label: "姓名", + prop: "name" + } + ]; + + // 配置参考：https://kongfandong.cn/howdy/mouse-menu/readme + const menuOptions = { + menuList: [ + { + label: ({ id }) => `ID为：${id}`, + disabled: true + }, + { + label: "编辑", + tips: "Edit", + fn: row => + message.success( + `您编辑了第 ${ + dataList.value.findIndex(v => v.id === row.id) + 1 + } 行，数据为：${JSON.stringify(row)}` + ) + } + ] + }; + + function showMouseMenu(row, column, event) { + event.preventDefault(); + const { x, y } = event; + const ctx = CustomMouseMenu({ + el: event.currentTarget, + params: row, + // 菜单容器的CSS设置 + menuWrapperCss: { + background: "var(--el-bg-color)" + }, + menuItemCss: { + labelColor: "var(--el-text-color)", + hoverLabelColor: "var(--el-color-primary)", + hoverTipsColor: "var(--el-color-primary)" + }, + ...menuOptions + }); + ctx.show(x, y); + } + + return { + columns, + dataList, + showMouseMenu + }; +} diff --git a/src/views/pure-table/high/contextmenu/index.vue b/src/views/pure-table/high/contextmenu/index.vue new file mode 100644 index 000000000..a3a00c770 --- /dev/null +++ b/src/views/pure-table/high/contextmenu/index.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/views/pure-table/high/drag/column/columns.tsx b/src/views/pure-table/high/drag/column/columns.tsx index 4bb04d343..00b2d5d26 100644 --- a/src/views/pure-table/high/drag/column/columns.tsx +++ b/src/views/pure-table/high/drag/column/columns.tsx @@ -1,10 +1,11 @@ import Sortable from "sortablejs"; +import { clone } from "@pureadmin/utils"; import { tableDataDrag } from "../../data"; import { ref, nextTick, onMounted } from "vue"; -// 行拖拽演示 +// 列拖拽演示 export function useColumns() { - const dataList = ref(tableDataDrag); + const dataList = ref(clone(tableDataDrag, true)); const columnsDrag = ref([ { diff --git a/src/views/pure-table/high/drag/row/columns.tsx b/src/views/pure-table/high/drag/row/columns.tsx index 96f8c063a..fcd05c95a 100644 --- a/src/views/pure-table/high/drag/row/columns.tsx +++ b/src/views/pure-table/high/drag/row/columns.tsx @@ -1,10 +1,11 @@ import Sortable from "sortablejs"; import { ref, nextTick } from "vue"; +import { clone } from "@pureadmin/utils"; import { tableDataDrag } from "../../data"; // 行拖拽演示 export function useColumns() { - const dataList = ref(tableDataDrag); + const dataList = ref(clone(tableDataDrag, true)); const rowDrop = (event: { preventDefault: () => void }) => { event.preventDefault(); diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx index 0fb397b74..ff7d1fff6 100644 --- a/src/views/pure-table/high/list.tsx +++ b/src/views/pure-table/high/list.tsx @@ -1,5 +1,6 @@ import RowDrag from "./drag/row/index.vue"; import ColumnDrag from "./drag/column/index.vue"; +import Contextmenu from "./contextmenu/index.vue"; const rendContent = (val: string) => `代码位置：src/views/pure-table/high/${val}/index.vue`; @@ -16,5 +17,11 @@ export const list = [ content: rendContent("drag/column"), title: "拖拽表格（列拖拽）", component: ColumnDrag + }, + { + key: "contextmenu", + content: rendContent("contextmenu"), + title: "右键菜单", + component: Contextmenu } ];