# MES

**Repository Path**: gengzhig/mes

## Basic Information

- **Project Name**: MES
- **Description**: MES
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-27
- **Last Updated**: 2025-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Saber 简介

MES 产品重构

```
cnpm install jquery --save-dev（已安装）
cnpm install --save-dev bootstrap@3.3.6（已安装,按需引入,目前使用在工站模型UI设计）
cnpm install --save popper.js # bootstrap插件需要使用（已安装）
cnpm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0（未安装）
cnpm install --save ag-grid（未安装）
npm install --save layui-layer（已安装）
npm install --save gojs（已安装）
cnpm install vue-okr-tree  #织架构数组件，文档地址：http://www.longstudy.club/vue-okr-tree-doc/index.html（未安装）
cnpm install --save @riophae/vue-treeselect（未安装）
cnpm install echarts --save（已安装）
npm install moment --save（已安装）
npm install sockjs（已安装）
npm install stompjs（已安装）
```

### 全局安装 eslint

```
下载 npm install eslint -g
或 npm install eslint --save-dev
--save-dev 会把 eslint 安装到 package.json 文件中的 devDependencies 属性中，意思是只是开发阶段用到这个包，上线时就不需要这个包了
执行 eslint --init
代码校验 npm run lint

如若在代码中出现校验Eslint报错，可查阅http://eslint.cn/docs/rules/查看校验规则,在.eslintrc.js中配置是否校验该规则来解决报错;
```

### 在 settings.json 中配置

```
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.options.tabSize": 4,
  "vetur.format.options.useTabs": false,
  "vetur.format.defaultFormatter.js": "vscode-typescript", // js 不换行
 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "eslint.autoFixOnSave": true //ESLint自动修复保存
  }
```

### 使用.prettierrc 美化格式方式已代码文件形式实现统一

```
1. 统一格式在一级文件夹.prettierrc中,现有配置说明如下(随着编码的多元后期增加其他属性)：
{
    "printWidth": 120,
    "bracketSpacing": true, // 对象中的空格 默认true
    "arrowParens": "avoid", // 箭头函数一个参数时省略（）
    "semi": true, // 行尾分号
    "trailingComma": "none", // 行尾逗号（none,es5,all）
    "singleQuote": false, // 使用单引号
    "tabWidth": 4, // tab缩进大小,默认为2
    "useTabs": false // 使用tab缩进，默认false
}
2. 拉取代码后会出现.prettierrc文件夹,于编译器扩展插件中搜索prettierrc,安装Prettier - Code formatter插件;
3. 于代码界面鼠标右键选择'使用...格式化文档';
4. 于上方弹出的选项中选择'配置默认格式化程序...';
5. 选择'Prettier-Code formatter'即可;
6. 如此操作杜绝了每个人需要去繁杂的配置,过程中还有出错的可能，偏强制性达到统一风格。
```

### 使用 lodash-es，通过 tree-shaking 方式按需引入

```
cnpm install lodash-es --save
--使用方法
import {isEmpty,forIn, cloneDeep} from 'lodash-es'
请求接口处理数据时使用例如：get()方法处理不容易出现报错。
更多数据处理方法见：https://www.lodashjs.com/。

--针对非单层对象需要进行深拷贝 ，单层可以使用{...}
import { cloneDeep } from 'lodash-es'
```

#### 目录结构

```
├── build                      # 构建相关
├── public                     # 静态资源
│   │── cdn                    # 存放框架中所使用的库的资源包
│   │── img                    # 图片资源
│   │── svg                    # 存放使用svg画出的资源
│   │── util                   # 存放了判断展示页面屏幕的大小的函数以及浏览器版本过低时页面显示的页面
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求(与各个组建相对应的请求地址)
│   ├── components             # 全局公用组件,公共可复用部分,存放了框架的基础容器组件basic-container和一些错误页面的组件
│   ├── config                 # 框架内一些公共静态信息/公共图标信息和页面信息、测试/开发/生产环境的baseURL
│   ├── docker                 # 发布docker相关
│   ├── lang                   # 国际化 language 中/英文配置语言 繁体待确认
│   ├── mixins                 # 不同的颜色信息(自定义主题)
│   ├── mock                   # 项目mock 模拟数据
│   ├── option                 #
│   ├── page                   # 主体布局页面/基础页面结构
│   ├── router                 # 路由
│   ├────── avue-router.js     # 全局avueRouter,该全局对象的方法可方便灵活的对路由进行处理
│   ├────── axios.js           # 全站http配置 axios参数说明
│   ├────── router.js          # 全站路由配置
│   ├── store                  # 存放所有状态以及数据,数据传递都通过Store来进行
│   ├────── modules            # 组件相对应的各级目录/对应组件的状态与数据,每个module还定义了状态改变的函数,组件内可调用
│   ├── styles                 # 全局样式
│   ├── util                   # 全局公用JS方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理,路由跳转前后的处理，保证了拥有权限时才能进行页面的路由跳转
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── postcss.config.js          # postcss 配置
├── package.json               # 生产/开发环境依赖包信息
└── vue.config.js              # 对服务器进行了反向代理(根据IP地址变更数据请求)
```

### 页面创建时里面默认方法内容

**备注**

```
       设置表格属性
      :option="option"
        用来存取页面的值
      v-model="form"
      获取后台数据
      :data="data"
      :table-loading="loading"
      分页
      :page="page"
      权限控制  操作按钮动态显示
      :permission="permissionList"
      打开前回调
      :before-open="beforeOpen"
       关闭前回调
      :before-close="beforeClose"
       获取dom 结构
      ref="crud"
       数据编辑后出发
      @row-update="rowUpdate"
      新增数据确定后执行
      @row-save="rowSave"
      行删除
      @row-del="rowDel"
       点击搜索后触发该事件
      @search-change="searchChange"
       清空搜索回调方法
      @search-reset="searchReset"
      当选择项发生变化时会触发该事件
      @selection-change="selectionChange"
      @current-change="currentChange"
      点击每页多少条
      @size-change="sizeChange"
      点击刷新
      @refresh-change="onLoad(page)"
      初始化页面
      @on-load="onLoad"
```