5 changed files with 84 additions and 270 deletions
-
210src/views/components/MaterialCompontentList.vue
-
5src/views/components/MyAlbum.vue
-
50src/views/content/material/materialList/index.vue
-
11src/views/dashboard/HomeThemeGallery.vue
-
10src/views/immediateRelease/index.vue
@ -1,210 +0,0 @@ |
|||
<template> |
|||
<div ref="materialContent" class="material_content"> |
|||
<div v-if="isToFolder" class="material_item cont_upload"> |
|||
<el-button class="return_btn" round type="primary" @click="returnFolder">返回</el-button> |
|||
</div> |
|||
<!-- 文件夹list --> |
|||
<div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder']" @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" /> |
|||
</svg> |
|||
<img v-else :src="item.imgPath" /> |
|||
</div> |
|||
<p class="file_name">{{ item.name }}</p> |
|||
</div> |
|||
<div v-for="(item, index) in materialList" :key="'list-'+index" :class="['material_item', 'item_cont', { 'item_multi': selectedListId.includes(item.material_id) }]"> |
|||
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt /> |
|||
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div> |
|||
<div class="item_format"> |
|||
<span class="item_type">{{ item.deposit_url | getFileFormat }}</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="checkedItem(item)"></span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getMaterialList } from '@/api/material/material' |
|||
import { getSeconds, getFileFormat } from '@/utils/index.js' |
|||
export default { |
|||
name: 'MaterialList', |
|||
components: {}, |
|||
filters: { |
|||
getSeconds(s) { |
|||
return getSeconds(s) |
|||
}, |
|||
getFileFormat(str) { |
|||
return getFileFormat(str) |
|||
} |
|||
}, |
|||
props: { |
|||
isMultiSelected: { |
|||
type: Boolean, |
|||
required: true |
|||
}, |
|||
activeItemIndex: { |
|||
type: Number, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
orga_id: '133221333123111', // 机构ID |
|||
rootFolderId: null, // 根目录文件夹ID |
|||
thisFoldId: null, // 当前父文件夹ID |
|||
materialFolders: [], // 文件夹list |
|||
materialList: [], // 素材库list |
|||
materialType: null, |
|||
materialTypeNot: null, |
|||
selectedMaterial: [], // 素材选中 |
|||
selectedListId: [], // 素材选中的material_id |
|||
selectinFolderid: [], // 素材选中的和文件关联表id -- in_folder_id |
|||
isToFolder: false, // 是否进入文件夹 |
|||
isReturn: false, // 是否返回父级文件夹 |
|||
currentFolderId: null // 当前进入文件夹的ID |
|||
} |
|||
}, |
|||
computed: { |
|||
changePlaceholder() { |
|||
return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01' |
|||
}, |
|||
defaultImg() { |
|||
return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"' |
|||
} |
|||
}, |
|||
watch: { |
|||
isMultiSelected(newName, oldName) { |
|||
if (newName === false) { |
|||
this.selectedListId = [] |
|||
} |
|||
}, |
|||
activeItemIndex(val) { |
|||
console.log(val) |
|||
if (val == 0) { |
|||
this.materialType = null |
|||
this.materialTypeNot = 2 |
|||
} else { |
|||
this.materialType = val - 1 |
|||
} |
|||
this.getMaterialList() |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.materialTypeNot = 2 |
|||
this.getMaterialList() |
|||
}, |
|||
methods: { |
|||
// 获取素材库list |
|||
getMaterialList() { |
|||
this.materialFolders = [] |
|||
this.materialList = [] |
|||
let params |
|||
if (this.isToFolder) { |
|||
let folder_id |
|||
if (this.isReturn) { |
|||
folder_id = this.rootFolderId |
|||
} else { |
|||
this.currentFolderId = localStorage.getItem('currentFolderId') |
|||
folder_id = this.currentFolderId |
|||
} |
|||
params = { |
|||
'folder_id': folder_id, |
|||
'material_name': null, |
|||
'material_type': this.materialType, |
|||
'material_type_not': this.materialTypeNot, |
|||
'orga_id': this.orga_id |
|||
} |
|||
} else { |
|||
console.log('文件夹外') |
|||
localStorage.removeItem('currentFolderId') |
|||
params = { |
|||
'folder_id': null, |
|||
'material_name': null, |
|||
'material_type': this.materialType, |
|||
'material_type_not': this.materialTypeNot, |
|||
'orga_id': this.orga_id |
|||
} |
|||
} |
|||
getMaterialList(params).then(res => { |
|||
if (res.code == 200) { |
|||
if (!this.isToFolder) { |
|||
localStorage.setItem('rootFolderId', res.data.thisFoldId) |
|||
} |
|||
this.materialFolders = res.data.materialFolders |
|||
this.materialList = res.data.pageThemeVO |
|||
// 创建文件夹获取data |
|||
this.thisFoldId = res.data.thisFoldId |
|||
} else { |
|||
this.$message({ |
|||
message: res.msg, |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
returnFolder() { |
|||
this.isReturn = false |
|||
this.isToFolder = false |
|||
this.rootFolderId = localStorage.getItem('rootFolderId') |
|||
this.getMaterialList() |
|||
}, |
|||
// 文件夹双击操作 |
|||
floderDbClick(item, index) { |
|||
this.isToFolder = true |
|||
this.currentFolderId = item.id |
|||
localStorage.setItem('currentFolderId', this.currentFolderId) |
|||
this.getMaterialList() |
|||
this.selectedListId = [] |
|||
}, |
|||
// 素材 - 多选 |
|||
checkedItem(item) { |
|||
const id = item.material_id |
|||
const inFolderId = item.in_folder_id |
|||
const type = item.material_type |
|||
const arr = this.selectedListId |
|||
if (arr.includes(id)) { |
|||
const index = arr.indexOf(id) |
|||
if (index > -1) { |
|||
arr.splice(index, 1) |
|||
this.selectinFolderid.splice(index, 1) |
|||
this.selectedMaterial.splice(index, 1) |
|||
} |
|||
} else { |
|||
this.selectedListId.push(id) |
|||
this.selectinFolderid.push(inFolderId) |
|||
this.selectedMaterial.push(item) |
|||
this.formatType = type |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.material_content { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.material_item { |
|||
position: relative; |
|||
width: 174px; |
|||
height: 182px; |
|||
border-radius: 4px; |
|||
margin: 0 20px 20px 0; |
|||
overflow: hidden; |
|||
} |
|||
.item_cont { |
|||
border-color: #dcdde3; |
|||
img { |
|||
width: 100%; |
|||
height: 148px; |
|||
} |
|||
.radio_img { |
|||
width: 100%; |
|||
height: 148px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue