ソースを参照

'logo上传相关服务'

zhangyu 4 年 前
コミット
1545ee1a90

+ 15 - 0
src/api/image-service/index.js

@@ -0,0 +1,15 @@
+/*
+ * @Author: zhangyu
+ * @Date: 2020-05-14 18:25:43
+ * @Info: 
+ * @LastEditTime: 2020-05-14 18:34:43
+ */
+import {imageService} from '@/api/scan/config'
+import http from '@/api/scan/httpUtil'
+
+//图片上传接口
+export function imageUpload(param, success) {
+  let arrayBuffer = param.arrayBuffer
+  let url = `${imageService}/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${param.key}`;
+  http.postJson(url, arrayBuffer, success)
+}

+ 2 - 1
src/api/scan/config.js

@@ -1 +1,2 @@
-export const baseUrl = '/api';
+export const baseUrl = '/api';
+export const imageService = '/image-service';

+ 9 - 7
src/components/brand/sagaBrand.vue

@@ -2,7 +2,7 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 16:06:03
  * @Info:
- * @LastEditTime: 2020-05-13 18:45:02
+ * @LastEditTime: 2020-05-14 14:06:42
  -->
 <template>
   <div class="saga-brand-box" ref="brandBox">
@@ -69,7 +69,7 @@ export default {
   components: {},
   created() {
     // this.brandList = brandList
-    this.getBrandData({});
+    this.getBrandData();
   },
   mounted() {
     this.boxWidth = this.$refs.brandBox.clientWidth
@@ -100,16 +100,18 @@ export default {
     handleCommand(command) { //切换排序方式
       this.sortName = this.sortMap[command]
       this.sort = command
-      this.getBrandData({Type: this.sort})
+      this.getBrandData()
     },
     ChangeKeyWord(keyWord) { //品牌检索
+      this.getBrandData()
+    },
+    getBrandData() { //获取品牌接口
       let params = {
-        Filters: `BrandCname contain '${keyWord}' || BrandName contain '${keyWord}'`,
         Type: this.sort
       }
-      this.getBrandData(params)
-    },
-    getBrandData(params) { //获取品牌接口
+      if (this.keyWord) {
+        params.Filters = `BrandCname contain '${this.keyWord}' || BrandName contain '${this.keyWord}'`
+      }
       brandQuery(params, res => {
         this.brandList = res.Content[0]
       })

+ 88 - 24
src/components/business/addBrand.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="brand.BrandID?'品牌修改':'添加品牌'" :visible.sync="outerVisible" :before-close="handleClose" class="add-brand" width="600px">
+  <el-dialog :title="brand.BrandID?'品牌修改':'添加品牌'" :visible.sync="outerVisible" class="add-brand" width="600px">
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" class="reset-form">
       <el-form-item label="中文名称:" prop="BrandCname">
         <el-input v-model="ruleForm.BrandCname" placeholder="请输入" />
@@ -9,9 +9,9 @@
       </el-form-item>
       <el-form-item label="品牌LOGO:">
         <div class="logo">
-          <el-upload style="flex: 1" class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
+          <el-upload style="flex: 1" class="avatar-uploader" action="#" :http-request="uploadAndSubmit"
             :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-            <img v-if="ruleForm.BrandLogo" :src="ruleForm.BrandLogo" class="avatar">
+            <img v-if="ruleForm.BrandLogo" :src="`/image-service/common/image_get?systemId=dataPlatform&key=${ruleForm.BrandLogo}`" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
           <span class="imgTip">支持格式GIF、JPG、JPEG、PNG,文件80K以内,建议尺寸80PX*80PX</span>
@@ -41,6 +41,7 @@
 </template>
 <script>
 import { brandCreate, brandDelete, brandUpdate } from "@/api/brand"
+import { imageUpload } from "@/api/image-service"
 export default {
   name: "addBrand",
   props: {
@@ -53,7 +54,6 @@ export default {
     return {
       outerVisible: false,
       innerVisible: false,
-      imageUrl: '',
       ruleForm: {
         BrandCname: '',
         BrandName: '',
@@ -61,38 +61,103 @@ export default {
       },
       rules: {
         BrandCname: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
-
-      }
+      },
+      key: "",//上传图片的标识
     }
   },
   methods: {
     handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw);
+      this.ruleForm.BrandLogo = this.key
+      // this.imageUrl = URL.createObjectURL(file.raw);
+    },
+    uploadAndSubmit(item, key) {
+      let file = item.file;
+      // try sending
+      let reader = new FileReader();
+
+      let vm = this;
+
+      let fileType = file.name.split(".");
+      let type = fileType[fileType.length - 1];
+      let CreateTime = tools.formatDate(new Date(file.lastModified))
+
+      let uploadKey = file.uid
+      if (!!key) {
+        uploadKey = key
+      }
+
+      reader.onloadstart = function () {
+        // 这个事件在读取开始时触发
+      };
+      reader.onprogress = function (p) {
+        // 这个事件在读取进行中定时触发
+      };
+
+      reader.onload = function () {
+        // 这个事件在读取成功结束后触发
+      };
+      reader.onloadend = function () {
+        // 这个事件在读取结束后,无论成功或者失败都会触发
+        if (reader.error) {
+        } else {
+          var xhr = new XMLHttpRequest();
+          xhr.open(
+            "POST",
+            vm.imageUploadUrl + "&key=" + uploadKey + "." + type
+          );
+          xhr.send(reader.result);
+          xhr.onreadystatechange = function () {
+            if (xhr.readyState == 4) {
+              if (xhr.status == 200) {
+                vm.$emit("change", vm.imagesArr, vm.defined, vm.videoPicArr);
+              }
+            }
+          };
+        }
+      };
+      reader.readAsArrayBuffer(file);
     },
     beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg';
-      const isLt2M = file.size / 1024 / 1024 < 2;
+      const typeList = ['image/jpeg','image/png','image/gif']
+      const isType = typeList.some(item => {return item === file.type});
+      const isLt80K = file.size / 1024 <= 80;
+      //获取文件后缀名
+      let fileType = file.name.split('.')
+      let type = fileType[fileType.length -1]
 
-      if (!isJPG) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
+      this.key = `${file.uid}.${type}`
+      this.$refs.imgUpload.action = `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${this.key}`
+
+      if (!isType) {
+        this.$message.error('上传头像图片格式不支持!')
       }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+      if (!isLt80K) {
+        this.$message.error('上传头像图片大小不能超过 80K!')
       }
-      return isJPG && isLt2M;
+      return isType && isLt80K;
     },
     submitForm(formName) { //(添加/修改)
       this.$refs[formName].validate((valid) => {
         if (valid) {
+          let params = {
+            Content: [{
+              BrandCname: this.ruleForm.BrandCname,
+              BrandName: this.ruleForm.BrandName,
+              BrandLogo: this.ruleForm.BrandLogo,
+            }]
+          }
           if (this.brand.BrandID) { //修改品牌
+            params.Content[0].BrandID = this.brand.BrandID
             brandUpdate(params, res => {
               this.outerVisible = false
-              this.$message.sucsee('保存成功!')
+              this.$emit("refresh")
+              this.$message.success('保存成功!')
             })
           } else { //添加品牌
             brandCreate(params, res => {
               this.outerVisible = false
-              this.$message.sucsee('添加成功!')
+              this.$emit("refresh")
+              this.$message.success('添加成功!')
             })
           }
         } else {
@@ -102,24 +167,23 @@ export default {
       });
     },
     handleClickDelete() { //删除品牌
-      brandDelete({BrandID: this.BrandID}, res => {
+      brandDelete([{BrandID: this.brand.BrandID}], res => {
         this.innerVisible = false
         this.outerVisible = false
-        this.$message.sucsee('删除成功!')
+        this.$emit("refresh")
+        this.$message.success('删除成功!')
       })
     },
-    handleClose() { //关闭弹窗回调
-      this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
-      this.outerVisible = false
-    },
   },
   watch: {
-    'brand.BrandID': {
+    outerVisible: {
       handler(newName, oldName) {
-        if (this.brand.BrandID) {
+        if (this.brand.BrandID && newName) {
           this.ruleForm.BrandCname = this.brand.BrandCname
           this.ruleForm.BrandName = this.brand.BrandName || ''
           this.ruleForm.BrandLogo = this.brand.BrandLogo || ''
+        } else if (!newName) {
+          this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
         }
       },
       immediate: true,

+ 1 - 1
src/framework/layout/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <div id='page-main'>
-    <page-header style="position:fixed;width:100%;left:0;top:0;z-index:1500;"></page-header>
+    <page-header style="position:fixed;width:100%;left:0;top:0;z-index:1000;"></page-header>
     <div class='page-container'>
       <!-- 首页(固定高度,无滚动) -->
       <div v-if='$route.path == "/"' style="height:calc(100% - 48px);margin-top: 48px;">

+ 9 - 4
src/views/brand/index.vue

@@ -2,15 +2,15 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 15:55:30
  * @Info:
- * @LastEditTime: 2020-05-13 17:37:58
+ * @LastEditTime: 2020-05-14 10:44:59
  -->
 <template>
   <div>
     <saga-toolbar @addbrand="handleAddBrand"></saga-toolbar>
     <div style="margin-top: 90px;">
-      <saga-brand pageType="brand" @updatebrand="handleAddBrand"></saga-brand>
+      <saga-brand ref="sagaBrand" pageType="brand" @updatebrand="handleAddBrand"></saga-brand>
     </div>
-    <addBrand ref="addBrand" :brand="brand"></addBrand>
+    <addBrand ref="addBrand" :brand="brand" @refresh="brandListRefresh"></addBrand>
   </div>
 </template>
 
@@ -33,7 +33,7 @@ export default {
     }
   },
   methods: {
-    handleAddBrand(brand) {
+    handleAddBrand(brand) { //(添加/修改/删除品牌弹窗)
       if (brand && brand.BrandID) {
         this.brand = brand
       } else {
@@ -41,6 +41,11 @@ export default {
       }
       this.$refs.addBrand.outerVisible = true
     },
+    brandListRefresh() { //刷新品牌列表
+      //清空搜索关键字
+      this.$refs.sagaBrand.keyWord = ""
+      this.$refs.sagaBrand.getBrandData()
+    },
   }
 }
 </script>