sort

src/helpers/deep-clone.js

@@ -0,0 +1,18 @@
+// form: https://www.30secondsofcode.org/js/s/deep-clone
+
+const deepClone = obj => {
+  if (obj === null) return null;
+  let clone = Object.assign({}, obj);
+  Object.keys(clone).forEach(
+    key =>
+      (clone[key] =
+        typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
+  );
+  if (Array.isArray(obj)) {
+    clone.length = obj.length;
+    return Array.from(clone);
+  }
+  return clone;
+};
+
+export default deepClone

src/views/photo-detail/index.vue

@@ -81,8 +81,10 @@
 </template>
 <script>
 import draggable from 'vuedraggable'
+import deepClone from '@/helpers/deep-clone'
 import uploadPopup from '@/views/resetTeaming/components/training-photos/upload'
 import { photoQueryPage, photoDel, photoUpdate, photoAlbumUpdate } from '@/views/resetTeaming/components/training-photos/api'
+let resCopy = null
 export default {
   props: {
     type: {
@@ -170,7 +172,8 @@ export default {
     },
     cancel() {
       this.editing = false
-      this.list = this.list.sort((a, b) => a.order - b.order)
+      // this.list = this.list.sort((a, b) => a.order - b.order)
+      this.list = deepClone(resCopy)
       this.setInitViwes()
     },
     submited() {
@@ -191,7 +194,8 @@ export default {
       try {
         const res = await photoQueryPage({...this.queryIdOrType, photoAlbumId: this.queryIdOrType.id})
         // console.log(res.data.rows)
-        this.list = res.data.rows
+        this.list = deepClone(res.data.rows)
+        resCopy = deepClone(res.data.rows)
         this.setInitViwes()
       } catch (error) {}
     },

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

@@ -7,17 +7,17 @@
       <el-button type="primary" v-if="sorting" @click="stopSort()">取消</el-button>
     </div>
     <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-collapse-item v-for="ykey in yearsList" :title="ykey + '年 相册'" :key="ykey" :name="ykey">
+        <empty v-if="years[ykey].length == 0"/>
         <el-timeline reverse class="timeline">
           <el-timeline-item
             placement="top"
-            v-for="(timeDetail, key) in yitem"
+            v-for="(ydetail, key) in years[ykey]"
             :key="key"
             :timestamp="key">
-              <draggable :list="timeDetail" :disabled="!sorting" class="drag-container" @change="() => draggableChange(timeDetail, key)">
+              <draggable :list="ydetail" :disabled="!sorting" class="drag-container" @change="() => draggableChange(ydetail, key)">
                 <div
-                  v-for="item in timeDetail"
+                  v-for="item in ydetail"
                   :key="item.id"
                   class="item-container"
                   @click="toDetail(item)"
@@ -97,7 +97,8 @@ export default {
       times: {},
       years: {},
       activeNames: [],
-      changed: {}
+      changed: {},
+      yearsList: [],
     }
   },
   mounted() {
@@ -105,7 +106,6 @@ export default {
   },
   methods: {
     draggableChange(list, key) {
-      console.log(list)
       this.changed[key] = list
     },
     submited() {
@@ -124,7 +124,21 @@ export default {
     },
     stopSort() {
       this.sorting = false
-      this.list = this.list.sort((a, b) => a.order - b.order)
+      const changeKeys = Object.keys(this.changed)
+      for (const key in this.years) {
+        if (Object.hasOwnProperty.call(this.years, key)) {
+          const yearDetail = this.years[key];
+          for (const mkey in yearDetail) {
+            if (Object.hasOwnProperty.call(yearDetail, mkey)) {
+              const monDetail = yearDetail[mkey];
+              if (changeKeys.includes(mkey)) {
+                monDetail.sort((a, b) => a.order - b.order)
+              }
+            }
+          }
+        }
+      }
+      // this.list = this.list.sort((a, b) => a.order - b.order)
       this.changed = {}
     },
     async setSort() {
@@ -195,7 +209,8 @@ export default {
           sortyears[tkey] = mdata
         }
         this.years = sortyears
-        this.activeNames = ykeys[0]
+        this.yearsList = Object.keys(sortyears).sort((a, b) => b - a)
+        this.activeNames = this.yearsList[0]
       } catch (error) {}
     },
     async removeItem(item) {