@mega-apps/mom-mes-standard NPM

BrisaYun

My unreal Nuxt.js project

Build Setup

# 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.

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']"/>

效果图

Position

对坐标的封装

传参
- v-model 绑定数据
- disabled 是否禁用
- split 分隔符（默认为^）
demo
```
<Position
  v-model="myVal"/>
```
效果图

其对应的值为 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

效果图

通用基础设定指导

配置

配置文件路径为 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 左侧选中内容变化时触发