修复评测后台回显

src/components/VideoUpload/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      multiple
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+      ref="upload"
+    >
+      <!-- 上传按钮 -->
+      <el-button size="mini" type="primary">选取视频</el-button>
+      <!-- 上传提示 -->
+      <div class="el-upload__tip" slot="tip" v-if="showTip">
+        请上传
+        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+        的文件
+      </div>
+    </el-upload>
+<!--    <el-button size="mini" type="primary"  @click.native.prevent="dialogVideo=true">预览视频</el-button>-->
+    <el-dialog :visible.sync="dialogVideo">
+      <video width="600px" :src="dialogUrl" controls />
+    </el-dialog>
+    <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "VideoUpload",
+  props: {
+    // 值
+    value: [String, Object, Array],
+    // 数量限制
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 500,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["avi","mp4"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      dialogVideo:false,
+      dialogUrl:'',
+      number: 0,
+      uploadList: [],
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          let temp = 1;
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              item = { name: item, url: item };
+            }
+            item.uid = item.uid || new Date().getTime() + temp++;
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件类型
+      if (this.fileType) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        const isTypeOk = this.fileType.some((type) => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+        if (!isTypeOk) {
+          this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
+          return false;
+        }
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.$modal.loading("正在上传视频，请稍候...");
+      this.number++;
+      return true;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError(err) {
+      this.$modal.msgError("上传视频失败，请重试");
+      this.$modal.closeLoading()
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      this.uploadList.push({ name: res.data.fileName, url: res.data.fileName });
+      console.log('成功！',res)
+      this.$emit('videoInput',this.uploadList)
+      if (this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.$emit("input", this.listToString(this.fileList));
+        this.$modal.closeLoading();
+      }
+    },
+    // 删除文件
+    handleDelete(index) {
+      this.fileList.splice(index, 1);
+      this.$emit("input", this.listToString(this.fileList));
+    },
+    // 获取文件名称
+    getFileName(name) {
+      if (name.lastIndexOf("/") > -1) {
+        return name.slice(name.lastIndexOf("/") + 1);
+      } else {
+        return "";
+      }
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url + separator;
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

src/views/bxg/activity/bargain/form.vue

@@ -114,7 +114,8 @@ export default {
   },
   data() {
     return {
-      loading: false, dialog: false,
+      loading: false,
+      dialog: false,
       templateList: [],
       form1: {
         good:{
@@ -176,7 +177,7 @@ export default {
     'form.image': function(val) {
       this.form1.good.image = this.form.image
       this.form1.good.productId = this.form.productId
-     
+
     },
     'form.sliderImageArr': function(val) {
       console.log("aaa:"+val)
@@ -193,7 +194,7 @@ export default {
       deep:true//对象内部的属性监听，也叫深度监听
     },
   },
- 
+
   methods: {
     // 详情选择商品生成规格用
     getInfoChooseGood (id) {

src/views/bxg/shop/storeBrand/index.vue

@@ -90,7 +90,7 @@ import pagination from '@crud/Pagination'
 import MaterialList from "@/components/material";
 
 // crud交由presenter持有
-const defaultCrud = CRUD({ title: 'brand', url: '/bxg/api/yxStoreBrand', sort: 'id,desc', crudMethod: { ...crudYxStoreBrand }})
+const defaultCrud = CRUD({ title: '品牌', url: '/bxg/api/yxStoreBrand', sort: 'id,desc', crudMethod: { ...crudYxStoreBrand }})
 const defaultForm = { id: null, brandName: null, sort: null, pic: null, isShow: null, createTime: null, updateTime: null, isDel: null, tenantId: null }
 export default {
   name: 'YxStoreBrand',

src/views/bxg/yxEvaluation/index.vue

@@ -10,104 +10,63 @@
       </div>
       <crudOperation :permission="permission" />
       <!--表单组件-->
-      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1200px">
+      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1000px">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
+        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="250px">
-          <el-form-item label="关联商品:" prop="goodsId">
+          <el-form-item label="关联商品:" prop="product">
             <el-cascader
               ref="cascader"
-              v-model="form.goodsId"
+              v-model="product"
               @change="change"
               placeholder="试试搜索：眼镜"
               :options="cateList"
-              :props="props"
               filterable></el-cascader>
-<!--            <el-input v-model="form.goodsId" style="width: 370px;" />-->
           </el-form-item>
-          <el-row :gutter="24">
+
-            <el-col v-bind="grid2">
               <el-form-item label="评测介绍">
                 <el-input v-model="form.synopsis" type="textarea" style="width: 370px;" />
               </el-form-item>
-            </el-col>
-            <el-col v-bind="grid2">
-              <el-form-item label="评测视频" prop="videoInput">
-                <!--            <el-input v-model="form.videoInput" style="width: 370px;" />-->
-                <MaterialList v-model="picArr" type="image" :num="1" :width="150" :height="150" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="24">
 
-            <el-col v-bind="grid2">
+              <el-form-item label="评测视频" prop="videoInput">
+                    <video-upload v-model="video" @videoInput="videoInput"></video-upload>
+              </el-form-item>
               <el-form-item label="评测总结">
                 <el-input v-model="form.summary" type="textarea" style="width: 370px;" />
               </el-form-item>
-            </el-col>
-            <el-col v-bind="grid2">
               <el-form-item label="首页图" prop="homeImage">
                 <!--            <el-input v-model="form.homeImage" style="width: 370px;" />-->
                 <MaterialList v-model="picArr" type="image" :num="1" :width="250" :height="150" />
               </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="24">
-            <el-col v-bind="grid2">
               <el-form-item label="产品展示文字">
                 <el-input v-model="form.displaySynopsis"  type="textarea" style="width: 370px;" />
               </el-form-item>
-            </el-col>
-            <el-col v-bind="grid2">
           <el-form-item label="产品展示图集">
 <!--            <el-input v-model="form.displayImage" style="width: 370px;" />-->
-            <MaterialList v-model="picArr" type="image" :num="1" :width="150" :height="150" />
+            <MaterialList v-model="picArr1" type="image" :num="4" :width="150" :height="150" />
           </el-form-item>
-            </el-col>
-
-          </el-row>
-          <el-row :gutter="24">
-            <el-col v-bind="grid2">
               <el-form-item label="实用感受文字">
                 <el-input v-model="form.feelSynopsis"  type="textarea" style="width: 370px;" />
               </el-form-item>
-            </el-col>
-            <el-col v-bind="grid2">
           <el-form-item label="实用感受图集">
-<!--            <el-input v-model="form.feelImage" style="width: 370px;" />-->
+            <MaterialList v-model="picArr2" type="image" :num="4" :width="150" :height="150" />
-            <MaterialList v-model="picArr" type="image" :num="1" :width="150" :height="150" />
           </el-form-item>
-            </el-col>
-
-          </el-row>
-          <el-row :gutter="24">
-            <el-col v-bind="grid2">
               <el-form-item label="易用感受文字">
                 <el-input v-model="form.accessibilitySynopsis"  type="textarea" style="width: 370px;" />
               </el-form-item>
-            </el-col>
-            <el-col v-bind="grid2">
           <el-form-item label="易用感受图集">
 <!--            <el-input v-model="form.accessibilityImage" style="width: 370px;" />-->
-            <MaterialList v-model="picArr" type="image" :num="1" :width="150" :height="150" />
+            <MaterialList v-model="picArr3" type="image" :num="4" :width="150" :height="150" />
           </el-form-item>
-            </el-col>
-
-          </el-row>
-          <el-row :gutter="24">
-            <el-col v-bind="grid2">
               <el-form-item label="是否展示">
                 <el-radio-group v-model="form.isShow" style="width: 178px">
                   <el-radio :label="1">显示</el-radio>
                   <el-radio :label="0">隐藏</el-radio>
                 </el-radio-group>
               </el-form-item>
-            </el-col>
-            <el-col v-bind="grid2">
 
             <el-form-item label="排序" prop="sort">
-            <el-input v-model="form.sort" style="width: 370px;" />
+            <el-input v-model="form.sort" style="width: 370px;" type="number" />
           </el-form-item>
-          </el-col>
+
-          </el-row>
 <!--          <el-form-item label="tenantId">-->
 <!--            <el-input v-model="form.tenantId" style="width: 370px;" />-->
 <!--          </el-form-item>-->
@@ -121,10 +80,15 @@
       <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
         <el-table-column type="selection" width="55" />
         <el-table-column v-if="columns.visible('id')" prop="id" label="评测ID" />
-        <el-table-column v-if="columns.visible('homeImage')" prop="homeImage" label="首页图" />
+<!--        <el-table-column v-if="columns.visible('goodsId')" prop="goodsId" label="关联商品" />-->
+        <el-table-column v-if="columns.visible('product')" prop="product" label="关联商品" >
+          <template slot-scope="scope">
+            <span>{{ JSON.parse(scope.row.product).store_name}}</span>
+          </template>
+        </el-table-column>
+        <!--        <el-table-column v-if="columns.visible('homeImage')" prop="homeImage" label="首页图" />-->
         <el-table-column v-if="columns.visible('synopsis')" prop="synopsis" label="评测介绍" />
 <!--        <el-table-column v-if="columns.visible('videoInput')" prop="videoInput" label="评测视频" />-->
-        <el-table-column v-if="columns.visible('goodsId')" prop="goodsId" label="关联商品" />
         <el-table-column v-if="columns.visible('summary')" prop="summary" label="评测总结" />
 <!--        <el-table-column v-if="columns.visible('displayImage')" prop="displayImage" label="产品展示图集" />-->
         <el-table-column v-if="columns.visible('displaySynopsis')" prop="displaySynopsis" label="产品简介" />
@@ -178,58 +142,62 @@ import pagination from '@crud/Pagination'
 import MaterialList from "@/components/material";
 import {getInfo} from "@/api/bxg/yxStoreProduct";
 import {initData} from "@/api/bxg/data";
-
+import FileUpload from "@comp/FileUpload";
+import VideoUpload from "@comp/VideoUpload";
 // crud交由presenter持有
 const defaultCrud = CRUD({ title: '评测', url: 'bxg/api/yxEvaluation', sort: 'id,desc', crudMethod: { ...crudYxEvaluation }})
 const defaultForm = { id: null, homeImage: null, synopsis: null,videoInput:null,
-  goodsId: null, summary: null, displayImage: null,displaySynopsis:null,feelImage: null,
+  product: null, summary: null, displayImage: null,displaySynopsis:null,feelImage: null,
    feelSynopsis: null, accessibilityImage: null, accessibilitySynopsis: null,createTime:null,
   updateTime:null,isDel:null,isShow:1,sort:null,tenantId:null,
 }
 export default {
   name: 'YxEvaluation',
-  components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList},
+  components: {FileUpload,VideoUpload,pagination, crudOperation, rrOperation, udOperation ,MaterialList},
   mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
   data() {
     return {
+      product:[],
       //分类列表
-      cateList:[{
+      cateList:[],
-        value:'',
+      //懒加载暂无法回显，弃用
-        label:'',
+      // props:{
-      }],
+      //   // emitPath:false,
-      props:{
+      //   lazy: true,
-        // emitPath:false,
+      //   value: 'value',
-        lazy: true,
+      //   label: 'label',
-        value: 'value',
+      //   lazyLoad (node, resolve) {
-        label: 'label',
+      //     console.log('node, resolve',node, resolve)
-        lazyLoad (node, resolve) {
+      //     const { level,value } = node;
-          console.log('node, resolve',node, resolve)
+      //     setTimeout(arrayLike => {
-          const { level,value } = node;
+      //       let productList=[]
-          setTimeout(arrayLike => {
+      //        initData('/bxg/api/yxStoreProduct', {
-            let productList=[]
+      //         page: 0,
-             initData('/bxg/api/yxStoreProduct', {
+      //         size: 999,
-              page: 0,
+      //         sort: 'id,desc',
-              size: 999,
+      //         cateId:value,
-              sort: 'id,desc',
+      //       }).then(data => {
-              cateId:value,
+      //         console.log('data', data);
-            }).then(data => {
+      //         //获取当前分类下的商品列表
-              console.log('data', data);
+      //         productList = data.content
-              //获取当前分类下的商品列表
+      //          const nodes = Array.from(productList,item=>({
-              productList = data.content
+      //              value:item,
-               const nodes = Array.from(productList,item=>({
+      //              label: item.storeName,
-                   value: item.id,
+      //              //判断是不是子节点
-                   label: item.storeName,
+      //              leaf: level >=1
-                   //判断是不是子节点
+      //          }), {length: level + 1})
-                   leaf: level >=1
+      //          console.log('node, resolve',nodes)
-               }), {length: level + 1})
+      //          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
-               console.log('node, resolve',nodes)
+      //          resolve(nodes);
-               // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+      //       })
-               resolve(nodes);
+      //     }, 1000);
-            })
+      //   }
-          }, 1000);
+      // },
-        }
+      video:[],
-      },
       picArr:[],
+      picArr1:[],
+      picArr2:[],
+      picArr3:[],
       permission: {
         add: ['admin', 'yxEvaluation:add'],
         edit: ['admin', 'yxEvaluation:edit'],
@@ -246,7 +214,7 @@ export default {
         videoInput: [
           { required: true, message: '评测视频未上传', trigger: 'blur' }
         ],
-        goodsId: [
+        product: [
           { required: true, message: '评测关联商品不能为空', trigger: 'blur' }
         ],
         synopsis: [
@@ -266,39 +234,80 @@ export default {
     }
   },
   watch: {
+    // video:function(val) {
+    //   console.log(val,val);
+    //   // this.form.homeImage = val.join(',')
+    // },
     picArr: function(val) {
+      console.log(val,'val');
+      this.form.homeImage = val.join(',')
+    },
+    picArr1: function(val) {
       console.log();
-      this.form.videoInput = val.join(',')
+      this.form.displayImage = val.join(',')
+    },
+    picArr2: function(val) {
+      console.log();
+      this.form.feelImage = val.join(',')
+    },
+    picArr3: function(val) {
+      console.log();
+      this.form.accessibilityImage = val.join(',')
     }
   },
   mounted () {
     this.getInfo();
   },
   methods: {
-    change(val){
+    // // 根据id获取商品名,因为异步同步无法实现
-      console.log('change',val)
+    // getProductName(value){
-      if (val.length==2){
+    //   console.log(value,'value')
-        console.log('选的子级',this.form.goodsId)
+    //   //这里需要一个同步请求，才能获取商品名字
-        this.form.goodsId=val[1]
+    //  let product=''
-      }else{
+    //     initData('/bxg/api/yxStoreProduct/info/'+value).then((data)=>{
-        console.log('选的父级',this.form.goodsId)
+    //      product= data.productInfo.store_name
-        this.form.goodsId=null
+    //      }
-        this.$refs.cascader.checkedValue=''
+    //    )
-      }
+    //   console.log(product,product)
+    //   return product
+    // },
+    videoInput(uploadList){
+      console.log(uploadList,'uploadList');
+        this.form.videoInput =uploadList[0].url
     },
-    getInfo(){
+    change(val){
+        // this.form.product=JSON.stringify(val)
+          initData('/bxg/api/yxStoreProduct/info/'+val[1]).then((data)=>{
+            this.form.product=JSON.stringify(data.productInfo)
+            console.log('选的子级',this.form.product)
+          })
+    },
+    async getInfo(){
       //查询商品分类
       let that = this;
-      getInfo(0).then(async res => {
+      await getInfo(0).then( res => {
          //商品分类
         that.cateList = res.cateList
-      }).catch(res => {
-        console.log('err:'+res)
-        return this.$message({
-          message:res.msg,
-          type: 'error'
-        });
       })
+      for (const item of that.cateList) {
+        await initData('/bxg/api/yxStoreProduct', {
+                  page: 0,
+                  size: 999,
+                  sort: 'id,desc',
+                  cateId:item.value,
+                }).then(data=>{
+            data.content.forEach(ele=>{
+              //不能直接使用ele，会有浅拷贝问题
+              // let ele1=JSON.parse(JSON.stringify(ele))
+              // that.$set(ele,'value',ele1)
+              that.$set(ele,'value',ele.id)
+            that.$set(ele,'label',ele.storeName)
+            }
+          )
+          that.$set(item,'children',data.content)
+        })
+      }
+      console.log(that.cateList,'that.cateList')
     },
     // 获取数据前设置好接口地址
     [CRUD.HOOK.beforeRefresh]() {
@@ -306,9 +315,30 @@ export default {
     }, // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
       this.picArr = []
-      if (form.image && form.id) {
+      this.picArr1 = []
-        this.picArr = form.image.split(',')
+      this.picArr2 = []
+      this.picArr3 = []
+      if (form.homeImage && form.id) {
+        this.picArr = form.homeImage.split(',')
       }
+      if (form.displayImage && form.id) {
+        this.picArr1 = form.displayImage.split(',')
+      }
+      if (form.feelImage && form.id) {
+        this.picArr2= form.feelImage.split(',')
+      }
+      if (form.accessibilityImage && form.id) {
+        this.picArr3 = form.accessibilityImage.split(',')
+      }
+      if (form.product && form.id) {
+        let data=JSON.parse(this.form.product)
+        this.product=[Number(data.cate_id),Number(data.id)]
+        // this.product=[50,105]
+        // this.product=data
+        console.log( '111',this.product,typeof(this.product));
+
+      }
+
     },
   }
 }