1、优化页面

src/components/ImageUpload/index.vue

@@ -88,13 +88,9 @@ export default {
           // 首先将值转为数组
           const list = Array.isArray(val) ? val : this.value.split(',');
           // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
+          this.fileList = list.map((item, index) => {
             if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: item, url: item };
-              } else {
-                  item = { name: item, url: item };
-              }
+              return { name: `\u56fe\u7247${index + 1}`, url: item };
             }
             return item;
           });
@@ -129,8 +125,7 @@ export default {
     },
     // 上传成功回调
     handleUploadSuccess(res) {
-      console.log(res)
-      this.fileList.push({ name: res.url, url: res.url });
+      this.fileList.push({ name: `\u56fe\u7247${this.fileList.length + 1}`, url: res.url });
       this.$emit("input", this.listToString(this.fileList));
       this.loading.close();
     },

src/views/his/doctor/type1.vue

@@ -436,12 +436,19 @@
                   </el-form-item>
               </el-col>
         </el-row>
-           <el-form-item label="资格证" prop="certificateImages">
-             <ImageUpload v-model="form.certificateImages" type="image" :num="10" :width="150" :height="150" />
-           </el-form-item>
-           <el-form-item label="执业证" prop="practiseImages">
-             <ImageUpload v-model="form.practiseImages" type="image" :num="10" :width="150" :height="150" />
-           </el-form-item>
+           <div class="doc-upload-panel">
+             <div class="doc-upload-panel__header">
+               <i class="el-icon-postcard"></i>
+               <span class="doc-upload-panel__title">资质证件</span>
+               <span class="doc-upload-panel__desc">请上传清晰、完整的证件照片</span>
+             </div>
+             <el-form-item label="资格证" prop="certificateImages">
+               <ImageUpload v-model="form.certificateImages" type="image" :num="10" :width="150" :height="150" />
+             </el-form-item>
+             <el-form-item label="执业证" prop="practiseImages">
+               <ImageUpload v-model="form.practiseImages" type="image" :num="10" :width="150" :height="150" />
+             </el-form-item>
+           </div>
             <el-row>
                   <el-col :span="12">
                     <el-form-item label="身份证号" prop="idCard">
@@ -454,70 +461,51 @@
                       </el-form-item>
                   </el-col>
             </el-row>
