src/assets/styles/common.scss

@@ -1,8 +1,24 @@
 //公用样式文件
 
-//单行页面标题
-.page_title_single {
+//页面标题
+.page_title {
+	width: 100%;
+	display: flex;
+	border-bottom: 2px solid #ffeb9c;
+	.title {
+		height: 47px;
+		line-height: 47px;
+		font-size: 18px;
+		background-color: #ffeb9c;
+		padding: 0 10px;
+		border-radius: 5px 5px 0 0;
+		span {
+			margin-left: 5px;
+		}
+	}
 }
-//双行页面标题
-.page_title_double {
+
+//页面内容
+.page_content {
+	padding: 10px;
 }

src/layout/components/AppMain.vue

@@ -9,48 +9,48 @@
 </template>
 
 <script>
-	export default {
-		name: 'AppMain',
-		computed: {
-			cachedViews() {
-				return this.$store.state.tagsView.cachedViews
-			},
-			key() {
-				return this.$route.path
-			}
+export default {
+	name: 'AppMain',
+	computed: {
+		cachedViews() {
+			return this.$store.state.tagsView.cachedViews
+		},
+		key() {
+			return this.$route.path
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
+.app-main {
+	/* 50= navbar  50  */
+	min-height: calc(100vh - 50px);
+	width: 100%;
+	position: relative;
+}
+
+.fixed-header + .app-main {
+	padding-top: 50px;
+}
+
+.hasTagsView {
 	.app-main {
-		/* 50= navbar  50  */
-		min-height: calc(100vh - 50px);
-		width: 100%;
-		position: relative;
+		/* 84 = navbar + tags-view = 50 + 34 */
+		min-height: calc(100vh - 84px);
 	}
 
 	.fixed-header + .app-main {
-		padding-top: 50px;
-	}
-
-	.hasTagsView {
-		.app-main {
-			/* 84 = navbar + tags-view = 50 + 34 */
-			min-height: calc(100vh - 84px);
-		}
-
-		.fixed-header + .app-main {
-			padding-top: 84px;
-		}
+		padding-top: 84px;
 	}
+}
 </style>
 
 <style lang="scss">
-	// fix css style bug in open el-dialog
-	.el-popup-parent--hidden {
-		.fixed-header {
-			padding-right: 17px;
-		}
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+	.fixed-header {
+		padding-right: 17px;
 	}
+}
 </style>

src/layout/components/Sidebar.vue

@@ -34,6 +34,7 @@ export default {
 	},
 	methods: {
 		toIndex() {
+			if (this.$route.name === 'Index') return
 			this.active = 'index'
 			sessionStorage.setItem('sidebarActive', 'index')
 			this.$router.replace('/index')

src/views/system/dept/components/deptItem.vue

@@ -0,0 +1,163 @@
+<template>
+	<div class="ibox">
+		<el-popover placement="top" trigger="click">
+			<div class="floatdiv">
+				<template v-if="data.root"> 123 </template>
+				<template v-else>
+					<el-button size="mini" @click="updData('0', data)">添加</el-button>
+					<el-button size="mini" @click="updData('1', data)">修改</el-button>
+					<el-button size="mini" @click="delData(data)">删除</el-button>
+				</template>
+			</div>
+			<span class="title" ref="title" slot="reference" :class="{ shu: !data.children || !data.children }">{{ data.label }}</span>
+		</el-popover>
+		<div class="line" v-if="data.children && data.children.length != 0">
+			<div class="top" ref="top">
+				<div class="topline"></div>
+			</div>
+			<div class="center" ref="center"></div>
+			<div class="bottom" ref="bottom" v-for="i in point" :key="i + '' + Math.random() + '' + Math.random()" :style="{ left: i + 'px' }"></div>
+		</div>
+		<div class="inner">
+			<div class="innerbox" ref="box" :style="{ marginRight: mr + 'px' }" v-for="item in data.children" :key="item.id + 'a'">
+				<DeptItem :data="item" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'DeptItem',
+	props: {
+		data: Object
+	},
+	data() {
+		return {
+			point: [],
+			mr: 20
+		}
+	},
+	inject: ['updData', 'delData', 'resetDel'],
+	mounted() {
+		this.getPos()
+	},
+	methods: {
+		getPos() {
+			this.$nextTick(() => {
+				let box = this.$refs.box
+				if (!box || box.length == 0) return
+				let center = this.$refs.center
+				let top = this.$refs.top
+				let title = this.$refs.title
+				this.point = []
+				let centerWidth = box[0].offsetWidth / 2 + box[box.length - 1].offsetWidth / 2 + (box.length - 1) * this.mr
+				box.forEach((item, index) => {
+					if (index != 0 && index != box.length - 1) {
+						centerWidth += item.offsetWidth
+					}
+					this.point.push(item.offsetLeft + item.offsetWidth / 2)
+				})
+				if (box.length == 1) {
+					centerWidth = 1
+				}
+				center.style.width = centerWidth + 'px'
+				center.style.left = box[0].offsetWidth / 2 + 'px'
+				top.style.left = centerWidth / 2 + box[0].offsetWidth / 2 - 10 + 'px'
+				top.style.marginLeft = 0
+				let titleLeft = centerWidth / 2 + box[0].offsetWidth / 2 - title.offsetWidth / 2
+				titleLeft = titleLeft < 0 ? 0 : titleLeft
+				title.style.left = titleLeft + 'px'
+			})
+			if (this.$parent.$el.className == 'ibox') {
+				this.$parent.getPos()
+			}
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.ibox {
+	width: 100%;
+	position: relative;
+	display: inline-block;
+	font-size: 16px;
+}
+.ibox span.title {
+	display: inline-block;
+	width: auto;
+	height: 40px;
+	line-height: 40px;
+	padding: 0 10px;
+	background-color: #199ed8;
+	border-radius: 5px;
+	position: relative;
+	top: 0;
+	left: 0;
+	cursor: pointer;
+	user-select: none;
+	white-space: nowrap;
+	color: #fff;
+	margin: 0;
+}
+.ibox span.shu {
+	word-wrap: break-word;
+	word-break: break-all;
+	white-space: normal;
+	width: 16px;
+	height: auto;
+	line-height: 26px;
+	padding: 10px;
+	text-align: center;
+	box-sizing: content-box;
+}
+.ibox .inner {
+	width: 100%;
+	vertical-align: top;
+}
+.ibox .innerbox {
+	display: inline-block;
+	position: relative;
+	vertical-align: top;
+}
+.line {
+	position: relative;
+	width: 100%;
+	height: 61px;
+}
+.line .top {
+	position: relative;
+	width: 20px;
+	top: 0;
+}
+.line .top .topline {
+	position: absolute;
+	width: 1px;
+	height: 21px;
+	left: 50%;
+	transform: translateX(-50%);
+	background-color: #2538ff;
+}
+.line .center {
+	position: absolute;
+	top: 21px;
+	height: 1px;
+	background-color: #2538ff;
+}
+.line .bottom {
+	position: absolute;
+	height: 42px;
+	width: 1px;
+	background-color: #2538ff;
+	top: 22px;
+}
+.floatdiv {
+	white-space: nowrap;
+	text-align: center;
+	padding: 0;
+}
+.floatdiv button {
+	padding: 5px 10px;
+}
+</style>

src/views/system/dept/index.vue

@@ -1,280 +1,134 @@
 <template>
-	<div class="page-container">
-		<div class="search-container" v-show="showSearch">
-			<el-form :model="queryParams" ref="queryForm" :inline="true">
-				<el-form-item label="部门名称" prop="deptName">
-					<el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable size="small" @keyup.enter.native="handleQuery" />
-				</el-form-item>
-				<el-form-item label="状态" prop="status">
-					<el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
-						<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-					</el-select>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
-					<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
-				</el-form-item>
-			</el-form>
+	<div class="page_content">
+		<div class="page_title">
+			<div class="title">
+				<svg-icon className="documentation" iconClass="documentation" />
+				<span>公司部门</span>
+			</div>
 		</div>
-		<div class="content-container">
-			<div class="main">
-				<div class="table-nav">
-					<div class="tags">
-						<div class="tag">部门管理</div>
-					</div>
-					<div class="actions">
-						<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">添加</el-button>
-						<el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll" style="margin-right: 10px">展开/折叠</el-button>
-						<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-					</div>
+		<div class="page_main">
+			<div class="organi">
+				<div class="outer">
+					<DeptItem v-for="item in dataList" :data="item" :key="item.id" />
 				</div>
-				<el-table v-if="refreshTable" v-loading="loading" border :data="deptList" row-key="deptId" :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-					<el-table-column prop="deptName" label="部门名称"></el-table-column>
-					<el-table-column prop="orderNum" align="center" label="排序"></el-table-column>
-					<el-table-column prop="status" align="center" label="状态">
-						<template slot-scope="scope">
-							<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
-						</template>
-					</el-table-column>
-					<el-table-column label="创建时间" align="center" prop="createTime">
-						<template slot-scope="scope">
-							<span>{{ parseTime(scope.row.createTime) }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-						<template slot-scope="scope">
-							<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-							<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)">新增</el-button>
-							<el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
 			</div>
 		</div>
-
 		<!-- 添加或修改部门对话框 -->
-		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
+		<el-dialog :title="title" :visible.sync="show" width="600px" append-to-body @close="cancel">
+			<el-form ref="deptForm" :model="deptForm" :rules="deptFormRules" label-width="100px">
 				<el-row>
-					<el-col :span="24" v-if="form.parentId !== 0">
-						<el-form-item label="上级部门" prop="parentId">
-							<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+					<el-col :span="24">
+						<el-form-item label="上级部门">
+							<el-input v-model="deptForm.parentName" disabled />
 						</el-form-item>
 					</el-col>
-					<el-col :span="12">
+					<el-col :span="24">
 						<el-form-item label="部门名称" prop="deptName">
-							<el-input v-model="form.deptName" placeholder="请输入部门名称" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="12">
-						<el-form-item label="显示排序" prop="orderNum">
-							<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="12">
-						<el-form-item label="负责人" prop="leader">
-							<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="12">
-						<el-form-item label="联系电话" prop="phone">
-							<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="12">
-						<el-form-item label="邮箱" prop="email">
-							<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+							<el-input v-model="deptForm.deptName" placeholder="请输入部门名称" maxlength="20" show-word-limit />
 						</el-form-item>
 					</el-col>
-					<el-col :span="12">
-						<el-form-item label="部门状态">
-							<el-radio-group v-model="form.status">
-								<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-							</el-radio-group>
-						</el-form-item>
+					<el-col :span="24">
+						<el-form-item label="公司简称"> </el-form-item>
 					</el-col>
 				</el-row>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
 				<el-button size="small" @click="cancel">取 消</el-button>
-				<el-button size="small" type="primary" @click="submitForm">保 存</el-button>
+				<el-button size="small" type="primary" @click="sub">保 存</el-button>
 			</div>
 		</el-dialog>
 	</div>
 </template>
 
 <script>
-import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { treeselect, addDept } from '@/api/system/dept.js'
+import DeptItem from './components/deptItem.vue'
 
 export default {
-	name: 'Dept',
-	dicts: ['sys_normal_disable'],
-	components: { Treeselect },
+	components: { DeptItem },
 	data() {
 		return {
-			// 遮罩层
-			loading: true,
-			// 显示搜索条件
-			showSearch: true,
-			// 表格树数据
-			deptList: [],
-			// 部门树选项
-			deptOptions: [],
-			// 弹出层标题
+			//组织架构数据
+			dataList: [],
+			//弹窗显示
+			show: false,
+			//弹窗标题
 			title: '',
-			// 是否显示弹出层
-			open: false,
-			// 是否展开，默认全部展开
-			isExpandAll: true,
-			// 重新渲染表格状态
-			refreshTable: true,
-			// 查询参数
-			queryParams: {
-				deptName: undefined,
-				status: undefined
+			//弹窗表单
+			deptForm: {
+				//上级部门id
+				parentId: 0,
+				//上级部门名称
+				parentName: '',
+				//部门名称
+				deptName: ''
 			},
-			// 表单参数
-			form: {},
-			// 表单校验
-			rules: {
-				parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
-				deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
-				orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
-				email: [
-					{
-						type: 'email',
-						message: "'请输入正确的邮箱地址",
-						trigger: ['blur', 'change']
-					}
-				],
-				phone: [
-					{
-						pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-						message: '请输入正确的手机号码',
-						trigger: 'blur'
-					}
-				]
-			}
+			//表单验证
+			deptFormRules: {}
 		}
 	},
 	created() {
-		this.getList()
+		treeselect().then(res => {
+			if (res.code === 200) {
+				this.dataList = res.data.map(item => {
+					return {
+						...item,
+						root: true
+					}
+				})
+			}
+		})
+	},
+	provide() {
+		return {
+			updData: this.updData,
+			delData: this.delData,
+			resetDel: this.resetDel
+		}
 	},
 	methods: {
-		/** 查询部门列表 */
-		getList() {
-			this.loading = true
-			listDept(this.queryParams).then(response => {
-				this.deptList = this.handleTree(response.data, 'deptId')
-				this.loading = false
-			})
-		},
-		/** 转换部门数据结构 */
-		normalizer(node) {
-			if (node.children && !node.children.length) {
-				delete node.children
-			}
-			return {
-				id: node.deptId,
-				label: node.deptName,
-				children: node.children
-			}
-		},
-		// 取消按钮
+		//弹窗关闭
 		cancel() {
-			this.open = false
-			this.reset()
+			this.show = false
+			this.resetForm()
 		},
-		// 表单重置
-		reset() {
-			this.form = {
-				deptId: undefined,
-				parentId: undefined,
-				deptName: undefined,
-				orderNum: undefined,
-				leader: undefined,
-				phone: undefined,
-				email: undefined,
-				status: '0'
+		//表单重置
+		resetForm() {},
+		//弹窗提交
+		sub() {},
+		//编辑部门
+		updData(type, data) {
+			this.show = true
+			//添加
+			if (type == 0) {
+				this.title = '部门添加'
+				this.deptForm.parentId = data.id
+				this.deptForm.parentName = data.label
+			} else {
+				this.title = '部门修改'
 			}
-			this.resetForm('form')
-		},
-		/** 搜索按钮操作 */
-		handleQuery() {
-			this.getList()
-		},
-		/** 重置按钮操作 */
-		resetQuery() {
-			this.resetForm('queryForm')
-			this.handleQuery()
-		},
-		/** 新增按钮操作 */
-		handleAdd(row) {
-			this.reset()
-			if (row != undefined) {
-				this.form.parentId = row.deptId
-			}
-			this.open = true
-			this.title = '添加部门'
-			listDept().then(response => {
-				this.deptOptions = this.handleTree(response.data, 'deptId')
-			})
-		},
-		/** 展开/折叠操作 */
-		toggleExpandAll() {
-			this.refreshTable = false
-			this.isExpandAll = !this.isExpandAll
-			this.$nextTick(() => {
-				this.refreshTable = true
-			})
 		},
-		/** 修改按钮操作 */
-		handleUpdate(row) {
-			this.reset()
-			getDept(row.deptId).then(response => {
-				this.form = response.data
-				this.open = true
-				this.title = '修改部门'
-			})
-			listDeptExcludeChild(row.deptId).then(response => {
-				this.deptOptions = this.handleTree(response.data, 'deptId')
-			})
-		},
-		/** 提交按钮 */
-		submitForm: function () {
-			this.$refs['form'].validate(valid => {
-				if (valid) {
-					if (this.form.deptId != undefined) {
-						updateDept(this.form).then(response => {
-							this.$modal.msgSuccess('修改成功')
-							this.open = false
-							this.getList()
-						})
-					} else {
-						addDept(this.form).then(response => {
-							this.$modal.msgSuccess('新增成功')
-							this.open = false
-							this.getList()
-						})
-					}
-				}
-			})
-		},
-		/** 删除按钮操作 */
-		handleDelete(row) {
-			this.$modal
-				.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？')
-				.then(function () {
-					return delDept(row.deptId)
-				})
-				.then(() => {
-					this.getList()
-					this.$modal.msgSuccess('删除成功')
-				})
-				.catch(() => {})
-		}
+		delData() {},
+		resetDel() {}
 	}
 }
 </script>
+
+<style scoped lang="scss">
+::v-deep .org-chart-node-label {
+	background-color: #199ed8;
+	color: #fff;
+	border-radius: 5px;
+}
+.organi {
+	width: 100%;
+	height: 100%;
+	background-color: #fff;
+	overflow: auto;
+	padding: 30px;
+}
+.outer {
+	width: auto;
+	display: inline-block;
+}
+</style>