Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
87973468 by xiaomiao
Options

菜单配置

1 parent 35bbb8a2
Inline Side-by-side
Showing 3 changed files with 350 additions and 45 deletions
...@@ -152,7 +152,7 @@ export default { ...@@ -152,7 +152,7 @@ export default {
152 this.getUserList(scope.row); 152 this.getUserList(scope.row);
153 }} 153 }}
154 > 154 >
155 人员 155 配置
156 </el-button> 156 </el-button>
157 </span> 157 </span>
158 </el-tooltip> 158 </el-tooltip>
......
1 <template> 1 <template>
2 <Dialog 2 <el-dialog
3 :title="title" 3 :close-on-click-modal="false"
4 class="tableClass" 4 top="0"
5 :show.sync="visible" 5 @click="close()"
6 :width="'715px'" 6 custom-class="dialogBox editDialogBox mainCenter"
7 @close="close()" 7 :visible.sync="visible"
8 width="85%"
8 > 9 >
9 <template slot="content"> 10 <div slot="title" class="dialog_title" ref="dialogTitle">
11 {{ title || "标题" }}
12 </div>
13 <div class="editDialogBox-box">
14 <el-tabs v-model="activeName" type="card">
15 <el-tab-pane label="人员配置" name="first"></el-tab-pane>
16 <el-tab-pane label="菜单配置" name="second"></el-tab-pane>
17 </el-tabs>
18 <!-- <div class="editDialogBox-box" v-if="activeName == 'first'"> -->
10 <lb-table 19 <lb-table
20 v-if="activeName == 'first'"
11 ref="multipleTable" 21 ref="multipleTable"
12 :pagination="false" 22 :pagination="false"
13 :column="tableData.column" 23 :column="usertableData.column"
14 :data="tableData.data" 24 :data="usertableData.data"
15 @selection-change="handleSelectionChange" 25 @selection-change="handleSelectionChange"
26 @row-click="handleClickTableRow"
27 >
16 > 28 >
17 </lb-table> 29 </lb-table>
18 </template> 30 <!-- </div> -->
31 <!-- <div class="editDialogBox-box" v-else="activeName !== 'first'"> -->
32 <lb-table
33 v-else="activeName !== 'first'"
34 :pagination="false"
35 :column="menutableData.columns"
36 :data="menutableData"
37 row-key="id"
38 default-expand-all
39 @selection-change="handleSelectionChanges"
40 @row-click="handleClickTableRows"
41 :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
42 >
43 </lb-table>
44 <!-- </div> -->
45 </div>
19 <template slot="footer"> 46 <template slot="footer">
20 <el-button type="primary" class="save" @click="handleSaveMember()" 47 <el-button type="primary" class="save" @click="handleSaveMember()"
21 >保存</el-button 48 >保存</el-button
22 > 49 >
23 <el-button class="cancel-button" @click="close()">取消</el-button> 50 <el-button class="cancel-button" @click="close()">取消</el-button>
24 </template> 51 </template>
25 </Dialog> 52 </el-dialog>
26 </template> 53 </template>
27 54
28 <script> 55 <script>
29 import Dialog from "@/components/Dialog/";
30 import { updateUser } from "@/api/quanxianmanagement"; 56 import { updateUser } from "@/api/quanxianmanagement";
31 export default { 57 export default {
32 name: "", 58 name: "",
33 components: { Dialog },
34 data() { 59 data() {
35 return { 60 return {
36 title: "人员配置", 61 title: "人员配置",
37 visible: false, 62 visible: false,
38 hasSelectList: [ 63 menutableData: {
39 // {
40 // name: "管理员",
41 // loginName: "admin1",
42 // departmentName: "研发部",
43 // jobLevel: null,
44 // },
45 // {
46 // name: "测试账号",
47 // loginName: "admin2",
48 // departmentName: "研发部",
49 // jobLevel: null,
50 // },
51 ], //已经选择的id组成的数组
52 tableData: {
53 column: [ 64 column: [
54 { 65 {
55 type: "selection", 66 type: "selection",
56 }, 67 },
57 { 68 {
58 prop: "name", 69 prop: "name",
59 label: "姓名", 70 label: "菜单名称",
60 }, 71 },
72 ],
73 },
74 usertableData: {
75 column: [
61 { 76 {
62 prop: "loginName", 77 type: "selection",
63 label: "用户名",
64 }, 78 },
65 { 79 {
66 prop: "departmentName", 80 prop: "name",
67 label: "部门", 81 label: "姓名",
68 }, 82 },
69 { 83 {
70 prop: "jobLevel", 84 prop: "loginName",
71 label: "职务", 85 label: "用户名",
72 }, 86 },
73 ], 87 ],
74 data: [], 88 },
75 // 角色id 89 // 角色id
76 roleId: "", 90 roleId: "",
77 }, 91 activeName: "first",
78 multipleSelection: [], 92 multipleSelection: [],
79 }; 93 };
80 }, 94 },
...@@ -83,26 +97,106 @@ export default { ...@@ -83,26 +97,106 @@ export default {
83 created() {}, 97 created() {},
84 mounted() {}, 98 mounted() {},
85 methods: { 99 methods: {
86 // 人员配置根据selectStatus字段确定已选人员 100
101 // 人员配置点击行勾选数据
102 handleClickTableRow(row, event) {
103 this.checkNum = 0;
104 this.isCheck = false;
105 if (event.label == "操作") {
106 return;
107 } else {
108 if (row.status == "0") {
109 return;
110 } else {
111 if (this.multipleSelection.length > 0) {
112 if (
113 JSON.stringify(this.multipleSelection).indexOf(
114 JSON.stringify(row)
115 ) == -1
116 ) {
117 this.multipleSelection.push(row);
118 this.$refs.multipleTable.toggleRowSelection(row, true);
119 } else {
120 this.multipleSelection.map((item, index) => {
121 if (item.id == row.id) {
122 this.multipleSelection.splice(index, 1);
123 this.$refs.multipleTable.toggleRowSelection(row, false);
124 }
125 });
126 }
127 } else {
128 this.multipleSelection.push(row);
129 this.$refs.multipleTable.toggleRowSelection(row, true);
130 }
131 }
132 }
133 if (this.multipleSelection.length > 0) {
134 this.checkNum = this.multipleSelection.length;
135 this.isCheck = true;
136 } else {
137 this.isCheck = false;
138 }
139 },
140 // 菜单配置点击行勾选数据
141 handleClickTableRow(row, event) {
142 this.checkNum = 0;
143 this.isCheck = false;
144 if (event.label == "操作") {
145 return;
146 } else {
147 if (row.status == "0") {
148 return;
149 } else {
150 if (this.multipleSelection.length > 0) {
151 if (
152 JSON.stringify(this.multipleSelection).indexOf(
153 JSON.stringify(row)
154 ) == -1
155 ) {
156 this.multipleSelection.push(row);
157 this.$refs.multipleTable.toggleRowSelection(row, true);
158 } else {
159 this.multipleSelection.map((item, index) => {
160 if (item.id == row.id) {
161 this.multipleSelection.splice(index, 1);
162 this.$refs.multipleTable.toggleRowSelection(row, false);
163 }
164 });
165 }
166 } else {
167 this.multipleSelection.push(row);
168 this.$refs.multipleTable.toggleRowSelection(row, true);
169 }
170 }
171 }
172 if (this.multipleSelection.length > 0) {
173 this.checkNum = this.multipleSelection.length;
174 this.isCheck = true;
175 } else {
176 this.isCheck = false;
177 }
178 },
179 // 获取人员列表做筛选
87 adds(a, rid) { 180 adds(a, rid) {
88 this.roleId = rid; 181 this.roleId = rid;
89 this.visible = true; 182 this.visible = true;
90 this.tableData.data = a; 183 this.usertableData.data = a;
91 this.tableData.data.forEach((item, index) => { 184 this.usertableData.data.forEach((item, index) => {
92 if (item.selectStatus === 0) { 185 if (item.selectStatus === 0) {
93 this.$nextTick(() => { 186 this.$nextTick(() => {
94 this.$refs.multipleTable.toggleRowSelection( 187 this.$refs.multipleTable.toggleRowSelection(
95 this.tableData.data[index], 188 this.usertableData.data[index],
96 true 189 true
97 ); 190 );
98 }); 191 });
99 } 192 }
100 }); 193 });
101 }, 194 },
195 // 关闭事件
102 close() { 196 close() {
103 this.visible = false; 197 this.visible = false;
104 }, 198 },
105 // 保存 199 // 保存事件
106 handleSaveMember() { 200 handleSaveMember() {
107 const idList = this.multipleSelection.map((item) => { 201 const idList = this.multipleSelection.map((item) => {
108 return item.id; 202 return item.id;
...@@ -116,18 +210,229 @@ export default { ...@@ -116,18 +210,229 @@ export default {
116 } else this.$message.error({ message: res.message, showClose: true }); 210 } else this.$message.error({ message: res.message, showClose: true });
117 }); 211 });
118 }, 212 },
213 // 勾选人员事件
119 handleSelectionChange(val) { 214 handleSelectionChange(val) {
120 this.multipleSelection = val; 215 this.multipleSelection = val;
121 }, 216 },
217 // 勾选菜单事件
218 handleSelectionChanges(val) {
219 this.multipleSelection = val;
220 },
122 }, 221 },
123 }; 222 };
124 </script> 223 </script>
125 <style scoped lang="scss"> 224 <style scoped lang="scss">
126 /deep/.el-dialog__header { 225 @import "~@/styles/mixin.scss";
226 @import "~@/styles/dialogBox.scss";
227
228 .editForm {
229 /deep/.el-textarea__inner {
230 border: 1px solid #224c7c !important;
231 margin: 0 0 10px 0 !important;
232 width: 100% !important;
233 color: #dadde3 !important;
234 background: transparent !important;
235 }
236
237 /deep/.el-input__inner {
238 border: 1px solid #224c7c !important;
239 margin: 0 !important;
240 width: 100% !important;
241 color: #dadde3 !important;
242 background: transparent !important;
243 }
244 }
245
246 /deep/.el-dialog__body {
247 display: flex;
248 flex-direction: column;
249 }
250
251 /deep/ .el-tabs {
252 color: #cef8ff;
253 }
254
255 .sjmx {
256 /deep/.el-tabs__item {
257 height: 50px;
258 padding-top: 6px;
259 }
260 }
261
262 /deep/.el-tabs__item {
263 color: #cef8ff !important;
264
265 display: flex;
266 flex-direction: row;
267 justify-content: center;
268 background: url("~@/image/tabitem.png") no-repeat;
269 background-size: 100% 100%;
270 border: none !important;
271 }
272
273 .obligee-item-name {
274 background: #05275b;
275 color: #ffffff;
276 background: url("~@/image/itembg.png") no-repeat;
277 background-size: 100% 100%;
278 }
279
280 /deep/.el-tabs__nav-scroll {
281 background: none;
282 }
283
284 /deep/.el-tabs__nav {
285 display: flex;
286 border: none !important;
287 }
288
289 /deep/.el-tabs__item.is-top {
290 border: 1px solid #dfe4ed;
291 border-top: 1px solid #dfe4ed;
292 border-bottom: 1px solid transparent;
293 }
294
295 /deep/.el-tabs__header {
296 border: none;
297 margin-bottom: 0;
298 }
299
300 /deep/.el-tabs__item.is-top:not(:last-child) {
301 margin-right: 5px;
302 }
303
304 /deep/.el-tabs__item.is-top {
305 background-color: none !important;
306 }
307
308 /deep/.el-tabs__item.is-active {
309 background: url("~@/image/tabitemse.png") no-repeat;
310 background-size: 100% 100%;
311 }
312
313 .success-images {
314 width: 30px;
315 height: 30px;
316 position: relative;
317 top: 10px;
318 right: 3px;
319 }
320
321 .tab-pane-item {
322 line-height: 20px;
323 color: #02d9fd;
324
325 p {
127 text-align: center; 326 text-align: center;
327 }
328 }
329
330 .edit-content {
331 height: 450px;
332 overflow-y: auto;
333 overflow-x: hidden;
334 padding-right: 1px;
128 margin-bottom: 10px; 335 margin-bottom: 10px;
129 .el-dialog__title { 336 border-top: none;
337 }
338
339 /deep/.editDialogBox {
340 border-radius: 8px;
341 overflow: hidden;
342 min-width: 1228px;
343 height: 825px !important;
344
345 .dialog-from {
346 padding: 13px;
347 border-radius: 2px;
348 box-sizing: border-box;
349
350 .el-row {
351 display: flex;
352 flex-wrap: nowrap;
353 }
354
355 .el-col {
356 line-height: 18px;
357 display: flex;
358 align-items: center;
359 margin-bottom: 3px;
360 color: #b5d6dc;
361 border-radius: 2px;
362 border: 1px solid #224c7c;
363 margin: 5px;
364
365 span {
366 display: inline-block;
367 padding: 3px;
368 border-radius: 3px;
369 overflow: hidden;
370 white-space: nowrap;
371 text-align: left;
372 color: #02d9fd;
373 }
374
375 p {
376 flex: 1;
377 width: 100%;
378 padding-left: 5px;
379 line-height: 20px;
380 color: #c0c4cc;
381 cursor: not-allowed;
382 white-space: nowrap;
383 margin-right: 5px;
384 text-align: right;
385 }
386 }
387 }
388
389 .dialog_title {
390 display: flex;
391 position: relative;
392 font-size: 24px;
393 top: -11px;
394 width: 38%;
395 height: 40px;
396 margin-left: 28px;
397 justify-content: center;
398 }
399
400 .el-dialog__header {
401 display: flex;
402 margin-bottom: 15px;
403 }
404
405 .dialog_footer {
406 flex-direction: column;
407
408 .dialog_button {
409 margin-top: 8px;
410 }
411 }
412
413 .divider {
414 width: 100%;
415 border-bottom: 1px solid #ccc;
416 }
417 }
418
419 .el-dialog__wrapper {
420 overflow: hidden;
421 }
422 /deep/.el-table {
423 background: none;
424 th.el-table__cell {
425 background-color: #073781;
426 color: #02d9fd;
427 }
428 tr {
429 background: none;
430
431 td {
130 color: white; 432 color: white;
131 } 433 }
434 }
132 } 435 }
436
437 // #08346F !important;
133 </style> 438 </style>
......