<template>
|
<div class="users-management-page subpages-containter-box">
|
<search-bar @search="onSearch" @reset="onReset">
|
<el-form :inline="true" class="search-form">
|
<el-form-item label="工号">
|
<el-input placeholder="请输入..." clearable class="default-form-width" v-model.trim="query.uLoginName"></el-input>
|
</el-form-item>
|
<el-form-item label="姓名">
|
<el-input placeholder="请输入..." clearable class="default-form-width" v-model.trim="query.uRealName"></el-input>
|
</el-form-item>
|
</el-form>
|
</search-bar>
|
|
<div class="table-header-row">
|
<el-button type="primary" @click="onNew"><el-icon class="btn-left-icon"><e-icon-plus /></el-icon>新建</el-button>
|
</div>
|
|
<el-table :data="list" border stripe>
|
<el-table-column width="50" label="序号" fixed>
|
<template #default="scope">{{(queried.page-1)*queried.pageSize+(scope.$index+1)}}</template>
|
</el-table-column>
|
<el-table-column prop="uLoginName" label="工号" min-width="120" />
|
<el-table-column prop="uRealName" label="姓名" min-width="120" />
|
<el-table-column prop="roleNamesStr" label="角色" min-width="120" />
|
<el-table-column prop="uPhone" label="电话" min-width="120" />
|
<el-table-column prop="uEmail" label="邮箱" min-width="150" />
|
<el-table-column prop="uCreateTime" label="创建时间" width="160" />
|
<el-table-column prop="uUpdateTime" label="修改时间" width="160" />
|
<el-table-column prop="CreateBy" label="创建人" width="100" />
|
<el-table-column prop="ModifyBy" label="修改人" width="100" />
|
<el-table-column label="是否启用" width="80" align="center">
|
<template #default="scope">
|
<el-switch :model-value="!scope.row.tdIsDelete" inactive-color="#eeeef0" @change="onChangeEnabled(scope.row,$event)" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="300" fixed="right" align="center">
|
<template #default="scope">
|
<el-button type="success" size="small" @click="onOpenModifyModal(scope.row)"><el-icon class="btn-left-icon"><e-icon-edit /></el-icon>编辑</el-button>
|
<el-button type="danger" size="small" @click="onCancel(scope.row.uID)"><el-icon class="btn-left-icon"><e-icon-delete /></el-icon>删除</el-button>
|
<el-button type="primary" size="small" @click="onResetPwd(scope.row)"><el-icon class="btn-left-icon"><e-icon-refresh /></el-icon>密码重置</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination-row">
|
<el-pagination :pager-count="5" layout="total, prev, pager, next, jumper" :total="total" @current-change="onPageList" />
|
</div>
|
|
<form-modal v-model:visible="formVisible" :type="formType" :user="actionUser" @submitCallback="onFormSubmitCallback" />
|
</div>
|
</template>
|
|
<script>
|
import SearchBar from '@/components/SearchBar.vue'
|
import FormModal from './compontents/FormModal.vue'
|
import {Plus,Edit,Delete,Refresh} from '@element-plus/icons'
|
import md5 from 'js-md5'
|
const defaultQuery = {
|
uRealName:'',
|
uLoginName:'',
|
uRealName_FilterMode:'1',
|
uLoginName_FilterMode:'1'
|
}
|
export default {
|
name:'usersManagementPage',
|
components:{SearchBar,FormModal,'e-icon-plus':Plus,'e-icon-edit':Edit,'e-icon-delete':Delete,'e-icon-refresh':Refresh},
|
data(){
|
return {
|
list:[],
|
total:100,
|
query:{...defaultQuery},
|
queried:{...this.$config.pagination},
|
actionUser:{},
|
formVisible:false,
|
formType:'',
|
resetPwdText:''
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
/* 页面初始化 */
|
init(){
|
this.newList()
|
},
|
/* 搜索按钮 */
|
onSearch(){
|
this.newList()
|
},
|
/* 重置按钮 */
|
onReset(){
|
this.query = {...defaultQuery}
|
this.newList()
|
},
|
/* 翻页功能 */
|
onPageList(page){
|
this.queried.page = page;
|
this.getList();
|
},
|
/* 表格刷新至首页 */
|
newList(needLoading=true){
|
this.queried = {...this.query,...this.$config.pagination}
|
this.getList(()=>{},needLoading)
|
},
|
/* 删除后的表格刷新 */
|
delRefresh(callback){
|
let len = this.list.length;
|
if (len===1 && this.queried.page>1) {
|
this.queried.page--;
|
}
|
this.getList(callback,false)
|
},
|
/* 更新数据表 */
|
getList(callback,needLoading=true){
|
if (needLoading) {
|
this.$loading();
|
}
|
this.$api.post('Get',this.queried,{block:'user'}).then((d)=>{
|
this.total = d.total;
|
this.list = d.list.map((currentItem)=>{
|
currentItem.roleNamesStr = (currentItem.RoleNames || []).join(',')
|
currentItem.uCreateTime = this.$utils.project.parseTimeStr(currentItem.uCreateTime)
|
currentItem.uUpdateTime = this.$utils.project.parseTimeStr(currentItem.uUpdateTime)
|
return currentItem
|
})
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(true)
|
}).catch((err)=>{
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(false)
|
})
|
},
|
onNew(){
|
this.formType = 'add';
|
this.formVisible = true;
|
},
|
onOpenModifyModal(obj){
|
this.actionUser = obj;
|
this.formType = 'modify';
|
this.formVisible = true;
|
},
|
/* 新增/编辑成功提交后的回调 */
|
onFormSubmitCallback(needLoading) {
|
if (this.formType==='add') {
|
this.newList(needLoading)
|
} else {
|
this.getList()
|
}
|
},
|
/* 删除按钮 */
|
onCancel(id){
|
this.$confirm('确定要删除该用户吗？<br />用户一旦删除，不可恢复！', '删除警示', {
|
dangerouslyUseHTMLString:true,
|
center:true
|
}).then(()=>{
|
this.dealCancel(id)
|
}).catch(()=>{});
|
},
|
/* 密码重置按钮 */
|
onResetPwd(obj){
|
this.resetPwdText = `是否对【${obj.uRealName}】恢复初始密码？`
|
this.$messageBox.confirm(this.resetPwdText,'密码重置').then(()=>{
|
this.dealPwdReset(obj.uID)
|
}).catch(()=>{})
|
},
|
/* 禁用启用开关 */
|
onChangeEnabled(row,val){
|
this.dealEnableDisable(row.uID,val,(f)=>{
|
if (f) {
|
row.tdIsDelete = !val;
|
}
|
})
|
},
|
/* 删除处理事件 */
|
dealCancel(id){
|
this.$loading();
|
this.$api.delete('Delete',{id},{block:'user'}).then(()=>{
|
this.delRefresh(()=>{
|
this.$loading().close();
|
})
|
}).catch((err)=>{
|
this.$loading().close();
|
})
|
},
|
/* 启用/禁用处理事件 */
|
dealEnableDisable(id,status,callback){
|
this.$loading();
|
this.$api.put('Enable',{},{block:'user'},{id,isEnabled:status}).then(()=>{
|
this.$loading().close();
|
this.$message.success('用户状态修改成功!')
|
callback(true)
|
}).catch((err)=>{
|
this.$loading().close();
|
callback(false)
|
})
|
},
|
dealPwdReset(id){
|
this.$loading();
|
let params = {
|
uID:id,
|
newPassWord:md5(this.$config.defaultPwd).toLocaleUpperCase()
|
}
|
this.$api.put('ResetPassword',{},{block:'user'},params).then(()=>{
|
this.$loading().close();
|
this.$message.success('重置密码成功!')
|
}).catch((err)=>{
|
this.$loading().close();
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
</style>
|
