商品管理优化

src/views/goods/create-good.vue

@@ -45,6 +45,7 @@
                     maxlength="1000"
                     show-word-limit
                 ></el-input>
+              <span class="word-tip">此文案可摘取药品说明书【功能主治】or【适应症】</span>
                 <!-- <span class="word-num">{{(formData.goodsDescription).replace(/\s+/g,"").length}}/1000</span> -->
               </el-col>
             </el-form-item>
@@ -56,6 +57,8 @@
                   :show-file-list="isShowFileList"
                   action="#"
                   :before-upload="beforeUploadPic"
+                  multiple
+                
               >
                 <div class="file-pics" v-if="fileGoodsList.length > 0" :key="index" v-for="(item,index) in fileGoodsList">
                   <img :src="item.url" @mouseover.stop="headIndex=index" class="bg-img"/>
@@ -78,6 +81,37 @@
               <p class="upload-message" v-if="!isgoodsImages">请上传商品头图</p>
               <!-- <p class="upload-message" v-if="uploadImgMessage1">请上传商品头图</p> -->
             </el-form-item>
+
+            <el-form-item label="商品介绍视频" class="required-label label-video">
+              <el-upload
+                  accept=".mp4"
+                  :on-remove="handleRemoveVideo"
+                  :file-list="videoList"
+                  :before-upload="beforeVideoUpload"
+                  :show-file-list="false"
+                  :disabled="videoList.length == 1"
+                  :limit="1"
+                  action="#"                    
+                  class="bg-uploader"                 
+              >
+                
+                <video id="introVideoLecture" :src="videoModel.videoFullPath" controls preload style="width: 100%;" v-if="videoList.length == 1">
+                    视频
+                </video>               
+                <img  class="bg-img" src="../../assets/image/small.png" v-if="videoList.length <1"/>
+                <div class="limit-text" v-if="videoList.length <1">
+                  <p>建议大小：20M以内</p>
+                  <p>仅支持MP4格式</p>               
+                </div>              
+              </el-upload>
+               
+              <el-progress :text-inside="true" :stroke-width="16" :percentage="uploadProgress" status="success" class="video-progress"
+                v-show="uploadProgress>0&&uploadProgress<100">
+            </el-progress>
+            <p class="upload-message" v-if="!isgoodsVideo">请上传商品介绍视频</p>
+             <el-button class="dl-video" icon="el-icon-delete" circle @click="deleteVideo" v-if="videoList.length == 1"></el-button>
+            </el-form-item>
+
             <el-form-item label="商品类型" prop="goodsType">
               <el-select
                   v-model="formData.goodsType"
@@ -867,7 +901,8 @@
   import BreadCrumb from "@/components/breadcrumb.vue";
   let vm = null;
   import { openLoading, closeLoading } from "../../utils/utils";
-  import { doUpload, getFilePath } from "../../utils/qiniu-util";
+  import { isEmptyUtils } from "@/utils/index";
+  import { doUpload, getFilePath, createFilePath } from "../../utils/qiniu-util";
   import { updateGoods ,updateStock,dosageAll,getDeparts,getGoodsList, getGoodDetails, updateGoodsV2, getHospitalInfoByStoreId, getCheckPackageIdList, getTypeCodeList } from '@/utils/goods';
   import { getStoreAdressRepot } from "@/utils/shop";
   import Cropper from '@/components/common/cropper.vue'
@@ -1003,7 +1038,14 @@
           title:"限购条件"
         },
         storeType: 1, //1: "供货商",2: "小药房",3: "医生小店"