-            <el-row>
-                  <el-col :span="12">
-                      <el-form-item label="身份证正面" prop="idCardFrontUrl">
-                         <el-upload id="sf"
-                            v-model="form.idCardFrontUrl"
-                            class="avatar-uploader"
-                            :action="fruploadUrl"
-                            :headers="uploadHeaders"
-                            :show-file-list="false"
-                            :on-success="frhandleAvatarSuccess"
-                            :before-upload="beforeAvatarUpload">
-                            <img v-if="form.idCardFrontUrl" :src="form.idCardFrontUrl" class="avatar" width="150px">
-                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
-                      </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                        <el-form-item label="工作照" prop="avatar">
-                           <el-upload
-                              v-model="form.avatar"
-                              class="avatar-uploader"
-                              :action="avataruploadUrl"
-                              :headers="uploadHeaders"
-                              :show-file-list="false"
-                              :on-success="avatarhandleAvatarSuccess"
-                              :before-upload="beforeAvatarUpload">
-                              <img v-if="form.avatar" :src="form.avatar" class="avatar" width="150px" >
-                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                          </el-upload>
-                        </el-form-item>
-                  </el-col>
-            </el-row>
-            <el-row>
-                  <el-col :span="12">
-                      <el-form-item label="身份证反面" prop="idCardBackUrl">
-                        <el-upload id="sf"
-                         v-model="form.idCardBackUrl"
-                         class="avatar-uploader"
-                         :action="bauploadUrl"
-                         :headers="uploadHeaders"
-                         :show-file-list="false"
-                         :on-success="bahandleAvatarSuccess"
-                         :before-upload="beforeAvatarUpload">
-                         <img v-if="form.idCardBackUrl" :src="form.idCardBackUrl" class="avatar" width="150px">
-                         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
-                      </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                      <el-form-item label="医生签名" prop="signUrl">
-                        <el-upload id="sign"
-                         v-model="form.signUrl"
-                         class="avatar-uploader"
-                         :action="bauploadUrl"
-                         :headers="uploadHeaders"
-                         :show-file-list="false"
-                         :on-success="signhandleAvatarSuccess"
-                         :before-upload="beforeAvatarUpload">
-                         <img v-if="form.signUrl" :src="form.signUrl" class="avatar" width="150px">
-                         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
-                      </el-form-item>
-                  </el-col>
-            </el-row>
+            <div class="doc-upload-panel">
+              <div class="doc-upload-panel__header">
+                <i class="el-icon-camera"></i>
+                <span class="doc-upload-panel__title">身份与形象</span>
+                <span class="doc-upload-panel__desc">支持 jpg/png 格式，单张不超过 1MB</span>
+              </div>
+              <el-row :gutter="24" class="doc-upload-grid">
+                <el-col :span="12">
+                  <el-form-item label="身份证正面" prop="idCardFrontUrl">
+                    <SingleImageUpload
+                      v-model="form.idCardFrontUrl"
+                      placeholder="上传身份证正面"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="工作照" prop="avatar">
+                    <SingleImageUpload
+                      v-model="form.avatar"
+                      placeholder="上传工作照"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="24" class="doc-upload-grid">
+                <el-col :span="12">
+                  <el-form-item label="身份证反面" prop="idCardBackUrl">
+                    <SingleImageUpload
+                      v-model="form.idCardBackUrl"
+                      placeholder="上传身份证反面"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="医生签名" prop="signUrl">
+                    <SingleImageUpload
+                      v-model="form.signUrl"
+                      placeholder="上传医生签名"
+                      tip="透明背景效果更佳"
+                      :contain="true"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
 
         <el-row>
               <el-col :span="12">
@@ -758,11 +746,11 @@ import doctorinquiryDetails from '../../components/his/doctorinquiryDetails.vue'
 import doctorDetails from '../../components/his/doctorDetails.vue';
 import { Form } from "element-ui";
 import ImageUpload from '@/components/ImageUpload'
+import SingleImageUpload from '@/components/SingleImageUpload'
 import { listStore } from "@/api/his/storeProduct";
