素材库-编辑/删除/上传获取时长

src/api/material/material.js

@@ -19,10 +19,11 @@ export function saveMaterialFolder(parameter) {
 }
 
 // 删除 文件夹 - 素材库
-export function deleteMaterialFolder(data) {
+export function deleteMaterialFolder(parameter) {
   return request({
-    url: 'api/material/deleteMaterialFolder?id=' + data,
-    method: 'post'
+    url: 'api/material/deleteMaterialFolder',
+    method: 'post',
+    data: parameter
   })
 }
 
@@ -34,3 +35,12 @@ export function saveMaterial(parameter) {
     data: parameter
   })
 }
+
+// 删除 - 素材库
+export function deleteMyMaterial(parameter) {
+  return request({
+    url: 'api/material/deleteMyMaterial',
+    method: 'post',
+    data: parameter
+  })
+}

src/utils/index.js

@@ -382,3 +382,42 @@ export function downloadFile(obj, name, suffix) {
   link.click()
   document.body.removeChild(link)
 }
+
+// 秒数转时分秒格式 h:m:s
+export function getSeconds(s) {
+  if (s != null) {
+    var sTime = parseInt(s)// 秒
+    var mTime = 0// 分
+    var hTime = 0// 时
+    if (sTime > 60) { // 如果秒数大于60，将秒数转换成整数
+    // 获取分钟，除以60取整数，得到整数分钟
+      mTime = parseInt(sTime / 60)
+      // 获取秒数，秒数取佘，得到整数秒数
+      sTime = parseInt(sTime % 60)
+      // 如果分钟大于60，将分钟转换成小时
+      if (mTime > 60) {
+      // 获取小时，获取分钟除以60，得到整数小时
+        hTime = parseInt(mTime / 60)
+        // 获取小时后取佘的分，获取分钟除以60取佘的分
+        mTime = parseInt(mTime % 60)
+      }
+    }
+    var result = ''
+    if (sTime >= 0 && sTime < 10) {
+      result = '0' + parseInt(sTime) + ''
+    } else {
+      result = '' + parseInt(sTime) + ''
+    }
+    if (mTime >= 0 && mTime < 10) {
+      result = '0' + parseInt(mTime) + ':' + result
+    } else {
+      result = '' + parseInt(mTime) + ':' + result
+    }
+    if (hTime >= 0 && hTime < 10) {
+      result = '0' + parseInt(hTime) + ':' + result
+    } else {
+      result = '' + parseInt(hTime) + ':' + result
+    }
+    return result
+  }
+}

src/views/components/upload.vue

@@ -68,6 +68,7 @@
   </div>
 </template>
 <script>
