5-清洗板

XLD板子过站打码后需要进行清洗和审核。

清洗：根据小板条码、工单抓去对应的拼板数据，统一一块板进行清洗，清洗结果为OK和NG

审核：原理与清洗类似，由不同职能分次进行审核

该项目难度的两个功能其实逻辑基本一直，根据工单和条码从XLD表中抓取数据处理，并存入表中。

1.SQL记录

SELECT
  L.SHOP_ORDER,
  L.ITEM,
  L.LINE,
  L.CLEAN_TIME,
  L.CLEAN_RESULT,
  L.CHECK_STATUS,
  L.CHECK_RESULT,
  L.CLEAN_PEOPLE,
  COUNT(M.SFC) AS SFC_COUNT FROM MOM_CLEANBAR_LOG  L 
  INNER JOIN MESEXT_XLD_BARCODE  M 
  ON L.BARCODE = M.BARCODE 
  GROUP BY      	  L.SHOP_ORDER,L.ITEM,L.LINE,L.CLEAN_TIME,L.CLEAN_RESULT,L.CHECK_STATUS,L.CHECK_RESULT,L.CLEAN_PEOPLE 

该SQL可以将工单下关联的BARCODE和BARCODE下关联的SFC进行统计，得出清洗总数，使用聚合函数COUNT注意要结合GROUP BY来使用，其中分组的字段是除了聚合字段之外的所有字段。

2.设计思路

2.1 清洗模块

要求根据工单和共产带出线体(去重后多项可选择)，以输入条码和工单的维度进行数据拉取：

• 主板条码：拉取下属全部小板条码
• 小板条码：反查主板条码，然后执行上述步骤

将获取线体和获取条码数据拆分为两个接口设计，传参按照表单传参

2.1 前端设计

• 要点1：线体数据返回并且可选
• 要点2：支持扫描多个小码
• 一次提交

<van-field
        ref="line"
        :label="$t(languagePath+'line')"
        :placeholder="$t(languagePath+'line')"
        v-model="line"
        :readonly="initShow"
        is-link
        @focus="showLine = true"
        required/>

      <van-action-sheet
        v-model="showLine"
        :actions="lineResult"
        @select="onSelectLine"
        :description="$t('线体')"
      />

设计此模块来进行线体部分的选取和设置，绑定好v-model，其中的showLIne为是否展示选项框，:actions为对应的选项数据，select绑定选择事件

showLine: false,
lineResult:[],
line:'',
//data如上
//调用后端获取数据
async initLineResult(){
      if(!this.shopOrder){
        this.info_error = this.$t('请输入工单号');
        this.$refs.shopOrder.focus();
        return false;
      }
      let params = {
        site:this.site,
        shopOrder:this.shopOrder
      };
      await getLineResult(params)
        .then(res => {
          if(res.code === '0'){
            let line = res.data;
            this.lineResult = this.convertListToKeyValue(line);
            this.info_error = "";
            this.$refs.line.focus();
          } else {
            Dialog.alert({message:res.message});
            this.info_error = res.message;
            return false;
          }
        });
    },
//选项框操作
 onSelectLine(item){
      this.showLine = false;
      this.line = item.value;
      this.$refs.code.focus();
    },

2.2 后端设计

• 要点：根据前端批量传入的JSON进行处理

设计接收JSON格式的传参即可，设计CleanBarLogVO接收参数

public class CleanBarLogVO {
    List<CleanBarLogDTO> dataList;
    String cleanResult;
    String site;
    String cleanPeople;
}

2.2 审核模块

审核模块同清洗模块基本意思一致，前端后端逻辑差不多类似

3.后端开发手记

• 根据数据库设计好对应的实体类
• 与前端交互，接收参数大多数是表单，前端配置也默认表单，需要JSON需要手动更改，后端设计实体接收JSON

往往设计成VO类来接收前端过来的参数，一般是复杂的组合，List和一些String类型，List可以封装好实体类或者字符串，如上述的CleanBarLogVO示例

• 如果遇到报表类型的展示，有分页要求的，设计DTO类

public class CleanBarLogPageDTO {
    @NotBlank(message = "")
    private String site;
    private String shopOrder;
    private String barcode;
    private String item;
    private String line;
    private String cleanTime;
    private String cleanCount;
    private String cleanResult;
    private String checkStatus;
    private String cleanPeople;
    private String checkResult;
    //当前页
    private String  page = "1";
    //每页条数
    private String  limit = "30";
}

将所需要的字段打成String，分页调用baseFunctionService的getSqlPageLimitResult函数即可，传入sql和页数和限制。

• SQL设计，简短SQL设计使用Query在Dao中书写即可，复杂SQL场景使用StringBuffer来拼接SQL，多条件的时候，尽可能的先把表连接起来，然后判断是否进行AND xxx = xxx的拼接

4.前端开发手记

这是第一次直接实战上前端Vue的项目，具体记录一下流程和不懂的点。

4.1 引入后端接口

在api目录下，构建新的js文件，引入后端接口

import request from '@/utils/request'
import qs from 'qs'

