|
@@ -7,40 +7,48 @@
|
|
|
<el-button type="primary" v-if="sorting" @click="stopSort()">取消</el-button>
|
|
|
<!-- <el-button type="primary" @click="openUpload()">上传图片</el-button> -->
|
|
|
</div>
|
|
|
- <draggable :list="list" :disabled="!sorting" style="display: flex;">
|
|
|
- <div
|
|
|
- v-for="item in list"
|
|
|
- :key="item.id"
|
|
|
- class="item-container"
|
|
|
- @click="toDetail(item)"
|
|
|
- >
|
|
|
- <group
|
|
|
- class="item"
|
|
|
- :detail="item"
|
|
|
- :name="item.name"
|
|
|
- />
|
|
|
- <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 style="color: #f56c6c" 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> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </draggable>
|
|
|
+ <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"
|
|
|
+ />
|
|
|
+ <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 style="color: #f56c6c" 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> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
<empty v-if="list.length == 0"/>
|
|
|
<el-dialog
|
|
|
:title="detail ? '修改相册' : '创建相册'"
|
|
@@ -68,6 +76,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import dayjs from 'dayjs'
|
|
|
import draggable from 'vuedraggable'
|
|
|
import { photoAlbumDel, photoAlbumQueryPage, photoAlbumUpdate } from './api'
|
|
|
import group from './group'
|
|
@@ -89,6 +98,7 @@ export default {
|
|
|
detail: null,
|
|
|
list: [],
|
|
|
sorting: false,
|
|
|
+ times: {}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -122,16 +132,37 @@ export default {
|
|
|
this.FetchList()
|
|
|
} catch (error) {}
|
|
|
},
|
|
|
+ getTimestamp(time) {
|
|
|
+ return dayjs(time).valueOf()
|
|
|
+ },
|
|
|
async FetchList() {
|
|
|
try {
|
|
|
const res = await photoAlbumQueryPage({
|
|
|
musicGroupId: this.$route.query.id
|
|
|
})
|
|
|
+ const times = {}
|
|
|
+ for (const item of res.data.rows) {
|
|
|
+ const timeKey = dayjs(item.timeLine).format('YYYY-MM')
|
|
|
+ if (!times[timeKey]) {
|
|
|
+ times[timeKey] = {
|
|
|
+ list: [],
|
|
|
+ }
|
|
|
+ }
|
|
|
+ times[timeKey].list.push({
|
|
|
+ ...item
|
|
|
+ })
|
|
|
+ }
|
|
|
+ var sortTime = {};
|
|
|
+ Object.keys(times).sort().map(key => {
|
|
|
+ sortTime[key] = times[key]
|
|
|
+ sortTime[key].list.sort()
|
|
|
+ })
|
|
|
+ // console.log(times)
|
|
|
this.list = res.data.rows
|
|
|
+ this.times = sortTime
|
|
|
} catch (error) {}
|
|
|
},
|
|
|
async removeItem(item) {
|
|
|
- console.log(item)
|
|
|
try {
|
|
|
await this.$confirm('相册内的照片将一起删除无法恢复,请谨慎操作', '提示')
|
|
|
await photoAlbumDel({id: item.id})
|
|
@@ -212,6 +243,13 @@ export default {
|
|
|
background-color: rgba(0, 0, 0, .4);
|
|
|
}
|
|
|
}
|
|
|
+.drag-container{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.timeline{
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
// .group{
|
|
|
// }
|
|
|
</style>
|