Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcjg-web
Showing
3 changed files
with
354 additions
and
49 deletions
... | @@ -177,7 +177,7 @@ export default { | ... | @@ -177,7 +177,7 @@ export default { |
177 | console.log("this.logoName.DNAME", this.logoName.DNAME); | 177 | console.log("this.logoName.DNAME", this.logoName.DNAME); |
178 | if ((this.logoName.DNAME = "map610700")) { | 178 | if ((this.logoName.DNAME = "map610700")) { |
179 | this.mapjson = "hanzhong"; | 179 | this.mapjson = "hanzhong"; |
180 | require(`@/common/map/${this.mapjson}.js`); | 180 | require(`@/common/map/${this.mapjson}.js`); |
181 | } | 181 | } |
182 | }, | 182 | }, |
183 | // 开启定时器 | 183 | // 开启定时器 | ... | ... |
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" | ||
16 | > | 27 | > |
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: [], | ||
75 | // 角色id | ||
76 | roleId: "", | ||
77 | }, | 88 | }, |
89 | // 角色id | ||
90 | roleId: "", | ||
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"; |
127 | text-align: center; | 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 { | ||
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; |
130 | color: white; | 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 { | ||
432 | color: white; | ||
433 | } | ||
131 | } | 434 | } |
132 | } | 435 | } |
436 | |||
437 | // #08346F !important; | ||
133 | </style> | 438 | </style> | ... | ... |
-
Please register or sign in to post a comment