index.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <fs-crud ref="crudRef" v-bind="crudBinding">
  3. <template #pagination-left>
  4. <el-tooltip content="批量删除">
  5. <el-button text type="danger" :disabled="selectedRowsCount === 0" :icon="Delete" circle @click="handleBatchDelete" />
  6. </el-tooltip>
  7. </template>
  8. <template #pagination-right>
  9. <el-popover placement="top" :width="400" trigger="click">
  10. <template #reference>
  11. <el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
  12. </template>
  13. <el-table :data="selectedRows" size="small">
  14. <el-table-column width="150" property="id" label="id" />
  15. <el-table-column fixed="right" label="操作" min-width="60">
  16. <template #default="scope">
  17. <el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
  18. </template>
  19. </el-table-column>
  20. </el-table>
  21. </el-popover>
  22. </template>
  23. </fs-crud>
  24. </template>
  25. <script lang="ts" setup>
  26. import { computed, ref } from 'vue';
  27. import { useFs } from '@fast-crud/fast-crud';
  28. import { createCrudOptions } from './crud';
  29. import { MenuTreeItemType } from '../../types';
  30. import { ElMessage, ElMessageBox } from 'element-plus';
  31. import XEUtils from 'xe-utils';
  32. import { BatchDelete } from './api';
  33. import { Close, Delete } from '@element-plus/icons-vue';
  34. // 当前选择的菜单信息
  35. let selectOptions: any = ref({ name: null });
  36. const { crudRef, crudBinding, crudExpose, context,selectedRows } = useFs({ createCrudOptions, context: { selectOptions } });
  37. const { doRefresh, setTableData } = crudExpose;
  38. // 选中行的条数
  39. const selectedRowsCount = computed(() => {
  40. return selectedRows.value.length;
  41. });
  42. // 批量删除
  43. const handleBatchDelete = async () => {
  44. await ElMessageBox.confirm(`确定要批量删除这${selectedRows.value.length}条记录吗`, '确认', {
  45. distinguishCancelAndClose: true,
  46. confirmButtonText: '确定',
  47. cancelButtonText: '取消',
  48. closeOnClickModal: false,
  49. });
  50. await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
  51. ElMessage.info('删除成功');
  52. selectedRows.value = [];
  53. await crudExpose.doRefresh();
  54. };
  55. // 移除已选中的行
  56. const removeSelectedRows = (row: any) => {
  57. const tableRef = crudExpose.getBaseTableRef();
  58. const tableData = crudExpose.getTableData();
  59. if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
  60. tableRef.toggleRowSelection(row, false);
  61. } else {
  62. selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
  63. }
  64. };
  65. const handleRefreshTable = (record: MenuTreeItemType) => {
  66. if (!record.is_catalog && record.id) {
  67. selectOptions.value = record;
  68. doRefresh();
  69. } else {
  70. //清空表格数据
  71. setTableData([]);
  72. }
  73. };
  74. defineExpose({ selectOptions, handleRefreshTable });
  75. </script>