|
1
2
3
4
5
6
7
8
9
|
<template>
<a-drawer
:title="title"
:width="drawerWidth"
@close="handleCancel"
:visible="visible"
:confirmLoading="confirmLoading">
<div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
|
|
10
11
|
<a-spin :spinning="confirmLoading">
<a-form-model ref="form" :model="model" :rules="validatorRules">
|
|
12
|
|
|
13
14
15
16
17
18
19
|
<a-form-model-item label="菜单类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group @change="onChangeMenuType" v-model="model.menuType">
<a-radio :value="0">一级菜单</a-radio>
<a-radio :value="1">子菜单</a-radio>
<a-radio :value="2">按钮/权限</a-radio>
</a-radio-group>
</a-form-model-item>
|
|
20
|
|
|
21
22
23
24
25
26
27
28
|
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="menuLabel"
prop="name"
hasFeedback>
<a-input placeholder="请输入菜单名称" v-model="model.name" :readOnly="disableSubmit"/>
</a-form-model-item>
|
|
29
30
|
|
|
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<a-form-model-item
v-show="model.menuType!=0"
label="上级菜单"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:validate-status="validateStatus"
:hasFeedback="true"
:required="true">
<span slot="help">{{ validateStatus == 'error' ? '请选择上级菜单' : ' ' }}</span>
<a-tree-select
style="width:100%"
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
:treeData="treeData"
v-model="model.parentId"
placeholder="请选择父级菜单"
:disabled="disableSubmit"
@change="handleParentIdChange">
</a-tree-select>
</a-form-model-item>
|
|
50
|
|
|
51
52
53
54
55
56
57
|
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="url"
label="菜单路径">
<a-input placeholder="请输入菜单路径" v-model="model.url" :readOnly="disableSubmit"/>
</a-form-model-item>
|
|
58
|
|
|
59
60
61
62
63
64
65
66
|
<a-form-model-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="component"
label="前端组件">
<a-input placeholder="请输入前端组件" v-model="model.component" :readOnly="disableSubmit"/>
</a-form-model-item>
|
|
67
|
|
|
68
69
70
71
72
73
74
|
<a-form-model-item
v-show="model.menuType==0"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="默认跳转地址">
<a-input placeholder="请输入路由参数 redirect" v-model="model.redirect" :readOnly="disableSubmit"/>
</a-form-model-item>
|
|
75
|
|
|
76
77
78
79
80
81
82
83
|
<a-form-model-item
v-show="!show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="perms"
label="授权标识">
<a-input placeholder="请输入授权标识, 如: user:list" v-model="model.perms" :readOnly="disableSubmit"/>
</a-form-model-item>
|
|
84
|
|
|
85
86
87
88
89
90
91
|
<a-form-model-item
v-show="!show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="授权策略">
<j-dict-select-tag v-model="model.permsType" placeholder="请选择授权策略" :type="'radio'"
dictCode="global_perms_type"/>
|
|
92
93
|
|
|
94
95
96
97
98
99
100
|
</a-form-model-item>
<a-form-model-item
v-show="!show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="状态">
<j-dict-select-tag v-model="model.status" placeholder="请选择状态" :type="'radio'" dictCode="valid_status"/>
|
|
101
|
|
|
102
|
</a-form-model-item>
|
|
103
|
|
|
104
105
106
107
108
109
110
111
112
|
<a-form-model-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="菜单图标">
<a-input placeholder="点击选择图标" v-model="model.icon" :readOnly="disableSubmit">
<a-icon slot="addonAfter" type="setting" @click="selectIcons"/>
</a-input>
</a-form-model-item>
|
|
113
|
|
|
114
115
116
117
118
119
120
121
122
|
<a-form-model-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="sortNo"
label="排序">
<a-input-number placeholder="请输入菜单排序" v-model="model.sortNo" style="width: 200px"
:readOnly="disableSubmit"/>
</a-form-model-item>
|
|
123
|
|
|
124
125
126
127
128
129
130
|
<a-form-model-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="是否路由菜单">
<a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.route"/>
</a-form-model-item>
|
|
131
|
|
|
132
133
134
135
136
137
138
|
<a-form-model-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="隐藏路由">
<a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.hidden"/>
</a-form-model-item>
|
|
139
|
|
|
140
141
142
143
144
145
146
|
<a-form-model-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="是否缓存路由">
<a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.keepAlive"/>
</a-form-model-item>
|
|
147
148
|
|
|
149
150
151
152
153
154
155
|
<a-form-model-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="聚合路由">
<a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.alwaysShow"/>
</a-form-model-item>
|
|
156
|
|
|
157
158
159
160
161
162
163
|
<a-form-model-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="打开方式">
<a-switch checkedChildren="外部" unCheckedChildren="内部" v-model="model.internalOrExternal"/>
</a-form-model-item>
|
|
164
|
|
|
165
|
</a-form-model>
|
|
166
|
|
|
167
168
169
|
<!-- 选择图标 -->
<icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
</a-spin>
|
|
170
171
172
173
174
175
176
177
178
179
180
|
<a-row :style="{textAlign:'right'}">
<a-button :style="{marginRight: '8px'}" @click="handleCancel">
关闭
</a-button>
<a-button :disabled="disableSubmit" @click="handleOk" type="primary">确定</a-button>
</a-row>
</div>
</a-drawer>
</template>
<script>
|
|
181
182
|
import {addPermission, editPermission, queryTreeList, duplicateCheck} from '@/api/api'
import Icons from './icon/Icons'
|
|
183
|
|
|
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
export default {
name: "PermissionModal",
components: {Icons},
data() {
return {
drawerWidth: 700,
treeData: [],
title: "操作",
visible: false,
disableSubmit: false,
model: {},
show: true,//根据菜单类型,动态显示隐藏表单元素
menuLabel: '菜单名称',
labelCol: {
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
iconChooseVisible: false,
validateStatus: ""
}
},
computed: {
validatorRules: function () {
|
|
212
|
return {
|
|
213
214
215
216
217
|
name: [{required: true, message: '请输入菜单标题!'}],
component: [{required: this.show, message: '请输入前端组件!'}],
url: [{required: this.show, message: '请输入菜单路径!'}],
permsType: [{required: true, message: '请输入授权策略!'}],
perms: [{required: false, message: '请输入授权标识!'}, {validator: this.validatePerms}]
|
|
218
|
}
|
|
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
|
}
},
created() {
},
methods: {
loadTree() {
var that = this;
queryTreeList().then((res) => {
if (res.success) {
console.log(res)
that.treeData = [];
let treeList = res.result.treeList
for (let a = 0; a < treeList.length; a++) {
let temp = treeList[a];
temp.isLeaf = temp.leaf;
that.treeData.push(temp);
}
|
|
236
|
}
|
|
237
|
});
|
|
238
|
},
|
|
239
240
241
|
add() {
//初始化默认值
this.edit({status: '1', permsType: '1', sortNo: 1.0, route: true, menuType: 0});
|
|
242
|
},
|
|
243
244
245
|
edit(record) {
this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
this.model = Object.assign({}, record);
|
|
246
|
|
|
247
248
249
250
|
//根据菜单类型,动态展示页面字段
console.log('record: ', record)
this.show = record.menuType == 2 ? false : true;
this.menuLabel = record.menuType == 2 ? '按钮/权限' : '菜单名称';
|
|
251
|
|
|
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
|
this.visible = true;
this.loadTree();
},
close() {
this.$emit('close');
this.disableSubmit = false;
this.visible = false;
this.$refs.form.resetFields();
},
handleOk() {
const that = this;
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
if ((this.model.menuType == 1 || this.model.menuType == 2) && !this.model.parentId) {
that.validateStatus = 'error';
that.$message.error("请检查你填的类型以及信息是否正确!");
return;
} else {
that.validateStatus = 'success';
|
|
272
|
}
|
|
273
274
275
276
277
278
279
280
|
that.confirmLoading = true;
let obj;
if (!this.model.id) {
obj = addPermission(this.model);
} else {
obj = editPermission(this.model);
}
obj.then((res) => {
|
|
281
|
if (res.success) {
|
|
282
283
|
that.$message.success(res.message);
that.$emit('ok');
|
|
284
|
} else {
|
|
285
|
that.$message.warning(res.message);
|
|
286
|
}
|
|
287
288
289
290
291
292
|
}).finally(() => {
that.confirmLoading = false;
that.close();
});
} else {
return false;
|
|
293
|
}
|
|
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
|
})
},
handleCancel() {
this.close()
},
validateNumber(rule, value, callback) {
if (!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)) {
callback();
} else {
callback("请输入正整数!");
}
},
validatePerms(rule, value, callback) {
if (value && value.length > 0) {
//校验授权标识是否存在
var params = {
tableName: 'sys_permission',
fieldName: 'perms',
fieldVal: value,
dataId: this.model.id
};
duplicateCheck(params).then((res) => {
if (res.success) {
callback()
} else {
callback("授权标识已存在!")
}
})
} else {
callback()
}
},
onChangeMenuType(e) {
if (this.model.menuType == 2) {
this.show = false;
this.menuLabel = '按钮/权限';
} else {
this.show = true;
this.menuLabel = '菜单名称';
}
this.$nextTick(() => {
this.$refs.form.validateField(['url', 'component']);
});
},
selectIcons() {
this.iconChooseVisible = true
},
handleIconCancel() {
this.iconChooseVisible = false
},
handleIconChoose(value) {
console.log(value)
this.model.icon = value
this.iconChooseVisible = false
},
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize() {
let screenWidth = document.body.clientWidth;
if (screenWidth < 500) {
this.drawerWidth = screenWidth;
} else {
this.drawerWidth = 700;
}
},
handleParentIdChange(value) {
if (!value) {
this.validateStatus = "error"
} else {
this.validateStatus = "success"
|
|
363
364
365
|
}
}
}
|
|
366
|
}
|
|
367
368
369
370
371
|
</script>
<style scoped>
</style>
|