添加客户管理上传logo

epmet-oper-web/src/assets/scss/modules/c-manage/customer-manage.scss

@@ -38,4 +38,27 @@
             width: 200px;
         };
     }
-}
+}
+.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: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }

epmet-oper-web/src/views/modules/customer-manage/customer-manage.vue

@@ -36,6 +36,17 @@
                 <el-option v-for="(val, key) in organizationLevels" :key="key" :label="key" :value="val"></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item prop="logo" label="客户LOGO">
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadUlr"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload">
+                <img v-if="dataForm2.logo" :src="dataForm2.logo" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+          </el-form-item>
           <el-button type="primary" @click="submitStepHandle">下一步</el-button>
         </el-form>
       </div>
@@ -108,6 +119,7 @@ export default {
         getDataListURL: '/oper/crm/customer/getvalidcustomerlist',
         getDataListIsPage: false
       },
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/customerlogo/upload',
       pcd: 'district',
       pcdError: true,
       centerDialogVisible: false,
@@ -124,6 +136,7 @@ export default {
       customerId: '',
       agencyId: '',
       dataForm2: {
+        logo: '',
         customerName: '',
         organizationLevel: ''
       },
@@ -296,6 +309,22 @@ export default {
       if (this.pcd === 'district') {
         this.pcdError = false
       }
+    },
+    handleAvatarSuccess (res, file) {
+      if (res.code === 0 && res.msg === 'success') this.dataForm2.logo = res.data.url
+      else this.$message.error(res.msg)
+    },
+    beforeAvatarUpload (file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
     }
   },
   computed: {