119 lines
3.1 KiB
Plaintext
119 lines
3.1 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<a-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </a-card>
|
||
</div>
|
||
<a-card :bordered="false" class="mt-4 proCard">
|
||
<div class="BasicForm">
|
||
<a-form
|
||
:labelCol="{ lg: 4, sm: 4 }"
|
||
:model="formValue"
|
||
:rules="rules"
|
||
ref="formRef"
|
||
class="py-8"
|
||
>
|
||
<a-form-item label="预约姓名" name="name">
|
||
<a-input v-model:value="formValue.name" placeholder="输入姓名" />
|
||
</a-form-item>
|
||
<a-form-item label="预约号码" name="mobile">
|
||
<a-input placeholder="电话号码" v-model:value="formValue.mobile" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="病例图片" name="images">
|
||
<BasicUpload
|
||
:action="`${uploadUrl}/v1.0/files`"
|
||
:headers="uploadHeaders"
|
||
:data="{ type: 0 }"
|
||
name="files"
|
||
:width="100"
|
||
:height="100"
|
||
v-model:value="formValue.images"
|
||
helpText="单个文件不超过2MB，最多只能上传10个文件"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item :wrapperCol="{ offset: 4 }">
|
||
<a-space>
|
||
<a-button type="primary" @click="formSubmit">提交预约</a-button>
|
||
<a-button @click="resetForm">重置</a-button>
|
||
</a-space>
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, unref, reactive } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import { BasicUpload } from '@/components/Upload';
|
||
import { useGlobSetting } from '@/hooks/setting';
|
||
|
||
const globSetting = useGlobSetting();
|
||
|
||
const rules = {
|
||
name: {
|
||
required: true,
|
||
message: '请输入预约姓名',
|
||
trigger: 'blur',
|
||
},
|
||
remark: {
|
||
required: true,
|
||
message: '请输入预约备注',
|
||
trigger: 'blur',
|
||
},
|
||
images: {
|
||
required: true,
|
||
type: 'array',
|
||
message: '请上传病例图片',
|
||
trigger: 'change',
|
||
},
|
||
};
|
||
|
||
const formRef: any = ref(null);
|
||
|
||
const { uploadUrl } = globSetting;
|
||
|
||
const formValue = reactive({
|
||
name: '',
|
||
mobile: '',
|
||
//图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
|
||
images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
|
||
});
|
||
|
||
const uploadHeaders = reactive({
|
||
platform: 'miniPrograms',
|
||
timestamp: new Date().getTime(),
|
||
token: 'wUP2sov1RKfX6KMzgk3LpVtfPiphTcnbyZsaskIkQpM=',
|
||
});
|
||
|
||
function formSubmit() {
|
||
formRef.value
|
||
.validate()
|
||
.then(() => {
|
||
message.success('验证成功');
|
||
})
|
||
.cache(() => {
|
||
message.error('验证失败，请填写完整信息');
|
||
});
|
||
}
|
||
|
||
function resetForm() {
|
||
formRef.value.restoreValidation();
|
||
}
|
||
|
||
function uploadChange(list: string[]) {
|
||
formValue.images = unref(list);
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.BasicForm {
|
||
max-width: 550px;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
padding-top: 20px;
|
||
}
|
||
</style>
|