效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 引入样式 -->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<div id="tableView">
<!--列表顶部搜索和工具条-->
<el-row>
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="部门名称">
<el-input v-model="searchForm.user_dept" placeholder="账号"></el-input>
</el-form-item>
<el-button type="primary" icon="search" @click="searchClick">查询</el-button>
<el-button type="success" icon="plus" @click="addClick">新增</el-button>
<el-button type="success" icon="plus" @click="toPush">刷新</el-button>
</el-form-item>
</el-form>
</el-row>
<!--列表-->
<el-row>
<el-table
:data="tableData"
v-loading.body="loading"
border
@selection-change="selectionChange($event)"
style="width: 100%">
<el-table-column
type="selection"
align="center">
</el-table-column>
<el-table-column
prop="user_id"
label="员工编号"
align="center">
</el-table-column>
<el-table-column
prop="user_name"
label="员工名称"
align="center">
</el-table-column>
<el-table-column
prop="user_sex"
label="性别"
align="center">
</el-table-column>
<el-table-column
prop="user_sal"
label="薪水"
align="center">
</el-table-column>
<el-table-column
prop="user_dept"
label="部门"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<template scope="scope">
<el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑</el-button>
<el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<!--列表底部工具条和分页符-->
<el-row style="margin-top: 20px" type="flex" justify="end">
<el-col :span="6" >
<el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
</el-col>
<el-col :span="18" >
<el-pagination
style="float: right"
@size-change="pageSizeChange"
@current-change="currentPageChange"
:current-page="currentPage"
:page-sizes="[5, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
<!--编辑界面-->
<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="员工编号" prop="user_id">
<el-input v-model="editForm.user_id" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="员工名称" prop="user_name">
<el-input v-model="editForm.user_name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="员工性别" prop="user_sex">
<el-radio-group v-model="editForm.user_sex">
<el-radio class="radio" label="男">男</el-radio>
<el-radio class="radio" label="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="员工薪水" prop="user_sal">
<el-input v-model="editForm.user_sal" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="员工部门" prop="user_dept">
<el-input v-model="editForm.user_dept" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '员工列表'
}
});
var tableView = new Vue({
el: '#tableView',
data: {
//部门状态下拉框
deptnos:[{STATE:"开启"},{STATE:"关闭"}],
//部门下拉框
options:[],
//角色下拉框
roles:[],
//列表数据
tableData: [],
//显示加载中样式
loading:false,
//搜索表单
searchForm: {
DNAME: ''
},
//多选值
multipleSelection: [],
//当前页
currentPage:1,
//分页大小
pageSize:5,
//总条数
total:800,
//删除的弹出框
deleteVisible:false,
//编辑界面是否显示
editFormVisible: false,
editLoading: false,
goUrl:'',
editFormRules: {
user_id:[
{required: true, message: '请填写员工编号', trigger: 'blur'}
],
user_name:[
{required: true, message: '请添加员工名称', trigger: 'blur'}
],
user_sex:[
{required: true, message: '请填写性别', trigger: 'change'}
],
user_sal:[
{required: true, message: '请填写薪水', trigger: 'blur'}
],
user_dept:[
{required: true, message: '请选择部门', trigger: 'change'}
]
},
//编辑界面数据
editForm: {
id:'',
user_id:'',
user_name:'',
user_sex:'',
user_sal:'',
user_dept:''
},
},
//列表显示
created:function(){
var self = this;
axios.post('/user/toGetUserList',{'pageNo':self.currentPage,'pageSize':self.pageSize}).then(function(response){
self.total=response.data.total;
self.tableData = response.data.userInfo;
})
},
methods:{
//清空表格数据
toPush:function(){
this. searchForm= {
id:'',
user_id:'',
user_name:'',
user_sex:'',
user_sal:'',
user_dept:''
}
//alert('刷新');
this.loadingData();//重新加载数据
},
//表格重新加载数据
loadingData:function() {
var _self = this;
_self.loading = true;
//传过去的参数
var searchForm={'pageNo':_self.currentPage,'pageSize':_self.pageSize,'user_dept':_self.searchForm.user_dept};
axios.post('/user/getDeptListBy',searchForm).then(function(response){
_self.total=response.data.total;
_self.tableData = response.data.pageData;
})
//console.log(_self.currentPage);
//查
setTimeout(function(){
console.info("加载数据成功");
_self.loading = false;
},300);
},
//表格编辑事件
editClick:function(row){
this.goUrl="/user/toUpdate";
this.editFormVisible = true;
//alert(Object.assign({}, row));
this.editForm = Object.assign({}, row);
_self.loadingData();//重新加载数据
},
//表格删除事件
deleteClick:function(row) {
var _self = this;
this.$confirm('确认删除' + row.id +'吗?', '提示', {
type: 'warning'
}).then(function(){
var url="/user/delete";
axios.post(url,{ID:row.id}).then(function (response) {
//alert(response.data);
if(response.data>0){
_self.$message({
message: row.id+ '删除成功',
type: 'success'
});
//alert("111");
_self.loadingData();//重新加载数据
}
});
}).catch(function(e){
if(e != "cancel")
console.log("出现错误：" + e);
});
},
//新建事件
addClick:function() {
this.goUrl="/user/toAdd";
var _self = this;
//清空url，解决先点更新，点取消，后点添加的是带这条数据的Bug
this.editForm= {
id:'',
user_id:'',
user_name:'',
user_sex:'',
user_sal:'',
user_dept:''
}
this.editFormVisible = true;
_self.loadingData();//重新加载数据
},
//表格查询事件
searchClick:function() {
this.loadingData();//重新加载数据
},
//表格勾选事件
selectionChange:function(val) {
this.multipleSelection = val;
console.info(val);
},
//删除所选，批量删除
removeSelection:function() {
var _self = this;
var multipleSelection = this.multipleSelection;
if(multipleSelection.length < 1) {
_self.$message({
message: '请至少选中一条记录',
type: 'error'
});
return;
}
var ids = '';
for(var i=0;i<multipleSelection.length;i++) {
var row = multipleSelection[i];
ids += row.ID + ","
}
this.$confirm('确认删除' + ids +'吗?', '提示', {
type: 'warning'
}).then(function(){
var url="/dept/batchDel";
axios.post(url,{ids:ids}).then(function (response) {
//alert(response.data);
var temp="";
if(response.data>0){
temp="删除成功";
}else {
temp="删除失败";
}
_self.$message({
message: ids + temp,
type: 'success'
});
_self.loadingData();//重新加载数据
});
}).catch(function(e){
if(e != "cancel")
console.log("出现错误：" + e);
});
},
//分页大小修改事件
pageSizeChange:function(val) {
console.log('每页 ' + val +' 条');
this.pageSize = val;
var _self = this;
_self.loadingData();//重新加载数据
},
//当前页修改事件
currentPageChange:function(val) {
this.currentPage = val;
console.log('当前页: ' + val);
var _self = this;
_self.loadingData();//重新加载数据
},
//保存点击事件
editSubmit:function(editForm){
this.$refs[editForm].validate((valid) => {
if (valid) {
var _self = this;
_self.loading = true;
var formData =this.editForm;
var goUrl=this.goUrl;
axios.post(goUrl,formData).then(function(response){
// alert(JSON.stringify(formData));
// alert(formData);
if(response.data>0){
_self.editFormVisible = false;
}
_self.loadingData();//重新加载数据
})
} else {
console.log('error submit!!');
return false;
}
})
}
}
})
</script>
</body>
</html>