admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(20240827_BatchDelete): 增加批量删除

Browse Source 
1. 增加表格多选
2. 运行跨页多选
3. 显示多选数据
4. 移除多选数据
5. 增加批量删除
This commit is contained in:
李小涛
2024-08-27 17:31:29 +08:00
parent c8e235bed6
commit b6e05c997d
8 changed files with 312 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/utils/columnPermission.ts
View File

@@ -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)) {

7
web/src/views/system/menu/components/MenuButtonCom/api.ts
View File

@@ -48,3 +48,10 @@ export function BatchAdd(obj: AddReq) {
});
}
export function BatchDelete(keys: any) {
return request({
url: apiPrefix + 'multiple_delete/',
method: 'delete',
data: { keys },
});
}

52
web/src/views/system/menu/components/MenuButtonCom/crud.tsx
View File

@@ -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<any>([]);
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},

61
web/src/views/system/menu/components/MenuButtonCom/index.vue
View File

@@ -1,19 +1,72 @@
<template>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #pagination-left>
<el-tooltip content="批量删除">
<el-button text type="danger" :disabled="selectedRowsCount === 0" :icon="Delete" circle @click="handleBatchDelete" />
</el-tooltip>
</template>
<template #pagination-right>
<el-popover placement="top" :width="400" trigger="click">
<template #reference>
<el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
</template>
<el-table :data="selectedRows" size="small">
<el-table-column width="150" property="id" label="id" />
<el-table-column fixed="right" label="操作" min-width="60">
<template #default="scope">
<el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</fs-crud>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { computed, ref } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { MenuTreeItemType } from '../../types';
import { ElMessage, ElMessageBox } from 'element-plus';
import XEUtils from 'xe-utils';
import { BatchDelete } from './api';
import { Close, Delete } from '@element-plus/icons-vue';
// 当前选择的菜单信息
let selectOptions: any = ref({ name: null });
const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: { selectOptions } });
const { crudRef, crudBinding, crudExpose, context,selectedRows } = useFs({ createCrudOptions, context: { selectOptions } });
const { doRefresh, setTableData } = crudExpose;
// 选中行的条数
const selectedRowsCount = computed(() => {
return selectedRows.value.length;
});
// 批量删除
const handleBatchDelete = async () => {
await ElMessageBox.confirm(`确定要批量删除这${selectedRows.value.length}条记录吗`, '确认', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
});
await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
ElMessage.info('删除成功');
selectedRows.value = [];
await crudExpose.doRefresh();
};
// 移除已选中的行
const removeSelectedRows = (row: any) => {
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
tableRef.toggleRowSelection(row, false);
} else {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
}
};
const handleRefreshTable = (record: MenuTreeItemType) => {
if (!record.is_catalog && record.id) {
selectOptions.value = record;

7
web/src/views/system/menu/components/MenuFieldCom/api.ts
View File

@@ -42,6 +42,13 @@ export function DelObj(id: DelReq) {
});
}
export function BatchDelete(keys: any) {
return request({
url: apiPrefix + 'multiple_delete/',
method: 'delete',
data: { keys },
});
}
/**
* 获取所有model
*/

51
web/src/views/system/menu/components/MenuFieldCom/crud.tsx
View File

