{"remainingRequest":"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\\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:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCB7IGZldGNoTGlzdCB9IGZyb20gJ0AvYXBpL2FydGljbGUnCmltcG9ydCBTb3J0YWJsZSBmcm9tICdzb3J0YWJsZWpzJwoKZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICdEcmFnVGFibGUnLAogIGZpbHRlcnM6IHsKICAgIHN0YXR1c0ZpbHRlcihzdGF0dXMpIHsKICAgICAgY29uc3Qgc3RhdHVzTWFwID0gewogICAgICAgIHB1Ymxpc2hlZDogJ3N1Y2Nlc3MnLAogICAgICAgIGRyYWZ0OiAnaW5mbycsCiAgICAgICAgZGVsZXRlZDogJ2RhbmdlcicKICAgICAgfQogICAgICByZXR1cm4gc3RhdHVzTWFwW3N0YXR1c10KICAgIH0KICB9LAogIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICBsaXN0OiBudWxsLAogICAgICB0b3RhbDogbnVsbCwKICAgICAgbGlzdExvYWRpbmc6IHRydWUsCiAgICAgIGxpc3RRdWVyeTogewogICAgICAgIHBhZ2U6IDEsCiAgICAgICAgbGltaXQ6IDEwCiAgICAgIH0sCiAgICAgIHNvcnRhYmxlOiBudWxsLAogICAgICBvbGRMaXN0OiBbXSwKICAgICAgbmV3TGlzdDogW10KICAgIH0KICB9LAogIGNyZWF0ZWQoKSB7CiAgICB0aGlzLmdldExpc3QoKQogIH0sCiAgbWV0aG9kczogewogICAgYXN5bmMgZ2V0TGlzdCgpIHsKICAgICAgdGhpcy5saXN0TG9hZGluZyA9IHRydWUKICAgICAgY29uc3QgeyBkYXRhIH0gPSBhd2FpdCBmZXRjaExpc3QodGhpcy5saXN0UXVlcnkpCiAgICAgIHRoaXMubGlzdCA9IGRhdGEuaXRlbXMKICAgICAgdGhpcy50b3RhbCA9IGRhdGEudG90YWwKICAgICAgdGhpcy5saXN0TG9hZGluZyA9IGZhbHNlCiAgICAgIHRoaXMub2xkTGlzdCA9IHRoaXMubGlzdC5tYXAodiA9PiB2LmlkKQogICAgICB0aGlzLm5ld0xpc3QgPSB0aGlzLm9sZExpc3Quc2xpY2UoKQogICAgICB0aGlzLiRuZXh0VGljaygoKSA9PiB7CiAgICAgICAgdGhpcy5zZXRTb3J0KCkKICAgICAgfSkKICAgIH0sCiAgICBzZXRTb3J0KCkgewogICAgICBjb25zdCBlbCA9IHRoaXMuJHJlZnMuZHJhZ1RhYmxlLiRlbC5xdWVyeVNlbGVjdG9yQWxsKCcuZWwtdGFibGVfX2JvZHktd3JhcHBlciA+IHRhYmxlID4gdGJvZHknKVswXQogICAgICB0aGlzLnNvcnRhYmxlID0gU29ydGFibGUuY3JlYXRlKGVsLCB7CiAgICAgICAgZ2hvc3RDbGFzczogJ3NvcnRhYmxlLWdob3N0JywgLy8gQ2xhc3MgbmFtZSBmb3IgdGhlIGRyb3AgcGxhY2Vob2xkZXIsCiAgICAgICAgc2V0RGF0YTogZnVuY3Rpb24oZGF0YVRyYW5zZmVyKSB7CiAgICAgICAgICAvLyB0byBhdm9pZCBGaXJlZm94IGJ1ZwogICAgICAgICAgLy8gRGV0YWlsIHNlZSA6IGh0dHBzOi8vZ2l0aHViLmNvbS9SdWJhWGEvU29ydGFibGUvaXNzdWVzLzEwMTIKICAgICAgICAgIGRhdGFUcmFuc2Zlci5zZXREYXRhKCdUZXh0JywgJycpCiAgICAgICAgfSwKICAgICAgICBvbkVuZDogZXZ0ID0+IHsKICAgICAgICAgIGNvbnN0IHRhcmdldFJvdyA9IHRoaXMubGlzdC5zcGxpY2UoZXZ0Lm9sZEluZGV4LCAxKVswXQogICAgICAgICAgdGhpcy5saXN0LnNwbGljZShldnQubmV3SW5kZXgsIDAsIHRhcmdldFJvdykKCiAgICAgICAgICAvLyBmb3Igc2hvdyB0aGUgY2hhbmdlcywgeW91IGNhbiBkZWxldGUgaW4geW91IGNvZGUKICAgICAgICAgIGNvbnN0IHRlbXBJbmRleCA9IHRoaXMubmV3TGlzdC5zcGxpY2UoZXZ0Lm9sZEluZGV4LCAxKVswXQogICAgICAgICAgdGhpcy5uZXdMaXN0LnNwbGljZShldnQubmV3SW5kZXgsIDAsIHRlbXBJbmRleCkKICAgICAgICB9CiAgICAgIH0pCiAgICB9CiAgfQp9Cg=="},{"version":3,"sources":["drag-table.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"drag-table.vue","sourceRoot":"src/views/table","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"]}]}