基于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:falselet realScreenWidth = window.screen.width * window.devicePixelRatiothis.width = realScreenWidth<1600?'1300px':'1600px'},computed: {readOnly: function() {return this.action !== "add" && this.action !== "edit";}},methods: {/** 查询某个tab的数据 */requestSubTableData(url, params, tab, success) {tab.loading = truegetAction(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, //行的idvalues: { //在这里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 = thisconst { type, row, column, value, target } = eventlet param,orderNum,taxPrice,totalPriceswitch(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 = valuesconsole.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 = 0let totalNum = 0for (let j = 0; j < mArr.length; j++) {totalPrice += mArr[j].totalPrice-0totalNum += mArr[j].orderNum-0}console.log("onValueChange mArr2",mArr)this.erpSaleOutDetailTable.dataSource = mArrtarget.statisticsColumns.totalPrice = totalPricetarget.statisticsColumns.orderNum = totalNumthis.model.totalAmount = totalPricethis.model.totalNum = totalNum//target.setValues(mArrValues)//target.recalcAllStatisticsColumns()// 更新form表单的值//that.autoChangePrice(target) })}  });break;case "orderNum":orderNum = value-0taxPrice = row.taxPrice-0 //单价totalPrice = (taxPrice*orderNum).toFixed(2)-0target.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)-0target.setValues([{rowKey: row.id, values: {totalPrice: totalPrice}}])target.recalcAllStatisticsColumns()that.autoChangePrice(target) break;case "totalPrice":orderNum = row.orderNum-0 //数量totalPrice = value-0taxPrice = (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-0let totalNum = target.statisticsColumns.orderNum-0this.model.totalAmount = totalPricethis.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

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

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

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

基于Jeecgboot前后端分离的ERP系统开发系列--出库单（3）
继续对销售出库单进行完善与处理一.列表显示状态目前先给出库表单两种状态,未审核与审核通过状态,前端通过下面调整 { title:'状态', alig ...
基于Jeecgboot前后端分离的ERP系统开发数据库设计（二）
-- ---------------------------- -- Table structure for erp_goods -- ---------------------------- DRO ...
基于SpringBoot前后端分离的众筹系统（附源码）
基于SpringBoot前后端分离的众筹系统源码下载链接: https://download.csdn.net/download/weixin_47367099/85441573 一.运行步骤 1.环 ...
基于Jeecgboot前后端分离的流程管理平台演示系统安装(二)
三.手动发布与测试后端: 修改application-prod.yml文件,根据自己的发布机器的相关参数进行修改,再进行编译,处出来nbcio-boot\nbcio-boot-module-syst ...
基于Springboot+MybatisPlus+Vue的前后端分离电子商城系统
一.基于Springboot+MybatisPlus+Vue的前后端分离电子商城系统基于Springboot+MybatisPlus+Vue的前后端分离电子商城系统,主要分为用户端和管理端两个模块. ...
基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署本源码技 ...
基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目架构:B ...
安居客住房系统-基于Python-Django前后端分离开发（一）——初始化项目及ORM关系映射
"安居客"住房系统-基于Python-Django前后端分离开发作者:代昌松项目详情代码请参加我的代码仓库:https://gitee.com/dcstempt_ping/iz ...
“安居客“住房系统-基于Python-Django前后端分离开发（二）——基于RESTful架构的数据接口配置以及Redis高速缓存
"安居客"住房系统-基于Python-Django前后端分离开发(二) 基于Django-Rest-Framework创建接口数据(二) 文章目录 "安居客"住 ...

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

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

最新文章

热门文章