前端VUE笔记整理

一：PDA H5

1、对于PDA用到的三个命令说明:

npm install: 根据package.json安装依赖文件到node_modules文件夹下(如果是第一次可以删除此文件夹下的文件，这个目录不会上传) npm run serve: 运行PDA程序在本地做客户端 npm run build: 打包文件到dist文件下，发布到美云平台的离线包需要将其压缩为.zip文件

2、树状结构的面板展示（步进器）

如图所示：

前端：

javascript 复制代码

<van-collapse v-model="expandPanels">
  <!-- 面板 -->
  <van-collapse-item
    v-for="(item, index) in tableData"
    :key="index"
    :title="item.MIDDLE_DEFECT_NAME"
    :name="item.MIDDLE_DEFECT_NAME"
  >
    <!-- 检验项 -->
    <van-cell
      v-for="(model, itemIndex) in item.CHILDREN"
      :key="itemIndex"
      :title="model.SMALL_DEFECT_NAME"
    >
      <template #right-icon>
        <van-stepper
          v-model.number="model.QTY"
          placeholder="请输入数量"
          input-width="90px"
          integer
          step="1"
          min="0"
        />
      </template>
    </van-cell>
  </van-collapse-item>
</van-collapse>

<script>
    export default {
        methods: {
            getDefectItems() {
              const self = this;
              console.log(self.activeData);
              const url = framework.strFormat(serviceUrl.API_GET_INSPECT_RESULT_BY_BILL, 
                            self.selectedBillItem.ID)
              const rlt = framework.getData(url, rlt => {
                if (rlt.success) {
                  if (rlt.data.length == 0) {
                      Toast.fail('没有数据');
                      return;
                  }

                  self.tableData = rlt.data;
                  // 默认所有面板展开
                  self.expandPanels = rlt.data.map(item => item.MIDDLE_DEFECT_NAME);
                } else {
                  Toast.fail(rlt.message.content)
                }
              })
            }
        }
    }
</script>

**后端：**标题是可配置化的，通过业务参数维护。父标题，子标题都来源与同一数据库表，用PARENT_ID字段来关联

父子结构的内部类：

cs 复制代码

//父类模型
internal class MiddleCategoryModel
{
    public string ID { get; set; }

    /// <summary>
    /// 缺陷中类名称
    /// </summary>
    public string MIDDLE_DEFECT_NAME { get; set; }

    /// <summary>
    /// 中类包含的所有子类
    /// </summary>
    public List<SmallCategoryModel> CHILDREN { get; set; }
}

//子类模型
internal class SmallCategoryModel
{

    public string ID { get; set; }

    //小类名称
    public string SMALL_DEFECT_NAME { get; set; }

    /// <summary>
    /// 缺陷数量
    /// </summary>
    public int QTY { get; set; }

}

查两遍，第一遍查父标题，第二遍查子标题，并把子标题与副标题通过CHILDREN属性关联上

cs 复制代码

var midCtgs = db.FND_IQC_GG_DEFECT_CATEGORY.Where(a => a.STATE == RowState.ROW_STATE_A && a.ENTERPRISE_ID == entId && a.ORG_ID == orgId && a.PARENT_ID == topCtg.ID).Select(a => new MiddleCategoryModel
{
    MIDDLE_DEFECT_NAME = a.CATEGORY_NAME,
    ID = a.ID
}).ToList();
foreach (var mg in midCtgs)
{
    var smallCtgs = db.FND_IQC_GG_DEFECT_CATEGORY.Where(a => a.STATE == RowState.ROW_STATE_A && a.ENTERPRISE_ID == entId && a.ORG_ID == orgId && a.PARENT_ID == mg.ID).Select(a => new SmallCategoryModel
    {
        SMALL_DEFECT_NAME = a.CATEGORY_NAME,
        ID = a.ID
    });

    if (null != existDefs && existDefs.Count() > 0)
    {
        foreach (var sg in smallCtgs)
        {
            var df = existDefs.First(a => a.DEFECT_CATEGORY_CODE == sg.SMALL_DEFECT_NAME);
            if (null != df)
            {
                sg.QTY = df.DEFECT_QTY;
            }
        }
    }
    mg.CHILDREN = smallCtgs.ToList();
}

3、vue中判断是否是整数的方法

（1）正则表达式判断

javascript 复制代码

const r = /^\+?[1-9][0-9]*$/;

if (!r.test(self.model.QTY) && self.activeName == "PATCH") {
    self.$dialog
      .alert({
        message: "返工数量必须为正整数！",
      })
      .then(() => {
        document.getElementById("scanBarcode").focus();
      });
    return;
}

（2）库方法判断

javascript 复制代码

if (this.qty == "" || isNaN(this.qty)) {
    this.$notify({
      type: "danger",
      message: "接收数量必须为数字",
    });
    this.btnsubmitdisable = false;
    return;
}

var reg=/^([1-9][0-9]*|0)(\.[0-9]*[1-9])?$/
      if (this.qtySource == "" || isNaN(this.qtySource) || (!reg.test(this.qtySource))) {
        this.$notify({
          type: "danger",
          message: "来源数量必须为整数或者小数",
        });
        this.btnsubmitdisable = false;
        return;
      }

4、判断数组中是否存在某元素

复制代码

const isExist = self.list.findIndex((p) => p.PALLET_NO == self.BillNo) > -1;

5、状态对应的中文显示，数组方式实现

javascript 复制代码

getStatusLang(status) {
    const lang = [
    {
      en: "RECEIVED",
      zh: "已接收"
    },
    {
      en: "UNPALLETIZING",
      zh: "已解托"
    },
    {
      en: "PALLETIZING",
      zh: "已拼托"
    }
    ];
    const item = lang.find(p => p.en === status);
    if (item) {
        return item.zh;
    }
    return status;
},