export function getDataFromCode(data) {
    return request({
      url: '',
      method: 'post',
      data: qs.stringify(data)
    })
  }

其中需要注意的是，data:qs.stringify(data)是将参数以表单的形式进行提交，如果以JSON格式，直接使用data即可

4.2 注册vue的路径

在router路径下的index.js中进行配置

进行这样的配置后，Path也就是在base中对应配置的路径

在Base中的菜单进行配置后，同时需要在角色管理中加上对应的菜单权限，即可在页面中看到页面。

4.3 Vue页面

按照路径配置后，到对应路径下构建vue页面即可

vue的结构为界面和函数逻辑，部分写界面设计的逻辑，大多都是采用组建，这里使用的是vxetable，官方文档很齐全。

目前会用的：

<van-field
        ref="code"
        v-model="code"
        :label="$t(languagePath+'code')"
        :placeholder="$t(languagePath+'code')"
        clearable
        @keydown.native.enter="enterCode">
      </van-field>

通过ref和v-model来进行绑定，一般命名一样。

@keydown.native.enter为回车函数，执行回车后的逻辑

**JS部分：**JS部分就是写处理逻辑的，使用data来定义数据，methods定义方法，回车函数一般就是判空。

示例异步请求后端处理：

convertListToKeyValue(list){
      return list.map(item => {
        return { name: item, value: item };
      });
    },
    async initLineResult(){
      if(!this.shopOrder){
        this.info_error = this.$t('请输入工单号');
        this.$refs.shopOrder.focus();
        return false;
      }
      let params = {
        site:this.site,
        shopOrder:this.shopOrder
      };
      await getLineResult(params)
        .then(res => {
          if(res.code === '0'){
            let line = res.data;
            this.lineResult = this.convertListToKeyValue(line);
            this.info_error = "";
            this.$refs.line.focus();
          } else {
            Dialog.alert({message:res.message});
            this.info_error = res.message;
            return false;
          }
        });
    },

convertListToKeyValue为将String列表转成一个Map(K-V)格式的数据，initLineResult为异步函数，

getLineResult就是调用后端接口。

表格数据删除：这是本次vue开发中遇到最大的问题，希望能够根据表格勾选来完成选中删除的功能(仅前端删除)，数据是绑定的，所以可以在谷歌浏览器中安装Vue的插件来进行查看和调试

删除逻辑：

onDelete(){
      //获取表格数据
      let $table = this.$refs.xTable;
      //获取选中行数据
      const list = $table.getCheckboxRecords();
      if(list.length < 1){
        Notify({type:'danger',message:''+this.$t('请至少选择一条数据进行删除')});
        return false;
      }
      for (let i = 0; i < list.length; i++) {
        //因为splice会缩减数组长度，只需要跟着一起缩减索引即可

        let index = this.tableData.findIndex(item => item._X_ROW_KEY === list[i]._X_ROW_KEY);
        console.log(index);
        this.tableData.splice(index, 1);
      }
    },

新版本的vxetable中，使用了_X_ROW_KEY为唯一ID字段来进行选择删除了，使用getCheckboxRecords函数来获取选中的数据，splice函数来切割选中的数据

5.总结

这是第一个前后端(Vue)结合的需求，学会后端和Vue一起的操作和Vue的一些编写和配置。

5.1 Git学习新纪录

新用到的指令Git stash：能够将当前工作区修改的代码进行一个暂存，往往在开发过程中会出现以往功能的一些Bug修复，这时候需要从当前分支切换到另一个分支，会出现"放弃当前想修改"的提醒，这时候为了能够保存修改，又能切换分支修复Bug，对当前修改的文件进行Git stash即可。

5.2 冲突解决

代码合并会出现冲突，git是以文件和行号来判断是否修改的，可能A在修改100行，B也在修改100行，完成后A推送了，B写完了拉取远程代码合并，会出现冲突，一般来说优选选择保留远程的Master分支中正常使用的代码，手动解决冲突，保留好自己和别人的代码(功能不一致的情况下)，功能一致情况下需要进行协商

6.修复手记

6.1 界面按钮确认

清洗，审核页面新增提醒的按钮，提醒必填，在组件中使用required属性即可展示必填项。

6.2 自动生成条码并带出

新增一个根据年月日时分秒生成的流水号函数，前端页面页面绑定调用接口的函数，函数中调用数据初始化函数即可带出。

6.3 删除IPQC，改用消息推送

消息推送配置需要提前配置好唯一码，业务流程按线体和班别进行推送(正常模式)。

本次任务推送不考虑班别，配置线体和人员即可，Java配置代码如下：

 String text = "线体"+sqlResult.get(i).get("LINE").toString()+",工单"+sqlResult.get(i).get("SHOP_ORDER").toString()+"有清洗记录,"+"清洗数量"+sqlResult.get(i).get("SFC_COUNT").toString()+",请审核!!!";
            messageRemindConfigService.pushMsg(site, remindCode, text, true, null, sqlResult.get(i).get("LINE").toString(), null);

走pushMsg函数是进行企微推送，需要先开通测试机的企微账号，开通本地IP。推送流程：本地推送——>企微服务器——>个人。