API封装
import axios from 'axios'
axios.defaults.baseURL = "http://mengxuegu.com:9999/pro-api/"
export default {
Member() {
return axios({
url: '/member/list',
method: 'get'
})
}
}
拦截器的配置
//3. 设置请求拦截器配置
Server.interceptors.request.use(function(config) { //成功的时候
console.log(config);
config.headers.Authorization = sessionStorage.token;
return config
}, function(error) { //失败
return Promise.reject(error);
})
//4. 配置相应拦截器的信息
Server.interceptors.response.use(function(response) {
if (response.status == 200) {
return response.data;
}
return response;
}, function(error) { //失败
return Promise.reject(error);
});
员工管理模块
<template>
<div>
<!-- 面包屑 -->
<el-card>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>
<span class="span"></span> 员工管理
</el-breadcrumb-item>
</el-breadcrumb>
</el-card>
<!-- 内容 -->
<el-row :gutter="20">
<el-col :span="3">
<el-input v-model="userName" placeholder="账号"></el-input>
</el-col>
<el-col :span="3">
<el-input v-model="cname" placeholder="姓名"></el-input>
</el-col>
<el-col :span="1.5">
<el-button type="primary" @click="searchlist()">查询</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" @click="addUser">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" @click="reset()">重置</el-button>
</el-col>
</el-row>
<!-- table表格 -->
<el-table :data="memberListData" border style="width: 100%">
<el-table-column prop="id" label="序号" width="50"></el-table-column>
<el-table-column prop="username" label="账号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="salary" label="薪酬"></el-table-column>
<el-table-column prop="EntryTime" label="入职时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="addUser(scope.row)">编辑</el-button>
<el-button type="danger" @click="del()">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页器 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="getNowpage"
:page-sizes="[10, 20, 30, 40]"
:page-size="this.staffsList.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="staffsList.length"
></el-pagination>
<!-- 新增弹框 -->
<el-dialog title="新增用户" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="账号" :label-width="formLabelWidth">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input v-model="form.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电话" :label-width="formLabelWidth">
<el-input v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="新酬" :label-width="formLabelWidth">
<el-input v-model="form.salary" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="入职时间" :label-width="formLabelWidth">
<div class="block">
<el-date-picker v-model="dateValue" type="date" placeholder="选择日期"></el-date-picker>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="resUser(form)">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import staffs from '../../api/staffs'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
userName: "", //会员卡号
cname: "", //会员姓名
//支付类型数据
staffsList: [],//列表数据
memberListData: [],
paramUser: {
pagenum: 1,
pagesize: 8
},//用户列表参数配置
//员工新增信息
dialogFormVisible: false,
formLabelWidth: '120px',
form:{},
dateValue:''
//编辑
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getTableData() {
staffs.getStaffsList().then(res => {
console.log(res);
this.staffsList = res.data.data.rows;
console.log(this.staffsList);
this.getNowpage(1)
});
},
getNowpage(nowpage) {
var start = (nowpage - 1) * this.paramUser.pagesize;
var end = start + this.paramUser.pagesize; //所有数据
console.log(start, end);
this.memberListData = this.staffsList.slice(start, end); //当前页面的数据、
console.log(this.memberListData);
},
//搜索数据
searchlist() {
var arr = [];
arr = this.staffsList.filter((item, key) => {
return item.name.includes(this.cname);
});
console.log(arr);
this.memberListData = arr;
this.getTableData();
this.getNowpage(1);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 删除
async del() {
const one= await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err=>err)
if(one !== 'confirm'){
return this.$message.info("取消删除")
}
this.getTableData();
this.$message.success("删除成功")
// location.reload()
},
//新增弹框
addUser(row) {
console.log(row);
this.form=row
this.dialogFormVisible = true
},
//点击确定增加用户
resUser(row) {
this.dialogFormVisible = false
staffs.getEbdit(row.id,row.name).then(res=>{
console.log(res);
if (res.data.code !== 200) {
this.$message.error("增加用户失败")
} else {
this.$message.success("增加用户成功")
// location.reload()
this.getTableData();
}
})
},
//重置
reset(){
this.userName=''
this.cname=''
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
this.getTableData();
setTimeout(() => {
this.getNowpage(1);
}, 100);
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
}
</script>
就是传统的从接口获取数据,在进行布局 - 数据的渲染 - 样式的美化,
接下来的就是数据的增删改查,分页 搜索