diff --git a/package-lock.json b/package-lock.json index 213de9ce178b3a02a223fafdb870d31a6ec053c6..8619808f96489a866905c653e6dbdac08c981e02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14314,6 +14314,11 @@ "is-plain-obj": "^1.0.0" } }, + "sortablejs": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.1.tgz", + "integrity": "sha512-N6r7GrVmO8RW1rn0cTdvK3JR0BcqecAJ0PmYMCL3ZuqTH3pY+9QyqkmJSkkLyyDvd+AJnwaxTP22Ybr/83V9hQ==" + }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", diff --git a/package.json b/package.json index 2f728af9ed762fbebd3ddc8e03f9c1747b19cfb0..03cad115cdbaca391aee1fc1feb4265932e4e7ba 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "quill": "^1.3.6", "screenfull": "^4.2.0", "simplemde": "^1.11.2", + "sortablejs": "^1.10.1", "ua-parser-js": "^0.7.20", "v-charts": "^1.19.0", "v-contextmenu": "^2.8.0", diff --git a/src/layout/header-aside/components/tabs/index.vue b/src/layout/header-aside/components/tabs/index.vue index 2dd7ca8ef8a36cf9d68f1e82425dfde154ffd6d0..1f186284510800a58f25b48acabc497c4cd588c1 100644 --- a/src/layout/header-aside/components/tabs/index.vue +++ b/src/layout/header-aside/components/tabs/index.vue @@ -11,7 +11,7 @@ @rowClick="contextmenuClick"/> import { mapState, mapActions } from 'vuex' +import Sortable from 'sortablejs' export default { components: { D2Contextmenu: () => import('../contextmenu'), @@ -94,7 +95,8 @@ export default { 'closeLeft', 'closeRight', 'closeOther', - 'closeAll' + 'closeAll', + 'openedSort' ]), /** * @description 右键菜单功能点击 @@ -172,6 +174,15 @@ export default { }) } } + }, + mounted () { + const el = document.querySelectorAll('.d2-multiple-page-sort .el-tabs__nav')[0] + Sortable.create(el, { + onEnd: (evt) => { + const { oldIndex, newIndex } = evt + this.openedSort({ oldIndex, newIndex }) + } + }) } } diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue index a1f0d8ab9a930d35152c29d1bad4c3c95b0bd33d..67082428c116b57b6cf4bd1c2b053a9830e87a14 100644 --- a/src/layout/header-aside/layout.vue +++ b/src/layout/header-aside/layout.vue @@ -15,10 +15,10 @@ }" flex-box="0" flex> -
+ -
+
diff --git a/src/store/modules/d2admin/modules/page.js b/src/store/modules/d2admin/modules/page.js index 2773390b9589c2fc28361ed183c88a17cdd87e1b..5022f593d1e0e09acdae3a4672546823cd3e57d7 100644 --- a/src/store/modules/d2admin/modules/page.js +++ b/src/store/modules/d2admin/modules/page.js @@ -113,6 +113,24 @@ export default { resolve() }) }, + /** + * @class opened + * @description 重排页面列表上的某一项 + * @param {Object} context + * @param {Object} payload { oldIndex, newIndex } 位置信息 + */ + openedSort ({ state, commit, dispatch }, { oldIndex, newIndex }) { + return new Promise(async resolve => { + // 重排页面列表某一项 + let page = state.opened[oldIndex] + state.opened.splice(oldIndex, 1) + state.opened.splice(newIndex, 0, page) + // 持久化 + await dispatch('opened2db') + // end + resolve() + }) + }, /** * @class opened * @description 新增一个 tag (打开一个页面)