+import axios from 'axios'
 import * as qiniu from 'qiniu-js'
 import { getQiniuToken } from '@/api/upload/upload'
 export default {
@@ -84,6 +85,7 @@ export default {
       formatType: '',
       postfix: '',
       fileSize: '',
+      duration: 0,
       uploadListVisible: false,
       loading_txt: '暂停',
       colors: '#1e9f4c',
@@ -98,6 +100,7 @@ export default {
     changeFile(e) {
       // 获取文件
       this.file = e.target.files[0]
+      console.log(this.file)
       this.formatType = this.file.type.substring(0, this.file.type.indexOf('/'))
       console.log('formatType', this.formatType)
       this.fileNames = this.file.name
@@ -138,6 +141,15 @@ export default {
     // format(percentage) {
     //   return percentage === 100 ? '100%' : `${percentage}%`
     // },
+    getVideoDuration(fileUrl) {
+      const _this = this
+      const audioElement = new Audio(fileUrl)
+      audioElement.addEventListener('loadedmetadata', function() {
+        _this.duration = parseInt(audioElement.duration) // 得到时长为秒，小数，182.36
+        console.log(_this.duration)
+        // self.ruleForm.videoDuration = parseInt(result) // 转为int值
+      })
+    },
     uploadFile() {
       // 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。
       const _this = this
@@ -167,7 +179,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)
@@ -175,7 +187,6 @@ export default {
             this.filePercentTxt = '上传成功'
             console.log('success')
           }
-          console.log(_this.fileData)
           // _this.fileData[0].filePercent = parseInt(res.total.percent)
           // console.log(_this.fileData[0].filePercent)
           // _this.fileData.forEach((value, index) => {
@@ -194,6 +205,11 @@ export default {
           console.log(res.key)
           _this.uploadFileUrl = 'http://' + _this.baseurl + '/' + res.key
           console.log(_this.uploadFileUrl)
+          // 上传完成后调用保存素材方法
+          _this.getVideoDuration(_this.uploadFileUrl)
+          setTimeout(() => {
+            _this.$emit('saveMaterial')
+          }, 2000)
           // console.log(_this.fileUrl.push({ name: _this.file.name, url: _this.fileUrl }))
           // console.log(_this.fileUrl)
         }

src/views/materialContent/materialList/index.vue

@@ -3,7 +3,7 @@
     <div class="material_content">
       <!-- 上传 / 创建文件夹 -->
       <div class="material_item cont_upload">
-        <Upload rel="uploadMaterial" />
+        <Upload ref="uploadMaterial" @saveMaterial="saveMaterial" />
         <el-button class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button>
       </div>
       <!-- 文件夹list -->
@@ -21,18 +21,19 @@
       <div
         v-for="(item, index) in materialList"
         :key="'list-'+index"
-        :class="['material_item', 'item_cont', { 'item_multi': contentIds.includes(item.id) }]"
+        :class="['material_item', 'item_cont', { 'item_multi': selectedList.includes(item.material_id) }]"
       >
-        <img v-if="item.img_path" :src="item.img_path" alt />
-        <div v-if="item.type == 2" class="radio_img"></div>
+        <img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
+        <div v-if="item.material_type == 2" class="radio_img"></div>
         <div class="item_format">
-          <span class="item_type">{{ item.material_type }}</span>
-          <span v-if="item.material_type !== 0" class="item_time">03:00</span>
+          <span class="item_type">{{ materialPostfix[index] }}</span>
+          <span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span>
         </div>
         <div class="file_name">{{ item.material_name }}</div>
-        <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span>
+        <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.material_id, item.material_type)"></span>
       </div>
     </div>
+
     <!-- 创建文件夹layer / 编辑 -->
     <div class="publish_layer">
       <el-dialog
@@ -64,19 +65,19 @@
     </div>
 
     <!-- 多选操作 -->
-    <div v-if="contentIds.length !== 0 || folderChecked != -1" class="multi_handle">
+    <div v-if="selectedList.length !== 0 || folderChecked != -1" class="multi_handle">
       <div v-if="isEditFolder != true">
         <el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button>
-        <el-button v-if="isEditFolder != true" type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button>
+        <el-button type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button>
         <el-button
           type="button"
           class="mulit_btn"
-          :disabled="contentIds.length > 1"
+          :disabled="selectedList.length > 1"
           @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 type="button" class="mulit_btn mulit_delt_btn">删除</el-button>
+        <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMyMaterial">删除</el-button>
       </div>
       <div v-else>
         <el-button
@@ -123,15 +124,32 @@
 </template>
 
 <script>
-import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial } from '@/api/material/material'
+import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial, deleteMyMaterial } from '@/api/material/material'
 import Upload from '../../components/upload'
 import UploadCover from '../../components/upload_cover'
+import { getSeconds } from '@/utils/index.js'
 export default {
   name: 'MaterialList',
   components: { Upload, UploadCover },
+  filters: {
+    getSeconds(s) {
+      return getSeconds(s)
+    }
+  },
+  props: {
+    isMultiSelected: {
+      type: Boolean,
+      required: true
+    },
+    mulitText: {
+      type: String,
+      required: true
+    }
+  },
   data() {
     return {
       orga_id: '133221333123111', // 机构ID
+      thisFoldId: null, // 当前父文件夹ID
       materialFolders: [], // 文件夹list
       materialList: [], // 素材库list
       folderForm: { // form
@@ -144,6 +162,11 @@ export default {
       isEditFolder: false, // 是否编辑文件夹
       mkdirVisible: false, // 新建编辑layer
       folderChecked: -1, // 文件夹是否单击选中
+      formatType: null, // 上传素材类型 0 img 1 video 2 audio
+      materialImgPath: '', // 素材封面
+      materialPostfix: [], // 文件后缀格式
+      materialDuration: 0, // 时长
+      selectedList: [], // 素材选中的
       // uploadListVisible: false,
       // progressLoading: true,
       // percentage: 0,
@@ -156,7 +179,6 @@ export default {
       ],
       listData: [
       ],
-      contentIds: [],
       wjjList: [
         {
           id: '1',
@@ -170,11 +192,14 @@ export default {
     }
   },
   computed: {
+    defaultImg() {
+      return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
+    }
   },
   watch: {
     isMultiSelected(newName, oldName) {
       if (newName === false) {
-        this.contentIds = []
+        this.selectedList = []
       }
     }
   },
@@ -186,21 +211,30 @@ export default {
     // 获取素材库list
     getMaterialList() {
       const params = {
-        'folder_id': '',
-        'material_name': '',
-        'material_type': 0,
+        '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
         // 创建文件夹获取data
-        this.folderForm.fid = res.data.thisFoldId
+        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
+          )
+          item.material_name = item.material_name.split('.')[0]
+        })
       })
     },
     // 新建 / 编辑 文件夹
     handleMkdir(mkdirType) {
       this.mkdirVisible = true
+      this.folderForm.fid = this.thisFoldId
       this.folderForm.orga_id = this.orga_id
       if (mkdirType === 0) {
         this.$nextTick(() => {
@@ -217,7 +251,6 @@ export default {
     },
     // 选择 编辑 文件夹
     editFolder(item, index) {
-      console.log(item)
       if (index !== this.folderChecked) {
         this.folderChecked = index
         this.isEditFolder = true
@@ -240,8 +273,10 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        const id = this.folderForm.id
-        deleteMaterialFolder(id).then(res => {
+        const params = {
+          id: this.folderForm.id
+        }
+        deleteMaterialFolder(params).then(res => {
           if (res.code === 200) {
             this.$message({
               message: '删除文件夹成功',
@@ -259,25 +294,49 @@ 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': '', // 素材存放路径
+        'deposit_url': uploadFileUrl, // 素材存放路径
         'device_direction': 1, // 横竖屏 1.横屏 2.竖屏,
-        'folder_id': '', // 文件夹id
-        'img_path': '', // 封面图片id
-        'material_id': '', // 素材id
-        'material_name': '', // 素材名称
-        'material_type': '', // 素材类别
+        '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.主题库
       }
-      saveMaterialFolder(params).then(res => {
-        // if (res.code == 200) {
-
-        // }
+      // 'material_id': '', // 素材id 创建时不需要
+      saveMaterial(params).then(res => {
+        if (res.code === 200) {
+          this.$message({
+            message: '上传素材成功',
+            type: 'success'
+          })
+          this.getMaterialList()
+        }
       })
     },
     // 提交表单 - 新建/编辑
@@ -322,29 +381,10 @@ export default {
         }
       )
     },
-    UploadList() {
-      this.uploadListVisible = true
-    },
-    selectedItem(id, type) {
-      console.log('type', type)
-      const arr = this.contentIds
-      // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
-      if (arr.includes(id)) {
-        // 判断数组中是否有选中的id,如果有则去掉
-        const index = arr.indexOf(id)
-        if (index > -1) {
-          arr.splice(index, 1)
-        }
-      } else {
-        this.contentIds.push(id)
-        this.formType = type
-      }
-      console.log('formType', this.formType)
-    },
+    // 素材 - 编辑
     editContent() {
       this.mkdirVisible = true
       this.labelTxt = '文件名称'
-
       if (this.formType === 'vedio') {
         this.layerTitle = '视频编辑'
       } else if (this.formType === 'audio') {
@@ -353,10 +393,58 @@ export default {
         this.layerTitle = '图片编辑'
       }
       const resType = this.listData.filter(item => {
-        return item.id === this.contentIds[0]
+        return item.id === this.selectedList[0]
       })
       this.folderForm.name = resType[0].name
     },
+    // 素材 - 多选
+    selectedItem(id, type) {
+      console.log(id)
+      console.log(type)
+      const arr = this.selectedList
+      if (arr.includes(id)) {
+        const index = arr.indexOf(id)
+        console.log(index)
+        if (index > -1) {
+          arr.splice(index, 1)
+        }
+      } else {
+        this.selectedList.push(id)
+        // this.formType = type
+      }
+      console.log(this.selectedList)
+    },
+    // 素材 - 删除
+    deleteMyMaterial() {
+      this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          id: this.selectedList[0]
+        }
+        deleteMyMaterial(params).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: '删除文件夹成功',
+              type: 'success'
+            })
+            this.getMaterialList()
+            this.selectedList = []
+            console.log(this.selectedList)
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          message: '已取消删除',
+          type: 'info'
+        })
+      })
+    },
+    UploadList() {
+      this.uploadListVisible = true
+    },
     moveingTo(index) {
       this.movingVisible = true
       // this.movingChecked = index
@@ -433,5 +521,9 @@ export default {
     }
   }
 }
-
+.multi_handle{
+  div{
+    display: flex;
+  }
+}
 </style>