部门管理
部门管理的页面内容，写在 src/views/dept/index.vue 中。
基本布局
首先，根据页面原型、需求说明、接口文档，先完成页面的基本布局 。 可以参考 ElementPlus 中的组件，拷贝过来适当做一个改造。
我们先来完成页面的基本布局。
部门管理组件 src/views/dept/index.vue 具体的页面布局代码如下：
在dept下的index.vue开发部门管理
先用H1定义部门标签
然后再去 ElementPlus 官网按钮插件
然后再设置外边距 然后再去官网找到表格组件进行拷贝过来，
然后把数据模型也考过来，然后再加上一个响应式数据ref
然后在对表格组件进行改造lable写上名字 我们要拿到表格的序号从一往下自增如果需要显示，所以可以增加一列设置属性，可以从一开始
在prop中要展示所有的内容 label定义表头名称，最后这个操作的字段要定义两个按钮这里要用到自定义列模板然后定义两个按钮编辑和删除
然后再加上居中然后在按钮上加上相应的图标
表格中每一列展示的属性 prop 都是根据接口文档来的，接口文档返回什么样的数据，我们就安装对应的数据格式进行解析。
加载数据
根据需求，需要在新增、修改、删除部门之后，加载最新的部门数据。 在打开页面之后，也需要自动加载部门数据。 那接下来，我们就需要基于axios发送异步请求，动态获取数据。
需要在 src/views/dept/index.vue 中增加如下代码，在页面加载完成发送异步请求（https://apifoxmock.com/m1/3128855-1224313-default/depts），动态加载的Axios。
利用apifox的线上mock服务生成假数据
利用关键词引入axios
然后定一个查询函数发起请求
进行判断是否响应成功然后查询成功之后
将所对应的值赋值给对应的数据模型
然后再引入对应的钩子函数
定义钩子函数然后再调用查询函数
我们原来写的这个异步请求，我们会发现两个问题，第一个是请求路径难以维护，第二个是数据解析过于繁琐
我们要解决这两个问题我们要定义一个请求处理的工具类request.js这个类 它会创建一个axios实例对象重新分装然后定义了两个属性，一个是请求前缀，另一个是访问的超时时间，这样就可以解决第一个问题
然后第二个问题，我们需要靠axios的response拦截器来处理然后他就可以发送响应请求以后都基于这个实例对象来发送请求，响应给前端的时候他就会拦截进行处理调用use这个方法然后他成功之后直接返回数据
与服务端进行异步交互的逻辑时，通常会封装到一个单独的APi当中如dept.js然后在这个类当中先要引入上面那个工具类然后在这个类中定义一个方法用来查询然后这个url直接写后面这个部分前面那个部分已经在上各类
当中写了到时候可以直接拼装
然后最后一步在vue组建当中调用相关的部门查询函数直接可以
因为request.js是项目的源文件最终都要打包所以不能写死,这样不便于项目的维护, 这样我们可以把路径改成/api,然后再前端的配置文件当中进行路径重写和配置一个代理服务器，同时在进行路径重写把APi删掉，那可以判断如果是以开头/api就是请求后段的项目这就是反向代理
新增部门
新增部门和编辑部门，可以同用一个Dialog对话框。而这个对话框中，主要包括两个ElementPlus中的组件，分别为：Dialog对话框组件，Form表单组件。
新增部门添加我们是用到了前端的对话框首先那点击这个按钮会弹出对话框然后去官网找到对应的组件还有要把他的数据模型声明一下然后同时默认值给他设置一个false要把它隐藏起来, 然后整个表达的数据要绑定在dept当中然后将表单相的名字改为部门名称，然后再修改一下宽度
定义一个保存的函数
然后再在声明dept对象然后加上一个属性name然后将输入的值添加到这个属性当中，然后再对两个按钮进行设置一个是取消，一个是确定取消的话，我们就直接把它设为false 把它隐藏起来确定的话我们要调用一个事件把它保存起来，同时也要在把它隐藏起来
这里我们再美化一下对话框的标题同时呢，我们要为新增部门添加一个事件，在新增部门这个按钮上添加然后对他进行说明当点击它的时候我们变为ture
因为我们在新增和编辑当中都要用到这个对话框，所以我们要复用他，然后要为他动态的绑定一个然后再声明一个数据模型用来绑定对应的名字，然后再回到上一个事件当中在点击的同时变为true的时候绑定对应的值设置标题
这里我们再加上与后端交互的逻辑在dept这个类当中定义一个新增函数用来与后端交互，同时呢，因为我们要传递参数然后在括号中写上对应的参数名字，同时那将get改为post 然后再在后面的括号把请求参数传到了
然后我们再翻回来当我们点击确定的按钮的时候调用save这个函数这个里面调用刚刚与后端交互的那个函数addapi 同时呢，我们在括号当中传入参数用点value的方式，那我们再加上await和async然后我们再进行判断成功了，还是失败了判断他返回的code值,如果成功了，我们第一步要提示信息用alert，第二部然后再关闭对话框设置成false,然后第三部调用查询函数如果失败了，我们直接输入提示信息，
因为我们使用的alert它具有堵塞效果你必须点击确定他才能消失所以我们这里使用光官网的提示信息先引入对应的组件,然后更换为它里面的方法更换提示信息
这里我们会发现当我们再次点击新增部门的时候他就有他还会保留上一次的内容此时我们再找到新增的函数再增加一个设置为新增部门之后然后我们将对应的这个属性name设置为空串
