这次从出库单开始进行整个单据录入显示的模板,不再采用默认的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
其中里面弹出的窗口都是采用报表的方式实现
五、目前最终的效果图如下: