timeline

src/views/photo-detail/index.vue

@@ -65,6 +65,7 @@
         @close="uploadVisible = false"
         @submited="submited"
         :name="$route.query.name"
+        :query="queryIdOrType"
       />
     </el-dialog>
   </div>
@@ -176,8 +177,8 @@ export default {
       try {
         const res = await photoQueryPage({...this.queryIdOrType, photoAlbumId: this.queryIdOrType.id})
         // console.log(res.data.rows)
-        this.setInitViwes()
         this.list = res.data.rows
+        this.setInitViwes()
       } catch (error) {}
     },
     async confirm() {

src/views/resetTeaming/components/training-photos/api.js

@@ -31,7 +31,6 @@ export const photoAlbumUpdate = (data) => {
     url: '/api-web/photoAlbum/batchUpdate',
     data: data,
     method: 'post',
-    requestType: 'form'
   })
 }
 

src/views/resetTeaming/components/training-photos/form/index.vue

@@ -12,6 +12,19 @@
     >
       <el-input v-model="form.name" placeholder="请输入相册名称"/>
     </el-form-item>
+    <el-form-item
+      label="相册时间"
+      prop="timeLine"
+      :rules="[{required: true, message: '请选择相册时间'}]"
+    >
+      <el-date-picker
+        v-model="form.timeLine"
+        type="month"
+        value-format="yyyy-MM-DD"
+        style="width: 100%"
+        placeholder="请选择相册时间">
+      </el-date-picker>
+    </el-form-item>
     <div class="dialog-footer">
       <el-button @click="$emit('close')">取 消</el-button>
       <el-button
@@ -32,13 +45,15 @@ export default {
   data() {
     return {
       form: {
-        name: ''
+        name: '',
+        timeLine: ''
       }
     }
   },
   mounted() {
     if (this.detail) {
       this.form.name = this.detail.name
+      this.form.timeLine = this.detail.timeLine
     }
   },
   methods: {
@@ -50,11 +65,11 @@ export default {
         if (valid) {
           try {
             if (this.detail) {
-              await photoAlbumUpdate({
+              await photoAlbumUpdate([{
                 ...this.form,
                 musicGroupId: this.$route.query.id,
                 id: this.detail.id
-              })
+              }])
               this.$message.success('修改成功')
             } else {
               await photoAlbumAdd({

src/views/resetTeaming/components/training-photos/index.vue

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

src/views/resetTeaming/components/training-photos/upload/index.vue

@@ -71,7 +71,11 @@
 import { photoAdd, photoAlbumQueryPage } from '../api'
 export default {
   props: {
-    name: String
+    name: String,
+    query: {
+      type: Object,
+      default: () => ({})
+    },
   },
   data() {
     return {
@@ -86,7 +90,8 @@ export default {
     }
   },
   mounted() {
-    this.FetchList()
+    console.log({...this})
+    // this.FetchList()
   },
   methods: {
     handleChange(file, fileList) {
@@ -114,7 +119,7 @@ export default {
     async FetchList() {
       try {
         const res = await photoAlbumQueryPage({
-          musicGroupId: this.$route.query.id,
+          ...this.query,
           rows: 9999
         })
         this.photos = res.data.rows
@@ -129,7 +134,8 @@ export default {
           if (valid) {
             const phoths = this.uploaded.map(item => ({
               ...item,
-              photoAlbumId: this.form.photoAlbumId || this.$route.params.id,
+              ...this.query,
+              // photoAlbumId: this.form.photoAlbumId || this.$route.params.id,
             }))
             await photoAdd(phoths)
             this.$message.success('添加成功')