前端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;
},
相关推荐
木头没有瓜20 分钟前
vscode离线安装插件
ide·vue.js·vscode
循环过三天36 分钟前
3-1 PID算法改进(积分部分)
笔记·stm32·单片机·学习·算法·pid
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
之歆1 小时前
Python-封装和解构-set及操作-字典及操作-解析式生成器-内建函数迭代器-学习笔记
笔记·python·学习
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js