cancellingStocks.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="cancelStockPages" :style="`backgroundImage:linear-gradient(180deg, ${$config('primaryColor')}, #F5F6F7 12%)`">
  3. <view class="cancelStockPages-body">
  4. <view class="head-info" v-if="info">
  5. <view>
  6. <view class="label"><u-icon name="ison_shelf" custom-prefix="iscm-icon" size="32" color="#7C7D7E"></u-icon><text>货架名称</text></view>
  7. <view>{{info.shelfName}}</view>
  8. </view>
  9. <view>
  10. <view class="label"><u-icon name="icon_position" custom-prefix="iscm-icon" size="32" color="#7C7D7E"></u-icon><text>客户地址</text></view>
  11. <view>{{info.shelfAddress}}</view>
  12. </view>
  13. </view>
  14. <view class="part-list">
  15. <!-- 配件列表 -->
  16. <partList :list="partList"></partList>
  17. </view>
  18. </view>
  19. <view class="cancelStockPages-footer">
  20. <view>
  21. <u-checkbox size="40" v-model="allChecked" shape="circle">全选</u-checkbox>
  22. </view>
  23. <view>
  24. <u-button shape="circle" :custom-style="{background:$config('primaryColor')}" type="primary">确定退库</u-button>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import { shelfRecallFindBySn, detailQueryCount, shelfRecallDetail } from '@/api/shelfRecall.js'
  31. import partList from '../common/partList.vue'
  32. export default {
  33. components: {
  34. partList
  35. },
  36. data() {
  37. return {
  38. allChecked: false,
  39. recallBillSn: '',
  40. info:null,
  41. partList: []
  42. }
  43. },
  44. onReady() {
  45. uni.setNavigationBarColor({
  46. frontColor: '#fff',
  47. backgroundColor: this.$config('primaryColor')
  48. })
  49. },
  50. onLoad(option) {
  51. this.recallBillSn = option.recallBillSn
  52. this.getDetail()
  53. this.getPartList()
  54. },
  55. methods: {
  56. getDetail(){
  57. shelfRecallFindBySn({sn:this.recallBillSn}).then(res => {
  58. if(res.status == 200){
  59. this.info = res.data
  60. }
  61. })
  62. },
  63. getPartList(){
  64. shelfRecallDetail({recallBillSn:this.recallBillSn}).then(res => {
  65. if(res.status == 200){
  66. this.partList = res.data.data
  67. }
  68. })
  69. }
  70. }
  71. }
  72. </script>
  73. <style lang="less">
  74. .cancelStockPages{
  75. width: 100%;
  76. height: 100vh;
  77. display: flex;
  78. flex-direction: column;
  79. .cancelStockPages-body{
  80. padding: 30rpx;
  81. flex-grow: 1;
  82. overflow: auto;
  83. > view{
  84. padding: 10rpx 25rpx;
  85. background-color: #fff;
  86. margin-bottom: 20rpx;
  87. border-radius: 25rpx;
  88. box-shadow: 2rpx 3rpx 5rpx #eee;
  89. }
  90. .head-info{
  91. font-size: 30rpx;
  92. > view{
  93. display: flex;
  94. border-bottom: 2rpx solid #f5f5f5;
  95. padding: 20rpx 0;
  96. > view:last-child{
  97. flex-grow: 1;
  98. width: 80%;
  99. }
  100. &:last-child{
  101. border:0;
  102. }
  103. }
  104. .label{
  105. display: flex;
  106. align-items: center;
  107. width: 220rpx;
  108. height: 44rpx;
  109. color: #7C7D7E;
  110. text{
  111. margin-left: 10rpx;
  112. }
  113. }
  114. }
  115. }
  116. .cancelStockPages-footer{
  117. background-color: #fff;
  118. padding: 20rpx 40rpx;
  119. display: flex;
  120. align-items: center;
  121. justify-content: space-between;
  122. }
  123. }
  124. </style>