|
|
|
@ -1,22 +1,22 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<el-card v-loading="config.operating"> |
|
|
|
<list-page :data="listPageConfig"> |
|
|
|
<search-form> |
|
|
|
<template v-slot:searchForm> |
|
|
|
<search-form-item label="用户名"> |
|
|
|
<el-form-item label="用户名"> |
|
|
|
<el-input v-model="searchForm.loginName" clearable maxlength="20"/> |
|
|
|
<el-input v-model="searchForm.loginName" clearable maxlength="20"/> |
|
|
|
</search-form-item> |
|
|
|
</el-form-item> |
|
|
|
<search-form-item label="昵 称"> |
|
|
|
<el-form-item label="昵 称"> |
|
|
|
<el-input v-model="searchForm.nickName" clearable maxlength="100"/> |
|
|
|
<el-input v-model="searchForm.nickName" clearable maxlength="100"/> |
|
|
|
</search-form-item> |
|
|
|
</el-form-item> |
|
|
|
<search-form-item label="角 色"> |
|
|
|
<el-form-item label="角 色"> |
|
|
|
<role-selector v-model="searchForm.role"/> |
|
|
|
<role-selector v-model="searchForm.role"/> |
|
|
|
</search-form-item> |
|
|
|
</el-form-item> |
|
|
|
<search-form-item label="状 态"> |
|
|
|
<el-form-item label="状 态"> |
|
|
|
<el-select v-model="searchForm.enable" clearable @clear="searchForm.enable = null"> |
|
|
|
<el-select v-model="searchForm.enable" clearable @clear="searchForm.enable = null"> |
|
|
|
<el-option :value="true" label="启用"/> |
|
|
|
<el-option :value="true" label="启用"/> |
|
|
|
<el-option :value="false" label="禁用"/> |
|
|
|
<el-option :value="false" label="禁用"/> |
|
|
|
</el-select> |
|
|
|
</el-select> |
|
|
|
</search-form-item> |
|
|
|
</el-form-item> |
|
|
|
<search-form-item label="创建时间"> |
|
|
|
<el-form-item label="创建时间"> |
|
|
|
<el-date-picker |
|
|
|
<el-date-picker |
|
|
|
v-model="temp.ctime" |
|
|
|
v-model="temp.ctime" |
|
|
|
format="yyyy-MM-dd" |
|
|
|
format="yyyy-MM-dd" |
|
|
|
@ -24,70 +24,54 @@ |
|
|
|
type="daterange" |
|
|
|
type="daterange" |
|
|
|
value-format="timestamp" |
|
|
|
value-format="timestamp" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</search-form-item> |
|
|
|
</el-form-item> |
|
|
|
</search-form> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<el-row class="button-group"> |
|
|
|
<template v-slot:tableColumn> |
|
|
|
<el-button icon="el-icon-search" size="small" type="primary" @click="search">查 询</el-button> |
|
|
|
<el-table-column align="center" label="#" type="index" width="80"/> |
|
|
|
<el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button> |
|
|
|
<el-table-column align="center" label="头像" width="100"> |
|
|
|
<el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button> |
|
|
|
<img |
|
|
|
<el-button v-if="canResetPwd" icon="el-icon-edit" size="small" type="dashed" plain @click="resetPwd">重置密码 |
|
|
|
slot-scope="{row}" |
|
|
|
</el-button> |
|
|
|
v-if="row.avatar" |
|
|
|
<el-button v-if="canDel" icon="el-icon-delete" size="small" type="danger" @click="del">删 除</el-button> |
|
|
|
:src="row.avatar" |
|
|
|
<el-button v-if="canKick" icon="el-icon-warning-outline" size="small" type="danger" @click="kick">踢 出 |
|
|
|
class="table-image" |
|
|
|
</el-button> |
|
|
|
@click.stop="() => previewAvatar(row.avatar)" |
|
|
|
</el-row> |
|
|
|
> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
<el-row v-loading="config.loading" class="table-container"> |
|
|
|
<el-table-column align="center" label="登录名" prop="loginName" show-overflow-tooltip/> |
|
|
|
<abstract-table :data="tableData" @row-click="rowClick"> |
|
|
|
<el-table-column align="center" label="昵称" prop="nickName" show-overflow-tooltip/> |
|
|
|
<el-table-column align="center" label="#" type="index" width="80"/> |
|
|
|
<el-table-column align="center" label="角 色" show-overflow-tooltip> |
|
|
|
<el-table-column align="center" label="头像" width="100"> |
|
|
|
<template v-slot="{row}"> |
|
|
|
<img |
|
|
|
{{ row.admin === true ? '超级管理员' : row.roleName }} |
|
|
|
slot-scope="{row}" |
|
|
|
</template> |
|
|
|
v-if="row.avatar" |
|
|
|
</el-table-column> |
|
|
|
:src="row.avatar" |
|
|
|
<el-table-column align="center" label="部 门" prop="deptName" show-overflow-tooltip/> |
|
|
|
class="table-image" |
|
|
|
<el-table-column align="center" label="创建时间" width="150"> |
|
|
|
@click.stop="() => previewAvatar(row.avatar)" |
|
|
|
<template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template> |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column align="center" label="在线情况" width="120"> |
|
|
|
<el-table-column align="center" label="登录名" prop="loginName" show-overflow-tooltip/> |
|
|
|
<template v-slot="{row}"> |
|
|
|
<el-table-column align="center" label="昵称" prop="nickName" show-overflow-tooltip/> |
|
|
|
<span :class="row.online ? 'success' : 'error'" class="dot"/> |
|
|
|
<el-table-column align="center" label="角 色" show-overflow-tooltip> |
|
|
|
<span>{{ row.online ? '在线' : '离线' }}</span> |
|
|
|
<template v-slot="{row}"> |
|
|
|
</template> |
|
|
|
{{ row.admin === true ? '超级管理员' : row.roleName }} |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
<el-table-column align="center" label="状 态" width="120"> |
|
|
|
</el-table-column> |
|
|
|
<template v-slot="{row}"> |
|
|
|
<el-table-column align="center" label="部 门" prop="deptName" show-overflow-tooltip/> |
|
|
|
<span :class="row.enable ? 'success' : 'error'" class="dot"/> |
|
|
|
<el-table-column align="center" label="创建时间" width="150"> |
|
|
|
<span>{{ row.enable ? '启用' : '禁用' }}</span> |
|
|
|
<template v-slot="{row}">{{ row.ctime | timestamp2Date }}</template> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column align="center" label="在线情况" width="120"> |
|
|
|
</template> |
|
|
|
<template v-slot="{row}"> |
|
|
|
|
|
|
|
<span :class="row.online ? 'success' : 'error'" class="dot"/> |
|
|
|
|
|
|
|
<span>{{ row.online ? '在线' : '离线' }}</span> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column align="center" label="状 态" width="120"> |
|
|
|
|
|
|
|
<template v-slot="{row}"> |
|
|
|
|
|
|
|
<span :class="row.enable ? 'success' : 'error'" class="dot"/> |
|
|
|
|
|
|
|
<span>{{ row.enable ? '启用' : '禁用' }}</span> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
</abstract-table> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<abstract-pagination :model="searchForm" @current-change="pageChange"/> |
|
|
|
|
|
|
|
</el-row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/> |
|
|
|
<edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/> |
|
|
|
</el-card> |
|
|
|
</list-page> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import tableMixin from '@/mixin/tablePageMixin' |
|
|
|
import tableMixin from '@/mixin/tablePageMixin' |
|
|
|
|
|
|
|
import ListPage from '@/view/app/common/ListPage' |
|
|
|
import EditDialog from './component/EditDialog' |
|
|
|
import EditDialog from './component/EditDialog' |
|
|
|
import RoleSelector from './component/RoleSelector' |
|
|
|
import RoleSelector from './component/RoleSelector' |
|
|
|
import SearchForm from "@/component/form/Search" |
|
|
|
|
|
|
|
import SearchFormItem from "@/component/form/Search/item" |
|
|
|
|
|
|
|
import {search, add, update, del, kick, resetPwd} from "@/api/system/user" |
|
|
|
import {search, add, update, del, kick, resetPwd} from "@/api/system/user" |
|
|
|
import {isEmpty} from '@/util' |
|
|
|
import {isEmpty} from '@/util' |
|
|
|
import {wic} from "@/util/auth" |
|
|
|
import {wic} from "@/util/auth" |
|
|
|
@ -99,7 +83,7 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
mixins: [tableMixin], |
|
|
|
mixins: [tableMixin], |
|
|
|
|
|
|
|
|
|
|
|
components: {EditDialog, RoleSelector, SearchForm, SearchFormItem}, |
|
|
|
components: {ListPage, EditDialog, RoleSelector}, |
|
|
|
|
|
|
|
|
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
@ -114,7 +98,36 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
computed: wic({add, update, del, kick, resetPwd}), |
|
|
|
computed: { |
|
|
|
|
|
|
|
...wic({add, update, del, kick, resetPwd}), |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
listPageConfig() { |
|
|
|
|
|
|
|
return { |
|
|
|
|
|
|
|
pageLoading: this.config.operating, |
|
|
|
|
|
|
|
buttons: [ |
|
|
|
|
|
|
|
this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'}, |
|
|
|
|
|
|
|
{icon: 'el-icon-view', e: this.see, content: '查 看'}, |
|
|
|
|
|
|
|
this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'}, |
|
|
|
|
|
|
|
this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'}, |
|
|
|
|
|
|
|
this.canResetPwd && {icon: 'el-icon-delete', e: this.resetPwd, content: '重置密码'}, |
|
|
|
|
|
|
|
this.canKick && {icon: 'el-icon-delete', e: this.kick, content: '踢 出'} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
dataLoading: this.config.loading, |
|
|
|
|
|
|
|
search: { |
|
|
|
|
|
|
|
props: {model: this.searchForm}, |
|
|
|
|
|
|
|
on: {search: this.search} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
table: { |
|
|
|
|
|
|
|
props: {data: this.tableData}, |
|
|
|
|
|
|
|
on: {'row-click': this.rowClick} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
pagination: { |
|
|
|
|
|
|
|
props: {model: this.searchForm}, |
|
|
|
|
|
|
|
on: {'current-change': this.pageChange} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
mergeSearchForm() { |
|
|
|
mergeSearchForm() { |
|
|
|
@ -145,6 +158,12 @@ export default { |
|
|
|
this.editDialog = true |
|
|
|
this.editDialog = true |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
see() { |
|
|
|
|
|
|
|
if (isEmpty(this.row)) return elError('请选择要查看的用户') |
|
|
|
|
|
|
|
this.type = 'see' |
|
|
|
|
|
|
|
this.editDialog = true |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
edit() { |
|
|
|
edit() { |
|
|
|
if (isEmpty(this.row)) return elError('请选择要编辑的用户') |
|
|
|
if (isEmpty(this.row)) return elError('请选择要编辑的用户') |
|
|
|
this.type = 'edit' |
|
|
|
this.type = 'edit' |
|
|
|
|