|
1 | 1 | <template> |
2 | 2 | <!-- <div> --> |
3 | 3 | <!-- <Card> --> |
4 | | -<Modal width="600px;" v-model="dialog.show" :title="dialog.title" :loading=true :footer-hide=true @on-cancel="handleCancel"> |
| 4 | +<Modal width="600px;" v-model="dialog.show" :title="dialog.title" :loading=true :footer-hide=true @on-cancel="handleCancel"> |
5 | 5 | <Form ref="formData" :model="formData" :rules="ruleValidate" :label-width="80"> |
6 | 6 | <FormItem label="主机名" prop="hostname"> |
7 | 7 | <Input v-model="formData.hostname" placeholder=""></Input> |
|
23 | 23 | <Option value="qcloud" >腾讯云</Option> |
24 | 24 | <Option value="aliyun" >阿里云</Option> |
25 | 25 | <Option value="aws" >AWS</Option> |
| 26 | + <Option value="internal" >内网</Option> |
26 | 27 | <Option value="other" >其他</Option> |
27 | 28 | </Select> |
28 | 29 | </FormItem> |
|
54 | 55 | <FormItem label="IP" prop="ip"> |
55 | 56 | <Input v-model="formData.ip" placeholder=""></Input> |
56 | 57 | </FormItem> |
57 | | - |
| 58 | + |
58 | 59 | <FormItem label="Port"> |
59 | 60 | <Input v-model="formData.port" placeholder=""></Input> |
60 | 61 | </FormItem> |
|
101 | 102 | @on-change="tagHandleChange"> |
102 | 103 | </Transfer> |
103 | 104 | </FormItem> |
104 | | - |
| 105 | + |
105 | 106 | <FormItem> |
106 | 107 | <Button type="primary" @click="handleSubmit('formData')">提交</Button> |
107 | 108 | <Button @click="handleReset('formData')" style="margin-left: 8px">重置</Button> |
|
112 | 113 | <!-- </div> --> |
113 | 114 | </template> |
114 | 115 | <script> |
115 | | - import { getAdmUser,getGroupList,getTagList,addProject } from '@/api/cmdb/server' |
116 | | - //import { getAppList } from '@/api/app' |
117 | | - export default { |
118 | | - name: 'add', |
119 | | - data () { |
120 | | - return { |
121 | | - single : false, |
122 | | - GroupList: [], |
123 | | - TagList: [], |
124 | | - groupTitle: ['可关联','已关联'], |
125 | | - tagTitle: ['可关联','已关联'], |
126 | | - AdmUser: [], |
127 | | - ruleValidate: { |
128 | | - hostname: [ |
129 | | - { required: true, message: '项目名称不能为空', trigger: 'blur' } |
130 | | - ], |
131 | | - ip: [ |
132 | | - { required: true, message: 'IP不能为空', trigger: 'blur' } |
133 | | - ], |
134 | | - port: [ |
135 | | - { required: true, message: '端口不能为空', trigger: 'blur' } |
136 | | - ] |
137 | | - } |
138 | | - } |
139 | | - }, |
140 | | - methods: { |
141 | | - groupHandleChange (newTargetKeys) { |
142 | | - console.log(this.formData.group) |
143 | | - this.formData.group = newTargetKeys; |
144 | | - }, |
145 | | - groupFilter (data, query) { |
146 | | - return data.label.indexOf(query) > -1; |
147 | | - }, |
148 | | - tagHandleChange (newTargetKeys) { |
149 | | - console.log(this.formData.tag) |
150 | | - this.formData.tag = newTargetKeys; |
151 | | - }, |
152 | | - tagFilter (data, query) { |
153 | | - return data.label.indexOf(query) > -1; |
154 | | - }, |
155 | | - handleCancel(){ |
156 | | - this.$emit('e-close'); |
157 | | - }, |
158 | | - handleSubmit (name) { |
159 | | - this.$refs[name].validate((valid) => { |
160 | | - if (valid) { |
161 | | - // add => post => /api/cmdb/server/ |
162 | | - // edit => put => /api/cmdb/server/1 |
163 | | - console.log(this.formData) |
164 | | - const url = this.dialog.option == 'add' ? '/' : `/${this.formData.id}/`; |
165 | | - const action = this.dialog.option == 'add' ? 'post' : 'put'; |
166 | | - const msg = this.dialog.option == 'add' ? '主机添加成功' : '主机修改成功'; |
167 | | - addProject(this.formData,url,action).then(res => { |
168 | | - console.log(res) |
169 | | - if (res.status){ |
170 | | - this.$Message.success({ |
171 | | - content: msg, |
172 | | - duration: 3 |
173 | | - }); |
174 | | - this.$emit('e-close'); |
175 | | - this.$emit('e-update'); |
176 | | - }else{ |
177 | | - this.$Message.error({ |
178 | | - content: res.data.msg, |
179 | | - duration: 3 |
180 | | - }); |
181 | | - } |
182 | | - }).catch(error =>{ |
183 | | - this.$Message.error({ |
184 | | - content: JSON.stringify(error.response.data), |
185 | | - duration: 10 |
186 | | - }); |
187 | | - }); |
188 | | - } else { |
189 | | - this.$Message.error({ |
190 | | - content: '请检查必选项', |
191 | | - duration: 3 |
192 | | - }); |
193 | | - } |
194 | | - }) |
195 | | - }, |
196 | | - handleReset (name) { |
197 | | - console.log('name..',name) |
198 | | - this.$refs[name].resetFields(); |
199 | | - } |
200 | | -
|
201 | | - }, |
202 | | - props:{ |
203 | | - dialog: Object, |
204 | | - formData: Object |
205 | | - }, |
206 | | - watch:{ |
207 | | - formData: function(){ |
208 | | - this.single = this.formData.single |
209 | | - }, |
210 | | - single: function(){ |
211 | | - if(this.single == false){ |
212 | | - this.formData.username = null |
213 | | - this.formData.password = null |
214 | | - } |
| 116 | +import { getAdmUser, getGroupList, getTagList, addProject } from '@/api/cmdb/server' |
| 117 | +// import { getAppList } from '@/api/app' |
| 118 | +export default { |
| 119 | + name: 'add', |
| 120 | + data () { |
| 121 | + return { |
| 122 | + single: false, |
| 123 | + GroupList: [], |
| 124 | + TagList: [], |
| 125 | + groupTitle: ['可关联', '已关联'], |
| 126 | + tagTitle: ['可关联', '已关联'], |
| 127 | + AdmUser: [], |
| 128 | + ruleValidate: { |
| 129 | + hostname: [ |
| 130 | + { required: true, message: '项目名称不能为空', trigger: 'blur' } |
| 131 | + ], |
| 132 | + ip: [ |
| 133 | + { required: true, message: 'IP不能为空', trigger: 'blur' } |
| 134 | + ], |
| 135 | + port: [ |
| 136 | + { required: true, message: '端口不能为空', trigger: 'blur' } |
| 137 | + ] |
| 138 | + } |
| 139 | + } |
| 140 | + }, |
| 141 | + methods: { |
| 142 | + groupHandleChange (newTargetKeys) { |
| 143 | + console.log(this.formData.group) |
| 144 | + this.formData.group = newTargetKeys |
| 145 | + }, |
| 146 | + groupFilter (data, query) { |
| 147 | + return data.label.indexOf(query) > -1 |
| 148 | + }, |
| 149 | + tagHandleChange (newTargetKeys) { |
| 150 | + console.log(this.formData.tag) |
| 151 | + this.formData.tag = newTargetKeys |
| 152 | + }, |
| 153 | + tagFilter (data, query) { |
| 154 | + return data.label.indexOf(query) > -1 |
| 155 | + }, |
| 156 | + handleCancel () { |
| 157 | + this.$emit('e-close') |
| 158 | + }, |
| 159 | + handleSubmit (name) { |
| 160 | + this.$refs[name].validate((valid) => { |
| 161 | + if (valid) { |
| 162 | + // add => post => /api/cmdb/server/ |
| 163 | + // edit => put => /api/cmdb/server/1 |
| 164 | + console.log(this.formData) |
| 165 | + const url = this.dialog.option == 'add' ? '/' : `/${this.formData.id}/` |
| 166 | + const action = this.dialog.option == 'add' ? 'post' : 'put' |
| 167 | + const msg = this.dialog.option == 'add' ? '主机添加成功' : '主机修改成功' |
| 168 | + addProject(this.formData, url, action).then(res => { |
| 169 | + console.log(res) |
| 170 | + if (res.status) { |
| 171 | + this.$Message.success({ |
| 172 | + content: msg, |
| 173 | + duration: 3 |
| 174 | + }) |
| 175 | + this.$emit('e-close') |
| 176 | + this.$emit('e-update') |
| 177 | + } else { |
| 178 | + this.$Message.error({ |
| 179 | + content: res.data.msg, |
| 180 | + duration: 3 |
| 181 | + }) |
215 | 182 | } |
216 | | - }, |
217 | | - mounted(){ |
218 | | - getGroupList().then(res => { |
219 | | - const data = res.data |
220 | | - for(var item in data){ |
221 | | - this.GroupList.push({ |
222 | | - key: data[item].id, |
223 | | - label: data[item].name |
224 | | - }) |
225 | | - } |
226 | | - }), |
227 | | - getTagList().then(res => { |
228 | | - const data = res.data |
229 | | - for(var item in data){ |
230 | | - this.TagList.push({ |
231 | | - key: data[item].id, |
232 | | - label: data[item].name |
233 | | - }) |
234 | | - } |
235 | | - }), |
236 | | - getAdmUser().then(res => { |
237 | | - this.AdmUser = res.data |
238 | | - console.log(this.AdmUser) |
| 183 | + }).catch(error => { |
| 184 | + this.$Message.error({ |
| 185 | + content: JSON.stringify(error.response.data), |
| 186 | + duration: 10 |
239 | 187 | }) |
| 188 | + }) |
| 189 | + } else { |
| 190 | + this.$Message.error({ |
| 191 | + content: '请检查必选项', |
| 192 | + duration: 3 |
| 193 | + }) |
240 | 194 | } |
| 195 | + }) |
| 196 | + }, |
| 197 | + handleReset (name) { |
| 198 | + console.log('name..', name) |
| 199 | + this.$refs[name].resetFields() |
| 200 | + } |
241 | 201 |
|
| 202 | + }, |
| 203 | + props: { |
| 204 | + dialog: Object, |
| 205 | + formData: Object |
| 206 | + }, |
| 207 | + watch: { |
| 208 | + formData: function () { |
| 209 | + this.single = this.formData.single |
| 210 | + }, |
| 211 | + single: function () { |
| 212 | + if (this.single == false) { |
| 213 | + this.formData.username = null |
| 214 | + this.formData.password = null |
| 215 | + } |
242 | 216 | } |
| 217 | + }, |
| 218 | + mounted () { |
| 219 | + getGroupList().then(res => { |
| 220 | + const data = res.data |
| 221 | + for (var item in data) { |
| 222 | + this.GroupList.push({ |
| 223 | + key: data[item].id, |
| 224 | + label: data[item].name |
| 225 | + }) |
| 226 | + } |
| 227 | + }), |
| 228 | + getTagList().then(res => { |
| 229 | + const data = res.data |
| 230 | + for (var item in data) { |
| 231 | + this.TagList.push({ |
| 232 | + key: data[item].id, |
| 233 | + label: data[item].name |
| 234 | + }) |
| 235 | + } |
| 236 | + }), |
| 237 | + getAdmUser().then(res => { |
| 238 | + this.AdmUser = res.data |
| 239 | + console.log(this.AdmUser) |
| 240 | + }) |
| 241 | + } |
| 242 | +
|
| 243 | +} |
243 | 244 | </script> |
0 commit comments