vue2后台管理项目总结（一）
<template>
<div>员工管理
<el-form :inline="true" ref="searchRef" :model="searchObj">
<el-form-item label="id" prop="id">
<el-input v-model="" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getStaffList">查询</el-button>
<el-button type="primary" @click="resetSearch()">重置</el-button>
<el-button type="success" plain @click="showPost()">新增员工</el-button>
</el-form-item>
</el-form>
<el-table :data="staffList" stripe style="width: 100%">
<el-table-column prop="id" label="员工编号" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="shop" label="所属门店">
</el-table-column>
<el-table-column prop="tel" label="手机号">
</el-table-column>
<el-table-column prop="address" label="角色">
</el-table-column>
<el-table-column prop="state" label="状态">
</el-table-column>
<el-table-column prop="lastTime" label="最近登录时间">
</el-table-column>
<el-table-column prop="lastTime" label="编辑员工">
<template slot-scope="scope">
<el-button type="success" plain @click="showPut(scope)">编辑员工</el-button>
</template>
</el-table-column>
</el-table>
<van-popup v-model="show1">
<p>新增</p>
<p>
请输入员工的编号
<el-input v-model="" placeholder="请输入员工的编号"></el-input>
</p>
<p>
请输入员工的姓名
<el-input v-model="" placeholder="请输入员工的姓名"></el-input>
</p>
<p>
请输入员工所属的门店
<el-input v-model="" placeholder="请输入员工所属的门店"></el-input>
</p>
<p>
请输入员工的手机号
<el-input v-model="" placeholder="请输入员工的手机号"></el-input>
</p>
<p>
请输入员工的角色
<el-input v-model="" placeholder="请输入员工的角色"></el-input>
</p>
<p>
请输入员工的状态
<el-input v-model="" placeholder="请输入员工的状态"></el-input>
</p>
<el-button type="success" @click="success1()">确认添加</el-button>
<el-button type="danger" @click="danger1()">取消添加</el-button>
</van-popup>
<van-popup v-model="show2" :data="editRow">
<p>
请输入员工的编号
<el-input v-model="" placeholder="请输入员工的编号"></el-input>
</p>
<p>
请输入员工的姓名
<el-input v-model="" placeholder="请输入员工的姓名"></el-input>
</p>
<p>
请输入员工所属的门店
<el-input v-model="" placeholder="请输入员工所属的门店"></el-input>
</p>
<p>
请输入员工的手机号
<el-input v-model="" placeholder="请输入员工的手机号"></el-input>
</p>
<p>
请输入员工的角色
<el-input v-model="" placeholder="请输入员工的角色"></el-input>
</p>
<p>
请输入员工的状态
<el-input v-model="" placeholder="请输入员工的状态"></el-input>
</p>
<el-button type="success" @click="success2()">确认修改</el-button>
<el-button type="danger" @click="danger2()">取消修改</el-button>
</van-popup>
</div>
</template>
<script>
import { GetStaffList, GetStaffPost, GetStaffPut } from '@/api/'
export default {
data() {
return {
staffList: '',
searchObj: {
id: ""
},
show1: false,
show2: false,
searchObjTo: {
id: '',
name: '',
user_group: 1,
},
editRow: {},
editIndex: null
}
},
created() {
this.getStaffList()
},
methods: {
success1() {
//确认新增
this.getStaffPost()
this.show1 = false
},
danger1() {
//取消新增
this.show1 = false
},
success2() {
//确认修改
this.getStaffPut()
this.show2 = false;
},
danger2() {
//取消修改
this.show2 = false
},
showPut(scope) {
this.editRow = { ...scope.row };
this.editIndex = scope.$index
console.log(this.editRow);
this.show2 = true;
console.log('修改前', this.staffList[this.editIndex]);
},
showPost() {
this.show1 = true;
},
resetSearch() {
this.searchObj.id = ''
this.getStaffList();
},
getStaffList() {
GetStaffList(this.searchObj)
.then(res => {
if (res.data.code == 0) {
console.log(res.data.data);
this.staffList = res.data.data;
} else {
alert(res.data.msg || "员工列表获取失败")
}
})
},
getStaffPost() {
// delete .user_group
console.log(this.searchObjTo);
GetStaffPost(this.searchObjTo)
.then(res => {
console.log('新增员工', res);
alert('新增成功',)
this.getStaffList()
}).catch(err => {
console.log(err);
alert('新增失败',)
})
},
getStaffPut() {
delete this.editRow.score
delete this.editRow.user_group
console.log('修改前', this.staffList[this.editIndex]);
GetStaffPut(this.editRow)
.then(res => {
if (res.data.code == 0) {
this.$message({
message: '修改成功',
type: 'success'
})
//隐藏编辑框
this.getStaffList()
// [] =
// ('修改前', []);
// ('修改后', );
} else {
this.$message({
message: '修改失败',
type: 'warning'
})
}
console.log('编辑员工', res);
}).catch(err => {
console.log(err);
this.$message({
message: '修改失败',
type: 'warning'
})
})
}
}
}
</script>