1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| <template>
| <div id="user-edit-role">
| <b-modal
| title="分配角色"
| ref="myModalRef"
| ok-title="保存"
| @ok="handleOk"
| @cancel="clearName"
| cancel-title="取消"
| >
| <Transfer
| :data="data"
| v-model="value"
| :right-default-checked="currentRoleInUser"
| :titles="['全部角色', '已选角色']"
| />
| </b-modal>
| </div>
| </template>
|
| <script>
| import {
| Transfer
| } from 'element-ui'
|
| export default {
| props: {
| roleList: Array,
| currentRoleInUser: Array
| },
| data: () => ({
| data: [],
| value: []
| }),
| methods: {
| // * 显示model
| showModel() {
| this.$refs.myModalRef.show()
| this.$nextTick(() => {
| this.initData(this.roleList)
| })
| },
| hideModel() {
| this.$refs.myModalRef.hide()
| },
| // * 数据处理
| initData(param) {
| let arr = []
| if (!param.length) return
| param.map(item => {
| arr.push({
| key: item.id,
| label: item.name,
| disabled: false
| })
| })
| this.data = arr
| },
| // * 隐藏model
| hideModal () {
| this.$refs.myModalRef.hide()
| },
| // * 表单提交
| handleOk(e) {
| e.preventDefault()
| const roleIds = this.value.join(',')
| this.$emit('submit', roleIds)
| },
| // * 取消
| clearName() {}
| },
| watch: {
| currentRoleInUser(value) {
| this.value = value
| }
| },
| components: {
| Transfer
| }
| }
| </script>
|
| <style>
| #user-edit-role .el-checkbox+.el-checkbox {
| margin-left: 0;
|
| }
| /* #user-edit-role .el-checkbox, .el-checkbox__input {
| display: block;
| } */
| #user-edit-role .el-transfer-panel__item {
| display: block;
| }
| </style>
|
|
