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

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

这次从出库单开始进行整个单据录入显示的模板,不再采用默认的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

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

 

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


相关文章
|
9月前
|
消息中间件 缓存 JavaScript
如何开发ERP(离散制造-MTO)系统中的生产管理板块(附架构图+流程图+代码参考)
本文详解离散制造MTO模式下的ERP生产管理模块,涵盖核心问题、系统架构、关键流程、开发技巧及数据库设计,助力企业打通计划与执行“最后一公里”,提升交付率、降低库存与浪费。
|
9月前
|
消息中间件 JavaScript 前端开发
如何开发ERP(离散制造-MTO)系统中的技术管理板块(附架构图+流程图+代码参考)
本文详解ERP(离散制造-MTO)系统中的技术管理板块,涵盖产品定义、BOM、工序、工艺文件及变更控制的结构化与系统化管理。内容包括技术管理的核心目标、总体架构、关键组件、业务流程、开发技巧与最佳实践,并提供完整的参考代码,助力企业将技术数据转化为可执行的生产指令,提升制造效率与质量。
|
9月前
|
消息中间件 JavaScript 关系型数据库
如何开发一套ERP(离散制造-MTO)系统(附架构图+流程图+代码参考)
本文介绍了面向离散制造-MTO(按订单生产)模式的ERP系统设计与实现方法。内容涵盖ERP系统定义、总体架构设计、主要功能模块解析、关键业务流程(订单到交付、BOM展开、MRP逻辑、排产等)、开发技巧(DDD、微服务、事件驱动)、参考代码示例、部署上线注意事项及实施效果评估。旨在帮助企业与开发团队构建高效、灵活、可扩展的ERP系统,提升订单交付能力与客户满意度。
|
11月前
|
人工智能 运维 安全
如何自己开发一套ERP系统?
本文探讨了企业自建ERP系统的可行性,分析了轻量、中型和重型ERP的区别,并指出自研ERP需明确业务需求、流程逻辑及投入成本。文章建议企业在决定自研前,应先梳理清楚管理逻辑,而非盲目追求技术方案。
|
11月前
|
SQL 存储 供应链
如何开发ERP系统中的库存管理板块(附架构图+流程图+代码参考)
本文介绍如何通过ERP系统实现企业库存管理的数字化与自动化,涵盖仓库管理、库位管理、出入库操作、库存调拨与盘点等功能设计,并提供开发技巧及代码参考,帮助企业提升库存管理效率,减少错误与资源浪费。
|
9月前
|
监控 供应链 前端开发
如何开发ERP(离散制造-MTO)系统中的财务管理板块(附架构图+流程图+代码参考)
本文详解离散制造MTO企业ERP系统中财务管理模块的搭建,聚焦应收账款与应付账款管理,涵盖核心功能、业务流程、开发技巧及Python代码示例,助力企业实现财务数据准确、实时可控,提升现金流管理能力。
1181 32
|
9月前
|
供应链 监控 JavaScript
如何开发ERP(离散制造-MTO)系统中的库存管理板块(附架构图+流程图+代码参考)
本文详解MTO模式下ERP库存管理的关键作用,涵盖核心模块、业务流程、开发技巧与代码示例,助力制造企业提升库存周转率、降低缺货风险,实现高效精准的库存管控。
|
9月前
|
消息中间件 JavaScript BI
如何开发ERP(离散制造-MTO)系统中的客户管理板块(附架构图+流程图+代码参考)
本文详解离散制造-MTO模式下ERP系统客户管理模块的设计与实现,涵盖架构图、流程图、功能拆解、开发技巧及TypeScript参考代码,助力企业打通客户信息与报价、生产、交付全链路,提升响应效率与订单准交率。
|
9月前
|
JSON 前端开发 关系型数据库
如何开发ERP(离散制造-MTO)系统中的销售管理板块(附架构图+流程图+代码参考)
针对离散制造MTO模式,销售管理是业务核心入口,贯穿报价、订单、ATP、排产与交付。本文详解其架构设计、关键流程、数据模型及开发实践,助力企业提升交付准确率与运营效率。
|
11月前
|
SQL 数据挖掘 API
如何开发ERP系统中的质量管理板块(附架构图+流程图+代码参考)
质量管理在ERP系统中的作用不仅仅是记录质量检验数据,它还涉及到从物料采购、生产过程、到最终产品的全流程管理。如何搭建一个高效、可靠的质量管理板块,成为了许多企业在进行ERP系统开发时需要重点考虑的问题。本文将详细介绍如何开发ERP系统中的质量管理板块,涵盖功能模块、业务流程、开发技巧和实现效果等方面,并提供具体的代码参考。

热门文章

最新文章