uniapp-dp/dp-workshop-manage/pages/stock/index.vue

<template>
	<view style="background-color: white;">
		<scroll-view scroll-y="true" style="height: 100vh;">
			<u-collapse ref="collapse" :value="defaultValue">
				<u-collapse-item :title="data.factoryName" :value="'库存量：' + data.factoryTotalQty" name="factory">
					<view>
						<u-collapse
							@open="workshopOpen(workshopIndex)"
							@close="workshopClose()"
							v-for="(workshopItem, workshopIndex) in data.productWorkshops"
							:value="workshopOpenIndexs" v-bind:key="workshopIndex"
						>
							<u-collapse-item :title="workshopItem.workshopName" :value="'库存量：' + workshopItem.workshopQty" ref="collapseItem" :name="workshopIndex">
								<view class="cu-list menu">
									<view
										class="cu-item"
										style="margin-top: 10rpx "
										v-for="(titem, tindex) in workshopItem.teamStocks"
										:class="modalName == 'move-box-' + workshopIndex + tindex ? 'move-cur' : ''"
										:key="tindex"
										@touchstart="ListTouchStart"
										@touchmove="ListTouchMove"
										@touchend="ListTouchEnd"
										:data-target="'move-box-' + workshopIndex  + tindex"
									>
										<!-- <view class=" radius shadow bg-blue text-gray"> -->
										<view class="content">
											<view class="cu-form-group">
												<view class="title" style="min-width: calc(4em + 15px);">订单号</view>
												<text class="text-grey" style="flex: 1;">{{ titem.orderNo }}</text>
											</view>
											<view class="cu-form-group">
												<view class="title" style="min-width: calc(4em + 15px);">制衣班组</view>
												<text class="text-grey" style="flex: 1;">{{ titem.teamName }}</text>
												<view class="title" style="min-width: calc(3em + 15px);">总库存</view>
												<text class="text-grey" style="flex: 1;">{{ titem.teamTotalQty }}</text>
											</view>
											<view class="cu-form-group">
												<view class="title" style="min-width: calc(4em + 15px);">累计领</view>
												<text class="text-grey" style="flex: 1;">{{ titem.totalRcvQty }}</text>
												<view class="title" style="min-width: calc(3em + 15px);">累计送</view>
												<text class="text-grey" style="flex: 1;">{{ titem.totalBackQty }}</text>
											</view>
										</view>
										<view class="move">
											<!-- <view class="bg-grey" @click="editPlanInfo(titem)">修改</view> -->
											<view class="bg-red" @click="archiveFiling(titem)">封存</view>
										</view>
									</view>
								</view>
							</u-collapse-item>
						</u-collapse>
					</view>
				</u-collapse-item>
			</u-collapse>
		</scroll-view>
	</view>
</template>

<script>
import { queryStock, queryStockByWorkshop,archiveFiling } from '@/api/biz/stock.js';
export default {
	data() {
		return {
			data: {},
			defaultValue: [],
			workshopOpenIndexs: [],
			modalName: null,
		};
	},
	methods: {
		open(e) {},
		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX;
		},

		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
		},

		// ListTouch计算滚动
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target;
			} else {
				this.modalName = null;
			}
			this.listTouchDirection = null;
		},
		workshopOpen(index) {
			this.defaultValue = ['factory'];
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.collapse.init();
				}, 1000);
			});
		},
		workshopClose() {
			this.defaultValue = ['factory'];
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.collapse.init();
				}, 1000);
			});
		},
		archiveFiling(item) {
			console.log(item);
			// const arr = []
			// arr.push(item)
			archiveFiling(item).then(res => {
				if (res.success) {
					console.log(this.data)
					console.log(item)
					this.removeFilingInfo(item)
				}else{
					this.$refs.uToast.show({
						type: 'error',
						message: res.message,
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					})
				}
			})
		},
		removeFilingInfo(item) {
			console.log("data=="+this.data.productWorkshops);
			for (let item2 in this.data.productWorkshops) {
				console.log("==="+this.data.productWorkshops[item2].teamStocks);
				for (let item3 in this.data.productWorkshops[item2].teamStocks) {
					console.log("222====="+this.data.productWorkshops[item2].teamStocks[item3]);
					console.log("333====="+this.data.productWorkshops[item2].teamStocks[item3].orderNo);
					const index = this.data.productWorkshops[item2].teamStocks.findIndex(ele => {
						return ele.orderNo == item.orderNo
					})
					this.data.productWorkshops[item2].teamStocks.splice(index, 1)
					// for (let item2 of productWorkshop[item]) {
					// 	console.log("====="+item2);
					// }
				}
			    // totalPrice += item.price * item.count;
			}
			// const index = this.productWorkshops.findIndex(ele => {
			// 	return ele.id == item.id
			// })
			// this.filingList.splice(index, 1)
		},
		// workshopClose(workshopIndex) {
		// 	const index = this.workshopOpenIndexs.indexOf(workshopIndex)
		// 	this.workshopOpenIndexs.splice(0, 1)
		// 	this.$refs.collapse.init()
		// },
		// workshopOpen(workshopItem, index) {
		// 	this.defaultValue = ['factory']
		// 	this.workshopOpenIndexs.push(index)
		// 	this.getDataByWorkshop(workshopItem, index)
		// },
		// getDataByWorkshop(workshopItem, index) {
		// 	queryStockByWorkshop(workshopItem.workshopName).then(res => {
		// 		if (res.success) {
		// 			workshopItem["teamStocks"] = res.data
		// 			this.$nextTick(() => {
		// 				setTimeout(() => {
		// 					this.$refs.collapseItem[index].init()
		// 					this.$nextTick(() => {
		// 						setTimeout(() => {
		// 							this.$refs.collapse.init()
		// 						}, 500)
		// 					})
		// 				}, 500)
		// 			})
		// 		}
		// 	})
		// },
		loadInitData() {
			queryStock().then(res => {
				if (res.success) {
					console.log(res.data)
					this.data = res.data;
				}
			});
		}
	},
	onReady() {
		this.loadInitData();
	}
};
</script>
<style>
.cu-form-group {
	min-height: 0;
	border: none !important;
}
</style>