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>
|