前端VUE笔记整理

一：PDA H5

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

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

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

如图所示：

前端：

<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字段来关联

父子结构的内部类：

//父类模型
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属性关联上

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）正则表达式判断

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）库方法判断

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、状态对应的中文显示，数组方式实现

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;
},

6、重写页面布局

参考小包交接BoxLabelReceive

三块布局

.box-container {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
}
.box-header {
  margin: 0;
  padding: 0;
  flex-basis: content;
}
.box-main {
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
}
.box-footer {
  margin: 0;
  padding: 0;
  flex-basis: content;
}

/* list数组用的 */
.listDiv {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  /* margin-top: 0.2rem; */
  /* margin-bottom: 0.2rem; */
  margin-bottom: 20px !important;
}

7、VUE中新增或修改数组中的元素

console.log(item);

// 判断索引 item.GRADE 是否存在于 gradeAndQtylist 数组中
const index = self.gradeAndQtylist.findIndex((p) => p.GRADE === item.GRADE);

// 假设要修改或新增的元素对象为 newItem
var newItem = {};
newItem.GRADE = item.GRADE;
// 如果索引存在（大于等于0），则修改元素
if (index > -1) {
	newItem.QTY = self.gradeAndQtylist[index].QTY + Number(item.QTY);
	// 使用 Vue.set 方法修改数组元素，以确保响应式更新
	Vue.set(self.gradeAndQtylist, index, newItem);
} else {
	newItem.QTY = item.QTY;
	// 如果索引不存在，则新增元素
	self.gradeAndQtylist.unshift(newItem);
}
self.boxlabellist.unshift(item);
console.log(self.gradeAndQtylist);

 删除数组元素

const indexBox = self.boxlabellist.findIndex((p) => p.LABEL_NO === item.LABEL_NO);
Vue.delete(self.boxlabellist, indexBox);