From 2c64253c90f3c5ab46ed389b32aefd9a3a0a0160 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 2 Mar 2020 18:03:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A1=A8=E6=A0=BC=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             |   1 +
 src/views/home/index.vue | 202 +++++++++++++++++++++------------------
 2 files changed, 108 insertions(+), 95 deletions(-)

diff --git a/package.json b/package.json
index 2e2f97b..26f5cbe 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "vue-simple-uploader": "^0.7.4",
     "vue-touch": "^2.0.0-beta.4",
     "vue-wechat-title": "^2.0.5",
+    "vuedraggable": "^2.23.2",
     "vuex": "3.1.0",
     "we-vue": "^2.3.3",
     "webuploader": "^0.1.8",
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f69e82d..9eb2efc 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -131,101 +131,101 @@
       @cell-mouse-enter="cellMouseEnter"
       @cell-mouse-leave="cellMouseLeave"
     >
-      <template v-for="(item,index) in tableHead">
-        <el-table-column
-          v-if="index === 0"
-          :key="index"
-          :index="index"
-          type="selection"
-          min-width="50"
-        >
-        </el-table-column>
-        <el-table-column
-          v-if="index === 1"
-          :key="index"
-          :index="index"
-          width="50"
-        >
-          <template slot-scope="scope">
-            <icon-file :item="scope.row" :image-url="imageUrl"></icon-file>
-          </template>
-        </el-table-column>
+          <template v-for="(item,index) in tableHead">
+            <el-table-column
+              v-if="index === 0"
+              :key="index"
+              :index="index"
+              type="selection"
+              min-width="50"
+            >
+            </el-table-column>
+            <el-table-column
+              v-if="index === 1"
+              :key="index"
+              :index="index"
+              width="50"
+            >
+              <template slot-scope="scope">
+                <icon-file :item="scope.row" :image-url="imageUrl"></icon-file>
+              </template>
+            </el-table-column>
 
-        <el-table-column v-if="index === 2" :key="index" :show-overflow-tooltip="true" min-width="200" :index="index" :prop="item.name" :label="item.label" :sortable="item.sortable" @click.stop="fileClick(scope.row)">
-          <template slot-scope="scope">
-            <el-col v-if="scope.row.index === editingIndex" :span="10">
-              <el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @keyup.enter.native="rowRename(renameFileName, scope.row)">
-              </el-input>
-              <el-button
-                v-loading="renameLoading"
-                element-loading-spinner="el-icon-loading"
-                element-loading-background="#f6f7fa88"
-                class="el-icon-check"
-                @click="rowRename(renameFileName, scope.row)"
-              >
-              </el-button>
-              <el-button
-                element-loading-spinner="el-icon-loading"
-                element-loading-background="#f6f7fa88"
-                class="el-icon-close"
-                @click="editingIndex = -1"
-              >
-              </el-button>
-            </el-col>
-            <span v-else>{{ scope.row.name }}</span>
-          </template>
-        </el-table-column>
+            <el-table-column v-if="index === 2" :key="index" :show-overflow-tooltip="true" min-width="200" :index="index" :prop="item.name" :label="item.label" :sortable="item.sortable" @click.stop="fileClick(scope.row)">
+              <template slot-scope="scope">
+                <el-col v-if="scope.row.index === editingIndex" :span="10">
+                  <el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @keyup.enter.native="rowRename(renameFileName, scope.row)">
+                  </el-input>
+                  <el-button
+                    v-loading="renameLoading"
+                    element-loading-spinner="el-icon-loading"
+                    element-loading-background="#f6f7fa88"
+                    class="el-icon-check"
+                    @click="rowRename(renameFileName, scope.row)"
+                  >
+                  </el-button>
+                  <el-button
+                    element-loading-spinner="el-icon-loading"
+                    element-loading-background="#f6f7fa88"
+                    class="el-icon-close"
+                    @click="editingIndex = -1"
+                  >
+                  </el-button>
+                </el-col>
+                <span v-else>{{ scope.row.name }}</span>
+              </template>
+            </el-table-column>
 
-        <el-table-column v-if="index === 3" :key="index" width="50" :index="index" align="center" header-align="center">
-          <template slot-scope="scope">
-            <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" />
-          </template>
-        </el-table-column>
+            <el-table-column v-if="index === 3" :key="index" width="50" :index="index" align="center" header-align="center">
+              <template slot-scope="scope">
+                <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" />
+              </template>
+            </el-table-column>
 
