Allocationedit.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <template>
  2. <view class="detail-view">
  3. <u-form label-width="160" :model="add_form" ref="uForm">
  4. <view class="form-model-view">
  5. <u-form-item required label="调出仓库" prop="fromWarehouse">
  6. <u-input @click="goWarehouse(1)" class="dis-input" disabled v-model="add_form.fromWarehouse" placeholder="请选择" />
  7. <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
  8. </u-form-item>
  9. <u-form-item required label="调入仓库" prop="targetWarehouse">
  10. <u-input @click="goWarehouse(2)" class="dis-input" disabled v-model="add_form.targetWarehouse" placeholder="请选择" />
  11. <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
  12. </u-form-item>
  13. </view>
  14. <view class="form-model-view">
  15. <u-form-item required label="商品清单">
  16. <view @click="selGoodsPage" class="form-value add-btn-go">
  17. <u-icon name="plus" size="24"></u-icon>
  18. <text>选择商品</text>
  19. </view>
  20. </u-form-item>
  21. <view class="goods-ul" v-if="goods_list.length">
  22. <block v-for="(item, index) in goods_list" :key="index">
  23. <view class="goods-li clearfix">
  24. <view class="goods-img float_left" @click="delGoods(item, index)"><u-icon size="40" name="minus-circle-fill" color="#fa3534"></u-icon></view>
  25. <view class="float_left info">
  26. <view class="goods-name ellipsis">{{ item.materielName }}</view>
  27. <view class="goods-code">{{ item.materielCode }}</view>
  28. <view class="goods-num">{{ item.unitName }};{{ item.skuName }}</view>
  29. <view class="num-ul">
  30. <view class="num-li">
  31. <view class="label">可售库存</view>
  32. <input type="digit" class="input-dis" disabled v-model="item.inventoryNum" />
  33. </view>
  34. <view class="num-li">
  35. <view class="label">调拨数量</view>
  36. <input type="digit" @blur="numChange(index)" placeholder="请输入" v-model="item.num" />
  37. </view>
  38. <view class="num-li" v-if="item.isEq === 5">
  39. <view class="label">其他单位</view>
  40. <input type="digit" placeholder="请输入" v-model="item.otherNum" />
  41. </view>
  42. </view>
  43. <view class="num-ul" v-if="enableLocationManagement === 5">
  44. <view class="num-li">
  45. <view class="label">调出库区库位</view>
  46. <input
  47. @click="openLocation(1, index, item)"
  48. disabled
  49. type="text"
  50. placeholder="请选择"
  51. :value="item.outStorageLocationName ? item.outAreaName + '-' + item.outStorageLocationName : ''"
  52. />
  53. </view>
  54. <view class="num-li">
  55. <view class="label">调入库区库位</view>
  56. <input
  57. @click="openLocation(2, index, item)"
  58. disabled
  59. type="text"
  60. placeholder="请选择"
  61. :value="item.inStorageLocationName ? item.inAreaName + '-' + item.inStorageLocationName : ''"
  62. />
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. </block>
  68. </view>
  69. </view>
  70. <view class="form-model-view">
  71. <u-form-item label="备注" label-position="top"><u-input type="textarea" v-model="add_form.remark" /></u-form-item>
  72. </view>
  73. </u-form>
  74. <view class="detail-bottom"><u-button class="handel-btn" @click="submit" :loading="sub_load" :ripple="true" type="primary">提交</u-button></view>
  75. </view>
  76. </template>
  77. <script>
  78. export default {
  79. data() {
  80. return {
  81. sub_load: false,
  82. werahouseData: '',
  83. warehouseGoods: '',
  84. add_form: {
  85. fromWarehouse: '', // 仓库名称
  86. targetWarehouse: '',
  87. fromWarehouseId: '', // 所属仓库id
  88. targetWarehouseId: '',
  89. operatorName: '',
  90. couponAmount: '',
  91. otherAmount: '',
  92. remark: ''
  93. },
  94. goods_list: [],
  95. del_goods_id: [],
  96. tag: '',
  97. no: '',
  98. goods_index: 0,
  99. areaBysku: ''
  100. };
  101. },
  102. computed: {
  103. userName() {
  104. return this.$store.state.userInfo.name;
  105. },
  106. enableLocationManagement() {
  107. return parseInt(this.$store.state.basicSet.enableLocationManagement);
  108. }
  109. },
  110. watch: {
  111. werahouseData(val) {
  112. if (this.tag === 1) {
  113. if (val) {
  114. this.add_form.fromWarehouseId = val.id;
  115. this.add_form.fromWarehouse = val.warehouseName;
  116. this.goods_list = [];
  117. }
  118. } else if (this.tag === 2) {
  119. if (val) {
  120. this.add_form.targetWarehouseId = val.id;
  121. this.add_form.targetWarehouse = val.warehouseName;
  122. }
  123. }
  124. },
  125. // 选择商品资料页面返回
  126. warehouseGoods(list) {
  127. if (list) {
  128. this.selGoods(list);
  129. }
  130. },
  131. areaBysku(val) {
  132. if (val) {
  133. const target = this.$u.deepClone(this.goods_list);
  134. if (this.tag === 1) {
  135. target[this.goods_index] = {
  136. ...target[this.goods_index],
  137. outAreaId: val.areaId,
  138. outAreaName: val.areaName,
  139. outAreaCode: val.areaCode,
  140. outStorageLocationId: val.storageLocationId,
  141. outStorageLocationName: val.storageLocationName,
  142. outStorageLocationCode: val.storageLocationCode
  143. };
  144. } else if (this.tag === 2) {
  145. if (val) {
  146. target[this.goods_index] = {
  147. ...target[this.goods_index],
  148. inAreaId: val.areaId,
  149. inAreaName: val.areaName,
  150. inAreaCode: val.areaCode,
  151. inStorageLocationId: val.storageLocationId,
  152. inStorageLocationName: val.storageLocationName,
  153. inStorageLocationCode: val.storageLocationCode
  154. };
  155. }
  156. }
  157. this.goods_list = target;
  158. }
  159. }
  160. },
  161. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  162. onReady() {
  163. this.$refs.uForm.setRules(this.rules);
  164. },
  165. onLoad(options) {
  166. if (options.id) {
  167. this.Allocat_id = options.id;
  168. uni.setNavigationBarTitle({
  169. title: '编辑调拨单'
  170. });
  171. this.getAllocateInfo();
  172. }
  173. },
  174. methods: {
  175. // 去选择库区库位页面
  176. openLocation(tag, index, row) {
  177. this.tag = tag;
  178. this.goods_index = index;
  179. const warehouseId = tag === 1 ? this.add_form.fromWarehouseId : this.add_form.targetWarehouseId;
  180. this.goPage(`/pagesT/stock/WarehouseRegionBySku?basicGoodsId=${row.materielId}&skuId=${row.skuId}&warehouseId=${warehouseId}`);
  181. },
  182. delGoods(row, index) {
  183. if (row.id) {
  184. this.del_goods_id.push(row.id);
  185. }
  186. this.goods_list.splice(index, 1);
  187. },
  188. numChange(index) {
  189. const target = this.$u.deepClone(this.goods_list);
  190. if (target[index].num > target[index].inventoryNum) {
  191. target[index].num = target[index].inventoryNum;
  192. } else if (target[index].num < 0) {
  193. target[index].num = 0;
  194. }
  195. this.goods_list = target;
  196. },
  197. goWarehouse(tag) {
  198. this.tag = tag;
  199. this.goPage('/pagesT/werahouse/selWerahouse');
  200. },
  201. selGoodsPage() {
  202. if (!this.add_form.fromWarehouseId) {
  203. this.$u.toast('请选择仓库');
  204. return;
  205. }
  206. uni.setStorageSync('warehouseGoods', this.goods_list);
  207. this.goPage('/pagesT/goods/GoodsbyWarehouse?id=' + this.add_form.fromWarehouseId);
  208. },
  209. // 详情
  210. getAllocateInfo() {
  211. this.$u.api.getAllocateInfo(this.Allocat_id).then(({ data }) => {
  212. this.no = data.no;
  213. this.add_form.fromWarehouse = data.warehouseName;
  214. this.add_form.fromWarehouseId = data.warehouseId;
  215. this.add_form.targetWarehouse = data.inWarehouseName;
  216. this.add_form.targetWarehouseId = data.inWarehouseId;
  217. this.add_form.operatorName = data.operatorName;
  218. this.add_form.remark = data.remark;
  219. this.goods_list = data.details.map(item => {
  220. return {
  221. ...item,
  222. inventoryNum: Number(item.inventoryNum),
  223. num: Number(item.num),
  224. otherNum: item.isEq === 5 ? Number(item.otherNum) : '',
  225. warehouseName: this.add_form.fromWarehouse,
  226. inwarehouseName: this.add_form.targetWarehouse,
  227. inAreaId: item.inAreaId,
  228. inAreaName: item.inAreaName,
  229. inAreaCode: item.inAreaCode,
  230. inStorageLocationId: item.inStorageLocationId,
  231. inStorageLocationName: item.inStorageLocationName,
  232. inStorageLocationCode: item.inStorageLocationCode,
  233. outAreaId: item.outAreaId,
  234. outAreaName: item.outAreaName,
  235. outAreaCode: item.outAreaCode,
  236. outStorageLocationId: item.outStorageLocationId,
  237. outStorageLocationName: item.outStorageLocationName,
  238. outStorageLocationCode: item.outStorageLocationCode
  239. };
  240. });
  241. });
  242. },
  243. // 多选商品确定
  244. selGoods(list) {
  245. this.goods_list = list.map(item => {
  246. return {
  247. isEq: item.isEq,
  248. otherNum: Number(item.otherNum),
  249. materielId: item.materielId,
  250. materielCode: item.materielCode,
  251. materielName: item.materielName,
  252. warehouseName: item.warehouseName,
  253. inwarehouseName: this.targetWarehouse,
  254. skuName: item.skuName,
  255. skuId: item.skuId,
  256. unitName: item.unitName,
  257. inventoryNum: Number(item.allNum),
  258. num: Number(item.buyNum),
  259. categoryTitle: item.categoryTitle,
  260. costUnitPrice: item.costPrice,
  261. inAreaId: '',
  262. inAreaName: '',
  263. inAreaCode: '',
  264. inStorageLocationId: '',
  265. inStorageLocationName: '',
  266. inStorageLocationCode: '',
  267. outAreaId: '',
  268. outAreaName: '',
  269. outAreaCode: '',
  270. outStorageLocationId: '',
  271. outStorageLocationName: '',
  272. outStorageLocationCode: ''
  273. };
  274. });
  275. },
  276. submit() {
  277. this.$refs.uForm.validate(valid => {
  278. if (valid) {
  279. if (!this.goods_list.length) {
  280. this.$u.toast('请选择商品');
  281. return;
  282. }
  283. let flag = false;
  284. this.goods_list.forEach(item => {
  285. if (Number(item.inventoryNum) === 0) {
  286. flag = true;
  287. }
  288. });
  289. if (flag) {
  290. this.$u.toast('可售库存为空,无法调拨');
  291. return;
  292. }
  293. const params = {
  294. no: this.no || '',
  295. warehouseId: this.add_form.fromWarehouseId,
  296. inWarehouseId: this.add_form.targetWarehouseId,
  297. warehouseName: this.add_form.fromWarehouse,
  298. inWarehouseName: this.add_form.targetWarehouse,
  299. operatorName: this.userName,
  300. remark: this.add_form.remark,
  301. details: this.goods_list.map(item => {
  302. return {
  303. isEq: item.isEq,
  304. id: item.id,
  305. materielId: item.materielId,
  306. materielName: item.materielName,
  307. materielCode: item.materielCode,
  308. skuId: item.skuId,
  309. unitName: item.unitName,
  310. skuName: item.skuName,
  311. num: item.num,
  312. costUnitPrice: item.costUnitPrice,
  313. otherNum: item.otherNum,
  314. inAreaId: item.inAreaId,
  315. inAreaName: item.inAreaName,
  316. inAreaCode: item.inAreaCode,
  317. inStorageLocationId: item.inStorageLocationId,
  318. inStorageLocationName: item.inStorageLocationName,
  319. inStorageLocationCode: item.inStorageLocationCode,
  320. outAreaId: item.outAreaId,
  321. outAreaName: item.outAreaName,
  322. outAreaCode: item.outAreaCode,
  323. outStorageLocationId: item.outStorageLocationId,
  324. outStorageLocationName: item.outStorageLocationName,
  325. outStorageLocationCode: item.outStorageLocationCode
  326. };
  327. })
  328. };
  329. this.sub_load = true;
  330. if (this.Allocat_id) {
  331. this.$u.api
  332. .updateAllocate(this.Allocat_id, { ...params, deleteArray: this.del_goods_id })
  333. .then(res => {
  334. this.sub_load = false;
  335. this.$u.toast('修改成功');
  336. setTimeout(() => {
  337. uni.navigateBack();
  338. }, 2000);
  339. })
  340. .catch(err => {
  341. this.sub_load = false;
  342. });
  343. } else {
  344. this.$u.api
  345. .addAllocate(params)
  346. .then(res => {
  347. this.$u.toast('新建成功');
  348. setTimeout(() => {
  349. uni.navigateBack();
  350. }, 2000);
  351. })
  352. .catch(err => {
  353. this.sub_load = false;
  354. });
  355. }
  356. }
  357. });
  358. }
  359. }
  360. };
  361. </script>
  362. <style lang="scss" scoped>
  363. .goods-ul {
  364. padding-bottom: 20rpx;
  365. .goods-title {
  366. margin-bottom: 20rpx;
  367. line-height: 80rpx;
  368. font-size: 24rpx;
  369. border-bottom: 1px solid #eeeeee;
  370. .float_right {
  371. color: $uni-color-primary;
  372. }
  373. }
  374. .goods-li {
  375. line-height: 32rpx;
  376. margin-top: 20rpx;
  377. .goods-img {
  378. margin-right: 20rpx;
  379. image {
  380. width: 150rpx;
  381. height: 150rpx;
  382. border-radius: 8rpx;
  383. display: block;
  384. }
  385. }
  386. .info {
  387. width: 640rpx;
  388. .num-ul {
  389. display: flex;
  390. padding-top: 20rpx;
  391. .num-li {
  392. font-size: 24rpx;
  393. line-height: 36rpx;
  394. flex: 3;
  395. text-align: center;
  396. position: relative;
  397. font-weight: bold;
  398. padding: 0 16rpx;
  399. .label {
  400. font-weight: 400;
  401. color: #999999;
  402. }
  403. input {
  404. text-align: center;
  405. border-bottom: 1px solid $uni-color-primary;
  406. &.input-dis {
  407. border-bottom: 1px solid #eeeeee;
  408. }
  409. }
  410. &::after {
  411. display: block;
  412. content: '';
  413. position: absolute;
  414. width: 1px;
  415. height: 60rpx;
  416. top: 50%;
  417. transform: translateY(-50%);
  418. right: 0;
  419. background-color: #eeeeee;
  420. }
  421. &:last-child {
  422. &::after {
  423. display: block;
  424. content: '';
  425. position: absolute;
  426. width: 1px;
  427. height: 50rpx;
  428. top: 50%;
  429. transform: translateY(-50%);
  430. right: 0;
  431. background-color: transparent;
  432. }
  433. }
  434. }
  435. }
  436. .goods-name {
  437. width: 640rpx;
  438. height: 34rpx;
  439. line-height: 34rpx;
  440. }
  441. .goods-code {
  442. font-size: 24rpx;
  443. padding-top: 10rpx;
  444. }
  445. .goods-num {
  446. padding-top: 10rpx;
  447. font-size: 24rpx;
  448. .price {
  449. font-size: 28rpx;
  450. font-weight: bold;
  451. color: $uni-color-error;
  452. }
  453. }
  454. }
  455. }
  456. }
  457. </style>