vue-admin-gcr v0.0.0

创伤中心业务管理系统

项目简介

创伤中心业务管理系统

当前项目技术栈

• 架构为 Vue3 全家桶 + jS +vite 做的创伤中心业务管理系统。
• ui 框架使用 elementplus

启动项目

npm run dev 开发项目
npm run build 打包应用

目录信息

• api 接口 用来存放网络处理相关代码
  • api/request.ts 封装 axios 请求
  • api/api.ts 所有接口请求
• assets 静态资源 包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件
• components 公共组件（一些可复用，非独立的页面）
• router 放置路由设置文件，指定路由对应的组件
• store 放置 vuex 需要的状态关联文件，设置公共的 state、mutations 等
• App.vue 根组件 views 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；
• main.js 入口文件 作用是引入全局使用的库、公共的样式和方法、设置路由等。
• build 编译后的目录，编译后自动生成
• views 项目页面
• views/login 登录相关页面
  • views/login/adminSet 管理员设置
  • views/login/changePwd 修改密码
  • views/login/firstLogin 第一次登录修改密码
  • views/login/reset 重置（忘记）密码
• views/system 系统设置相关页面
  • views/system/department 科室管理相关页面
  • views/system/account 账号管理相关页面
  • views/system/role 角色管理相关页面
  • views/system/page 页面配置页面
  • views/system/log 日志记录页面
• views/notice 公告相关页面
  • views/notice/noticeList 公告列表
• views/board 数据看板相关页面
• views/report 数据上报相关页面
  • views/report/traumaData/waitReport 待上报
• views/patient 患者列表相关页面

pinia

• Pinia 是 Vue.js 的轻量级状态管理库
• 使用示例： 在 store 中新建 sidebar.ts:

    import { defineStore } from 'pinia'
    export const useSidebarStore = defineStore({
      id: 'sidebar', // id必填，且需要唯一
      state: () => {
        return {
          choose: ['1', '/department']
        }
      },
      actions: {
        updateChoose(choose: any) {
          this.choose = choose
        }
      }
    })

  使用/修改 state 中数据:

    import { useSidebarStore } from '@/store/Sidebar'
    const chooseStore = useSidebarStore()
    const choose = computed(() => chooseStore.choose)
    chooseStore.updateChoose(b)

自定义指令

• utils-btnPermissions.ts 封装了自定义按钮指令'auth',用于控制按钮级权限 使用：

<el-button @click="addDepartment" type="primary" v-auth="`departmentAdd`">新增科室</el-button>

• departmentAdd 是跟后端定义好的每个按钮特定的标识，当后端返回的按钮权限数组中没有这个字符时，按钮会被删除