index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view class="stock-wrap">
  3. <!-- 统计 -->
  4. <view class="panel-box">
  5. <view class="item-box">
  6. <u-count-to :end-val="totalData&&totalData.totalCurrentStockQty ? totalData.totalCurrentStockQty : 0" separator=","></u-count-to>
  7. <view>库存总数量(个)</view>
  8. </view>
  9. <view class="item-box">
  10. <u-count-to :end-val="totalData&&totalData.totalCurrentStockCost ? totalData.totalCurrentStockCost : 0" separator="," :decimals="2"></u-count-to>
  11. <view>库存总成本(¥)</view>
  12. </view>
  13. </view>
  14. <!-- 库存查询 -->
  15. <view class="stock-con">
  16. <view class="stock-tit">
  17. <view class="u-line"></view>库存查询
  18. </view>
  19. <u-form :model="form" ref="uForm" label-width="180">
  20. <u-form-item label="产品编码"><u-input v-model.trim="form.productCode" placeholder="请输入产品编码" input-align="right" /></u-form-item>
  21. <u-form-item label="原厂编码"><u-input v-model.trim="form.productOrigCode" placeholder="请输入原厂编码" input-align="right" /></u-form-item>
  22. <u-form-item label="产品名称"><u-input v-model.trim="form.productName" placeholder="请输入产品名称" input-align="right" /></u-form-item>
  23. <u-form-item label="产品品牌"><u-input v-model="brandName" @click="brandModal=true" disabled placeholder="请选择产品品牌" input-align="right" /></u-form-item>
  24. <u-form-item label="只查看有库存"><u-switch slot="right" v-model="form.zeroQtyFlag"></u-switch></u-form-item>
  25. </u-form>
  26. </view>
  27. <!-- 产品品牌 -->
  28. <productBrand :openModal="brandModal" :itemSn="form.productBrandSn" @choose="brandChoose" @clean="brandClean" @close="brandModal=false" />
  29. </view>
  30. </template>
  31. <script>
  32. import productBrand from '@/pages/common/productBrand.vue'
  33. import { stockCount } from '@/api/stock'
  34. export default{
  35. components: { productBrand },
  36. data(){
  37. return {
  38. form: {
  39. productCode: '', // 产品编码
  40. productName: '', // 产品名称
  41. productOrigCode: '', // 原厂编码
  42. productBrandSn: undefined, // 产品品牌
  43. productTypeSn1: '', // 产品分类1
  44. productTypeSn2: '', // 产品分类2
  45. productTypeSn3: '', // 产品分类3
  46. zeroQtyFlag: false // 库存情况
  47. },
  48. totalData: null,
  49. brandModal: false,
  50. brandName: ''
  51. }
  52. },
  53. onLoad() {
  54. this.getTotal()
  55. },
  56. methods: {
  57. // 合计
  58. getTotal () {
  59. stockCount({}).then(res => {
  60. if (res.status == 200 && res.data) {
  61. this.totalData = res.data
  62. } else {
  63. this.totalData = null
  64. }
  65. })
  66. },
  67. brandChoose(data){
  68. this.brandName = data.brandName
  69. this.form.productBrandSn = data.brandSn
  70. },
  71. // 清空品牌
  72. brandClean(){
  73. this.brandName = ''
  74. this.form.productBrandSn = undefined
  75. }
  76. }
  77. }
  78. </script>
  79. <style lang="scss">
  80. .stock-wrap{
  81. width: 100%;
  82. padding: 30upx;
  83. .panel-box {
  84. background-color: #ffffff;
  85. padding: 20upx 20upx;
  86. border-radius: 20upx;
  87. box-shadow: 3upx 2upx 6upx #eee;
  88. margin-bottom: 30upx;
  89. display: flex;
  90. justify-content: space-between;
  91. align-items: center;
  92. .item-box{
  93. text-align: center;
  94. width: 50%;
  95. }
  96. .item-box:first-child{
  97. border-right: 1px solid #e4e7ed;
  98. }
  99. }
  100. .stock-con{
  101. background-color: #ffffff;
  102. border-radius: 20upx;
  103. box-shadow: 3upx 2upx 6upx #eee;
  104. padding: 20upx;
  105. .stock-tit{
  106. .u-line{
  107. display: inline-block;
  108. width: 6upx;
  109. height: 40upx;
  110. background-color: red;
  111. vertical-align: bottom;
  112. margin: 0 20upx 0 10upx;
  113. }
  114. }
  115. }
  116. }
  117. </style>