|
|
|
@ -1,13 +1,20 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div v-if="isToFolder" class="material_crumbs"> |
|
|
|
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|
|
|
<el-breadcrumb-item :to="{ path: '/content' }">素材库</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> |
|
|
|
</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="editFolder(item,index)" @dblclick="dbHandle"> |
|
|
|
<div class="icon_bg"> |
|
|
|
<svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-wenjianjia" /> |
|
|
|
@ -53,12 +60,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">保 存2</el-button> |
|
|
|
<el-button round @click="resetForm()">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
@ -162,22 +170,21 @@ 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, // 是否进入文件夹 |
|
|
|
currentFolder: '', // 当前进入的文件夹名 |
|
|
|
movingVisible: false, |
|
|
|
uploadListData: [ |
|
|
|
], |
|
|
|
listData: [ |
|
|
|
uploadListData: [ // 上传列表 |
|
|
|
], |
|
|
|
wjjList: [ |
|
|
|
{ |
|
|
|
@ -208,6 +215,9 @@ export default { |
|
|
|
this.getMaterialList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
dbHandle() { |
|
|
|
alert('双击了') |
|
|
|
}, |
|
|
|
// 获取素材库list |
|
|
|
getMaterialList() { |
|
|
|
const params = { |
|
|
|
@ -223,11 +233,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] |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -251,6 +261,7 @@ export default { |
|
|
|
}, |
|
|
|
// 选择 编辑 文件夹 |
|
|
|
editFolder(item, index) { |
|
|
|
this.isEditMaterial = false |
|
|
|
if (index !== this.folderChecked) { |
|
|
|
this.folderChecked = index |
|
|
|
this.isEditFolder = true |
|
|
|
@ -294,58 +305,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 +351,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 +446,8 @@ export default { |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.selectedList.push(id) |
|
|
|
// this.formType = type |
|
|
|
this.formatType = type |
|
|
|
} |
|
|
|
console.log(this.selectedList) |
|
|
|
}, |
|
|
|
// 素材 - 删除 |
|
|
|
deleteMyMaterial() { |
|
|
|
@ -422,17 +457,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 +517,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; |
|
|
|
|
