增加上传医生签名图片预览功能

src/views/system/doctor/Form.vue

@@ -30,11 +30,11 @@
       <el-form-item label="所属科室" prop="departmentName">
         <el-select v-model="formData.departmentName" placeholder="请选择科室">
           <el-option
-              v-for="item in fordepartementData"
-              :key="item.id"
-              :label="item.departmentName"
-              :value="item.departmentName"
-            />
+            v-for="item in fordepartementData"
+            :key="item.id"
+            :label="item.departmentName"
+            :value="item.departmentName"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="医生联系电话" prop="doctorTel">
@@ -45,9 +45,9 @@
       </el-form-item>
       <el-form-item label="医生电子签名" prop="eSignatureUrl">
         <el-image
-          v-model="formData.eSignatureUrl"
+          v-model="formData.esignatureUrl"
           style="width: 160px; height: 120px"
-          :src="formData.eSignatureUrl"
+          :src="formData.esignatureUrl"
           fit="fill"
         />
 
@@ -75,17 +75,23 @@
         </el-select>
       </el-form-item>
       <el-form-item label="机构名称" prop="orgId">
-        <el-select
-          v-model="formData.orgId"
-          placeholder="请选择机构"
-          clearable
-        >
-        <el-option v-for="item in fororglistData" :key="item.orgID" :label="item.orgName" :value="item.orgID" />
+        <el-select v-model="formData.orgId" placeholder="请选择机构" clearable>
+          <el-option
+            v-for="item in fororglistData"
+            :key="item.orgID"
+            :label="item.orgName"
+            :value="item.orgID"
+          />
         </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm"  :disabled="formLoading" style="background-color: rgb(56, 119, 246); font-size: 14; color: rgb(255, 255, 255)">确 定</el-button>
+      <el-button
+        @click="submitForm"
+        :disabled="formLoading"
+        style="background-color: rgb(56, 119, 246); font-size: 14; color: rgb(255, 255, 255)"
+        >确 定</el-button
+      >
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -120,7 +126,7 @@ const formData = ref({
   departmentName: undefined,
   doctorTel: undefined,
   remark: undefined,
-  eSignatureUrl: undefined,
+  esignatureUrl: undefined,
   doctorLevel: undefined,
   orgId: undefined,
   departmentCode: undefined
@@ -141,11 +147,13 @@ const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
+  
   resetForm()
   // 获取机构字典数据
-  fororglistData.value=await OrgApi.getOrglist()
-    //科室字典
-    fordepartementData.value = await DepartmentApi.getDepartmentList()
+  formData.value.esignatureUrl = formData.value.esignatureUrl
+  fororglistData.value = await OrgApi.getOrglist()
+  //科室字典
+  fordepartementData.value = await DepartmentApi.getDepartmentList()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
@@ -202,7 +210,7 @@ const resetForm = () => {
     departmentName: undefined,
     doctorTel: undefined,
     remark: undefined,
-    eSignatureUrl: undefined,
+    esignatureUrl: undefined,
     doctorLevel: undefined,
     orgId: undefined,
     departmentCode: undefined
@@ -232,8 +240,8 @@ const handleChange = (file, fileList) => {
   reader.readAsDataURL(file.raw)
   reader.onload = (event) => {
     imageBase64.value = event.target.result
-    // 在这里可以获取到文件的Base64编码
-    //console.log(base64Data)
+    // 将base64数据同时赋值给formData.eSignatureUrl以实现即时预览
+    formData.value.esignatureUrl = event.target.result
   }
   imagefilename.value = file.name
 }