index.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <view class="stock-wrap">
  3. <!-- 统计 -->
  4. <view class="panel-box">
  5. <view class="item-box">
  6. <u-count-to :end-val="1542" separator=","></u-count-to>
  7. <view>库存总数量(个)</view>
  8. </view>
  9. <view class="item-box">
  10. <u-count-to :end-val="1542" separator=","></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="form.productCode" placeholder="请输入产品编码" style="text-align: right;" /></u-form-item>
  21. <u-form-item label="原厂编码"><u-input v-model="form.productOrigCode" placeholder="请输入原厂编码" style="text-align: right;" /></u-form-item>
  22. <u-form-item label="产品名称"><u-input v-model="form.productName" placeholder="请输入产品名称" style="text-align: right;" /></u-form-item>
  23. <u-form-item label="产品品牌"><view></view></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. </view>
  28. </template>
  29. <script>
  30. export default{
  31. data(){
  32. return {
  33. form: {
  34. productCode: '', // 产品编码
  35. productName: '', // 产品名称
  36. productOrigCode: '', // 原厂编码
  37. productBrandSn: undefined, // 产品品牌
  38. productTypeSn1: '', // 产品分类1
  39. productTypeSn2: '', // 产品分类2
  40. productTypeSn3: '', // 产品分类3
  41. zeroQtyFlag: false // 库存情况
  42. }
  43. }
  44. },
  45. methods: {
  46. }
  47. }
  48. </script>
  49. <style lang="scss">
  50. .stock-wrap{
  51. width: 100%;
  52. padding: 30upx;
  53. .panel-box {
  54. background-color: #ffffff;
  55. padding: 20upx 20upx;
  56. border-radius: 20upx;
  57. box-shadow: 3upx 2upx 6upx #eee;
  58. margin-bottom: 30upx;
  59. display: flex;
  60. justify-content: space-between;
  61. align-items: center;
  62. .item-box{
  63. text-align: center;
  64. width: 50%;
  65. }
  66. .item-box:first-child{
  67. border-right: 1px solid #e4e7ed;
  68. }
  69. }
  70. .stock-con{
  71. background-color: #ffffff;
  72. border-radius: 20upx;
  73. box-shadow: 3upx 2upx 6upx #eee;
  74. padding: 20upx;
  75. .stock-tit{
  76. .u-line{
  77. display: inline-block;
  78. width: 6upx;
  79. height: 40upx;
  80. background-color: red;
  81. vertical-align: bottom;
  82. margin: 0 20upx 0 10upx;
  83. }
  84. }
  85. }
  86. }
  87. </style>