|
|
@@ -3,14 +3,44 @@
|
|
|
<!-- 标签 -->
|
|
|
<div class="tags">
|
|
|
<!-- TODO 标签可以拖动位置 -->
|
|
|
- <el-tabs v-model="clickCollect" class="demo-tabs">
|
|
|
+ <!--
|
|
|
+ <el-tabs v-if="false" v-model="clickCollect" class="demo-tabs tabSign">
|
|
|
<el-tab-pane label="常用" name="first"></el-tab-pane>
|
|
|
<el-tab-pane label="默认" name="second"></el-tab-pane>
|
|
|
- <el-tab-pane
|
|
|
- v-for="item in tabList"
|
|
|
- :key="item.labelId"
|
|
|
- :name="item.labelId"
|
|
|
+ <draggable
|
|
|
+ :list="toRaw(tabList)"
|
|
|
+ ghost-class="ghost"
|
|
|
+ chosen-class="chosenClass"
|
|
|
+ animation="300"
|
|
|
>
|
|
|
+ <template #item="{ element }">
|
|
|
+ <el-tab-pane>
|
|
|
+ <template #label>
|
|
|
+ <div
|
|
|
+ v-if="isChangeTabName !== element.labelId"
|
|
|
+ @click.right="tabClick($event, element)"
|
|
|
+ >
|
|
|
+ {{ element.labelName }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-input
|
|
|
+ v-model="changeTabName"
|
|
|
+ size="mini"
|
|
|
+ @blur="reTabName"
|
|
|
+ maxlength="32"
|
|
|
+ :autofocus="true"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ </template>
|
|
|
+ </draggable>
|
|
|
+ </el-tabs> -->
|
|
|
+
|
|
|
+ <el-tabs v-model="clickCollect" class="tabSign" ref="tabs">
|
|
|
+ <el-tab-pane label="常用" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="默认" name="second"></el-tab-pane>
|
|
|
+ <el-tab-pane v-for="item in tabList" :key="item" :name="item.labelId">
|
|
|
<template #label>
|
|
|
<div
|
|
|
v-if="isChangeTabName !== item.labelId"
|
|
|
@@ -42,7 +72,7 @@
|
|
|
<el-input
|
|
|
v-model="tabName"
|
|
|
size="mini"
|
|
|
- @blur="addCollectFn"
|
|
|
+ @change="addCollectFn"
|
|
|
maxlength="32"
|
|
|
:autofocus="true"
|
|
|
></el-input>
|
|
|
@@ -168,7 +198,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref, watch } from "vue";
|
|
|
+import Sortable from "sortablejs";
|
|
|
+import draggable from "vuedraggable";
|
|
|
+import { onMounted, ref, watch, nextTick } from "vue";
|
|
|
import { toRaw } from "@vue/reactivity";
|
|
|
import { listLabel, addLabel, delLabel, updateLabel } from "@/api/biz/label.js";
|
|
|
import { listFavorite } from "@/api/biz/favorite.js";
|
|
|
@@ -244,6 +276,7 @@ const isChangeTabName = ref(0); //存放修改状标签的id
|
|
|
onMounted(async () => {
|
|
|
await getList();
|
|
|
await getCollectList();
|
|
|
+ rowDrop();
|
|
|
// 添加监听，点击其他地方关闭菜单
|
|
|
window.addEventListener("click", closeMenu, true);
|
|
|
});
|
|
|
@@ -273,8 +306,16 @@ const addCollectFn = async () => {
|
|
|
isAddCollect.value = false;
|
|
|
return;
|
|
|
}
|
|
|
+
|
|
|
+ const list = toRaw(tabList.value);
|
|
|
+ let order = 0;
|
|
|
+ if (list.length > 0) {
|
|
|
+ order = getBigOrder(list);
|
|
|
+ }
|
|
|
+
|
|
|
const res = await addLabel({
|
|
|
labelName: tabName.value,
|
|
|
+ orderNum: order,
|
|
|
});
|
|
|
if (res.code == 200) {
|
|
|
isAddCollect.value = false;
|
|
|
@@ -288,8 +329,9 @@ const getList = async () => {
|
|
|
console.log("tabList =", res);
|
|
|
if (res.rows.length > 0) {
|
|
|
let dates = JSON.parse(JSON.stringify(res.rows));
|
|
|
+ dates.sort(sortArr("orderNum"));
|
|
|
tabList.value = [...dates];
|
|
|
- console.log("tabList", tabList.value);
|
|
|
+ // console.log("tabList", tabList.value);
|
|
|
// console.log("dates", dates);
|
|
|
}
|
|
|
};
|
|
|
@@ -325,6 +367,47 @@ const reTabName = async () => {
|
|
|
isChangeTabName.value = 0;
|
|
|
console.log("rename", res);
|
|
|
};
|
|
|
+//拖拽事件
|
|
|
+const rowDrop = () => {
|
|
|
+ const el = document.querySelector(".tabSign .el-tabs__nav"); //找到想要拖拽的那一列
|
|
|
+ // console.log('el',el);
|
|
|
+ const _this = toRaw(tabList.value);
|
|
|
+ // console.log("_this", _this);
|
|
|
+ Sortable.create(el, {
|
|
|
+ filter: "#tab-first,#tab-second", //限制哪些可以拖动
|
|
|
+ preventOnFilter: true,
|
|
|
+ onChoose: function (/**Event*/ evt) {
|
|
|
+ evt.oldIndex;
|
|
|
+ console.log("evt", evt);
|
|
|
+ },
|
|
|
+ //结束拖拽事件
|
|
|
+ onEnd({ newIndex, oldIndex, to }) {
|
|
|
+ console.log("newIndex", newIndex);
|
|
|
+ console.log("oldIndex", oldIndex);
|
|
|
+ //oldIIndex拖放前的位置， newIndex拖放后的位置 //tabOptionList为遍历的tab签
|
|
|
+ const currRow = _this.splice(oldIndex, 1)[0]; //鼠标拖拽当前的el-tabs-pane
|
|
|
+ _this.splice(newIndex, 0, currRow); //tableData 是存放所以el-tabs-pane的数组
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 工具函数
|
|
|
+//获取新增标签时要赋予的ordername
|
|
|
+const getBigOrder = (arr) => {
|
|
|
+ let num = 0;
|
|
|
+ arr.forEach((item) => {
|
|
|
+ if (item.orderNum > num) {
|
|
|
+ num = item.orderNum;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return num + 1;
|
|
|
+};
|
|
|
+//数组排序
|
|
|
+const sortArr = (field) => {
|
|
|
+ return function (a, b) {
|
|
|
+ return a[field] - b[field];
|
|
|
+ };
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
liuQiang