viewDetail.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <view class="p-content1">
  3. <view class="p-head" v-if="detailData">
  4. <view>
  5. <view>
  6. <text>销售单号:</text>
  7. <text style="color: crimson;">{{detailData.salesBillNo}}</text>
  8. </view>
  9. </view>
  10. <view>
  11. <view>
  12. <text>客户名称:</text>
  13. <view>
  14. {{ detailData&&detailData.buyerNameCurrent?detailData.buyerName?detailData.buyerName==detailData.buyerNameCurrent?detailData.buyerNameCurrent:detailData.buyerNameCurrent+'('+detailData.buyerName+')':detailData.buyerNameCurrent:'--' }}
  15. </view>
  16. </view>
  17. </view>
  18. <view>
  19. <view>
  20. <text>客户地址:</text>
  21. <view>
  22. <div v-if="detailData&&(detailData.shippingAddressProvinceName || detailData.shippingAddressCityName || detailData.shippingAddressCountyName || detailData.shippingAddress)">
  23. {{ detailData&&detailData.shippingAddressProvinceName || '' }}
  24. {{ detailData&&detailData.shippingAddressCityName || '' }}
  25. {{ detailData&&detailData.shippingAddressCountyName || '' }}
  26. {{ detailData&&detailData.shippingAddress || '' }}
  27. </div>
  28. <span v-else>--</span>
  29. </view>
  30. </view>
  31. </view>
  32. <view>
  33. <view>
  34. <text>收款方式:</text>
  35. <view>
  36. {{detailData.settleStyleSnDictValue||'--'}}
  37. </view>
  38. </view>
  39. </view>
  40. <view>
  41. <view>
  42. <text>联系电话:</text>
  43. <view>
  44. {{detailData.consigneeTel||'--'}}
  45. </view>
  46. </view>
  47. </view>
  48. <view>
  49. <view>
  50. <text>备注:</text>
  51. <view>
  52. {{detailData.remarks||'--'}}
  53. </view>
  54. </view>
  55. </view>
  56. <view>
  57. <view>
  58. <text>制单人:</text>
  59. <view>
  60. {{detailData.operatorName||'--'}}
  61. </view>
  62. </view>
  63. </view>
  64. <view>
  65. <view>
  66. <text>业务员:</text>
  67. <view>
  68. {{detailData.salesManName||'--'}}
  69. </view>
  70. </view>
  71. </view>
  72. <view>
  73. <view>
  74. <text>来源:</text>
  75. <view>
  76. {{detailData.sourceTypeDictValue||'--'}}
  77. </view>
  78. </view>
  79. </view>
  80. <view v-if="detailData&&detailData.sourceType=='PURCHASE'">
  81. <view>
  82. <text>下级采购单号:</text>
  83. <view>
  84. {{ detailData&&detailData.purchaseBillNo || '--' }}
  85. </view>
  86. </view>
  87. </view>
  88. <view>
  89. <view>
  90. <text>业务状态:</text>
  91. <view>
  92. {{detailData.billStatusDictValue||'--'}}
  93. </view>
  94. </view>
  95. </view>
  96. <view>
  97. <view>
  98. <text>财务状态:</text>
  99. <view>
  100. {{detailData.financialStatusDictValue||'--'}}
  101. </view>
  102. </view>
  103. </view>
  104. <view v-if="detailData" style="justify-content: flex-start;flex-wrap: wrap;">
  105. <view>总款数:{{detailData.totalCategory||0}}</view>
  106. <view>总数量:{{detailData.totalQty||0}}</view>
  107. <view>总赠品数量:{{detailData.giftQty||0}}</view>
  108. <view>急件总款数:{{detailData.oosCategory||0}}</view>
  109. <view>急件总数量:{{detailData.oosQty||0}}</view>
  110. <view>总售价:¥{{detailData.totalAmount||0}}</view>
  111. <view>总成本:¥{{detailData.totalCost||0}}</view>
  112. <view>总毛利:¥{{detailData.grossProfit||0}}</view>
  113. <view>折后总售价:¥{{detailData.discountedAmount||0}}</view>
  114. <view>折扣:{{detailData.discountRate||0}}%</view>
  115. <view>折扣金额:¥{{detailData.discountAmount||0}}</view>
  116. </view>
  117. </view>
  118. <view class="p-body">
  119. <uni-table style="width: 100%;" border emptyText="暂无数据" :loading="loading" >
  120. <!-- 表头行 -->
  121. <uni-tr>
  122. <uni-td align="center">产品编码</uni-td>
  123. <uni-td align="center">产品名称</uni-td>
  124. <uni-td align="center">数量</uni-td>
  125. <uni-td align="center">售价</uni-td>
  126. </uni-tr>
  127. <!-- 表格数据行 -->
  128. <uni-tr v-for="item in detailList" :key="item.id">
  129. <uni-td width="30%" align="center">{{item.dealerProductEntity.code}}</uni-td>
  130. <uni-td width="30%" align="center">{{item.dealerProductEntity.name}}</uni-td>
  131. <uni-td width="20%" align="center">{{item.qty}}</uni-td>
  132. <uni-td width="20%" align="center"><u--text mode="price" :text="item.price"></u--text></uni-td>
  133. </uni-tr>
  134. </uni-table>
  135. </view>
  136. </view>
  137. </template>
  138. <script>
  139. import { salesDetail, salesDetailList } from '@/config/api.js'
  140. export default {
  141. data() {
  142. return {
  143. loading: false,
  144. detailData: null,
  145. detailList:[],
  146. code:'',
  147. salesBillSn: null,
  148. salesId: null,
  149. };
  150. },
  151. onLoad(opts) {
  152. this.salesBillSn = opts.salesBillSn
  153. this.salesId = opts.id
  154. this.getDetail()
  155. this.getDetailList()
  156. },
  157. methods: {
  158. // 详情
  159. getDetail(){
  160. salesDetail({salesBillSn: this.salesBillSn}).then(res => {
  161. console.log(res,'详情')
  162. if(res.status == 200){
  163. this.detailData = res.data
  164. }
  165. })
  166. },
  167. // 产品明细列表
  168. getDetailList(){
  169. salesDetailList({pageNo:1,pageSize:1000,salesBillSn:this.salesBillSn,orderBy: 'sales_bill_detail.CREATE_DATE desc'}).then(res => {
  170. console.log(res,'已添加产品列表')
  171. if(res.status == 200){
  172. this.detailList = res.data.list
  173. }
  174. })
  175. },
  176. },
  177. }
  178. </script>
  179. <style lang="scss">
  180. .p-content1{
  181. .p-head{
  182. font-size: 32upx;
  183. color: $uni-text-color;
  184. >view{
  185. display: flex;
  186. align-items: center;
  187. padding: 10upx 20upx;
  188. border-bottom: 1px solid #eee;
  189. > view{
  190. display: flex;
  191. padding: 0 10upx;
  192. align-items: center;
  193. }
  194. }
  195. }
  196. .p-body{
  197. overflow: auto;
  198. }
  199. .p-footer{
  200. padding:20upx 30upx;
  201. display: flex;
  202. > button{
  203. width: 30%;
  204. }
  205. }
  206. }
  207. </style>