-        hasRepoFlag: 0 //店铺是否有退货地址
+        hasRepoFlag: 0, //店铺是否有退货地址
+        videoList: [],//视频上传文件列表
+        videoModel:{
+            videoFullPath: ''
+        },
+        sumFile: 0,
+        uploadProgress:0, // 上传视频进度条
+        isgoodsVideo: true
       }
     },
     created() {
@@ -1147,6 +1189,11 @@
           this.fileIntrList = this.getImges(goodsList[0].medicImgList,2);
           this.formData.stock = this.formData.goodsStock;
           this.formData.otc1 = this.formData.otc ? '1' : '0';
+          if (goodsList[0].goodsVideoList) {
+              this.videoList.push(goodsList[0].goodsVideoList);
+              this.videoModel.fullPath = this.videoList[0].goodsImgUrl;
+          }
+         
           if(this.isMedic){
             this.getLever(5,2,1)
           }else{
@@ -1440,9 +1487,15 @@
         // console.log(this.isgoodStock);
         this.formData.goodsImages = this.fileGoodsList;
         this.formData.goodsHeaderImages = this.fileGoodsList;
+        this.formData.goodsVideos = this.videoList;
         this.formData.specificationImages = this.fileIntrList;
         this.formData.buyLimitDtoList = this.buyLimitDtoList;
         this.isgoodsImages = this.formData.goodsImages.length == 0 ? false :true;
+        console.log(this.formData.goodsDescription)
+        if (this.videoList.length == 0) {
+          this.isgoodsVideo = false;
+          return;
+          };
         // 如果是【药品】类型的商品
         if(this.isMedic){
           if(!this.isgoodsImages){
@@ -1826,6 +1879,110 @@
           }
         })     
       },
+      // 视频
+    deleteVideo(videoList) {
+        console.log(videoList,'item,fileGoodsListitem,fileGoodsListv')
+        this.videoList = [];
+        this.videoModel.videoFullPath='';
+        },
+    beforeVideoUpload(file) {
+       const video2M = file.size / 1024 /1024 < 20;
+       console.log(file.size, 'video2Mvideo2Mvideo2M')
+
+        if (!video2M) {
+          this.$message.error('上传视频大小不能超过20M!');
+        }
+        else {
+          this.doVideoUpload(file, 1);
+        }       
+    },
+     handleRemoveVideo(file, videoList) {
+            //console.log(this.videoList);
+        for (let i = 0; i < this.videoList.length; i++) {
+            if (this.videoList[i].name == file.name) {
+                this.videoList.splice(i, 1);
+                console.log("删除" + i);
+            }
+        }
+    },
+    checkUpdate(name) {
+        let flag = true;
+        for(let i=0;i<this.videoList.length;i++) {
+            if(this.videoList[i].name == name) {
+                flag = false;
+                this.$message.warning('上传文件重发');
+            }
+        }
+        console.log('name',name,'',this.videoList)
+        return flag;
+    },
+    doVideoUpload(file, index) {
+        console.log('file',file);
+        //console.log('videoList项目列表：',this.videoList);
+        this.videoModel.videoFullPath = '';
+        if(file.name.indexOf(' ') != -1){
+            this.$message.warning('文件名不能包含空格');
+            return;
+        }
+        let updateFlag = this.checkUpdate(file.name);
+        if(updateFlag == false) {
+            return;
+        }
+        var ext = file.type
+        var arr = ext.split('/');
+        var filety = "." + arr[1];
+        /*if (filety.indexOf(".pdf") < 0 && filety.indexOf(".jpeg") < 0 && filety.indexOf(".jpg") < 0
+            && filety.indexOf(".png") < 0 && filety.indexOf(".mp4") < 0) {
+            this.$message.warning('文件格式错误');
+            return
+        }*/
+
+        let self = this;
+        //如果没有选择文件,返回
+        if (isEmptyUtils(file)) {
+            return;
+        }
+
+        console.log('file.type', file.type)
+        if(filety != ".mp4"){
+        // if (file.type !== 'video/mp4') {
+            alert('仅支持上传mp4格式视频');
+            return;
+        }
+
+        var arr = file.name.split('_');
+        if(arr.length != 4){
+            alert('上传视频文件名格式不正确：举例（GXY_001_02_03.mp4）');
+            return;
+        }
+
+        self.$message.info('开始上传');
+        self.isgoodsVideo = true;
+        self.videoModel.videoPath = createFilePath(file,file.name)
+        //  let videoPath = createFilePath(file,file.name)
+        doUpload(self,file,self.videoModel.videoPath,null,null).then(function (result) {
+            
+            console.log('成功result',result);
+            self.videoModel.videoFullPath = result.fullPath;
+            // self.model.size = result.size;
+            // self.model.ext = result.ext;
+            // self.model.name = self.model.videoPath;
+            let fileItem = {
+                videoFullPath: result.fullPath,
+                uid: '',
+                imageUrl: result.fullPath,
+                imageType: 9,
+                imageSort: 1,
+                goodsId: self.formData.goodsId,
+                id: null,
+                deleteFlag: 0
+            }
+            self.videoList.push(fileItem);
+            self.$message.success('上传成功');            
+            console.log('sumFile',self.sumFile,'videoList',self.videoList);
+            return false;
+        });           
+    },
     },
   }
 </script>
