246 lines
9.1 KiB
Vue
246 lines
9.1 KiB
Vue
<template>
|
||
<div>
|
||
<el-form :inline="true" :model="empRequest" class="demo-form-inline">
|
||
<el-form-item label="管理员姓名">
|
||
<el-input v-model="empRequest.empName" placeholder="管理员姓名" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="fetchManager" icon="el-icon-search">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-button type="primary" @click="dialogFormVisible1 = true">新增管理员</el-button>
|
||
|
||
<el-table :data="empResponse.list" border stripe @selection-change="handleSelectionChange" tooltip-effect="dark" style="width: 100%">
|
||
<el-table-column type="selection" width="55"/>
|
||
<el-table-column label="员工Id" prop="empId"/>
|
||
<el-table-column label="员工姓名" prop="empName"/>
|
||
<el-table-column label="员工用户名" prop="username"/>
|
||
<el-table-column label="员工手机号" prop="empTel"/>
|
||
<el-table-column label="员工身份证号" prop="empIdCard"/>
|
||
<el-table-column label="员工年龄" prop="empAge"/>
|
||
<el-table-column label="员工性别" >
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.empGender == 1">男</span>
|
||
<span v-if="scope.row.empGender == 2">女</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="员工住址" prop="empAddress"/>
|
||
<el-table-column label="员工薪资" prop="empSal"/>
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button type="warning" @click="open(scope.row.empId)">编辑</el-button>
|
||
<el-button type="danger" @click="del(scope.row.empId)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="empRequest.pageNum"
|
||
:page-sizes="[1, 5, 10, 20]"
|
||
:page-size="empRequest.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="empResponse.total">
|
||
</el-pagination>
|
||
|
||
<el-button type="danger" @click="batchDel">删除管理员</el-button>
|
||
|
||
<el-dialog title="新增管理员" :visible.sync="dialogFormVisible1">
|
||
<el-form :model="emp">
|
||
<el-form-item label="员工姓名" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工用户名" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.username" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工密码" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.password" autocomplete="off" :key="passwordType" :type="passwordType" tabindex="2" auto-complete="on"></el-input>
|
||
<span class="show-pwd" @click="showPwd">
|
||
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
||
</span>
|
||
</el-form-item>
|
||
<el-form-item label="员工手机号" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empTel" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工身份证号" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empIdCard" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工年龄" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empAge" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工性别" :label-width="formLabelWidth">
|
||
<el-radio-group v-model="emp.empGender">
|
||
<el-radio :label="1">男</el-radio>
|
||
<el-radio :label="2">女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="员工住址" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empAddress" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工薪资" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empSal" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible1 = false">取 消</el-button>
|
||
<el-button type="primary" @click="add">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<el-dialog title="编辑管理员" :visible.sync="dialogFormVisible2">
|
||
<el-form :model="emp">
|
||
<el-form-item label="员工姓名" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工用户名" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.username" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工密码" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.password" autocomplete="off" :key="passwordType" :type="passwordType" tabindex="2" auto-complete="on"></el-input>
|
||
<span class="show-pwd" @click="showPwd">
|
||
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
||
</span>
|
||
</el-form-item>
|
||
<el-form-item label="员工手机号" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empTel" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工身份证号" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empIdCard" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工年龄" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empAge" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工性别" :label-width="formLabelWidth">
|
||
<el-radio-group v-model="emp.empGender">
|
||
<el-radio :label="1">男</el-radio>
|
||
<el-radio :label="2">女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="员工住址" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empAddress" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="员工薪资" :label-width="formLabelWidth">
|
||
<el-input v-model="emp.empSal" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible2 = false">取 消</el-button>
|
||
<el-button type="primary" @click="update">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import { 组件名称 } from '组件路径',
|
||
import { fetchManager, add, findById, update, del, batchDel } from '@/api/manager'
|
||
export default {
|
||
//import引入的组件需要注入到对象中才能使用
|
||
data() {
|
||
//这里存放数据
|
||
return {
|
||
emp: {
|
||
empId: null,
|
||
empName: '',
|
||
username: '',
|
||
password: '',
|
||
empTel: '',
|
||
empIdCard: '',
|
||
empAge: null,
|
||
empGender: null,
|
||
empAddress: '',
|
||
empSal: null,
|
||
},
|
||
empRequest: {
|
||
empId: null,
|
||
empName: '',
|
||
pageNum: 1,
|
||
pageSize: 5
|
||
},
|
||
empResponse: {
|
||
total: 0,
|
||
list: []
|
||
},
|
||
dialogFormVisible1: false,
|
||
dialogFormVisible2: false,
|
||
formLabelWidth: '120px',
|
||
passwordType: 'password',
|
||
redirect: undefined,
|
||
multipleSelection: []
|
||
}
|
||
},
|
||
methods: {
|
||
fetchManager(){
|
||
fetchManager(this.empRequest).then(res =>{
|
||
this.empResponse = res.data
|
||
})
|
||
},
|
||
handleSizeChange(val) {
|
||
this.empRequest.pageSize = val
|
||
this.fetchManager()
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.empRequest.pageNum = val
|
||
this.fetchManager()
|
||
},
|
||
showPwd() {
|
||
if (this.passwordType === 'password') {
|
||
this.passwordType = ''
|
||
} else {
|
||
this.passwordType = 'password'
|
||
}
|
||
this.$nextTick(() => {
|
||
this.$refs.password.focus()
|
||
})
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
},
|
||
add() {
|
||
add(this.emp).then(res => {
|
||
this.$message.success(res.msg)
|
||
this.dialogFormVisible1 = false
|
||
this.emp = {}
|
||
this.fetchManager()
|
||
})
|
||
},
|
||
open(empId){
|
||
this.dialogFormVisible2 = true
|
||
findById(empId).then(res =>{
|
||
this.emp = res.data
|
||
})
|
||
},
|
||
update() {
|
||
update(this.emp).then(res => {
|
||
this.$message.success(res.msg)
|
||
this.dialogFormVisible2 = false
|
||
this.emp = {}
|
||
this.fetchManager()
|
||
})
|
||
},
|
||
del(empId){
|
||
del(empId).then(res =>{
|
||
this.$message.success(res.msg)
|
||
this.fetchManager()
|
||
})
|
||
},
|
||
batchDel() {
|
||
batchDel(this.multipleSelection.map(item => item.empId)).then(res => {
|
||
this.$message.success(res.msg)
|
||
this.fetchManager()
|
||
})
|
||
}
|
||
},
|
||
//声明周期 - 创建完成（可以访问当前this实例）,
|
||
created() {
|
||
this.fetchManager()
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|