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
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
<div class="app-content" style="height:420px;overflow:auto">
<a-spin :spinning="loading" style="width: 100%;height: 100%;">
<a-form-model ref="form" :model="formData" :rules="rules">
<a-form-model-item label="菜单Id">
<a-input v-model="formData.id" :disabled="disabled" style="width:180px;" />
</a-form-model-item>
<a-form-model-item ref="menuName" label="菜单名称" prop="menuName">
<a-input v-model="formData.menuName" style="width:180px;" />
</a-form-model-item>
<a-form-model-item ref="actionUrl" label="地址" prop="actionurl">
<a-input v-model="formData.actionUrl" style="width:180px;" />
</a-form-model-item>
<a-form-model-item ref="icon" label="icon图标" prop="icon">
<a-input v-model="formData.icon" style="width:180px;" />
</a-form-model-item>
<a-form-model-item ref="windowPara" label="窗口参数" prop="windowPara">
<a-input v-model="formData.windowPara" style="width:180px;" />
</a-form-model-item>
<a-form-model-item ref="showIndex" label="排序" prop="showindex">
<a-input-number v-model="formData.showIndex" :min="10" :max="9999" @change="onSNumberChange" style="width:180px;" />
</a-form-model-item>
<a-form-model-item ref="parentId" label="父Id" prop="parentId">
<a-input-number v-model="formData.parentId" :min="10" :max="9999" @change="onPNumberChange" style="width:180px;" />
</a-form-model-item>
<a-form-model-item ref="keepAlive" label="是否缓存" prop="keepAlive">
<a-switch default-checked :checked="Boolean(formData.keepAlive)" checked-children="是" un-checked-children="否" @change="switchChange" />
</a-form-model-item>
<a-row>
<a-col :span="24" style="text-align: center">
<a-button type="primary" size="small" @click="submit">提交</a-button>
</a-col>
</a-row>
</a-form-model>
</a-spin>
</div>
</template>
<script>
import { isEmptyParams } from '@/views/utils/common'
export default {
name: 'menuEdit',
props: {
value: {
type: String,
default: () => {
return null
},
},
},
data () {
return {
formData: {
id: null, menuName: null, actionUrl: null, icon: '', windowPara: null, showIndex: null, parentId: null, keepAlive: 0
},
rules: {
id: { required: true, message: '请填写菜单id', trigger: 'blur' },
menuName: { required: true, message: '请填写菜单名称', trigger: 'blur' },
actionUrl: { required: true, message: '请填写访问url', trigger: 'blur' },
icon: { required: false, message: '请填写icon图标' },
windowPara: { required: true, message: '请填写窗口参数', trigger: 'blur' },
showIndex: { required: true, message: '请填写排序号', trigger: 'blur' },
keepAlive: { required: true, message: '请选择是否缓存', trigger: 'blur' }
},
disabled: false,
loading: false
}
},
computed: {
},
created () {
if (!!this.value) {
this.getSystemMenuById()
this.disabled = true
}
},
methods: {
getSystemMenuById () {
this.loading = true
let par = { id: this.value }
this.$api.systemManage.getSystemMenuById(par).then(({ data = {} }) => {
if (data) {
this.formData = data
}
this.loading = false
}).catch(() => { this.loading = false })
},
onSNumberChange (value) {
this.formData.showIndex = value
},
onPNumberChange (value) {
this.formData.parentId = value
},
switchChange (checked) {
if (checked)
this.formData.keepAlive = 1
else
this.formData.keepAlive = 0
},
submit () {
this.$refs.form.validate(valid => {
if (valid) {
this.loading = true
if (!!!this.value) {
let pars = isEmptyParams(this.formData)
let par = { ...pars }
this.$api.systemManage.insertSystemMenu(par).then(({ data = {} }) => {
if (data) {
this.$message.success("添加成功！")
this.$emit('close')
}
this.loading = false
}).catch(() => { this.loading = false })
} else {
let pars = isEmptyParams(this.formData)
let par = { ...pars }
this.$api.systemManage.updateSystemMenu(par).then(({ data = {} }) => {
if (data) {
this.$message.success("修改成功！")
this.$emit('close')
}
this.loading = false
}).catch(() => { this.loading = false })
}
}
})
}
}
}
</script>
<style scoped lang="less">
.app-content {
.ant-form-item {
margin-bottom: 6px;
}
::v-deep .ant-row {
.ant-col {
display: inline-block;
}
.ant-form-item-label {
width: 90px;
}
.ant-form-item-control-wrapper {
width: calc(100% - 90px);
}
.ant-form-explain {
margin-left: 5px;
display: inline-block;
}
}
}
</style>