<template>
<el-card>
<el-row>
<el-button type="success" @click="add">新增</el-button>
<el-button type="info" @click="edit">修改</el-button>
</el-row>
<!-- 添加安全漏洞信息弹窗 -->
<el-dialog :title="addTitle" :visible.sync="addMessageVisiable" @close="sericutyFormClosed">
<el-form :model="sericutyForm" ref="sericutyRef" :rules="rules">
<el-form-item label="安全漏洞主题" prop="title">
<el-input autocomplete="off" v-model="sericutyForm.title"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addMessageVisiable = false">取 消</el-button>
<el-button type="primary" @click="addMessageSure">保存</el-button>
</div>
</el-dialog>
</el-card>
</template>
<script>
export default {
data(){
return{
addTitle:"添加安全漏洞信息",
addMessageVisiable:false,
sericutyForm:{
title:‘‘
},
rules: {
title: [{ required: true, message: "请输入安全漏洞主题！", trigger: "blur" }],
},
}
},
methods:{
// 新增
add(){
this.addMessageVisiable=true,
this.addTitle="新增"
},
edit(){
this.addMessageVisiable=true,
this.addTitle="修改"
},
// 保存
addMessageSure(){
this.$refs.sericutyRef.validate(valid=>{
if(valid){
// 新增
if(this.addTitle="新增"){
// 掉接口
}else{
this.addTitle="修改"
// 数据回显
}
}else{
this.$message.error("请按要求填写")
}
})
},
// 重置
sericutyFormClosed(){
for(let key in this.sericutyForm){
this.$set(this.sericutyForm,key,"")
}
}
}
}
</script>
<style lang="scss">
.el-dialog{
width:30%
}
</style>
