| 提交 | 用户 | age | ||
| 746d4a | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="上传组件示例"> |
| 70c087 | 3 | <a-alert message="基础示例" /> |
| V | 4 | <BasicUpload |
| 5 | :maxSize="20" | |
| 6 | :maxNumber="10" | |
| 7 | @change="handleChange" | |
| 8 | :api="uploadApi" | |
| 9 | class="my-5" | |
| 656ee4 | 10 | :accept="['image/*']" |
| 70c087 | 11 | /> |
| 661db0 | 12 | |
| 70c087 | 13 | <a-alert message="嵌入表单,加入表单校验" /> |
| 661db0 | 14 | |
| 70c087 | 15 | <BasicForm @register="register" class="my-5" /> |
| 31ff05 | 16 | </PageWrapper> |
| 746d4a | 17 | </template> |
| J | 18 | <script lang="ts"> |
| be2b8a | 19 | import { defineComponent } from 'vue'; |
| 661db0 | 20 | import { BasicUpload } from '/@/components/Upload'; |
| V | 21 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 22 | import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; | |
| 31ff05 | 23 | import { PageWrapper } from '/@/components/Page'; |
| 6392b7 | 24 | import { Alert } from 'ant-design-vue'; |
| 661db0 | 25 | import { uploadApi } from '/@/api/sys/upload'; |
| V | 26 | |
| 27 | const schemas: FormSchema[] = [ | |
| 28 | { | |
| 29 | field: 'field1', | |
| be2b8a | 30 | component: 'Upload', |
| 661db0 | 31 | label: '字段1', |
| V | 32 | colProps: { |
| 33 | span: 8, | |
| 34 | }, | |
| be2b8a | 35 | rules: [{ required: true, message: '请选择上传文件' }], |
| V | 36 | componentProps: { |
| 37 | api: uploadApi, | |
| 661db0 | 38 | }, |
| V | 39 | }, |
| 40 | ]; | |
| 746d4a | 41 | export default defineComponent({ |
| 6392b7 | 42 | components: { BasicUpload, BasicForm, PageWrapper, [Alert.name]: Alert }, |
| 746d4a | 43 | setup() { |
| 661db0 | 44 | const { createMessage } = useMessage(); |
| V | 45 | const [register] = useForm({ |
| 46 | labelWidth: 120, | |
| 47 | schemas, | |
| 48 | actionColOptions: { | |
| 49 | span: 16, | |
| 50 | }, | |
| 51 | }); | |
| 52 | return { | |
| 53 | handleChange: (list: string[]) => { | |
| 54 | createMessage.info(`已上传文件${JSON.stringify(list)}`); | |
| 55 | }, | |
| 56 | uploadApi, | |
| 57 | register, | |
| 58 | }; | |
| 746d4a | 59 | }, |
| J | 60 | }); |
| 61 | </script> | |
