<template>
|
<div style="width:100%">
|
<el-tabs v-model="activeName" type="card">
|
<el-tab-pane label="员工管理" name="first">
|
<div class="topSelect">
|
<el-button type="primary" @click="dialogAddModel">新建员工</el-button>
|
</div>
|
<div class="topTitle">
|
<el-table
|
id="exportTab"
|
height="720"
|
:data="tableData"
|
border
|
style="width: 100%"
|
:stripe="true"
|
>
|
<el-table-column
|
prop="account"
|
label="员工账号"
|
/>
|
<el-table-column
|
prop="userName"
|
label="员工名称"
|
/>
|
<el-table-column
|
prop="mobile"
|
label="手机"
|
/>
|
<el-table-column
|
prop="email"
|
label="邮箱"
|
/>
|
<el-table-column
|
prop="wechat"
|
label="微信"
|
/>
|
<el-table-column
|
prop="expireTime"
|
label="过期时间"
|
/>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="160"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="personnelEditOpen(scope.row)">编辑</el-button>
|
<el-button type="text" size="small" @click="personnelRoleOpen(scope.row)">分配角色</el-button>
|
<!-- <el-button type="text" size="small" @click="personnelDel(scope.row)">删除</el-button> -->
|
<el-popconfirm
|
:ref="`popover-${scope.$index}`"
|
confirm-button-text="确认"
|
cancel-button-text="取消"
|
icon="el-icon-info"
|
icon-color="red"
|
title="确定删除吗？"
|
@confirm="personnelDel(scope.row)"
|
>
|
<el-button slot="reference" type="text" size="small">删除</el-button>
|
</el-popconfirm>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" /> -->
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="角色配置" name="second">
|
<role />
|
</el-tab-pane>
|
</el-tabs>
|
<!-- 新建员工弹窗 -->
|
<el-dialog title="新建员工" :visible.sync="dialogAdd">
|
<el-form :model="form" :rules="rules">
|
<el-form-item label="账号" :label-width="formLabelWidth" prop="account">
|
<el-input v-model="form.account" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="密码" :label-width="formLabelWidth" prop="password">
|
<el-input v-model="form.password" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="员工名称" :label-width="formLabelWidth" prop="userName">
|
<el-input v-model="form.userName" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
|
<el-input v-model="form.mobile" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
|
<el-input v-model="form.email" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="微信" :label-width="formLabelWidth" prop="wechat">
|
<el-input v-model="form.wechat" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="过期时间" :label-width="formLabelWidth">
|
<el-date-picker
|
v-model="form.expireTime"
|
value-format="yyyy-MM-dd"
|
type="date"
|
placeholder="选择过期时间"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogAdd = false">取 消</el-button>
|
<el-button type="primary" @click="personnelAdd">确 定</el-button>
|
</div>
|
</el-dialog>
|
<!-- 编辑员工弹窗 -->
|
<el-dialog title="编辑员工" :visible.sync="dialogEdit">
|
<el-form :model="formEdit" :rules="rules">
|
<el-form-item label="账号" :label-width="formLabelWidth" prop="account">
|
<el-input v-model="formEdit.account" autocomplete="off" disabled />
|
</el-form-item>
|
<el-form-item label="密码" :label-width="formLabelWidth" prop="passwordEdit">
|
<el-input v-model="formEdit.password" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="员工名称" :label-width="formLabelWidth" prop="userName">
|
<el-input v-model="formEdit.userName" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
|
<el-input v-model="formEdit.mobile" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
|
<el-input v-model="formEdit.email" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="微信" :label-width="formLabelWidth" prop="wechat">
|
<el-input v-model="formEdit.wechat" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="过期时间" :label-width="formLabelWidth">
|
<el-date-picker
|
v-model="formEdit.expireTime"
|
value-format="yyyy-MM-dd"
|
type="date"
|
placeholder="选择过期时间"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="personnelEditClose">取 消</el-button>
|
<el-button type="primary" @click="personnelEdit">确 定</el-button>
|
</div>
|
</el-dialog>
|
<!-- 员工分配角色弹窗 -->
|
<el-dialog title="分配角色" :visible.sync="dialogRole">
|
<el-table
|
v-if="dialogRole"
|
ref="multipleTable"
|
height="250"
|
:data="roleData"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@select="select"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
/>
|
<el-table-column
|
prop="groupName"
|
label="名称"
|
width="120"
|
/>
|
<el-table-column
|
prop="address"
|
label="备注"
|
show-overflow-tooltip
|
/>
|
</el-table>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogRole = false">取 消</el-button>
|
<el-button type="primary" @click="personnelRole">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
import role from './role'
|
import { personnelList } from '@/api/table'
|
// import Pagination from '@/components/Pagination'
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {
|
// Pagination
|
role
|
},
|
props: {},
|
data() {
|
// 这里存放数据
|
return {
|
options: [],
|
radio1: '',
|
value: '',
|
value1: '',
|
type: 'hourly',
|
monitorPointId: 0,
|
tableData: [],
|
dateDisplay: false,
|
newKey: '',
|
dialogAdd: false,
|
dialogEdit: false,
|
dialogRole: false,
|
form: {
|
account: '',
|
password: '',
|
userName: '',
|
mobile: '',
|
email: '',
|
wechat: '',
|
expireTime: ''
|
},
|
formEdit: {
|
id: 0,
|
account: '',
|
password: '',
|
userName: '',
|
mobile: '',
|
email: '',
|
wechat: '',
|
expireTime: ''
|
},
|
formLabelWidth: '120px',
|
activeName: 'first',
|
rules: {
|
userName: [
|
{ required: true, message: '请输入名称', trigger: 'blur' },
|
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
],
|
account: [
|
{ required: true, message: '请输入账号', trigger: 'blur' },
|
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
],
|
password: [
|
{ required: true, validator: this.validatePassword }
|
],
|
passwordEdit: [
|
{ required: true, validator: this.validatePassword }
|
],
|
mobile: [
|
{ validator: this.validateMobile, trigger: 'blur' }
|
],
|
email: [
|
{ validator: this.validateEmail, trigger: 'blur' }
|
]
|
},
|
roleData: [],
|
multipleSelection: '',
|
currentUserId: 0,
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
}
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created() {
|
this.personnelList()
|
this.roleList()
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted() {
|
|
},
|
beforeCreate() {}, // 生命周期 - 创建之前
|
beforeMount() {}, // 生命周期 - 挂载之前
|
beforeUpdate() {}, // 生命周期 - 更新之前
|
updated() {}, // 生命周期 - 更新之后
|
beforeDestroy() {}, // 生命周期 - 销毁之前
|
destroyed() {}, // 生命周期 - 销毁完成
|
activated() {},
|
// 方法集合
|
methods: {
|
// 新建员工弹窗
|
dialogAddModel() {
|
this.dialogAdd = true
|
this.form.account = ''
|
this.form.password = ''
|
this.form.userName = ''
|
this.form.mobile = ''
|
this.form.email = ''
|
this.form.wechat = ''
|
this.form.expireTime = ''
|
},
|
// 查询员工方法
|
// personnelList() {
|
// this.$axios.get('user/select', {
|
// params: {
|
// page: 1,
|
// size: 100
|
// },
|
// headers: { 'token': getToken() }
|
// }).then(res => {
|
// console.log('员工列表数据')
|
// console.log(res)
|
// this.tableData = res.data.data.items
|
// })
|
// },
|
personnelList() {
|
return new Promise((resolve, reject) => {
|
personnelList({ page: 1, size: 100 }).then((res) => {
|
// console.log('员工列表数据')
|
// console.log(res)
|
this.tableData = res.data.items
|
resolve()
|
}).catch((err) => {
|
console.log(err)
|
reject()
|
})
|
})
|
},
|
// 新建员工方法
|
personnelAdd() {
|
if (this.form.account && this.form.password && this.form.userName) {
|
this.$request({
|
url: '/user/insert',
|
method: 'post',
|
data: {
|
account: this.form.account,
|
password: this.$encrypt(this.form.password),
|
userName: this.form.userName,
|
mobile: this.form.mobile,
|
email: this.form.email,
|
wechat: this.form.wechat,
|
expireTime: this.form.expireTime
|
}
|
}).then(res => {
|
// console.log(res)
|
if (res.code === 0) {
|
this.personnelList()
|
this.dialogAdd = false
|
this.$message({
|
message: '新建成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: res.message,
|
type: 'warning'
|
})
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
} else {
|
this.$message({
|
message: '请填写账号及密码或员工名称',
|
type: 'warning'
|
})
|
}
|
},
|
// 当前组织下的菜单列表
|
roleList() {
|
this.$request({
|
url: '/group/select',
|
method: 'get',
|
params: {
|
page: 1,
|
size: 100
|
}
|
}).then(res => {
|
// console.log('当前组织下的角色列表')
|
// console.log(res)
|
this.roleData = res.data.items
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 打开及传递数据编辑弹窗
|
personnelEditOpen(row) {
|
this.dialogEdit = true
|
this.formEdit.id = row.id
|
this.formEdit.account = row.account
|
this.formEdit.userName = row.userName
|
this.formEdit.mobile = row.mobile
|
this.formEdit.email = row.email
|
this.formEdit.wechat = row.wechat
|
this.formEdit.expireTime = row.expireTime
|
this.form.id = row.id
|
this.form.account = row.account
|
this.form.userName = row.userName
|
this.form.mobile = row.mobile
|
this.form.email = row.email
|
this.form.wechat = row.wechat
|
this.form.expireTime = row.expireTime
|
},
|
// 关闭员工弹窗方法
|
personnelEditClose() {
|
this.formEdit.userName = ''
|
this.formEdit.mobile = ''
|
this.formEdit.email = ''
|
this.formEdit.wechat = ''
|
this.formEdit.expireTime = ''
|
this.formEdit.password = ''
|
this.form.id = ''
|
this.dialogEdit = false
|
},
|
// 编辑员工方法
|
personnelEdit() {
|
// return
|
if (this.formEdit.userName !== this.form.userName || this.formEdit.password !== this.form.password || this.formEdit.mobile !== this.form.mobile || this.formEdit.wechat !== this.form.wechat || this.formEdit.email !== this.form.email || this.formEdit.expireTime !== this.form.expireTime) {
|
this.$request({
|
url: '/user/update',
|
method: 'post',
|
data: {
|
id: this.formEdit.id,
|
password: this.formEdit.password ? this.$encrypt(this.formEdit.password) : null,
|
userName: this.formEdit.userName ? this.formEdit.userName : null,
|
mobile: this.formEdit.mobile ? this.formEdit.mobile : null,
|
email: this.formEdit.email ? this.formEdit.email : null,
|
wechat: this.formEdit.wechat ? this.formEdit.wechat : null,
|
expireTime: this.formEdit.expireTime ? this.formEdit.expireTime : null
|
}
|
}).then(res => {
|
// console.log(res)
|
if (res.code === 0) {
|
this.$message.success('修改成功')
|
this.personnelList()
|
this.dialogEdit = false
|
} else {
|
this.$message({
|
message: res.message,
|
type: 'error'
|
})
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
} else {
|
this.$message({
|
message: '未修改',
|
type: 'warning'
|
})
|
}
|
},
|
// 打开员工分配角色弹窗
|
personnelRoleOpen(row) {
|
this.roleList()
|
this.personnelList()
|
this.dialogRole = true
|
this.currentUserId = row.id
|
this.$request({
|
url: '/group/getGroup',
|
method: 'get',
|
params: {
|
userId: row.id
|
}
|
}).then(res => {
|
// console.log(res)
|
// this.$nextTick(() => {
|
this.toggleSelection(res.data)
|
// })
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 员工分配角色方法
|
personnelRole() {
|
// for (let i = 0; i < this.multipleSelection.length; i++) {
|
// this.multipleSelection.splice(i, 1, this.multipleSelection[i].id)
|
// }
|
if (this.multipleSelection.length < 2) {
|
this.multipleSelection = this.multipleSelection[0].id
|
} else {
|
this.multipleSelection = this.multipleSelection[1].id
|
}
|
this.$request({
|
url: '/group/allot',
|
method: 'post',
|
data: {
|
userId: this.currentUserId,
|
groupId: this.multipleSelection
|
}
|
}).then(res => {
|
// console.log(res)
|
if (res.code === 0) {
|
this.dialogRole = false
|
this.$message({
|
message: '保存成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '保存失败',
|
type: 'warning'
|
})
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
this.multipleSelection = ''
|
},
|
// 删除员工方法
|
personnelDel(row) {
|
this.$request({
|
url: '/user/delete',
|
method: 'get',
|
params: {
|
id: row.id
|
}
|
}).then(res => {
|
// console.log(res)
|
if (res.code === 0) {
|
this.personnelList()
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
} else {
|
this.$message.error('删除失败')
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 显示勾选当前用户的默认数据
|
toggleSelection(rows) {
|
if (rows) {
|
// rows.forEach(row => {
|
for (let i = 0; i < this.roleData.length; i++) {
|
if (this.roleData[i].id === rows.id) {
|
// 拿到勾选数据对比遍历列表数据 id相等放入toggleRowSelection方法
|
this.$refs.multipleTable.toggleRowSelection(this.roleData[i])
|
}
|
}
|
// })
|
} else {
|
this.$refs.multipleTable.clearSelection()
|
}
|
},
|
select(selection, row) {
|
// 清除 所有勾选项
|
this.$refs.multipleTable.clearSelection()
|
// 当表格数据都没有被勾选的时候 就返回
|
// 主要用于将当前勾选的表格状态清除
|
if (selection.length === 0) return
|
this.$refs.multipleTable.toggleRowSelection(row, true)
|
},
|
// 勾选的角色id数组
|
handleSelectionChange(val) {
|
// this.multipleSelection = []
|
this.multipleSelection = val
|
},
|
// 密码验证
|
validatePassword(rule, value, callback) {
|
if (!/^([a-zA-Z]|[0-9])[-_a-zA-Z0-9]{5,19}/.test(value)) {
|
callback(new Error(' 密码只能包括 字母 , 下划线 , 数字, 长度必须在6 到 20 之间!'))
|
} else {
|
callback()
|
}
|
},
|
// 手机验证
|
validateMobile(rule, value, callback) {
|
if (!value) {
|
callback(new Error('请输入手机号!'))
|
} else {
|
if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
|
callback(new Error(' 请输入正确手机号!'))
|
} else {
|
callback()
|
}
|
}
|
},
|
// 邮箱验证
|
validateEmail(rule, value, callback) {
|
if (!value) {
|
callback(new Error('请输入邮箱!'))
|
} else {
|
if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)) {
|
callback(new Error(' 请输入正确邮箱'))
|
} else {
|
callback()
|
}
|
}
|
}
|
} // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped lang="scss">
|
.topSelect{
|
display: flex;
|
margin-bottom: 20px;
|
padding: 20px 15px 0 15px;
|
display: flex;
|
justify-content: space-between;
|
span:first-child{
|
flex: 1;
|
}
|
// div:last-child{
|
// width: 300px;
|
// line-height: 40px;
|
// padding-left: 6px;
|
// }
|
}
|
.topTitle{
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
padding: 0 15px;
|
}
|
</style>
|
