fix Bug Features CHANGELOG.ms

src/views/form/basicForm/index.vue

@@ -9,12 +9,12 @@
       <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"
+              :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="输入姓名"/>
@@ -27,17 +27,17 @@
             </n-form-item>
             <n-form-item label="预约医生" path="doctor">
               <n-select
-                placeholder="请选择预约医生"
-                :options="doctorList"
-                v-model:value="formValue.doctor"
+                  placeholder="请选择预约医生"
+                  :options="doctorList"
+                  v-model:value="formValue.doctor"
               />
             </n-form-item>
             <n-form-item label="预约事项" path="matter">
               <n-select
-                placeholder="请选择预约事项"
-                :options="matterList"
-                v-model:value="formValue.matter"
-                multiple
+                  placeholder="请选择预约事项"
+                  :options="matterList"
+                  v-model:value="formValue.matter"
+                  multiple
               />
             </n-form-item>
             <n-form-item label="性别" path="sex">
@@ -50,11 +50,23 @@
             </n-form-item>
             <n-form-item label="预约备注" path="remark">
               <n-input
-                v-model:value="formValue.remark"
-                type="textarea"
-                placeholder="请输入预约备注"
+                  v-model:value="formValue.remark"
+                  type="textarea"
+                  placeholder="请输入预约备注"
               />
             </n-form-item>
+            <n-form-item label="图片" path="img">
+              <BasicUpload
+                  :action="`${uploadUrl}/v1.0/files`"
+                  :headers="uploadHeaders"
+                  :data="{ type: 0 }"
+                  name="files"
+                  :width="100"
+                  :height="100"
+                  @uploadChange="uploadChange"
+                  v-model:value="uploadList"
+                  helpText="单个文件不超过20MB，最多只能上传10个文件"/>
+            </n-form-item>
             <div style="margin-left:80px">
               <n-space>
                 <n-button type="primary" @click="formSubmit">提交预约</n-button>
@@ -69,8 +81,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, reactive, toRefs, } from 'vue'
 import { useMessage } from 'naive-ui'
+import { BasicUpload } from '@/components/Upload'
+import { useGlobSetting } from '@/hooks/setting'
+
+const globSetting = useGlobSetting()
 
 const matterList = [
   {
@@ -102,14 +118,45 @@ const doctorList = [
   }
 ]
 
-export default defineComponent({
-  setup() {
-    const formRef = ref(null)
-    const message = useMessage()
+const rules = {
+  name: {
+    required: true,
+    message: '请输入预约姓名',
+    trigger: 'blur'
+  },
+  remark: {
+    required: true,
+    message: '请输入预约备注',
+    trigger: 'blur'
+  },
+  mobile: {
+    required: true,
+    message: '请输入预约电话号码',
+    trigger: ['input']
+  },
+  datetime: {
+    required: true,
+    type: 'number',
+    message: '请选择预约时间',
+    trigger: ['blur', 'change'],
+  },
+  doctor: {
+    required: true,
+    type: 'number',
+    message: '请选择预约医生',
+    trigger: 'change'
+  },
+}
 
-    return {
-      formRef,
-      formValue: ref({
+export default defineComponent({
+  components: { BasicUpload },
+  setup() {
+    const formRef: any = ref(null)
+    const message = useMessage()
+    const { uploadUrl } = globSetting
+
+    const state = reactive({
+      formValue: {
         name: '',
         mobile: '',
         remark: '',
@@ -117,50 +164,46 @@ export default defineComponent({
         matter: null,
         doctor: null,
         datetime: [],
-      }),
-      rules: {
-        name: {
-          required: true,
-          message: '请输入预约姓名',
-          trigger: 'blur'
-        },
-        remark: {
-          required: true,
-          message: '请输入预约备注',
-          trigger: 'blur'
-        },
-        mobile: {
-          required: true,
-          message: '请输入预约电话号码',
-          trigger: ['input']
-        },
-        datetime: {
-          required: true,
-          type: 'number',
-          message: '请选择预约时间',
-          trigger: ['blur', 'change'],
-        },
-        doctor: {
-          required: true,
-          type: 'number',
-          message: '请选择预约医生',
-          trigger: 'change'
-        },
       },
+      //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
+      uploadList: [
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      ],
+      uploadHeaders: {
+        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[]) {
+      console.log(list)
+    }
+
+    return {
+      ...toRefs(state),
+      formRef,
+      uploadUrl,
+      rules,
       doctorList,
       matterList,
-      formSubmit(e) {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功')
-          } else {
-            message.error('验证失败，请填写完整信息')
-          }
-        })
-      },
-      resetForm() {
-        formRef.value.restoreValidation()
-      }
+      formSubmit,
+      resetForm,
+      uploadChange
     }
   }
 })