add.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  1. <template>
  2. <view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
  3. <cus-header title='新增'></cus-header>
  4. <div class="box">
  5. <div class="title">入库单基本信息</div>
  6. <div class="form">
  7. <div class="item">
  8. <div class="left"><span>*</span>入库单号</div>
  9. <div class="right">
  10. <input type="text" placeholder-class="storage-inp-ph" placeholder="请输入入库单号" v-model="receiptDto.orderNo" @blur="e=>setReceipt(e,'orderNo')">
  11. </div>
  12. </div>
  13. <div class="item">
  14. <div class="left"><span>*</span>仓库</div>
  15. <div class="right" @tap="selectWarehouse">
  16. <text v-if="receiptDto.warehouseName">{{receiptDto.warehouseName}} ></text>
  17. <text class="tip" v-else>请选择仓库 ></text>
  18. </div>
  19. </div>
  20. <div class="item">
  21. <div class="left"><span>*</span>入库类型</div>
  22. <div class="right" @tap="selectReceiptType">
  23. <text v-if="receiptDto.optTypeName">{{receiptDto.optTypeName}} ></text>
  24. <text class="tip" v-else>请选择 ></text>
  25. </div>
  26. </div>
  27. <div class="item">
  28. <div class="left">供应商</div>
  29. <div class="right" @tap="selectMerchant">
  30. <text v-if="receiptDto.merchantName">{{receiptDto.merchantName}} ></text>
  31. <text class="tip" v-else>请选择 ></text>
  32. </div>
  33. </div>
  34. <div class="item">
  35. <div class="left">到货日期</div>
  36. <div class="right" @tap="dateShow = true">
  37. <text v-if="receiptDto.arrivalDate">{{receiptDto.arrivalDate}} ></text>
  38. <text class="tip" v-else>请选择 ></text>
  39. </div>
  40. </div>
  41. <div class="item">
  42. <div class="left">业务单号</div>
  43. <div class="right">
  44. <input type="text" placeholder-class="storage-inp-ph" placeholder="请输入" v-model="receiptDto.bizOrderNo" @blur="e=>setReceipt(e,'bizOrderNo')">
  45. </div>
  46. </div>
  47. <!-- <div class="item">
  48. <div class="left">总数量</div>
  49. <div class="right">
  50. <input type="text" v-model="receiptDto.totalQuantity" disabled>
  51. </div>
  52. </div> -->
  53. <div class="item">
  54. <div class="left">采购负责人</div>
  55. <div class="right">
  56. <input type="text" placeholder-class="storage-inp-ph" placeholder="请输入" v-model="receiptDto.purchaser" @blur="e=>setReceipt(e,'purchaser')">
  57. </div>
  58. </div>
  59. <div class="item">
  60. <div class="left">总金额</div>
  61. <div class="right">
  62. <input type="text" placeholder-class="storage-inp-ph" placeholder="请输入" v-model="receiptDto.totalAmount" @blur="e=>setReceipt(e,'totalAmount')">
  63. </div>
  64. </div>
  65. <div class="zdjs" @tap="autoCalculate">自动计算</div>
  66. </div>
  67. </div>
  68. <div class="box" :style="{'padding-bottom':receiptDto.details.length?'0':'48rpx'}">
  69. <div class="title">商品明细</div>
  70. <div class="btns">
  71. <div class="btn" @tap="toAddGoods">+ 添加商品</div>
  72. <div class="btn" @tap="toScan">+ 扫码添加</div>
  73. </div>
  74. <div class="goods">
  75. <template v-if="receiptDto.details.length">
  76. <div class="good" v-for="(good,idx) in receiptDto.details" :key="good.skuId">
  77. <div class="title">
  78. <text>{{good.item.itemName}}</text>
  79. <image :src="imgBase+'storage/icon_remove_grey.png'" @tap="deleteGood(idx)"></image>
  80. </div>
  81. <div class="info">
  82. <div>规格信息:<span>{{good.itemSku.skuName||''}} / {{good.itemSku.grossWeight||0}}kg / {{good.itemSku.width||0}}X{{good.itemSku.height||0}}cm</span></div>
  83. </div>
  84. <div class="num">
  85. <text>入库数量:</text>
  86. <u-number-box v-model="good.quantity" button-size="48" :integer="true" inputWidth="102rpx"
  87. @change="e=>changeRkNum(e,idx)" bgColor="#F5F8FA"></u-number-box>
  88. </div>
  89. <div class="num">
  90. <text>金额:</text>
  91. <u-number-box v-model="good.amount" button-size="48" :integer="false" :canSmall="true" inputWidth="102rpx"
  92. @change="e=>changeRkMoney(e,idx)" bgColor="#F5F8FA"></u-number-box>
  93. </div>
  94. </div>
  95. </template>
  96. </div>
  97. </div>
  98. <div class="save">
  99. <div class="btn" @tap="saveReceipt">保存</div>
  100. </div>
  101. <u-picker title="仓库" :show="warehouseShow" :columns="warehouseList" keyName="warehouseName"
  102. @cancel="warehouseShow=false" @confirm="warehouseConfirm">
  103. </u-picker>
  104. <u-picker title="入库类型" :show="receiptTypeShow" :columns="receiptTypeList" keyName="dictLabel"
  105. @cancel="receiptTypeShow=false" @confirm="receiptTypeConfirm">
  106. </u-picker>
  107. <u-picker title="供应商" :show="merchantShow" :columns="merchantList" keyName="merchantName"
  108. @cancel="merchantShow=false" @confirm="merchantConfirm">
  109. </u-picker>
  110. <u-calendar title="到货日期" :show="dateShow" mode="single" @confirm="dateConfirm" @close="dateShow = false"></u-calendar>
  111. </view>
  112. </template>
  113. <script>
  114. import { generateNo } from '@/utils/common.js'
  115. export default {
  116. data(){
  117. return {
  118. receiptDto:{
  119. id: '',
  120. orderNo: '',
  121. optType: '',
  122. optTypeName: '',
  123. merchantId: '',
  124. merchantName: '',
  125. bizOrderNo: '',
  126. totalAmount: '',
  127. orderStatus: 1,
  128. warehouseId: '',
  129. warehouseName: '',
  130. totalQuantity: 0,
  131. purchaser:'',
  132. arrivalDate:'',
  133. details: []
  134. },
  135. warehouseShow:false,
  136. warehouseList:[],
  137. receiptTypeShow:false,
  138. receiptTypeList:[],
  139. merchantShow:false,
  140. merchantList:[],
  141. dateShow:false
  142. }
  143. },
  144. mounted() {
  145. this.receiptDto.orderNo = generateNo('RK');
  146. },
  147. methods:{
  148. selectWarehouse(){
  149. this.warehouseShow = true;
  150. this.$nextTick(()=>{
  151. this.$api.get('/wms/warehouse/page').then(res=>{
  152. if(res.data.code===0){
  153. this.warehouseList = [res.data.data.list];
  154. }else this.$showToast(res.data.msg)
  155. })
  156. })
  157. },
  158. warehouseConfirm(e){
  159. this.receiptDto.warehouseId = e.value[0].id;
  160. this.receiptDto.warehouseName = e.value[0].warehouseName;
  161. this.warehouseShow = false;
  162. },
  163. selectReceiptType(){
  164. this.receiptTypeShow = true;
  165. this.$nextTick(()=>{
  166. this.$api.get('/sys/dict/data/getListByType/wms_receipt_type').then(res=>{
  167. if(res.data.code===0){
  168. this.receiptTypeList = [res.data.data];
  169. }else this.$showToast(res.data.msg)
  170. })
  171. })
  172. },
  173. receiptTypeConfirm(e){
  174. this.receiptDto.optType = e.value[0].dictValue;
  175. this.receiptDto.optTypeName = e.value[0].dictLabel;
  176. this.receiptTypeShow = false;
  177. },
  178. selectMerchant(){
  179. this.merchantShow = true;
  180. this.$nextTick(()=>{
  181. this.$api.get('/wms/merchant/page').then(res=>{
  182. if(res.data.code===0){
  183. this.merchantList = [res.data.data.list];
  184. }else this.$showToast(res.data.msg)
  185. })
  186. })
  187. },
  188. merchantConfirm(e){
  189. this.receiptDto.merchantId = e.value[0].id;
  190. this.receiptDto.merchantName = e.value[0].merchantName;
  191. this.merchantShow = false;
  192. },
  193. setReceipt(e,name){
  194. this.receiptDto[name] = e.target.value;
  195. },
  196. autoCalculate(){
  197. this.receiptDto.totalAmount = this.receiptDto.details.reduce((cur,pre)=>cur+(+pre.amount||0),0);
  198. },
  199. toAddGoods(){
  200. let ids = this.receiptDto.details.map(d=>d.skuId);
  201. uni.navigateTo({
  202. url:'/pagesStorage/inStorage/goods?ids='+ids,
  203. events:{
  204. addGoods:list=>{
  205. let aList = JSON.parse(JSON.stringify(list));
  206. this.receiptDto.details.forEach(d=>{
  207. aList = aList.filter(l=>l.skuId!=d.skuId)
  208. })
  209. aList.forEach((d,i)=>{
  210. let amount = d.checknum*d.itemSku.costPrice;
  211. this.$set(aList[i],'amount',amount);
  212. this.$set(aList[i],'quantity',d.checknum);
  213. })
  214. this.receiptDto.details = [...this.receiptDto.details,...aList];
  215. this.computeNum();
  216. this.autoCalculate();
  217. }
  218. }
  219. })
  220. },
  221. toScan(){
  222. uni.navigateTo({
  223. url:'/pagesStorage/inStorage/scan',
  224. events:{
  225. addGoods:list=>{
  226. let aList = JSON.parse(JSON.stringify(list));
  227. this.receiptDto.details.forEach(d=>{
  228. aList = aList.filter(l=>l.skuId!=d.skuId)
  229. })
  230. this.receiptDto.details = [...this.receiptDto.details,...aList];
  231. this.computeNum();
  232. this.autoCalculate();
  233. }
  234. }
  235. })
  236. },
  237. deleteGood(index){
  238. this.receiptDto.details.splice(index,1);
  239. this.$nextTick(()=>{
  240. this.computeNum();
  241. this.autoCalculate();
  242. })
  243. },
  244. changeRkNum(e,index){
  245. this.$set(this.receiptDto.details[index],'quantity',e.value);
  246. this.$nextTick(()=>{
  247. this.computeNum();
  248. })
  249. },
  250. changeRkMoney(e,index){
  251. this.$set(this.receiptDto.details[index],'amount',e.value);
  252. this.autoCalculate();
  253. },
  254. computeNum(){
  255. this.receiptDto.totalQuantity = this.receiptDto.details.reduce((cur,pre)=>cur+pre.quantity,0);
  256. },
  257. saveReceipt(){
  258. if(!this.receiptDto.orderNo) return this.$showToast('请输入入库单号');
  259. if(!this.receiptDto.warehouseId) return this.$showToast('请选择仓库');
  260. if(!this.receiptDto.optType) return this.$showToast('请选择入库类型');
  261. let temp = JSON.parse(JSON.stringify(this.receiptDto.details));
  262. let details = temp.map(d=>{
  263. return {
  264. id: d?.id||'',
  265. skuId: d.itemSku.id,
  266. amount: d.amount,
  267. quantity: d.quantity,
  268. warehouseId: this.receiptDto.warehouseId,
  269. }
  270. })
  271. this.receiptDto.details = details;
  272. this.$api.post('/wms/receiptOrder',this.receiptDto).then(res=>{
  273. if(res.data.code===0){
  274. this.$showToast('入库单新增成功');
  275. setTimeout(()=>{
  276. uni.redirectTo({
  277. url:'/pagesStorage/inStorage/index'
  278. })
  279. },1500)
  280. }else this.$showToast(res.data.msg)
  281. })
  282. },
  283. dateConfirm(e){
  284. this.receiptDto.arrivalDate = e[0];
  285. this.dateShow = false;
  286. }
  287. }
  288. }
  289. </script>
  290. <style>
  291. .storage-inp-ph{
  292. color: #B9C0C8 !important;
  293. }
  294. </style>
  295. <style scoped lang="less">
  296. .page{
  297. padding: 0 24rpx 186rpx;
  298. background: #F4F8FB;
  299. box-sizing: border-box;
  300. .box{
  301. width: 100%;
  302. padding: 36rpx 24rpx;
  303. box-sizing: border-box;
  304. background: #FFFFFF;
  305. border-radius: 16rpx;
  306. margin-top: 20rpx;
  307. .title{
  308. font-family: PingFang-SC, PingFang-SC;
  309. font-weight: bold;
  310. font-size: 36rpx;
  311. color: #1D2129;
  312. line-height: 36rpx;
  313. text-align: left;
  314. }
  315. .form{
  316. width: 100%;
  317. margin-top: 36rpx;
  318. .item{
  319. width: 100%;
  320. height: 90rpx;
  321. background: #FFFFFF;
  322. box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
  323. display: flex;
  324. align-items: center;
  325. justify-content: space-between;
  326. .left{
  327. display: flex;
  328. align-items: center;
  329. font-family: PingFangSC, PingFang SC;
  330. font-weight: 400;
  331. font-size: 30rpx;
  332. color: #1D2129;
  333. line-height: 42rpx;
  334. text-align: left;
  335. span{
  336. color: #F95050;
  337. }
  338. }
  339. .right{
  340. input{
  341. font-family: PingFangSC, PingFang SC;
  342. font-weight: 400;
  343. font-size: 30rpx;
  344. color: #4E5969;
  345. line-height: 42rpx;
  346. text-align: right;
  347. }
  348. text{
  349. font-family: PingFangSC, PingFang SC;
  350. font-weight: 400;
  351. font-size: 30rpx;
  352. color: #4E5969;
  353. line-height: 42rpx;
  354. text-align: right;
  355. &.tip{
  356. color: #B9C0C8;
  357. }
  358. }
  359. }
  360. }
  361. .zdjs{
  362. font-family: PingFangSC, PingFang SC;
  363. font-weight: 400;
  364. font-size: 26rpx;
  365. color: #198CFF;
  366. line-height: 37rpx;
  367. text-align: right;
  368. margin-top: 9rpx;
  369. }
  370. }
  371. .btns{
  372. width: 100%;
  373. height: 64rpx;
  374. display: flex;
  375. justify-content: space-between;
  376. margin-top: 26rpx;
  377. .btn{
  378. width: calc(50% - 12rpx);
  379. height: 62rpx;
  380. border-radius: 16rpx;
  381. border: 1rpx solid #198CFF;
  382. font-family: PingFang-SC, PingFang-SC;
  383. font-weight: bold;
  384. font-size: 26rpx;
  385. color: #198CFF;
  386. line-height: 62rpx;
  387. text-align: center;
  388. letter-spacing: 2rpx;
  389. }
  390. }
  391. .goods{
  392. width: 100%;
  393. margin-top: 10rpx;
  394. .good{
  395. width: 100%;
  396. padding: 36rpx 0;
  397. box-sizing: border-box;
  398. background: #FFFFFF;
  399. box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
  400. &>div{
  401. display: flex;
  402. align-items: center;
  403. justify-content: space-between;
  404. }
  405. .title{
  406. text{
  407. font-family: PingFang-SC, PingFang-SC;
  408. font-weight: bold;
  409. font-size: 30rpx;
  410. color: #1D2129;
  411. line-height: 30rpx;
  412. text-align: left;
  413. }
  414. image{
  415. width: 28rpx;
  416. height: 28rpx;
  417. }
  418. }
  419. .info{
  420. margin-top: 24rpx;
  421. font-family: PingFangSC, PingFang SC;
  422. font-weight: 400;
  423. font-size: 24rpx;
  424. color: #86909C;
  425. line-height: 24rpx;
  426. span{
  427. color: #4E5969;
  428. }
  429. }
  430. .num,.money{
  431. margin-top: 24rpx;
  432. text{
  433. font-family: PingFangSC, PingFang SC;
  434. font-weight: 400;
  435. font-size: 24rpx;
  436. color: #86909C;
  437. line-height: 24rpx;
  438. text-align: left;
  439. }
  440. }
  441. }
  442. }
  443. }
  444. .save{
  445. width: 100%;
  446. height: 148rpx;
  447. padding: 20rpx 48rpx 0;
  448. box-sizing: border-box;
  449. background: #FFFFFF;
  450. position: fixed;
  451. left: 0;
  452. bottom: 0;
  453. .btn{
  454. width: 100%;
  455. height: 88rpx;
  456. background: #198CFF;
  457. border-radius: 16rpx;
  458. font-family: PingFang-SC, PingFang-SC;
  459. font-weight: bold;
  460. font-size: 32rpx;
  461. color: #FFFFFF;
  462. line-height: 88rpx;
  463. text-align: center;
  464. letter-spacing: 2rpx;
  465. }
  466. }
  467. }
  468. </style>