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