VOL常用---页面vue扩展(如gridHeader,modelHeader等)


页面vue扩展(如gridHeader,modelHeader等)

1.vue表单(volForm)(必填不生效注意formOptions配置要是text vol-form支持的类型)

<template>
  <vol-box
    :lazy="true"
    v-model="model"
    title="产品装箱规则设定"
    :height="600"
    :width="700"
    :padding="20"
  >
    <vol-form
      ref="form"
      :labelWidth="150"
      :load-key="true"
      :formFields="fields"
      :formRules="formOptions"
    >
    </vol-form>

    <div class="form-btns">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="primary" @click="reset" plain>重置</el-button>
    </div>
  </vol-box>
</template>

<script>
// 使用方式:
// 1、新建一个vue页面,把此页面内容复制进去
// 2、router->index.js配置路由,页面上输入地址即可看到数据(也可以把菜单配置上)
// 3、或者参照表单设计页面做动态页面
//**表单设计器的table下载还在开发中

import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
export default {
   
   
  components: {
   
    "vol-form": VolForm, "vol-box": VolBox },
  data() {
   
   
    return {
   
   
      model: false,
      tabsModel: "0",
      fields: {
   
   
        WorkOrderCode: null,
        computerNum: null,
        startNo: null,
        packNum: null,
        eachPackNum: null,
        outBoxNum: null,
      },
      formOptions: [
        [
          {
   
   
            field: "WorkOrderCode",
            title: "生产工单",
            type: "select",
            required: true,
            readonly: false,
            // colSize: 6,
            data: [],
            dataKey: "boxWorkOrderCode",
            onChange: (val, formData) => {
   
   
              console.log(val);
              //formData所有字典数据
              this.getBackEndStartNoByWo(val);
              this.getBackEndOutBoxNumByWo(val);
            },
          },
        ],
        [
          {
   
   
            field: "computerNum",
            title: "计算末位数值位数",
            type: "text",
            required: true,
            readonly: false,
            // colSize: 6,
            // data: [
            //   { key: "部分变更", value: "部分变更" },
            //   { key: "全部变更", value: "全部变更" },
            // ],
            // dataKey: "变更类型",
          },
        ],
        [
          {
   
   
            field: "startNo",
            title: "资产编码起始",
            type: "text",
            required: true,
            readonly: false,
          },
        ],
        [
          {
   
   
            field: "packNum",
            title: "产品数量",
            type: "text",
            required: true,
            readonly: false,
            extra: {
   
   
              icon: "el-icon-chat-dot-round",
              style: "color:#03A9F4",
              text: "已绑产品数量", // 默认显示"已绑产品数量"
            },
          },
        ],
        [
          {
   
   
            field: "eachPackNum",
            title: "每箱产品数量",
            type: "text",
            required: true,
            readonly: false,
          },
        ],
        [
          {
   
   
            field: "outBoxNum",
            title: "外包装箱标贴批号",
            type: "text",
            required: true,
            readonly: false,
          },
        ],
      ],
      tables: [],
      tabs: [],
    };
  },
  methods: {
   
   
    getBackEndStartNoByWo(val) {
   
   
      let Url = "api/Production_BoxList/getBackEndStartNoByWo?wo="+val;
        this.http.post(Url, {
   
   }, true).then((result) => {
   
   
          var packNumOption = this.$refs.form.formRules[3][0];
          if (result.status == true) {
   
   
            // this.$Message.success("成功");
            this.fields.startNo = result.data.maxSnNo;
            packNumOption.extra.text = `已绑数量 (${
     
     result.data.totalBoxQty})`;
          } else {
   
   
            this.fields.startNo = result.message;
            if (packNumOption) {
   
   
              // 动态改变text的值
              packNumOption.extra.text = result.message;
            }
          }
        });
    },
    getBackEndOutBoxNumByWo(val) {
   
   
      let Url = "api/Production_BoxList/getBackEndOutBoxNumByWo?wo="+val;
        this.http.post(Url, {
   
   }, true).then((result) => {
   
   
          if (result.status == true) {
   
   
            // this.$Message.success("成功");
            this.fields.outBoxNum = result.data;
          } else {
   
   
            this.fields.outBoxNum = result.message;
          }
        });
    },
    openDemo() {
   
   
      // 打开弹窗
      this.fields.computerNum = 21;
      this.fields.eachPackNum = 20;
      this.fields.WorkOrderCode = null;
      this.fields.startNo = null;
      this.fields.packNum = null;
      this.fields.outBoxNum = null;
      this.$Message.success("请先选择工单");
      this.model = true;
    },
    submit() {
   
   
      if (this.fields.WorkOrderCode == null) {
   
   
        this.$Message.error("请先选择工单");
        this.fields.startNo = null;
        this.fields.outBoxNum = null;
      } else {
   
   
        var Url = "api/Production_BoxList/generateBoxBandSnno";

        this.$refs.form.validate((valid) => {
   
   
          if (valid) {
   
   
            this.http.post(Url, this.fields, true).then((result) => {
   
   
              if (result.success) {
   
   
                this.$Message.success("生成成功");
              } else {
   
   
                this.$Message.error("失败" + result.msgContent);
              }
            });
          } else {
   
   
            console.log("校验未通过");
            return false;
          }
        });
      }
    },
    reset() {
   
   
      console.log(this.$refs.form);
      this.$refs.form.reset();
    },
    download() {
   
   
      this.$Message.info("111");
    },
  },</
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值