-        <el-table-column v-if="index === 4" :key="index" width="50" :prop="item.name" :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center">
-          <!-- 使用组件, 并传值到组件中 -->
-          <template slot="header">
-            <svg-icon v-if="item.name !== ''" class="button-class" icon-class="more" @click="moreOperation($event)" />
-          </template>
-          <template slot-scope="scope">
-            <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="more" @click="moreClick(scope.row,$event)" />
-          </template>
-        </el-table-column>
+            <el-table-column v-if="index === 4" :key="index" width="50" :prop="item.name" :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center">
+              <!-- 使用组件, 并传值到组件中 -->
+              <template slot="header">
+                <svg-icon v-if="item.name !== ''" class="button-class" icon-class="more" @click="moreOperation($event)" />
+              </template>
+              <template slot-scope="scope">
+                <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="more" @click="moreClick(scope.row,$event)" />
+              </template>
+            </el-table-column>
 
-        <el-table-column
-          v-if="index === 5"
-          :key="index"
-          width="90"
-          :prop="item.name"
-          :index="index"
-          :label="item.label"
-          :sortable="item.sortable"
-          :show-overflow-tooltip="true"
-          align="center"
-          header-align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{formatSize(scope.row.size)}}</span>
-          </template>
-        </el-table-column>
+            <el-table-column
+              v-if="index === 5"
+              :key="index"
+              width="90"
+              :prop="item.name"
+              :index="index"
+              :label="item.label"
+              :sortable="item.sortable"
+              :show-overflow-tooltip="true"
+              align="center"
+              header-align="center"
+            >
+              <template slot-scope="scope">
+                <span>{{formatSize(scope.row.size)}}</span>
+              </template>
+            </el-table-column>
 
-        <el-table-column
-          v-if="index === 6"
-          :key="index"
-          width="150"
-          :prop="item.name"
-          :index="index"
-          :label="item.label"
-          :sortable="item.sortable"
-          :show-overflow-tooltip="true"
-          align="left"
-          header-align="left"
-        >
-          <template slot-scope="scope">
-            <span>&nbsp;&nbsp;&nbsp;{{formatTime(scope.row.agoTime)}}</span>
+            <el-table-column
+              v-if="index === 6"
+              :key="index"
+              width="150"
+              :prop="item.name"
+              :index="index"
+              :label="item.label"
+              :sortable="item.sortable"
+              :show-overflow-tooltip="true"
+              align="left"
+              header-align="left"
+            >
+              <template slot-scope="scope">
+                <span>&nbsp;&nbsp;&nbsp;{{formatTime(scope.row.agoTime)}}</span>
+              </template>
+            </el-table-column>
           </template>
-        </el-table-column>
-      </template>
     </el-table>
     <el-pagination
       background
@@ -250,10 +250,11 @@ import Bus from '@/assets/js/bus'
 import api from '@/api/upload-api'
 import BreadcrumbFilePath from "../../components/Breadcrumb/BreadcrumbFilePath";
 import IconFile from "../../components/Icon/IconFile";
-// import Sortable from 'sortablejs'
+import vuedraggable from 'vuedraggable';
+import Sortable from 'sortablejs'
 
 export default {
-  components: {IconFile, BreadcrumbFilePath},
+  components: { IconFile, BreadcrumbFilePath, vuedraggable},
   data() {
     return {
       imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
@@ -400,16 +401,23 @@ export default {
     }
   },
   methods: {
+    draggableChange(){
+      console.log(678)
+    },
     // 行拖拽
     rowDrop() {
-      // const tbody = document.querySelector('.el-table__body-wrapper tbody')
-      // const _this = this
-      // Sortable.create(tbody, {
+      const tbody = document.querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        swap: true,
+        chosenClass: 'sortable-highlight',
+        animation: 150,
+        sort: false
       // onMoveCallback({ newIndex, oldIndex }) {
       //   const currRow = _this.fileList.splice(oldIndex, 1)[0]
       //   _this.fileList.splice(newIndex, 0, currRow)
       // }
-      // })
+      })
     },
     // 格式化最近时间
     formatTime(time) {
@@ -1469,5 +1477,9 @@ export default {
     overflow: auto;
   }
 
+  /deep/ .sortable-highlight {
+    background-color: #66cc66;
+  }
+
 </style>