Commit ed04c24eb35a16c122e4c32b2cc703b5c385760f
1 parent
f9799cd4
代码生成列支持拖动排序
Showing
3 changed files
with
22 additions
and
1 deletions
ruoyi-ui/package.json
| @@ -54,6 +54,7 @@ | @@ -54,6 +54,7 @@ | ||
| 54 | "nprogress": "0.2.0", | 54 | "nprogress": "0.2.0", |
| 55 | "path-to-regexp": "2.4.0", | 55 | "path-to-regexp": "2.4.0", |
| 56 | "screenfull": "4.2.0", | 56 | "screenfull": "4.2.0", |
| 57 | + "sortablejs": "1.8.4", | ||
| 57 | "vue": "2.6.10", | 58 | "vue": "2.6.10", |
| 58 | "vue-count-to": "1.0.13", | 59 | "vue-count-to": "1.0.13", |
| 59 | "vue-quill-editor": "3.0.6", | 60 | "vue-quill-editor": "3.0.6", |
ruoyi-ui/src/assets/styles/ruoyi.scss
| @@ -187,4 +187,11 @@ | @@ -187,4 +187,11 @@ | ||
| 187 | border-radius: 50%; | 187 | border-radius: 50%; |
| 188 | box-shadow: 0 0 4px #ccc; | 188 | box-shadow: 0 0 4px #ccc; |
| 189 | overflow: hidden; | 189 | overflow: hidden; |
| 190 | +} | ||
| 191 | + | ||
| 192 | +/* 拖拽列样式 */ | ||
| 193 | +.sortable-ghost{ | ||
| 194 | + opacity: .8; | ||
| 195 | + color: #fff!important; | ||
| 196 | + background: #42b983!important; | ||
| 190 | } | 197 | } |
| 191 | \ No newline at end of file | 198 | \ No newline at end of file |
ruoyi-ui/src/views/tool/gen/editTable.vue
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | <basic-info-form ref="basicInfo" :info="info" /> | 5 | <basic-info-form ref="basicInfo" :info="info" /> |
| 6 | </el-tab-pane> | 6 | </el-tab-pane> |
| 7 | <el-tab-pane label="字段信息" name="cloum"> | 7 | <el-tab-pane label="字段信息" name="cloum"> |
| 8 | - <el-table :data="cloumns" :max-height="tableHeight"> | 8 | + <el-table ref="dragTable" :data="cloumns" row-key="columnId" :max-height="tableHeight"> |
| 9 | <el-table-column label="序号" type="index" min-width="5%" /> | 9 | <el-table-column label="序号" type="index" min-width="5%" /> |
| 10 | <el-table-column | 10 | <el-table-column |
| 11 | label="字段列名" | 11 | label="字段列名" |
| @@ -126,6 +126,7 @@ import { getGenTable, updateGenTable } from "@/api/tool/gen"; | @@ -126,6 +126,7 @@ import { getGenTable, updateGenTable } from "@/api/tool/gen"; | ||
| 126 | import { optionselect as getDictOptionselect } from "@/api/system/dict/type"; | 126 | import { optionselect as getDictOptionselect } from "@/api/system/dict/type"; |
| 127 | import basicInfoForm from "./basicInfoForm"; | 127 | import basicInfoForm from "./basicInfoForm"; |
| 128 | import genInfoForm from "./genInfoForm"; | 128 | import genInfoForm from "./genInfoForm"; |
| 129 | +import Sortable from 'sortablejs' | ||
| 129 | export default { | 130 | export default { |
| 130 | name: "GenEdit", | 131 | name: "GenEdit", |
| 131 | components: { | 132 | components: { |
| @@ -198,6 +199,18 @@ export default { | @@ -198,6 +199,18 @@ export default { | ||
| 198 | this.$store.dispatch("tagsView/delView", this.$route); | 199 | this.$store.dispatch("tagsView/delView", this.$route); |
| 199 | this.$router.push({ path: "/tool/gen", query: { t: Date.now()}}) | 200 | this.$router.push({ path: "/tool/gen", query: { t: Date.now()}}) |
| 200 | } | 201 | } |
| 202 | + }, | ||
| 203 | + mounted() { | ||
| 204 | + const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]; | ||
| 205 | + const sortable = Sortable.create(el, { | ||
| 206 | + onEnd: evt => { | ||
| 207 | + const targetRow = this.cloumns.splice(evt.oldIndex, 1)[0]; | ||
| 208 | + this.cloumns.splice(evt.newIndex, 0, targetRow); | ||
| 209 | + for (let index in this.cloumns) { | ||
| 210 | + this.cloumns[index].sort = parseInt(index) + 1; | ||
| 211 | + } | ||
| 212 | + } | ||
| 213 | + }); | ||
| 201 | } | 214 | } |
| 202 | }; | 215 | }; |
| 203 | </script> | 216 | </script> |