elementui 创建前端页面
<template>
<section>
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchForm.userName" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.state" placeholder="状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadDepartments">查询</el-button>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
<el-table :data="departments" v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column type="index" label="序号" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" >
</el-table-column>
<el-table-column prop="sn" label="编号">
</el-table-column>
<el-table-column prop="state" label="状态" :formatter="formatState" >
</el-table-column>
<el-table-column prop="manager.username" label="部门经理" >
</el-table-column>
<el-table-column prop="parent.name" label="上级部门" >
</el-table-column>
<el-table-column label="操作" >
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
<!--新增界面-->
<el-dialog :title="dialogTitle" v-model="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="addForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="编码" prop="sn">
<el-input v-model="addForm.sn" ></el-input>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="addForm.state">
<el-radio class="radio" :label="1">启用</el-radio>
<el-radio class="radio" :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="部门" >
<el-select v-model="addForm.deptId" clearable placeholder="请选择">
<el-option
v-for="item in deptIds"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上级部门" prop="state">
<el-select v-model="addForm.managerId" clearable placeholder="请选择">
<el-option
v-for="item in managers"
:key="item.name"
:label="item.username"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
export default {
data() {
return {
addFormVisible: false,
sels:[],
//添加修改的form表单
addForm:{
id:"",
name:"",
sn:"",
state:"",
managerId:"",
deptId:""
},
deptIds:[],
managers:[],
//弹出框的标题
dialogTitle:"",
//弹出框默认是关闭状态
dialogVisible:false,
searchForm: {
userName: "",
state:""
},
//部门列表数据
departments: [],
//是否显示加载框
listLoading: false,
addFormRules: {
name: [
{required: true, message: '部门必填！!', trigger: 'blur'}
],
sn: [
{required: true, message: '编号必填！!', trigger: 'blur'}
]
},
pageNum: 1,
pageSizes: [5, 10, 15],
pageSize: 5,
total: 0
}
},
methods:{
formatState(row,column){
return row.state ? "启用" : "禁用";
},
//选中复选框触发此函数， vals:选中的值(行)
selsChange(vals){
console.debug("选中的行",vals);
this.sels=vals;
},
batchRemove(){
this.$http.patch("http://localhost/department/removeAll",this.sels).then((res=>{
// console.debug(res)
this.loadDepartments()
}))
},
handleSizeChange(val) {
this.pageSize = val
this.pageNum = 1
this.loadDepartments()
},
handleCurrentChange(val) {
this.pageNum = val
this.loadDepartments()
},
//加载部门列表
loadDepartments(){
this.listLoading = true;
let param = {"pageNum": this.pageNum, "pageSize": this.pageSize,"userName":this.searchForm.userName,"state":this.searchForm.state};
this.$http.patch("http://localhost/department",param).then((res => {
let {list,total} = res.data;
this.departments = list;
this.total = total;
this.listLoading = false;
}));
},
handleAdd: function () {
//设置标题
this.dialogTitle = "新增";
if(this.$refs["addForm"]){
//重置
this.$refs["addForm"].resetFields();//this.$refs.addForm.resetFields()
}
//清空form表单
for(var k in this.addForm){
this.addForm[k] = "";
}
//默认是启用状态
this.addForm.state = 1;
//显示弹出框
this.addFormVisible = true;
},
//添加按钮注册事件
addSubmit(){
if(this.addForm.deptId){
//给addForm动态添加属性
this.addForm.parent = {"id":this.addForm.deptId}
}
if(this.addForm.managerId){
//给addForm动态添加属性
this.addForm.manager = {"id": this.addForm.managerId};
}
//必须验证通过之后，才执行if语句中的内容
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$http.put("http://localhost/department", this.addForm).then((res => {
let {success, msg} = res.data;
if(success){
//刷新列表
this.loadDepartments();
//关闭弹出框
this.addFormVisible = false;
}else{
this.$message.error(msg);
}
}));
}
});
},
//编辑按钮注册事件
handleEdit(index,row){
for(var k in this.addForm){
this.addForm[k] = row[k];
}
//给部门了经理赋值
if(row.manager){
this.addForm.managerId = row.manager.id;
}
//给部门赋值
if(row.parent){
this.addForm.deptId = row.parent.id;
}
//弹出窗体
this.addFormVisible = true;
},
//删除按钮注册事件
handleDel(index,row){
this.$confirm('您确认离我而去吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http.delete("http://localhost/department/"+row.id).then((res => {
let {success, msg} = res.data;
if(success){
this.$message({
type: 'success',
message: '删除成功!'
});
this.loadDepartments();
}else{
this.$message.error(msg);
}
}));
}).catch(() => {
});
},
//加载所有部门
loadAllDepartment(){
this.$http.patch("http://localhost/department/findAll").then((res => {
console.debug(res);
this.deptIds = res.data;
}));
},
loadAllEmployees(){
this.$http.patch("http://localhost/employee/findAll").then((res => {
this.managers = res.data;
}));
}
},
mounted(){
//加载部门列表
this.loadDepartments();
this.loadAllDepartment()
this.loadAllEmployees()
}
};
</script>
一般的常用组件创建页面，分享一下，多多交流
