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
| <template>
| <a-button-group class="j-table-operator">
| <a-button type="primary" @click="setDisabled(0)">启用</a-button>
| <a-button type="primary" @click="setDisabled(1)">禁用</a-button>
| <a-button type="primary" @click="showUploadModal">文件弹窗</a-button>
| </a-button-group>
| <BasicForm @register="register" @submit="handleSubmit" />
| <JUploadModal v-model:value="uploadModalValue" @register="registerModel" />
| </template>
|
| <script lang="ts" setup>
| import { ref } from 'vue';
| import { FormSchema, useForm, BasicForm } from '/@/components/Form';
| import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
| import { JUploadModal } from '/@/components/Form/src/jeecg/components/JUpload';
| import { useModal } from '/@/components/Modal';
|
| const uploadModalValue = ref('');
|
| const schemas: FormSchema[] = [
| {
| field: 'uploadFile',
| component: 'JUpload',
| helpMessage: '无限制上传',
| label: '上传文件',
| },
| {
| field: 'uploadFileMax',
| component: 'JUpload',
| helpMessage: '最多上传3个文件',
| label: '上传文件（3）',
| componentProps: { maxCount: 3 },
| },
| {
| field: 'uploadImage',
| component: 'JUpload',
| label: '上传图片',
| helpMessage: '无限制上传',
| componentProps: {
| fileType: UploadTypeEnum.image,
| },
| },
| {
| field: 'uploadImageMax',
| component: 'JUpload',
| label: '上传图片（1）',
| helpMessage: '最多上传1张图片',
| componentProps: {
| fileType: UploadTypeEnum.image,
| maxCount: 1,
| },
| },
| ];
|
| const [registerModel, { openModal }] = useModal();
|
| const [register, { setProps, validate, setFieldsValue }] = useForm({
| labelWidth: 120,
| schemas: schemas,
| actionColOptions: {
| span: 24,
| },
| compact: true,
| showResetButton: false,
| showSubmitButton: false,
| showAdvancedButton: false,
| disabled: false,
| });
|
| function handleSubmit(values) {
| console.log(values);
| }
|
| function setDisabled(flag) {
| setProps({ disabled: !!flag });
| }
|
| function showUploadModal() {
| openModal(true, {
| maxCount: 9,
| fileType: UploadTypeEnum.image,
| });
| }
| </script>
|
|
