pjhmizn49
/
softwareEngineeringPractice
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD file via upload

Browse Source
main
pjhmizn49 1 year ago
parent 49dbdec07c
commit 9b6b8c16b1
1 changed files with 566 additions and 0 deletions
Show Stats Download Patch File Download Diff File

566
flower_admin_front/src/views/staffView.vue
Unescape View File

@ -0,0 +1,566 @@
<template>
<div>
<div class="tableTop">
<div>
<el-input @input="handleSearch" suffix-icon="el-icon-search" style="width: 300px" placeholder="请输入搜索关键字" v-model="input" clearable></el-input>
</div>
<div>
<el-button @click="handleAdd" type="primary">添加员工</el-button>
<el-button @click="handleDeleteMul" type="danger">批量删除</el-button>
</div>
<!-- 表单 -->
<el-dialog title="员工信息" :visible.sync="dialogVisible" :before-close="handleClose">
<el-form align="left" ref="dialogForm" :rules="rules" :model="dialogForm" label-width="130px" style="margin-right: 150px">
<el-form-item label="用户名" prop="staff_name">
<el-input v-model="dialogForm.staff_name" placeholder="请输入员工用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="staff_pwd">
<el-input v-model="dialogForm.staff_pwd" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="dialogForm.staff_full_name" placeholder="请输入员工姓名"></el-input>
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="dialogForm.staff_phone" placeholder="请输入员工联系电话"></el-input>
</el-form-item>
<el-form-item label="身份" prop="staff_role">
<el-select v-model="dialogForm.staff_role" placeholder="请选择身份">
<el-option label="店长" :value="1"></el-option>
<el-option label="员工" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="账号状态" required>
<el-switch v-model="dialogForm.staff_state" active-text="正常" inactive-text="禁用"></el-switch>
</el-form-item>
<el-form-item label="展示图">
<el-upload
class="upload-demo"
:on-success="onSuccess"
:on-error="onError"
:action="request"
:headers="headers"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column prop="staff_id" label="id" width="80"></el-table-column>
<el-table-column prop="staff_name" label="用户名" width="120"></el-table-column>
<el-table-column prop="staff_pwd" label="密码" width="120"></el-table-column>
<el-table-column prop="staff_full_name" label="姓名" width="120"></el-table-column>
<el-table-column prop="staff_phone" label="联系电话" width="180"></el-table-column>
<el-table-column prop="staff_role" label="身份" width="100"
:filters="[{ text: '员工', value: 0 }, { text: '店长', value:1 }]"
:filter-method="filterRole">
<template slot-scope="scope">
<el-tag
:type="scope.row.staff_role === 0 ? 'primary' : 'success'"
disable-transitions>
<span v-show="scope.row.staff_role===0">员工</span>
<span v-show="scope.row.staff_role===1">店长</span>
</el-tag>
</template>
</el-table-column>
<el-table-column prop="staff_state" label="账号状态" width="200"
:filters="[{ text: '禁用', value: 0 }, { text: '正常', value:1 }]"
:filter-method="filterState">
<template slot-scope="scope">
<el-switch
@change="handleStateChange(scope.row)"
v-model="scope.row.staff_state===1"
active-text="正常"
inactive-text="禁用">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="staff_pic" label="头像" width="150">
<template slot-scope="scope">
<img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.staff_pic)" style="height: 80px;width: 80px" alt="">
</template>
</el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<el-button @click="handleModify(scope.row)" type="primary" size="small" plain>修改</el-button>
<el-button @click="handleDelete(scope.row)" type="danger" size="small" plain>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
:page-count="page_number"
style="margin-top: 30px"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
import Cookie from "js-cookie";
import {http} from "@/js/http";
export default {
data() {
return {
//页面数据
tableData: [{
staff_id: 1,
staff_name: '',
staff_pwd: '',
staff_full_name:'',
staff_phone:'',
staff_state:1,
staff_role:1,
staff_pic:''
}],
dialogForm:[{
staff_id: 1,
staff_name: '',
staff_pwd: '',
staff_full_name:'',
staff_phone:'',
staff_state:1,
staff_role:1,
staff_pic:''
}],
//表单校验
rules:{
staff_name:[
{ required:true, trigger:'blur', message:'请输入员工用户名'}
],
staff_pwd:[
{ required:true, trigger:'blur', message:'请输入密码'}
],
staff_role:[
{ required:true, trigger:'blur', message:'请选择身份信息'}
]
},
//数据处理
multipleSelection: [],
input: '',
dialogVisible:false,
modelType:0, //0表示新增弹窗，1表示修改弹窗
//分页相关
currentPage:1,
pageSize:8,
page_number:1,//总页数
total:10,//总条数
//图片相关
request:http+'/upload',
headers:{ Authorization: Cookie.get('token') },
fileList: []
}
},
created() {
this.currentPage=1;
this.fetchData();
},
methods: {
fetchData(){
//获取所有用户信息
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/staff/list',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:_this.currentPage,
page_size:_this.pageSize
}
}).then(function (response){
if (response.data.code===200){
//查询所有员工信息成功
_this.tableData=response.data.data.staffs;
_this.page_number=response.data.data.page_number;
_this.total=response.data.data.total;
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}catch (error){
this.$message.warning('页面加载出错,请重试!')
}
},
//表格筛选相关
filterRole(value, row) {
return row.staff_role === value;
},
filterState(value, row) {
return row.staff_state === value;
},
//搜索
handleSearch(){
const _this = this
try {
axios({
method: 'post',
url: 'http://localhost:8181/staff/query',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:_this.currentPage,
page_size:_this.pageSize,
staff_name:_this.input
}
}).then(function (response){
if (response.data.code===200){
//查询所有员工信息成功
_this.tableData=response.data.data.staffs;
_this.page_number=response.data.data.page_number;
_this.total=response.data.data.total;
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}catch (error){
this.$message.warning('页面加载出错,请重试!')
}
},
//分页
handleCurrentChange(page) {
this.currentPage = page;
this.fetchData();
},
//多选
handleSelectionChange(val) {
this.multipleSelection = val;
},
//表单相关
//添加
handleAdd(){
this.modelType = 0
this.dialogVisible = true
},
//修改
handleModify(row){
const _this = this
this.modelType = 1
axios({
method: 'post',
url: 'http://localhost:8181/staff/info',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
staff_id: row.staff_id
}
}).then(function (response){
if (response.data.code===200) {
//获取员工信息成功
_this.dialogForm = response.data.data
//将状态和身份信息转换为表单显示
_this.dialogForm.staff_state = response.data.data.staff_state === 1;
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.dialogVisible = true
},
handleStateChange(row){
const _this = this
axios({
method: 'post',
url: 'http://localhost:8181/staff/modifyState',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
staff_id:row.staff_id
}
}).then(function (response){
if (response.data.code===200) {
//修改员工状态信息成功
_this.handleSearch()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
},
//提交添加或修改的表单
submitForm(){ //提交用户表单
const _this=this;
this.$refs.dialogForm.validate((valid) =>{
if(valid){
if(_this.modelType===0){
//提交添加员工表单
//账号状态转换为数据库存储格式
let state;
if(_this.dialogForm.staff_state) state=1;
else state=0;
axios({
method: 'post',
url: 'http://localhost:8181/staff/add',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
staff_name:_this.dialogForm.staff_name,
staff_pwd:_this.dialogForm.staff_pwd,
staff_full_name:_this.dialogForm.staff_full_name,
staff_phone:_this.dialogForm.staff_phone,
staff_role:_this.dialogForm.staff_role,
staff_state:state,
staff_pic:_this.dialogForm.staff_pic,
}
}).then(function (response){
if (response.data.code===200) {
//添加员工信息成功
_this.$message.success('添加成功!')
//再次获取数据以更新页面
_this.fetchData()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}
else if(_this.modelType===1){
//提交修改员工表单
//账号状态和身份转换为数据库存储格式
let state;
if(_this.dialogForm.staff_state) state=1;
else state=0;
axios({
method: 'post',
url: 'http://localhost:8181/staff/modify',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
staff_id:_this.dialogForm.staff_id,
staff_name:_this.dialogForm.staff_name,
staff_pwd:_this.dialogForm.staff_pwd,
staff_full_name:_this.dialogForm.staff_full_name,
staff_phone:_this.dialogForm.staff_phone,
staff_role:_this.dialogForm.staff_role,
staff_state:state,
staff_pic:_this.dialogForm.staff_pic,
}
}).then(function (response){
if (response.data.code===200) {
//修改员工信息成功
_this.$message.success('修改成功!')
//再次获取数据以更新页面
_this.handleSearch()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}
//清空表单数据
this.handleClose();
}
})
},
//删除
handleDelete(row){
const _this = this;
this.$confirm('此操作将永久删除该员工信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除
axios({
method: 'post',
url: 'http://localhost:8181/staff/deletePer',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
staff_id:row.staff_id
}
}).then(function (response){
if (response.data.code===200) {
//删除员工成功
_this.handleSearch()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.$message({type: 'success', message: '删除成功!'});
}).catch(() => {
this.$message({type: 'info', message: '已取消删除'});
});
},
handleDeleteMul(){
const _this = this
if(_this.multipleSelection.length===0)
this.$message({type: 'warning', message: '请选择员工'});
else{
let ids = []
for (let i=0; i<_this.multipleSelection.length; i++){
ids[i] = _this.multipleSelection[i].staff_id
}
this.$confirm('此操作将永久删除员工信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除
axios({
method: 'post',
url: 'http://localhost:8181/staff/deleteMul',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
staff_ids:ids
}
}).then(function (response){
if (response.data.code===200) {
//删除员工成功
_this.handleSearch()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.$message({type: 'success', message: '批量删除成功!'});
}).catch(() => {
this.$message({type: 'info', message: '已取消删除'});
});
}
},
//dialog弹窗关闭时触发该方法
handleClose(){
this.$refs.dialogForm.resetFields()
//重置表单
this.dialogForm.staff_id = 1;
this.dialogForm.staff_name='';
this.dialogForm.staff_pwd='';
this.dialogForm.staff_full_name='';
this.dialogForm.staff_phone='';
this.dialogForm.staff_state=1;
this.dialogForm.staff_role=1;
this.dialogForm.staff_pic='';
this.fileList = []
this.dialogVisible = false;
},
//图片相关
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
onSuccess(response){
if(response.code===200){
this.dialogForm.staff_pic = response.data.url;
}else if (response.code===401){
this.$message.warning('身份验证失败,请重新登录!')
}else if (response.code===403)
{
this.$alert("上传失败,具体原因如下:\n"+response.msg, '上传失败', {
confirmButtonText: '确定'
})
}
},
onError(){
this.$alert("网络请求失败", '上传失败', {
confirmButtonText: '确定'
})
},
}
}
</script>
<style>
.tableTop{
width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 20px 50px;
}
</style>
Write Preview
Loading…
Cancel
Save