UserRecycleBinModal.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <BasicModal v-bind="$attrs" @register="registerModal" title="用户回收站" :showOkBtn="false" width="1000px" destroyOnClose>
  3. <BasicTable @register="registerTable" :rowSelection="rowSelection">
  4. <!--插槽:table标题-->
  5. <template #tableTitle>
  6. <a-dropdown v-if="checkedKeys.length > 0">
  7. <template #overlay>
  8. <a-menu>
  9. <a-menu-item key="1" @click="batchHandleDelete">
  10. <Icon icon="ant-design:delete-outlined"></Icon>
  11. 批量删除
  12. </a-menu-item>
  13. <a-menu-item key="1" @click="batchHandleRevert">
  14. <Icon icon="ant-design:redo-outlined"></Icon>
  15. 批量还原
  16. </a-menu-item>
  17. </a-menu>
  18. </template>
  19. <a-button>批量操作
  20. <Icon icon="ant-design:down-outlined"></Icon>
  21. </a-button>
  22. </a-dropdown>
  23. </template>
  24. <!--操作栏-->
  25. <template #action="{ record }">
  26. <TableAction :actions="getTableAction(record)"/>
  27. </template>
  28. </BasicTable>
  29. </BasicModal>
  30. </template>
  31. <script lang="ts" setup>
  32. import {ref,toRaw,unref} from 'vue';
  33. import {BasicModal, useModalInner} from '/@/components/Modal';
  34. import {BasicTable, useTable, TableAction} from '/@/components/Table';
  35. import {recycleColumns} from './user.data';
  36. import {getRecycleBinList, putRecycleBin, deleteRecycleBin} from './user.api';
  37. import {useMessage} from '/@/hooks/web/useMessage'
  38. const {createConfirm} = useMessage()
  39. // 声明Emits
  40. const emit = defineEmits(['success', 'register']);
  41. const checkedKeys = ref<Array<string | number>>([]);
  42. const [registerModal] = useModalInner(() => {
  43. checkedKeys.value = []
  44. })
  45. //注册table数据
  46. const [registerTable, {reload}] = useTable({
  47. api: getRecycleBinList,
  48. columns:recycleColumns,
  49. rowKey: 'id',
  50. striped: true,
  51. useSearchForm: false,
  52. showTableSetting: false,
  53. clickToRowSelect: false,
  54. bordered: true,
  55. showIndexColumn: false,
  56. pagination: true,
  57. tableSetting: {fullScreen: true},
  58. canResize: false,
  59. actionColumn: {
  60. width: 150,
  61. title: '操作',
  62. dataIndex: 'action',
  63. slots: {customRender: 'action'},
  64. fixed: undefined,
  65. },
  66. })
  67. /**
  68. * 选择列配置
  69. */
  70. const rowSelection = {
  71. type: 'checkbox',
  72. columnWidth: 50,
  73. selectedRowKeys: checkedKeys,
  74. onChange: onSelectChange
  75. }
  76. /**
  77. * 选择事件
  78. */
  79. function onSelectChange(selectedRowKeys: (string | number)[]) {
  80. checkedKeys.value = selectedRowKeys;
  81. }
  82. /**
  83. * 还原事件
  84. */
  85. async function handleRevert(record) {
  86. await putRecycleBin({userIds: record.id},reload)
  87. emit('success')
  88. }
  89. /**
  90. * 批量还原事件
  91. */
  92. function batchHandleRevert() {
  93. handleRevert({id:toRaw(unref(checkedKeys)).join(",")})
  94. }
  95. /**
  96. * 删除事件
  97. */
  98. async function handleDelete(record) {
  99. await deleteRecycleBin({userIds: record.id},reload)
  100. }
  101. /**
  102. * 批量删除事件
  103. */
  104. function batchHandleDelete() {
  105. createConfirm({
  106. iconType: 'warning',
  107. title: '删除',
  108. content: '确定要永久删除吗?删除后将不可恢复!',
  109. onOk: () => handleDelete({id: toRaw(unref(checkedKeys)).join(',')}),
  110. onCancel() {
  111. },
  112. })
  113. }
  114. //获取操作栏事件
  115. function getTableAction(record) {
  116. return [
  117. {
  118. label:"取回",
  119. icon: 'ant-design:redo-outlined',
  120. popConfirm: {
  121. title: '是否确认还原',
  122. confirm: handleRevert.bind(null, record),
  123. }
  124. },
  125. {
  126. label:"彻底删除",
  127. icon: 'ant-design:scissor-outlined',
  128. popConfirm: {
  129. title: '是否确认删除',
  130. confirm: handleDelete.bind(null, record),
  131. },
  132. }
  133. ]
  134. }
  135. </script>