hbj_app/pages/indexpage/YJgoods/diaoboMingXi/diaoboMingXi.vue

<template>
	<view class="">
		<!-- 自定义导航栏 -->
		<u-navbar bgColor="#ffffff" :placeholder="true" :autoBack="true" titleStyle="font-weight:600">
			<view slot="center" style="display: flex;align-items: center;flex-direction: column;">
				<view>
					<span style="font-size: 30rpx; font-weight: 600;color: #333333;margin-right: 10rpx;">{{ changku }}</span>
					<!-- <image style="width: 32rpx; height: 32rpx;" src="../../../../static/images/wuzhi/zhuanhuan.png"></image> -->
				</view>
				<span style="font-size: 20rpx; font-weight: 600;color: #b1b1b1;margin-right: 10rpx;">调拨明细</span>
			</view>
			<view slot="right" style="display: flex;align-items: center;flex-direction: column;" @click="popCheBian()">
				<image style="width: 48rpx; height: 48rpx;" src="../../../../static/images/wuzhi/qiehuancangku.png"></image>
				<span style="font-size: 18rpx; font-weight: 600;margin-right: 10rpx;color: #1296db;">切换仓库</span>
			</view>
		</u-navbar>
		<view class="paibanBox">
			<view class="paiban"><u-search placeholder="请输入物资名称" v-model="keyword2" :clearabled="false" :showAction="false"></u-search></view>
			<scroll-view scroll-y="true" style="height: 89vh; padding: 20rpx" scroll-with-animation="true">
				<view class="" v-for="item in diaoBoMxList" :key="item.id" @click="openDetail(item)" style="margin-bottom: 20rpx;border-bottom: 2rpx solid #dfdfdf;">
					<view style="  display: flex; width: 100%;  padding-bottom: 15rpx;  align-items: center;  justify-content: flex-start;  padding: 12rpx; ">
						<u-album
							singleSize="72"
							multipleMode="scaleToFill"
							singleMode="scaleToFill"
							multipleSize="72"
							rowCount="1"
							style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
							:urls="item.showUrls == null ? [] : item.showUrls"
							maxCount="1"
						></u-album>
						<view style="display: flex;flex-direction: column;width: 70%;">
							<view style="display: flex;">
								<view style="width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;margin-left: 10rpx;">
									<span style=" font-weight: 600; font-size: 26rpx;width: 100%; margin-bottom: 10rpx;  ">{{ item.materialName }}</span>
									<span style="font-size: 24rpx; color: #999999; margin-bottom: 10rpx">{{ item.inOutDbId }}</span>
								</view>
								<view v-if="item.outHouseId == ckid" style="display: flex; align-items: flex-end; justify-content: space-between; flex-direction: row;   ">
									<span style="color: #ff0000; font-size: 40rpx; font-weight: 800;">{{ item.realNum }}</span>
								</view>
								<view v-else style="display: flex; align-items: flex-end; justify-content: space-between; flex-direction: row;   ">
									<span style="color: #00ff00; font-size: 40rpx; font-weight: 800">{{ item.realNum }}</span>
								</view>
							</view>

							<view v-if="item.outHouseId == ckid" style="align-self: flex-start;font-size: 26rpx;color: red">
								<span style="color: red;margin-right: 15rpx;">{{ item.outHouseName }}</span>
								<span style="font-size: 22rpx;">调出至</span>
								<span style="color: #333333;margin-left: 15rpx;">{{ item.inHouseName }}</span>
							</view>
							<view v-else style="align-self: flex-start;font-size: 26rpx;color: #3cb500">
								<span style="color: #333333;margin-right: 15rpx;">{{ item.outHouseName }}</span>
								<span style="font-size: 22rpx;">调入至</span>
								<span style="color: #3cb500;margin-left: 15rpx;">{{ item.inHouseName }}</span>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 侧边栏 -->
		<u-popup :show="wuzhiCheBian" mode="left" :customStyle="{ width: '70vw' }" :safeAreaInsetBottom="true" @close="offPop()">
			<view style="height: 50px;margin-bottom: 10rpx;"></view>
			<u-search placeholder="请输入仓库名称搜索" v-model="keyword" :clearabled="false" :showAction="false"></u-search>
			<scroll-view scroll-y="true" style="height: 95vh;" scroll-with-animation="true">
				<view class="status_bar"></view>
				<uni-list>
					<uni-list-item v-for="(item, index) in titlelist" :title="`${index + 1}.${item.name}`" :clickable="true" @click="xuanZheChangKu(item)"></uni-list-item>
				</uni-list>
				<view style="height: 50px;"></view>
			</scroll-view>
		</u-popup>
		<u-popup :round="10" mode="bottom" :show="Detailshow" @close="closeDetail">
			<view>
				<view class="ruKuInfo">
					<view style="color: #3c6fd2;font-size: 36rpx;font-weight: 600;">调拨单</view>
					<view style="color: #646a6f;font-size: 29rpx;font-weight: 600;">调拨单号：{{ diaoBoMxDetail.waterNum }}</view>
					<!-- <view class="process">
						<span style="text-align: center; margin-right: 25rpx;background-color: #EFEFEF;width: 170rpx;border-radius: 10px;">{{}}</span>
						<u-icon style="margin-right: 25rpx;" color="#5cc0ae" name="play-right-fill"></u-icon>
						<span style="text-align: center; margin-right: 25rpx;background-color: #EFEFEF;width: 170rpx;border-radius: 10px;">{{}}</span>
					</view> -->
				</view>
				<view style="display: flex;flex-direction: column;  justify-content: center;align-items: center;">
					<view class="textInfo">
						<view v-if="diaoBoMxDetail.outHouseId == ckid" style="align-self: flex-start;font-size: 28rpx;color: red">
							<span style="color: #333333;margin-right: 15rpx;">调拨路径:</span>
							<span style="color: red;margin-right: 15rpx;">{{ diaoBoMxDetail.outHouseName }}</span>
							<span style="font-size: 22rpx;">调出至</span>
							<span style="color: #333333;margin-left: 15rpx;">{{ diaoBoMxDetail.inHouseName }}</span>
						</view>
						<view v-else style="align-self: flex-start;font-size: 28rpx;color: #3cb500">
							<span style="color: #333333;margin-right: 15rpx;">调拨路径:</span>

							<span style="color: #333333;margin-right: 15rpx;">{{ diaoBoMxDetail.outHouseName }}</span>
							<span style="font-size: 22rpx;">调入至</span>
							<span style="color: #3cb500;margin-left: 15rpx;">{{ diaoBoMxDetail.inHouseName }}</span>
						</view>
					</view>
					<view class="textInfo">
						登记人员：
						<span style="color: #85898c;">{{ diaoBoMxDetail.djUserName }}</span>
					</view>
					<view class="textInfo">
						创建时间：
						<span style="color: #85898c;">{{ diaoBoMxDetail.year }}-{{ diaoBoMxDetail.month }}-{{ diaoBoMxDetail.day }}</span>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 800rpx;" scroll-with-animation="true">
					<view
						style="display: flex;width: 100%; padding-bottom: 15rpx; 
					align-items: center;justify-content: center;padding: 12rpx; background-color: #fff;"
						v-for="(item, index) in diaoBoMxDetail.moveDelList"
						:key="index"
					>
						<u-album
							singleSize="62"
							multipleMode="scaleToFill"
							singleMode="scaleToFill"
							multipleSize="62"
							rowCount="1"
							style="width: 125rpx;height: 125rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
							:urls="item.showUrls == null ? [] : item.showUrls"
							maxCount="1"
						></u-album>
						<view style="display: flex;width: 80%;">
							<view style=" width: 75%;display: flex;flex-direction: column;justify-content: space-between; align-items: flex-start;margin-left: 10rpx;">
								<span style="font-weight: 600;font-size: 24rpx;">
									{{ item.materialName }}
									<span v-if="item.text3" style="font-weight: 600;font-size: 21rpx;color: #ff4c11;margin-left: 10rpx;">{{ item.text3 }}</span>
								</span>
								<span style="font-weight: 600;font-size: 21rpx;color: #999999;">{{ item.text1 == null ? '暂无规格' : item.text1 }}</span>
								<span style="align-self: flex-start;font-size: 21rpx;color: #4c4c4c;margin-right: 20rpx;">{{ item.materialCategory }}</span>
							</view>
							<view style="display: flex;align-items: flex-end;justify-content: space-between;flex-direction: row;">
								<span style="color: #0f0b04;font-size: 28rpx;font-weight: 900;">- {{ item.realNum }}{{ item.materialUnit }}</span>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getDicts } from '@/api/indexpage/user.js';
