1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <template>
| <BasicModal v-bind="$attrs" @register="registerModal" title="字典回收站" :showOkBtn="false" width="1000px" destroyOnClose>
| <BasicTable @register="registerTable">
| <!--操作栏-->
| <template #action="{ record }">
| <TableAction :actions="getTableAction(record)" />
| </template>
| </BasicTable>
| </BasicModal>
| </template>
| <script lang="ts" setup>
| import { ref, toRaw } from 'vue';
| import { BasicModal, useModalInner } from '/src/components/Modal';
| import { BasicTable, useTable, TableAction } from '/src/components/Table';
| import { recycleBincolumns } from '../dict.data';
| import { getRecycleBinList, putRecycleBin, deleteRecycleBin } from '../dict.api';
| // 声明Emits
| const emit = defineEmits(['success', 'register']);
| const checkedKeys = ref<Array<string | number>>([]);
| const [registerModal, { setModalProps, closeModal }] = useModalInner();
| //注册table数据
| const [registerTable, { reload }] = useTable({
| api: getRecycleBinList,
| columns: recycleBincolumns,
| striped: true,
| useSearchForm: false,
| showTableSetting: false,
| clickToRowSelect: false,
| bordered: true,
| showIndexColumn: false,
| pagination: false,
| tableSetting: { fullScreen: true },
| canResize: false,
| actionColumn: {
| width: 100,
| title: '操作',
| dataIndex: 'action',
| slots: { customRender: 'action' },
| fixed: undefined,
| },
| });
|
| /**
| * 还原事件
| */
| async function handleRevert(record) {
| await putRecycleBin(record.id, reload);
| emit('success');
| }
| /**
| * 删除事件
| */
| async function handleDelete(record) {
| await deleteRecycleBin(record.id, reload);
| }
| /**
| * 批量还原事件
| */
| function batchHandleRevert() {
| handleRevert({ id: toRaw(checkedKeys.value).join(',') });
| }
| /**
| * 批量删除事件
| */
| function batchHandleDelete() {
| handleDelete({ id: toRaw(checkedKeys.value).join(',') });
| }
| //获取操作栏事件
| function getTableAction(record) {
| return [
| {
| label: '取回',
| icon: 'ant-design:redo-outlined',
| popConfirm: {
| title: '是否确认取回',
| confirm: handleRevert.bind(null, record),
| },
| },
| {
| label: '彻底删除',
| icon: 'ant-design:scissor-outlined',
| color: 'error',
| popConfirm: {
| title: '是否确认删除',
| confirm: handleDelete.bind(null, record),
| },
| },
| ];
| }
| </script>
|
|
