npm package: @mega-apps/mom-mes-standard
Description: MES WEB
Author: zhangweifeng
Latest version: 2.5.8

# BrisaYun

> My unreal Nuxt.js project

## Build Setup

``` bash
# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate
```

For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

## eslint 自动规范代码
```
npm run lint -- --fix
```

## SPA打包
```
npm run build -- --spa
```

## docker打镜像
```
npm run build -- --spa
docker build -t mes-webapp:V1.0.0 .
```

## docker启动
```
docker run -d -p 3000:80 -e SERVER_URL=https://t-gateway.mega-insight.com -e UAA_URL=https://t-uaa.mega-insight.com mes-webapp:V1.0.0
```

## 基础组件

### ArrSelect
对单选框进行封装
* 传参
  * v-model 绑定数据
  * disabled 是否禁用
  * options 单选框选项数组，如 ['Y', 'N']
* demo
  ```
  <ArrSelect
    v-model="myVal"
    :options="['A', 'B', 'C', 'D']"/>
  ```  
* 效果图  
  ![](images/arrSelect.png)

### Position
对坐标的封装
* 传参
  * v-model 绑定数据
  * disabled 是否禁用
  * split 分隔符（默认为^）
* demo
  ```
  <Position
    v-model="myVal"/>
  ``` 
* 效果图  
  ![](images/position.png)  
  其对应的值为 1^1
  
### TableSelect
单选框支持从数据库直接查询选项
* 传参
  * v-model 绑定数据
  * disabled 是否禁用
  * table 查询的表名
  * column 查询的字段名
  * relyColumn 查询条件：字段
  * relyValue 查询条件：字段对应的值
* demo
  ```
  <TableSelect
     v-model="myVal"
     table="C_FAC_STATION"
     column="station_id"
     rely-column="line_id"
     rely-value="ASM01-1"/>
  ``` 
  示例中，会从C_FAC_STATION表中查询station_id作为选项，查询时限制条件为line_id=ASM01-1，对应sql如:
  ```
  select station_id from C_FAC_STATION where line_id=ASM01-1
  ```
* 效果图  
  ![](images/tableSelect.png)  
  
## 通用基础设定指导

### 配置
配置文件路径为 assets/js/config.js ，大致结构如下
```
line: {
  tableName: 'C_FAC_LINE',
  idName: 'line_id',
  searchColumns: [...],
  selectColumns: [...],
  tableColumns: [...],
  columns: [...],
  i18n: {...}
}
```
* tableName 配置的数据库表
* idName 该表对应的primary key，支持数组
* searchColumns 查询条件对应的字段及形式
* selectColumns 所要查询的字段数组
* tableColumns 在table中显示字段的数组（在selectColumns中选取部分重要的字段）
* columns 新增/修改对应的form表单配置
* i18n 国际化配置

重点讲下columns（searchColumns与此类似）
* 显示控制
  ```
  [
    [
      {name: 'col1', ...},
      {name: 'col2', ...}
    ],
    [
      {name: 'col3', ...}
    ],
    [
      {name: 'col4', ...},
      {}
    ]
  ]
  ```
  如上述配置所示， 其中
  * col1和col2显示在一行，各占50%
  * col3单个占一行，占100%
  * col4单个占一行，占50%
* 输入框类型配置（源码参考CCreate.vue, 示例参考http://localhost:3000）
  * IPT 简单输入框
    ```
    {
      name: 'col',
      type: 'IPT'
    }
    ```
  * IPT-N 数组输入框
    ```
    {
      name: 'col',
      type: 'IPT-N',
      precision: 0,  // 精确到小数点位数
      step: 1,       // 步长
    }
    ```
  * SEL-T 单选框（选项从表中查）    
    ```
    {
      name: 'col',
      type: 'IPT-T',
      table: {
       name: 'TABLE_NAME',    // 数据库表名
       column: 'col_name'     // 数据库字段
      }
    }
    ```
  * SEL-T-RD 单选框（在SEL-T基础上增加条件查询）
    ```
    {
      name: 'col',
      type: 'SEL-T-RD',
      table: {
        name: 'TABLE_NAME',    // 数据库表名
        column: 'col_name',    // 数据库字段
        relyColumn: 'rely_col_name',  // 查询条件字段名
        relyValue: 'val'              // 查询条件字段值
      }
    }
    ```
  * SEL-D 单选框(指定数据)
    ```
    {
      name: 'col',
      type: 'SEL-D',
      arr: ['Y', 'N']   // 单选框的选项数组
    }
    ```
  * IPT-P 坐标
    ```
    {
      name: 'col',
      type: 'IPT-P',
      split: ':'      // 分割符，默认为^
    }
    ```
