zhywpt-sp/subpackage/after-sale/inventory-equipment.vue

<template>
	<view class="uni-container">
		<view class="title" style="border-bottom: 1rpx solid #c1c1c1;">
			<text>仓库名称</text>
			<text>仓库数量</text>
			<text>剩余可用数量</text>
			<text>设备可用率</text>
		</view>
		<view v-for="(item,index) in state.listData" :key="index" class="content">
			<view @click="show(index)" style="display: inline-block;" class="tu">
				{{item.name}}
				<block v-if="item.detailed.length>0 && index==state.isShow1">
					<image :class="state.isZhan?'jiantou1':'jiantou'" src="../../static/image/icon-back.png">
					</image>
				</block>
				<block v-else>
					<image class="jiantou" src="../../static/image/icon-back.png">
					</image>
				</block>
			</view>
			<text>{{item.totalNum}}</text>
			<text>{{item.availableNum}}</text>
			<text class="last">{{item.availableRate}}</text>
			<view v-if="item.detailed.length>0 && index==state.isShow && state.isZhan">
				<view v-for="(items,index1) in item.detailed" :key="index1" class="title">
					<text>{{items.name}}</text>
					<text>{{items.totalNum}}</text>
					<text>{{items.availableNum}}</text>
					<text>{{items.availableRate}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import {
		businessType
	} from "@/subpackage/after-sale/js/businessType.js";
	import { inventoryEquipmentApi } from "@/utils/network/api.js";
	import { stringToJson } from "@/utils/network/encryption";
	import { request } from "@/utils/network/request.js";
	import { getItem, StorageKeys } from "@/utils/storage";
	const state = reactive({
		listData: [],
		isShow: -1,
		isShow1: 1,
		isZhan: false, //展示哪一种箭头
		clickNum: true, //点击的那一个箭头
	})
	onLoad((option) => {
		inventoryEquipment();
	})
	const inventoryEquipment = () => {
		const options = {
			type: 2,
			data: {
				"openId": getItem(StorageKeys.OpenId)
			},
			method: "POST",
			showLoading: true,
		};

		request(inventoryEquipmentApi, options).then((res) => {
			const data = stringToJson(res.bizContent);
			if (data.hasData) {
				state.listData = data.data
			}
			console.log("inventoryEquipment", data)
		});
	}
	const show = (index) => {
		state.isShow = index
		state.isShow1 = index
		state.isZhan = !state.isZhan
		state.clickNum = index
	}
</script>

<style scoped>
	.uni-container {
		font-size: 32rpx;
		overflow-x: scroll;
		white-space: nowrap;
		margin: 30rpx;
		border-right: 1rpx solid #c1c1c1;
	}

	/deep/.uni-table-th,
	/deep/.uni-table-td {
		padding: 5px 0;
		font-size: 12px;
	}

	.jiantou {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(90deg);
	}

	.jiantou1 {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(270deg);
	}


	.title text {
		border-left: 1rpx solid #c1c1c1;
		border-top: 1rpx solid #c1c1c1;
		text-align: center;
		display: inline-block;
		width: 40%;
		padding: 6rpx 0;
		border-bottom: 1rpx solid #c1c1c1;
	}

	.title text:first-child {
		width: 58%;
	}

	.title text:last-child {
		border-right: 1rpx solid #c1c1c1;

	}

	.content>text,
	.content .tu {
		border-left: 1rpx solid #c1c1c1;
		border-bottom: 1rpx solid #c1c1c1;
		text-align: center;
		display: inline-block;
		width: 40%;
		padding: 6rpx 0;
	}

	.content .last {
		border-right: 1rpx solid #c1c1c1;
	}

	.content .tu {
		width: 58%;
	}
</style>