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 左侧选中内容变化时触发

开发新功能

一般情况下，每个功能页都有一些特殊的逻辑，无法通过配置完成；此时可复制一份 pages/config/_id/index.vue，新建个页面；然后通过覆盖组件的内容来实现开发需求 若使用keeplive功能需要配置 name 与中台对接菜单时 使用菜单的多语言key