|
|
|
@ -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> |
