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

news2024/9/20 0:57:00

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

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