You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

inventory-equipment.vue 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <view class="uni-container">
  3. <view class="title" style="border-bottom: 1rpx solid #c1c1c1;">
  4. <text>仓库名称</text>
  5. <text>仓库数量</text>
  6. <text>剩余可用数量</text>
  7. <text>设备可用率</text>
  8. </view>
  9. <view v-for="(item,index) in state.listData" :key="index" class="content">
  10. <view @click="show(index)" style="display: inline-block;" class="tu">
  11. {{item.name}}
  12. <block v-if="item.detailed.length>0 && index==state.isShow1">
  13. <image :class="state.isZhan?'jiantou1':'jiantou'" src="../../static/image/icon-back.png">
  14. </image>
  15. </block>
  16. <block v-else>
  17. <image class="jiantou" src="../../static/image/icon-back.png">
  18. </image>
  19. </block>
  20. </view>
  21. <text>{{item.totalNum}}</text>
  22. <text>{{item.availableNum}}</text>
  23. <text class="last">{{item.availableRate}}</text>
  24. <view v-if="item.detailed.length>0 && index==state.isShow && state.isZhan">
  25. <view v-for="(items,index1) in item.detailed" :key="index1" class="title">
  26. <text>{{items.name}}</text>
  27. <text>{{items.totalNum}}</text>
  28. <text>{{items.availableNum}}</text>
  29. <text>{{items.availableRate}}</text>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script setup lang="ts">
  36. import { reactive } from "vue";
  37. import {
  38. businessType
  39. } from "@/subpackage/after-sale/js/businessType.js";
  40. import { inventoryEquipmentApi } from "@/utils/network/api.js";
  41. import { stringToJson } from "@/utils/network/encryption";
  42. import { request } from "@/utils/network/request.js";
  43. import { getItem, StorageKeys } from "@/utils/storage";
  44. const state = reactive({
  45. listData: [],
  46. isShow: -1,
  47. isShow1: 1,
  48. isZhan: false, //展示哪一种箭头
  49. clickNum: true, //点击的那一个箭头
  50. })
  51. onLoad((option) => {
  52. inventoryEquipment();
  53. })
  54. const inventoryEquipment = () => {
  55. const options = {
  56. type: 2,
  57. data: {
  58. "openId": getItem(StorageKeys.OpenId)
  59. },
  60. method: "POST",
  61. showLoading: true,
  62. };
  63. request(inventoryEquipmentApi, options).then((res) => {
  64. const data = stringToJson(res.bizContent);
  65. if (data.hasData) {
  66. state.listData = data.data
  67. }
  68. console.log("inventoryEquipment", data)
  69. });
  70. }
  71. const show = (index) => {
  72. state.isShow = index
  73. state.isShow1 = index
  74. state.isZhan = !state.isZhan
  75. state.clickNum = index
  76. }
  77. </script>
  78. <style scoped>
  79. .uni-container {
  80. font-size: 32rpx;
  81. overflow-x: scroll;
  82. white-space: nowrap;
  83. margin: 30rpx;
  84. border-right: 1rpx solid #c1c1c1;
  85. }
  86. /deep/.uni-table-th,
  87. /deep/.uni-table-td {
  88. padding: 5px 0;
  89. font-size: 12px;
  90. }
  91. .jiantou {
  92. width: 30rpx;
  93. height: 30rpx;
  94. transform: rotate(90deg);
  95. }
  96. .jiantou1 {
  97. width: 30rpx;
  98. height: 30rpx;
  99. transform: rotate(270deg);
  100. }
  101. .title text {
  102. border-left: 1rpx solid #c1c1c1;
  103. border-top: 1rpx solid #c1c1c1;
  104. text-align: center;
  105. display: inline-block;
  106. width: 40%;
  107. padding: 6rpx 0;
  108. border-bottom: 1rpx solid #c1c1c1;
  109. }
  110. .title text:first-child {
  111. width: 58%;
  112. }
  113. .title text:last-child {
  114. border-right: 1rpx solid #c1c1c1;
  115. }
  116. .content>text,
  117. .content .tu {
  118. border-left: 1rpx solid #c1c1c1;
  119. border-bottom: 1rpx solid #c1c1c1;
  120. text-align: center;
  121. display: inline-block;
  122. width: 40%;
  123. padding: 6rpx 0;
  124. }
  125. .content .last {
  126. border-right: 1rpx solid #c1c1c1;
  127. }
  128. .content .tu {
  129. width: 58%;
  130. }
  131. </style>