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

<template>
	<!-- 调拨钢瓶 -->
	<view>
		<u-navbar title="钢瓶调拨" autoBack placeholder></u-navbar>
		<view class="card_transfer">
			<view style="display: flex;align-items: center;" @click="allotSweep">
				<view class="tran_title">1.扫描调拨码</view>
				<u-icon name="scan" size="30"></u-icon>
			</view>
			<view class="card_assigner_aaf" v-if="assignerFlag">
				<view class="step_title">流转步骤</view>
				<view class="flow_step_title">{{ getflowStep(assignerData) }}</view>
				<view class="card_avatar">
					<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">{{assignerData[2]}}</view>
							<view class="mine_phone">{{assignerData[4]}}</view>
						</view>
					</view>
					<view>调拨人</view>
				</view>
			</view>
			<view class="space_between cylinder_ccsfs">
				<view class="tran_title">2.钢瓶编号</view>
				<view style="display: flex;align-items: center;">
					<view class="blue_title" @click="checkAll">全选</view>
					<view class="card_right_num">
						<span class="blue_title">选择前</span>
						<view class="num_card">
							<u--input class="input_taaf" type="number" fontSize="12" inputAlign="center"
								border="surround" @blur="howMany"></u--input>
						</view>
						<span class="blue_title">个</span>
					</view>
				</view>
			</view>
			<view style="width: 100%;" v-if="list.length > 0">
				<u-checkbox-group v-model="checked">
					<view style="width: 100%;display: flex;flex-direction: column;">
						<view class="card_dinay" v-for="(item,index) in list" :key="index">
							<u-checkbox :name="item.inner_code"></u-checkbox>
							<view style="display: flex;align-items: center;margin-left: 20rpx;">
								<view class="item_current">{{index + 1}}</view>
								<view class="item_title1">{{item.inner_code}}</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<view style="margin-top: 20%;" v-else>
				<u-empty mode="list" text="暂无钢瓶"></u-empty>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="card_btn">
			<u-button style="margin-bottom: 20rpx;" type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: [],
				list: [],
				current: null,
				assignerFlag: false,
				assignerData: [],
				flowStep: [{
					id: '13',
					title: '气站确认空瓶到达气站'
				}, {
					id: '016',
					title: '气站确认重瓶到达气站'
				}, {
					id: '17',
					title: '司机确认重瓶从气站出库'
				}, {
					id: '11',
					title: '司机确认空瓶装车'
				}, {
					id: '033',
					title: '司机确认空瓶从门店出库'
				}, {
					id: '31',
					title: '门店确认重瓶卸货入库'
				}, {
					id: '35',
					title: '门店确认未配送重瓶返库'
				}, {
					id: '21',
					title: '门店回收空瓶'
				}, {
					id: '25',
					title: '送气员重瓶出库'
				}, {
					id: 'Unqualified',
					title: '回收不合格钢瓶'
				}],
				Pagination: {
					PageIndex: 1,
					PageSize: 20,
					Total: 0,
				},
				loadingMore: true,
			}
		},
		onReachBottom() {
			if (!this.loadingMore) {
				this.getList()
			}
		},
		onLoad(value) {
			this.current = value.status
		},
		mounted() {
			this.getList()
		},
		methods: {
			// 获取列表
			getList() {
				this.loadingMore = true
				this.$api.get('/api/gas-cylinder-status', {
					page: this.Pagination.PageIndex,
					pageSize: this.Pagination.PageSize,
					status: this.current,
				}).then(res => {
					if (res.code == 200) {
						const data = res.data.list
						if (this.loadingMore == true && data) {
							this.list = this.list.concat(data);
						}
						if (data.length < this.Pagination.PageSize) {
							this.loadingMore = true
						} else {
							this.loadingMore = false
							this.Pagination.PageIndex++
						}
					}
				})
			},
			// 调拨提交
			submit() {
				if (this.assignerData.length > 0) {
					if (this.checked.length > 0) {
						this.$api.post('/api/gas-cylinder-allot', {
							optType: this.assignerData[0],
							acceptUserId: Number(this.assignerData[1]),
							acceptCompanyId: Number(this.assignerData[3]),
							innerCodeList: this.checked,
							gasCylinderStatus: this.current,
						}).then(res => {
							if (res.code == 200) {
								this.loadingMore = true
								this.Pagination.PageIndex = 1
								this.list = []
								this.getList()
								this.checked = []
								uni.$u.toast(res.msg)
							} else {
								uni.$u.toast(res.data.msg)
							}
							this.$forceUpdate()
						})
					} else {
						uni.$u.toast('请先选择调拨钢瓶')
					}
				} else {
					uni.$u.toast('请先扫描调拨码')
				}
			},
			// 扫一扫
			allotSweep() {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ['qrCode'],
					autoZoom: false,
					success: (res) => {
						console.log(res, '--------');
						if (res.result) {
							let url = res.result;

							function getCharactersBefore(str, char) {
								const index = str.indexOf(char);
								if (index > -1) {
									return str.substring(0, index);
								}
								return ''; // 如果字符不存在，返回空字符串
							}
							const title = getCharactersBefore(url, '?');
							if (title == 'dialCode') {
								this.assignerFlag = true

								function getCharactersBefore1(str, char) {
									const index = str.indexOf(char);
									if (index > -1) {
										return str.substring(index + 1);
									}
									return ''; // 如果字符不存在，返回空字符串
								}
								const arr = getCharactersBefore1(url, '?')
								this.assignerData = arr.split(',')
							}
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码1');
					}
				})
			},
			// 流转步骤文字
			getflowStep(value) {
				let title = ''
				this.flowStep.forEach(item => {
					if (item.id == value[0]) {
						title = item.title
					}
				})
				return title
			},
			// 输入第几个
			howMany(value) {
				const result = this.list.slice(0, value)
				this.checked = []
				result.forEach(item => {
					this.checked.push(item.inner_code)
				})
				this.$forceUpdate()
			},
			// 全选
			checkAll() {
				this.checked = []
				this.list.forEach(item => {
					this.checked.push(item.inner_code)
				})
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	.card_transfer {
		padding: 0rpx 30rpx;
	}

	.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_assigner_aaf {
		margin-top: 20rpx;
		padding: 30rpx;
		border: 1rpx dashed #d7d7d7;
	}

	.step_title {
		font-size: 34rpx;
		font-weight: 600;
	}

	.flow_step_title {
		font-size: 30rpx;
		margin: 20rpx 0rpx;
	}

	.tran_title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.cylinder_ccsfs {
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #d7d7d7;
	}

	.blue_title {
		color: #2979ff;
	}

	.card_right_num {
		margin-left: 40rpx;
		display: flex;
		align-items: center;
	}

	.num_card {
		margin: 0rpx 8rpx;
		width: 60rpx;
	}

	.input_taaf {
		padding: 0rpx !important;
	}

	.card_dinay {
		display: flex;
		align-items: center;
		width: calc(100% - 40rpx);
		border-bottom: 1rpx solid #d7d7d7;
		padding: 30rpx 20rpx;
	}

	.item_current {
		width: 40rpx;
		color: #82848a;
	}

	.item_title1 {
		margin-left: 10rpx;
	}

	.card_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
	}
</style>