代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>1. 组织架构树形结构布局 | 人资项目</title>
<meta name="generator" content="VuePress 1.8.2">
<meta name="description" content="人力资源管理系统项目">
<link rel="preload" href="/hrsass-notes/assets/css/0.styles.a2812fe6.css" as="style"><link rel="preload" href="/hrsass-notes/assets/js/app.6c8c6ef7.js" as="script"><link rel="preload" href="/hrsass-notes/assets/js/2.dbebf407.js" as="script"><link rel="preload" href="/hrsass-notes/assets/js/8.562a2120.js" as="script"><link rel="prefetch" href="/hrsass-notes/assets/js/10.a57b780c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/11.dc45fce4.js"><link rel="prefetch" href="/hrsass-notes/assets/js/12.45e48562.js"><link rel="prefetch" href="/hrsass-notes/assets/js/13.95efdd8f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/14.7dd970c2.js"><link rel="prefetch" href="/hrsass-notes/assets/js/15.cb4a760f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/16.104f1088.js"><link rel="prefetch" href="/hrsass-notes/assets/js/17.4082264f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/18.ea0e5a1a.js"><link rel="prefetch" href="/hrsass-notes/assets/js/19.44df7a6c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/20.2da2450e.js"><link rel="prefetch" href="/hrsass-notes/assets/js/21.2b218055.js"><link rel="prefetch" href="/hrsass-notes/assets/js/22.ebaa787f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/3.dd9ee1b1.js"><link rel="prefetch" href="/hrsass-notes/assets/js/4.04f228d0.js"><link rel="prefetch" href="/hrsass-notes/assets/js/5.dc6fc8bc.js"><link rel="prefetch" href="/hrsass-notes/assets/js/6.08bd0e1c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/7.aad1ab06.js"><link rel="prefetch" href="/hrsass-notes/assets/js/9.c7557c6f.js">
<link rel="stylesheet" href="/hrsass-notes/assets/css/0.styles.a2812fe6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/hrsass-notes/" class="home-link router-link-active"><img src="/hrsass-notes/logo.png" alt="人资项目" class="logo"> <span class="site-name can-hide">人资项目</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
预览地址
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="课程内容" class="dropdown-title"><span class="title">课程内容</span> <span class="arrow down"></span></button> <button type="button" aria-label="课程内容" class="mobile-dropdown-title"><span class="title">课程内容</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/hrsass-notes/01-vuex基础.html" class="nav-link">
01-vuex基础
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/02-基础环境搭建.html" class="nav-link">
02-基础环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/03-登录模块.html" class="nav-link">
03-登录模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/04-主页模块.html" class="nav-link">
04-主页模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/05-路由和页面.html" class="nav-link">
05-路由和页面
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/06-组织架构.html" class="nav-link">
06-组织架构
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/07-公司和角色.html" class="nav-link">
07-公司和角色
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/08-员工管理.html" class="nav-link">
08-员工管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/09-权限设计和管理.html" class="nav-link">
09-权限设计和管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/10-其他模块集成.html" class="nav-link">
10-其他模块集成
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/11-主页审批-图表.html" class="nav-link">
11-主页审批-图表
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/12-多语言tab页全屏主题.html" class="nav-link">
12-多语言tab页全屏主题
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/13-打包上线.html" class="nav-link">
13-打包上线
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/Element表单校验补充.html" class="nav-link">
Element表单校验补充
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="核心生态" class="dropdown-title"><span class="title">核心生态</span> <span class="arrow down"></span></button> <button type="button" aria-label="核心生态" class="mobile-dropdown-title"><span class="title">核心生态</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
VueRouter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vuex
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Axios
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
ElementUI
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="相关插件" class="dropdown-title"><span class="title">相关插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="相关插件" class="mobile-dropdown-title"><span class="title">相关插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-i18n
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/vue-print-nb" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-print-nb
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/screenfull" target="_blank" rel="noopener noreferrer" class="nav-link external">
screenfull
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/nprogress" target="_blank" rel="noopener noreferrer" class="nav-link external">
nprogress
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/echarts" target="_blank" rel="noopener noreferrer" class="nav-link external">
echarts
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/xlsx" target="_blank" rel="noopener noreferrer" class="nav-link external">
xlsx
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/cos-js-sdk-v5" target="_blank" rel="noopener noreferrer" class="nav-link external">
cos-js-sdk-v5
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
预览地址
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="课程内容" class="dropdown-title"><span class="title">课程内容</span> <span class="arrow down"></span></button> <button type="button" aria-label="课程内容" class="mobile-dropdown-title"><span class="title">课程内容</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/hrsass-notes/01-vuex基础.html" class="nav-link">
01-vuex基础
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/02-基础环境搭建.html" class="nav-link">
02-基础环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/03-登录模块.html" class="nav-link">
03-登录模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/04-主页模块.html" class="nav-link">
04-主页模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/05-路由和页面.html" class="nav-link">
05-路由和页面
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/06-组织架构.html" class="nav-link">
06-组织架构
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/07-公司和角色.html" class="nav-link">
07-公司和角色
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/08-员工管理.html" class="nav-link">
08-员工管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/09-权限设计和管理.html" class="nav-link">
09-权限设计和管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/10-其他模块集成.html" class="nav-link">
10-其他模块集成
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/11-主页审批-图表.html" class="nav-link">
11-主页审批-图表
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/12-多语言tab页全屏主题.html" class="nav-link">
12-多语言tab页全屏主题
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/13-打包上线.html" class="nav-link">
13-打包上线
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/Element表单校验补充.html" class="nav-link">
Element表单校验补充
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="核心生态" class="dropdown-title"><span class="title">核心生态</span> <span class="arrow down"></span></button> <button type="button" aria-label="核心生态" class="mobile-dropdown-title"><span class="title">核心生态</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
VueRouter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vuex
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Axios
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
ElementUI
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="相关插件" class="dropdown-title"><span class="title">相关插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="相关插件" class="mobile-dropdown-title"><span class="title">相关插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-i18n
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/vue-print-nb" target="_blank" rel="noopener noreferrer" class="nav-link external">
vue-print-nb
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/screenfull" target="_blank" rel="noopener noreferrer" class="nav-link external">
screenfull
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/nprogress" target="_blank" rel="noopener noreferrer" class="nav-link external">
nprogress
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/echarts" target="_blank" rel="noopener noreferrer" class="nav-link external">
echarts
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/xlsx" target="_blank" rel="noopener noreferrer" class="nav-link external">
xlsx
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/cos-js-sdk-v5" target="_blank" rel="noopener noreferrer" class="nav-link external">
cos-js-sdk-v5
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>1. 组织架构树形结构布局</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_1-组织架构树形结构布局" class="sidebar-link">1. 组织架构树形结构布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_1-1-认识组织架构" class="sidebar-link">1.1 认识组织架构</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_1-2-实现组织架构的头部内容" class="sidebar-link">1.2 实现组织架构的头部内容</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_1-3-树形组件认识" class="sidebar-link">1.3 树形组件认识</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_1-4-实现树形的静态组织架构" class="sidebar-link">1.4 实现树形的静态组织架构</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_2-将树形的操作内容单独抽提成组件" class="sidebar-link">2. 将树形的操作内容单独抽提成组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_2-1-封装单独的树操作栏组件" class="sidebar-link">2.1 封装单独的树操作栏组件</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_2-2-在组织架构中应用操作栏组件" class="sidebar-link">2.2 在组织架构中应用操作栏组件</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_3-获取组织架构数据-并进行树形处理" class="sidebar-link">3. 获取组织架构数据，并进行树形处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_3-1-封装api接口-获取组织架构数据" class="sidebar-link">3.1 封装API接口，获取组织架构数据</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_3-2-将数组数据转化成树形结构" class="sidebar-link">3.2 将数组数据转化成树形结构</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_4-删除部门功能实现" class="sidebar-link">4. 删除部门功能实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_4-1-封装删除接口-注册下拉菜单事件" class="sidebar-link">4.1 封装删除接口，注册下拉菜单事件</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_4-2-调用删除接口-通知父组件更新数据" class="sidebar-link">4.2 调用删除接口，通知父组件更新数据</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_5-新增部门功能-建立组件" class="sidebar-link">5. 新增部门功能-建立组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_5-1-封装新增接口-新建组件中的弹层结构" class="sidebar-link">5.1 封装新增接口，新建组件中的弹层结构</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_5-2-点击新增子部门显示弹层组件" class="sidebar-link">5.2 点击新增子部门显示弹层组件</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_6-完成新增部门的规则校验" class="sidebar-link">6. 完成新增部门的规则校验</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_6-1-完成新增表单的基本校验条件" class="sidebar-link">6.1 完成新增表单的基本校验条件</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_6-2-配置新增表单的基本校验规则" class="sidebar-link">6.2 配置新增表单的基本校验规则</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_6-3-部门名称和部门编码的自定义校验" class="sidebar-link">6.3 部门名称和部门编码的自定义校验</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_6-4-处理首部内容的pid数据" class="sidebar-link">6.4 处理首部内容的pid数据</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_7-新增部门功能-部门负责人数据" class="sidebar-link">7. 新增部门功能-部门负责人数据</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_8-新增功能-提交-取消-关闭" class="sidebar-link">8. 新增功能-提交-取消-关闭</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_8-1-校验通过-调用新增接口" class="sidebar-link">8.1 校验通过，调用新增接口</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_8-2-利用sync修饰符关闭新增弹层" class="sidebar-link">8.2 利用sync修饰符关闭新增弹层</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_8-3-取消时重置数据和校验" class="sidebar-link">8.3 取消时重置数据和校验</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_9-编辑部门功能实现数据回写" class="sidebar-link">9. 编辑部门功能实现数据回写</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_9-1-点击编辑弹出层-记录当前节点" class="sidebar-link">9.1 点击编辑弹出层，记录当前节点</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_9-2-父组件调用子组件的获取详情方法" class="sidebar-link">9.2 父组件调用子组件的获取详情方法</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_9-3-根据计算属性显示控制标题" class="sidebar-link">9.3 根据计算属性显示控制标题</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_10-同时支持编辑和新增场景" class="sidebar-link">10. 同时支持编辑和新增场景</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_10-1-封装编辑接口-保存区分场景" class="sidebar-link">10.1 封装编辑接口，保存区分场景</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_10-2-校验规则支持编辑场景下的校验" class="sidebar-link">10.2 校验规则支持编辑场景下的校验</a></li></ul></li><li><a href="/hrsass-notes/06-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html#_11-给数据获取添加加载进度条" class="sidebar-link">11. 给数据获取添加加载进度条</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-组织架构树形结构布局"><a href="#_1-组织架构树形结构布局" class="header-anchor">#</a> 1. 组织架构树形结构布局</h2> <p><strong><code>目标</code></strong> ：使用element-UI组件布局组织架构的基本布局</p> <h3 id="_1-1-认识组织架构"><a href="#_1-1-认识组织架构" class="header-anchor">#</a> 1.1 认识组织架构</h3> <p><a href="/hrsass-notes/[http:/czpm.itcast.cn/ihrm/#g=1&p=组织架构](http:/czpm.itcast.cn/ihrm/#g=1&p=组织架构)">组织架构产品prd</a></p> <p><img src="/hrsass-notes/assets/img/image-20200828105046683.28fd1c86.png" alt="image-20200828105046683"></p> <blockquote><p>一个企业的组织架构是该企业的灵魂，组织架构多常采用树形金字塔式结构，本章节，我们布局出页面的基本结构</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200720010954202.fad57a62.png" alt="image-20200720010954202"></p> <h3 id="_1-2-实现组织架构的头部内容"><a href="#_1-2-实现组织架构的头部内容" class="header-anchor">#</a> 1.2 实现组织架构的头部内容</h3> <p>首先实现头部的结构，采用element的<strong>行列布局</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token comment"><!-- 实现页面的基本布局 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-card<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 用了一个行列布局 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>space-between<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">height</span><span class="token punctuation">:</span> 40px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>江苏传智播客教育科技股份有限公司<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 两个内容 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>负责人<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 下拉菜单 element --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>
操作<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el-icon-arrow-down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 下拉菜单 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-menu</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span><span class="token punctuation">></span></span>添加子部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 下面就是树形控件内容了 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-card</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p><strong>样式</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector"><style scoped>
.tree-card</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 30px 140px<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><img src="/hrsass-notes/assets/img/image-20200720180221662.b44f87eb.png" alt="image-20200720180221662"></p> <h3 id="_1-3-树形组件认识"><a href="#_1-3-树形组件认识" class="header-anchor">#</a> 1.3 树形组件认识</h3> <p>接下来，实现树形的结构，采用element的**<a href="https://element.eleme.cn/#/zh-CN/component/tree" target="_blank" rel="noopener noreferrer">tree组件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>**， 如图效果</p> <p><img src="/hrsass-notes/assets/img/image-20200828105634138.0358b499.png" alt="image-20200828105634138"></p> <blockquote><p>树形组件属性</p></blockquote> <table><thead><tr><th style="text-align:left;">参数</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">可选值</th> <th style="text-align:left;">默认值</th></tr></thead> <tbody><tr><td style="text-align:left;">default-expand-all</td> <td style="text-align:left;">是否默认展开所有节点</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">—</td> <td style="text-align:left;">—</td></tr> <tr><td style="text-align:left;">data</td> <td style="text-align:left;">展示数据</td> <td style="text-align:left;">array</td> <td style="text-align:left;">—</td> <td style="text-align:left;">—</td></tr> <tr><td style="text-align:left;">node-key</td> <td style="text-align:left;">每个树节点用来作为唯一标识的属性，整棵树应该是唯一的</td> <td style="text-align:left;">String</td> <td style="text-align:left;">—</td> <td style="text-align:left;">—</td></tr> <tr><td style="text-align:left;">props</td> <td style="text-align:left;">配置选项，具体看下表</td> <td style="text-align:left;">object</td> <td style="text-align:left;">—</td> <td style="text-align:left;">—</td></tr></tbody></table> <p><strong>props属性</strong></p> <table><thead><tr><th style="text-align:left;">参数</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">可选值</th> <th style="text-align:left;">默认值</th></tr></thead> <tbody><tr><td style="text-align:left;">label</td> <td style="text-align:left;">指定节点标签为节点对象的某个属性值</td> <td style="text-align:left;">string, function(data, node)</td> <td style="text-align:left;">—</td> <td style="text-align:left;">—</td></tr> <tr><td style="text-align:left;">children</td> <td style="text-align:left;">指定子树为节点对象的某个属性值</td> <td style="text-align:left;">string</td> <td style="text-align:left;">—</td> <td style="text-align:left;">—</td></tr> <tr><td style="text-align:left;">disabled</td> <td style="text-align:left;">指定节点选择框是否禁用为节点对象的某个属性值</td> <td style="text-align:left;">boolean, function(data, node)</td> <td style="text-align:left;">—</td> <td style="text-align:left;">—</td></tr> <tr><td style="text-align:left;">isLeaf</td> <td style="text-align:left;">指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效</td> <td style="text-align:left;">boolean, function(data, node)</td> <td style="text-align:left;">—</td> <td style="text-align:left;">—</td></tr></tbody></table> <p><strong>data</strong>是组成树形数据的关键，如下的数据便能构建树形数据</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '一级 <span class="token number">1</span>'<span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '二级 <span class="token number">1</span><span class="token number">-1</span>'<span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '三级 <span class="token number">1</span><span class="token number">-1</span><span class="token number">-1</span>'
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
label<span class="token operator">:</span> '一级 <span class="token number">2</span>'<span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '二级 <span class="token number">2</span><span class="token number">-1</span>'<span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '三级 <span class="token number">2</span><span class="token number">-1</span><span class="token number">-1</span>'
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
label<span class="token operator">:</span> '二级 <span class="token number">2</span><span class="token number">-2</span>'<span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '三级 <span class="token number">2</span><span class="token number">-2</span><span class="token number">-1</span>'
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
label<span class="token operator">:</span> '一级 <span class="token number">3</span>'<span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '二级 <span class="token number">3</span><span class="token number">-1</span>'<span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '三级 <span class="token number">3</span><span class="token number">-1</span><span class="token number">-1</span>'
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
label<span class="token operator">:</span> '二级 <span class="token number">3</span><span class="token number">-2</span>'<span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> '三级 <span class="token number">3</span><span class="token number">-2</span><span class="token number">-1</span>'
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBYAAACoCAYAAABUrW28AAAYAUlEQVR4nO3dbWzd130f8K8flDpyHHexXN1LObKTqK5d1xYfZCdphgyYl9lSxEkgthRrPQeqJFMu+aLp0LyYKI+TqK1NVgTtyFq0pDpNm21BC0LCVSU5XbogaJEq4pMaeImbNLXlmvcKdoDIaWg7Ss29uLSeTMrkFR+tz+cNxT/Puef89e5+8Tu/c9XY2NhYAAAAAGpw9XxvAAAAAFi8BAsAAABAzQQLAAAAQM0ECwAAAEDNBAsAAABAzQQLAAAAQM0ECwAAAEDNBAsAAABAzQQLAAAAQM0ECwAAAEDNBAsAAABAzQQLAAAAQM0ECwAAAEDNBAsAAABAza6dzuDRV8/M1j4AAACABWTpdUumNE7FAgAAAFAzwQIAAABQM8ECAAAAUDPBAgAAAFAzwQIAAABQM8ECAAAAUDPBAgAAAFCzKzZYqBzpStvOp1KZ740AAADAInbtfG9gfgyndKiS+kceSCHVkGHXoUtFDIU0P9aRB5fP1f4AAABgcbgig4Xh/fsy3LglPaurvxfWdqRn7XD2tu1LHunO1tXnxlZDh0IK0wwVXjmxLzueSB7q2ZL6mds6AAAALChX3lGIE/uy94Xm7Nhcn6SSozvbs+vIZNUK1cqGwvr10woHXv7mF/Pf9g3nlRnYLgAAACxkV1bFwqmnsuuJSpof25JCkuH9XSmdKqS+bpLxJ/oznPpsXVuY2ue/VsnxP9mXL369kjMztWcAAABYwK6oYKEyeDyVVFLa2Z7S+LP6RzrGjz5UqxaG+4eT1ePVDAeHU1jfMeVqheE/7srnB5N33/GJ/Mr7vpbPH5n5dwAAAICFZBaChR/m2adP5vs/fn3yIde8M4UPrMqK62d+9Uup9lJIkmo/hcr6jnP9FE6dqkYLg/0Z3lyf+lTy/KmkcqgrbYfG56/vyI5LVC8seWchv/jJR/OJ+27K9498bXZfBgAAABaAWQgWbshtt70nP/rbFzM6YbZwbW5c+b7phQqnnsqunaXLvhqy/pHubF1dydGd+zK8vHmSkGA4pSOV1K+tz9ae7gvWL9Rd+kjEXb/ckbsuc48AAACwmMzOUYjri7lj5av55rM/vKjXwFVZuvy23H7TNdP7vOUPZEfPAzOytWpfhfps7aleNXlW5flUUkjz+kJKhw5leO252xyGD5VSWd58wW0RAAAAwCz2WLjmpvdl1SvfyTOnXskbhQtLblyRO25ZOltLTsFwjg9Wf+5taz/7tP6R7jSPVJIUUli7Ps3Hu8arFgrJqadSGkzqH7koiAAAAABmt3nju255f1a++kyePf2TXL305qxa9Z5Ms1Zhhp13vOEiw/2VZPm9KaSQ+g31KT2xL0cbtyS9qhUAAABgMlfP7sdfk5tX3ZbCjT+dlbcX867ZXWyaqlULbTufSmW8kqFw7+pqVcLqLdnaWElpZ/U6yuZW1QoAAAAwkTm4bnJp3rtq5ewvM1Un9qXtieEkhTQ/1p2ty5PKka4Mpz5bJ2rmuPze1C+f810CAADAojAHwcLCUTnSlV3H782Oni3nKhBOPZW9hyoprH+jWWMlR3d2pXQqqX9kS/LEvuxqez5be841cwQAAACqrqhgobC2Iz1rz38ynL07qz0UdqwtnFfNUH8uSOjpzvD+9uxta09hfcckV1QCAADAlemqsbGxsakOHn31zFsPWkxO7Evbwfdmx2MPpDAeKkwaHpx6Krt2llJp3JKezWoXAAAAeHtbet2SKY27soMFAAAAYEJTDRZm+VYIAAAA4O1MsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywMOOGs7etPXtPzPc+AAAAYPZdO98beLupHDmU4eXN2bE6qYYM+zJ8qQmNW9KzuX5uNgcAAAAzTLCQJKeeyq6dpVSmPbGQ5sc68uDyc5+z91DS/NgDKSRJ6rO1pzuVI13Zdfze7Dj7PHkjdKjUFSb43Et4vZKjv92V4/Ud2bF2mnOTvHJiX3Y8kTzUsyXiDAAAAC6XYCFJlj+QHT0PXOaHVHK0t5TCI93VoOHEvrQ9kWzt2ZKJvv5XjhzKcOqzdTrhwJl/yFd+/3dT+oekUEMq8PI3v5j/vm84r4gUAAAAmCGChRkyvL8rpRVb0rM61QqIJ4aTxuYUTk00upLh45UU1k+1auBMXv72X+Tzf1jKMy/XsLnXKjn+J/vyxa9XcqaG6QAAADAZwcKMGM7xwSTZl7bB8UfLm7Njc/XoQyVJTh3P8KkHxqsZDqV0ahrVCqf+Ir/7P0qpLCnkX/za/Tn9+1+c1rGN4T/uyucHk3ff8Yn8yvu+ls8fmcZkAAAAuIRFFiz8MM8+fTLf//Hrkw+55p0pfGBVVlw/d7t6o5dCkmo/hUOFbD2vn0JlpBoDHB+s5MG1hfHfK9nb1n7e/EtVL1ybm+5qziceeiA/9+7h7J3m7pa8s5Bf/OSj+cR9N+X7R742zdkAAAAwuUUWLNyQ2257T370ty9mdMJs4drcuPJ9cxwqnOfEvuw6VEn9Ix0ThgSVQ4cyvHZL6td2pGdt9dnw/vbsfeG9E/ZhOGv5/fm1X6t9W3f9ckfuqn06AAAATOrq+d7AtF1fzB0rb8iSN/3hqixdfltuv+maedhUzvZVKKzvyNbV5/+hksoLSRqb07x8OKUjlQvmlAaT+g0PXDpYAAAAgAVqkVUsVF1z0/uy6pXv5JlTr+SNwoUlN67IHbcsnbc9VQaPV/seHOpK26Hxh8ubs+Ox5Xn+VFK4d3UeXPN8Sk+MVy0kGT5USmV580VBBAAAACweizJYSJJ33fL+rHz1mTx7+ie5eunNWbXqPZmnWoUkSeG84w0XOPVUKkkKdYVk9fo0L+/K3v3D6VnTn72DSf0jM1GtMJy9bfsyfMGzt+rbAAAAAJdv8R2FOOua3LzqthRu/OmsvL2Yd833ds5TOdKVtrb27D3xRiVDfe5dnSSFPNjanMLgvrQ9MZw0blGtAAAAwKK2aCsWqpbmvatWzvcmxlVydGdXSqeSNG5JT099kuHsfaKSwvqJKwfq18xUPcG5WykAAABgLi3yYGGhqB5FyCPd6TmvAmF4/74Mpz5b144fdjgxXqmwvDlb7z2evU+0Z9f6juxYq3UjAAAAi9MVHyxUjnRl16HKWw+8hML6juy4qGKgcqRrvIfCltSfV81QOBskPJCexqeya2dX2g7phwAAAMDidNXY2NjYVAePvnpmNvfyNlINEp7f0J2tq98IFSYPD4b3t2fvYCHNj3XkweVzvlkAAAB4k6XXLZnSOMECAAAA8CZTDRYW8a0QAAAAwHwTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1u2psbGxsvjcBAAAALE4qFgAAAICaCRYAAACAmgkWAAAAgJoJFgAAAICaCRYAAACAmgkWAAAAgJoJFgAAAICaCRYWkZFSZzZ1HM7IfG8EAAAAxl073xt4eyun1NGZvnINU4sbsrtrXerOPhhK34Fymtqqz0ZKndl+4FIfXExLV2eaizWsDQAAAFN01djY2Nh8b4K3NvB4a7qzLU8+2nDe06F0b96TtPWmvfHc02roUEj7/m1pmsYao4N78ps9ya9Oc16S5PVySrs689eNndldQ5pxWWsDAAAwbxyFWAwG96T7hQ3Z/WhDqlUQrdlemqxaoVrZULdxw7S+oJ8+8YV0Pj6U0Vr2d+b5HP2dz6TvZC2TL3NtAAAA5pWjEAtd+XC291TS0rUtdUkGHu9MX7mYphWTjB88loE0pH2qVQOvlfPX/7M3f/CX5ZyZ9ubO5PT/+/P07juYb52e9uTLXBsAAICFQMXCAjfS/42MpJy+jtZs2tya7v6kqa0z7Y3ngoOBY0Pj/yqn1Dc0rWqFgT/oTO9flrP05/99Wqd7hKH85/nM7xzMt0aLuf/XH572EYbLWhsAAIAFQcXCAlfX3Jknm5M3+imUN3ae66dQLqecJP3VKoWmVPJcORk50JlNB8bnb7x0z4MlS4v56Jb2PPThZXmx9NVp7m5Jlt29IQ9tWpc7bxxK93RnX9baAAAALASChUWhnFLHngwUN0wSEgylr1ROU3ND2vf3jk85nO0dB1NccelKgHs+2Zl7at1W8WP51K/XOvky1wYAAGBBECzMumqlwcC05jRccKNDta9CQ9r3n3/9ZJLyyYykmJaNhfQdOJiB5vPmHDiYkeKGtDUGAAAAZo1gYdadV0VQk6F8vb/6s3tz69mnTW29aXmhkqSQuuYNaTnWOV61UEzKh9PXnzS1XRREAAAAwAwTLCx4kwcTA8fKSfG+FFNMU0tD+np6U1rTmvTMXLXCSKkz2w9ceLXlW/VtOGeiao0LqzEAAABY3NwKsahUqxY2dRzOyHglQ90HG6pVCY3b0r6mnL6O6nWULaoVAAAAmAMqFhaDwT3Z1DOUpJiWrt60F6uVBANpSPtElQPF+9I0Q7c3nruVohaXewwEAACAhU6wsMCNlDqz/dh92b1/27kKhPLh9Bwop25j6/iRgnJKHZ3pKydNbduSnj3ZvvmkIwcAAADMOsHCAvfmioGhdHdUeyjsbi6eV81wXu+C/b0ZeLw13Ztbp9EPAQAAAKbvqrGxsbH53sTbUy3XTF5sgkaHg3uyqW9ldnetS914qDBpeFA+nO0dBzOyZluefLThsnYCAAAAExEsAAAAADVzKwQAAABQM8ECAAAAUDPBAgAAAFAzwQIAAABQM8ECAAAAUDPBAgAAAFAzwQIAAABQM8ECAAAAUDPBAgAAAFAzwQIAAABQM8ECAAAAUDPBAgAAAFAzwQIAAABQM8ECAAAAUDPBAgAAAFCzKzZYGCl1ZlPH4YzM90YAAABgEbt2vjcwP4bSd6CcprZ1qUs1ZNh+oHyJ8cW0dHWmuThX+wMAAIDF4YoMFgYe35OBNdvyZGP197rmzjzZPJTuzXuStt60N54bWw0dCqmbSqhw+tspPfm/c/Tb5YyeSfJTy3LP2v+QX/34Hbnxiq0NAQAA4O1s9r/ujr6a0VlfZBoG96T7hQ3Z/WhDknJKHa3ZXpqsWqFa2VC3cUOa3upzR4fS/djn0vft5M6PP5zWRx5Oy13J3xz4XP5T79DC+j8AAACAGTL7wcKpv8/Q34zk5VlfaArKh7O9p5KW8SMQA493pq9cTHHFJOMHj2UgDWmZwhmI5/7sTzPwj8U07+hMe/NH8qEPfiTNbbuz/V8vy2j/n6Z0ckbfBAAAABaEOSnQ/8kPyznR/3cZ+fFcrDa5kf5vZCTl9HW0ZtPm1nT3J01tnWlvPBccDBwbGv9XOaW+oalVK+SlfPfk6eRnGvKhi0KKVY2/kKV5KS++NIMvAgAAAAvEnPVYeP21H+Q7g9/Kj+68PT974zVztewFqr0UkqTaT6G8sfNcP4VyOeUk6a9WKTSlkufKyciBzmw6MD5/Y2d2T1i9sCz3/8fu3D/BX07//d9lNEtz/XWz8EIAAAAwz+a2eeM/jWbk6aczeusHsnrF9VOfVz6c7R0HL/tqyKa23rQ3llPq2JOB4oZJQoKh9JXKaWpuSPv+3gvWL66Y5rUQo0P5oz97Pln2sfzLn7/MzQMAAMACNPe3QoydyQ9OPptnrrsrP3fTFOcU12X3/nUzsny1r0JD2vdX+yycVT6ZkRTTsrGQvgMHM9C87ewRiIEDBzNS3JC2xgk+cDKj38uXPrsnA6PvTcun/21unZHdAwAAwMIy98HCO27IB+64PbfcMOcrJxnK1/urP7s3t5592tTWm5YXKkkKqWvekJZjneNVC8WkfDh9/UlT20VBxKWc/kZ6/8v+/PUP35sHP/0baZ6sOSQAAAAscnMaLFy9dFnuvPvWLJv7OGPceccbLjJwrJwU70sxxTS1NKSvpzelNa1Jz/SqFc6cPJzd//VgnvupO/JQ56dyv1ABAACAt7E5+4r/jvesTNOdN+cdc7XgW6o2cBwobsjurmK+3p/UbWyoViU0bkv7mtZ0d3QmKaala2rVCqPf/EI6f++v8uKyj+RTOx7OPUtn9w0AAABgvs1+sHDVkrz7lttz9603zMO5iwkM7smmnqFUA4PetBeTkVJnBtKQ9omaORbvS9NUeja+cDif+b2/you3bMjuHetSNycXeQIAAMD8umpsbGxsvjcxV0ZKndl+7L7sPr8CYfzGh5y9SrKcUkdn+spJU9u2pGdPNXTYf66Z45u9nK/81m/mj7+zJHV3N2Tlu948YtW/2pz7b5uNtwIAAID5c0UFC292/nGIdak7W81wYZAw8HhruvuTurPhw0VOfzW7f+N/5buXWKl61eUsvAIAAADMoys7WBjck019Ky8IFSYND8YrG0bWbMuTjzbM/V4BAABgAbqygwUAAADgsmgxCAAAANRMsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywAAAAANRMsAAAAADUTLAAAAAA1EywAAAAANTsig0WRkqd2dRxOCPzvREAAABYxK6d7w3Mj6H0HSinqW1d6lINGbYfKF9ifDEtXZ1pLs7V/gAAAGBxmP1gYfTVjC69LktnfaGpG3h8TwbWbMuTjdXf65o782TzULo370naetPeeG5sNXQopG4qocLo93L0D7+QvsFyzryeLFn2C2ne9Mk03/HuWXkPAAAAmG+zfxTi1N9n6G9G8vKsLzRFg3vS/cKG7H60IUk5pY7WbC9NVq1QrWyo27ghTW/1ua+XU/rsb+dLg2dyz795OK2f3JB7ljyTvs/+53QPjs7sOwAAAMACMSc9Fn7yw3JO9P9dRn48F6tdQvlwtvdU0jJ+BGLg8c70lYsprphk/OCxDKQhLVM4A3H6/34hfSeXpunRzrQ3fyQf+ui6tO/8jTy4bDQDpa/mxRl9EQAAAFgY5qzHwuuv/SDfGfxWfnTn7fnZG6+Zq2UvMNL/jYyknL6O1vSNP2tq6xw/+lBJkgwcG0oax6sZ+oZSt7HzrasVkjxXfilLb2zI/Y1Lzj28elmW/bMk/5icmdE3AQAAgIVhbps3/tNoRp5+OqO3fiCrV1w/p0snb/RSSJJqP4Xyxs5z/RTK5ZSTpL9apdCUSp4rJyMHOrPpwPj8jZ3ZPUn1wj0PfTY9D5334LWX8q0v/1H6vpPc2tKQull7KwAAAJg/c38rxNiZ/ODks3nmurvyczdNcU75cLZ3HLzsqyGb2nrT3lhOqWNPBoobJgkJhtJXKqepuSHt+3svWL+4YmrXQgw83pru/uq/b/7op/Lpj7tOAgAAgLenuQ8W3nFDPnDH7bnlhmnMKa7L7v3rZmT5al+FhrTvX3dhFUH5ZEZSTMvGQvoOHMxA87azRyAGDhzMSHFD2hon+MA3Gc2N9Q+ntXE0z/3lV3P0a5/Lb45uy2cfbVhQN2MAAADATJjTYOHqpcty5923ZtncxxnjhvL1/urP7s2tZ582tfWm5YVKkkLqmjek5VjneNVCMSkfTl9/0tS2borHGZZm1Yc/klVJPvTBj6XpS9uz+8tfyJe+2ZBNd8/GOwEAAMD8mbOv+O94z8o03Xlz3jFXC07ovOMNFxk4Vk6K96WYYppaGtLX05vSmtakZzrVCm+26p/fl5u/fDjffbac3O1IBAAAAG8vs3/d5FVL8u5bbs+98x4qXKxatbCp43BGxisZ6j443mSxcVva15TT11G9jrLlLasVXspXfqs9m3b9eU5f/KfXzuTHSZZcvWSCeQAAALC4zX7Fwm2r0jDri0zD4J5s6hlKUkxLV2/ai8lIqTMDaUj7RM0ci/el6S0LDZalrrgk+dpXc/R7H8svvf+N56MZeOqvcjrL8uG7l83oawAAAMBCMG/dDubDSKkz24/dl937t52rQCgfTs+Bcuo2to43ayyn1NGZvnLS1LYt6dmT7ZtPpn3/uWaOE7nz3z2cpsE9OfqZzrz48Y9lzc+M5rv/58v5yvdGc+vGT+eXVs722wEAAMDcu2psbGxsvjcxf4bSvXn86smudak7W83QcEGQ8Mb1kXUbOye5onLc6W+n9OQfpfT0SznzerJk2fvz0Y2b80sfXhYHIQAAAHg7+v+Hbe6SjI5FVAAAAABJRU5ErkJggg==" alt="image-20200720232914114"></p> <h3 id="_1-4-实现树形的静态组织架构"><a href="#_1-4-实现树形的静态组织架构" class="header-anchor">#</a> 1.4 实现树形的静态组织架构</h3> <p>由此，我们首先实现静态数据的组织架构</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token comment"><!--放置一个属性 这里的props和我们之前学习的父传子 的props没关系--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>departs<span class="token punctuation">"</span></span> <span class="token attr-name">:props</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultProps<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
export default {
data() {
return {
defaultProps: {
label: 'name'
},
departs: [
{ name: '总裁办', children: [{ name: '董事会' }] },
{ name: '行政部' },
{ name: '人事部' }
]
}
}
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><blockquote><p>接下来，对每个层级节点增加显示内容，此时需要用到tree的插槽</p></blockquote> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dashboard-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 实现页面的基本布局 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-card</span><span class="token punctuation">></span></span>
<span class="token comment"><!--省略了头部内容--></span>
<span class="token comment"><!--放置一个属性 这里的props和我们之前学习的父传子 的props没关系--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>departs<span class="token punctuation">"</span></span> <span class="token attr-name">:props</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultProps<span class="token punctuation">"</span></span> <span class="token attr-name">:default-expand-all</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 --></span>
<span class="token comment"><!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据 data 每个节点的数据对象--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{data}<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>space-between<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 左侧内容 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>{{ data.name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 右侧内容 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>{{ data.manager }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 放置下拉菜单 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 内容 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>操作 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el-icon-arrow-down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 具名插槽 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-menu</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span><span class="token punctuation">></span></span>添加子部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span><span class="token punctuation">></span></span>编辑部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span><span class="token punctuation">></span></span>删除部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tree</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-card</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">'Departments'</span><span class="token punctuation">,</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
defaultProps<span class="token operator">:</span> <span class="token punctuation">{</span>
label<span class="token operator">:</span> <span class="token string">'name'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
departs<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'总裁办'</span><span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'曹操'</span><span class="token punctuation">,</span> children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'董事会'</span><span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'曹丕'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'行政部'</span><span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'刘备'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'人事部'</span><span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'孙权'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br></div></div><p>最终形成静态结构效果</p> <p><img src="/hrsass-notes/assets/img/image-20200912150032528.b6dbaaf9.png" alt="image-20200912150032528"></p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> ：完成树形结构的显示</p> <h2 id="_2-将树形的操作内容单独抽提成组件"><a href="#_2-将树形的操作内容单独抽提成组件" class="header-anchor">#</a> 2. 将树形的操作内容单独抽提成组件</h2> <p><strong><code>目标</code></strong> ： 将树形的操作内容单独抽提成组件</p> <h3 id="_2-1-封装单独的树操作栏组件"><a href="#_2-1-封装单独的树操作栏组件" class="header-anchor">#</a> 2.1 封装单独的树操作栏组件</h3> <blockquote><p>通过第一个章节，我们发现，树形的顶级内容实际和子节点的内容是一致的，此时可以将该部分抽提成一个组件，节省代码</p></blockquote> <p>组件 <strong><code>src/views/departments/components/tree-tools.vue</code></strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>space-between<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span> 100%</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 名称应该变成 对应的节点中的name --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>{{ treeNode.name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 两个内容 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>{{ treeNode.manager }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 下拉菜单 element --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>
操作<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el-icon-arrow-down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 下拉菜单 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-menu</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span><span class="token punctuation">></span></span>添加子部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span><span class="token punctuation">></span></span>编辑部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span><span class="token punctuation">></span></span>删除部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 该组件需要对外开放属性 外部需要提供一个对象 对象里需要有name manager</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token comment">// props可以用数组来接收数据 也可以用对象来接收</span>
<span class="token comment">// props: { props属性: { 配置选项 } }</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 定义一个props属性</span>
treeNode<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Object<span class="token punctuation">,</span> <span class="token comment">// 对象类型</span>
required<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 要求对方使用您的组件的时候 必须传treeNode属性 如果不传 就会报错</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br></div></div><h3 id="_2-2-在组织架构中应用操作栏组件"><a href="#_2-2-在组织架构中应用操作栏组件" class="header-anchor">#</a> 2.2 在组织架构中应用操作栏组件</h3> <p>接下来，在**<code>src/views/departments/index.vue</code>** 进行代码的简化</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dashboard-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 实现页面的基本布局 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-card<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 用了一个行列布局 --></span>
<span class="token comment"><!-- 缺少treeNode --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tree-tools</span> <span class="token attr-name">:tree-node</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>company<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token comment"><!--放置一个属性 这里的props和我们之前学习的父传子 的props没关系--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>departs<span class="token punctuation">"</span></span> <span class="token attr-name">:props</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultProps<span class="token punctuation">"</span></span> <span class="token attr-name">default-expand-all</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容 => 有多少个节点循环多少次 --></span>
<span class="token comment"><!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 --></span>
<span class="token comment"><!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tree-tools</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ data }<span class="token punctuation">"</span></span> <span class="token attr-name">:tree-node</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tree</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-card</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>上面代码中，company变量需要在data中定义</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>company<span class="token operator">:</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'江苏传智播客教育科技股份有限公司'</span><span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'负责人'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>同时，由于在两个位置都使用了该组件，但是放置在最上层的组件是不需要显示 <strong><code>删除部门</code></strong> 和**<code>编辑部门</code>** 的</p> <p>所以，增加一个新的属性 <strong><code>isRoot（是否根节点）</code></strong> 进行控制</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> props<span class="token operator">:</span> <span class="token punctuation">{</span>
treeNode<span class="token operator">:</span> <span class="token punctuation">{</span>
required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 设置当前数据为必填</span>
type<span class="token operator">:</span> Object <span class="token comment">// 类型是Object</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
isRoot<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span>tree<span class="token operator">-</span>tools <span class="token operator">:</span>tree<span class="token operator">-</span>node<span class="token operator">=</span><span class="token string">"company"</span> <span class="token operator">:</span>is<span class="token operator">-</span>root<span class="token operator">=</span><span class="token string">"true"</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>组件中， 根据isRoot判断显示</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment"><!-- 编辑部门和删除部门只会在子节点上显示 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>!isRoot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>编辑部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>!isRoot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>删除部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>通过封装，代码看上去更加紧凑，简洁，这就是封装的魅力</p></blockquote> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> ：将树形内容单独抽提组件</p> <h2 id="_3-获取组织架构数据-并进行树形处理"><a href="#_3-获取组织架构数据-并进行树形处理" class="header-anchor">#</a> 3. 获取组织架构数据，并进行树形处理</h2> <p><strong><code>目标</code></strong> 获取真实的组织架构数据，并将其转化成树形数据显示在页面上</p> <h3 id="_3-1-封装api接口-获取组织架构数据"><a href="#_3-1-封装api接口-获取组织架构数据" class="header-anchor">#</a> 3.1 封装API接口，获取组织架构数据</h3> <blockquote><p>现在基本的静态结构已经形成，接下来需要获取真实的数据</p></blockquote> <p>首先，<strong>封装获取组织架构的请求</strong> <strong><code>src/api/departments.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/** *
*
* 获取组织架构数据
* **/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token string">'/company/department'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>在钩子函数中调用接口</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> TreeTools <span class="token keyword">from</span> <span class="token string">'./components/tree-tools'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getDepartments <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/departments'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span>
TreeTools
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
company<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 就是头部的数据结构</span>
departs<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
defaultProps<span class="token operator">:</span> <span class="token punctuation">{</span>
label<span class="token operator">:</span> <span class="token string">'name'</span> <span class="token comment">// 表示 从这个属性显示内容</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 调用自身的方法</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token keyword">async</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>company <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> result<span class="token punctuation">.</span>companyName<span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'负责人'</span> <span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>departs <span class="token operator">=</span> result<span class="token punctuation">.</span>depts <span class="token comment">// 需要将其转化成树形结构</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="_3-2-将数组数据转化成树形结构"><a href="#_3-2-将数组数据转化成树形结构" class="header-anchor">#</a> 3.2 将数组数据转化成树形结构</h3> <p>然后，我们需要将列表型的数据，转化成树形数据，这里需要用到<strong>递归算法</strong></p> <p><img src="/hrsass-notes/assets/img/image-20200721010931214.91f5516f.png" alt="image-20200721010931214"></p> <p>封装一个工具方法，<strong><code>src/utils/index.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/** *
*
* 将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样， 否则就会死循环
* 遍历树形 有一个重点 要先找一个头儿
* ***/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">tranListToTreeData</span><span class="token punctuation">(</span><span class="token parameter">list<span class="token punctuation">,</span> rootValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>pid <span class="token operator">===</span> rootValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 找到之后 就要去找 item 下面有没有子节点</span>
<span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token function">tranListToTreeData</span><span class="token punctuation">(</span>list<span class="token punctuation">,</span> item<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>children<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 如果children的长度大于0 说明找到了子节点</span>
item<span class="token punctuation">.</span>children <span class="token operator">=</span> children
<span class="token punctuation">}</span>
arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token comment">// 将内容加入到数组中</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">return</span> arr
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>调用转化方法，转化树形结构</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">this</span><span class="token punctuation">.</span>company <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> result<span class="token punctuation">.</span>companyName<span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'负责人'</span> <span class="token punctuation">}</span> <span class="token comment">// 这里定义一个空串 因为 它是根 所有的子节点的数据pid 都是 ""</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>departs <span class="token operator">=</span> <span class="token function">tranListToTreeData</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>depts<span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>这样一来，树形数据就有了，下一章节，就可以针对部门进行操作</p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> 获取组织架构数据，并进行树形处理</p> <h2 id="_4-删除部门功能实现"><a href="#_4-删除部门功能实现" class="header-anchor">#</a> 4. 删除部门功能实现</h2> <p><strong><code>目标</code></strong> 实现操作功能的删除功能</p> <h3 id="_4-1-封装删除接口-注册下拉菜单事件"><a href="#_4-1-封装删除接口-注册下拉菜单事件" class="header-anchor">#</a> 4.1 封装删除接口，注册下拉菜单事件</h3> <p>首先，封装删除功能模块 <strong><code>src/api/departments.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/** *
* 根据id根据部门 接口是根据restful的规则设计的 删除 delete 新增 post 修改put 获取 get
* **/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">delDepartments</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/company/department/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
method<span class="token operator">:</span> <span class="token string">'delete'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>然后，在tree-tools组件中，监听下拉菜单的点击事件 <strong><code>src/views/departments/index.vue</code></strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown</span> <span class="token attr-name">@command</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>operateDepts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>
操作<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el-icon-arrow-down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 下拉菜单 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-menu</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span> <span class="token attr-name">command</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>add<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>添加子部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 编辑部门和删除部门只会在子节点上显示 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>!isRoot<span class="token punctuation">"</span></span> <span class="token attr-name">command</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>edit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>编辑部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dropdown-item</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>!isRoot<span class="token punctuation">"</span></span> <span class="token attr-name">command</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>del<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>删除部门<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown-menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dropdown</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><blockquote><p>dropdown下拉菜单的监听事件command</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 操作节点调用的方法</span>
<span class="token function">operateDepts</span><span class="token punctuation">(</span><span class="token parameter">type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'add'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 添加子部门的操作</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'edit'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 编辑部门的操作</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 删除操作</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="_4-2-调用删除接口-通知父组件更新数据"><a href="#_4-2-调用删除接口-通知父组件更新数据" class="header-anchor">#</a> 4.2 调用删除接口，通知父组件更新数据</h3> <blockquote><p>删除之前，提示用户是否删除，然后调用删除接口</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 操作节点调用的方法</span>
<span class="token function">operateDepts</span><span class="token punctuation">(</span><span class="token parameter">type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'add'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 添加子部门的操作</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'edit'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 编辑部门的操作</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 删除操作</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$confirm</span><span class="token punctuation">(</span><span class="token string">'确定要删除该部门吗'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// 如果点击了确定就会进入then</span>
<span class="token keyword">return</span> <span class="token function">delDepartments</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token comment">// 返回promise对象</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// 如果删除成功了 就会进入这里</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><blockquote><p>上面代码中，我们已经成功删除了员工数据，但是怎么通知父组件进行更新呢</p></blockquote> <p>在前面的课程中，我们已经学习过可以通过自定义事件**<code>this.$emit</code>** 的方式来进行</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 如果删除成功了 就会进入这里</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'delDepts'</span><span class="token punctuation">)</span> <span class="token comment">// 触发自定义事件</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'删除部门成功'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>父组件监听事件 <strong><code>src/views/department/index.vue</code></strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tree-tools</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>obj<span class="token punctuation">"</span></span> <span class="token attr-name">:tree-node</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>obj.data<span class="token punctuation">"</span></span> <span class="token attr-name">@delDepts</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getDepartments<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> ：删除部门功能实现</p> <h2 id="_5-新增部门功能-建立组件"><a href="#_5-新增部门功能-建立组件" class="header-anchor">#</a> 5. 新增部门功能-建立组件</h2> <p><strong><code>目标</code></strong> ：实现新增部门功能的组件建立</p> <h3 id="_5-1-封装新增接口-新建组件中的弹层结构"><a href="#_5-1-封装新增接口-新建组件中的弹层结构" class="header-anchor">#</a> 5.1 封装新增接口，新建组件中的弹层结构</h3> <p>首先， 封装新增部门的api模块 <strong><code>src/api/departments.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
* 新增部门接口
*
* ****/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">addDepartments</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token string">'/company/department'</span><span class="token punctuation">,</span>
method<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
data
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>然后，我们需要构建一个新增部门的窗体组件 <strong><code>src/views/department/components/add-dept.vue</code></strong></p> <p>其中的交互设计如下</p> <p><img src="/hrsass-notes/assets/img/image-20200828162901390.53f8e7c0.png" alt="image-20200828162901390"></p> <p><a href="/hrsass-notes/[http:/czpm.itcast.cn/ihrm/#g=1&p=组织架构](http:/czpm.itcast.cn/ihrm/#g=1&p=组织架构)">设计要求</a></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 新增部门的弹层 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dialog</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>新增部门<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 表单组件 el-form label-width设置label的宽度 --></span>
<span class="token comment"><!-- 匿名插槽 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form</span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>120px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>部门名称<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>80%</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-50个字符<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>部门编码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>80%</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-50个字符<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>部门负责人<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-select</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>80%</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请选择<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>部门介绍<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>80%</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-300个字符<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">:rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- el-dialog有专门放置底部操作栏的 插槽 具名插槽 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-row</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 列被分为24 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>确定<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-col</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-row</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-dialog</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h3 id="_5-2-点击新增子部门显示弹层组件"><a href="#_5-2-点击新增子部门显示弹层组件" class="header-anchor">#</a> 5.2 点击新增子部门显示弹层组件</h3> <p>然后，我们需要用属性控制组件的显示或者隐藏</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 需要传入一个props变量来控制 显示或者隐藏</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
showDialog<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dialog</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>新增部门<span class="token punctuation">"</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showDialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>在**<code>departments/index.vue</code>** 中引入该组件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> AddDept <span class="token keyword">from</span> <span class="token string">'./components/add-dept'</span> <span class="token comment">// 引入新增部门组件</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span> AddDept <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>定义控制窗体显示的变量**<code>showDialog</code>**</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
showDialog<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 显示窗体</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 放置新增弹层组件 <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>add<span class="token operator">-</span>dept <span class="token operator">:</span>show<span class="token operator">-</span>dialog<span class="token operator">=</span><span class="token string">"showDialog"</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>当点击新增部门时，弹出组件</p> <blockquote><p>注意，点击新增时tree-tools组件，所以这里，我们依然需要子组件调用父组件</p></blockquote> <p><strong>子组件触发新增事件</strong>· <strong><code>src/views/departments/tree-tools.vue</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'add'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 添加子部门的操作</span>
<span class="token comment">// 告诉父组件 显示弹层</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'addDepts'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">)</span> <span class="token comment">// 为何传出treeNode 因为是添加子部门 需要当前部门的数据</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>父组件监听事件</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>2处添加
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tree-tools</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{data}<span class="token punctuation">"</span></span> <span class="token attr-name">:tree-node</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data<span class="token punctuation">"</span></span> <span class="token attr-name">@delDepts</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getDepartments<span class="token punctuation">"</span></span> <span class="token attr-name">@addDepts</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>addDepts<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tree-tools</span> <span class="token attr-name">:tree-node</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>company<span class="token punctuation">"</span></span> <span class="token attr-name">:is-root</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">@delDepts</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getDepartments<span class="token punctuation">"</span></span> <span class="token attr-name">@addDepts</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>addDepts<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>方法中弹出层,记录在哪个节点下添加子部门</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token function">addDepts</span><span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showDialog <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token comment">// 显示弹层</span>
<span class="token comment">// 因为node是当前的点击的部门， 此时这个部门应该记录下来,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>node <span class="token operator">=</span> node
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>提交代码</strong></p> <p><img src="/hrsass-notes/assets/img/image-20200722084707863.ae252423.png" alt="image-20200722084707863"></p> <p><strong><code>本节任务</code></strong> ：新增部门功能-建立组件</p> <h2 id="_6-完成新增部门的规则校验"><a href="#_6-完成新增部门的规则校验" class="header-anchor">#</a> 6. 完成新增部门的规则校验</h2> <p><strong><code>目标</code></strong> 完成新增部门功能的规则校验和数据提交部分</p> <h3 id="_6-1-完成新增表单的基本校验条件"><a href="#_6-1-完成新增表单的基本校验条件" class="header-anchor">#</a> 6.1 完成新增表单的基本校验条件</h3> <p>部门名称（name）：必填 1-50个字符 / 同级部门中禁止出现重复部门</p> <p>部门编码（code）：必填 1-50个字符 / 部门编码在整个模块中都不允许重复</p> <p>部门负责人（manager）：必填</p> <p>部门介绍 ( introduce)：必填 1-300个字符</p> <blockquote><p><code>add-depts.vue</code>的<code>data</code>中定义数据结构</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> formData<span class="token operator">:</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 部门名称</span>
code<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 部门编码</span>
manager<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 部门管理者</span>
introduce<span class="token operator">:</span> <span class="token string">''</span> <span class="token comment">// 部门介绍</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p>完成表单校验需要的前置条件</p></blockquote> <ul><li>el-form配置model和rules属性</li> <li>el-form-item配置prop属性</li> <li>表单进行v-model双向绑定</li></ul> <h3 id="_6-2-配置新增表单的基本校验规则"><a href="#_6-2-配置新增表单的基本校验规则" class="header-anchor">#</a> 6.2 配置新增表单的基本校验规则</h3> <blockquote><p>根据这些要求，校验规则</p></blockquote> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br></div><pre class="language-js"><code> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token comment">// 定义表单数据</span>
formData<span class="token operator">:</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 部门名称</span>
code<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 部门编码</span>
manager<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 部门管理者</span>
introduce<span class="token operator">:</span> <span class="token string">''</span> <span class="token comment">// 部门介绍</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 定义校验规则</span>
rules<span class="token operator">:</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'部门名称不能为空'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'部门名称要求1-50个字符'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
code<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'部门编码不能为空'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'部门编码要求1-50个字符'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
manager<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'部门负责人不能为空'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
introduce<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'部门介绍不能为空'</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span><span class="token punctuation">,</span> min<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'部门介绍要求1-50个字符'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="_6-3-部门名称和部门编码的自定义校验"><a href="#_6-3-部门名称和部门编码的自定义校验" class="header-anchor">#</a> 6.3 部门名称和部门编码的自定义校验</h3> <p><strong><code>注意</code></strong> ：部门名称和部门编码的规则 有两条我们需要通过**<code>自定义校验函数validator</code>** 来实现</p> <blockquote><p>首先，在校验名称和编码时，要获取最新的组织架构，这也是我们这里trigger采用blur的原因，因为change对于访问的频率过高，我们需要控制访问频率</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// add-detp.vue 中</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getDepartments <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/departments'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p>部门名称不能和**<code>同级别</code>** 的重复，这里注意，我们需要找到所有同级别的数据，进行校验，所以还需要另一个参数pid</p></blockquote> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-js"><code><span class="token comment">// add-detp.vue 中</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 用来控制窗体是否显示或者隐藏</span>
showDialog<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 当前操作的节点</span>
treeNode<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br></div><pre class="language-vue"><code><span class="token comment"><!--index.vue中，传入node节点信息--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>add-dept</span>
<span class="token attr-name">:show-dialog</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showDialog<span class="token punctuation">"</span></span>
<span class="token attr-name">:tree-node</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>node<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>根据当前部门id，找到所有子部门相关的数据，判断是否重复 ； 检查部门编码的过程同理</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token comment">// add-detp.vue 中</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 去找 同级部门下 是否有重复的部门名称 【代码只能写在这个位置，否则没有this， 一定要用箭头函数，否则也没有this】</span>
<span class="token keyword">const</span> <span class="token function-variable function">checkNameRepeat</span> <span class="token operator">=</span> <span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">rules<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// 1. 找到所有的部门数据</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> depts <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 2. 找到我爹的儿子， 去判断名称是否重复</span>
<span class="token keyword">const</span> isRepeat <span class="token operator">=</span> depts<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>pid <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>name <span class="token operator">===</span> value<span class="token punctuation">)</span>
<span class="token comment">// 3. 返回信息</span>
isRepeat <span class="token operator">?</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">同级部门下已经有</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">的部门了</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 检查编码重复</span>
<span class="token keyword">const</span> <span class="token function-variable function">checkCodeRepeat</span> <span class="token operator">=</span> <span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// 先要获取最新的组织架构数据</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> depts <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 这里加一个 value不为空 因为我们的部门有可能没有code</span>
<span class="token keyword">const</span> isRepeat <span class="token operator">=</span> depts<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>code <span class="token operator">===</span> value <span class="token operator">&&</span> value<span class="token punctuation">)</span>
isRepeat <span class="token operator">?</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">组织架构中已经有部门使用</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">编码</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>定义的数据
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>在规则中定义</p> <div class="language-json line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-json"><code> <span class="token comment">// 定义校验规则</span>
rules<span class="token operator">:</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> '部门名称不能为空'<span class="token punctuation">,</span> trigger<span class="token operator">:</span> 'blur' <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> message<span class="token operator">:</span> '部门名称要求<span class="token number">1</span><span class="token number">-50</span>个字符'<span class="token punctuation">,</span> trigger<span class="token operator">:</span> 'blur' <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 自定义函数的形式校验</span>
<span class="token punctuation">{</span>trigger<span class="token operator">:</span> 'blur'<span class="token punctuation">,</span>validator<span class="token operator">:</span> checkNameRepeat <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
code<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> '部门编码不能为空'<span class="token punctuation">,</span> trigger<span class="token operator">:</span> 'blur' <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> message<span class="token operator">:</span> '部门编码要求<span class="token number">1</span><span class="token number">-50</span>个字符'<span class="token punctuation">,</span> trigger<span class="token operator">:</span> 'blur' <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> trigger<span class="token operator">:</span> 'blur'<span class="token punctuation">,</span>validator<span class="token operator">:</span> checkCodeRepeat<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
manager<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> '部门负责人不能为空'<span class="token punctuation">,</span> trigger<span class="token operator">:</span> 'blur' <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
introduce<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> '部门介绍不能为空'<span class="token punctuation">,</span> trigger<span class="token operator">:</span> 'blur' <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> trigger<span class="token operator">:</span> 'blur'<span class="token punctuation">,</span> min<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> message<span class="token operator">:</span> '部门介绍要求<span class="token number">1</span><span class="token number">-50</span>个字符' <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_6-4-处理首部内容的pid数据"><a href="#_6-4-处理首部内容的pid数据" class="header-anchor">#</a> 6.4 处理首部内容的pid数据</h3> <p><strong><code>需要注意</code></strong> ：在最根级的**<code>tree-tools</code>** 组件中，由于treenode属性中没有id，id便是undefined，但是通过undefined进行等值判断是寻找不到对应的根节点的， 所以在传值时，我们将id属性设置为 <strong><code>“”</code></strong></p> <p><strong><code>src/views/departments/index.vue</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">async</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>departs <span class="token operator">=</span> <span class="token function">tranListToTreeData</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>depts<span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>company <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> result<span class="token punctuation">.</span>companyName<span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'负责人'</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> ：完成新增部门的规则校验</p> <h2 id="_7-新增部门功能-部门负责人数据"><a href="#_7-新增部门功能-部门负责人数据" class="header-anchor">#</a> 7. 新增部门功能-部门负责人数据</h2> <p><strong><code>目标</code></strong> ：获取新增表单中的部门负责人下拉数据</p> <blockquote><p>在上节的表单中，部门负责人是下拉数据，我们应该从**<code>员工接口</code>** 中获取该数据</p></blockquote> <p>首先，封装获取简单员工列表的模块 <strong><code>src/api/employees.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>
<span class="token comment">/**
* 获取员工的简单列表
* **/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getEmployeeSimple</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token string">'/sys/user/simple'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>然后，在 <strong><code>add-dept.vue</code></strong> 中的select聚焦事件 <strong><code>focus</code></strong> 中调用该接口，因为我们要获取实时的最新数据</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-select</span>
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData.manager<span class="token punctuation">"</span></span>
<span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>80%</span><span class="token punctuation">"</span></span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请选择<span class="token punctuation">"</span></span>
<span class="token attr-name">@focus</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getEmployeeSimple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-select</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>获取员工列表</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getEmployeeSimple <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/employees'</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// 其他代码,</span>
<span class="token keyword">return</span><span class="token punctuation">{</span>
<span class="token comment">// 其他变量,</span>
peoples<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 接收获取的员工简单列表的数据</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 获取员工简单列表数据</span>
<span class="token keyword">async</span> <span class="token function">getEmployeeSimple</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>peoples <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getEmployeeSimple</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>渲染数据</p> <div class="language-html line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br></div><pre class="language-html"><code> <span class="token comment"><!-- 需要循环生成选项 这里做一下简单的处理 显示的是用户名 存的也是用户名--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData.manager<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>80%</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请选择<span class="token punctuation">"</span></span> <span class="token attr-name">@focus</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getEmployeeSimple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-option</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in peoples<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.username<span class="token punctuation">"</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.username<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-select</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> ：新增部门功能-部门负责人数据</p> <h2 id="_8-新增功能-提交-取消-关闭"><a href="#_8-新增功能-提交-取消-关闭" class="header-anchor">#</a> 8. 新增功能-提交-取消-关闭</h2> <p><strong><code>目标</code></strong> ： 完成新增模块的提交-取消-关闭等功能</p> <h3 id="_8-1-校验通过-调用新增接口"><a href="#_8-1-校验通过-调用新增接口" class="header-anchor">#</a> 8.1 校验通过，调用新增接口</h3> <blockquote><p>当点击新增页面的确定按钮时，我们需要完成对表单的整体校验，如果校验成功，进行提交</p></blockquote> <p>首先，在点击确定时，校验表单</p> <p><strong>给el-form定义一个ref属性</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deptForm<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData<span class="token punctuation">"</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rules<span class="token punctuation">"</span></span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>120px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 点击确定时触发</span>
<span class="token function">btnOK</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>deptForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token parameter">isOK</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>isOK<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 表示可以提交了</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>然后，在校验通过时，调用新增接口</p> <blockquote><p>因为是添加子部门，所以我们需要将新增的部门pid设置成当前部门的id，新增的部门就成了自己的子部门</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 点击确定时触发</span>
<span class="token function">btnOK</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>deptForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token parameter">isOK</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>isOK<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 表示可以提交了</span>
<span class="token keyword">await</span> <span class="token function">addDepartments</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">,</span> pid<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">.</span>id <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 调用新增接口 添加父部门的id</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>同样，在新增成功之后，调用告诉父组件，重新拉取数据</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'addDepts'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>父组件</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>add-dept</span> <span class="token attr-name">:show-dialog</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showDialog<span class="token punctuation">"</span></span> <span class="token attr-name">:tree-node</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>node<span class="token punctuation">"</span></span> <span class="token attr-name">@addDepts</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getDepartments<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong><code>本节注意</code></strong> ：同学们可能会疑惑，我们**<code>tree-tools.vue</code>** 和**<code>add-dept.vue</code>** 两个组件都触发了addDepts事件，不冲突吗？</p> <p>这里，我们触发的自定义事件都是组件自身的，他们之间没有任何关系，只是名字相同而已，大家不要混淆</p> <h3 id="_8-2-利用sync修饰符关闭新增弹层"><a href="#_8-2-利用sync修饰符关闭新增弹层" class="header-anchor">#</a> 8.2 利用sync修饰符关闭新增弹层</h3> <blockquote><p>这里我们学习一个新的技巧，<strong><code>sync修饰符</code></strong></p></blockquote> <p>按照常规，想要让父组件更新**<code>showDialog</code>** 的话，需要这样做</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 子组件</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'changedialog'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token comment">//触发事件</span>
<span class="token comment">// 父组件</span>
<span class="token operator"><</span>child @changedialog<span class="token operator">=</span><span class="token string">"method"</span> <span class="token operator">:</span>showDialog<span class="token operator">=</span><span class="token string">"showDialog"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token comment">// JS 里面</span>
<span class="token function">method</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showDialog <span class="token operator">=</span> value
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><p>但是，vuejs为我们提供了**<code>sync修饰符</code>** ，它提供了一种简写模式 也就是</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 子组件 update:固定写法 (update:props名称, 值)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update:showDialog'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token comment">//触发事件</span>
<span class="token comment">// 父组件 sync修饰符</span>
<span class="token operator"><</span>child <span class="token operator">:</span>showDialog<span class="token punctuation">.</span>sync<span class="token operator">=</span><span class="token string">"showDialog"</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>只要用sync修饰，就可以省略父组件的监听和方法，直接将值赋值给showDialog</p> <p><strong>取消按钮和关闭</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 点击确定时触发</span>
<span class="token function">btnOK</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>deptForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token parameter">isOK</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>isOK<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 表示可以提交了</span>
<span class="token keyword">await</span> <span class="token function">addDepartments</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">,</span> pid<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">.</span>id <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 调用新增接口 添加父部门的id</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'addDepts'</span><span class="token punctuation">)</span> <span class="token comment">// 告诉父组件 新增数据成功 重新拉取数据</span>
<span class="token comment">// update:props名称</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update:showDialog'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="_8-3-取消时重置数据和校验"><a href="#_8-3-取消时重置数据和校验" class="header-anchor">#</a> 8.3 取消时重置数据和校验</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">btnCancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>deptForm<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 重置校验字段</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update:showDialog'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token comment">// 关闭</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>需要在el-dialog中监听其close事件</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-dialog</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>新增部门<span class="token punctuation">"</span></span> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showDialog<span class="token punctuation">"</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btnCancel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong><code>本节任务</code></strong> 新增功能-提交-取消-关闭</p> <h2 id="_9-编辑部门功能实现数据回写"><a href="#_9-编辑部门功能实现数据回写" class="header-anchor">#</a> 9. 编辑部门功能实现数据回写</h2> <p><strong><code>目标</code></strong> ：实现编辑部门的功能</p> <h3 id="_9-1-点击编辑弹出层-记录当前节点"><a href="#_9-1-点击编辑弹出层-记录当前节点" class="header-anchor">#</a> 9.1 点击编辑弹出层，记录当前节点</h3> <blockquote><p>编辑部门功能实际上和新增窗体采用的是一个组件，只不过我们需要将新增场景变成编辑场景</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200831112149246.486501de.png" alt="image-20200831112149246"></p> <p><strong><code>tree-tools.vue</code></strong> 中首先点击编辑部门时， 调用<strong>父组件编辑方法</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'editDepts'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>父组件 <code>index.vue</code> 控制弹层打开，赋值当前编辑节点</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tree-tools</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>obj<span class="token punctuation">"</span></span> <span class="token attr-name">:tree-node</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>obj.data<span class="token punctuation">"</span></span> <span class="token attr-name">@delDepts</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getDepartments<span class="token punctuation">"</span></span> <span class="token attr-name">@editDepts</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>editDepts<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
// 编辑部门节点
editDepts(node) {
// 首先打开弹层
this.showDialog = true
this.node = node // 赋值操作的节点
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_9-2-父组件调用子组件的获取详情方法"><a href="#_9-2-父组件调用子组件的获取详情方法" class="header-anchor">#</a> 9.2 父组件调用子组件的获取详情方法</h3> <blockquote><p>编辑时，我们需要获取点击部门的信息</p></blockquote> <p><strong>封装获取部门信息的模块</strong> <strong><code>src/api/departments.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/** *
* 获取部门详情
* ***/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getDepartDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/company/department/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><blockquote><p>在什么时候获取部门详情?</p></blockquote> <p>我们可以在调用<strong>编辑方法</strong> <strong><code>editDepts</code></strong> 中通过**<code>ref</code>** 调用**<code>add-dept.vue</code>** 的实例方法</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-js"><code><span class="token comment">// 1.导入方法</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> 其他内容<span class="token punctuation">,</span> getDepartDetail <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/departments'</span>
<span class="token comment">// 2.获取部门详情方法，提供外父组件调用</span>
methods<span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token keyword">async</span> <span class="token function">getDepartDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 请求来的数据回显给表单</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>formData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDepartDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token comment">// 1.弹层组件增加ref属性，值为addDept</span>
<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 放置新增弹层组件 <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>add<span class="token operator">-</span>dept
ref<span class="token operator">=</span><span class="token string">"addDept"</span>
<span class="token operator">:</span>show<span class="token operator">-</span>dialog<span class="token punctuation">.</span>sync<span class="token operator">=</span><span class="token string">"showDialog"</span>
<span class="token operator">:</span>tree<span class="token operator">-</span>node<span class="token operator">=</span><span class="token string">"node"</span> @addDepts<span class="token operator">=</span><span class="token string">"getDepartments"</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token comment">// 2. 点击编辑触发的父组件的方法</span>
<span class="token function">editDepts</span><span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showDialog <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token comment">// 显示新增组件弹层</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>node <span class="token operator">=</span> node <span class="token comment">// 存储传递过来的node数据</span>
<span class="token comment">// 我们需要在这个位置 调用子组件的方法</span>
<span class="token comment">// 父组件 调用子组件的方法，通过 $refs.addDept找到该组件，调用他的方法，传递数据给他</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>addDept<span class="token punctuation">.</span><span class="token function">getDepartDetail</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token comment">// 直接调用子组件中的方法 传入一个id</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="_9-3-根据计算属性显示控制标题"><a href="#_9-3-根据计算属性显示控制标题" class="header-anchor">#</a> 9.3 根据计算属性显示控制标题</h3> <blockquote><p>需要根据当前的场景区分显示的标题</p></blockquote> <p>计算属性</p> <blockquote><p>如何判断新增还是编辑</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">showTitle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>id <span class="token operator">?</span> <span class="token string">'编辑部门'</span> <span class="token operator">:</span> <span class="token string">'新增子部门'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>同时发现，el-form中的resetFields不能重置非表单中的数据，所以在取消的位置需要强制加上 重置数据</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code> <span class="token function">btnCancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 重置数据 因为resetFields 只能重置 表单上的数据 非表单上的 比如 编辑中id 不能重置</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>formData <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
code<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
manager<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
introduce<span class="token operator">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span>
<span class="token comment">// 关闭弹层</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update:showDialog'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token comment">// 清除之前的校验 可以重置数据 只能重置 定义在data中的数据</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>deptForm<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="_10-同时支持编辑和新增场景"><a href="#_10-同时支持编辑和新增场景" class="header-anchor">#</a> 10. 同时支持编辑和新增场景</h2> <h3 id="_10-1-封装编辑接口-保存区分场景"><a href="#_10-1-封装编辑接口-保存区分场景" class="header-anchor">#</a> 10.1 封装编辑接口，保存区分场景</h3> <blockquote><p>接下来，需要在点击确定时，同时支持新增部门和编辑部门两个场景，我们可以根据formData是否有id进行区分</p></blockquote> <p><strong>封装编辑部门接口</strong> <strong><code>src/api/departments.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
* 编辑部门
*
* ***/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">updateDepartments</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/company/department/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
method<span class="token operator">:</span> <span class="token string">'put'</span><span class="token punctuation">,</span>
data
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><blockquote><p>点击确定时，进行场景区分</p></blockquote> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-js"><code> <span class="token comment">// 点击确定时触发</span>
<span class="token function">btnOK</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>deptForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token parameter">isOK</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>isOK<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 要分清楚现在是编辑还是新增</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 编辑模式 调用编辑接口</span>
<span class="token keyword">await</span> <span class="token function">updateDepartments</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 新增模式</span>
<span class="token keyword">await</span> <span class="token function">addDepartments</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">,</span> pid<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">.</span>id <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 调用新增接口 添加父部门的id</span>
<span class="token punctuation">}</span>
<span class="token comment">// 表示可以提交了</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'addDepts'</span><span class="token punctuation">)</span> <span class="token comment">// 告诉父组件 新增数据成功 重新拉取数据</span>
<span class="token comment">// update:props名称</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update:showDialog'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_10-2-校验规则支持编辑场景下的校验"><a href="#_10-2-校验规则支持编辑场景下的校验" class="header-anchor">#</a> 10.2 校验规则支持编辑场景下的校验</h3> <blockquote><p>除此之外，我们发现原来的校验规则实际和编辑部门有些冲突，所以需要进一步处理</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 现在定义一个函数 这个函数的目的是 去找 同级部门下 是否有重复的部门名称</span>
<span class="token keyword">const</span> <span class="token function-variable function">checkNameRepeat</span> <span class="token operator">=</span> <span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// 先要获取最新的组织架构数据</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> depts <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 检查重复规则 需要支持两种 新增模式 / 编辑模式</span>
<span class="token comment">// depts是所有的部门数据</span>
<span class="token comment">// 如何去找技术部所有的子节点</span>
<span class="token keyword">let</span> isRepeat <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 有id就是编辑模式</span>
<span class="token comment">// 编辑 张三 => 校验规则 除了我之外 同级部门下 不能有叫张三的</span>
isRepeat <span class="token operator">=</span> depts<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>id <span class="token operator">&&</span> item<span class="token punctuation">.</span>pid <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">.</span>pid<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>name <span class="token operator">===</span> value<span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 没id就是新增模式</span>
isRepeat <span class="token operator">=</span> depts<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>pid <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">.</span>treeNode<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>name <span class="token operator">===</span> value<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
isRepeat <span class="token operator">?</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">同级部门下已经有</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">的部门了</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 检查编码重复</span>
<span class="token keyword">const</span> <span class="token function-variable function">checkCodeRepeat</span> <span class="token operator">=</span> <span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// 先要获取最新的组织架构数据</span>
<span class="token comment">// 检查重复规则 需要支持两种 新增模式 / 编辑模式</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> depts <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> isRepeat <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 编辑模式 因为编辑模式下 不能算自己</span>
isRepeat <span class="token operator">=</span> depts<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span>id <span class="token operator">&&</span> item<span class="token punctuation">.</span>code <span class="token operator">===</span> value <span class="token operator">&&</span> value<span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">// 新增模式</span>
isRepeat <span class="token operator">=</span> depts<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>code <span class="token operator">===</span> value <span class="token operator">&&</span> value<span class="token punctuation">)</span> <span class="token comment">// 这里加一个 value不为空 因为我们的部门有可能没有code</span>
<span class="token punctuation">}</span>
isRepeat <span class="token operator">?</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">组织架构中已经有部门使用</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">编码</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><blockquote><p>至此，整个组织架构， 我们完成了，组织架构读取 / 新增部门 / 删除部门 / 编辑部门</p></blockquote> <p>如图</p> <p><img src="/hrsass-notes/assets/img/image-20200722134415195.78fb4d1f.png" alt="image-20200722134415195"></p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong> 编辑部门功能实现</p> <h2 id="_11-给数据获取添加加载进度条"><a href="#_11-给数据获取添加加载进度条" class="header-anchor">#</a> 11. 给数据获取添加加载进度条</h2> <p><strong><code>目标</code></strong> 给当前组织架构添加加载进度条</p> <p>由于获取数据的延迟性，为了更好的体验，可以给页面增加一个Loading进度条，采用element的指令解决方案即可</p> <p><strong>定义loading变量</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>loading<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 用来控制进度弹层的显示和隐藏</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>赋值变量给指令</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>loading<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dashboard-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>获取方法前后设置变量</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">async</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDepartments</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>departs <span class="token operator">=</span> <span class="token function">transListToTreeData</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>depts<span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>company <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> result<span class="token punctuation">.</span>companyName<span class="token punctuation">,</span> manager<span class="token operator">:</span> <span class="token string">'负责人'</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/hrsass-notes/assets/js/app.6c8c6ef7.js" defer></script><script src="/hrsass-notes/assets/js/2.dbebf407.js" defer></script><script src="/hrsass-notes/assets/js/8.562a2120.js" defer></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手