Blame view

src/views/demo/form/UseForm.vue 12.5 KB
陈文彬 authored
1
<template>
2
  <PageWrapper title="UseForm操作示例">
3
    <a-button class="mb-4" type="primary" @click="showDrawer"> 更改设置 </a-button>
4
5

    <Drawer v-model:visible="visible" title="更改设置" placement="right">
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      <BasicForm ref="settingFormRef" @register="registerSetting" @submit="handleSubmitSetting">
        <template #other>
          <Space>
            <a-button
              @click="() => withClose({ resetButtonOptions: { disabled: true, text: '重置New' } })"
            >
              修改重置按钮
            </a-button>
            <a-button
              @click="() => withClose({ submitButtonOptions: { disabled: true, loading: true } })"
            >
              修改查询按钮
            </a-button>
            <a-button @click="handleLoad" class="mr-2"> 联动回显 </a-button>
          </Space>
        </template>
      </BasicForm>
23
24
25
26
27
28
29
30
      <template #extra>
        <Space>
          <a-button @click="resetSettings">重置设置</a-button>
          <a-button type="primary" @click="onSettings">应用</a-button>
        </Space>
      </template>
    </Drawer>
陈文彬 authored
31
32
33
    <CollapseContainer title="useForm示例">
      <BasicForm @register="register" @submit="handleSubmit" />
    </CollapseContainer>
34
  </PageWrapper>
陈文彬 authored
35
</template>
36
陈文彬 authored
37
<script lang="ts">
38
39
  import { defineComponent, ref } from 'vue';
  import { Drawer, Space } from 'ant-design-vue';
40
  import { BasicForm, FormSchema, useForm, type FormProps } from '/@/components/Form';
41
  import { CollapseContainer } from '/@/components/Container';
42
  import { PageWrapper } from '/@/components/Page';
43
  import { areaRecord } from '/@/api/demo/cascader';
44
45
46
47
48
49
50
51
  const sizeList = [
    { value: 'large', label: 'large' },
    { value: 'middle', label: 'middle' },
    { value: 'small', label: 'small' },
    { value: 'default', label: 'defualt' },
  ];
52
53
54
55
56
57
58
59
60
61
62
  const layoutList = [
    { value: 'vertical', label: 'vertical' },
    { value: 'inline', label: 'inline' },
    { value: 'horizontal', label: 'horizontal' },
  ];

  const labelAlignList = [
    { value: 'left', label: 'left' },
    { value: 'right', label: 'right' },
  ];
陈文彬 authored
63
64
65
66
67
  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Input',
      label: '字段1',
68
      colProps: { span: 8 },
陈文彬 authored
69
70
71
72
73
74
75
76
77
78
79
      componentProps: {
        placeholder: '自定义placeholder',
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'field2',
      component: 'Input',
      label: '字段2',
80
      colProps: { span: 8 },
陈文彬 authored
81
82
83
84
85
    },
    {
      field: 'field3',
      component: 'DatePicker',
      label: '字段3',
86
      colProps: { span: 8 },
陈文彬 authored
87
88
    },
    {
89
90
91
      field: 'fieldTime',
      component: 'RangePicker',
      label: '时间字段',
92
      colProps: { span: 8 },
93
94
    },
    {
陈文彬 authored
95
96
97
      field: 'field4',
      component: 'Select',
      label: '字段4',
98
      colProps: { span: 8 },
陈文彬 authored
99
100
      componentProps: {
        options: [
101
102
          { label: '选项1', value: '1', key: '1' },
          { label: '选项2', value: '2', key: '2' },
陈文彬 authored
103
104
105
106
107
108
109
110
111
112
113
114
        ],
      },
    },
    {
      field: 'field5',
      component: 'CheckboxGroup',
      label: '字段5',
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
115
116
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
陈文彬 authored
117
118
119
120
121
122
123
        ],
      },
    },
    {
      field: 'field7',
      component: 'RadioGroup',
      label: '字段7',
124
      colProps: { span: 8 },
陈文彬 authored
125
126
      componentProps: {
        options: [
127
128
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
陈文彬 authored
129
130
131
        ],
      },
    },
132
133
134
135
    {
      field: 'field8',
      component: 'ApiCascader',
      label: '联动',
136
      colProps: { span: 8 },
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
      componentProps: {
        api: areaRecord,
        apiParamKey: 'parentCode',
        dataField: 'data',
        labelField: 'name',
        valueField: 'code',
        initFetchParams: {
          parentCode: '',
        },
        isLeaf: (record) => {
          return !(record.levelType < 3);
        },
      },
    },
    {
      field: 'field9',
      component: 'ApiCascader',
      label: '联动回显',
155
      colProps: { span: 8 },
156
157
158
159
160
161
162
163
164
165
166
167
168
169
      componentProps: {
        api: areaRecord,
        apiParamKey: 'parentCode',
        dataField: 'data',
        labelField: 'name',
        valueField: 'code',
        initFetchParams: {
          parentCode: '',
        },
        isLeaf: (record) => {
          return !(record.levelType < 3);
        },
      },
    },