import { getMoveListAndMoveListDel } from '@/api/indexpage/yjWz/moveList.js';
import { listWarehouse } from '@/api/indexpage/yjWz/warehouse.js';
import { listMoveDetail, getMoveDetail, listMoveDetailByHouseId } from '@/api/indexpage/yjWz/diaoBo.js';
export default {
	data() {
		return {
			keyword: '',
			keyword2: '',
			timer: '',
			timer1: '',
			ckid: '',
			titlelist: '',
			wuzhiCheBian: false,
			changku: '',
			diaoBoMxList: [],
			diaoBoMxDetail: {},
			Detailshow: false,
			iptValue: '',
			planTypeList: []
		};
	},
	onLoad(options) {
		//获取场库id和名字
		let name = options.ckName;
		let id = options.ckId;
		this.ckid = id;
		this.changku = name;
		this.getlistMoveDetail();
		this.getChangKu();
	},
	watch: {
		keyword(newdata, olddata) {
			let that = this;
			//防抖函数
			clearTimeout(that.timer);
			that.timer = setTimeout(function() {
				if (newdata === '') {
					//发场库请求
					listWarehouse().then(res => {
						that.titlelist = res.rows;
					});
				} else {
					//发场库请求
					listWarehouse({
						name: newdata
					}).then(res => {
						that.titlelist = res.rows;
					});
				}
			}, 600);
		},
		keyword2(newdata, olddata) {
			let that = this;
			//防抖函数
			clearTimeout(that.timer1);
			that.timer1 = setTimeout(function() {
				if (newdata === '') {
					listMoveDetailByHouseId({
						inHouseId: that.ckid,
						type: 7
					}).then(res => {
						that.diaoBoMxList = res.rows;
					});
				} else {
					//发场库请求
					listMoveDetailByHouseId({
						inHouseId: that.ckid,
						type: 7,
						materialName: newdata
					}).then(res => {
						that.diaoBoMxList = res.rows;
					});
				}
			}, 600);
		}
	},
	methods: {
		// 字典值
		getDict() {
			getDicts('in_out_type').then(res => {
				let dataInfo = res.data;
				this.planTypeList = dataInfo.map(item => {
					return {
						key: item.dictLabel,
						value: item.dictValue
					};
				});
			});
		},
		setDict(stauts) {
			for (let item of this.planTypeList) {
				if (item.value === stauts) {
					return item.key;
				}
			}
		},
		xuanZheChangKu(item) {
			//获取仓库名称和ID
			this.changku = item.name;
			this.ckid = item.id;
			this.getlistMoveDetail();
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		},
		getChangKu() {
			//发场库请求
			listWarehouse().then(res => {
				this.titlelist = res.rows;
			});
		},
		offPop() {
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		},
		//弹出侧边栏
		popCheBian() {
			//弹出侧边栏
			this.wuzhiCheBian = true;
		},
		getlistMoveDetail() {
			listMoveDetailByHouseId({
				inHouseId: this.ckid,
				type: 7
			}).then(res => {
				this.diaoBoMxList = res.rows;
			});
		},
		getMoveDetailData(id) {
			getMoveListAndMoveListDel(id).then(res => {
				this.diaoBoMxDetail = res.data;
			});
		},

		openDetail(item) {
			this.Detailshow = true;
			this.getMoveDetailData(item.inOutDbId);
		},

		closeDetail() {
			this.Detailshow = false;
		},
		openDetailDialog() {},

		toPage() {
			this.$tab.navigateTo(`/pages/indexpage/YJgoods/ckMingXi/ckdan?inOutDbId=${this.diaoBoMxDetail.inOutDbId}`);
		}
	}
};
</script>

<style scoped lang="scss">
.textInfo {
	padding: 20rpx;
	border-bottom: #dceaf1 1px solid;
	width: 90vw;
}

.ruKuInfo {
	background-color: #dceaf1;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	height: 200rpx;
	width: 100vw;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	.process {
		display: flex;
		margin: 20rpx 0;
	}
}

.paiban {
	padding: 30rpx;
}

.paibanBox {
	width: 100vw;
	// height: 900rpx;
	background-color: #fff;
	box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 37, 105, 0.1);
}
</style>