|
|
|
@ -1,28 +1,27 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-row class="container-main" :gutter="20"> |
|
|
|
<div class="container-main" style="justify-content: flex-start;"> |
|
|
|
<!--侧边部门数据--> |
|
|
|
<el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4"> |
|
|
|
|
|
|
|
<div class="head-container" style="padding-left:0"> |
|
|
|
<div class="elect-cont-left"> |
|
|
|
<div class="head-container"> |
|
|
|
<el-input v-model="deptName" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" class="filter-item" @input="getDeptDatas" /> |
|
|
|
</div> |
|
|
|
<div class="container-left" style="min-height: calc(100vh - 262px)"> |
|
|
|
<div class="container-left"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<el-tree :data="deptDatas" :load="getDeptDatas" :props="defaultProps" :expand-on-click-node="false" lazy @node-click="handleNodeClick" /> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</div> |
|
|
|
<!--用户数据--> |
|
|
|
<el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20"> |
|
|
|
<div class="elect-cont-right"> |
|
|
|
<!--工具栏--> |
|
|
|
<div class="head-container" style="padding:20px 0"> |
|
|
|
<div class="head-container"> |
|
|
|
<div v-if="crud.props.searchToggle" class="head-search"> |
|
|
|
<!-- 搜索 --> |
|
|
|
<el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者邮箱搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|
|
|
<date-range-picker v-model="query.createTime" class="date-item" /> |
|
|
|
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery"> |
|
|
|
<i slot="prefix" class="iconfont icon-zhuangtai-fanbai" /> |
|
|
|
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
|
|
|
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" /> |
|
|
|
</el-select> |
|
|
|
<rrOperation /> |
|
|
|
@ -31,7 +30,7 @@ |
|
|
|
<el-button slot="right" icon="el-icon-refresh-left" size="mini" :disabled="!crud.selections.length" @click="handlePwdReset(crud.selections)">密码重置</el-button> |
|
|
|
</crudOperation> |
|
|
|
</div> |
|
|
|
<div class="container-right" style="min-height: calc(100vh - 312px);"> |
|
|
|
<div class="container-right"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<!--表单渲染--> |
|
|
|
@ -97,37 +96,37 @@ |
|
|
|
<!--表格渲染--> |
|
|
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="crud.selectionChangeHandler"> |
|
|
|
<el-table-column :selectable="checkboxT" type="selection" align="center" width="55" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" /> |
|
|
|
<el-table-column prop="gender" label="性别" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="电话" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="username" label="账号" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="nickName" label="用户名" /> |
|
|
|
<el-table-column prop="gender" label="性别" width="60" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="phone" label="电话" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="dept" label="部门"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.dept.name }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="状态" align="center" prop="enabled"> |
|
|
|
<el-table-column label="状态" align="center" prop="enabled" width="60"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-switch v-model="scope.row.enabled" :disabled="user.id === scope.row.id" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" /> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="createTime" width="145" label="创建日期"> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.createTime | parseTime }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-if="checkPer(['admin','user:edit','user:del'])" label="操作" width="120" align="center" fixed="right"> |
|
|
|
<!-- <el-table-column v-if="checkPer(['admin','user:edit','user:del'])" label="操作" width="120" align="center" fixed="right"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<udOperation :data="scope.row" :permission="permission" :disabled-dle="scope.row.id === user.id" /> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> --> |
|
|
|
</el-table> |
|
|
|
<!--分页组件--> |
|
|
|
<pagination /> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -141,7 +140,7 @@ import { getAllJob } from '@/api/system/job' |
|
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
|
import rrOperation from '@crud/RR.operation' |
|
|
|
import crudOperation from '@crud/CRUD.operation' |
|
|
|
import udOperation from '@crud/UD.operation' |
|
|
|
// import udOperation from '@crud/UD.operation' |
|
|
|
import pagination from '@crud/Pagination' |
|
|
|
import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
import Treeselect from '@riophae/vue-treeselect' |
|
|
|
@ -153,7 +152,7 @@ let userJobs = [] |
|
|
|
const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'true', roles: [], jobs: [], dept: { id: null }, phone: null } |
|
|
|
export default { |
|
|
|
name: 'User', |
|
|
|
components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker }, |
|
|
|
components: { Treeselect, crudOperation, rrOperation, pagination, DateRangePicker }, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }}) |
|
|
|
}, |
|
|
|
@ -465,11 +464,53 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "~@/assets/styles/mixin.scss"; |
|
|
|
@import "~@/assets/styles/variables.scss"; |
|
|
|
.elect-cont-left{ |
|
|
|
width: 265px; |
|
|
|
margin-right: 20px; |
|
|
|
@include bg_color; |
|
|
|
@include box_padding; |
|
|
|
.head-container{ |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
.container-left{ |
|
|
|
@include tree_height_min; |
|
|
|
} |
|
|
|
} |
|
|
|
.elect-cont-right{ |
|
|
|
// padding: 20px; |
|
|
|
@include bg_color; |
|
|
|
@include box_padding; |
|
|
|
.head-container{ |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
.container-right{ |
|
|
|
@include table_height_min; |
|
|
|
} |
|
|
|
} |
|
|
|
.hideSidebar{ |
|
|
|
// siderbar-收起 54 + 间距 60 + treeLeft 265 |
|
|
|
.elect-cont-right{ |
|
|
|
width: calc(100vw - 379px); |
|
|
|
} |
|
|
|
} |
|
|
|
.openSidebar{ |
|
|
|
// siderbar-展开 256 + 间距 60 + treeLeft 265 |
|
|
|
.elect-cont-right{ |
|
|
|
width: calc(100vw - 581px); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .vue-treeselect__control, |
|
|
|
::v-deep .vue-treeselect__placeholder, |
|
|
|
::v-deep .vue-treeselect__single-value { |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.icon-zhuangtai{ |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
</style> |
