|
|
|
@ -1,16 +1,37 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
|
|
<el-tab-pane label="为你推荐" name="1" /> |
|
|
|
<el-tab-pane label="人工智能" name="2" /> |
|
|
|
<el-tab-pane label="党建文化" name="3" /> |
|
|
|
<el-tab-pane label="节日节气" name="4" /> |
|
|
|
<el-tab-pane label="艺术鉴赏" name="5" /> |
|
|
|
<el-tab-pane label="名人介绍" name="6" /> |
|
|
|
<el-tab-pane label="摄影" name="7" /> |
|
|
|
<el-tab-pane label="书法" name="8" /> |
|
|
|
<el-tabs v-model="activeName" @tab-click="tabHandleClick"> |
|
|
|
<el-tab-pane |
|
|
|
v-for="item in tabItem" |
|
|
|
:key="item.key" |
|
|
|
:label="item.name" |
|
|
|
:name="item.key" |
|
|
|
/> |
|
|
|
</el-tabs> |
|
|
|
<el-tabs v-if="showItemInfo" v-model="themeItemActive" class="theme_item_tab" @tab-click="tabItemClick"> |
|
|
|
<el-tab-pane label="竖屏" name="1" /> |
|
|
|
<el-tab-pane label="横屏" name="2" /> |
|
|
|
<el-tab-pane label="我的画册" name="3" /> |
|
|
|
</el-tabs> |
|
|
|
<div class="theme_img"> |
|
|
|
<!-- 我的画册-创建文件夹btn --> |
|
|
|
<div v-if="themeItemActive=='3'" class="theme_mkdir cont_upload" @click="handleMkdir"> |
|
|
|
<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'" class="theme_mkdir folder"> |
|
|
|
<div class="icon_bg"> |
|
|
|
<svg class="font-icon icon" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-wenjianjia" /> |
|
|
|
</svg> |
|
|
|
<!-- <img src /> --> |
|
|
|
</div> |
|
|
|
<p class="file_name">文件夹</p> |
|
|
|
</div> |
|
|
|
<!-- 主题库list --> |
|
|
|
<div |
|
|
|
v-for="(item, index) in listThemeData" |
|
|
|
:key="index" |
|
|
|
@ -28,11 +49,98 @@ |
|
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 多选操作 --> |
|
|
|
<div v-if="selectedListIds.length !== 0" class="multi_handle"> |
|
|
|
<el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button> |
|
|
|
<el-button type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button> |
|
|
|
<el-button type="button" class="mulit_btn">下载</el-button> |
|
|
|
<el-button v-if="themeItemActive!='3'" type="button" class="mulit_btn">添加到画册</el-button> |
|
|
|
<el-button v-if="themeItemActive=='3'" type="button" class="mulit_btn" @click="moveingTo()">移动</el-button> |
|
|
|
<el-button v-if="themeItemActive=='3'" type="button" class="mulit_btn mulit_delt_btn">删除</el-button> |
|
|
|
</div> |
|
|
|
<!-- 创建文件夹layer / 编辑 --> |
|
|
|
<div class="publish_layer"> |
|
|
|
<el-dialog |
|
|
|
title="创建文件夹" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:show-close="false" |
|
|
|
:visible.sync="mkdirVisible" |
|
|
|
width="616px" |
|
|
|
height="384px" |
|
|
|
> |
|
|
|
<el-form ref="form" :inline="true" :model="form" size="small" label-width="100px"> |
|
|
|
<el-form-item |
|
|
|
label="文件夹名称" |
|
|
|
prop="name" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '请输入名称', trigger: 'blur' } |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="form.name" style="width: 336px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="封面" prop="file"> |
|
|
|
<el-upload action="#" list-type="picture-card" :auto-upload="false"> |
|
|
|
<img src="@/assets/images/t-sc.png" alt /> |
|
|
|
<div slot="file" slot-scope="{file}"> |
|
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt /> |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round>保 存</el-button> |
|
|
|
<el-button round @click="mkdirVisible=false">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 移动至layer --> |
|
|
|
<div class="wjj_layer"> |
|
|
|
<!-- 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)" |
|
|
|
> |
|
|
|
<svg class="font-icon icon" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-wenjianjia" /> |
|
|
|
</svg> |
|
|
|
<p class="wjj_name">{{ item.name }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round>确定</el-button> |
|
|
|
<el-button round @click="movingVisible=false">取消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import crudUser from '@/api/system/user' |
|
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
|
const defaultForm = { |
|
|
|
id: null, |
|
|
|
name: '', |
|
|
|
file: null |
|
|
|
} |
|
|
|
export default { |
|
|
|
name: 'ThemeGalleryList', |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }}) |
|
|
|
}, |
|
|
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
|
|
props: { |
|
|
|
isMultiSelected: { |
|
|
|
type: Boolean, |
|
|
|
@ -50,6 +158,10 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeName: '1', |
|
|
|
themeItemActive: '1', |
|
|
|
mkdirVisible: false, |
|
|
|
movingVisible: false, |
|
|
|
movingChecked: null, |
|
|
|
listThemeData: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
@ -101,7 +213,51 @@ export default { |
|
|
|
time: '' |
|
|
|
} |
|
|
|
], |
|
|
|
selectedListIds: [] |
|
|
|
selectedListIds: [], |
|
|
|
tabItem: [ |
|
|
|
{ |
|
|
|
key: '1', |
|
|
|
name: '为你推荐' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '2', |
|
|
|
name: '人工智能' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '3', |
|
|
|
name: '党建文化' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '4', |
|
|
|
name: '节日节气' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '5', |
|
|
|
name: '艺术鉴赏' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '6', |
|
|
|
name: '名人介绍' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '7', |
|
|
|
name: '摄影' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '8', |
|
|
|
name: '书法' |
|
|
|
} |
|
|
|
], |
|
|
|
wjjList: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
name: '文件夹1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '文件夹2' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -115,9 +271,27 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// tabClick |
|
|
|
handleClick(tab, event) { |
|
|
|
tabHandleClick(tab, event) { |
|
|
|
console.log(tab, event) |
|
|
|
}, |
|
|
|
tabItemClick(tab, event) { |
|
|
|
console.log(this.themeItemActive) |
|
|
|
console.log(tab, event) |
|
|
|
}, |
|
|
|
// 创建文件夹 |
|
|
|
handleMkdir() { |
|
|
|
this.mkdirVisible = true |
|
|
|
}, |
|
|
|
// 移动至 |
|
|
|
moveingTo(index) { |
|
|
|
this.movingVisible = true |
|
|
|
// this.movingChecked = index |
|
|
|
}, |
|
|
|
// 选择文件夹 |
|
|
|
wjjSelected(index) { |
|
|
|
this.movingChecked = index |
|
|
|
console.log(this.movingChecked) |
|
|
|
}, |
|
|
|
// 多选选中 |
|
|
|
selectedItem(id) { |
|
|
|
const arr = this.selectedListIds |
|
|
|
@ -131,6 +305,14 @@ export default { |
|
|
|
} else { |
|
|
|
this.selectedListIds.push(id) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 即时发布/定时发布 |
|
|
|
publishHandle(index) { |
|
|
|
this.$router.push( |
|
|
|
{ |
|
|
|
path: '/release', query: { tag: index } |
|
|
|
} |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -139,18 +321,42 @@ export default { |
|
|
|
.el-tabs{ |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
::v-deep .el-tabs__item.is-active{ |
|
|
|
color: #3a8aeb; |
|
|
|
} |
|
|
|
.theme_img { |
|
|
|
padding-left: 26px; |
|
|
|
height: calc(100vh - 449px); |
|
|
|
overflow-y: auto; |
|
|
|
.file_name{ |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 30px; |
|
|
|
background: rgba(255,255,255,0.6); |
|
|
|
line-height: 30px; |
|
|
|
.theme_mkdir{ |
|
|
|
width: 140px; |
|
|
|
height: 250px; |
|
|
|
margin: 0 24px 24px 0; |
|
|
|
&.cont_upload .font-icon{ |
|
|
|
width: 45px; |
|
|
|
height: 45px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
&.folder .font-icon{ |
|
|
|
width: 84px; |
|
|
|
height: 69px; |
|
|
|
} |
|
|
|
} |
|
|
|
.theme_item{ |
|
|
|
width: 140px; |
|
|
|
height: 250px; |
|
|
|
|
|
|
|
} |
|
|
|
.icon_bg { |
|
|
|
height: 220px; |
|
|
|
} |
|
|
|
.theme_item{ |
|
|
|
.file_name{ |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 30px; |
|
|
|
background: rgba(255,255,255,0.6); |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
