若依[RuoYi-Vue]使用（五）- 认识ruoyi前端文件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 1. 前端项目结构
• 一、index.vue
• • 1. 控件在网页、代码之间的映对
  • • 1.1.1 控件
    • 1.1.2 参数
    • 1.3
    • 二、dept.js
    • • 1.代码
      • 2.未完待续
      • 总结

        ---

        前言

        以“系统管理 - 部门管理”

        认识若依前端 index.vue

        认识若依前端 dept.js

        

        ---

        1. 前端项目结构

        项目结构

        ├── build // 构建相关

        ├── bin // 执行脚本

        ├── public // 公共文件

        │ ├── favicon.ico // favicon图标

        │ └── index.html // html模板

        ├── src // 源代码

        │ ├── api // 所有请求

        │ ├── assets // 主题 字体等静态资源

        │ ├── components // 全局公用组件

        │ ├── directive // 全局指令

        │ ├── layout // 布局

        │ ├── router // 路由

        │ ├── store // 全局 store管理

        │ ├── utils // 全局公用方法

        │ ├── views // view

        │ ├── App.vue // 入口页面

        │ ├── main.js // 入口 加载组件 初始化等

        │ ├── permission.js // 权限管理

        │ └── settings.js // 系统配置

        ├── .editorconfig // 编码格式

        ├── .env.development // 开发环境配置

        ├── .env.production // 生产环境配置

        ├── .env.staging // 测试环境配置

        ├── .eslintignore // 忽略语法检查

        ├── .eslintrc.js // eslint 配置项

        ├── .gitignore // git 忽略项

        ├── babel.config.js // babel.config.js

        ├── package.json // package.json

        └── vue.config.js // vue.config.js

        ——————————————————————————————————————————

        原文链接：https://blog.csdn.net/qq_41607217/article/details/118962345

        

        ——————————————————————————————————————————

        一、index.vue

        1. 控件在网页、代码之间的映对

        

        ——————————————————————————————————————————

        

        ——————————————————————————————————————————

          
          
          
        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
              
                
              
              
              
              
              
                
                  
                
              
              
                搜索
                重置
              
            
            
            
            
            
              
                新增
              
              
                展开/折叠
              
              
            
            
            
            
            
            
            
            
            
            
            
            
            } 去解构数据 -->
            
            
              
              
              
                
                  
                
              
              
                
                  {{ parseTime(scope.row.createTime) }}
                
              
              
                
                  修改
                  新增
                  删除
                
              
            
            
            
            
            
            
            
            
            
            
              
                
                  
                    
                      
                    
                  
                
                
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                
                
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                
                
                  
                    
                      
                    
                  
                  
                    
                      
                        {{dict.label}}
                      
                    
                  
                
              
              
        
                确 定
                取 消
              
            
          
        
        
        import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
        // 2024.05.31 注释：引入注册
        // @riophae/vue-treeselect 是一个基于 Vue.js 的树形选择器组件，可以用于选择树形结构的数据
        import Treeselect from "@riophae/vue-treeselect";
        import "@riophae/vue-treeselect/dist/vue-treeselect.css";
        // 2024.05.31 注释
        // export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。
        // import就是在一个模块中加载另一个含有export接口的模块， import就是导入。
        // export default和export都能导出一个模块里面的常量，函数，文件，模块等，在其它文件或模块中通过import来导入常量，函数，文件或模块。
        // 在一个文件或模块中，export,import可以有多个，export default却只能有一个。
        // 通过export方式导出，在导入的时候需要加{}大括号，export default 就不需要{}.
        export default {
          name: "Dept",
          // 字典：sys_normal_disable，包括：“正常，停用”两种状态
          dicts: ['sys_normal_disable'],
          // 组件：下拉树
          components: { Treeselect },
          // data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
          // 如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！ 
          // 通过提供 data 函数，每次创建一个新实例后，我们能够调用 data函数，从而返回初始数据的一个全新副本数据对象。
          // 简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的问题。
          // 不使用return包裹的数据会在项目的全局可见，会造成变量污染；
          // 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
          data() {
            return {
              // 遮罩层，遮罩层（Mask）是放置在特定区域上面的一个半透明层，用于阻止用户与该区域的交互，并突出显示上层的内容。遮罩层可以覆盖整个页面，或者只覆盖指定的区域。
              loading: true,
              // 显示搜索条件
              showSearch: true,
              // 表格树数据
              deptList: [],
              // 部门树选项
              deptOptions: [],
              // 弹出层标题
              title: "",
              // 是否显示弹出层
              open: false,
              // 是否展开，默认全部展开
              isExpandAll: true,
              // 重新渲染表格状态
              refreshTable: true,
              // 查询参数
              queryParams: {
                deptName: undefined,
                status: undefined
              },
              // 表单参数
              form: {},
              // 表单校验
              rules: {
                parentId: [
                  { required: true, message: "上级部门不能为空", trigger: "blur" }
                ],
                deptName: [
                  { required: true, message: "部门名称不能为空", trigger: "blur" }
                ],
                orderNum: [
                  { required: true, message: "显示排序不能为空", trigger: "blur" }
                ],
                email: [
                  {
                    type: "email",
                    message: "请输入正确的邮箱地址",
                    trigger: ["blur", "change"]
                  }
                ],
                phone: [
                  {
                    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                    message: "请输入正确的手机号码",
                    trigger: "blur"
                  }
                ]
              }
            };
          },
          created() {
            this.getList();
          },
          methods: {
            /** 查询部门列表 */
            getList() {
              this.loading = true;
              listDept(this.queryParams).then(response => {
                this.deptList = this.handleTree(response.data, "deptId");
                this.loading = false;
              });
            },
            /** 转换部门数据结构 */
            normalizer(node) {
              if (node.children && !node.children.length) {
                delete node.children;
              }
              return {
                id: node.deptId,
                label: node.deptName,
                children: node.children
              };
            },
            // 取消按钮
            cancel() {
              this.open = false;
              this.reset();
            },
            // 表单重置
            reset() {
              this.form = {
                deptId: undefined,
                parentId: undefined,
                deptName: undefined,
                orderNum: undefined,
                leader: undefined,
                phone: undefined,
                email: undefined,
                status: "0"
              };
              this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
              this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
              this.resetForm("queryForm");
              this.handleQuery();
            },
            /** 新增按钮操作 */
            handleAdd(row) {
              this.reset();
              if (row != undefined) {
                this.form.parentId = row.deptId;
              }
              this.open = true;
              this.title = "添加部门";
              listDept().then(response => 
              {
                this.deptOptions = this.handleTree(response.data, "deptId");
              });
            },
            /** 展开/折叠操作 */
            toggleExpandAll() {
              this.refreshTable = false;
              this.isExpandAll = !this.isExpandAll;
              this.$nextTick(() => {
                this.refreshTable = true;
              });
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
              this.reset();
              getDept(row.deptId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改部门";
                listDeptExcludeChild(row.deptId).then(response => {
                  this.deptOptions = this.handleTree(response.data, "deptId");
                  if (this.deptOptions.length == 0) {
                    const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
                    this.deptOptions.push(noResultsOptions);
                  }
                });
              });
            },
            /** 提交按钮 */
            submitForm: function() {
              this.$refs["form"].validate(valid => {
                if (valid) {
                  if (this.form.deptId != undefined) {
                    updateDept(this.form).then(response => {
                      this.$modal.msgSuccess("修改成功");
                      this.open = false;
                      this.getList();
                    });
                  } else {
                    addDept(this.form).then(response => {
                      this.$modal.msgSuccess("新增成功");
                      this.open = false;
                      this.getList();
                    });
                  }
                }
              });
            },
            /** 删除按钮操作 */
            handleDelete(row) 
            {
              // 2024.05.31 this.$modal.confirm() 就是一个信息提示框
              this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
                return delDept(row.deptId);
              }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
              }).catch(() => {});
            },
          }
        };
        
        

        1.1.1 控件

        el-input：编辑框

        el-select：下拉框

        el-button：按钮

        1.1.2 参数

        // 传入的参数

        v-model=“queryParams.deptName”

        // 提示文本

        placeholder

        // 可以将选择的内容进行清除

        clearable

        // 相关联的函数名

        @keyup.enter.native=“handleQuery”

        // 按钮

        type=“primary” //按钮是蓝色

        type=“warning” //按钮是橙色

        type=“danger” //按钮是红色

        type=“view” //按钮是透明白色

        type=“success” //按钮是绿色

        

        1.3

        二、dept.js

        1.代码

        代码如下（示例）：

        import request from '@/utils/request'
        // 查询部门列表
        export function listDept(query) {
          return request({
            url: '/system/dept/list',
            method: 'get',
            params: query
          })
        }
        // 查询部门列表（排除节点）
        export function listDeptExcludeChild(deptId) {
          return request({
            url: '/system/dept/list/exclude/' + deptId,
            method: 'get'
          })
        }
        // 查询部门详细
        export function getDept(deptId) {
          return request({
            url: '/system/dept/' + deptId,
            method: 'get'
          })
        }
        // 新增部门
        export function addDept(data) {
          return request({
            url: '/system/dept',
            method: 'post',
            data: data
          })
        }
        // 修改部门
        export function updateDept(data) {
          return request({
            url: '/system/dept',
            method: 'put',
            data: data
          })
        }
        // 删除部门
        export function delDept(deptId) {
          return request({
            url: '/system/dept/' + deptId,
            method: 'delete'
          })
        }
        

        ---

        2.未完待续

        ---

        总结