7 changed files with 710 additions and 474 deletions
-
9src/api/material/material.js
-
10src/api/release/release.js
-
10src/utils/index.js
-
201src/views/components/MaterialCompontentList.vue
-
761src/views/immediateRelease/index.vue
-
31src/views/materialContent/index.vue
-
162src/views/materialContent/materialList/index.vue
@ -0,0 +1,10 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 编辑 - 发布信息
|
||||
|
export function saveRelease(parameter) { |
||||
|
return request({ |
||||
|
url: 'api/release/saveRelease', |
||||
|
method: 'post', |
||||
|
data: parameter |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,201 @@ |
|||||
|
<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.material_type == 2" class="radio_img"></div> |
||||
|
<div class="item_format"> |
||||
|
<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="checkedItem(item)"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getMaterialList } from '@/api/material/material' |
||||
|
import { getSeconds } from '@/utils/index.js' |
||||
|
export default { |
||||
|
name: 'MaterialList', |
||||
|
components: { }, |
||||
|
filters: { |
||||
|
getSeconds(s) { |
||||
|
return getSeconds(s) |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
isMultiSelected: { |
||||
|
type: Boolean, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
orga_id: '133221333123111', // 机构ID |
||||
|
rootFolderId: null, // 根目录文件夹ID |
||||
|
thisFoldId: null, // 当前父文件夹ID |
||||
|
materialFolders: [], // 文件夹list |
||||
|
materialList: [], // 素材库list |
||||
|
materialPostfix: [], // 文件后缀格式 |
||||
|
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 = [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getMaterialList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取素材库list |
||||
|
getMaterialList() { |
||||
|
this.materialFolders = [] |
||||
|
this.materialList = [] |
||||
|
let params |
||||
|
if (this.isToFolder) { |
||||
|
console.log('文件夹内') |
||||
|
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': null, |
||||
|
'orga_id': this.orga_id |
||||
|
} |
||||
|
} else { |
||||
|
console.log('文件夹外') |
||||
|
localStorage.removeItem('currentFolderId') |
||||
|
params = { |
||||
|
'folder_id': null, |
||||
|
'material_name': null, |
||||
|
'material_type': null, |
||||
|
'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 |
||||
|
// 素材类型格式处理 |
||||
|
this.materialList.forEach((item, key) => { |
||||
|
this.materialPostfix[key] = item.deposit_url.substring( |
||||
|
item.deposit_url.lastIndexOf('.') + 1, |
||||
|
item.deposit_url.length |
||||
|
) |
||||
|
}) |
||||
|
} 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> |
||||
761
src/views/immediateRelease/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue