基于Jeecgboot前后端分离的ERP系统开发系列--出库单(1)

news2024/11/15 6:58:14

      这次从出库单开始进行整个单据录入显示的模板,不再采用默认的online表单代码生成的方式,以满足实际的业务需要,当然刚开始做,以后还需要进行改进。

      一、首先单号生成

        采用系统开发里的代码编码规则,相应的修改增加代码在之前的文章里有说过。

二、改造JEditableTable.vue为NbcioEditableTable.vue 

        主要增加popGoods类型的功能,同时改造相应的一些组件,全部变成Nbcio开头,效果就是下面的有搜索的一列商品id,以便弹出商品列表进行选择。

 

三、满足实际的与数据库无关列的功能实现

       增加三列与数据库无关的列,如上面的商品编码,商品名称,总价,以后还可以增加库存,主要增加这个GoodsModalMixin.js文件来完成功能

      

import { FormTypes, getListData } from '@/utils/JEditableTableUtil'
import { getAction,putAction } from '@/api/manage'
import { USER_INFO } from "@/store/mutation-types"
import Vue from 'vue'

export const GoodsModalMixin = {
  data() {
    return {
      action: '',
      taxPrice: '',
      isTenant: false,
      spans: {
        labelCol1: {span: 2},
        wrapperCol1: {span: 22},
        //1_5: 分为1.5列(相当于占了2/3)
        labelCol1_5: { span: 3 },
        wrapperCol1_5: { span: 21 },
        labelCol2: {span: 4},
        wrapperCol2: {span: 20},
        labelCol3: {span: 6},
        wrapperCol3: {span: 18},
        labelCol6: {span: 12},
        wrapperCol6: {span: 12}
      },
       url: {
         getbyid: "/goods/erpGoodsDto/queryByIds",
       },
       
    };
  },
  created () {
    let userInfo = Vue.ls.get(USER_INFO)
    this.isTenant = userInfo.id === userInfo.tenantId? true:false
    let realScreenWidth = window.screen.width * window.devicePixelRatio
    this.width = realScreenWidth<1600?'1300px':'1600px'
  },
  computed: {
    readOnly: function() {
      return this.action !== "add" && this.action !== "edit";
    }
  },
  methods: {
    /** 查询某个tab的数据 */
    requestSubTableData(url, params, tab, success) {
      tab.loading = true
      getAction(url, params).then(res => {
         console.log("requestSubTable res = ",res)
        if(res.success && res.code === 200){
          tab.dataSource = res.result;
          console.log("tab.dataSource = ",tab.dataSource)
          for(let i=0; i<tab.dataSource.length; i++){
            let info = tab.dataSource[i]
            this.changeColumnShow(info)
            if(info.goodsId != null) {
              this.changeAddedColumn(info)
            }
          }
          typeof success === 'function' ? success(res) : ''
        }
      }).finally(() => {
        tab.loading = false
      })
    },
    //编辑时,修改增加的列值,这里有商品编码,商品名称和总价等
    changeAddedColumn(info) { 
      let param = {
        ids: info.goodsId,
      }
      console.log("changeAddedColumn info",info)
      console.log("changeAddedColumn param",param)
      getAction(this.url.getbyid,param).then((res) => {
        console.log("onValueChange res",res)
        if (res && res.code === 200) {
          let mList = res.result;
          console.log("changeAddedColumn mList",mList)
          console.log("changeAddedColumn columns",this.erpSaleOutDetailTable.columns)
          this.$refs.erpSaleOutDetail.setValues([
            {
              rowKey: info.id, //行的id
                values: { //在这里values中的name是你columns中配置的key
                  'goodsCode': mList[0].code,
                  'goodsName': mList[0].name,
                  'totalPrice': info.orderNum*info.taxPrice.toFixed(2)-0,
              }
            },
          ])
        }
      })    
    },
      
    //使得商品名称,价格等为显示
    changeColumnShow(info) { 
      if(info.name) {
        this.changeFormTypes(this.erpSaleOutDetailTable.columns, 'goodsName', 1)
      }
      if(info.code) {
        this.changeFormTypes(this.erpSaleOutDetailTable.columns, 'goodsCode', 1)
      }
    },
    //改变字段的状态,1-显示 0-隐藏
    changeFormTypes(columns, key, type) {
      console.log("changeFormTypes columns key",columns,key);
      for(let i=0; i<columns.length; i++){
        if(columns[i].key === key) {
          if(type)
          {
            console.log("columns[i].key,key",columns[i].key,key)
            if (key === 'goodsId') {
              columns[i].type = FormTypes.popupGoods; //显示
              //columns[i].type = FormTypes.input; //显示
            }
            else if( (key === 'orderNum') || (key === 'taxPrice') || (key === 'totalPrice') ) 
            {
              columns[i].type = FormTypes.input; //显示
            }
            else
            {
              columns[i].type = FormTypes.normal;//显示
            }
          } else {
            columns[i].type = FormTypes.hidden; //隐藏
          }
        }
      }
    },
    //单元值改变一个字符就触发一次
    onValueChange(event) {
      console.log("onValueChange(event)");
      let that = this
      const { type, row, column, value, target } = event
      let param,orderNum,taxPrice,totalPrice
      switch(column.key) {
        case "goodsId":
          param = {
            ids: value,
          }
          console.log("onValueChange param",param)
          getAction(this.url.getbyid,param).then((res) => {
            console.log("onValueChange res",res)
            if (res && res.code === 200) {
              let mList = res.result;
              console.log("onValueChange mList,value",mList,value)
                this.$refs.erpSaleOutDetail.getValues((error, values) => {
                  values.pop()  //移除最后一行数据
                  let mArr = values
                  console.log("onValueChange mArr1",mArr)
                  console.log("onValueChange mList",mList)
                  for (let i = 0; i < mList.length; i++) {
                    let mInfo = mList[i]
                    console.log("onValueChange mList[i]",mList[i])
                    //this.changeColumnShow(mInfo)
                    let mObj = this.parseInfoToObj(mInfo)
                    console.log("onValueChange mObj",mObj)
                    mArr.push(mObj)
                  }
                  let totalPrice = 0
                  let totalNum = 0
                  for (let j = 0; j < mArr.length; j++) {
                    totalPrice += mArr[j].totalPrice-0
                    totalNum += mArr[j].orderNum-0
                  }
                  console.log("onValueChange mArr2",mArr)
                  this.erpSaleOutDetailTable.dataSource = mArr
                  target.statisticsColumns.totalPrice = totalPrice
                  target.statisticsColumns.orderNum = totalNum
                  this.model.totalAmount = totalPrice
                  this.model.totalNum = totalNum
                  //target.setValues(mArrValues)
                  //target.recalcAllStatisticsColumns()
                  // 更新form表单的值
                  //that.autoChangePrice(target) 
               })
            }  
          });
          break;
        case "orderNum":
          orderNum = value-0
          taxPrice = row.taxPrice-0 //单价
          totalPrice = (taxPrice*orderNum).toFixed(2)-0
          target.setValues([{rowKey: row.id, values: {totalPrice: totalPrice}}])
          target.recalcAllStatisticsColumns()
          that.autoChangePrice(target) 
          break;
        case "taxPrice":
          orderNum = row.orderNum-0 //数量
          taxPrice = value-0 //单价
          totalPrice = (taxPrice*orderNum).toFixed(2)-0
          target.setValues([{rowKey: row.id, values: {totalPrice: totalPrice}}])
          target.recalcAllStatisticsColumns()
          that.autoChangePrice(target) 
          break;
        case "totalPrice":
          orderNum = row.orderNum-0 //数量
          totalPrice = value-0
          taxPrice = (totalPrice/orderNum).toFixed(2)-0 //单价
          target.setValues([{rowKey: row.id, values: {taxPrice: taxPrice}}])
          target.recalcAllStatisticsColumns()
          that.autoChangePrice(target) 
          break;   
      }
    },
    
    //更新一些需要统计的值
    autoChangePrice(target) {
      let totalPrice = target.statisticsColumns.totalPrice-0
      let totalNum = target.statisticsColumns.orderNum-0
      this.model.totalAmount = totalPrice
      this.model.totalNum = totalNum
    },
  
    //使得型号、颜色、扩展信息、sku等为隐藏
    changeColumnHide() {
      //this.changeFormTypes(this.erpSaleOutDetailTable.columns, 'goodname', 0)
    },
    //转为商品对象
    parseInfoToObj(mInfo) {
      return {
        goodsId: mInfo.id,
        goodsCode: mInfo.code,
        goodsName: mInfo.name,
        orderNum: mInfo.num,
        oriPrice: mInfo.salePrice,
        taxPrice: mInfo.salePrice,
        discountRate: 100,
        isGift: 0,
        taxRate: 17,
        totalPrice: mInfo.totalPrice,
      }
    },
    //删除一行或多行的时候触发
    onDeleted(ids, target) {
      target.recalcAllStatisticsColumns()
    },
   }
}

 同时对合计等也进行了处理。     

 四、几个通过jpopup处理的字段

       目前还没有好的办法,只能先把id与name也都显示出来,以后应该是实际值id,但显示name

       其中里面弹出的窗口都是采用报表的方式实现

 

五、目前最终的效果图如下:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/344016.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

7、MyBatis框架——MyBatis对一对一关系的处理、分步查询、MyBatis对一对多关系的处理

目录 一、项目框架搭建 二、在实体类中添加额外属性实现多表查询 1、mybatis两表关联查询 &#xff08;1&#xff09;实体类类型映射规则 &#xff08;2&#xff09;代码演示 2、分步查询 &#xff08;1&#xff09;autoMapping开启自动映射 &#xff08;2&#xff09;…

Python-正则表达式详解-快速掌握正则表达式核心函数

正则表达式为为高级的文本模式匹配、抽取或文本形式的搜索和替换功能提供了基础。本文主要介绍python正则表达式的一些基础功能&#xff0c;掌握它也可以使得在python编程中处理字符串游刃有余。1.简介正则表达式是一些由字符和特殊符号组成的字符串&#xff0c;匹配一系列有相…

Ansible的安装及部署

目录 一、Ansible对于企业运维的重大意义 二、Ansible的安装 三、构建Ansible清单 1.直接书写受管主机名或ip&#xff0c;每行一个 2.设定受管主机的组[组名称] 四、Ansible配置文件参数详解 1、配置文件的分类与优先级 2.配置新用户的Ansible配置 3.生成免密认证 本章…

