mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 22:20:27 +08:00
545 lines
9.8 KiB
Vue
545 lines
9.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="system-user">
|
|||
|
|
<div class="pane">
|
|||
|
|
<!-- 组织架构 -->
|
|||
|
|
<div class="dept" :class="[isExpand ? '_expand' : '_collapse']">
|
|||
|
|
<cl-dept-tree
|
|||
|
|
@row-click="onDeptRowClick"
|
|||
|
|
@user-add="onDeptUserAdd"
|
|||
|
|
@list-change="onDeptListChange"
|
|||
|
|
></cl-dept-tree>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 成员列表 -->
|
|||
|
|
<div class="user">
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="icon" @click="deptExpand">
|
|||
|
|
<i class="el-icon-arrow-left" v-if="isExpand"></i>
|
|||
|
|
<i class="el-icon-arrow-right" v-else></i>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span>成员列表</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
|
|||
|
|
<el-row type="flex">
|
|||
|
|
<cl-refresh-btn></cl-refresh-btn>
|
|||
|
|
<cl-add-btn></cl-add-btn>
|
|||
|
|
<cl-multi-delete-btn></cl-multi-delete-btn>
|
|||
|
|
<el-button
|
|||
|
|
v-permission="$service.system.user.permission.move"
|
|||
|
|
size="mini"
|
|||
|
|
type="success"
|
|||
|
|
:disabled="selects.ids.length == 0"
|
|||
|
|
@click="toMove()"
|
|||
|
|
>转移</el-button
|
|||
|
|
>
|
|||
|
|
<cl-flex1></cl-flex1>
|
|||
|
|
<cl-search-key></cl-search-key>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row>
|
|||
|
|
<cl-table
|
|||
|
|
ref="table"
|
|||
|
|
v-bind="table"
|
|||
|
|
@selection-change="onSelectionChange"
|
|||
|
|
>
|
|||
|
|
<!-- 头像 -->
|
|||
|
|
<template #column-headImg="{ scope }">
|
|||
|
|
<cl-avatar
|
|||
|
|
shape="square"
|
|||
|
|
size="medium"
|
|||
|
|
:src="scope.row.headImg | default_avatar"
|
|||
|
|
:style="{ margin: 'auto' }"
|
|||
|
|
>
|
|||
|
|
</cl-avatar>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 权限 -->
|
|||
|
|
<template #column-roleName="{ scope }">
|
|||
|
|
<el-tag
|
|||
|
|
v-for="(item, index) in scope.row.roleNameList"
|
|||
|
|
:key="index"
|
|||
|
|
disable-transitions
|
|||
|
|
size="small"
|
|||
|
|
effect="dark"
|
|||
|
|
style="margin: 2px"
|
|||
|
|
>{{ item }}</el-tag
|
|||
|
|
>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 单个转移 -->
|
|||
|
|
<template #slot-move-btn="{ scope }">
|
|||
|
|
<el-button
|
|||
|
|
v-permission="$service.system.user.permission.move"
|
|||
|
|
type="text"
|
|||
|
|
size="mini"
|
|||
|
|
@click="toMove(scope.row)"
|
|||
|
|
>转移</el-button
|
|||
|
|
>
|
|||
|
|
</template>
|
|||
|
|
</cl-table>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row type="flex">
|
|||
|
|
<cl-flex1></cl-flex1>
|
|||
|
|
<cl-pagination></cl-pagination>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<cl-upsert
|
|||
|
|
ref="upsert"
|
|||
|
|
:items="upsert.items"
|
|||
|
|
:on-submit="onUpsertSubmit"
|
|||
|
|
@open="onUpsertOpen"
|
|||
|
|
></cl-upsert>
|
|||
|
|
</cl-crud>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 部门移动 -->
|
|||
|
|
<cl-dept-move ref="dept-move" @success="refresh({ page: 1 })"></cl-dept-move>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { isPc } from "cl-admin/utils";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isExpand: isPc(),
|
|||
|
|
selects: {
|
|||
|
|
dept: {},
|
|||
|
|
ids: []
|
|||
|
|
},
|
|||
|
|
dept: [],
|
|||
|
|
table: {
|
|||
|
|
props: {
|
|||
|
|
"default-sort": {
|
|||
|
|
prop: "createTime",
|
|||
|
|
order: "descending"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
columns: [
|
|||
|
|
{
|
|||
|
|
type: "selection",
|
|||
|
|
align: "center",
|
|||
|
|
width: "60"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "headImg",
|
|||
|
|
label: "头像",
|
|||
|
|
align: "center"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "name",
|
|||
|
|
label: "姓名",
|
|||
|
|
align: "center",
|
|||
|
|
"min-width": 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "username",
|
|||
|
|
label: "用户名",
|
|||
|
|
align: "center",
|
|||
|
|
"min-width": 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "nickName",
|
|||
|
|
label: "昵称",
|
|||
|
|
align: "center",
|
|||
|
|
"min-width": 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "departmentName",
|
|||
|
|
label: "部门名称",
|
|||
|
|
align: "center",
|
|||
|
|
"min-width": 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "roleName",
|
|||
|
|
label: "角色",
|
|||
|
|
"header-align": "center",
|
|||
|
|
"min-width": 200
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "phone",
|
|||
|
|
label: "手机号码",
|
|||
|
|
align: "center",
|
|||
|
|
"min-width": 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "remark",
|
|||
|
|
label: "备注",
|
|||
|
|
align: "center",
|
|||
|
|
"min-width": 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "status",
|
|||
|
|
label: "状态",
|
|||
|
|
align: "center",
|
|||
|
|
"min-width": 120,
|
|||
|
|
dict: [
|
|||
|
|
{
|
|||
|
|
label: "启用",
|
|||
|
|
value: 1,
|
|||
|
|
type: "success"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "禁用",
|
|||
|
|
value: 0,
|
|||
|
|
type: "danger"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "createTime",
|
|||
|
|
label: "创建时间",
|
|||
|
|
align: "center",
|
|||
|
|
sortable: "custom",
|
|||
|
|
"min-width": 150
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
align: "center",
|
|||
|
|
type: "op",
|
|||
|
|
buttons: ["slot-move-btn", "edit", "delete"],
|
|||
|
|
width: "160px"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
upsert: {
|
|||
|
|
items: [
|
|||
|
|
{
|
|||
|
|
prop: "headImg",
|
|||
|
|
label: "头像",
|
|||
|
|
span: 24,
|
|||
|
|
component: {
|
|||
|
|
name: "cl-upload",
|
|||
|
|
props: {
|
|||
|
|
text: "选择头像",
|
|||
|
|
icon: "el-icon-picture"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "name",
|
|||
|
|
label: "姓名",
|
|||
|
|
span: 24,
|
|||
|
|
component: {
|
|||
|
|
name: "el-input",
|
|||
|
|
attrs: {
|
|||
|
|
placeholder: "请填写姓名"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
required: true,
|
|||
|
|
message: "姓名不能为空"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "nickName",
|
|||
|
|
label: "昵称",
|
|||
|
|
span: 12,
|
|||
|
|
component: {
|
|||
|
|
name: "el-input",
|
|||
|
|
attrs: {
|
|||
|
|
placeholder: "请填写昵称"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
required: true,
|
|||
|
|
message: "昵称不能为空"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "username",
|
|||
|
|
label: "用户名",
|
|||
|
|
span: 12,
|
|||
|
|
component: {
|
|||
|
|
name: "el-input",
|
|||
|
|
attrs: {
|
|||
|
|
placeholder: "请填写用户名"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
rules: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: "用户名不能为空"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "password",
|
|||
|
|
label: "密码",
|
|||
|
|
span: 12,
|
|||
|
|
hidden: true,
|
|||
|
|
component: {
|
|||
|
|
name: "el-input",
|
|||
|
|
attrs: {
|
|||
|
|
placeholder: "请填写密码",
|
|||
|
|
type: "password"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
rules: [
|
|||
|
|
{
|
|||
|
|
min: 6,
|
|||
|
|
max: 16,
|
|||
|
|
message: "密码长度在 6 到 16 个字符"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "roleIdList",
|
|||
|
|
label: "角色",
|
|||
|
|
span: 24,
|
|||
|
|
value: [],
|
|||
|
|
component: {
|
|||
|
|
name: "cl-role-select",
|
|||
|
|
props: {
|
|||
|
|
props: {
|
|||
|
|
"multiple-limit": 3
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
required: true,
|
|||
|
|
message: "角色不能为空"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "phone",
|
|||
|
|
label: "手机号码",
|
|||
|
|
span: 12,
|
|||
|
|
component: {
|
|||
|
|
name: "el-input",
|
|||
|
|
attrs: {
|
|||
|
|
placeholder: "请填写手机号码"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "email",
|
|||
|
|
label: "邮箱",
|
|||
|
|
span: 12,
|
|||
|
|
component: {
|
|||
|
|
name: "el-input",
|
|||
|
|
attrs: {
|
|||
|
|
placeholder: "请填写邮箱"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "remark",
|
|||
|
|
label: "备注",
|
|||
|
|
span: 24,
|
|||
|
|
component: {
|
|||
|
|
name: "el-input",
|
|||
|
|
props: {
|
|||
|
|
type: "textarea",
|
|||
|
|
rows: 4
|
|||
|
|
},
|
|||
|
|
attrs: {
|
|||
|
|
placeholder: "请填写备注"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "status",
|
|||
|
|
label: "状态",
|
|||
|
|
value: 1,
|
|||
|
|
component: {
|
|||
|
|
name: "el-radio-group",
|
|||
|
|
options: [
|
|||
|
|
{
|
|||
|
|
label: "开启",
|
|||
|
|
value: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "关闭",
|
|||
|
|
value: 0
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "tips",
|
|||
|
|
hidden: true,
|
|||
|
|
component: (
|
|||
|
|
<div>
|
|||
|
|
<i class="el-icon-warning"></i>
|
|||
|
|
<span style="margin-left: 6px">新增用户默认密码为：123456</span>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
refresh(params) {
|
|||
|
|
this.$refs["crud"].refresh(params);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad({ ctx, app }) {
|
|||
|
|
ctx.service(this.$service.system.user).done();
|
|||
|
|
app.refresh();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async onRefresh(params, { next, render }) {
|
|||
|
|
let { list } = await next(params);
|
|||
|
|
|
|||
|
|
list.map((e) => {
|
|||
|
|
if (e.roleName) {
|
|||
|
|
this.$set(e, "roleNameList", e.roleName.split(","));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
e.status = Boolean(e.status);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
render(list);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onUpsertOpen(isEdit) {
|
|||
|
|
this.$refs["upsert"].toggleItem("password", isEdit);
|
|||
|
|
this.$refs["upsert"].toggleItem("tips", !isEdit);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onUpsertSubmit(isEdit, data, { next }) {
|
|||
|
|
let departmentId = data.departmentId;
|
|||
|
|
|
|||
|
|
if (!departmentId) {
|
|||
|
|
departmentId = this.selects.dept.id;
|
|||
|
|
|
|||
|
|
if (!departmentId) {
|
|||
|
|
departmentId = this.dept[0].id;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
next({
|
|||
|
|
...data,
|
|||
|
|
departmentId
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onSelectionChange(selection) {
|
|||
|
|
this.selects.ids = selection.map((e) => e.id);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onDeptRowClick({ item, ids }) {
|
|||
|
|
this.selects.dept = item;
|
|||
|
|
|
|||
|
|
this.refresh({
|
|||
|
|
page: 1,
|
|||
|
|
departmentIds: ids
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!isPc()) {
|
|||
|
|
this.isExpand = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onDeptUserAdd(item) {
|
|||
|
|
this.$refs["crud"].rowAppend({
|
|||
|
|
departmentId: item.id
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onDeptListChange(list) {
|
|||
|
|
this.dept = list;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
deptExpand() {
|
|||
|
|
this.isExpand = !this.isExpand;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async toMove(e) {
|
|||
|
|
let ids = [];
|
|||
|
|
|
|||
|
|
if (!e) {
|
|||
|
|
ids = this.selects.ids;
|
|||
|
|
} else {
|
|||
|
|
ids = [e.id];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$refs["dept-move"].toMove(ids);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.system-user {
|
|||
|
|
.pane {
|
|||
|
|
display: flex;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dept {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 300px;
|
|||
|
|
max-width: calc(100% - 50px);
|
|||
|
|
background-color: #fff;
|
|||
|
|
transition: width 0.3s;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
&._collapse {
|
|||
|
|
margin-right: 0;
|
|||
|
|
width: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user {
|
|||
|
|
width: calc(100% - 310px);
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 40px;
|
|||
|
|
position: relative;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
font-size: 14px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: $color-main;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background-color: #fff;
|
|||
|
|
height: 40px;
|
|||
|
|
width: 80px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dept,
|
|||
|
|
.user {
|
|||
|
|
overflow: hidden;
|
|||
|
|
.container {
|
|||
|
|
height: calc(100% - 40px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media only screen and (max-width: 768px) {
|
|||
|
|
.dept {
|
|||
|
|
width: calc(100% - 100px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|