{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\babel-loader\\lib\\index.js!D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\views\\table\\drag-table.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\views\\table\\drag-table.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\babel.config.js","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:aW1wb3J0IF9hc3luY1RvR2VuZXJhdG9yIGZyb20gIkQ6L1x1NkU5MFx1NzgwMS92dWUtZWxlbWVudC1hZG1pbi1tYXN0ZXIvbm9kZV9tb2R1bGVzL0BiYWJlbC9ydW50aW1lL2hlbHBlcnMvZXNtL2FzeW5jVG9HZW5lcmF0b3IuanMiOwppbXBvcnQgInJlZ2VuZXJhdG9yLXJ1bnRpbWUvcnVudGltZS5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLmFycmF5Lm1hcC5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLmFycmF5LnNsaWNlLmpzIjsKaW1wb3J0ICJjb3JlLWpzL21vZHVsZXMvZXMuYXJyYXkuc3BsaWNlLmpzIjsKLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KaW1wb3J0IHsgZmV0Y2hMaXN0IH0gZnJvbSAnQC9hcGkvYXJ0aWNsZSc7CmltcG9ydCBTb3J0YWJsZSBmcm9tICdzb3J0YWJsZWpzJzsKZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICdEcmFnVGFibGUnLAogIGZpbHRlcnM6IHsKICAgIHN0YXR1c0ZpbHRlcjogZnVuY3Rpb24gc3RhdHVzRmlsdGVyKHN0YXR1cykgewogICAgICB2YXIgc3RhdHVzTWFwID0gewogICAgICAgIHB1Ymxpc2hlZDogJ3N1Y2Nlc3MnLAogICAgICAgIGRyYWZ0OiAnaW5mbycsCiAgICAgICAgZGVsZXRlZDogJ2RhbmdlcicKICAgICAgfTsKICAgICAgcmV0dXJuIHN0YXR1c01hcFtzdGF0dXNdOwogICAgfQogIH0sCiAgZGF0YTogZnVuY3Rpb24gZGF0YSgpIHsKICAgIHJldHVybiB7CiAgICAgIGxpc3Q6IG51bGwsCiAgICAgIHRvdGFsOiBudWxsLAogICAgICBsaXN0TG9hZGluZzogdHJ1ZSwKICAgICAgbGlzdFF1ZXJ5OiB7CiAgICAgICAgcGFnZTogMSwKICAgICAgICBsaW1pdDogMTAKICAgICAgfSwKICAgICAgc29ydGFibGU6IG51bGwsCiAgICAgIG9sZExpc3Q6IFtdLAogICAgICBuZXdMaXN0OiBbXQogICAgfTsKICB9LAogIGNyZWF0ZWQ6IGZ1bmN0aW9uIGNyZWF0ZWQoKSB7CiAgICB0aGlzLmdldExpc3QoKTsKICB9LAogIG1ldGhvZHM6IHsKICAgIGdldExpc3Q6IGZ1bmN0aW9uIGdldExpc3QoKSB7CiAgICAgIHZhciBfdGhpcyA9IHRoaXM7CgogICAgICByZXR1cm4gX2FzeW5jVG9HZW5lcmF0b3IoIC8qI19fUFVSRV9fKi9yZWdlbmVyYXRvclJ1bnRpbWUubWFyayhmdW5jdGlvbiBfY2FsbGVlKCkgewogICAgICAgIHZhciBfeWllbGQkZmV0Y2hMaXN0LCBkYXRhOwoKICAgICAgICByZXR1cm4gcmVnZW5lcmF0b3JSdW50aW1lLndyYXAoZnVuY3Rpb24gX2NhbGxlZSQoX2NvbnRleHQpIHsKICAgICAgICAgIHdoaWxlICgxKSB7CiAgICAgICAgICAgIHN3aXRjaCAoX2NvbnRleHQucHJldiA9IF9jb250ZXh0Lm5leHQpIHsKICAgICAgICAgICAgICBjYXNlIDA6CiAgICAgICAgICAgICAgICBfdGhpcy5saXN0TG9hZGluZyA9IHRydWU7CiAgICAgICAgICAgICAgICBfY29udGV4dC5uZXh0ID0gMzsKICAgICAgICAgICAgICAgIHJldHVybiBmZXRjaExpc3QoX3RoaXMubGlzdFF1ZXJ5KTsKCiAgICAgICAgICAgICAgY2FzZSAzOgogICAgICAgICAgICAgICAgX3lpZWxkJGZldGNoTGlzdCA9IF9jb250ZXh0LnNlbnQ7CiAgICAgICAgICAgICAgICBkYXRhID0gX3lpZWxkJGZldGNoTGlzdC5kYXRhOwogICAgICAgICAgICAgICAgX3RoaXMubGlzdCA9IGRhdGEuaXRlbXM7CiAgICAgICAgICAgICAgICBfdGhpcy50b3RhbCA9IGRhdGEudG90YWw7CiAgICAgICAgICAgICAgICBfdGhpcy5saXN0TG9hZGluZyA9IGZhbHNlOwogICAgICAgICAgICAgICAgX3RoaXMub2xkTGlzdCA9IF90aGlzLmxpc3QubWFwKGZ1bmN0aW9uICh2KSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB2LmlkOwogICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgICBfdGhpcy5uZXdMaXN0ID0gX3RoaXMub2xkTGlzdC5zbGljZSgpOwoKICAgICAgICAgICAgICAgIF90aGlzLiRuZXh0VGljayhmdW5jdGlvbiAoKSB7CiAgICAgICAgICAgICAgICAgIF90aGlzLnNldFNvcnQoKTsKICAgICAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgICBjYXNlIDExOgogICAgICAgICAgICAgIGNhc2UgImVuZCI6CiAgICAgICAgICAgICAgICByZXR1cm4gX2NvbnRleHQuc3RvcCgpOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwgX2NhbGxlZSk7CiAgICAgIH0pKSgpOwogICAgfSwKICAgIHNldFNvcnQ6IGZ1bmN0aW9uIHNldFNvcnQoKSB7CiAgICAgIHZhciBfdGhpczIgPSB0aGlzOwoKICAgICAgdmFyIGVsID0gdGhpcy4kcmVmcy5kcmFnVGFibGUuJGVsLnF1ZXJ5U2VsZWN0b3JBbGwoJy5lbC10YWJsZV9fYm9keS13cmFwcGVyID4gdGFibGUgPiB0Ym9keScpWzBdOwogICAgICB0aGlzLnNvcnRhYmxlID0gU29ydGFibGUuY3JlYXRlKGVsLCB7CiAgICAgICAgZ2hvc3RDbGFzczogJ3NvcnRhYmxlLWdob3N0JywKICAgICAgICAvLyBDbGFzcyBuYW1lIGZvciB0aGUgZHJvcCBwbGFjZWhvbGRlciwKICAgICAgICBzZXREYXRhOiBmdW5jdGlvbiBzZXREYXRhKGRhdGFUcmFuc2ZlcikgewogICAgICAgICAgLy8gdG8gYXZvaWQgRmlyZWZveCBidWcKICAgICAgICAgIC8vIERldGFpbCBzZWUgOiBodHRwczovL2dpdGh1Yi5jb20vUnViYVhhL1NvcnRhYmxlL2lzc3Vlcy8xMDEyCiAgICAgICAgICBkYXRhVHJhbnNmZXIuc2V0RGF0YSgnVGV4dCcsICcnKTsKICAgICAgICB9LAogICAgICAgIG9uRW5kOiBmdW5jdGlvbiBvbkVuZChldnQpIHsKICAgICAgICAgIHZhciB0YXJnZXRSb3cgPSBfdGhpczIubGlzdC5zcGxpY2UoZXZ0Lm9sZEluZGV4LCAxKVswXTsKCiAgICAgICAgICBfdGhpczIubGlzdC5zcGxpY2UoZXZ0Lm5ld0luZGV4LCAwLCB0YXJnZXRSb3cpOyAvLyBmb3Igc2hvdyB0aGUgY2hhbmdlcywgeW91IGNhbiBkZWxldGUgaW4geW91IGNvZGUKCgogICAgICAgICAgdmFyIHRlbXBJbmRleCA9IF90aGlzMi5uZXdMaXN0LnNwbGljZShldnQub2xkSW5kZXgsIDEpWzBdOwoKICAgICAgICAgIF90aGlzMi5uZXdMaXN0LnNwbGljZShldnQubmV3SW5kZXgsIDAsIHRlbXBJbmRleCk7CiAgICAgICAgfQogICAgICB9KTsKICAgIH0KICB9Cn07"},{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA;AACA;AAEA;EACAA,iBADA;EAEAC;IACAC,YADA,wBACAC,MADA,EACA;MACA;QACAC,oBADA;QAEAC,aAFA;QAGAC;MAHA;MAKA;IACA;EARA,CAFA;EAYAC,IAZA,kBAYA;IACA;MACAC,UADA;MAEAC,WAFA;MAGAC,iBAHA;MAIAC;QACAC,OADA;QAEAC;MAFA,CAJA;MAQAC,cARA;MASAC,WATA;MAUAC;IAVA;EAYA,CAzBA;EA0BAC,OA1BA,qBA0BA;IACA;EACA,CA5BA;EA6BAC;IACAC,OADA,qBACA;MAAA;;MAAA;QAAA;;QAAA;UAAA;YAAA;cAAA;gBACA;gBADA;gBAAA,OAEAC,0BAFA;;cAAA;gBAAA;gBAEAb,IAFA,oBAEAA,IAFA;gBAGA;gBACA;gBACA;gBACA;kBAAA;gBAAA;gBACA;;gBACA;kBACA;gBACA,CAFA;;cARA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA;IAWA,CAZA;IAaAc,OAbA,qBAaA;MAAA;;MACA;MACA;QACAC,4BADA;QACA;QACAC;UACA;UACA;UACAC;QACA,CANA;QAOAC;UACA;;UACA,+CAFA,CAIA;;;UACA;;UACA;QACA;MAdA;IAgBA;EA/BA;AA7BA","names":["name","filters","statusFilter","status","published","draft","deleted","data","list","total","listLoading","listQuery","page","limit","sortable","oldList","newList","created","methods","getList","fetchList","setSort","ghostClass","setData","dataTransfer","onEnd"],"sourceRoot":"src/views/table","sources":["drag-table.vue"],"sourcesContent":["<template>\n <div class=\"app-container\">\n <!-- Note that row-key is necessary to get a correct row order. -->\n <el-table ref=\"dragTable\" v-loading=\"listLoading\" :data=\"list\" row-key=\"id\" border fit highlight-current-row style=\"width: 100%\">\n <el-table-column align=\"center\" label=\"ID\" width=\"65\">\n <template slot-scope=\"{row}\">\n <span>{{ row.id }}</span>\n </template>\n </el-table-column>\n\n <el-table-column width=\"180px\" align=\"center\" label=\"Date\">\n <template slot-scope=\"{row}\">\n <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>\n </template>\n </el-table-column>\n\n <el-table-column min-width=\"300px\" label=\"Title\">\n <template slot-scope=\"{row}\">\n <span>{{ row.title }}</span>\n </template>\n </el-table-column>\n\n <el-table-column width=\"110px\" align=\"center\" label=\"Author\">\n <template slot-scope=\"{row}\">\n <span>{{ row.author }}</span>\n </template>\n </el-table-column>\n\n <el-table-column width=\"100px\" label=\"Importance\">\n <template slot-scope=\"{row}\">\n <svg-icon v-for=\"n in + row.importance\" :key=\"n\" icon-class=\"star\" class=\"icon-star\" />\n </template>\n </el-table-column>\n\n <el-table-column align=\"center\" label=\"Readings\" width=\"95\">\n <template slot-scope=\"{row}\">\n <span>{{ row.pageviews }}</span>\n </template>\n </el-table-column>\n\n <el-table-column class-name=\"status-col\" label=\"Status\" width=\"110\">\n <template slot-scope=\"{row}\">\n <el-tag :type=\"row.status | statusFilter\">\n {{ row.status }}\n </el-tag>\n </template>\n </el-table-column>\n\n <el-table-column align=\"center\" label=\"Drag\" width=\"80\">\n <template slot-scope=\"{}\">\n <svg-icon class=\"drag-handler\" icon-class=\"drag\" />\n </template>\n </el-table-column>\n </el-table>\n <div class=\"show-d\">\n <el-tag>The default order :</el-tag> {{ oldList }}\n </div>\n <div class=\"show-d\">\n <el-tag>The after dragging order :</el-tag> {{ newList }}\n </div>\n </div>\n</template>\n\n<script>\nimport { fetchList } from '@/api/article'\nimport Sortable from 'sortablejs'\n\nexport default {\n name: 'DragTable',\n filters: {\n statusFilter(status) {\n const statusMap = {\n published: 'success',\n draft: 'info',\n deleted: 'danger'\n }\n return statusMap[status]\n }\n },\n data() {\n return {\n list: null,\n total: null,\n listLoading: true,\n listQuery: {\n page: 1,\n limit: 10\n },\n sortable: null,\n oldList: [],\n newList: []\n }\n },\n created() {\n this.getList()\n },\n methods: {\n async getList() {\n this.listLoading = true\n const { data } = await fetchList(this.listQuery)\n this.list = data.items\n this.total = data.total\n this.listLoading = false\n this.oldList = this.list.map(v => v.id)\n this.newList = this.oldList.slice()\n this.$nextTick(() => {\n this.setSort()\n })\n },\n setSort() {\n const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]\n this.sortable = Sortable.create(el, {\n ghostClass: 'sortable-ghost', // Class name for the drop placeholder,\n setData: function(dataTransfer) {\n // to avoid Firefox bug\n // Detail see : https://github.com/RubaXa/Sortable/issues/1012\n dataTransfer.setData('Text', '')\n },\n onEnd: evt => {\n const targetRow = this.list.splice(evt.oldIndex, 1)[0]\n this.list.splice(evt.newIndex, 0, targetRow)\n\n // for show the changes, you can delete in you code\n const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]\n this.newList.splice(evt.newIndex, 0, tempIndex)\n }\n })\n }\n }\n}\n</script>\n\n<style>\n.sortable-ghost{\n opacity: .8;\n color: #fff!important;\n background: #42b983!important;\n}\n</style>\n\n<style scoped>\n.icon-star{\n margin-right:2px;\n}\n.drag-handler{\n width: 20px;\n height: 20px;\n cursor: pointer;\n}\n.show-d{\n margin-top: 15px;\n}\n</style>\n"]}]}
|