陈文彬 authored
170
  ];
171
172
  const formSchemas: FormSchema[] = [
    {
173
      field: 'd1',
174
175
176
177
178
179
180
181
      component: 'Divider',
      label: '基础属性',
      colProps: { span: 24 },
      componentProps: {
        orientation: 'center',
      },
    },
    {
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
      field: 'name',
      defaultValue: 'useForm',
      component: 'Input',
      label: 'name',
      colProps: { span: 24 },
    },
    {
      field: 'layout',
      defaultValue: 'horizontal',
      component: 'RadioButtonGroup',
      label: 'layout',
      colProps: { span: 24 },
      componentProps: {
        options: layoutList,
      },
    },
    {
      field: 'labelAlign',
      defaultValue: 'right',
      component: 'RadioButtonGroup',
      label: 'labelAlign',
      colProps: { span: 24 },
      componentProps: {
        options: labelAlignList,
      },
    },
    {
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
      field: 'labelWidth',
      defaultValue: 120,
      component: 'InputNumber',
      label: 'labelWidth',
      colProps: { span: 24 },
    },
    {
      field: 'size',
      defaultValue: 'default',
      component: 'Select',
      label: 'size',
      colProps: { span: 24 },
      componentProps: {
        options: sizeList,
      },
    },
    {
226
227
228
229
230
231
232
      field: 'colon',
      defaultValue: false,
      component: 'Switch',
      label: 'colon',
      colProps: { span: 24 },
    },
    {
233
234
235
236
237
238
239
240
241
242
243
244
245
246
      field: 'disabled',
      defaultValue: false,
      component: 'Switch',
      label: 'disabled',
      colProps: { span: 24 },
    },
    {
      field: 'compact',
      defaultValue: false,
      component: 'Switch',
      label: 'compact',
      colProps: { span: 24 },
    },
    {
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
      field: 'autoSetPlaceHolder',
      defaultValue: true,
      component: 'Switch',
      label: 'autoSetPlaceHolder',
      colProps: { span: 24 },
    },
    {
      field: 'autoSubmitOnEnter',
      defaultValue: false,
      component: 'Switch',
      label: 'autoSubmitOnEnter',
      colProps: { span: 24 },
    },
    {
      field: 'showAdvancedButton',
      defaultValue: false,
      component: 'Switch',
      label: 'showAdvancedButton',
      colProps: { span: 24 },
    },

    {
      field: 'd2',
270
      component: 'Divider',
271
      label: '网格布局(rowProps)',
272
273
274
275
276
277
      colProps: { span: 24 },
      componentProps: {
        orientation: 'center',
      },
    },
    {
278
279
280
281
      field: 'rowProps.gutter.0',
      component: 'InputNumber',
      defaultValue: 0,
      label: 'Horizontal Gutter',
282
283
      colProps: { span: 24 },
      componentProps: {
284
        addonAfter: 'px',
285
286
287
      },
    },
    {
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
      field: 'rowProps.gutter.1',
      component: 'InputNumber',
      defaultValue: 0,
      label: 'Vertical Gutter',
      colProps: { span: 24 },
      componentProps: {
        addonAfter: 'px',
      },
    },
    {
      field: 'rowProps.align',
      defaultValue: 'top',
      component: 'Select',
      label: 'align',
      colProps: { span: 24 },
      componentProps: {
        options: [
          { value: 'stretch', label: 'stretch' },
          { value: 'bottom', label: 'bottom' },
          { value: 'top', label: 'top' },
          { value: 'middle', label: 'middle' },
        ],
      },
    },
    {
      field: 'rowProps.justify',
      defaultValue: 'start',
      component: 'Select',
      label: 'justify',
      colProps: { span: 24 },
      componentProps: {
        options: [
          { value: 'space-around', label: 'space-around' },
          { value: 'space-between', label: 'space-between' },
          { value: 'center', label: 'center' },
          { value: 'end', label: 'end' },
          { value: 'start', label: 'start' },
        ],
      },
    },
    {
      field: 'wrap',
      defaultValue: true,
      component: 'Switch',
      label: 'wrap',
      colProps: { span: 24 },
    },

    {
      field: 'd3',
338
339
340
341
342
343
344
345
346
347
348
      component: 'Divider',
      label: '操作按钮',
      colProps: { span: 24 },
      componentProps: {
        orientation: 'center',
      },
    },
    {
      field: 'showActionButtonGroup',
      defaultValue: true,
      component: 'Switch',
349
      label: 'showActionButtonGroup',
350
351
352
353
354
355
356
357
358
359
      colProps: { span: 24 },
      componentProps: ({ formActionType }) => {
        return {
          onChange: async (val: boolean) => {
            formActionType.updateSchema([
              { field: 'showResetButton', componentProps: { disabled: !val } },
              {
                field: 'showSubmitButton',
                componentProps: { disabled: !val },
              },
360
361
362
363
              {
                field: 'actionColOptions.span',
                componentProps: { disabled: !val },
              },
364
365
366
367
368
369
370
371
372
            ]);
          },
        };
      },
    },
    {
      field: 'showResetButton',
      defaultValue: true,
      component: 'Switch',
373
      label: 'showResetButton',
374
375
376
377
378
379
      colProps: { span: 24 },
    },
    {
      field: 'showSubmitButton',
      defaultValue: true,
      component: 'Switch',
380
381
382
383
384
385
386
387
      label: 'showSubmitButton',
      colProps: { span: 24 },
    },

    {
      field: 'd4',
      component: 'Divider',
      label: '操作按钮网格布局(actionColOptions)',
388
389
      colProps: { span: 24 },
      componentProps: {
390
        orientation: 'center',
391
392
      },
    },
393
    {
394
395
396
397
398
399
400
401
402
      field: 'actionColOptions.span',
      component: 'Slider',
      defaultValue: 24,
      label: 'span',
      colProps: { span: 24 },
      componentProps: { min: 0, max: 24 },
    },
    {
      field: 'd5',
403
404
405
406
407
408
409
410
411
412
413
414
415
416
      component: 'Divider',
      label: '其他事件',
      colProps: { span: 24 },
      componentProps: {
        orientation: 'center',
      },
    },
    {
      field: 'other',
      component: 'Input',
      label: '',
      colProps: { span: 24 },
      colSlot: 'other',
    },
417
418
  ];
