| ¶Ô±ÈÐÂÎļþ | 
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <TableLayout :permissions="['system:user:query']"> | 
|---|
|  |  |  | <!-- æç´¢è¡¨å --> | 
|---|
|  |  |  | <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="80px" inline> | 
|---|
|  |  |  | <el-form-item label="ç¨æ·å" prop="username"> | 
|---|
|  |  |  | <el-input v-model="searchForm.username" v-trim placeholder="请è¾å
¥ç¨æ·å" @keypress.enter.native="search"/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="å§å" prop="realname"> | 
|---|
|  |  |  | <el-input v-model="searchForm.realname" v-trim placeholder="请è¾å
¥å§å" @keypress.enter.native="search"/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="ææºå·ç " prop="mobile"> | 
|---|
|  |  |  | <el-input v-model="searchForm.mobile" v-trim placeholder="请è¾å
¥ææºå·ç " @keypress.enter.native="search"/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <section> | 
|---|
|  |  |  | <el-button type="primary" icon="el-icon-search" @click="search">æç´¢</el-button> | 
|---|
|  |  |  | <el-button @click="reset">éç½®</el-button> | 
|---|
|  |  |  | </section> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | <!-- è¡¨æ ¼åå页 --> | 
|---|
|  |  |  | <template v-slot:table-wrap> | 
|---|
|  |  |  | <ul class="toolbar" v-permissions="['system:user:create', 'system:user:delete']"> | 
|---|
|  |  |  | <li v-permissions="['system:user:create']"><el-button icon="el-icon-plus" type="primary" @click="$refs.operaUserWindow.open('æ°å»ºç¨æ·')">æ°å»º</el-button></li> | 
|---|
|  |  |  | <li v-permissions="['system:user:delete']"><el-button icon="el-icon-delete" @click="deleteByIdInBatch">å é¤</el-button></li> | 
|---|
|  |  |  | </ul> | 
|---|
|  |  |  | <el-table | 
|---|
|  |  |  | :height="tableHeightNew" | 
|---|
|  |  |  | v-loading="isWorking.search" | 
|---|
|  |  |  | :data="tableData.list" | 
|---|
|  |  |  | :default-sort = "{prop: 'createTime', order: 'descending'}" | 
|---|
|  |  |  | stripe | 
|---|
|  |  |  | @selection-change="handleSelectionChange" | 
|---|
|  |  |  | @sort-change="handleSortChange" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-table-column type="selection" width="55"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="avatar" label="头å" width="80px" class-name="table-column-avatar" fixed="left"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | <img :src="row.avatar == null ? '/avatar/man.png' : row.avatar"> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="realname" label="å§å" min-width="100px" fixed="left"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="username" label="ç¨æ·å" min-width="120px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="empNo" label="å·¥å·" sortable="custom" sort-by="EMP_NO" min-width="80px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="sex" label="æ§å«" sortable="custom" sort-by="SEX" min-width="80px"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | {{row.sex | sex}} | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="mobile" label="ææºå·ç " min-width="100px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="email" label="é®ç®±" min-width="180px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="birthday" label="çæ¥" sortable="custom" sort-by="BIRTHDAY" min-width="100px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="roles" label="è§è²" min-width="160px" class-name="table-column-strings"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | <ul> | 
|---|
|  |  |  | <li v-for="role in row.roles" :key="role.id">{{role.name}}</li> | 
|---|
|  |  |  | </ul> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="createUser" label="å建人" min-width="100px"> | 
|---|
|  |  |  | <template slot-scope="{row}">{{row.createUserInfo == null ? '' : row.createUserInfo.username}}</template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="createTime" label="å建æ¶é´" sortable="custom" sort-by="CREATE_TIME" min-width="140px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="updateUser" label="æ´æ°äºº" min-width="100px"> | 
|---|
|  |  |  | <template slot-scope="{row}">{{row.updateUserInfo == null ? '' : row.updateUserInfo.username}}</template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="updateTime" label="æ´æ°æ¶é´" sortable="custom" sort-by="UPDATE_TIME" min-width="140px"></el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | v-if="containPermissions(['system:user:update', 'system:user:createUserRole', 'system:user:resetPwd', 'system:user:delete'])" | 
|---|
|  |  |  | label="æä½" | 
|---|
|  |  |  | width="270" | 
|---|
|  |  |  | fixed="right" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template v-if="isAdmin || (row.id !== userInfo.id && row.roles.findIndex(r => r.code === adminCode) === -1)" slot-scope="{row}"> | 
|---|
|  |  |  | <el-button type="text" icon="el-icon-edit" @click="$refs.operaUserWindow.open('ç¼è¾ç¨æ·', row)" v-permissions="['system:user:update']">ç¼è¾</el-button> | 
|---|
|  |  |  | <el-button type="text" icon="el-icon-s-custom" @click="$refs.roleConfigWindow.open(row)" v-permissions="['system:user:createUserRole']">é
ç½®è§è²</el-button> | 
|---|
|  |  |  | <el-button type="text" @click="$refs.resetPwdWindow.open(row)" v-permissions="['system:user:resetPwd']">éç½®å¯ç </el-button> | 
|---|
|  |  |  | <el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['system:user:delete']">å é¤</el-button> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | <pagination | 
|---|
|  |  |  | @size-change="handleSizeChange" | 
|---|
|  |  |  | @current-change="handlePageChange" | 
|---|
|  |  |  | :pagination="tableData.pagination" | 
|---|
|  |  |  | ></pagination> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <!-- æ°å»º/修湠--> | 
|---|
|  |  |  | <OperaUserWindow ref="operaUserWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/> | 
|---|
|  |  |  | <!-- é
ç½®è§è² --> | 
|---|
|  |  |  | <RoleConfigWindow ref="roleConfigWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/> | 
|---|
|  |  |  | <!-- éç½®å¯ç  --> | 
|---|
|  |  |  | <ResetPwdWindow ref="resetPwdWindow"/> | 
|---|
|  |  |  | </TableLayout> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import Pagination from '@/components/common/Pagination' | 
|---|
|  |  |  | import TableLayout from '@/layouts/TableLayout' | 
|---|
|  |  |  | import BaseTable from '@/components/base/BaseTable' | 
|---|
|  |  |  | import OperaUserWindow from '@/components/system/user/OperaUserWindow' | 
|---|
|  |  |  | import RoleConfigWindow from '@/components/system/user/RoleConfigWindow' | 
|---|
|  |  |  | import ResetPwdWindow from '@/components/system/user/ResetPwdWindow' | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'SystemUser', | 
|---|
|  |  |  | extends: BaseTable, | 
|---|
|  |  |  | components: { ResetPwdWindow, RoleConfigWindow, OperaUserWindow, TableLayout, Pagination }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | // æç´¢ | 
|---|
|  |  |  | searchForm: { | 
|---|
|  |  |  | username: '', // åå | 
|---|
|  |  |  | realname: '', // å§å | 
|---|
|  |  |  | mobile: '' // ææºå·ç  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created () { | 
|---|
|  |  |  | this.config({ | 
|---|
|  |  |  | module: 'ç¨æ·', | 
|---|
|  |  |  | api: '/system/user', | 
|---|
|  |  |  | 'field.main': 'realname', | 
|---|
|  |  |  | sorts: [{ | 
|---|
|  |  |  | property: 'CREATE_TIME', | 
|---|
|  |  |  | direction: 'DESC' | 
|---|
|  |  |  | }] | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.search() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style scoped lang="scss"> | 
|---|
|  |  |  | @import "@/assets/style/variables.scss"; | 
|---|
|  |  |  | // å表头åå¤ç | 
|---|
|  |  |  | .table-column-avatar { | 
|---|
|  |  |  | img { | 
|---|
|  |  |  | width: 48px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|