hongze_fsms_web

弘则研究财务报表后台管理系统

运行

1. npm install -- 安装依赖 --
2. npm run dev -- 本地调试 --
3. npm run build.test -- 测试环境打包 --
4. npm run build -- 生产环境打包 --
5. node --version = 16.0.0

开发文件目录

1. /src/api 服务端api接口配置
2. /src/assets 静态资源文件夹
   • svg-icons文件夹 - 自定义svg图标组件所加载的文件夹
3. /src/components -- 全局组件文件夹
   • mPage.vue -- 分页器
4. /src/directives 自定义指令文件夹
   • buttonPermission.js -- 按钮权限控制指令
5. /src/layout 页面外层框文件夹
6. /src/router 路由文件夹
7. /src/store vuex状态管理
   • modules -- 模块文件夹
   • index.js -- 批量导入modules中的文件，创建状态管理器
   • namespaced:true -- 各模块的命名名称为文件名 例如：state.user.token 、dispatch('router/setRoutes')
8. /src/styles 样式文件夹
   • 修改element-plus主题样式文件：element.scss
9. /src/utils 工具函数文件夹
   • request.js -- axios请求函数封装工具
   • validators.js -- 复用的表单验证项工具
10. /src/views 页面文件夹
11. permission.js 全局路由守卫

开发说明

1. 项目对element-plus做了按需导入和自动导入，也对vue中的方法做了自动导入，在.vue文件中使用element-plus和vue的组件和方法是不需要引入 但是对于element-plus的命令式组件 例如ElMessage和ELMessageBox还需自己引入。 引入的组件和方法在 auto-imports.d.ts 和 components.d.ts 可查看。 由于项目需要引入elemet-plus的所有图标库，所以对于element-plus的图标并没有做自动和按需导入
2. 项目路由分为固定路由和动态路由,固定路由配置在 /src/router/index.js 中，动态路由从服务端获取，存入到vuex中，并通过router.addRoute()方法 注入到router中，详情请看store的router模块的 setRoutes 方法。 需要加入权限管理的按钮也需要存入vuex中，详情请看store的router模块的 getPermissionButtons 方法。
3. 在开发完一个页面或者模块时，需要到菜单管理模块添加路由，目前项目的菜单等级包括按钮等级只到三级，所以三级菜单下的按钮请添加到对应的二级菜单下
   1. 添加/编辑菜单
      • 上级菜单 -- 返回前两级的菜单，不选择则为一级菜单
      • 路由名称 -- route中的name属性
      • 路由地址 -- 这一级别的路由，不是完成的路由、
      • 组件路径 -- 文件路径，从views文件夹开始的路由，不带上文件名 例如 views/systemManagement/menuM
      • 是否隐藏 -- route中的hidden属性，控制是否在左边的导航栏显示
      • 是否有Layout -- 这个页面是否在外层框架下面
   2. 做三级路由时请注意，其实并没有真的三级路由，只是面包屑想要显示三级，真的还不如做个全屏的弹窗，还不用页面间传递参数。 三级路由是在二级路由的页面中放入一个router-view，然后跳转到三级页面时将这个二级页面的对应内容去掉。具体请参照 views/systemManagement/roleM.vue 角色管理页面，如果有更好的方法可以在该文档中写上。
4. 一些按钮或者区域需要加入到权限控制时，需要permission自定义指令，指令接受的参数值为添加按钮时的按钮ID
   1. 添加/编辑按钮
      • 上级菜单 -- 该按钮绑定在哪级菜单下，注意三级菜单的按钮需要绑定到二级菜单下
      • 菜单标题 -- 设置角色权限时的区分，暂时并不会真的修改到按钮的文本
      • 按钮ID -- 按钮权限控制的唯一标识，唯一不能重复。
      • 为了避免按钮Id重复，使用菜单各级别的名称：按钮作用标识，例如 添加部门 -- system:dept:add

5. 本项目封装了svg图标组件 => src/components/SvgIcon/index.vue

   1. 组件会加载 src/assets/svg-icons 文件夹下面的svg图片，需要图标方式使用的svg图片的请放到该文件。
      • 使用方式：svgIcon的 name 属性为 svgIcon-[dir]-[name] svgIcon：前缀 dir：文件夹名 name：文件名 表示使用 'dir'文件夹下的'name'文件名的svg图片
   2. 使用的svg图片如果不需要改变颜色，就可以直接使用；需要通过属性改变颜色需要对svg文件做一些修改，如 - 菜单图标
      • 对需要变色的区域做一些修改。
      • 使用v-bind修改颜色：需要将需要修改颜色的标签的fill属性去除 方可通过v-bind方式修改颜色 svgIcon上的color属性
      • 使用css修改颜色：需要将需要修改颜色的标签的fill属性的值设为'currentColor' ,方可通过css修改颜色。
      • 两种方式可以混用。

   3. import ids from 'virtual:svg-icons-names' 可以获取所有图标的symbolId，即为svgIcon的name属性，返回值为一个数组。

      提示：开发之前可以瞅一眼 组件封装和工具函数的文件夹 看是否有你需要的东西，能省点事就省点事嘛.