* 配置预览  
  根据上述配置完以后，可通过 http://localhost:3000/config/[配置key] 进行预览

### 组件
目前通用基础配置提供5个组件：CCreate、CBatchDelete、CEdit、CSearch、CTable，这些组件封装的查询、新增、修改、删除操作都是调用CommonInfo的，如果原功能并非调用commonInfo，则需覆盖操作事件
* CCreate 新增对话框
  * 参数
    * config 配置，即上一章节的配置
    * form 表单数据
    * visible 控制对话框的显示/隐藏
    * rules 表单验证规则
  * 输出事件
    * close 点击“关闭”时触发
    * add   当监听add事件时，点击“新增”时触发；且不再触发add-success
    * add-success  当未监听add事件时，点击“新增”会自动去新增，新增成功后触发
  * demo
    ```
    <CCreate
      :form="form"
      :visible="createDialogVisible"
      @close="createDialogVisible=false"
      @add-success="handleAddSuccess">
      <ArrSelect
        slot="is_rfid"
        v-model="form.is_rfid"
        :options="rfidOptions"/>
      <ArrSelect
        slot="is_recycle_card"
        v-model="form.is_recycle_card"
        :options="['N', 'Y']"
        @change="recycleCardChange"/>
    </CCreate>
    ```
    当新增对话框中的表单元素存在特有逻辑时，可使用slot将配置自动生成的内容进行覆盖，此例中，覆盖了is_rfid和is_recycle_card，此时可方便的加入自己逻辑
* CBatchDelete 批量删除
  * 参数
    * config 配置，即上一章节的配置
    * disabled  是否禁用
    * selection 选中项数组
  * 输出事件
    * delete  当监听delete事件时，点击“批量删除”时触发；且不再触发delete-success
    * delete-success 当未监听delete事件时，点击“批量删除”会自动去删除，删除成功后触发
  * demo
  ```
  <CBatchDelete
    :disabled="deleteDisabled"
    :config="config"
    :selection="multipleSelection"
    @delete-success="handleBatchDeleteSuccess"/>
  ```
* CEdit 编辑对话框  
    略，参照CCreate
* CSearch 查询组件
  * 参数
    * config 配置，即上一章节的配置
    * query 查询参数对象
  * 输出事件
    * search  当监听search事件时，点击“查询”时触发；且不再触发load和load-success
    * load  当未监听search事件时，点击“查询”时，先触发此事件，然后开始查询
    * load-success 当未监听search事件时，查询完成后触发
* CTable Table显示组件
  * 参数
    * config 配置，即上一章节的配置
    * loading 为true时显示加载效果
    * data 要显示的数据
    * pagination 分页参数
    * operator 控制“编辑”“复制”“删除”按钮的显示
    * isExpand 是否能展开
  * 输出事件
    * edit 点击“编辑”触发
    * copy 点击“复制”触发
    * delete 当监听delete事件时，点击“删除”“确认”时触发；且不再触发delete-success
    * delete-success 当未监听delete事件时，点击“删除”“确认”时开始删除，删除成功后触发
    * pagination-change 页数或每页显示行数变化时触发
    * selection-change 左侧选中内容变化时触发
    
### 开发新功能
一般情况下，每个功能页都有一些特殊的逻辑，无法通过配置完成；此时可复制一份 pages/config/_id/index.vue，新建个页面；然后通过覆盖组件的内容来实现开发需求
若使用keeplive功能需要配置 name 与中台对接菜单时 使用菜单的多语言key