当新增和编辑模态框内容一样时,这时刻就能够共用一个模态框,削减代码量,详细代码以下
<div class="divBtn" @click="addGsForm">新增</div>//新增不须要通报任何参数
<div class="caozuoBtn" @click="bjGsForm(scope.row)">编辑</div>//编辑时刻,须要通报当前行的id
模态框内容
<el-dialog :title="title" class="dialogAdd" width="600px" :visible.sync="dialogAddgsVisible" @close="closeDialogAddgsVisible">
<el-form :model="addForm" :rules="addFormRules" ref="addForm" style="margin-right: 20px;" label-position="right" label-width="110px">
<el-form-item label="公司名称:" prop="name">
<el-input placeholder="请输入内容" v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="一致信用社码:" prop="creditCode" >
<el-input placeholder="请输入内容" v-model="addForm.creditCode"></el-input>
</el-form-item>
<el-form-item label="公司地址:" prop="address" >
<el-input placeholder="请输入内容" v-model="addForm.address"></el-input>
</el-form-item>
<el-form-item label="电话:" prop="tel" >
<el-input placeholder="请输入内容" v-model="addForm.tel"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogAddgsVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveAddForm">确 定</el-button>
</div>
</el-dialog>
data中的数据
addForm:{
name:"",
creditCode:"",
address:"",
tel:"",
id:""
},
dialogAddgsVisible:false,
title:''
点击新增弹框按钮,转变模态框的title
addGsForm(){
this.dialogAddgsVisible = true;
this.title="新增"
},
点击编辑模态框,转变模态框title,而且把当前行的数据赋值给模态框的input输入框
bjGsForm(val){
console.log(val)
this.dialogAddgsVisible = true;
this.title="编辑"
this.addForm.name=val.name
this.addForm.creditCode=val.creditCode
this.addForm.address=val.address
this.addForm.tel=val.tel
this.addForm.id=val.id
},
封闭或作废弹框
closeDialogAddgsVisible(){
this.$refs.addForm.resetFields();//element封装的要领,清空模态框的值
this.title="" //初始化title的值
this.addForm={//初始化addForm中的值
name:"",
creditCode:"",
address:"",
tel:"",
id:""
}
},
点击肯定按钮(肯定增加或编辑)
saveAddForm() {
this.$refs.addForm.validate(valid => {
if (valid) {
let params = {
id: this.addForm.id,
name: this.addForm.name,
creditCode: this.addForm.creditCode,
address: this.addForm.address,
tel:this.addForm.tel,
};
if(!this.addForm.id){//当没有传过来id的时刻,申明是增加,所以发送增加要求
this.$post(
"/api/company/admin/saveCompany",
params,
data => {
// console.log(data, 1122);
this.$message.success("新增企业胜利!")
this.dialogAddgsVisible = false
this.handleCurrentChange(1);
}
);
}else{//发送编辑要求
this.$post(
"/api/company/admin/updateCompany",
params,
data => {
// console.log(data, 1122);
this.$message.success("修正企业胜利!")
this.dialogAddgsVisible = false
this.handleCurrentChange(1);
}
);
}
}
});
},