-import { getToken } from "@/utils/auth";
 export default {
   name: "Doctor",
-  components: { doctorDetails,doctorinquiryDetails,ImageUpload },
+  components: { doctorDetails, doctorinquiryDetails, ImageUpload, SingleImageUpload },
   data() {
     return {
       doctorName: {name:"1"},
@@ -773,15 +761,6 @@ export default {
         toId:null,
       },
       followDoctorList:[],
-      //身份证
-      fruploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      bauploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      //头像
-      avataruploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      certificateBack:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      practise:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      practiseBack:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
       baseUrl: process.env.VUE_APP_BASE_API,
       orOptions: [],
 	  storeOPtions: [],
@@ -979,13 +958,6 @@ export default {
        });
       this.getAllAiRoleList();
   },
-  computed: {
-    uploadHeaders() {
-      return {
-        Authorization: "Bearer " + getToken(),
-      };
-    },
-  },
   methods: {
      getlistdocuser(){
          listdocuser(this.doctorName).then(response => {
@@ -1083,87 +1055,6 @@ export default {
           this.citys=res.data;
         })
     },
-    avatarhandleAvatarSuccess(res, file) {
-            if(res.code==200){
-            this.form.avatar=res.url;
-            this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-     },
-    frhandleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.idCardFrontUrl=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    bahandleAvatarSuccess(res, file) {
-                if(res.code==200){
-                  this.form.idCardBackUrl=res.url;
-                  this.$forceUpdate();
-                }
-                else{
-                  this.msgError(res.msg);
-                }
-     },
-     signhandleAvatarSuccess(res, file) {
-                if(res.code==200){
-                  this.form.signUrl=res.url;
-                  this.$forceUpdate();
-                }
-                else{
-                  this.msgError(res.msg);
-                }
-     },
-
-    handleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.certificateImages=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handleCertificateBackSuccess(res, file) {
-            if(res.code==200){
-              this.form.certificateImagesBack=res.url;
-                 this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handlePractiseSuccess(res, file) {
-            if(res.code==200){
-              this.form.practiseImages=res.url;
-              console.log(this.form)
-               this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handlePractiseBackSuccess(res, file) {
-            if(res.code==200){
-              this.form.practiseImagesBack=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    beforeAvatarUpload(file) {
-          const isLt1M = file.size / 1024 / 1024 < 1;
-          if (!isLt1M) {
-            this.$message.error('上传图片大小不能超过 1MB!');
-          }
-          return   isLt1M;
-    },
     /** 查询科室列表 */
      getdeplist() {
        listDepartment().then(response => {
@@ -1487,45 +1378,52 @@ export default {
   }
 };
 </script>
-<style>
-  .el-upload .el-upload-list__item-thumbnail img {
-    width: 150px;
-    height: 150px;
+<style scoped lang="scss">
+.pStar {
+  padding-top: 10px;
+}
+
+.doc-upload-panel {
+  margin-bottom: 20px;
+  padding: 16px 20px 4px;
+  background: #fafbfc;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ebeef5;
+
+    i {
+      font-size: 18px;
+      color: #409eff;
+    }
   }
-  .pStar{
-    padding-top: 10px;
+
+  &__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
   }
-  .avatar-uploader .el-upload {
-     border: 1px dashed #d9d9d9;
-     border-radius: 6px;
-     cursor: pointer;
-     position: relative;
-     overflow: hidden;
-   }
-   .avatar-uploader .el-upload:hover {
-     border-color: #409EFF;
-   }
-   .avatar-uploader-icon {
-     font-size: 28px;
-     color: #8c939d;
-     width: 150px;
-     height: 150px;
-     line-height: 150px;
-     text-align: center;
-   }
-    #sf .avatar{
-      min-width: 240px;
-      min-height: 150px;
-      display: block;
-    }
-    #sign .avatar{
-      min-width: 120px;
-      min-height: 80px;
-      display: block;
+
+  &__desc {
+    font-size: 12px;
+    color: #909399;
+    margin-left: 4px;
+  }
+
+  ::v-deep .el-form-item:last-child {
+    margin-bottom: 16px;
+  }
+
+  .doc-upload-grid {
+    ::v-deep .el-form-item__content {
+      line-height: normal;
     }
-    .avatar {
-         min-width: 150px;
-         min-height: 150px;
-         display: block;
-     }
+  }
+}
 </style>

src/views/his/doctor/type2.vue

@@ -347,12 +347,19 @@
                 </el-form-item>
             </el-col>
       </el-row>
-          <el-form-item label="资格证" prop="certificateImages">
-            <ImageUpload v-model="form.certificateImages" type="image" :num="10" :width="150" :height="150" />
-          </el-form-item>
-          <el-form-item label="执业证" prop="practiseImages">
-            <ImageUpload v-model="form.practiseImages" type="image" :num="10" :width="150" :height="150" />
-          </el-form-item>
+          <div class="doc-upload-panel">
+            <div class="doc-upload-panel__header">
+              <i class="el-icon-postcard"></i>
+              <span class="doc-upload-panel__title">资质证件</span>
+              <span class="doc-upload-panel__desc">请上传清晰、完整的证件照片</span>
+            </div>
+            <el-form-item label="资格证" prop="certificateImages">
+              <ImageUpload v-model="form.certificateImages" type="image" :num="10" :width="150" :height="150" />
+            </el-form-item>
+            <el-form-item label="执业证" prop="practiseImages">
+              <ImageUpload v-model="form.practiseImages" type="image" :num="10" :width="150" :height="150" />
+            </el-form-item>
+          </div>
           <el-row>
                 <el-col :span="12">
                   <el-form-item label="身份证号" prop="idCard">
@@ -365,70 +372,51 @@
                   </el-form-item>
                 </el-col>
           </el-row>
-          <el-row>
-                <el-col :span="12">
-                    <el-form-item label="身份证正面" prop="idCardFrontUrl">
-                       <el-upload
-                                  v-model="form.idCardFrontUrl"
-                                  class="avatar-uploader"
-                                  :action="FruploadUrl"
-                                  :headers="uploadHeaders"
-                                  :show-file-list="false"
-                                  :on-success="FrhandleAvatarSuccess"
-                                  :before-upload="beforeAvatarUpload">
-                                  <img v-if="form.idCardFrontUrl" :src="form.idCardFrontUrl" class="avatar" width="300px">
-                                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                      </el-upload>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                      <el-form-item label="工作照" prop="avatar">
-                         <el-upload
-                                    v-model="form.avatar"
-                                    class="avatar-uploader"
-                                    :action="avataruploadUrl"
-                                    :headers="uploadHeaders"
-                                    :show-file-list="false"
-                                    :on-success="avatarhandleAvatarSuccess"
-                                    :before-upload="beforeAvatarUpload">
-                                    <img v-if="form.avatar" :src="form.avatar" class="avatar" width="200px" >
-                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
-                      </el-form-item>
-                </el-col>
-          </el-row>
-          <el-row>
-                <el-col :span="12">
-                    <el-form-item label="身份证反面" prop="idCardBackUrl">
-                       <el-upload
-                                  v-model="form.idCardBackUrl"
-                                  class="avatar-uploader"
-                                  :action="BauploadUrl"
-                                  :headers="uploadHeaders"
-                                  :show-file-list="false"
-                                  :on-success="BahandleAvatarSuccess"
-                                  :before-upload="beforeAvatarUpload">
-                                  <img v-if="form.idCardBackUrl" :src="form.idCardBackUrl" class="avatar" width="300px">
-                                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                      </el-upload>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item label="医生签名" prop="signUrl">
-                    <el-upload id="sign"
-                               v-model="form.signUrl"
-                               class="avatar-uploader"
-                               :action="bauploadUrl"
-                               :headers="uploadHeaders"
-                               :show-file-list="false"
-                               :on-success="signhandleAvatarSuccess"
-                               :before-upload="beforeAvatarUpload">
-                      <img v-if="form.signUrl" :src="form.signUrl" class="avatar" width="150px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                    </el-upload>
-                  </el-form-item>
-                </el-col>
-          </el-row>
+          <div class="doc-upload-panel">
+            <div class="doc-upload-panel__header">
+              <i class="el-icon-camera"></i>
+              <span class="doc-upload-panel__title">身份与形象</span>
+              <span class="doc-upload-panel__desc">支持 jpg/png 格式，单张不超过 1MB</span>
+            </div>
+            <el-row :gutter="24" class="doc-upload-grid">
+              <el-col :span="12">
+                <el-form-item label="身份证正面" prop="idCardFrontUrl">
+                  <SingleImageUpload
+                    v-model="form.idCardFrontUrl"
+                    placeholder="上传身份证正面"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="工作照" prop="avatar">
+                  <SingleImageUpload
+                    v-model="form.avatar"
+                    placeholder="上传工作照"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24" class="doc-upload-grid">
+              <el-col :span="12">
+                <el-form-item label="身份证反面" prop="idCardBackUrl">
+                  <SingleImageUpload
+                    v-model="form.idCardBackUrl"
+                    placeholder="上传身份证反面"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="医生签名" prop="signUrl">
+                  <SingleImageUpload
+                    v-model="form.signUrl"
+                    placeholder="上传医生签名"
+                    tip="透明背景效果更佳"
+                    :contain="true"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
 
       <el-row>
             <el-col :span="12">
@@ -541,21 +529,13 @@ import{listDepartment} from "@/api/his/disease";
 import{listAllHospital} from "@/api/his/hospital";
 import {getCitys} from "@/api/store/city";
 import pharmacistDetails from '../../components/his/pharmacistDetails.vue';
-import { getToken } from "@/utils/auth";
+import SingleImageUpload from '@/components/SingleImageUpload';
 export default {
   name: "pharmacist",
-  components: { pharmacistDetails },
+  components: { pharmacistDetails, SingleImageUpload },
   data() {
     return {
-      FruploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      BauploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      avataruploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
       baseUrl: process.env.VUE_APP_BASE_API,
-      certificateBack:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      practise:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      practiseBack:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      bauploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
       orOptions: [],
       isauditOptions: [],
       positionOptions: [],
@@ -739,13 +719,6 @@ export default {
     this.getdeplist();
     this.getHospitaldeplist();
   },
-  computed: {
-    uploadHeaders() {
-      return {
-        Authorization: "Bearer " + getToken(),
-      };
-    },
-  },
   methods: {
 
     remoteMethod(rows){
@@ -778,86 +751,6 @@ export default {
           this.citys=res.data;
         })
     },
- avatarhandleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.avatar=res.url;
-            this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-     },
-    FrhandleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.idCardFrontUrl=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    BahandleAvatarSuccess(res, file) {
-                if(res.code==200){
-                  this.form.idCardBackUrl=res.url;
-                  this.$forceUpdate();
-                }
-                else{
-                  this.msgError(res.msg);
-                }
-     },
-    signhandleAvatarSuccess(res, file) {
-      if(res.code==200){
-        this.form.signUrl=res.url;
-        this.$forceUpdate();
-      }
-      else{
-        this.msgError(res.msg);
-      }
-    },
-    handleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.certificateImages=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handleCertificateBackSuccess(res, file) {
-            if(res.code==200){
-              this.form.certificateImagesBack=res.url;
-                 this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handlePractiseSuccess(res, file) {
-            if(res.code==200){
-              this.form.practiseImages=res.url;
-              console.log(this.form)
-               this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handlePractiseBackSuccess(res, file) {
-            if(res.code==200){
-              this.form.practiseImagesBack=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    beforeAvatarUpload(file) {
-          const isLt1M = file.size / 1024 / 1024 < 1;
-          if (!isLt1M) {
-            this.$message.error('上传图片大小不能超过 1MB!');
-          }
-          return   isLt1M;
-        },
     /** 查询科室列表 */
     getdeplist() {
        listDepartment().then(response => {
@@ -1136,32 +1029,52 @@ export default {
   }
 };
 </script>
-<style>
-  .pStar{
-    padding-top: 10px;
+<style scoped lang="scss">
+.pStar {
+  padding-top: 10px;
+}
+
+.doc-upload-panel {
+  margin-bottom: 20px;
+  padding: 16px 20px 4px;
+  background: #fafbfc;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ebeef5;
+
+    i {
+      font-size: 18px;
+      color: #409eff;
+    }
   }
-  .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
+
+  &__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  &__desc {
+    font-size: 12px;
+    color: #909399;
+    margin-left: 4px;
+  }
+
+  ::v-deep .el-form-item:last-child {
+    margin-bottom: 16px;
   }
-  .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
 
-  .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
+  .doc-upload-grid {
+    ::v-deep .el-form-item__content {
+      line-height: normal;
     }
-  #sign .avatar{
-    min-width: 120px;
-    min-height: 80px;
-    display: block;
   }
+}
 </style>