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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| <!--角色选择框-->
| <template>
| <div>
| <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="800px" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
| <BasicTable
| :columns="columns"
| v-bind="config"
| :useSearchForm="true"
| :formConfig="formConfig"
| :api="getRoleList"
| :searchInfo="searchInfo"
| :rowSelection="rowSelection"
| :indexColumnProps="indexColumnProps"
| ></BasicTable>
| </BasicModal>
| </div>
| </template>
| <script lang="ts">
| import { defineComponent, ref, unref } from 'vue';
| import { BasicModal, useModalInner } from '/@/components/Modal';
| import { getRoleList } from '/@/api/common/api';
| import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
| import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
| import { selectProps } from '/@/components/Form/src/jeecg/props/props';
| import { useAttrs } from '/@/hooks/core/useAttrs';
|
| export default defineComponent({
| name: 'UserSelectModal',
| components: {
| //此处需要异步加载BasicTable
| BasicModal,
| BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
| loading: true,
| }),
| },
| props: {
| ...selectProps,
| //选择框标题
| modalTitle: {
| type: String,
| default: '角色选择',
| },
| },
| emits: ['register', 'getSelectResult'],
| setup(props, { emit, refs }) {
| //注册弹框
| const [register, { closeModal }] = useModalInner();
| const attrs = useAttrs();
| //表格配置
| const config = {
| canResize: false,
| bordered: true,
| size: 'small',
| rowKey: unref(props).rowKey,
| };
| const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
| const [{ rowSelection, indexColumnProps, visibleChange, getSelectResult }] = useSelectBiz(getRoleList, getBindValue);
| const searchInfo = ref(props.params);
| //查询form
| const formConfig = {
| //labelWidth: 220,
| baseColProps: {
| xs: 24,
| sm: 24,
| md: 24,
| lg: 14,
| xl: 14,
| xxl: 14,
| },
| schemas: [
| {
| label: '角色名称',
| field: 'roleName',
| component: 'JInput',
| },
| ],
| };
| //定义表格列
| const columns = [
| {
| title: '角色名称',
| dataIndex: 'roleName',
| width: 40,
| align: 'left',
| },
| {
| title: '角色编码',
| dataIndex: 'roleCode',
| width: 40,
| },
| ];
|
| /**
| * 确定选择
| */
| function handleOk() {
| getSelectResult((options, values) => {
| //回传选项和已选择的值
| emit('getSelectResult', options, values);
| //关闭弹窗
| closeModal();
| });
| }
|
| return {
| config,
| handleOk,
| searchInfo,
| register,
| indexColumnProps,
| visibleChange,
| getRoleList,
| formConfig,
| getBindValue,
| columns,
| rowSelection,
| };
| },
| });
| </script>
|
|
