|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<template>
<a-modal
title="操作"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="唯一识别码"
hasFeedback
>
|
|
19
|
<a-input placeholder="唯一识别码" disabled="disabled" v-decorator="[ 'id', {rules: []} ]"/>
|
|
20
21
22
23
24
25
|
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="角色名称"
|
|
26
27
|
hasFeedback>
<a-input placeholder="起一个名字" v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗?' }] }]"/>
|
|
28
29
30
31
32
33
|
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="状态"
|
|
34
|
hasFeedback>
|
|
35
36
37
38
39
40
41
42
43
44
45
46
|
<a-select v-decorator="[ 'status', {rules: []} ]">
<a-select-option :value="1">正常</a-select-option>
<a-select-option :value="2">禁用</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="描述"
hasFeedback
>
|
|
47
|
<a-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]"/>
|
|
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
</a-form-item>
<a-divider/>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="拥有权限"
hasFeedback
>
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
<a-col :span="4">
{{ permission.name }}:
</a-col>
<a-col :span="20">
<a-checkbox
v-if="permission.actionsOptions.length > 0"
:indeterminate="permission.indeterminate"
:checked="permission.checkedAll"
@change="onChangeCheckAll($event, permission)">
全选
</a-checkbox>
|
|
70
71
|
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected"
@change="onChangeCheck(permission)"/>
|
|
72
73
74
75
76
77
78
79
80
81
|
</a-col>
</a-row>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
|
|
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import {getPermissions} from '@/api/manage'
import {actionToObject} from '@/utils/permissions'
import pick from 'lodash.pick'
export default {
name: "RoleModal",
data() {
return {
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
visible: false,
confirmLoading: false,
mdl: {},
form: this.$form.createForm(this),
permissions: []
}
},
created() {
this.loadPermissions()
},
methods: {
add() {
this.edit({id: 0})
},
edit(record) {
this.mdl = Object.assign({}, record)
this.visible = true
// 有权限表,处理勾选
if (this.mdl.permissions && this.permissions) {
// 先处理要勾选的权限结构
const permissionsAction = {}
this.mdl.permissions.forEach(permission => {
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
})
// 把权限表遍历一遍,设定要勾选的权限 action
this.permissions.forEach(permission => {
permission.selected = permissionsAction[permission.id]
})
|
|
128
|
}
|
|
129
130
131
132
133
134
|
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
})
console.log('this.mdl', this.mdl)
|
|
135
|
},
|
|
136
137
138
|
close() {
this.$emit('close')
this.visible = false
|
|
139
|
},
|
|
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
handleOk() {
const _this = this
// 触发表单验证
this.form.validateFields((err, values) => {
// 验证表单没错误
if (!err) {
console.log('form values', values)
_this.confirmLoading = true
// 模拟后端请求 2000 毫秒延迟
new Promise((resolve) => {
setTimeout(() => resolve(), 2000)
}).then(() => {
// Do something
_this.$message.success('保存成功')
_this.$emit('ok')
}).catch(() => {
// Do something
}).finally(() => {
_this.confirmLoading = false
_this.close()
|
|
161
162
|
})
}
|
|
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
})
},
handleCancel() {
this.close()
},
onChangeCheck(permission) {
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
},
onChangeCheckAll(e, permission) {
Object.assign(permission, {
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
indeterminate: false,
checkedAll: e.target.checked
})
},
loadPermissions() {
getPermissions().then(res => {
let result = res.result
this.permissions = result.map(permission => {
const options = actionToObject(permission.actionData)
permission.checkedAll = false
permission.selected = []
permission.indeterminate = false
permission.actionsOptions = options.map(option => {
return {
label: option.describe,
value: option.action
}
|
|
192
|
})
|
|
193
|
return permission
|
|
194
|
})
|
|
195
|
})
|
|
196
|
}
|
|
197
|
|
|
198
|
}
|
|
199
|
}
|
|
200
201
202
203
204
|
</script>
<style scoped>
</style>
|