item-management-web

item-management-web

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

文档

1.接口

接口全部放在 api 目录 得module 下， 可以单模块import 使用 也可以全局使用 this.$api.文件名.function

添加一个模块，只需要在api/modules/目录下 添加一个js 文件即可工程化引入

2.项目图标

直接将png 和 svg 图标放入 /src/icons 下得对应目录。 访问http://localhost:9518/#/icons 即可查看，点击复制使用.支持svg,png,element图标以及base64、网络地址

图标做了工程化管理，

3. 代码质量

使用eslint 标准风格，本地代码不符合要求禁止提交。

/* eslint-disable */ 单文件禁用
/* eslint-disable no-new */ 
/* eslint-disable-next-line */ 下一行
当前行校验 some code // eslint-disable-line

 /* eslint-disable */ 一部分代码 /* eslint-enable */

rule规则修改还是在 .eslintrc.js

4. ico 修改直接修改public/favicon.ico 图标

5. 目录说明

   -public
   -src
        -api // 接口定义
        -assets
        -components
        -icons
        -layout // router-view得工作，布局性得组件
        -router
        -store
        -styles
        -utils // 工具函数
        -vendor
        -views
        -VueConfig // 这个目录主要是简化main.js ，作为统一vue 三方引入入口
            -mixin 用户及常用数据 加入mixin
            -prototype 挂载vue 全局 prototype
            -globalComponents 三方全局挂在的组件
            -directive
            -filters
            -styles 三方的
        App.vue
        main.js
        settings.js // 全局性设置定义

6. 权限

7. 禁用调试功能

在main.js 的头部调用

8. 全局引入

* element
* 接口 this.$api.文件名.function
* this.$moment
* this.$qs
* this.$vueCookies
* this.$webStorage

9. 菜单配置，权限说明

1. 路由分为两种，有权限、无权限。有权限router 在页面菜单设置配置（但本地要留有router配置备份，如/router/modules_bak 这个备份目录），无权限得写入本地router
2. 页面菜单设置配置，首先需要在 /router/urlMap.js 做响应配置，urlMap.js 有注释说明，包括一些约定
3. 按钮权限，在需要配置按钮权限得页面引入组件  参入该按编号 menuNo控制权限，如：岗位管理views/set/post/index 的使用
    ```
    import PermissionButton from '@/components/PermissionButton/PermissionButton'
    // 纯操作性的 name不写会自动从配置中读取
    <PermissionButton menu-no="_views_set_post_edit" type="primary" name="编辑" @click="handleUpdate(row)"/>
    // 需要获取按钮 数据的. 需要自己做跳转一定注意url 菜单层级参数  name不写会自动从配置中读取
    <PermissionButton menu-no="_views_set_post_remove" type="danger" name="删除" @click="(data) =>{handleDelete(row, data)}"/>
    // 纯跳转性的  name不写会自动从配置中读取
    <PermissionButton menu-no="_views_set_post_auth" type="warning" name="权限" :page-jump="true" :page-query="{id: row.id}"/>

    // 需要阻止冒泡调用 PermissionButtonStop.vue 组件
    import PermissionButton from '@/components/PermissionButton/PermissionButtonStop'

    // 其他实列
    // 1.导入模板下载，导入(menu-no 设置为相同)
            <PermissionButton
              menu-no="_views_staff_list_import"
              class-name="filter-item"
              icon="el-icon-download"
              name="导入模板下载"
              @click="exportFile"
            />

            <el-upload
              class="filter-item"
              style="display: inline-block;margin-left: 10px;"
              action=""
              :before-upload="beforeUpload"
            >
              <PermissionButton
                menu-no="_views_staff_list_import"
                class-name="filter-item"
                type="primary"
                icon="el-icon-upload2"
                name="导入"
              />
            </el-upload>


    // 2. 图标按钮
                <PermissionButton
                  menu-no="_views_staff_eduDetail"
                  class-name="filter-item"
                  name=""
                  type="text"
                  :page-jump="true"
                  :page-query="{id: row.id}"
                >
                  <svg-icon
                    icon-class="edit"
                    style="color: #157ddd;transform: scale(1.5);cursor: pointer;"
                  />
                </PermissionButton>

    ```
4. 目录是不需要配置url， 按钮分为两种，纯操作的按钮，和需要绑定页面的（需要按菜单来处理，否则会404）
5. 页面的url参数：记录四个参数，一二三级菜单Id(menuLevel1,menuLevel2,menuLevel3)，当前页面菜单id（使用menuId字段）
   * 【所有页面都要带上四个菜单的参数】

999.开发时注意

   1. 设计审批的新增编辑页面 都新开页面 使用弹窗， 需要 从审批哪里调整回来查看详情
   1. 列表查询 统一 点击搜索时查询，查询条件多的列表需要加一个重置按钮
   1. 移动端涉及到导入导出的都去掉
   1. vue style 要加 scoped， 不能加得情况也必须有命名空间。避免污染其他页面
   1. 项目通用性得页面，可以在 views/DOME/ 下写一些demo方便使用
   1. 主键的 name 命名： 与编码一致（用于 keep-alive缓存） 如：编码为：_views_baseinfo_department_list  那么组件name 为 ViewsBaseinfoDepartmentList
   1. 为了调试方便  编码、url、组件映射 都是 组件在/views 下的路径一致

警告

vue-photo-preview 包安装数据源有问题。 勿使用 yarn 安装会报错