修改

dsk-operate-ui/package.json

@@ -61,7 +61,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.6.0"
   },
   "devDependencies": {

dsk-operate-ui/src/layout/components/TagsView/index.vue

 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
-        v-for="(tag, index) in visitedViews"
-        ref="tag"
-        :key="tag.path"
-        :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
-      >
-        <svg :class="isActive(tag)?'tags-icon tags-icon-active':'tags-icon'" aria-hidden="true">
-          <use :xlink:href="iconName(tag)" />
-        </svg>
-        <span :id="isActive(tag)?'tagTitle':''">{{ tag.title }}</span>
-        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-        <i :class="index!=visitedViews.length-1 && index != isActiveIndex() && index != isActiveIndex()-1?'tags-item-line':'tags-item-line item-color'" />
-      </router-link>
+      <draggable v-model="visitedViews" :options="dragOptions" @end="end">
+        <router-link
+          v-for="(tag, index) in visitedViews"
+          ref="tag"
+          :key="tag.path"
+          :class="isActive(tag)?'active':''"
+          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+          tag="span"
+          class="tags-view-item"
+          @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
+          @contextmenu.prevent.native="openMenu(tag,$event)"
+        >
+          <svg :class="isActive(tag)?'tags-icon tags-icon-active':'tags-icon'" aria-hidden="true">
+            <use :xlink:href="iconName(tag)" />
+          </svg>
+          <span :id="isActive(tag)?'tagTitle':''">{{ tag.title }}</span>
+          <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+          <i :class="index!=visitedViews.length-1 && index != isActiveIndex() && index != isActiveIndex()-1?'tags-item-line':'tags-item-line item-color'" />
+        </router-link>
+      </draggable>
+
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li>
@@ -60,11 +63,12 @@
 </template>
 
 <script>
-import ScrollPane from './ScrollPane'
-import path from 'path'
+  import draggable from 'vuedraggable'
+  import ScrollPane from './ScrollPane'
+  import path from 'path'
 
 export default {
-  components: { ScrollPane },
+  components: { ScrollPane,draggable },
   data() {
     return {
       visible: false,
@@ -73,11 +77,22 @@ export default {
       selectedTag: {},
       affixTags: [],
       showall:false,
+      dragOptions: {
+        animation: 200, // 动画时间，单位毫秒
+        group: 'items', // 分组，同一分组内的元素可以互相拖拽
+        ghostClass: 'ghost', // 拖拽过程中占位元素的class名称
+        sort: true, // 是否启用排序功能
+        draggable: '.tags-view-item', // 可拖拽元素的选择器
+      }
     }
   },
   computed: {
-    visitedViews() {
-      return this.$store.state.tagsView.visitedViews
+    visitedViews:{
+      get() {
+        console.log(this.$store.state.tagsView.visitedViews)
+        return this.$store.state.tagsView.visitedViews
+      },
+      set() {}
     },
     iconName() {
       return function(val) {
@@ -292,7 +307,26 @@ export default {
     },
     handleScroll() {
       this.closeMenu()
-    }
+    },
+    end (event) {
+      //调换顺序
+      let oldIndex = event.oldIndex//移动初始位置
+      let newIndex = event.newIndex//运动终止位置
+      let diff = Math.abs(newIndex - oldIndex)//插值绝对值
+      let index = this.visitedViews[oldIndex]
+      if (eval(oldIndex) > eval(newIndex)) {
+        for (let i = 0; i < diff; i++) {
+          this.visitedViews[oldIndex - i] = this.visitedViews[oldIndex - i - 1]
+        }
+        this.visitedViews[newIndex] = index
+      } else {
+        for (let i = 0; i < diff; i++) {
+          this.visitedViews[oldIndex + i] = this.visitedViews[oldIndex + i + 1]
+        }
+        this.visitedViews[newIndex] = index
+      }
+      this.$forceUpdate()
+    },
   }
 }
 </script>

dsk-operate-ui/src/views/detail/groupAccount/component/Sidebar.vue

@@ -53,14 +53,14 @@ export default {
         {title: '集团成员', pathName: 'members'},
         {title: '集团资质', pathName: 'qualifications'},
         {title: '集团业绩', pathName: 'performance'},
-        {title: '集团招标', pathName: 'zhaobiao'},
+        // {title: '集团招标', pathName: 'zhaobiao'},
       ],
       defaultRoute: [],
       customer:[
         'members',
         'qualifications',
         'performance',
-        'zhaobiao',
+        // 'zhaobiao',
       ],
       uniqueOpened:false,
       searchIndex: ''