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