|
|
@@ -5,53 +5,47 @@
|
|
|
<auth :auths="['photoAlbum/batchUpdate']"><el-button type="primary" v-if="!sorting" @click="sorting = true">调整排序</el-button></auth>
|
|
|
<el-button type="primary" v-if="sorting" @click="setSort()">确定</el-button>
|
|
|
<el-button type="primary" v-if="sorting" @click="stopSort()">取消</el-button>
|
|
|
- <!-- <el-button type="primary" @click="openUpload()">上传图片</el-button> -->
|
|
|
</div>
|
|
|
- <el-timeline reverse class="timeline">
|
|
|
- <el-timeline-item
|
|
|
- placement="top"
|
|
|
- v-for="(timeDetail, key) in times"
|
|
|
- :key="key"
|
|
|
- :timestamp="key">
|
|
|
- <draggable :list="timeDetail.list" :disabled="!sorting" class="drag-container">
|
|
|
- <div
|
|
|
- v-for="item in timeDetail.list"
|
|
|
- :key="item.id"
|
|
|
- class="item-container"
|
|
|
- @click="toDetail(item)"
|
|
|
- >
|
|
|
- <group
|
|
|
- class="item"
|
|
|
- :detail="item"
|
|
|
- :name="item.name"
|
|
|
- />
|
|
|
- <auth :auths="['photoAlbum/batchUpdate']">
|
|
|
- <div class="ctrls">
|
|
|
- <div class="photoNum">{{item.photoNum}} 张</div>
|
|
|
- <div class="dropdown">
|
|
|
- <el-tooltip effect="dark" content="修改相册" placement="top" :open-delay=".5">
|
|
|
- <i class="el-icon-edit" @click.stop="openForm(item)"></i>
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip effect="dark" content="删除" placement="top" :open-delay=".5">
|
|
|
- <i class="el-icon-delete" @click.stop="removeItem(item)"></i>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <!-- <el-dropdown class="dropdown" @command="command => handleCommand(command, item)">
|
|
|
- <span class="el-dropdown-link">
|
|
|
- 更多操作 <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
- </span>
|
|
|
- <el-dropdown-menu slot="dropdown" class="ctrls-dropdown">
|
|
|
- <el-dropdown-item command="realName">重命名</el-dropdown-item>
|
|
|
- <el-dropdown-item command="remove" style="color: red;">删除</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown> -->
|
|
|
+ <el-collapse style="margin-top: 20px;" v-model="activeNames">
|
|
|
+ <el-collapse-item v-for="(yitem, ykey) in years" :title="ykey + '年 相册'" :key="ykey" :name="ykey">
|
|
|
+ <empty v-if="yitem.length == 0"/>
|
|
|
+ <el-timeline reverse class="timeline">
|
|
|
+ <el-timeline-item
|
|
|
+ placement="top"
|
|
|
+ v-for="(timeDetail, key) in yitem"
|
|
|
+ :key="key"
|
|
|
+ :timestamp="key">
|
|
|
+ <draggable :list="timeDetail" :disabled="!sorting" class="drag-container" @change="() => draggableChange(timeDetail, key)">
|
|
|
+ <div
|
|
|
+ v-for="item in timeDetail"
|
|
|
+ :key="item.id"
|
|
|
+ class="item-container"
|
|
|
+ @click="toDetail(item)"
|
|
|
+ >
|
|
|
+ <group
|
|
|
+ class="item"
|
|
|
+ :detail="item"
|
|
|
+ :name="item.name"
|
|
|
+ />
|
|
|
+ <auth :auths="['photoAlbum/batchUpdate']">
|
|
|
+ <div class="ctrls">
|
|
|
+ <div class="photoNum">{{item.photoNum}} 张</div>
|
|
|
+ <div class="dropdown">
|
|
|
+ <el-tooltip effect="dark" content="修改相册" placement="top" :open-delay=".5">
|
|
|
+ <i class="el-icon-edit" @click.stop="openForm(item)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip effect="dark" content="删除" placement="top" :open-delay=".5">
|
|
|
+ <i class="el-icon-delete" @click.stop="removeItem(item)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </auth>
|
|
|
</div>
|
|
|
- </auth>
|
|
|
- </div>
|
|
|
- </draggable>
|
|
|
- </el-timeline-item>
|
|
|
- </el-timeline>
|
|
|
- <empty v-if="list.length == 0"/>
|
|
|
+ </draggable>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
<el-dialog
|
|
|
:title="detail ? '修改相册' : '创建相册'"
|
|
|
:visible.sync="formVisible"
|
|
|
@@ -100,13 +94,20 @@ export default {
|
|
|
detail: null,
|
|
|
list: [],
|
|
|
sorting: false,
|
|
|
- times: {}
|
|
|
+ times: {},
|
|
|
+ years: {},
|
|
|
+ activeNames: [],
|
|
|
+ changed: {}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.FetchList()
|
|
|
},
|
|
|
methods: {
|
|
|
+ draggableChange(list, key) {
|
|
|
+ console.log(list)
|
|
|
+ this.changed[key] = list
|
|
|
+ },
|
|
|
submited() {
|
|
|
this.page = 1
|
|
|
this.FetchList()
|
|
|
@@ -124,21 +125,23 @@ export default {
|
|
|
stopSort() {
|
|
|
this.sorting = false
|
|
|
this.list = this.list.sort((a, b) => a.order - b.order)
|
|
|
+ this.changed = {}
|
|
|
},
|
|
|
async setSort() {
|
|
|
try {
|
|
|
- const times = Object.values(this.times)
|
|
|
+ const times = Object.values(this.changed)
|
|
|
let list = []
|
|
|
for (const item of times) {
|
|
|
- list = list.concat(item.list)
|
|
|
+ list = list.concat(item.map((item, index) => ({
|
|
|
+ ...item,
|
|
|
+ order: index
|
|
|
+ })))
|
|
|
}
|
|
|
- await photoAlbumUpdate(list.map((item, index) => ({
|
|
|
- ...item,
|
|
|
- order: index
|
|
|
- })))
|
|
|
+ await photoAlbumUpdate(list)
|
|
|
this.sorting = false
|
|
|
this.$message.success('修改成功')
|
|
|
this.FetchList()
|
|
|
+ this.changed = {}
|
|
|
} catch (error) {}
|
|
|
},
|
|
|
getTimestamp(time) {
|
|
|
@@ -149,26 +152,50 @@ export default {
|
|
|
const res = await photoAlbumQueryPage({
|
|
|
musicGroupId: this.$route.query.id
|
|
|
})
|
|
|
+ var ys = {}
|
|
|
const times = {}
|
|
|
for (const item of res.data.rows) {
|
|
|
const timeKey = dayjs(item.timeLine).format('YYYY-MM')
|
|
|
+ const timeYear = dayjs(item.timeLine).format('YYYY')
|
|
|
+ if (!ys[timeYear]) {
|
|
|
+ ys[timeYear] = {}
|
|
|
+ }
|
|
|
if (!times[timeKey]) {
|
|
|
times[timeKey] = {
|
|
|
list: [],
|
|
|
}
|
|
|
}
|
|
|
+ if (!ys[timeYear][timeKey]) {
|
|
|
+ ys[timeYear][timeKey] = []
|
|
|
+ }
|
|
|
+ ys[timeYear][timeKey].push({
|
|
|
+ ...item,
|
|
|
+ timeKey,
|
|
|
+ timeYear
|
|
|
+ })
|
|
|
times[timeKey].list.push({
|
|
|
...item
|
|
|
})
|
|
|
}
|
|
|
- var sortTime = {};
|
|
|
- Object.keys(times).sort().map(key => {
|
|
|
- sortTime[key] = times[key]
|
|
|
- sortTime[key].list.sort()
|
|
|
- })
|
|
|
- // console.log(times)
|
|
|
+ // let sortTime = {};
|
|
|
+ // Object.keys(times).sort().map(key => {
|
|
|
+ // sortTime[key] = times[key]
|
|
|
+ // sortTime[key].list.sort()
|
|
|
+ // })
|
|
|
this.list = res.data.rows
|
|
|
- this.times = sortTime
|
|
|
+ // this.times = sortTime
|
|
|
+ const sortyears = {}
|
|
|
+ const ykeys = Object.keys(ys).sort()
|
|
|
+ for (const tkey of ykeys) {
|
|
|
+ const mkeys = Object.keys(ys[tkey]).sort()
|
|
|
+ const mdata = {}
|
|
|
+ for (const mkey of mkeys) {
|
|
|
+ mdata[mkey] = ys[tkey][mkey]
|
|
|
+ }
|
|
|
+ sortyears[tkey] = mdata
|
|
|
+ }
|
|
|
+ this.years = sortyears
|
|
|
+ this.activeNames = ykeys[0]
|
|
|
} catch (error) {}
|
|
|
},
|
|
|
async removeItem(item) {
|
|
|
@@ -217,6 +244,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
cursor: pointer;
|
|
|
+ height: 112.5px;
|
|
|
.photoNum{
|
|
|
margin: auto;
|
|
|
text-align: center;
|
|
|
@@ -260,9 +288,13 @@ export default {
|
|
|
.timeline{
|
|
|
margin-top: 20px;
|
|
|
margin-left: 10px;
|
|
|
+ padding-left: 100px;
|
|
|
/deep/ .el-timeline-item__node{
|
|
|
background-color: #14928A;
|
|
|
}
|
|
|
+ /deep/ .el-timeline-item__timestamp {
|
|
|
+ margin-left: -100px;
|
|
|
+ }
|
|
|
}
|
|
|
// .group{
|
|
|
// }
|
wolyshaw