|  | @@ -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>
 |