算法 ——世界 二

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。个人爱好: 编程&#xff0c;打篮球&#xff0c;计算机知识个人名言&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石…

Linux管道选取命令:cut、grep

选取命令就是将一段数据经过分析后&#xff0c;取出我们所想要的&#xff0c;或是经历分析关键词&#xff0c;取得我们所想要的那一行 一般来说&#xff0c;选取信息通常是针对一行一行来分析的&#xff0c;而不是整篇信息分析 下面介绍两个很常用的信息选取命令&#xff1a;…

Numpy基础与实例——人工智能基础——机器学习

文章目录一、Numpy概述1. 优势2. numpy历史3. Numpy的核心&#xff1a;多维数组4. 内存中的ndarray对象4.1 元数据&#xff08;metadata&#xff09;4.2 实际数据二、numpy基础1. ndarray数组2. arange、zeros、ones、zeros_like3. ndarray对象属性的基本操作3.1 修改数组维度3…

dubbo接口自动化用例性能优化

dubbo接口自动化用例性能优化 目录&#xff1a;导读 前言 优化本地调试时间 单用例执行时间的优化 提高并发 最后 前言 去年换了一个新部门&#xff0c;看了下当前的自动化用例的情况&#xff0c;发现存在三类性能问题&#xff1a; 本地调试运行时等待时间较长&#xf…

C++学习记录——팔 内存管理

文章目录1、动态内存管理2、内存管理方式operator new operator delete3、new和delete的实现原理1、动态内存管理 C兼容C语言关于内存分配的语法&#xff0c;而添加了C独有的东西。 //int* p1 (int*)malloc(sizeof(int));int* p1 new int;new是一个操作符&#xff0c;C不再需…

【工具】图片和PDF批量区域OCR识别图片文字并重命名,如何批量图片识别文字并将识别的文字改名该图片

前段时间接到一个棘手的难题&#xff08;识别图片文字&#xff0c;将图片文件名改成该文字&#xff09; 因为不解决就得手动挨个挨个输入然后把文件命名好 今天又一个文件需求是这样的 图上有姓名文字&#xff0c;要识别出来改成每一张图跟这个一样&#xff0c;有的人说了缩…

学习笔记——吴恩达《神经网络与深度学习》

