From 43ddf7aba85c81aacb88347943356f3b25e051b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E8=AF=BA?= <86769380+shark-lajiao@users.noreply.github.com> Date: Thu, 11 May 2023 19:58:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20`PureTableBar`=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=88=97=E5=B1=95=E7=A4=BA=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD=20(#545)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add 表格工具列拖拽 * fix: 修复拖拽 * fix: 修复警告 * fix: 修复点击checkbox表格数据隐藏 * chore: update --------- Co-authored-by: RealityBoy <1923740402@qq.com> --- src/components/RePureTableBar/src/bar.tsx | 99 +++++++++++++++---- .../RePureTableBar/src/svg/drag.svg | 1 + src/views/system/role/hook.tsx | 16 +-- src/views/system/user/hook.tsx | 3 +- 4 files changed, 90 insertions(+), 29 deletions(-) create mode 100644 src/components/RePureTableBar/src/svg/drag.svg diff --git a/src/components/RePureTableBar/src/bar.tsx b/src/components/RePureTableBar/src/bar.tsx index 6f14627a0..36b529fb0 100644 --- a/src/components/RePureTableBar/src/bar.tsx +++ b/src/components/RePureTableBar/src/bar.tsx @@ -1,6 +1,9 @@ import { useEpThemeStoreHook } from "@/store/modules/epTheme"; import { delay, getKeyList, cloneDeep } from "@pureadmin/utils"; -import { defineComponent, ref, computed, type PropType } from "vue"; +import { defineComponent, ref, computed, type PropType, nextTick } from "vue"; + +import Sortable from "sortablejs"; +import DragIcon from "./svg/drag.svg?component"; import ExpandIcon from "./svg/expand.svg?component"; import RefreshIcon from "./svg/refresh.svg?component"; import SettingIcon from "./svg/settings.svg?component"; @@ -107,16 +110,17 @@ export default defineComponent({ checkedCount > 0 && checkedCount < checkColumnList.length; } - function handleCheckColumnListChange(val: boolean, index: number) { - dynamicColumns.value[index].hide = !val; + function handleCheckColumnListChange(val: boolean, label: string) { + dynamicColumns.value.filter(item => item.label === label)[0].hide = !val; } - function onReset() { + async function onReset() { checkAll.value = true; isIndeterminate.value = false; - checkColumnList = getKeyList(cloneDeep(props?.columns), "label"); - checkedColumns.value = checkColumnList; dynamicColumns.value = cloneDeep(props?.columns); + checkColumnList = []; + checkColumnList = await getKeyList(cloneDeep(props?.columns), "label"); + checkedColumns.value = checkColumnList; } const dropdown = { @@ -144,6 +148,47 @@ export default defineComponent({ ) }; + /** 列展示拖拽排序 */ + const rowDrop = (event: { preventDefault: () => void }) => { + event.preventDefault(); + nextTick(() => { + const wrapper: HTMLElement = document.querySelector( + ".el-checkbox-group>div" + ); + Sortable.create(wrapper, { + animation: 300, + handle: ".drag-btn", + onEnd: ({ newIndex, oldIndex, item }) => { + const targetThElem = item; + const wrapperElem = targetThElem.parentNode as HTMLElement; + const oldColumn = dynamicColumns.value[oldIndex]; + const newColumn = dynamicColumns.value[newIndex]; + if (oldColumn?.fixed || newColumn?.fixed) { + // 当前列存在fixed属性 则不可拖拽 + const oldThElem = wrapperElem.children[oldIndex] as HTMLElement; + if (newIndex > oldIndex) { + wrapperElem.insertBefore(targetThElem, oldThElem); + } else { + wrapperElem.insertBefore( + targetThElem, + oldThElem ? oldThElem.nextElementSibling : oldThElem + ); + } + return; + } + const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0]; + dynamicColumns.value.splice(newIndex, 0, currentRow); + } + }); + }); + }; + + const isFixedColumn = (label: string) => { + return dynamicColumns.value.filter(item => item.label === label)[0].fixed + ? true + : false; + }; + const reference = { reference: () => ( - @@ -228,22 +272,35 @@ export default defineComponent({ alignment="flex-start" size={0} > - {checkColumnList.map((item, index) => { + {checkColumnList.map(item => { return ( - - handleCheckColumnListChange(value, index) - } - > - + void; + }) => rowDrop(event)} + /> + + handleCheckColumnListChange(value, item) + } > - {item} - - + + {item} + + + ); })} diff --git a/src/components/RePureTableBar/src/svg/drag.svg b/src/components/RePureTableBar/src/svg/drag.svg new file mode 100644 index 000000000..8c373700f --- /dev/null +++ b/src/components/RePureTableBar/src/svg/drag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/system/role/hook.tsx b/src/views/system/role/hook.tsx index 4f40a0979..9fbe19fdd 100644 --- a/src/views/system/role/hook.tsx +++ b/src/views/system/role/hook.tsx @@ -21,16 +21,18 @@ export function useRole() { background: true }); const columns: TableColumnList = [ - { - label: "勾选列", // 如果需要表格多选，此处label必须设置 - type: "selection", - width: 55, - align: "left" - }, + // { + // label: "勾选列", // 如果需要表格多选，此处label必须设置 + // type: "selection", + // width: 55, + // align: "left", + // fixed: "left" + // }, { label: "序号", type: "index", - width: 70 + width: 70, + fixed: "left" }, { label: "角色编号", diff --git a/src/views/system/user/hook.tsx b/src/views/system/user/hook.tsx index 24cf50985..970979192 100644 --- a/src/views/system/user/hook.tsx +++ b/src/views/system/user/hook.tsx @@ -24,7 +24,8 @@ export function useUser() { { label: "序号", type: "index", - width: 70 + width: 70, + fixed: "left" }, { label: "用户编号",