Merge remote-tracking branch 'origin/dev' into dev

.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
     'curly': [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'eqeqeq': ["off"],
     'generator-star-spacing': [2, {
       'before': true,
       'after': true

src/assets/styles/adminIndex.scss

@@ -475,12 +475,10 @@
   position: absolute;
   left: 0;
   bottom: 38px;
-
   span {
     display: block;
     width: 47px;
     height: 18px;
-    // padding: 2px 5px;
     margin-left: 6px;
     text-align: center;
     background: #3a8aeb;
@@ -488,6 +486,10 @@
     font-size: 12px;
     line-height: 18px;
     border-radius: 9px;
+    &.item_time{
+      width: auto;
+      padding: 0 5px;
+    }
   }
 }
 // 主题-素材-文件名样式
@@ -502,6 +504,11 @@
   -webkit-line-clamp: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  -moz-user-select:none;/*火狐*/
+  -webkit-user-select:none;/*webkit浏览器*/
+  -ms-user-select:none;/*IE10*/
+  -khtml-user-select:none;/*早期浏览器*/
+    user-select:none;
 }
 // 首页-主题库-按钮
 .home_publish_btn {
@@ -542,7 +549,7 @@
 .multi_handle {
   display: flex;
   position: fixed;
-  bottom: 140px;
+  bottom: 60px;
   left: 50%;
   // width: 1100px;
   padding: 25px 150px;

src/views/components/upload.vue

@@ -68,7 +68,7 @@
   </div>
 </template>
 <script>
-import axios from 'axios'
+// import axios from 'axios'
 import * as qiniu from 'qiniu-js'
 import { getQiniuToken } from '@/api/upload/upload'
 export default {
@@ -123,7 +123,6 @@ export default {
           this.$message.error('图片大小不能超过 4MB !')
         }
       }
-
       // this.uploadListVisible = true
       // this.fileData.push({
       //   fileNames: this.fileNames,
@@ -179,7 +178,7 @@ export default {
           _this.filePercent = parseInt(res.total.percent)
           console.log(_this.filePercent)
           this.filePercentTxt = '上传中'
-          if (_this.filePercent === 100) {
+          if (_this.filePercent == 100) {
             // _this.fileData.push(_this.filePercent)
             // _this.fileData.forEach((value, index) => {
             //   value['filePercent'] = parseInt(res.total.percent)
@@ -209,7 +208,7 @@ export default {
           _this.getVideoDuration(_this.uploadFileUrl)
           setTimeout(() => {
             _this.$emit('saveMaterial')
-          }, 2000)
+          }, 200)
           // console.log(_this.fileUrl.push({ name: _this.file.name, url: _this.fileUrl }))
           // console.log(_this.fileUrl)
         }

src/views/materialContent/materialList/index.vue

@@ -1,13 +1,21 @@
 <template>
   <div>
+    <div v-if="isToFolder" class="material_crumbs">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item><a href="/content">素材库</a></el-breadcrumb-item>
+        <el-breadcrumb-item>{{ currentFolder }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <div class="material_content">
       <!-- 上传 / 创建文件夹 -->
       <div class="material_item cont_upload">
         <Upload ref="uploadMaterial" @saveMaterial="saveMaterial" />
-        <el-button class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button>
+        <el-button v-if="!isToFolder" class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button>
+        <el-button v-else class="mkdir_btn" round type="primary"><a href="/content">返回</a></el-button>
       </div>
+
       <!-- 文件夹list -->
-      <div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder', { 'item_multi': folderChecked == index }]" @click="editFolder(item,index)">
+      <div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)">
         <div class="icon_bg">
           <svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true">
             <use xlink:href="#icon-wenjianjia" />
@@ -53,12 +61,13 @@
           >
             <el-input v-model="folderForm.name" style="width: 336px" />
           </el-form-item>
-          <el-form-item v-if="formType !== 'JPG'" label="封面">
+          <el-form-item v-if="formatType != 0" label="封面">
             <UploadCover ref="childUpload" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" round @click="submitForm('folderForm')">保 存</el-button>
+          <el-button v-if="!isEditMaterial" type="primary" round @click="submitForm('folderForm')">保 存</el-button>
+          <el-button v-else type="primary" round @click="saveMaterial">保 存</el-button>
           <el-button round @click="resetForm()">取 消</el-button>
         </div>
       </el-dialog>
@@ -76,7 +85,7 @@
           @click="editContent()"
         >编辑</el-button>
         <el-button type="button" class="mulit_btn">下载</el-button>
-        <el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button>
+        <el-button v-if="!isToFolder" type="button" class="mulit_btn" @click="moveingTo()">移动</el-button>
         <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMyMaterial">删除</el-button>
       </div>
       <div v-else>
@@ -162,22 +171,23 @@ export default {
       isEditFolder: false, // 是否编辑文件夹
       mkdirVisible: false, // 新建编辑layer
       folderChecked: -1, // 文件夹是否单击选中
+      isEditMaterial: false, // 是否是编辑素材
       formatType: null, // 上传素材类型 0 img 1 video 2 audio
+      materialId: null, // 编辑时需要参数 id
       materialImgPath: '', // 素材封面
       materialPostfix: [], // 文件后缀格式
       materialDuration: 0, // 时长
+      materialName: '', // 素材名称
+      uploadFileUrl: null, // 素材保存路径
       selectedList: [], // 素材选中的
-      // uploadListVisible: false,
-      // progressLoading: true,
-      // percentage: 0,
-      // colors: '#1e9f4c',
-      layerTitle: '创建文件夹',
+      layerTitle: '创建文件夹', // 文件夹/素材编辑框title
       labelTxt: '文件夹名称',
-      formType: null,
+      isToFolder: false, // 是否进入文件夹
+      isToFolderRouter: null,
+      currentFolder: '', // 当前进入的文件夹名
+      currentFolderId: null,
       movingVisible: false,
-      uploadListData: [
-      ],
-      listData: [
+      uploadListData: [ // 上传列表
       ],
       wjjList: [
         {
@@ -201,21 +211,48 @@ export default {
       if (newName === false) {
         this.selectedList = []
       }
+    },
+    '$route.query.folderTag'(Val) {
+      console.log(Val)
+      // if (Val) {
+      //   this.isToFolder = true
+      // } else {
+      //   this.isToFolder = false
+      // }
     }
   },
   mounted: function() {
-    this.start()
+    console.log(this.$route.query.folderTag)
     this.getMaterialList()
+    document.addEventListener('click', this.hiddenFolderActiveClick)
   },
   methods: {
     // 获取素材库list
     getMaterialList() {
-      const params = {
+      let params
+      if (this.$route.query.folderTag) {
+        console.log('文件夹内')
+        this.isToFolder = true
+        this.currentFolder = localStorage.getItem('currentFolder')
+        this.currentFolderId = localStorage.getItem('currentFolderId')
+        params = {
+          'folder_id': this.currentFolderId,
+          'material_name': null,
+          'material_type': null,
+          'orga_id': this.orga_id
+        }
+      } else {
+        console.log('文件夹外')
+        this.isToFolder = false
+        localStorage.removeItem('currentFolder')
+        localStorage.removeItem('currentFolderId')
+        params = {
           'folder_id': null,
           'material_name': null,
           'material_type': null,
           'orga_id': this.orga_id
         }
+      }
       getMaterialList(params).then(res => {
         this.materialFolders = res.data.materialFolders
         this.materialList = res.data.pageThemeVO
@@ -223,11 +260,11 @@ export default {
         this.thisFoldId = res.data.thisFoldId
         // 素材类型格式处理
         this.materialList.forEach((item, key) => {
-          this.materialPostfix[key] = item.material_name.substring(
-            item.material_name.lastIndexOf('.') + 1,
-            item.material_name.length
+          this.materialPostfix[key] = item.deposit_url.substring(
+            item.deposit_url.lastIndexOf('.') + 1,
+            item.deposit_url.length
           )
-          item.material_name = item.material_name.split('.')[0]
+          // item.material_name = item.material_name.split('.')[0]
         })
       })
     },
@@ -249,8 +286,27 @@ export default {
         })
       }
     },
+    // 文件夹双击操作
+    floderDbClick(item, index) {
+      this.isEditMaterial = false
+      this.$router.push(
+        {
+          path: '/content', query: { folderTag: 1 }
+        }
+      )
+      this.currentFolder = item.name
+      this.currentFolderId = item.id
+      localStorage.setItem('currentFolder', this.currentFolder)
+      localStorage.setItem('currentFolderId', this.currentFolderId)
+      this.getMaterialList()
+    },
+    // 点击其他区域选中的文件夹 去掉选中样式
+    hiddenFolderActiveClick() {
+      this.folderChecked = -1
+    },
     // 选择 编辑 文件夹
     editFolder(item, index) {
+      this.isEditMaterial = false
       if (index !== this.folderChecked) {
         this.folderChecked = index
         this.isEditFolder = true
@@ -294,58 +350,13 @@ export default {
         })
       })
     },
-    // 上传素材
-    saveMaterial() {
-      const formatType = this.$refs.uploadMaterial.formatType
-      const uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
-      const duration = this.$refs.uploadMaterial.duration
-      switch (formatType) {
-        case 'image':
-          this.formatType = 0
-          this.materialImgPath = uploadFileUrl
-          this.materialDuration = 0
-          break
-        case 'video':
-          this.formatType = 1
-          this.materialDuration = duration
-          break
-        case 'audio':
-          this.formatType = 2
-          this.materialDuration = duration
-          break
-      }
-      const params = {
-        'class_ids': [
-          // 素材类id集合
-        ],
-        'deposit_url': uploadFileUrl, // 素材存放路径
-        'device_direction': 1, // 横竖屏 1.横屏 2.竖屏,
-        'duration': this.materialDuration, // 时长s
-        'folder_id': this.thisFoldId, // 文件夹id
-        'img_path': this.materialImgPath, // 封面图片id
-        'material_name': this.$refs.uploadMaterial.fileNames, // 素材名称
-        'material_type': this.formatType, // 素材类别
-        'orga_id': this.orga_id, // 机构id
-        'store_type': 1 // 库类型 1.素材库 2.主题库
-      }
-      // 'material_id': '', // 素材id 创建时不需要
-      saveMaterial(params).then(res => {
-        if (res.code === 200) {
-          this.$message({
-            message: '上传素材成功',
-            type: 'success'
-          })
-          this.getMaterialList()
-        }
-      })
-    },
     // 提交表单 - 新建/编辑
     submitForm(formName) {
       this.folderForm.img_path = this.$refs.childUpload.imageUrl
       this.$refs[formName].validate((valid) => {
         if (valid) {
           saveMaterialFolder(this.folderForm).then(res => {
-            if (res.code == 200) {
+            if (res.code === 200) {
               this.$message({
                 message: '创建文件夹成功',
                 duration: 2000,
@@ -385,17 +396,87 @@ export default {
     editContent() {
       this.mkdirVisible = true
       this.labelTxt = '文件名称'
-      if (this.formType === 'vedio') {
+      this.isEditMaterial = true
+      if (this.formatType == 1) {
         this.layerTitle = '视频编辑'
-      } else if (this.formType === 'audio') {
+      } else if (this.formatType == 2) {
         this.layerTitle = '音频编辑'
       } else {
         this.layerTitle = '图片编辑'
       }
-      const resType = this.listData.filter(item => {
-        return item.id === this.selectedList[0]
+      const checkedMaterial = this.materialList.filter(item => {
+        return item.material_id == this.selectedList[0]
       })
-      this.folderForm.name = resType[0].name
+      this.materialId = checkedMaterial[0].material_id
+      this.folderForm.name = checkedMaterial[0].material_name
+      this.materialDuration = checkedMaterial[0].duration
+      this.uploadFileUrl = checkedMaterial[0].deposit_url
+      this.materialImgPath = checkedMaterial[0].img_path
+    },
+    // 上传素材
+    saveMaterial() {
+      if (!this.isEditMaterial) {
+        console.log('新增')
+        const formatType = this.$refs.uploadMaterial.formatType
+        this.uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
+        const duration = this.$refs.uploadMaterial.duration
+        this.materialName = this.$refs.uploadMaterial.fileNames
+        switch (formatType) {
+          case 'image':
+            this.formatType = 0
+            this.materialImgPath = this.uploadFileUrl
+            this.materialDuration = 0
+            break
+          case 'video':
+            this.formatType = 1
+            this.materialDuration = duration
+            break
+          case 'audio':
+            this.formatType = 2
+            this.materialDuration = duration
+            break
+        }
+      } else {
+        this.materialName = this.folderForm.name
+        this.$nextTick(() => {
+          if (this.$refs.childUpload) {
+            this.materialImgPath = this.$refs.childUpload.imageUrl
+          }
+        })
+      }
+      setTimeout(() => {
+        const params = {
+          'class_ids': [
+          // 素材类id集合
+          ],
+          'deposit_url': this.uploadFileUrl, // 素材存放路径
+          'device_direction': 1, // 横竖屏 1.横屏 2.竖屏,
+          'duration': this.materialDuration, // 时长s
+          'material_id': this.materialId,
+          'folder_id': this.thisFoldId, // 文件夹id
+          'img_path': this.materialImgPath, // 封面图片id
+          'material_name': this.materialName, // 素材名称
+          'material_type': this.formatType, // 素材类别
+          'orga_id': this.orga_id, // 机构id
+          'store_type': 1 // 库类型 1.素材库 2.主题库
+        }
+        console.log(params)
+        if (!this.isEditMaterial) {
+          // 新上传素材时不需要该字段
+          delete params.material_id
+        }
+        saveMaterial(params).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: '上传素材成功',
+              type: 'success'
+            })
+            this.mkdirVisible = false
+            this.getMaterialList()
+            this.materialImgPath = ''
+          }
+        })
+      }, 200)
     },
     // 素材 - 多选
     selectedItem(id, type) {
@@ -410,9 +491,8 @@ export default {
         }
       } else {
         this.selectedList.push(id)
-        // this.formType = type
+        this.formatType = type
       }
-      console.log(this.selectedList)
     },
     // 素材 - 删除
     deleteMyMaterial() {
@@ -422,17 +502,16 @@ export default {
         type: 'warning'
       }).then(() => {
         const params = {
-          id: this.selectedList[0]
+          ids: this.selectedList
         }
         deleteMyMaterial(params).then(res => {
           if (res.code === 200) {
             this.$message({
-              message: '删除文件夹成功',
+              message: '删除素材成功',
               type: 'success'
             })
             this.getMaterialList()
             this.selectedList = []
-            console.log(this.selectedList)
           }
         })
       }).catch(() => {
@@ -483,6 +562,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.material_crumbs{
+  padding: 0 24px 15px 24px;
+  ::v-deep .el-breadcrumb{
+    font-size: 12px;
+    color: #999999;
+  }
+}
 .material_content {
   display: flex;
   flex-wrap: wrap;