js代码
new Vue({
el:'#corporation',
data: {
tableData: [],
currentRow: null,
addDialogVisible:false,
dialogVisible:false,
editCorporationName:'',
addCorporationName:'',
editCorporationValidity:'',
switchIsValidity:true
},
created(){ // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
this.getAllList()
},
methods:{
getAllList(){//获取公司公司
// 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过 this.$http 来发起数据请求
// 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
// 3. this.$http.get('url').then(function(result){})
// 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
// 5. 先判断 result.status 是否等于200，如果等于200，就成功了，返回的json结果保存在 result.body中，将其绑定到 //el-table上去 ; 如果不等于200，可以弹框提醒，获取数据失败！
var url = getAllCorpByValidUrl;
if(!this.switchIsValidity){
url = getAllCorpByNotValidUrl;
}
this.$http.get(url).then(result => {
// 注意： 通过 $http 获取到的数据，都在 result.body 中放着
var result = result.body
if (result.status = 200) {
// 成功了
this.tableData = JSON.parse(result);//将json字符串转化为json对象
} else {
// 失败了
alert('获取数据失败！')
}
})
},
handleCurrentChange(val) {//选择某行事件
this.currentRow = val;
},
formatValidity:function(row, column){//公司有效性转换
return row.corporationvalidity == 1 ? '有效' : '无效';
},
addCorp:function(){//新增公司弹出框
this.addDialogVisible=true;
},
editCorp:function(){//修改公司弹出框
if(this.currentRow==null){
this.$message('请选择要编辑的公司！');
}else{
this.editCorporationName=this.currentRow.corporationname;
this.editCorporationValidity=this.currentRow.corporationvalidity;
this.dialogVisible=true;
}
},
handleClose(done) {//关闭弹窗
done();
},
saveNewCorp:function(){//新增公司
//发送 get 请求
this.$http.get(addNewCorpUrl, {params: {'addCorporationName':this.addCorporationName}}).then((response) => {
// 响应成功回调
if(response.body==='created'){
this.$message({
type: 'success',
message: '新增成功!'
});
this.getAllList();
}else if(response.body==='exist'){
this.addDialogVisible=false;
this.$message({
type: 'warning',
message: '此公司已存在，不能重复添加!'
});
this.getAllList();
}else{
//添加失败
this.$message({
type: 'error',
message: '新增失败，请重试!'
});
this.getAllList();
}
this.addDialogVisible=false;
});
},
saveEditCorp(){//提交修改的公司信息
this.$http.get(updateCorpUrl,
{params:
{'id':this.currentRow.id,
'corporationname':this.editCorporationName,
'corporationvalidity':this.editCorporationValidity
}
}
).then((response) => {
// 响应成功回调
if(response.body==='update'){
this.$message({
type: 'success',
message: '修改成功!'
});
this.getAllList();
}else if(response.body==='exist'){
this.$message({
type: 'warning',
message: '此公司已存在，不能修改!'
});
this.getAllList();
}else{
//添加失败
this.$message({
type: 'error',
message: '修改失败，请重试!'
});
this.getAllList();
}
});
this.dialogVisible = false;
},
refreshCorp(){//刷新公司列表
this.getAllList();//重新获取一下
},
delCorp(){//删除公司，不能物理删除，只是置为无效
if(this.currentRow==null){
this.$message('请选择要删除的公司！');
}else{
if(this.currentRow.corporationvalidity=='0'){
this.$message({
type: 'error',
message: '此公司已是无效状态，无需删除!'
});
}else{
this.$confirm('确认要删除此公司吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http.get(delCorpUrl, {params: {'id':this.currentRow.id}}).then((response) => {
// 响应成功回调
if(response.body==='delete'){
this.$message({
type: 'success',
message: '删除成功!'
});
this.getAllList();
}else{
//添加失败
this.$message({
type: 'error',
message: '删除失败，请重试!'
});
this.getAllList();
}
});
});
}
}
},
switchChangeStatus(){
this.getAllList();
}
}
});