目录
2.8 新增功能-提交-取消-关闭 （新增知识sync修饰符）
2.9 编辑部门功能实现数据回写 （新知识，获取组件实例可以调组件方法）
首先，我们需要知道类似这种大型中台项目的页面路由是如何设置的。
因为复杂中台项目的页面众多，不可能把所有的业务都集中在一个文件上进行管理和维护，并且还有最重要的，前端的页面中主要分为两部分，一部分是所有人都可以访问的， 一部分是只有有权限的人才可以访问的，拆分多个模块便于更好的控制
删除多余的静态路由表 src/router/index.js
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]并且我们发现，删除了其他页面之后，左侧导航菜单的数据也只剩下了首页
接下来，我们可以将人力资源需要做的模块快速搭建相应的页面和路由
根据上图中的结构，在views目录下，建立对应的目录，给每个模块新建一个index.vue，作为每个模块的主页
$ mkdir departments employees setting salarys social attendances approvals permission根据以上的标准建立好对应页面之后，接下来建立每个模块的路由规则
$ touch departments.js employees.js setting.js salarys.js salarys.js social.js attendances.js approvals.js permission.js设置每个模块的路由规则
如员工 employees.js
// 导出属于员工的路由规则
import Layout from '@/layout'
// { path: '', component: '' }
// 每个子模块 其实 都是外层是layout 组件位于layout的二级路由里面
export default {
path: '/employees', // 路径
name: 'employees', // 给路由规则加一个name
component: Layout, // 组件
// 配置二级路的路由表
children: [{
path: '', // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由
component: () => import('@/views/employees'),
// 路由元信息 其实就是存储数据的对象 我们可以在这里放置一些信息
meta: {
title: '员工管理' // meta属性的里面的属性 随意定义 但是这里为什么要用title呢， 因为左侧导航会读取我们的路由里的meta里面的title作为显示菜单名称
}
}]
}
// 当你的访问地址 是 /employees的时候 layout组件会显示 此时 你的二级路由的默认组件 也会显示 上述代码中，我们用到了meta属性，该属性为一个对象，里面可放置自定义属性，主要用于读取一些配置和参数，并且值得注意的是：我们的meta写了二级默认路由上面，而不是一级路由，因为当存在二级路由的时候，访问当前路由信息访问的就是二级默认路由
实现组织架构的头部内容:
首先实现头部的结构，采用element的行列布局
<el-card class="tree-card">
<!-- 用了一个行列布局 -->
<el-row type="flex" justify="space-between" align="middle" style="height: 40px">
<el-col>
<span>江苏传智播客教育科技股份有限公司</span>
</el-col>
<el-col :span="4">
<el-row type="flex" justify="end">
<!-- 两个内容 -->
<el-col>负责人</el-col>
<el-col>
<!-- 下拉菜单 element -->
<el-dropdown>
<span>
操作<i class="el-icon-arrow-down" />
</span>
<!-- 下拉菜单 -->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>添加子部门</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>树形组件认识
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>实现树形的静态组织架构
<el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
<!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
<!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据 data 每个节点的数据对象-->
<el-row slot-scope="{ data }" type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
<el-col>
<!-- 左侧内容 -->
<span>{{ data.name }}</span>
</el-col>
<el-col :span="4">
<el-row type="flex" justify="end">
<el-col>{{ data.manager }}</el-col>
<el-col>
<!-- 放置下拉菜单 -->
<el-dropdown>
<!-- 内容 -->
<span>操作
<i class="el-icon-arrow-down" />
</span>
<!-- 具名插槽 -->
<el-dropdown-menu slot="dropdown">
<!-- 下拉选项 -->
<el-dropdown-item>添加子部门</el-dropdown-item>
<el-dropdown-item>编辑部门</el-dropdown-item>
<el-dropdown-item>删除部门</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<!-- 右侧内容 -->
</el-col>
</el-row> </el-tree>
<script>
export default {
data() {
return {
departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
{ name: '行政部', manager: '刘备' },
{ name: '人事部', manager: '孙权' }],
defaultProps: {
label: 'name' // 表示 从这个属性显示内容
}
}
}
}
</script>
<template>
<el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%">
<el-col>
<!-- 名称应该变成 对应的节点中的name -->
<span>{{ treeNode.name }}</span>
</el-col>
<el-col :span="4">
<el-row type="flex" justify="end">
<!-- 两个内容 -->
<el-col>{{ treeNode.manager }}</el-col>
<el-col>
<!-- 下拉菜单 element -->
<el-dropdown>
<span>
操作<i class="el-icon-arrow-down" />
</span>
<!-- 下拉菜单 -->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>添加子部门</el-dropdown-item>
<el-dropdown-item>编辑部门</el-dropdown-item>
<el-dropdown-item>删除部门</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<script>
// 该组件需要对外开放属性 外部需要提供一个对象 对象里需要有name manager
export default {
// props可以用数组来接收数据 也可以用对象来接收
// props: { props属性: { 配置选项 } }
props: {
// 定义一个props属性
treeNode: {
type: Object, // 对象类型
required: true // 要求对方使用您的组件的时候 必须传treeNode属性 如果不传 就会报错
}
}
}
</script>在组织架构中应用操作栏组件
封装API接口，获取组织架构数据
import TreeTools from './components/tree-tools'
import { getDepartments } from '@/api/departments'
export default {
components: {
TreeTools
},
data() {
return {
company: { }, // 就是头部的数据结构
departs: [],
defaultProps: {
label: 'name' // 表示 从这个属性显示内容
}
}
},
created() {
this.getDepartments() // 调用自身的方法
},
methods: {
async getDepartments() {
const result = await getDepartments()
this.company = { name: result.companyName, manager: '负责人' }
this.departs = result.depts // 需要将其转化成树形结构
console.log(result)
}
}
}将数组数据转化成树形结构
封装删除接口，注册下拉菜单事件
调用删除接口，通知父组件更新数据
们需要构建一个新增部门的窗体组件
src/views/department/components/add-dept.vue
<template>
<!-- 新增部门的弹层 -->
<el-dialog title="新增部门">
<!-- 表单组件 el-form label-width设置label的宽度 -->
<!-- 匿名插槽 -->
<el-form label-width="120px">
<el-form-item label="部门名称">
<el-input style="width:80%" placeholder="1-50个字符" />
</el-form-item>
<el-form-item label="部门编码">
<el-input style="width:80%" placeholder="1-50个字符" />
</el-form-item>
<el-form-item label="部门负责人">
<el-select style="width:80%" placeholder="请选择" />
</el-form-item>
<el-form-item label="部门介绍">
<el-input style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
</el-form-item>
</el-form>
<!-- el-dialog有专门放置底部操作栏的 插槽 具名插槽 -->
<el-row slot="footer" type="flex" justify="center">
<!-- 列被分为24 -->
<el-col :span="6">
<el-button type="primary" size="small">确定</el-button>
<el-button size="small">取消</el-button>
</el-col>
</el-row>
</el-dialog>
</template>点击新增子部门显示弹层组件
完成新增表单的基本校验条件
配置新增表单的基本校验规则
data() {
return {
// 定义表单数据
formData: {
name: '', // 部门名称
code: '', // 部门编码
manager: '', // 部门管理者
introduce: '' // 部门介绍
},
// 定义校验规则
rules: {
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' },
{ min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' }],
code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
{ min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' }],
manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
{ trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }]
}
}
}部门名称和部门编码的自定义校验
处理首部内容的pid数据
sync修饰符）
利用sync修饰符关闭新增弹层
取消时重置数据和校验
点击编辑弹出层，记录当前节点
父组件调用子组件的获取详情方法
根据计算属性显示控制标题
封装编辑接口，保存区分场景
校验规则支持编辑场景下的校验
// 现在定义一个函数 这个函数的目的是 去找 同级部门下 是否有重复的部门名称
const checkNameRepeat = async(rule, value, callback) => {
// 先要获取最新的组织架构数据
const { depts } = await getDepartments()
// 检查重复规则 需要支持两种 新增模式 / 编辑模式
// depts是所有的部门数据
// 如何去找技术部所有的子节点
let isRepeat = false
if (this.formData.id) {
// 有id就是编辑模式
// 编辑 张三 => 校验规则 除了我之外 同级部门下 不能有叫张三的
isRepeat = depts.filter(item => item.id !== this.formData.id && item.pid === this.treeNode.pid).some(item => item.name === value)
} else {
// 没id就是新增模式
isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
}
isRepeat ? callback(new Error(`同级部门下已经有${value}的部门了`)) : callback()
}
// 检查编码重复
const checkCodeRepeat = async(rule, value, callback) => {
// 先要获取最新的组织架构数据
// 检查重复规则 需要支持两种 新增模式 / 编辑模式
const { depts } = await getDepartments()
let isRepeat = false
if (this.formData.id) {
// 编辑模式 因为编辑模式下 不能算自己
isRepeat = depts.some(item => item.id !== this.formData.id && item.code === value && value)
} else {
// 新增模式
isRepeat = depts.some(item => item.code === value && value) // 这里加一个 value不为空 因为我们的部门有可能没有code
}
isRepeat ? callback(new Error(`组织架构中已经有部门使用${value}编码`)) : callback()
}
建立公司角色页面的基本结构
<template>
<div class="dashboard-container">
<div class="app-container">
<el-card>
<el-tabs>
<!-- 放置页签 -->
<el-tab-pane label="角色管理">
<!-- 新增角色按钮 -->
<el-row style="height:60px">
<el-button
icon="el-icon-plus"
size="small"
type="primary"
>新增角色</el-button>
</el-row>
<!-- 表格 -->
<el-table border="">
<el-table-column label="序号" width="120" />
<el-table-column label="角色名称" width="240" />
<el-table-column label="描述" />
<el-table-column label="操作">
<el-button size="small" type="success">分配权限</el-button>
<el-button size="small" type="primary">编辑</el-button>
<el-button size="small" type="danger">删除</el-button>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-row type="flex" justify="center" align="middle" style="height: 60px">
<!-- 分页组件 -->
<el-pagination layout="prev,pager,next" />
</el-row>
</el-tab-pane>
<el-tab-pane label="公司信息">
<el-alert
title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
type="info"
show-icon
:closable="false"
/>
<el-form label-width="120px" style="margin-top:50px">
<el-form-item label="公司名称">
<el-input disabled style="width:400px" />
</el-form-item>
<el-form-item label="公司地址">
<el-input disabled style="width:400px" />
</el-form-item>
<el-form-item label="邮箱">
<el-input disabled style="width:400px" />
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" :rows="3" disabled style="width:400px" />
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</div>
</template>读取角色列表数据
读取公司信息数据
封装编辑接口，新建编辑弹层
实现编辑功能，为新增功能留口
新增功能实现和编辑功能合并（处理关闭）
