gas-cylinder-app/pages/information/transferDetails.vue

<template>
	<!-- 调拨详情 -->
	<view>
		<u-navbar :title="transferTitle" autoBack placeholder></u-navbar>
		<view style="padding: 0rpx 30rpx;">
			<view class="card_transfer_details" v-if="type == 0">
				<view class="step_title">接收人信息</view>
				<view class="card_avatar" style="margin-top: 10rpx;">
					<view style="display: flex;align-items: center;">
						<image class="mine_image" src="../../static/portrait.png" mode=""></image>
						<view class="card_user_title">
							<view class="mine_phone">{{userList.acceptUser.nickName || '接收人姓名'}}</view>
							<view class="mine_phone">{{userList.acceptCompany.name || '接收人所属门店'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card_transfer_details" v-else>
				<view class="step_title">调拨人信息</view>
				<view class="card_avatar" style="margin-top: 10rpx;">
					<view style="display: flex;align-items: center;">
						<image class="mine_image" src="../../static/portrait.png" mode=""></image>
						<view class="card_user_title">
							<view class="mine_phone">{{userList.allotUser.nickName || '调拨人姓名'}}</view>
							<view class="mine_phone">{{userList.allotCompany.name || '调拨人所属门店'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;padding-bottom: 20rpx;" class="space_between frame">
				<view class="title_code_a">单位内编号</view>
				<view class="num_code">总数: {{innerCodeData.length}}</view>
			</view>
			<u-checkbox-group v-model="checkedList" v-if="userList.status == 1 && type == 1" @change="checkboxChange">
				<view style="display: flex;flex-direction: column;width: 100%;">
					<view class="item_card_tran frame" v-for="(item,index) in innerCodeData">
						<u-checkbox :name="item.inner_code" :checked="item.checked"></u-checkbox>
						<view style="width: 60rpx;margin-right: 10rpx;text-align: center;">{{index + 1}}</view>
						<span style="font-weight: 600;">{{item.inner_code}}</span>
					</view>
				</view>
			</u-checkbox-group>
			<view style="display: flex;flex-direction: column;width: 100%;" v-else>
				<view class="item_card_tran frame space_between" v-for="(item,index) in innerCodeData">
					<view style="display: flex;align-items: center;">
						<view style="width: 60rpx;margin-right: 10rpx;text-align: center;">{{index + 1}}</view>
						<span style="font-weight: 600;">{{item.inner_code}}</span>
					</view>
					<view style="display: flex;align-items: center;" v-if="userList.status != 1">
						<view class="color_blue" v-if="item.flag">已接收</view>
						<view class="color_red" v-else>未接收</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="btn_transfer_details" v-if="type == 1 && userList.status == 1">
			<!-- <view style="flex: 1;">
				<u-button style="width: 90%;" type="error" @click="cancelAllocation">取消</u-button>
			</view> -->
			<view style="flex: 1;">
				<u-button style="width: 90%;" type="primary" @click="submit">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		flowStep
	} from '@/static/js/blockSort.js'
	export default {
		data() {
			return {
				userList: {},
				type: null,
				transferTitle: '',
				checkedList: [],
				innerCodeData: [],
			}
		},
		onLoad(value) {
			this.type = Number(value.type)
			const data = uni.getStorageSync('transferData');
			if (data) {
				const userArr = JSON.parse(data)
				let array = flowStep()
				const filteredArray = array.filter(item => item.value === userArr.optType)
				if (filteredArray.length > 0) {
					this.transferTitle = filteredArray[0].label
				} else {
					this.transferTitle = '调拨详情'
				}
				this.userList = userArr
				// console.log(this.userList,25)
				const bmList = this.regroup(userArr.innerCodeList, true)
				const allList = this.regroup(userArr.acceptInnerCodeList)
				if (userArr.acceptInnerCodeList) {
					for (let i = 0; i < bmList.length; i++) {
						for (let v = 0; v < allList.length; v++) {
							if (bmList[i].inner_code == allList[v].inner_code) {
								bmList[i]['flag'] = true
							}
						}
					}
				}
				this.innerCodeData = bmList
			}
		},
		methods: {
			// 单位内编号数组重组
			regroup(arr, flag) {
				if (arr) {
					let innerCodeArr = []
					arr.forEach((item, index) => {
						let arr = {
							inner_code: item,
							checked: true,
							flag: false,
						}
						innerCodeArr.push(arr)
						if (flag) {
							this.checkedList.push(item)
						}
					})
					return innerCodeArr
				}
			},
			submit() {
				this.$api.post('/api/gas-cylinder-allot/submit', {
					id: this.userList.id,
					optType: this.userList.optType,
					allotUserId: this.userList.allotUserId,
					acceptUserId: this.userList.acceptUserId,
					allotCompanyId: this.userList.allotCompanyId,
					acceptCompanyId: this.userList.acceptCompanyId,
					innerCodeList: this.checkedList,
				}).then(res => {
					if (res.code == 200) {
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.$u.toast(res.data.msg)
					}
				})
			},
			// 选择钢瓶编号
			checkboxChange(value) {
				for (let i = 0; i < this.innerCodeData.length; i++) {
					let flag = value.includes(this.innerCodeData[i].inner_code);
					if (flag) {
						this.innerCodeData[i].checked = true
					} else {
						this.innerCodeData[i].checked = false
					}
				}
				this.checkedList = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.step_title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.card_avatar {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mine_image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.card_user_title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.mine_phone {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.card_transfer_details {
		border: 1rpx dashed #d7d7d7;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #f4f4f5;
	}

	.item_card_tran {
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx 30rpx 0rpx;
	}

	.title_code_a {
		font-size: 32rpx;
		font-weight: 600;
	}

	.num_code {
		color: #2979ff;
		font-size: 28rpx;
	}

	.btn_transfer_details {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx;
		border-top: 1rpx solid #f4f4f5;
	}

	.color_blue {
		color: #19be6b;
		font-size: 26rpx;
	}

	.color_red {
		color: #fa3534;
		font-size: 26rpx;
	}
</style>