fix

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

@@ -2,40 +2,45 @@
   <div>
     <div class="btns">
       <el-button type="primary" @click="openForm()">新建相册</el-button>
+      <el-button type="primary" v-if="!sorting" @click="sorting = true">调整排序</el-button>
+      <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>
-    <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="openForm(item)"></i>
-          </el-tooltip>
-          <el-tooltip effect="dark" content="删除" placement="top" :open-delay=".5">
-            <i style="color: #f56c6c" class="el-icon-delete" @click="removeItem(item)"></i>
-          </el-tooltip>
+    <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="openForm(item)"></i>
+            </el-tooltip>
+            <el-tooltip effect="dark" content="删除" placement="top" :open-delay=".5">
+              <i style="color: #f56c6c" class="el-icon-delete" @click="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>
-        <!-- <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>
     <empty v-if="list.length == 0"/>
     <el-dialog
       :title="detail ? '修改相册' : '创建相册'"
@@ -61,7 +66,8 @@
   </div>
 </template>
 <script>
-import { photoAlbumDel, photoAlbumQueryPage } from './api'
+import draggable from 'vuedraggable'
+import { photoAlbumDel, photoAlbumQueryPage, photoAlbumUpdate } from './api'
 import group from './group'
 import formPopup from './form'
 import uploadPopup from './upload'
@@ -69,6 +75,7 @@ export default {
   name: 'training-photos',
   components: {
     group,
+    draggable,
     'form-popup': formPopup,
     'upload-popup': uploadPopup,
   },
@@ -79,6 +86,7 @@ export default {
       uploadVisible: false,
       detail: null,
       list: [],
+      sorting: false,
     }
   },
   mounted() {
@@ -98,6 +106,20 @@ export default {
         }
       })
     },
+    stopSort() {
+      this.sorting = false
+      this.list = this.list.sort((a, b) => a.order - b.order)
+    },
+    async setSort() {
+      try {
+        await photoAlbumUpdate(this.list.map((item, index) => ({
+          ...item,
+          order: index
+        })))
+        this.$message.success('修改成功')
+        this.FetchList()
+      } catch (error) {}
+    },
     async FetchList() {
       try {
         const res = await photoAlbumQueryPage({