<template>
|
<div class="list">
|
<TableCustom :queryForm="pagination" :tableData="data" :total="pagination.total"
|
@handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
|
<template #search>
|
<el-form label-width="100px" inline>
|
<el-form-item label="人员搜索">
|
<el-input v-model="nickNameOrPhone" placeholder="请输入姓名/联系电话"></el-input>
|
</el-form-item>
|
<el-form-item label="人员角色">
|
<el-select v-model="roleId" placeholder="请选择（多选）" multiple>
|
<el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
|
:value="item.roleId"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="登陆状态">
|
<el-select v-model="status" placeholder="请选择（多选）">
|
<el-option v-for="item in [
|
{ label: '全部', value: '' },
|
{ label: '启用', value: 0 },
|
{ label: '禁用', value: 1 },
|
]" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item style="margin-left: 63px;">
|
<el-button @click="reset">重置</el-button>
|
<el-button type="primary" @click="onSubmit" style="margin-left: 10px;">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
<template #setting>
|
<el-button icon="el-icon-plus" @click="dialogVisible = true" type="primary">
|
添加人员
|
</el-button>
|
</template>
|
<template #table>
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
<el-table-column prop="nickName" label="姓名"></el-table-column>
|
<el-table-column prop="phonenumber" label="联系电话"></el-table-column>
|
<el-table-column prop="roleName" label="角色"></el-table-column>
|
<el-table-column prop="userName" label="登陆账号"></el-table-column>
|
<el-table-column prop="remark" label="备注"></el-table-column>
|
<el-table-column prop="status" label="登录状态">
|
<template #default="{ row }">
|
<div class="status_class">
|
<div :class="row.status == 0 ? 'green' : 'red'"></div>
|
<div>{{ row.status == 0 ? '正常' : '禁用' }}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
<el-table-column label="操作" width="300">
|
<template slot-scope="{ row }">
|
<div>
|
<el-button type="text" @click="edit(row)" class="action-button">编辑</el-button>
|
<el-button type="text" @click="inherit(row)" class="action-button">账号继承</el-button>
|
<el-button v-if="row.status != 0" type="text" @click="updateStatus(row, true)" class="action-button">
|
启用
|
</el-button>
|
<el-button v-if="row.status == 0" type="text" @click="updateStatus(row, false)" class="action-button">
|
禁用
|
</el-button>
|
<el-button type="text" @click="detail(row)" class="action-button">重置密码</el-button>
|
<el-button type="text" @click="del(row)" class="action-button">删除</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCustom>
|
|
<AddEdit v-if="dialogVisible" :row="row" :deptType="deptTypeList" :roleList="roleList"
|
:dialogVisible="dialogVisible" @close="dialogVisible = false, row = {}" @confirm="confirm" />
|
<ResetPassword v-if="passwordVisible" :row="row" :dialogVisible="passwordVisible"
|
@close="passwordVisible = false, row = {}" @confirm="passwordConfirm" />
|
<Disb v-if="disbDialogVisible" :row="disbRow" :dialogVisible="disbDialogVisible"
|
@close="disbDialogVisible = false, disbRow = {}" @confirm="disbConfirm" />
|
<ShowDelConfirm :show="delShow" @close="delShow = false" @confirm="delConfirm" title="确认要删除该人员吗？"
|
tip="删除人员后，该人员不可登录。如非必要，系统建议您使用禁用功能。" okText="确定删除" />
|
<Inherit v-if="inheritDialogVisible" :row="inheritRow" :dialogVisible="inheritDialogVisible"
|
@close="inheritDialogVisible = false, inheritRow = {}" @confirm="inheritConfirm" />
|
</div>
|
</template>
|
|
<script>
|
import { getList, add, edit, delDept, roleList, updatePwd, changeStatus, typeList } from './service'
|
import AddEdit from './components/add-edit.vue'
|
import Disb from './components/disb.vue'
|
import ResetPassword from './components/reset-password.vue'
|
import Inherit from './components/inherit.vue'
|
export default {
|
name: 'User',
|
components: {
|
AddEdit,
|
Disb,
|
ResetPassword,
|
Inherit,
|
},
|
data() {
|
return {
|
dialogVisible: false,//新增
|
passwordVisible: false,//重置密码
|
dialogVisibleView: false,//查看
|
disbDialogVisible: false,//禁用
|
delShow: false,//删除
|
inheritDialogVisible: false,//账号继承
|
data: [],//列表数据
|
nickNameOrPhone: '',//人员搜索
|
roleId: [],//角色
|
status: '',//状态
|
roleList: [],//角色列表
|
deptTypeList: [],//类型列表
|
pagination: {
|
total: 10,//总条数
|
pageNum: 1,//当前页
|
pageSize: 10,//每页条数
|
},
|
row: {},//新增
|
rowView: {},//查看
|
disbRow: {},//禁用
|
delId: '',//删除
|
inheritRow: {},//账号继承
|
}
|
},
|
computed: {
|
height() {
|
return this.$baseTableHeight()
|
},
|
},
|
watch: {},
|
created() {
|
this.getRoleList()
|
this.getListData()
|
},
|
mounted() { },
|
methods: {
|
getTypeList() {
|
typeList().then((res) => {
|
this.deptTypeList = res.data.data
|
})
|
},
|
getRoleList() {
|
roleList().then((res) => {
|
this.roleList = res
|
})
|
},
|
delConfirm() {
|
delDept(this.delId).then(() => {
|
this.delShow = false
|
this.msgsuccess('删除成功')
|
this.getListData()
|
})
|
},
|
disbConfirm(form) {
|
changeStatus({ ...form, status: 1 }).then(() => {
|
this.disbDialogVisible = false
|
this.disbRow = {}
|
this.msgsuccess('禁用成功')
|
this.getListData()
|
})
|
},
|
confirm(form) {
|
if (form.userId) {
|
edit(form).then(() => {
|
this.row = {}
|
this.dialogVisible = false
|
this.msgsuccess('修改成功')
|
this.getListData()
|
})
|
} else {
|
add(form).then(() => {
|
this.row = {}
|
this.dialogVisible = false
|
this.msgsuccess('添加成功')
|
this.getListData()
|
})
|
}
|
},
|
passwordConfirm(form) {
|
updatePwd(form).then(() => {
|
this.row = {}
|
this.passwordVisible = false
|
this.msgsuccess('修改密码成功')
|
this.getListData()
|
})
|
},
|
detail(row) {
|
this.passwordVisible = true
|
this.row = row
|
},
|
edit(row) {
|
this.row = row
|
this.dialogVisible = true
|
},
|
inherit(row) {
|
this.inheritRow = row
|
this.inheritDialogVisible = true
|
},
|
updateStatus(row, type) {
|
if (type) {
|
changeStatus({ ...row, status: 0 }).then(() => {
|
this.msgsuccess('启用成功')
|
this.getListData()
|
})
|
} else {
|
this.disbRow = row
|
this.disbDialogVisible = true
|
}
|
},
|
inheritConfirm() {
|
},
|
del(row) {
|
this.delShow = true
|
this.delId = row.userId
|
},
|
async getListData() {
|
let obj = {
|
pageNum: this.pagination.pageNum,
|
pageSize: this.pagination.pageSize,
|
nickNameOrPhone: this.nickNameOrPhone,
|
roleIds: this.roleId,
|
status: this.status,
|
}
|
this.listLoading = true
|
const { records,total } = await getList(obj)
|
this.data = records
|
this.pagination.total = total
|
this.timeOutID = setTimeout(() => {
|
this.listLoading = false
|
}, 500)
|
},
|
reset() {
|
this.nickNameOrPhone = ''
|
this.roleId = []
|
this.status = ''
|
this.pagination.pageNum = 1
|
this.getListData()
|
},
|
onSubmit() {
|
this.pagination.pageNum = 1
|
this.getListData()
|
},
|
|
handleCurrentChange(e) {
|
this.pagination.pageNum = e
|
this.getListData()
|
},
|
handleSizeChange(e) {
|
this.pagination.pageSize = e
|
this.getListData()
|
},
|
},
|
}
|
</script>
|
<style scoped lang="less">
|
.list {
|
height: 100%;
|
}
|
|
.action-button {
|
margin-right: 8px;
|
}
|
|
.green {
|
background-color: green;
|
}
|
|
.red {
|
background-color: red;
|
}
|
|
.demo-form-inline {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.add_btn {
|
margin-bottom: 20px;
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
}
|
|
.status_class {
|
display: flex;
|
align-items: center;
|
|
div:nth-child(1) {
|
width: 9px;
|
height: 9px;
|
border-radius: 50%;
|
margin-right: 5px;
|
}
|
|
div:nth-child(2) {
|
margin-right: 8px;
|
}
|
}
|
</style>
|
