realty/virgo.wzfrontend/workark/src/views/work/organization/user.vue

<template>
	<div class="hui-flex hui-content work-user">
		<div class="hui-content-title">
			<div class="hui-title-item active">成员管理</div>
		</div>
		<div class="hui-flex-box yui-tree-box">
			<div class="hui-left-tree">
				<div class="hui-left-tree-title">
					<div class="tree-logo">
						<el-image v-if="organization.logoUrl" :src="organization.logoUrl" fit="cover"></el-image>
						<div class="el-image" v-else>
							<div class="image-slot"><i class="el-icon-picture-outline"></i></div>
						</div>
					</div>
					<span class="hui-left-tree-sub hui-ellipsis">{{organization.name}}</span>
				</div>
				<div class="hui-left-tree-content">
					<el-collapse>
						<el-collapse-item v-for="item in treeData" :key="item.id" :name="item.id">
							<template slot="title">
								<div class="collapse-title" @click="changeCollapse(item)">
									<i class="iconfont huifont-bumen"></i>
									<span class="el-collapse-name">{{item.name}}</span>
								</div>
							</template>
							<div>
								<el-tree :data="item.children" :props="defaultProps" :expand-on-click-node="false"
									@node-click="selectPart">
								</el-tree>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>
			<div class="hui-tree-content">
				<div class="hui-flex hui-table">
					<div class="hui-content-insert">
						<el-button v-permission="'/work/organization/user/add'" type="primary" size="small"
							@click="insertUser" :disabled="!part.id">
							新增成员
						</el-button>
					</div>
					<div class="hui-flex-box">
						<el-table :data="tableData" row-key="id" height="100%">
							<el-table-column label="序号" width="50">
								<template slot-scope="scope">
									<div style="text-align: center;">{{scope.$index + 1}}</div>
								</template>
							</el-table-column>
							<el-table-column label="姓名">
								<template slot-scope="scope">
									<div class="hui-table-user">
										<div class="hui-table-avatar">
											<avatar :user="scope.row"></avatar>
										</div>
										<div>{{scope.row.name}}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="电话" prop="phone"></el-table-column>
							<el-table-column label="部门">
								<template slot-scope="scope">
									<span>{{part.name}}</span>
								</template>
							</el-table-column>
							<el-table-column label="权限">
								<template slot-scope="scope">
									<el-button v-permission="'/work/organization/user/set'" size="mini" type="primary"
										@click="updateUser(scope.row,2,'设置权限')">
										设置
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="150" align="center">
								<template slot-scope="scope">
									<div class="hui-table-operation">
										<span v-permission="'/work/organization/user/detail'" class="table-operation"
											@click="lookUser(scope.row)">
											详情
										</span>
										<span v-permission="'/work/organization/user/update'" class="table-operation"
											v-if="!scope.row.projectFlowId" @click="updateUser(scope.row,3,'修改用户')">
											编辑
										</span>
										<span v-permission="'/work/organization/user/delete'" class="table-operation"
											v-if="!scope.row.projectFlowId" @click="deleteUser(scope.row)">
											删除
										</span>
									</div>
								</template>
							</el-table-column>
							<template slot="empty">
								<el-empty description="当前部门没有直属成员"></el-empty>
							</template>
						</el-table>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :close-on-click-modal="false" :title="title" :visible.sync="visible" width="900px"
			:append-to-body="true">
			<edit v-if="visible && type === 1" :part="part" @callback="callback"></edit>
			<role v-if="visible && type === 2" :user="user" @callback="callback"></role>
		</el-dialog>
		<el-drawer title="用户详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<detail v-if="drawer" :user="user"></detail>
		</el-drawer>
	</div>
</template>

<script>
	import {
		getPartList,
		getUserListByPart,
		deleteUser
	} from '@/api/organization'
	import role from '@/components/work/organization/user/role'
	import detail from '@/components/work/organization/user/detail'
	import edit from '@/components/work/organization/user/edit'
	export default {
		data() {
			return {
				treeData: [],
				organization: {},
				project: {},
				tableData: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				part: {},
				visible: false,
				user: {},
				drawer: false,
				type: 1,
				title: '',
				oldCollapse: []
			}
		},
		mounted() {
			this.organization = this.$store.getters.organization;
			this.project = this.$store.getters.project;
			let logo = !this.organization.logo ? {} : JSON.parse(this.organization.logo);
			this.organization['logoUrl'] = logo.url;
			this.init()
		},
		methods: {
			init() {
				if (!this.auth('/work/organization/user/list')) return;
				getPartList(this.organization.id, this.project.id).then(res => {
					if (res.state) {
						this.treeData = res.data;
					}
				})
			},
			changeCollapse(part) {
				setTimeout(() => {
					this.selectPart(part)
				}, 300)
			},
			selectPart(part) {
				this.part = part;
				getUserListByPart({
					projectId: this.project.id,
					organizationId: this.organization.id,
					partId: part.id
				}).then(
					res => {
						if (res.state) {
							this.tableData = res.data;
						}
					})
			},
			insertUser() {
				this.type = 1;
				this.title = '新增成员';
				this.visible = true;
			},
			updateUser(user, type, title) {
				this.user = user;
				this.type = type;
				this.title = title;
				this.visible = true;
			},
			lookUser(user) {
				this.user = user;
				this.user['partName'] = this.part.name;
				this.drawer = true;
			},
			deleteUser(user) {
				this.$confirm('确定要删除该员工?', () => {
					deleteUser(this.organization.id, user.id).then(res => {
						if (res.state) {
							this.selectPart(this.part);
							this.$message.success('操作成功');
						}
					})
				});
			},
			callback(type) {
				this.visible = false;
				if (type === 'init') this.selectPart(this.part);
			}
		},
		components: {
			edit,
			role,
			detail
		}
	}
</script>

<style lang="scss">
	.work-user {
		.yui-tree-box {
			background: transparent;

			.hui-left-tree {
				border-right: 1px solid $--border-color-base;
			}

			.hui-tree-content {
				padding: 0;
			}
		}

		.hui-left-tree-title {
			.tree-logo {
				width: 24px;
				height: 24px;
				border-radius: 4px;
				overflow: hidden;


				.el-image {
					width: 100%;
					height: 100%;

					.image-slot {
						width: 100%;
						height: 100%;
						text-align: center;
						line-height: 24px;
					}
				}
			}

			.hui-left-tree-sub {
				font-weight: 400;
			}
		}
	}
</style>