1 line
6.1 KiB
JSON
1 line
6.1 KiB
JSON
{"remainingRequest":"/Users/kang/Gitea/vue-element-admin-i18n/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/kang/Gitea/vue-element-admin-i18n/src/views/table/drag-table.vue?vue&type=style&index=1&id=4b19cff0&scoped=true&lang=css","dependencies":[{"path":"/Users/kang/Gitea/vue-element-admin-i18n/src/views/table/drag-table.vue","mtime":1599486365000},{"path":"/Users/kang/Gitea/vue-element-admin-i18n/node_modules/css-loader/dist/cjs.js","mtime":1754408228038},{"path":"/Users/kang/Gitea/vue-element-admin-i18n/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1754408228340},{"path":"/Users/kang/Gitea/vue-element-admin-i18n/node_modules/postcss-loader/src/index.js","mtime":1754408228130},{"path":"/Users/kang/Gitea/vue-element-admin-i18n/node_modules/cache-loader/dist/cjs.js","mtime":1754408227855},{"path":"/Users/kang/Gitea/vue-element-admin-i18n/node_modules/vue-loader/lib/index.js","mtime":1754408228175}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5pY29uLXN0YXJ7CiAgbWFyZ2luLXJpZ2h0OjJweDsKfQouZHJhZy1oYW5kbGVyewogIHdpZHRoOiAyMHB4OwogIGhlaWdodDogMjBweDsKICBjdXJzb3I6IHBvaW50ZXI7Cn0KLnNob3ctZHsKICBtYXJnaW4tdG9wOiAxNXB4Owp9Cg=="},{"version":3,"sources":["drag-table.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IA;AACA;AACA;AACA;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 <!-- $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"]}]} |