{"remainingRequest":"/Users/kang/Gitea/vue-element-admin/node_modules/babel-loader/lib/index.js!/Users/kang/Gitea/vue-element-admin/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/kang/Gitea/vue-element-admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/kang/Gitea/vue-element-admin/src/views/table/drag-table.vue?vue&type=script&lang=js","dependencies":[{"path":"/Users/kang/Gitea/vue-element-admin/src/views/table/drag-table.vue","mtime":1754409279874},{"path":"/Users/kang/Gitea/vue-element-admin/babel.config.js","mtime":1754409277597},{"path":"/Users/kang/Gitea/vue-element-admin/node_modules/cache-loader/dist/cjs.js","mtime":1754409278035},{"path":"/Users/kang/Gitea/vue-element-admin/node_modules/babel-loader/lib/index.js","mtime":1754409277911},{"path":"/Users/kang/Gitea/vue-element-admin/node_modules/cache-loader/dist/cjs.js","mtime":1754409278035},{"path":"/Users/kang/Gitea/vue-element-admin/node_modules/vue-loader/lib/index.js","mtime":1754409279720}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:aW1wb3J0IF9yZWdlbmVyYXRvciBmcm9tICIvVXNlcnMva2FuZy9HaXRlYS92dWUtZWxlbWVudC1hZG1pbi9ub2RlX21vZHVsZXMvQGJhYmVsL3J1bnRpbWUvaGVscGVycy9lc20vcmVnZW5lcmF0b3IuanMiOwppbXBvcnQgX2FzeW5jVG9HZW5lcmF0b3IgZnJvbSAiL1VzZXJzL2thbmcvR2l0ZWEvdnVlLWVsZW1lbnQtYWRtaW4vbm9kZV9tb2R1bGVzL0BiYWJlbC9ydW50aW1lL2hlbHBlcnMvZXNtL2FzeW5jVG9HZW5lcmF0b3IuanMiOwppbXBvcnQgImNvcmUtanMvbW9kdWxlcy9lcy5hcnJheS5tYXAuanMiOwppbXBvcnQgImNvcmUtanMvbW9kdWxlcy9lcy5hcnJheS5zbGljZS5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLmFycmF5LnNwbGljZS5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLm9iamVjdC50by1zdHJpbmcuanMiOwppbXBvcnQgImNvcmUtanMvbW9kdWxlcy9lc25leHQuaXRlcmF0b3IuY29uc3RydWN0b3IuanMiOwppbXBvcnQgImNvcmUtanMvbW9kdWxlcy9lc25leHQuaXRlcmF0b3IubWFwLmpzIjsKLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCB7IGZldGNoTGlzdCB9IGZyb20gJ0AvYXBpL2FydGljbGUnOwppbXBvcnQgU29ydGFibGUgZnJvbSAnc29ydGFibGVqcyc7CmV4cG9ydCBkZWZhdWx0IHsKICBuYW1lOiAnRHJhZ1RhYmxlJywKICBmaWx0ZXJzOiB7CiAgICBzdGF0dXNGaWx0ZXI6IGZ1bmN0aW9uIHN0YXR1c0ZpbHRlcihzdGF0dXMpIHsKICAgICAgdmFyIHN0YXR1c01hcCA9IHsKICAgICAgICBwdWJsaXNoZWQ6ICdzdWNjZXNzJywKICAgICAgICBkcmFmdDogJ2luZm8nLAogICAgICAgIGRlbGV0ZWQ6ICdkYW5nZXInCiAgICAgIH07CiAgICAgIHJldHVybiBzdGF0dXNNYXBbc3RhdHVzXTsKICAgIH0KICB9LAogIGRhdGE6IGZ1bmN0aW9uIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICBsaXN0OiBudWxsLAogICAgICB0b3RhbDogbnVsbCwKICAgICAgbGlzdExvYWRpbmc6IHRydWUsCiAgICAgIGxpc3RRdWVyeTogewogICAgICAgIHBhZ2U6IDEsCiAgICAgICAgbGltaXQ6IDEwCiAgICAgIH0sCiAgICAgIHNvcnRhYmxlOiBudWxsLAogICAgICBvbGRMaXN0OiBbXSwKICAgICAgbmV3TGlzdDogW10KICAgIH07CiAgfSwKICBjcmVhdGVkOiBmdW5jdGlvbiBjcmVhdGVkKCkgewogICAgdGhpcy5nZXRMaXN0KCk7CiAgfSwKICBtZXRob2RzOiB7CiAgICBnZXRMaXN0OiBmdW5jdGlvbiBnZXRMaXN0KCkgewogICAgICB2YXIgX3RoaXMgPSB0aGlzOwogICAgICByZXR1cm4gX2FzeW5jVG9HZW5lcmF0b3IoLyojX19QVVJFX18qL19yZWdlbmVyYXRvcigpLm0oZnVuY3Rpb24gX2NhbGxlZSgpIHsKICAgICAgICB2YXIgX3lpZWxkJGZldGNoTGlzdCwgZGF0YTsKICAgICAgICByZXR1cm4gX3JlZ2VuZXJhdG9yKCkudyhmdW5jdGlvbiAoX2NvbnRleHQpIHsKICAgICAgICAgIHdoaWxlICgxKSBzd2l0Y2ggKF9jb250ZXh0Lm4pIHsKICAgICAgICAgICAgY2FzZSAwOgogICAgICAgICAgICAgIF90aGlzLmxpc3RMb2FkaW5nID0gdHJ1ZTsKICAgICAgICAgICAgICBfY29udGV4dC5uID0gMTsKICAgICAgICAgICAgICByZXR1cm4gZmV0Y2hMaXN0KF90aGlzLmxpc3RRdWVyeSk7CiAgICAgICAgICAgIGNhc2UgMToKICAgICAgICAgICAgICBfeWllbGQkZmV0Y2hMaXN0ID0gX2NvbnRleHQudjsKICAgICAgICAgICAgICBkYXRhID0gX3lpZWxkJGZldGNoTGlzdC5kYXRhOwogICAgICAgICAgICAgIF90aGlzLmxpc3QgPSBkYXRhLml0ZW1zOwogICAgICAgICAgICAgIF90aGlzLnRvdGFsID0gZGF0YS50b3RhbDsKICAgICAgICAgICAgICBfdGhpcy5saXN0TG9hZGluZyA9IGZhbHNlOwogICAgICAgICAgICAgIF90aGlzLm9sZExpc3QgPSBfdGhpcy5saXN0Lm1hcChmdW5jdGlvbiAodikgewogICAgICAgICAgICAgICAgcmV0dXJuIHYuaWQ7CiAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgX3RoaXMubmV3TGlzdCA9IF90aGlzLm9sZExpc3Quc2xpY2UoKTsKICAgICAgICAgICAgICBfdGhpcy4kbmV4dFRpY2soZnVuY3Rpb24gKCkgewogICAgICAgICAgICAgICAgX3RoaXMuc2V0U29ydCgpOwogICAgICAgICAgICAgIH0pOwogICAgICAgICAgICBjYXNlIDI6CiAgICAgICAgICAgICAgcmV0dXJuIF9jb250ZXh0LmEoMik7CiAgICAgICAgICB9CiAgICAgICAgfSwgX2NhbGxlZSk7CiAgICAgIH0pKSgpOwogICAgfSwKICAgIHNldFNvcnQ6IGZ1bmN0aW9uIHNldFNvcnQoKSB7CiAgICAgIHZhciBfdGhpczIgPSB0aGlzOwogICAgICB2YXIgZWwgPSB0aGlzLiRyZWZzLmRyYWdUYWJsZS4kZWwucXVlcnlTZWxlY3RvckFsbCgnLmVsLXRhYmxlX19ib2R5LXdyYXBwZXIgPiB0YWJsZSA+IHRib2R5JylbMF07CiAgICAgIHRoaXMuc29ydGFibGUgPSBTb3J0YWJsZS5jcmVhdGUoZWwsIHsKICAgICAgICBnaG9zdENsYXNzOiAnc29ydGFibGUtZ2hvc3QnLAogICAgICAgIC8vIENsYXNzIG5hbWUgZm9yIHRoZSBkcm9wIHBsYWNlaG9sZGVyLAogICAgICAgIHNldERhdGE6IGZ1bmN0aW9uIHNldERhdGEoZGF0YVRyYW5zZmVyKSB7CiAgICAgICAgICAvLyB0byBhdm9pZCBGaXJlZm94IGJ1ZwogICAgICAgICAgLy8gRGV0YWlsIHNlZSA6IGh0dHBzOi8vZ2l0aHViLmNvbS9SdWJhWGEvU29ydGFibGUvaXNzdWVzLzEwMTIKICAgICAgICAgIGRhdGFUcmFuc2Zlci5zZXREYXRhKCdUZXh0JywgJycpOwogICAgICAgIH0sCiAgICAgICAgb25FbmQ6IGZ1bmN0aW9uIG9uRW5kKGV2dCkgewogICAgICAgICAgdmFyIHRhcmdldFJvdyA9IF90aGlzMi5saXN0LnNwbGljZShldnQub2xkSW5kZXgsIDEpWzBdOwogICAgICAgICAgX3RoaXMyLmxpc3Quc3BsaWNlKGV2dC5uZXdJbmRleCwgMCwgdGFyZ2V0Um93KTsKCiAgICAgICAgICAvLyBmb3Igc2hvdyB0aGUgY2hhbmdlcywgeW91IGNhbiBkZWxldGUgaW4geW91IGNvZGUKICAgICAgICAgIHZhciB0ZW1wSW5kZXggPSBfdGhpczIubmV3TGlzdC5zcGxpY2UoZXZ0Lm9sZEluZGV4LCAxKVswXTsKICAgICAgICAgIF90aGlzMi5uZXdMaXN0LnNwbGljZShldnQubmV3SW5kZXgsIDAsIHRlbXBJbmRleCk7CiAgICAgICAgfQogICAgICB9KTsKICAgIH0KICB9Cn07"},{"version":3,"names":["fetchList","Sortable","name","filters","statusFilter","status","statusMap","published","draft","deleted","data","list","total","listLoading","listQuery","page","limit","sortable","oldList","newList","created","getList","methods","_this","_asyncToGenerator","_regenerator","m","_callee","_yield$fetchList","w","_context","n","v","items","map","id","slice","$nextTick","setSort","a","_this2","el","$refs","dragTable","$el","querySelectorAll","create","ghostClass","setData","dataTransfer","onEnd","evt","targetRow","splice","oldIndex","newIndex","tempIndex"],"sources":["src/views/table/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    <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->\n    <div class=\"show-d\">\n      <el-tag style=\"margin-right:12px;\">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }}\n    </div>\n    <div class=\"show-d\">\n      <el-tag>{{ $t('table.dragTips2') }} :</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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,SAAAA,SAAA;AACA,OAAAC,QAAA;AAEA;EACAC,IAAA;EACAC,OAAA;IACAC,YAAA,WAAAA,aAAAC,MAAA;MACA,IAAAC,SAAA;QACAC,SAAA;QACAC,KAAA;QACAC,OAAA;MACA;MACA,OAAAH,SAAA,CAAAD,MAAA;IACA;EACA;EACAK,IAAA,WAAAA,KAAA;IACA;MACAC,IAAA;MACAC,KAAA;MACAC,WAAA;MACAC,SAAA;QACAC,IAAA;QACAC,KAAA;MACA;MACAC,QAAA;MACAC,OAAA;MACAC,OAAA;IACA;EACA;EACAC,OAAA,WAAAA,QAAA;IACA,KAAAC,OAAA;EACA;EACAC,OAAA;IACAD,OAAA,WAAAA,QAAA;MAAA,IAAAE,KAAA;MAAA,OAAAC,iBAAA,cAAAC,YAAA,GAAAC,CAAA,UAAAC,QAAA;QAAA,IAAAC,gBAAA,EAAAlB,IAAA;QAAA,OAAAe,YAAA,GAAAI,CAAA,WAAAC,QAAA;UAAA,kBAAAA,QAAA,CAAAC,CAAA;YAAA;cACAR,KAAA,CAAAV,WAAA;cAAAiB,QAAA,CAAAC,CAAA;cAAA,OACA/B,SAAA,CAAAuB,KAAA,CAAAT,SAAA;YAAA;cAAAc,gBAAA,GAAAE,QAAA,CAAAE,CAAA;cAAAtB,IAAA,GAAAkB,gBAAA,CAAAlB,IAAA;cACAa,KAAA,CAAAZ,IAAA,GAAAD,IAAA,CAAAuB,KAAA;cACAV,KAAA,CAAAX,KAAA,GAAAF,IAAA,CAAAE,KAAA;cACAW,KAAA,CAAAV,WAAA;cACAU,KAAA,CAAAL,OAAA,GAAAK,KAAA,CAAAZ,IAAA,CAAAuB,GAAA,WAAAF,CAAA;gBAAA,OAAAA,CAAA,CAAAG,EAAA;cAAA;cACAZ,KAAA,CAAAJ,OAAA,GAAAI,KAAA,CAAAL,OAAA,CAAAkB,KAAA;cACAb,KAAA,CAAAc,SAAA;gBACAd,KAAA,CAAAe,OAAA;cACA;YAAA;cAAA,OAAAR,QAAA,CAAAS,CAAA;UAAA;QAAA,GAAAZ,OAAA;MAAA;IACA;IACAW,OAAA,WAAAA,QAAA;MAAA,IAAAE,MAAA;MACA,IAAAC,EAAA,QAAAC,KAAA,CAAAC,SAAA,CAAAC,GAAA,CAAAC,gBAAA;MACA,KAAA5B,QAAA,GAAAhB,QAAA,CAAA6C,MAAA,CAAAL,EAAA;QACAM,UAAA;QAAA;QACAC,OAAA,WAAAA,QAAAC,YAAA;UACA;UACA;UACAA,YAAA,CAAAD,OAAA;QACA;QACAE,KAAA,WAAAA,MAAAC,GAAA;UACA,IAAAC,SAAA,GAAAZ,MAAA,CAAA7B,IAAA,CAAA0C,MAAA,CAAAF,GAAA,CAAAG,QAAA;UACAd,MAAA,CAAA7B,IAAA,CAAA0C,MAAA,CAAAF,GAAA,CAAAI,QAAA,KAAAH,SAAA;;UAEA;UACA,IAAAI,SAAA,GAAAhB,MAAA,CAAArB,OAAA,CAAAkC,MAAA,CAAAF,GAAA,CAAAG,QAAA;UACAd,MAAA,CAAArB,OAAA,CAAAkC,MAAA,CAAAF,GAAA,CAAAI,QAAA,KAAAC,SAAA;QACA;MACA;IACA;EACA;AACA","ignoreList":[]}]}