Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
6e703f0b by xiaomiao
Options

菜单增加排序功能

1 parent 5c31de25
Inline Side-by-side
Showing 7 changed files with 210 additions and 57 deletions
...@@ -59,8 +59,12 @@ ...@@ -59,8 +59,12 @@
59 padding: 0 7px !important; 59 padding: 0 7px !important;
60 } 60 }
61 61
62
63
62 // 查询表单样式 64 // 查询表单样式
63 .from-clues { 65 .from-clues {
66
67
64 height: 100%; 68 height: 100%;
65 width: 100%; 69 width: 100%;
66 // min-width: 1280px; 70 // min-width: 1280px;
...@@ -80,6 +84,14 @@ ...@@ -80,6 +84,14 @@
80 color: #E3F1FF; 84 color: #E3F1FF;
81 } 85 }
82 86
87
88
89 /deep/.el-icon-arrow-right {
90 color: rgb(228, 20, 20) !important;
91 }
92
93
94
83 .el-input__inner { 95 .el-input__inner {
84 background: #07388B; 96 background: #07388B;
85 border-radius: 2px; 97 border-radius: 2px;
...@@ -183,7 +195,10 @@ ...@@ -183,7 +195,10 @@
183 } 195 }
184 } 196 }
185 197
198 .el-table__expand-icon {
199 color: #8DEAF9;
186 200
201 }
187 202
188 .el-form-item--small.el-form-item { 203 .el-form-item--small.el-form-item {
189 margin-bottom: 0px; 204 margin-bottom: 0px;
...@@ -381,12 +396,12 @@ ...@@ -381,12 +396,12 @@
381 color: #CEF8FF; 396 color: #CEF8FF;
382 } 397 }
383 398
384 .el-icon-arrow-right { 399 // .el-icon-arrow-right {
385 width: 2px; 400 // width: 2px;
386 position: relative; 401 // position: relative;
387 left: 10px; 402 // left: 10px;
388 color: #FFFFFF; 403 // color: #FFFFFF;
389 } 404 // }
390 405
391 .el-breadcrumb__inner { 406 .el-breadcrumb__inner {
392 color: #CEF8FF !important; 407 color: #CEF8FF !important;
...@@ -748,9 +763,13 @@ ...@@ -748,9 +763,13 @@
748 } 763 }
749 764
750 .from-clues-content { 765 .from-clues-content {
766
767
751 margin-top: 0; 768 margin-top: 0;
752 background: none; 769 background: none;
753 padding: 0; 770 padding: 0;
771
772
754 } 773 }
755 774
756 .editDialogBox-box { 775 .editDialogBox-box {
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 } 9 }
10 10
11 11
12
12 .from-clues { 13 .from-clues {
13 // height: 100%; 14 // height: 100%;
14 width: 100%; 15 width: 100%;
...@@ -42,6 +43,12 @@ ...@@ -42,6 +43,12 @@
42 width: 100%; 43 width: 100%;
43 } 44 }
44 45
46 .from-clues-content {
47 .el-table__expand-icon {
48 color: rgb(0, 0, 0);
49 }
50 }
51
45 .el-form--inline .el-form-item { 52 .el-form--inline .el-form-item {
46 width: auto; 53 width: auto;
47 margin-right: 0px; 54 margin-right: 0px;
...@@ -198,9 +205,9 @@ ...@@ -198,9 +205,9 @@
198 // } 205 // }
199 206
200 .el-icon-arrow-right { 207 .el-icon-arrow-right {
201 width: 2px; 208 // width: 2px;
202 position: relative; 209 // position: relative;
203 left: 10px; 210 // left: 10px;
204 } 211 }
205 212
206 .el-breadcrumb__inner { 213 .el-breadcrumb__inner {
...@@ -356,6 +363,8 @@ ...@@ -356,6 +363,8 @@
356 margin-top: 0; 363 margin-top: 0;
357 background: none; 364 background: none;
358 padding: 0; 365 padding: 0;
366
367
359 } 368 }
360 369
361 .editDialogBox-box { 370 .editDialogBox-box {
...@@ -704,6 +713,10 @@ ...@@ -704,6 +713,10 @@
704 } 713 }
705 } 714 }
706 715
716 .el-form-item {
717 display: flex;
718 }
719
707 .el-input__inner { 720 .el-input__inner {
708 // background-color: #07388b; 721 // background-color: #07388b;
709 } 722 }
......
1 <template> 1 <template>
2 <div class="timedTask from-clues"> 2 <div class="from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item v-if="BASE_API.THEME=='jg'"> 5 <el-form-item v-if="BASE_API.THEME=='jg'">
......
1 <template> 1 <template>
2 <div class="timedTask from-clues"> 2 <div class="from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item v-if="BASE_API.THEME=='jg'"> 5 <el-form-item v-if="BASE_API.THEME=='jg'">
...@@ -31,16 +31,13 @@ ...@@ -31,16 +31,13 @@
31 <script> 31 <script>
32 // 定时任务 32 // 定时任务
33 import data from "./data"; 33 import data from "./data";
34 import { deleteAction, getAction, api } from "@/api/manageApi"; 34 import { deleteAction, getAction, api, httpAction } from "@/api/manageApi";
35 import EditDialog from "./edit-dialog.vue"; 35 import EditDialog from "./edit-dialog.vue";
36 import { mapGetters } from "vuex"; 36 import { mapGetters } from "vuex";
37 import { getMenuInfo } from "@/api/user"; 37 import { getMenuInfo } from "@/api/user";
38 import { updateOrder } from "@/api/orders"
38 import { 39 import {
39 getUuid, 40 judgeSort
40 judgeSort,
41 realMove,
42 findParents,
43 removeTreeListItem,
44 } from "@/utils/operation"; 41 } from "@/utils/operation";
45 export default { 42 export default {
46 name: "menus", 43 name: "menus",
...@@ -69,42 +66,95 @@ ...@@ -69,42 +66,95 @@
69 66
70 selectionList: [], 67 selectionList: [],
71 tableData: { 68 tableData: {
72 columns: [].concat(data.columns()).concat([ 69 columns: []
73 { 70 .concat(data.columns())
74 label: "操作", 71 .concat([
75 width: 380, 72 {
76 render: (h, scope) => { 73 label: "排序",
77 return ( 74 width: 300,
78 <div> 75 render: (h, scope) => {
79 <el-button 76 return (
80 type="text" 77 <div>
81 class='successColor' 78 <el-button
82 onClick={() => { 79 type="text"
83 this.handleEdit(scope.row); 80 class='movebtnColor'
84 }} 81 disabled={scope.row.isTop}
85 > 82 onClick={() => {
86 修改 83 this.moveUp(scope.row, 'TOP')
87 </el-button> 84 }}
85 >
86 置顶
87 </el-button>
88 <el-button
89 type="text"
90 class='movebtnColor'
91 disabled={scope.row.isTop}
92 onClick={() => {
93 this.moveUp(scope.row, 'UP');
94 }}
95 >
96 上移
97 </el-button>
98 <el-button
99 type="text"
100 class='movebtnColor'
101 disabled={scope.row.isBottom}
102 onClick={() => {
103 this.moveDown(scope.row, 'DOWN');
104 }}
105 >
106 下移
107 </el-button>
108 <el-button
109 type="text"
110 class='movebtnColor'
111 disabled={scope.row.isBottom}
112 onClick={() => {
113 this.moveDown(scope.row, 'BOTTOM');
114 }}
115 >
116 置底
117 </el-button>
118 </div>
119 );
120 },
121 },
122 ]).concat([
123 {
124 label: "操作",
125 width: 380,
126 render: (h, scope) => {
127 return (
128 <div>
129 <el-button
130 type="text"
131 class='successColor'
132 onClick={() => {
133 this.handleEdit(scope.row);
134 }}
135 >
136 修改
137 </el-button>
88 138
89 <el-button 139 <el-button
90 type="text" 140 type="text"
91 class='delColor' 141 class='delColor'
92 onClick={() => { 142 onClick={() => {
93 this.handleDelete(scope.row.id, scope.row.name); 143 this.handleDelete(scope.row.id, scope.row.name);
94 }} 144 }}
95 > 145 >
96 删除 146 删除
97 </el-button> 147 </el-button>
98 </div> 148 </div>
99 ); 149 );
150 },
100 }, 151 },
101 }, 152 ]),
102 ]),
103 data: [], 153 data: [],
104 }, 154 },
105 tableUrl: api.menus, // 菜单接口地址 155 tableUrl: api.menus, // 菜单接口地址
106 meumurlid: api.subsystem,// 项目id接口地址 156 meumurlid: api.subsystem,// 项目id接口地址
107 productId: ""//项目id 157 productId: "",//项目id
108 }; 158 };
109 }, 159 },
110 created () { 160 created () {
...@@ -153,7 +203,6 @@ ...@@ -153,7 +203,6 @@
153 // 加载表格数据 203 // 加载表格数据
154 getTableList () { 204 getTableList () {
155 getMenuInfo(this.BASE_API.CODE).then((res) => { 205 getMenuInfo(this.BASE_API.CODE).then((res) => {
156 console.log("/sthj", res);
157 if (res.code === 200) { 206 if (res.code === 200) {
158 this.tablelistData = judgeSort(res.result) 207 this.tablelistData = judgeSort(res.result)
159 this.listData = this.tablelistData 208 this.listData = this.tablelistData
...@@ -180,8 +229,7 @@ ...@@ -180,8 +229,7 @@
180 getAction(this.meumurlid, params) 229 getAction(this.meumurlid, params)
181 .then((res) => { 230 .then((res) => {
182 this.productId = res.content[0].id; 231 this.productId = res.content[0].id;
183 this.getAuthorityList(res.content[0].id, res.content[0].code) 232 // this.selectedSubsystemCode = res.content[0].code
184 this.selectedSubsystemCode = res.content[0].code
185 233
186 }) 234 })
187 .catch((error) => { 235 .catch((error) => {
...@@ -245,6 +293,83 @@ ...@@ -245,6 +293,83 @@
245 reloadTableData () { 293 reloadTableData () {
246 this.getTableList() 294 this.getTableList()
247 }, 295 },
296
297 // 排序
298 moveUp (row, operate) {
299 if (row.isTop) {
300 return;
301 } else {
302 this.realMove(row, operate);
303 }
304 },
305 moveDown (row, operate) {
306 if (row.isBottom) {
307 return;
308 } else {
309 this.realMove(row, operate);
310 }
311 },
312
313 //树形表格移动
314 realMove (row, operate) {
315 function tarverse (nodes, id) {
316 let result;
317 for (let i = 0; i < nodes.length; i++) {
318 if (nodes[i].children && nodes[i].children.length > 0) {
319 result = tarverse(nodes[i].children, id);
320 }
321 if (nodes[i].id == id) {
322 if (operate === 'UP') {
323 result = nodes[i - 1].id;
324 } else if (operate === 'DOWN') {
325 result = nodes[i + 1].id;
326 }
327 return result;
328 }
329
330 if (result) return result;
331 }
332 return result
333 }
334
335 this.$nextTick(() => {
336 updateOrder('/rest/menus', row, operate, tarverse(this.tablelistData, row.id)).then(res => {
337 if (res.status === 1) {
338 this.getTableList()
339 this.$message.success({ message: res.message, showClose: true })
340 } else {
341 this.$message.error({ message: res.message, showClose: true })
342 }
343 })
344 this.tablelistData = judgeSort(this.tablelistData || []);
345 })
346 // this.tablelistData = changeSort(this.tablelistData, row.id);
347 // function changeSort (arr, id) {
348 // if (arr.length) {
349 // let flag = false;
350 // for (let i in arr) {
351 // if (arr[i].id == id) {
352 // if (operate === "UP") {
353 // arr[i] = arr.splice(i - 1, 1, arr[i])[0];
354 // } else if (operate === "DOWN") {
355 // let temp = arr.splice(i - 0 + 1, 1, arr[i])
356 // arr[i] = temp[0];
357 // } else if (operate === "TOP") {
358 // arr.unshift(arr.splice(i, 1)[0]);
359 // } else if (operate === "BOTTOM") {
360 // arr.push(arr.splice(i, 1)[0]);
361 // }
362 // flag = true;
363 // break;
364 // }
365 // if (!flag && arr[i].children && arr[i].children.length) {
366 // arr[i].children = changeSort(arr[i].children, id);
367 // }
368 // }
369 // }
370 // return arr;
371 // }
372 }
248 }, 373 },
249 }; 374 };
250 </script> 375 </script>
...@@ -252,8 +377,4 @@ ...@@ -252,8 +377,4 @@
252 @import "~@/styles/mixin.scss"; 377 @import "~@/styles/mixin.scss";
253 378
254 // @import "~@/styles/public.scss"; 379 // @import "~@/styles/public.scss";
255
256 /deep/.el-table__expand-icon {
257 color: #fff;
258 }
259 </style> 380 </style>
......
1 <template> 1 <template>
2 <div class="timedTask from-clues"> 2 <div class="from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item v-if="BASE_API.THEME == 'jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
......
1 <template> 1 <template>
2 <div class="timedTask from-clues"> 2 <div class="from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="form" :model="form" label-width="80px"> 4 <el-form ref="form" :model="form" label-width="80px">
5 <el-form-item v-if="BASE_API.THEME == 'jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
......
1 <template> 1 <template>
2 <div class="timedTask from-clues"> 2 <div class="from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item v-if="BASE_API.THEME == 'jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
......