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
| <template>
| <BasicModal v-bind="$attrs" @register="registerModal" title="用户选择列表" width="1000px" @ok="handleSubmit">
| <BasicTable @register="registerTable" :rowSelection="rowSelection" style="padding: 0px" />
| </BasicModal>
| </template>
| <script lang="ts" setup>
| import { ref, unref, toRaw } from 'vue';
| import { BasicModal, useModalInner } from '/src/components/Modal';
| import { BasicTable, useTable, TableAction } from '/src/components/Table';
| import { userColumns, searchUserFormSchema } from '../role.data';
| import { list } from '../../user/user.api';
| // 声明Emits
| const emit = defineEmits(['select', 'register']);
| const checkedKeys = ref<Array<string | number>>([]);
| const [registerModal, { setModalProps, closeModal }] = useModalInner();
| //注册table数据
| const [registerTable, { reload }] = useTable({
| api: list,
| rowKey: 'id',
| columns: userColumns,
| formConfig: {
| labelWidth: 60,
| schemas: searchUserFormSchema,
| baseRowStyle: { maxHeight: '20px' },
| autoSubmitOnEnter: true,
| },
| striped: true,
| useSearchForm: true,
| showTableSetting: false,
| bordered: true,
| showIndexColumn: false,
| canResize: false,
| });
| /**
| * 选择列配置
| */
| const rowSelection = {
| type: 'checkbox',
| columnWidth: 50,
| selectedRowKeys: checkedKeys,
| onChange: onSelectChange,
| };
| /**
| * 选择事件
| */
| function onSelectChange(selectedRowKeys: (string | number)[]) {
| checkedKeys.value = selectedRowKeys;
| }
|
| //提交事件
| function handleSubmit() {
| setModalProps({ confirmLoading: true });
| //关闭弹窗
| closeModal();
| //刷新列表
| emit('select', toRaw(unref(checkedKeys)));
| setModalProps({ confirmLoading: false });
| }
| </script>
|
|