@@ -1844,6 +2001,9 @@
           color: #449284;
         }
       }
+      .word-tip {
+        color: #e6af7a;
+      }
     }
     .suitableList-select {
       width: 445px;
@@ -2065,4 +2225,29 @@
   .el-icon-minus {
     color:#ffffff;
   }
+  #introVideoLecture {
+      height: 140px;
+  }
+  .video-progress {
+    width: 20%;
+  }
+  .el-upload-list {
+    width: 30%;
+  }
+  .label-video {
+    position: relative;
+    .el-button:focus, .el-button:hover {
+    color: #449284;
+    border-color: #449284;
+    background-color: #ecf5ff;
+    }
+    .dl-video {
+      position: absolute;
+      top: 50%;
+      left: 35%;
+      transform: translate(-50%,-50%);
+
+    }
+  }
+  
 </style>

src/views/goods/goods-manage.vue

@@ -94,8 +94,8 @@
           </el-col>
 
           <el-col :span="12" style="text-align: right">
-            <el-button v-if="commissionFlag == 2" type="primary" size="small" @click="batchSetPrice()">批量设置分佣</el-button>
-            <el-button type="primary" size="small" @click="exportOpt">批量导出商品</el-button>
+            <el-button v-if="commissionFlag == 2" type="primary" size="small" @click="batchSetPrice()" :disabled="tableData.length == 0">批量设置分佣</el-button>
+            <el-button type="primary" size="small" @click="exportOpt" :disabled="tableData.length == 0">批量导出商品</el-button>
             <el-button v-if="isSSO" type="primary" size="small" @click="batchOpt(3)">批量导入商品</el-button>
             <el-button type="primary" size="small" @click="edit('add')">新建单个商品</el-button>
           </el-col>
@@ -161,6 +161,16 @@
         </el-table-column>
         <el-table-column prop="saleTime" label="发布时间" width="170" align="center">
         </el-table-column>
+        <el-table-column prop="modifiedId" label="最近操作人" width="170" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.modifiedId || '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="modifiedTime" label="最近操作时间" width="170" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.modifiedTime || '--' }}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="200" align="center" fixed="right">
           <template slot-scope="scope">
             <div v-if="scope.row.commissionFlag == 2">
@@ -552,7 +562,6 @@
       handleRemove(){},
       beforeRemove(){},
       handleSelectionChange(val){
-        console.log(val)
         this.selectList = val
       },
 
@@ -821,7 +830,6 @@
       },
       exportOpt() {
         const { goodsIdList, goodsType, goodsName, storeId, saleType } = this.searchForm;
-
         getGoodsExportUrl({ goodsIdList, goodsType, goodsName, storeId, saleType }).then(res => {
           if (res.code != '000000') {
             this.$message({ message: res.message, type: 'error' });

src/views/goods/rules.js

@@ -93,6 +93,9 @@ const rules = {
     { required: true, message: "请输入商品名称", trigger: "submit" },
     { validator: checkProjectStr, trigger: "submit" }
   ],
+  goodsDescription: [
+    {required: true, message: "请输入商品介绍", trigger: "submit"}
+  ],
   goodsHeaderImages: [
     { required: true, message: "请上传商品头图", trigger: "blur" }
   ],