@@ -2,8 +2,9 @@ import * as api from './api';
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { request } from '/@/utils/service';
import { dictionary } from '/@/utils/dictionary';
import { inject } from 'vue';
import { inject, nextTick, ref } from 'vue';
import {auth} from "/@/utils/authFunction";
import XEUtils from 'xe-utils';
@@ -27,8 +28,41 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
form.menu = selectOptions.value.id;
return await api.AddObj(form);
};
// 记录选中的行
const selectedRows = ref<any>([]);
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: {
request: {
pageRequest,
@@ -77,7 +111,22 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
width: '600px',
},
},
table: {
rowKey: 'id', //设置你的主键id， 默认rowKey=id
onSelectionChange,
onRefreshed: () => toggleRowSelection(),
},
columns: {
$checked: {
title: '选择',
form: { show: false },
column: {
type: 'selection',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
},
},
_index: {
title: '序号',
form: { show: false },

124
web/src/views/system/menu/components/MenuFieldCom/index.vue
View File

@@ -5,15 +5,11 @@
<el-tag>已选择:{{ props.model }}</el-tag>
</div>
<!-- 搜索输入框 -->
<el-input
v-model="searchQuery"
placeholder="搜索模型..."
style="margin-bottom: 10px;"
></el-input>
<el-input v-model="searchQuery" placeholder="搜索模型..." style="margin-bottom: 10px"></el-input>
<div class="model-card">
<!--注释编号:django-vue3-admin-index483211: 对请求回来的allModelData进行computed计算，返加搜索框匹配到的内容-->
<div v-for="(item,index) in filteredModelData" :value="item.key" :key="index">
<el-text :type="modelCheckIndex===index?'primary':''" @click="onModelChecked(item,index)">
<div v-for="(item, index) in filteredModelData" :value="item.key" :key="index">
<el-text :type="modelCheckIndex === index ? 'primary' : ''" @click="onModelChecked(item, index)">
{{ item.app + '--' + item.title + '(' + item.key + ')' }}
</el-text>
</div>
@@ -21,48 +17,67 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="modelDialog = false">取消</el-button>
<el-button type="primary" @click="handleAutomatch">
确定
</el-button>
<el-button type="primary" @click="handleAutomatch"> 确定 </el-button>
</span>
</template>
</el-dialog>
<div style="height: 80vh">
<div style="height: 72vh">
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #pagination-left>
<el-tooltip content="批量删除">
<el-button text type="danger" :disabled="selectedRowsCount === 0" :icon="Delete" circle @click="handleBatchDelete" />
</el-tooltip>
</template>
<template #pagination-right>
<el-popover placement="top" :width="400" trigger="click">
<template #reference>
<el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
</template>
<el-table :data="selectedRows" size="small">
<el-table-column width="150" property="id" label="id" />
<el-table-column fixed="right" label="操作" min-width="60">
<template #default="scope">
<el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</fs-crud>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref, onMounted, reactive, computed } from 'vue';
import {useFs} from '@fast-crud/fast-crud';
import {createCrudOptions} from './crud';
import {getModelList} from './api'
import {MenuTreeItemType} from "/@/views/system/menu/types";
import {successMessage, successNotification, warningNotification} from '/@/utils/message';
import {automatchColumnsData} from '/@/views/system/columns/components/ColumnsTableCom/api';
import { ref, onMounted, reactive, computed } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { BatchDelete, getModelList } from './api';
import { Close, Delete } from '@element-plus/icons-vue';
import { MenuTreeItemType } from '/@/views/system/menu/types';
import { successMessage, successNotification, warningNotification } from '/@/utils/message';
import { automatchColumnsData } from '/@/views/system/columns/components/ColumnsTableCom/api';
import XEUtils from 'xe-utils';
import { ElMessage, ElMessageBox } from 'element-plus';
// 当前选择的菜单信息
let selectOptions: any = ref({name: null});
let selectOptions: any = ref({ name: null });
const props = reactive({
model: '',
app: '',
menu: ''
})
menu: '',
});
//model弹窗
const modelDialog = ref(false)
const modelDialog = ref(false);
// 获取所有model
const allModelData = ref<any[]>([]);
const modelCheckIndex = ref(null)
const modelCheckIndex = ref(null);
const onModelChecked = (row, index) => {
modelCheckIndex.value = index
props.model = row.key
props.app = row.app
}
modelCheckIndex.value = index;
props.model = row.key;
props.app = row.app;
};
// 注释编号:django-vue3-admin-index083311:代码开始行
// 功能说明:搭配搜索的处理，返回搜索结果
@@ -73,15 +88,12 @@ const filteredModelData = computed(() => {
return allModelData.value;
}
const query = searchQuery.value.toLowerCase();
return allModelData.value.filter(item =>
item.app.toLowerCase().includes(query) ||
item.title.toLowerCase().includes(query) ||
item.key.toLowerCase().includes(query)
return allModelData.value.filter(
(item) => item.app.toLowerCase().includes(query) || item.title.toLowerCase().includes(query) || item.key.toLowerCase().includes(query)
);
});
});
// 注释编号:django-vue3-admin-index083311:代码结束行
/**
* 菜单选中时,加载表格数据
* @param record
@@ -99,28 +111,56 @@ const handleRefreshTable = (record: MenuTreeItemType) => {
* 自动匹配列
*/
const handleAutomatch = async () => {
props.menu = selectOptions.value.id
modelDialog.value = false
props.menu = selectOptions.value.id;
modelDialog.value = false;
if (props.menu && props.model) {
const res = await automatchColumnsData(props);
if (res?.code === 2000) {
successNotification('匹配成功');
}
crudExpose.doSearch({form: {menu: props.menu, model: props.model}});
}else {
crudExpose.doSearch({ form: { menu: props.menu, model: props.model } });
} else {
warningNotification('请选择角色和模型表！');
}
};
// 选中行的条数
const selectedRowsCount = computed(() => {
return selectedRows.value.length;
});
const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, props, modelDialog, selectOptions,allModelData});
// 批量删除
const handleBatchDelete = async () => {
await ElMessageBox.confirm(`确定要批量删除这${selectedRows.value.length}条记录吗`, '确认', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
});
await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
ElMessage.info('删除成功');
selectedRows.value = [];
await crudExpose.doRefresh();
};
// 移除已选中的行
const removeSelectedRows = (row: any) => {
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
tableRef.toggleRowSelection(row, false);
} else {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
}
};
const { crudBinding, crudRef, crudExpose, selectedRows } = useFs({ createCrudOptions, props, modelDialog, selectOptions, allModelData });
onMounted(async () => {
const res = await getModelList();
allModelData.value = res.data;
});
defineExpose({selectOptions, handleRefreshTable});
defineExpose({ selectOptions, handleRefreshTable });
</script>
<style scoped lang="scss">

4
web/src/views/system/menu/index.vue
View File

@@ -16,12 +16,12 @@
<el-col :span="18">
<el-tabs type="border-card">
<el-tab-pane label="按钮权限配置" >
<div style="height: 80vh">
<div style="height: 72vh">
<MenuButtonCom ref="menuButtonRef" />
</div>
</el-tab-pane>
<el-tab-pane label="列权限配置">
<div style="height: 80vh">
<div style="height: 72vh">
<MenuFieldCom ref="menuFieldRef"></MenuFieldCom>
</div>
</el-tab-pane>