Activate uploading of icon into groups and service providers

Strides-Admin/src/views/company/detail.vue

@@ -99,6 +99,26 @@
             class="add-text"
             maxlength="5"/>
         </el-form-item>
+        <el-form-item
+          label="Group Logo:">
+          <el-upload
+            class="logo-upload"
+            action
+            :limit="1"
+            :show-file-list="false"
+            :on-remove="file => removeLogo(file)"
+            :http-request="file => uploadLogo(file)"
+            accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
+            v-loading="uploading">
+            <el-image
+              v-if="logos.length > 0"
+              :src="logos[0].url"
+              title="Click to update logo"/>
+            <i v-else
+              class="el-icon-plus avatar-uploader-icon"
+              title="Click to select file"/>
+          </el-upload>
+        </el-form-item>
       </div>
       <div class="content flexcr">
         <div class="buttons">
@@ -131,13 +151,16 @@
 <script>
 import site from '@/http/api/site'
 import api from '@/http/api/group'
+import provider from '../../http/api/provider'
 import setting from '../../settings.js'
+import {baseURL} from '../../http/http'
 import {getCountryList} from '../../utils/index.js'
 export default {
   name: "GroupDetail",
   data() {
     return {
       loading: false,
+      uploading: false,
       form: {
         discount: "",
         groupPk: "",
@@ -147,6 +170,7 @@ export default {
         contactNumber: "",
         loginId: "",
         password: "",
+        groupLogo: "",
         callingCode: setting.defaultCalling,
         countryCode: setting.defaultCountry
       },
@@ -155,6 +179,7 @@ export default {
         countryOptions: [],
         groupType: []
       },
+      logos: [],
       isEdit: false,
       rules: { 
         groupType: [{
@@ -197,7 +222,8 @@ export default {
             }
           }
         }]
-      }
+      },
+      imgAddress: baseURL
     }
   },
   created() {
@@ -245,6 +271,12 @@ export default {
           if (!this.form.callingCode) {
             this.form.callingCode = setting.defaultCalling
           }
+          if (this.form.groupLogo) {
+            this.logos.push({
+              path: this.form.groupLogo,
+              url: this.imgAddress + this.form.groupLogo
+            });
+          }
         }
       }).catch(err => {
         this.$message({
@@ -263,6 +295,11 @@ export default {
     onClickConfirmButton() {
       this.$refs.form.validate(async (valid, fields) => {
         if (valid) {
+          if (this.logos.length > 0) {
+            this.form.groupLogo = this.logos[0].path
+          } else {
+            this.form.groupLogo = "";
+          }
           this.loading = true
           this.isEdit ? this.onUpdateGroup() : this.onAddGroup();
         }
@@ -299,7 +336,35 @@ export default {
       }).finally(() => {
         this.loading = false;
       })
-    }
+    },
+    uploadLogo(file) {
+      this.uploading = true;
+      const formData = new FormData()
+      formData.append('file', file.file)
+      provider.uploadLogo(formData).then(res => {
+        //console.log("upload", res);
+        if (this.logos.length == 0) {
+          this.logos.push({
+            url: ""
+          })
+        }
+        this.logos[0] = ({
+          path: res.data.picturePath,
+          url: this.imgAddress + res.data.picturePath
+        })
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+      }).finally(() => {
+        this.uploading = false;
+      })
+    },
+    removeLogo(file) {
+      this.logos = []
+      this.form.groupLogo = ""
+    },
   }
 }
 </script>
@@ -354,5 +419,26 @@ export default {
       padding: 15px 30px;
     }
   }
+  .logo-upload {
+    width: 148px;
+    height: 148px;
+    position: relative;
+    ::v-deep .el-image {
+      width: 148px;
+      height: 148px;
+      border-radius: 6px;
+    }
+  }
   
+  .avatar-uploader-icon {
+    width: 148px;
+    height: 148px;
+    color: #8c939d;
+    cursor: pointer;
+    font-size: 28px;
+    text-align: center;
+    line-height: 148px;
+    border-radius: 6px;
+    border: 1px dashed #d9d9d9;
+  }
 </style>>