v2.0

web/src/views/comp/upload/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
+        <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
+          <n-form
+            :label-width="80"
+            :model="formValue"
+            :rules="rules"
+            label-placement="left"
+            ref="formRef"
+            class="py-8"
+          >
+            <n-form-item label="预约姓名" path="name">
+              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
+            </n-form-item>
+            <n-form-item label="预约号码" path="mobile">
+              <n-input placeholder="电话号码" v-model:value="formValue.mobile" />
+            </n-form-item>
+
+            <n-form-item label="病例图片" path="images">
+              <BasicUpload
+                :action="`${uploadUrl}/v1.0/files`"
+                :headers="uploadHeaders"
+                :data="{ type: 0 }"
+                name="files"
+                :width="100"
+                :height="100"
+                @uploadChange="uploadChange"
+                v-model:value="formValue.images"
+                helpText="单个文件不超过2MB，最多只能上传10个文件"
+              />
+            </n-form-item>
+            <div style="margin-left: 80px">
+              <n-space>
+                <n-button type="primary" @click="formSubmit">提交预约</n-button>
+                <n-button @click="resetForm">重置</n-button>
+              </n-space>
+            </div>
+          </n-form>
+        </n-grid-item>
+      </n-grid>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, reactive } from 'vue';
+  import { useMessage } from 'naive-ui';
+  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 message = useMessage();
+  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: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('验证成功');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function resetForm() {
+    formRef.value.restoreValidation();
+  }
+
+  function uploadChange(list: string[]) {
+    formValue.images = unref(list);
+  }
+</script>