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
|
</el-table>
<template slot="header">
<el-button type="primary" @click="detail_new">新增环境</el-button>
</template>
<template slot-scope="scope">
<el-button size="mini" type="success" @click="detail_old(scope.$index)">编辑</el-button>
<el-button size="mini" type="danger" @click="del_env(scope.row.id)">删除</el-button>
</template>
</el-table>
<el-dialog title="创建/编辑环境" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="HOST" label-width="80px">
<el-input v-model="form_data.host"></el-input>
</el-form-item>
<el-form-item label="描述" label-width="80px">
<el-input v-model="form_data.des"></el-input>
</el-form-item>
<el-form-item label="标签" label-width="80px">
<el-input v-model="form_data.type"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel_btn">取 消</el-button>
<el-button type="primary" @click="add_env">保 存</el-button>
</div>
</el-dialog>
<script>
import Menu from "../components/Menu";
import axios from "axios";
export default {
name: "Env_manage",
data(){
return{
dialogFormVisible: false,
env_list_data: [],
// 新增时的默认数据
form_data: {
host: "http://",
type: '',
des: ''
}
}
},
methods:{
// 新增环境 新增 变量值为true
// 后端 接口判断 如果有id 表名更新（编辑）， 没有id即为新增
add_env(){
this.dialogFormVisible = false;
axios.post('http://localhost:8000/add_env/', this.form_data).then(res=>{
this.env_list_data = res.data
this.$message({
message:"创建成功",
type:"success"
})
})
},
// 新增或编辑 变量值为true
// 编辑回显
detail_old(index){
this.dialogFormVisible = true;
this.form_data = this.env_list_data[index]
},
// 取消或保存后 变量名为false
// 点击取消，重新加载
cancel_btn(){
this.dialogFormVisible = false
location.reload()
},
// 新增时表格内容
detail_new(){
this.dialogFormVisible = true
this.form_data = {
host:"http://",
type:'',
des:''
}
},
// 删除当前行信息是，使用【scope.row.id】
// 后端获取id，根据id查找环境进行删除，删除完成之后重新调用环境列表接口给到前端赋值
delete_project(env_id){
axios.get('http://localhost:8000/delete_env',{
params:{
env_id: env_id,
}
}).then(res=>{
this.env_list_data = res.data;
})
}
},
mounted() {
// 获取环境列表
axios.get('http://localhost:8000/get_env_list/').then(res=>{
this.env_list_data = res.data
})
},
components:{
Menu
}
}
</script>
|