陈文彬 authored
419
  export default defineComponent({
420
421
422
423
424
425
426
    components: {
      BasicForm,
      CollapseContainer,
      PageWrapper,
      Drawer,
      Space,
    },
陈文彬 authored
427
    setup() {
428
429
430
      const visible = ref<boolean>(false);
      const settingFormRef = ref();
      const [registerSetting] = useForm({
431
        size: 'small',
432
433
434
435
436
437
        schemas: formSchemas,
        compact: true,
        actionColOptions: { span: 24 },
        showActionButtonGroup: false,
      });
      const resetSettings = async () => {
438
439
440
        setProps({ resetButtonOptions: { disabled: false, text: '重置' } });
        setProps({ submitButtonOptions: { disabled: false, loading: false } });
        await setFieldsValue({ field9: [] });
441
442
443
        await settingFormRef.value?.resetFields();
      };
      const handleSubmitSetting = async (values: Recordable) => {
444
        console.log(values);
445
446
447
        await setProps(values);
        visible.value = false;
      };
448
      const [register, { setProps, setFieldsValue, updateSchema }] = useForm({
陈文彬 authored
449
450
        labelWidth: 120,
        schemas,
451
        actionColOptions: { span: 24 },
452
        fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
陈文彬 authored
453
      });
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
      async function handleLoad() {
        const promiseFn = function () {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve({
                field9: ['430000', '430100', '430102'],
                province: '湖南省',
                city: '长沙市',
                district: '岳麓区',
              });
            }, 1000);
          });
        };
        const item = await promiseFn();
        const { field9, province, city, district } = item as any;
        await updateSchema({
          field: 'field9',
          componentProps: {
            displayRenderArray: [province, city, district],
          },
        });
475
        await setFieldsValue({ field9 });
476
        visible.value = false;
477
      }
478
479
480
481
482
483
      const showDrawer = () => {
        visible.value = true;
      };
      const onSettings = () => {
        settingFormRef.value?.submit();
      };
484
485
486
487
488
      const withClose = (formProps: Partial<FormProps>) => {
        setProps(formProps);
        visible.value = false;
      };
陈文彬 authored
489
490
491
      return {
        register,
        schemas,
vben authored
492
        handleSubmit: (values: Recordable) => {
493
          console.log(values);
陈文彬 authored
494
495
        },
        setProps,
496
        handleLoad,
497
498
499
        visible,
        showDrawer,
        settingFormRef,
500
        withClose,
501
502
503
504
        onSettings,
        resetSettings,
        registerSetting,
        handleSubmitSetting,
陈文彬 authored
505
506
507
508
      };
    },
  });
</script>