|
|
|
@ -8,16 +8,27 @@ |
|
|
|
<el-tab-pane label="横屏" name="2" /> |
|
|
|
<el-tab-pane label="我的画册" name="3" /> |
|
|
|
</el-tabs> |
|
|
|
<div v-if="isToFolder && themeItemActive=='3'" class="material_crumbs"> |
|
|
|
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|
|
|
<el-breadcrumb-item><a href="/theme">主题库</a></el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item><a @click="breadcrumbToAlbum">我的画册</a></el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item>{{ currentFolder }}</el-breadcrumb-item> |
|
|
|
</el-breadcrumb> |
|
|
|
</div> |
|
|
|
<div class="theme_img"> |
|
|
|
<!-- 我的画册-创建文件夹btn --> |
|
|
|
<div v-if="themeItemActive=='3'" class="theme_mkdir cont_upload" @click="handleMkdir(0)"> |
|
|
|
<div v-if="themeItemActive=='3' && !isToFolder" class="theme_mkdir cont_upload" @click="handleMkdir(0)"> |
|
|
|
<svg class="font-icon icon" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-a-xinzeng" /> |
|
|
|
</svg> |
|
|
|
<el-button class="mkdir_btn" round type="primary">创建文件夹</el-button> |
|
|
|
</div> |
|
|
|
<div v-if="themeItemActive=='3' && isToFolder" class="theme_mkdir cont_upload"> |
|
|
|
<el-button class="cont_upload_btn" round type="primary">添加</el-button> |
|
|
|
<el-button class="return_btn" round type="primary" @click="breadcrumbToAlbum">返回</el-button> |
|
|
|
</div> |
|
|
|
<!-- 我的画册-某一文件夹 --> |
|
|
|
<div v-if="themeItemActive=='3'"> |
|
|
|
<div v-if="themeItemActive=='3'" style="display:flex"> |
|
|
|
<div v-for="(item,index) in materialFolders" :key="item.id" :class="['theme_mkdir', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)"> |
|
|
|
<div class="icon_bg"> |
|
|
|
<svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true"> |
|
|
|
@ -30,7 +41,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 主题库list --> |
|
|
|
<div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', { 'item_multi': selectedListIds.includes(item.material_id) }]"> |
|
|
|
<div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', { '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 v-if="showItemInfo" class="item_format"> |
|
|
|
@ -42,7 +53,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 多选操作 --> |
|
|
|
<div v-if="selectedListIds.length !== 0" class="multi_handle"> |
|
|
|
<div v-if="selectedListId.length !== 0 || folderChecked != -1" class="multi_handle"> |
|
|
|
<div v-if="!isEditFolder && folderChecked == -1 && isMultiSelected"> |
|
|
|
<el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button> |
|
|
|
<el-button type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button> |
|
|
|
@ -55,7 +66,6 @@ |
|
|
|
<el-button type="button" class="mulit_btn" @click="handleMkdir(1)">编辑</el-button> |
|
|
|
<el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- 创建文件夹layer / 编辑 --> |
|
|
|
<div class="publish_layer"> |
|
|
|
@ -86,7 +96,7 @@ |
|
|
|
<!-- width="736px" --> |
|
|
|
<el-dialog title="移动至" :close-on-click-modal="false" :show-close="false" :visible.sync="movingVisible" width="576px" height="384px"> |
|
|
|
<div class="wjj_list"> |
|
|
|
<div v-for="(item, index) in wjjList" :key="index" :class="['wjj_item', { 'wjj_item_active': movingChecked === index }]" @click="wjjSelected(index)"> |
|
|
|
<div v-for="(item, index) in folderList" :key="index" :class="['wjj_item', { 'wjj_item_active': folderListChecked == index }]" @click="wjjSelected(item,index)"> |
|
|
|
<svg class="font-icon icon" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-wenjianjia" /> |
|
|
|
</svg> |
|
|
|
@ -94,7 +104,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round>确定</el-button> |
|
|
|
<el-button type="primary" round @click="moveFile">确定</el-button> |
|
|
|
<el-button round @click="movingVisible=false">取消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
@ -102,7 +112,7 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { FetchThemeClassList, FetchThemeGallery, FetchMyAlbum, FetchAddToMyAlbum, FetchDeleteMyAlbum, FetchSaveThemeFolder } from '@/api/theme/theme.js' |
|
|
|
import { FetchThemeClassList, FetchThemeGallery, FetchMyAlbum, FetchAddToMyAlbum, FetchDeleteMyAlbum, FetchSaveThemeFolder, FetchDeleteThemeFolder, FetchMoveMyThemeMaterial } from '@/api/theme/theme.js' |
|
|
|
import { getSeconds, getFileFormat } from '@/utils/index.js' |
|
|
|
import UploadCover from './upload_cover' |
|
|
|
export default { |
|
|
|
@ -161,23 +171,20 @@ export default { |
|
|
|
orga_id: '' |
|
|
|
}, |
|
|
|
materialFolders: [], // 文件夹list |
|
|
|
selectedListIds: [], |
|
|
|
selectedListId: [], |
|
|
|
selectinFolderid: [], // 关联素材得主键得ID |
|
|
|
selectedMaterial: [], // 素材选中 |
|
|
|
rootFolderId: null, |
|
|
|
thisAlbumFoldId: null, |
|
|
|
isEditFolder: false, // 是否编辑文件夹 |
|
|
|
mkdirVisible: false, // 新建编辑layer |
|
|
|
folderChecked: -1, // 文件夹是否单击选中 |
|
|
|
wjjList: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
name: '文件夹1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '文件夹2' |
|
|
|
} |
|
|
|
] |
|
|
|
isEditMaterial: false, // 是否是编辑素材 |
|
|
|
folderList: [], // 文件夹list |
|
|
|
folderListChecked: -1, |
|
|
|
isToFolder: false, // 是否进入文件夹 |
|
|
|
currentFolder: '', // 当前进入的文件夹名 |
|
|
|
currentFolderId: null |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -188,13 +195,14 @@ export default { |
|
|
|
watch: { |
|
|
|
isMultiSelected(newName, oldName) { |
|
|
|
if (newName === false) { |
|
|
|
this.selectedListIds = [] |
|
|
|
this.selectedListId = [] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getThemeClassList() |
|
|
|
this.getMyAlbum() |
|
|
|
document.addEventListener('click', this.hiddenFolderActiveClick) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 根据机构id查询主题库分类列表 |
|
|
|
@ -220,12 +228,17 @@ export default { |
|
|
|
// 横屏 / 竖屏 / 画册切换 |
|
|
|
tabItemClick() { |
|
|
|
if (this.themeItemActive == 3) { |
|
|
|
this.$router.push('/theme') |
|
|
|
this.getMyAlbum() |
|
|
|
} else { |
|
|
|
this.themeGalleryList = [] |
|
|
|
this.getThemeGallery() |
|
|
|
} |
|
|
|
}, |
|
|
|
breadcrumbToAlbum() { |
|
|
|
this.$router.push('/theme') |
|
|
|
this.getMyAlbum() |
|
|
|
}, |
|
|
|
// 获取主题库list |
|
|
|
getThemeGallery() { |
|
|
|
this.themeListForm.orga_id = this.orga_id |
|
|
|
@ -244,21 +257,42 @@ export default { |
|
|
|
}, |
|
|
|
// 获取我的画册 list |
|
|
|
getMyAlbum() { |
|
|
|
let inOrOutFolderId |
|
|
|
if (this.$route.query.folderTag) { |
|
|
|
console.log('文件夹内') |
|
|
|
this.isToFolder = true |
|
|
|
this.currentFolder = localStorage.getItem('currentFolder') |
|
|
|
this.currentFolderId = localStorage.getItem('currentFolderId') |
|
|
|
inOrOutFolderId = this.currentFolderId |
|
|
|
} else { |
|
|
|
console.log('文件夹外') |
|
|
|
this.isToFolder = false |
|
|
|
localStorage.removeItem('currentFolder') |
|
|
|
localStorage.removeItem('currentFolderId') |
|
|
|
inOrOutFolderId = null |
|
|
|
} |
|
|
|
const params = { |
|
|
|
theme_name: null, |
|
|
|
theme_class: null, |
|
|
|
device_direction: null, |
|
|
|
orga_id: this.orga_id, |
|
|
|
start_time: null, |
|
|
|
end_time: null, |
|
|
|
folder_id: null |
|
|
|
'theme_name': null, |
|
|
|
'theme_class': null, |
|
|
|
'device_direction': null, |
|
|
|
'orga_id': this.orga_id, |
|
|
|
'start_time': null, |
|
|
|
'end_time': null, |
|
|
|
'folder_id': inOrOutFolderId |
|
|
|
} |
|
|
|
this.materialFolders = [] |
|
|
|
this.themeGalleryList = [] |
|
|
|
FetchMyAlbum(params).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.materialFolders = res.data.materialFolders |
|
|
|
this.themeGalleryList = res.data.pageThemeVO |
|
|
|
this.isAlbumList = res.data.pageThemeVO |
|
|
|
this.thisAlbumFoldId = res.data.thisFoldId |
|
|
|
if (!this.$route.query.folderTag) { |
|
|
|
localStorage.setItem('rootFolderId', res.data.thisFoldId) |
|
|
|
} |
|
|
|
// 创建文件夹获取data |
|
|
|
this.thisFoldId = res.data.thisFoldId |
|
|
|
} else { |
|
|
|
this.$message.error(res.msg) |
|
|
|
} |
|
|
|
@ -267,7 +301,7 @@ export default { |
|
|
|
// 添加到画册 |
|
|
|
addToAlbum() { |
|
|
|
const isRepeatItem = this.isAlbumList.filter(item => { |
|
|
|
return this.selectedListIds.indexOf(item.material_id) != -1 |
|
|
|
return this.selectedListId.indexOf(item.material_id) != -1 |
|
|
|
}) |
|
|
|
console.log(isRepeatItem) |
|
|
|
if (isRepeatItem.length != 0) { |
|
|
|
@ -276,7 +310,7 @@ export default { |
|
|
|
} |
|
|
|
const params = { |
|
|
|
id: this.thisAlbumFoldId, // 文件夹id |
|
|
|
material_ids: this.selectedListIds, // 主题素材id集合 |
|
|
|
material_ids: this.selectedListId, // 主题素材id集合 |
|
|
|
orga_id: this.orga_id |
|
|
|
} |
|
|
|
FetchAddToMyAlbum(params).then(res => { |
|
|
|
@ -307,7 +341,7 @@ export default { |
|
|
|
const id = item.material_id |
|
|
|
const inFolderId = item.in_folder_id |
|
|
|
// const type = item.material_type |
|
|
|
const arr = this.selectedListIds |
|
|
|
const arr = this.selectedListId |
|
|
|
if (arr.includes(id)) { |
|
|
|
const index = arr.indexOf(id) |
|
|
|
if (index > -1) { |
|
|
|
@ -316,7 +350,7 @@ export default { |
|
|
|
this.selectedMaterial.splice(index, 1) |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.selectedListIds.push(id) |
|
|
|
this.selectedListId.push(id) |
|
|
|
this.selectinFolderid.push(inFolderId) |
|
|
|
this.selectedMaterial.push(item) |
|
|
|
// this.formatType = type |
|
|
|
@ -345,14 +379,14 @@ export default { |
|
|
|
this.isEditMaterial = false |
|
|
|
this.$router.replace( |
|
|
|
{ |
|
|
|
path: '/content', query: { folderTag: 1 } |
|
|
|
path: '/theme', query: { folderTag: 1 } |
|
|
|
} |
|
|
|
) |
|
|
|
this.currentFolder = item.name |
|
|
|
this.currentFolderId = item.id |
|
|
|
localStorage.setItem('currentFolder', this.currentFolder) |
|
|
|
localStorage.setItem('currentFolderId', this.currentFolderId) |
|
|
|
this.getMaterialList() |
|
|
|
this.getMyAlbum() |
|
|
|
this.selectedListId = [] |
|
|
|
this.folderChecked = -1 |
|
|
|
this.isEditFolder = false |
|
|
|
@ -383,45 +417,115 @@ export default { |
|
|
|
this.isEditFolder = false |
|
|
|
} |
|
|
|
}, |
|
|
|
// 删除 文件夹 |
|
|
|
deleteMaterialFolder() { |
|
|
|
console.log(this.folderForm.id) |
|
|
|
this.$confirm('此操作将永久删除该文件夹, 是否继续?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
const ids = [] |
|
|
|
ids.push(this.folderForm.id) |
|
|
|
const params = { |
|
|
|
ids: ids |
|
|
|
} |
|
|
|
FetchDeleteThemeFolder(params).then(res => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.$message({ |
|
|
|
message: '删除文件夹成功', |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
this.getMyAlbum() |
|
|
|
this.folderChecked = -1 |
|
|
|
this.isEditFolder = false |
|
|
|
} |
|
|
|
}) |
|
|
|
}).catch(() => { |
|
|
|
this.$message({ |
|
|
|
message: '已取消删除', |
|
|
|
type: 'info' |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 提交表单 - 新建/编辑 |
|
|
|
submitFolderForm(formName) { |
|
|
|
this.folderForm.img_path = this.$refs.childUpload.imageUrl |
|
|
|
console.log(this.folderForm) |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
// FetchSaveThemeFolder(this.folderForm).then(res => { |
|
|
|
// if (res.code === 200) { |
|
|
|
// this.$message({ |
|
|
|
// message: '创建文件夹成功', |
|
|
|
// duration: 2000, |
|
|
|
// type: 'success' |
|
|
|
// }) |
|
|
|
// this.mkdirVisible = false |
|
|
|
// this.getMaterialList() |
|
|
|
// } else { |
|
|
|
// this.$message({ |
|
|
|
// message: '创建文件夹失败', |
|
|
|
// duration: 2000, |
|
|
|
// type: 'warning' |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// }) |
|
|
|
FetchSaveThemeFolder(this.folderForm).then(res => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.$message({ |
|
|
|
message: '创建文件夹成功', |
|
|
|
duration: 2000, |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
this.mkdirVisible = false |
|
|
|
this.getMyAlbum() |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: '创建文件夹失败', |
|
|
|
duration: 2000, |
|
|
|
type: 'warning' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 移动至 |
|
|
|
// 点击-移动btn |
|
|
|
moveingTo(index) { |
|
|
|
this.folderList = [] |
|
|
|
if (this.materialFolders.length > 0) { |
|
|
|
this.folderList = this.materialFolders.slice(0, this.materialFolders.length) |
|
|
|
} |
|
|
|
this.rootFolderId = localStorage.getItem('rootFolderId') |
|
|
|
const returnFolder = { |
|
|
|
id: this.rootFolderId, |
|
|
|
name: '返回上一级' |
|
|
|
} |
|
|
|
this.folderList.unshift(returnFolder) |
|
|
|
this.movingVisible = true |
|
|
|
// this.movingChecked = index |
|
|
|
}, |
|
|
|
// 选择文件夹 |
|
|
|
wjjSelected(index) { |
|
|
|
this.movingChecked = index |
|
|
|
console.log(this.movingChecked) |
|
|
|
// 文件夹list - 选中操作 |
|
|
|
wjjSelected(item, index) { |
|
|
|
this.folderListChecked = index |
|
|
|
this.thisFoldId = item.id |
|
|
|
}, |
|
|
|
// 点击确定 - 移动素材 |
|
|
|
moveFile() { |
|
|
|
if (this.materialFolders.length > 0) { |
|
|
|
if (this.thisFoldId == this.rootFolderId) { |
|
|
|
this.$message({ |
|
|
|
message: '不能讲文件移动到自身目录下哦~', |
|
|
|
type: 'error' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.thisFoldId = this.rootFolderId |
|
|
|
} |
|
|
|
const params = { |
|
|
|
'folder_id': this.thisFoldId, |
|
|
|
'ids': this.selectinFolderid, |
|
|
|
'material_ids': this.selectedListId |
|
|
|
} |
|
|
|
FetchMoveMyThemeMaterial(params).then(res => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.$message({ |
|
|
|
message: '移动成功', |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
this.movingVisible = false |
|
|
|
this.getMyAlbum() |
|
|
|
this.selectedListId = [] |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 即时发布/定时发布 |
|
|
|
publishHandle(index) { |
|
|
|
this.$router.push( |
|
|
|
@ -455,6 +559,13 @@ export default { |
|
|
|
width: 84px; |
|
|
|
height: 69px; |
|
|
|
} |
|
|
|
.icon_bg{ |
|
|
|
img{ |
|
|
|
display: block; |
|
|
|
width: 140px; |
|
|
|
height: 250px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.theme_item { |
|
|
|
width: 140px; |
|
|
|
@ -475,4 +586,13 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.material_crumbs { |
|
|
|
padding: 15px 24px 0 24px; |
|
|
|
line-height: 30px; |
|
|
|
background: #fff; |
|
|
|
::v-deep .el-breadcrumb { |
|
|
|
font-size: 12px; |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
