viewDetail.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <view class="p-content">
  3. <view class="p-head" v-if="baseData">
  4. <view>
  5. <view>
  6. <text>散件单号:</text>
  7. <text style="color: crimson;">{{baseData.sparePartsPurchaseNo}}</text>
  8. </view>
  9. </view>
  10. <view>
  11. <view>
  12. <text>供应商:</text>
  13. <view>
  14. {{baseData.supplierName||'--'}}
  15. </view>
  16. </view>
  17. </view>
  18. <view>
  19. <view>
  20. <text>散件入库类型:</text>
  21. <view>
  22. {{baseData.sparePartsTypeName||'--'}}
  23. </view>
  24. </view>
  25. </view>
  26. <view>
  27. <view>
  28. <text>备注:</text>
  29. <view>
  30. {{ (baseData&&baseData.remarks) || '--' }}
  31. </view>
  32. </view>
  33. </view>
  34. <view>
  35. <view>
  36. <text>联系人:</text>
  37. <view>
  38. {{ (baseData&&baseData.supplierContactPerson) || '--' }}
  39. <span v-if="baseData&&baseData.supplierContactTel">({{ baseData.supplierContactTel }})</span>
  40. </view>
  41. </view>
  42. </view>
  43. <view>
  44. <view>
  45. <text>联系地址:</text>
  46. <view>
  47. {{baseData.supplierProvinceName}}
  48. {{baseData.supplierCityName}}
  49. {{baseData.supplierCountyName}}
  50. {{baseData.supplierAddress}}
  51. </view>
  52. </view>
  53. </view>
  54. <view v-if="countData" style="justify-content: flex-start;flex-wrap: wrap;">
  55. <view>总款数:{{countData.productTotalCategory||0}}</view>
  56. <view>总数量:{{countData.productTotalQty||0}}</view>
  57. <view>总成本:<u-text type="error" mode="price" :text="countData.productTotalCost||0" /></view>
  58. </view>
  59. </view>
  60. <view class="p-body">
  61. <uni-table border emptyText="暂无数据" :loading="loading" >
  62. <!-- 表头行 -->
  63. <uni-tr>
  64. <uni-td align="center">产品编码</uni-td>
  65. <uni-td align="center">数量</uni-td>
  66. <uni-td align="center">总成本</uni-td>
  67. </uni-tr>
  68. <!-- 表格数据行 -->
  69. <uni-tr v-for="item in detailList" :key="item.id" @click="toDetail(item)">
  70. <uni-td width="40%" align="center">{{item.productCode}}</uni-td>
  71. <uni-td width="30%" align="center">{{item.putQty}}</uni-td>
  72. <uni-td width="30%" align="center">
  73. <span :style="{ color: 'red' }">¥{{Number(item.putCost*item.putQty).toFixed(2)}}</span>
  74. </uni-td>
  75. </uni-tr>
  76. </uni-table>
  77. </view>
  78. </view>
  79. </template>
  80. <script>
  81. import {
  82. sparePartsPurDetail,
  83. dealerProductQueryForSparePartsPur,
  84. sparePartsPurDetailList,
  85. sparePartsQueryCount,
  86. } from '@/config/api.js'
  87. export default {
  88. data() {
  89. return {
  90. loading: false,
  91. baseData: null,
  92. detailList:[],
  93. countData:null,
  94. code:'',
  95. sparePartsPurchaseSn: '',
  96. sparePartsPurchaseId: '',
  97. curProduct: null,
  98. };
  99. },
  100. onLoad(opts) {
  101. var _this = this
  102. this.sparePartsPurchaseSn = opts.sn
  103. this.sparePartsPurchaseId = opts.id
  104. this.getDetail()
  105. this.pageInit()
  106. },
  107. onShow() {
  108. this.pageInit()
  109. },
  110. methods: {
  111. pageInit(){
  112. this.getTotal()
  113. this.getDetailList()
  114. },
  115. // 详情
  116. getDetail(){
  117. sparePartsPurDetail({sn: this.sparePartsPurchaseSn}).then(res => {
  118. if(res.status == 200){
  119. this.baseData = res.data
  120. }
  121. })
  122. },
  123. // 已添加产品列表
  124. getDetailList(){
  125. sparePartsPurDetailList({pageNo:1,pageSize:1000,sparePartsPurchaseSn:this.sparePartsPurchaseSn}).then(res => {
  126. console.log(res,'已添加产品列表')
  127. if(res.status == 200){
  128. this.detailList = res.data.list
  129. this.detailList.map(item => {
  130. item.putCostBackups = item.putCost
  131. item.putQtyBackups = item.putQty
  132. })
  133. const curProduct = this.detailList.find(item => item.qrCode == this.code)
  134. this.curProduct = curProduct || null
  135. }
  136. })
  137. },
  138. getTotal(){
  139. sparePartsQueryCount({sparePartsPurchaseSn:this.sparePartsPurchaseSn}).then(res => {
  140. console.log(res,'getTotal')
  141. this.countData = res.data
  142. })
  143. },
  144. toDetail(item) {
  145. this.$store.state.vuex_tempData = item
  146. uni.navigateTo({
  147. url:"/pages/stockIn/detail?state="+this.baseData.state
  148. })
  149. },
  150. },
  151. }
  152. </script>
  153. <style lang="scss">
  154. .p-content{
  155. button{
  156. line-height: 1.7;
  157. }
  158. .p-head{
  159. font-size: 32upx;
  160. color: $uni-text-color;
  161. >view{
  162. display: flex;
  163. align-items: center;
  164. padding: 15upx 20upx;
  165. border-bottom: 1px solid #eee;
  166. justify-content: space-between;
  167. > view{
  168. display: flex;
  169. padding: 0 10upx;
  170. align-items: center;
  171. }
  172. }
  173. .uni-input{
  174. border: 1px solid #eee;
  175. width: 150upx;
  176. text-align: center;
  177. }
  178. }
  179. .p-body{
  180. overflow: auto;
  181. flex-grow: 1;
  182. height: 50%;
  183. }
  184. .p-footer{
  185. padding:20upx 30upx;
  186. display: flex;
  187. > button{
  188. width: 30%;
  189. }
  190. }
  191. }
  192. </style>