神经网络与深度学习1. 基础知识神经网络用神经网络进行监督学习2. 神经网络基础知识二分分类logistic回归logistic回归损失函数梯度下降法导数计算图logistic回归中的梯度下降法m个样本的梯度下降向量化Python中的广播3. 浅层神经网络神经网络概述神经网络表示计算神经网络的输…

Android自动化测试——Monkey

本来是做Web后端的&#xff0c;来公司实习变成微信小程序前端了&#xff0c;到这周变成Android APP测试人员了&#xff0c;也是微醺啊。 由于对手工测试终究是有些抵触&#xff0c;所有昨天小试了一下不用写代码的自动化压力测试&#xff0c;在此记下我的心得。 一、Monkey与…

TOOM互联网舆情监测中心,互联网舆情监测系统为何出现以及由来?

互联网舆情监测中心是指负责收集、分析和评估互联网上的舆情信息的组织或机构&#xff0c;旨在帮助政府、企业、媒体和其他相关组织了解公众对特定话题的看法、情感和态度&#xff0c;并采取相应的措施应对和管理舆情事件&#xff0c;TOOM互联网舆情监测中心&#xff0c;互联网…

Hudi-集成Spark之spark-shell 方式

Hudi集成Spark之spark-shell 方式 启动 spark-shell &#xff08;1&#xff09;启动命令 #针对Spark 3.2 spark-shell \--conf spark.serializerorg.apache.spark.serializer.KryoSerializer \--conf spark.sql.catalog.spark_catalogorg.apache.spark.sql.hudi.catalog.Hoo…

leaflet 本地上传shp文件,在map上解析显示图形(058)

第058个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中本地上传shp文件,利用shapefile读取shp数据,并在地图上显示图形。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 文章目录 示例效果加载shapefile.js方式配置方式示例源代码(共126…

GBDT+LR

为什么需要GBDTLR 协同过滤和矩阵分解存在问题: 仅利用了用户与物品相互行为信息进行推荐&#xff0c; 忽视了用户自身特征&#xff0c; 物品自身特征以及上下文信息等&#xff0c;导致生成的结果往往会比较片面。 FFM 存在问题 FFM特征交叉能力有限&#xff1a;虽然 FFM 模型…

Excel里数字太长显示为科学计数法如何显示完整数字

Excel里数字太长显示为科学计数法如何显示完整数字 注意&#xff1a;以下测试都是在macos的Microsoft Excel for Mac的16.53版本中实际测试的&#xff0c;在windows中应该也是一样的。 一、问题描述 数字太长在Excel中会显示为E形式 有些值&#xff0c;比如身份证号、银行卡…

编译原理(第3版-王生原)课后习题答案-第三章

1.构造下列正规式相应的 DFA。(1)1(0|1) *101(2)1(1010* |1(010)*1) *0(3)a((a|b)* |ab*a)*b(4)b((ab)* bb)*ab答案&#xff1a;(2)(3)(4)略。 写1个(1)体现解题思路。2.已知 NFA ((x,yz),{0,1}M,{x},{z})&#xff0c;其中:M(x,0){z}, M(y,0){x,y}, M(z,0){x,z}, M(x,1){x}, M(…

Linux文件默认权限:umask

umask就是指定目前用户在建立文件或目录时候的权限默认值 查看方式有两种&#xff1a;一种可以直接输入umask&#xff0c;就可以看到数字类型的权限设置值&#xff0c;一种则是加入umask后加入-S&#xff08;Symbolic&#xff09;选项&#xff0c;就会以符号类型的方式来显示出…

HJY-E1A/4D AC220V数字式交流【电压继电器】

系列型号 HJY-2B-2H2D DC220V欠电压继电器 HJY-1A-2H2D DC220V过压继电器 一、用途 本系列电压继电器为瞬时动作特性&#xff0c;用于发电机&#xff0c;变压器&#xff0c;输电线路的继电保护装置中作为过压或欠压的闭锁启动元件。 二、特点 (1).采用拨盘设定;或数码管显…

Spring Batch ItemReader组件-读数据库

目录 引言 数据准备 游标方式 分页方式 转视频版 引言 接着上篇&#xff1a;Spring Batch ItemReader组件-Json文件&#xff0c;了解Spring Batch 读取Json文件后&#xff0c;接下来一起学习一下Spring Batch 如何读数据库中的数据 数据准备 下面是一张用户表user&…