From b6e05c997d03889966257d0aeaa7924f5cccfffc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=B6=9B?= <1537080775@qq.com> Date: Tue, 27 Aug 2024 17:31:29 +0800 Subject: [PATCH] =?UTF-8?q?feat(20240827=5FBatchDelete):=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=89=B9=E9=87=8F=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 增加表格多选 2. 运行跨页多选 3. 显示多选数据 4. 移除多选数据 5. 增加批量删除 --- web/src/utils/columnPermission.ts | 2 +- .../menu/components/MenuButtonCom/api.ts | 7 + .../menu/components/MenuButtonCom/crud.tsx | 52 ++++ .../menu/components/MenuButtonCom/index.vue | 61 ++++- .../menu/components/MenuFieldCom/api.ts | 7 + .../menu/components/MenuFieldCom/crud.tsx | 51 +++- .../menu/components/MenuFieldCom/index.vue | 226 +++++++++++------- web/src/views/system/menu/index.vue | 4 +- 8 files changed, 309 insertions(+), 101 deletions(-) diff --git a/web/src/utils/columnPermission.ts b/web/src/utils/columnPermission.ts index 7ef06de0..adff4e1f 100644 --- a/web/src/utils/columnPermission.ts +++ b/web/src/utils/columnPermission.ts @@ -22,7 +22,7 @@ export const handleColumnPermission = async (func: Function, crudOptions: any,ex } } const columns = crudOptions.columns; - const excludeColumns = ['_index','id', 'create_datetime', 'update_datetime'].concat(excludeColumn) + const excludeColumns = ['checked','_index','id', 'create_datetime', 'update_datetime'].concat(excludeColumn) for (let col in columns) { for (let item of res.data) { if (excludeColumns.includes(item.field_name)) { diff --git a/web/src/views/system/menu/components/MenuButtonCom/api.ts b/web/src/views/system/menu/components/MenuButtonCom/api.ts index d91f920b..612c49d2 100644 --- a/web/src/views/system/menu/components/MenuButtonCom/api.ts +++ b/web/src/views/system/menu/components/MenuButtonCom/api.ts @@ -48,3 +48,10 @@ export function BatchAdd(obj: AddReq) { }); } +export function BatchDelete(keys: any) { + return request({ + url: apiPrefix + 'multiple_delete/', + method: 'delete', + data: { keys }, + }); +} diff --git a/web/src/views/system/menu/components/MenuButtonCom/crud.tsx b/web/src/views/system/menu/components/MenuButtonCom/crud.tsx index 908cf2a9..79675fba 100644 --- a/web/src/views/system/menu/components/MenuButtonCom/crud.tsx +++ b/web/src/views/system/menu/components/MenuButtonCom/crud.tsx @@ -4,6 +4,8 @@ import {auth} from '/@/utils/authFunction' import {request} from '/@/utils/service'; import { successNotification } from '/@/utils/message'; import { ElMessage } from 'element-plus'; +import { nextTick, ref } from 'vue'; +import XEUtils from 'xe-utils'; //此处为crudOptions配置 export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async () => { @@ -22,7 +24,42 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti const addRequest = async ({form}: AddReq) => { return await api.AddObj({...form, ...{menu: context!.selectOptions.value.id}}); }; + // 记录选中的行 + const selectedRows = ref([]); + + const onSelectionChange = (changed: any) => { + const tableData = crudExpose.getTableData(); + const unChanged = tableData.filter((row: any) => !changed.includes(row)); + // 添加已选择的行 + XEUtils.arrayEach(changed, (item: any) => { + const ids = XEUtils.pluck(selectedRows.value, 'id'); + if (!ids.includes(item.id)) { + selectedRows.value = XEUtils.union(selectedRows.value, [item]); + } + }); + // 剔除未选择的行 + XEUtils.arrayEach(unChanged, (unItem: any) => { + selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== unItem.id); + }); + }; + const toggleRowSelection = () => { + // 多选后，回显默认勾选 + const tableRef = crudExpose.getBaseTableRef(); + const tableData = crudExpose.getTableData(); + const selected = XEUtils.filter(tableData, (item: any) => { + const ids = XEUtils.pluck(selectedRows.value, 'id'); + return ids.includes(item.id); + }); + + nextTick(() => { + XEUtils.arrayEach(selected, (item) => { + tableRef.toggleRowSelection(item, true); + }); + }); + }; + return { + selectedRows, crudOptions: { pagination:{ show:false @@ -84,6 +121,11 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti editRequest, delRequest, }, + table: { + rowKey: 'id', //设置你的主键id， 默认rowKey=id + onSelectionChange, + onRefreshed: () => toggleRowSelection(), + }, form: { col: {span: 24}, labelWidth: '100px', @@ -93,6 +135,16 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti }, }, columns: { + $checked: { + title: '选择', + form: { show: false }, + column: { + type: 'selection', + align: 'center', + width: '70px', + columnSetDisabled: true, //禁止在列设置中选择 + }, + }, _index: { title: '序号', form: {show: false}, diff --git a/web/src/views/system/menu/components/MenuButtonCom/index.vue b/web/src/views/system/menu/components/MenuButtonCom/index.vue index 9dddaf94..ec55e358 100644 --- a/web/src/views/system/menu/components/MenuButtonCom/index.vue +++ b/web/src/views/system/menu/components/MenuButtonCom/index.vue @@ -1,19 +1,72 @@ diff --git a/web/src/views/system/menu/index.vue b/web/src/views/system/menu/index.vue index 0637a3fe..ca544a1b 100644 --- a/web/src/views/system/menu/index.vue +++ b/web/src/views/system/menu/index.vue @@ -16,12 +16,12 @@ -
+
-
+
-- Gitee