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

<template>
	<!-- 调拨钢瓶 -->
	<view>
		<u-navbar :title="headTransfer" autoBack placeholder></u-navbar>
		<view class="card_transfer">
			<!-- <view style="display: flex;align-items: center;" @click="allotSweep" v-if="allotFlag">
				<view class="tran_title">扫描调拨码</view>
				<u-icon name="scan" size="30"></u-icon>
			</view> -->
			<view style="display: flex; align-items: center;" v-if="allotFlag">
				<u-button style="margin-right: 30rpx;" color="#19be6b" type="success" text="选择接收人信息"
					@click="selectiveFlow"></u-button>
				<u-button type="success" color="#19be6b" text="扫描调拨码" icon="scan" @click="allotSweep"></u-button>
			</view>
			<!-- <view class="card_assigner_aaf" @click="selectDispatcher"> -->
			<view class="card_assigner_aaf" :class="haveSelected ? 'greyMaskCard' : ''"
				v-if="assignerFlag && allotFlag">
				<view class="step_title">流转步骤</view>
				<view class="flow_step_title">{{ userList.flowName || '调拨流转步骤信息' }}</view>
				<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.name || '接收人姓名'}}</view>
							<view class="mine_phone">{{userList.shopName || '接收人所属门店'}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="white_card center_in">
					<u-icon name="plus" size="40" color="#5ac725"></u-icon>
				</view> -->
			<!-- </view> -->
			<view class="cylinder_ccsfs frame">
				<view style="display: flex;align-items: center;justify-content: flex-end;margin-bottom: 10rpx;">
					<view class="blue_titleil">总数: {{totality}}</view>
					<view class="green_title">已选: {{checkedList.length}}</view>
				</view>
				<view class="space_between">
					<view class="tran_title">单位内编号</view>
					<view style="display: flex;flex-direction: column;">
						<view style="display: flex;align-items: center;">
							<view class="blue_titleil" @click="checkAll">全选</view>
							<view class="blue_titleilred" @click="Inverse">反选</view>
							<view class="card_right_num">
								<span class="blue_title">选择前</span>
								<view class="num_card">
									<u--input class="input_taaf" v-model="codeValue" type="number" fontSize="12"
										inputAlign="center" border="surround" @blur="howMany"></u--input>
								</view>
								<span class="blue_title">个</span>
							</view>
						</view>
					</view>
				</view>
				<view style="margin: 10px 0px 0px 0px;">
					<u-search v-model="cylinderNumber" shape="square" :showAction="false" placeholder="请输入单位内编码"
						borderColor="#e4e7ed" bgColor="#fff" @change="quickSearch"></u-search>
				</view>
			</view>
			<view style="width: 100%;" v-if="list.length > 0">
				<u-checkbox-group v-model="checkedList" @change="checkboxChange">
					<view style="width: 100%;display: flex;flex-direction: column;">
						<view class="card_dinay frame" v-for="(item,index) in list" :key="index">
							<view style="display: flex;align-items: center;">
								<u-checkbox :disabled="item.isAllot" :name="item.inner_code"
									:checked="item.checked"></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 class="blue_transferr" v-if="item.isAllot">调拨中</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>
		<u-popup :show="assignerShow" mode="center" round="8" closeable @close="close">
			<view style="margin-top: 60rpx;padding: 30rpx;width: 400rpx;">
				<u-button type="primary" text="选择接收人信息" @click="selectiveFlow1"></u-button>
				<u-button type="primary" text="扫描调拨码" icon="scan" style="margin-top: 20rpx;"
					@click="allotSweep"></u-button>
			</view>
		</u-popup>
		<u-popup :show="flowStepShow" :closeOnClickOverlay="false" mode="center" round="8" closeable @close="close">
			<view style="padding: 30rpx;width: 600rpx;">
				<view class="title_step">选择流转步骤<span>*</span></view>
				<view class="card_recipient frame_recip" @click="flowStepFocus">
					<span
						:style="{color:flowStepData.title ? '#000000' : '#c8c9cc'}">{{flowStepData.title || '选择流转步骤'}}</span>
					<u-icon name="arrow-down" size="18"></u-icon>
				</view>
				<view v-if="flowStepData.title">
					<view class="title_step">选择门店<span>*</span></view>
					<view class="card_recipient frame_recip" @click="shopFocus">
						<span :style="{color:shopData.title ? '#000000' : '#c8c9cc'}">{{'选择门店'}}</span>
						<u-icon name="arrow-down" size="18"></u-icon>
					</view>
				</view>
				<view v-if="shopData.title">
					<view class="title_step">选择接收人<span>*</span></view>
					<view class="card_recipient frame_recip" @click="recipientFocus">
						<span :style="{color:recipientData.title ? '#000000' : '#c8c9cc'}">{{'选择接收人'}}</span>
						<u-icon name="arrow-down" size="18"></u-icon>
					</view>
				</view>
				<u-button type="primary" text="确定" style="margin-top: 30rpx;" @click="allotSweep"></u-button>
				<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="flowCancel"></u-picker>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totality: 0,
				checkedList: [],
				list: [],
				current: null,
				assignerFlag: true,
				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,
				codeValue: '',
				allotFlag: true,
				cylinderNumber: '',
				assignerShow: false,

				flowStepShow: false,
				show: false,
				columns: [],

				userList: {
					name: '',
					userId: '',
					shopID: '',
					shopName: '',
					flowId: '',
					flowName: '',
				},
				// 1-扫码调拨 2-一键调拨
				allotType: 2,
				// 流转步骤
				flowStepData: {
					id: '',
					title: '',
				},
				// 门店
				shopData: {},
				// 接收人
				recipientData: {},
				headTransfer: '',
			}
		},
		watch: {
			list: {
				handler: function(newUser, oldUser) {
					if (newUser) {
						let arr = newUser
						for (let i = 0; i < arr.length; i++) {
							let flag = this.checkedList.includes(arr[i].inner_code);
							if (flag) {
								arr[i].checked = true
							}
						}
						this.list = arr
					}
				},
				deep: true
			}
		},
		computed: {
			// 定义计算属性totalPrice
			haveSelected: function() {
				let arr = false
				if (this.userList.userId) {
					arr = false
				} else {
					arr = true
				}
				return arr
			}
		},
		onShow() {
			const data = uni.getStorageSync('returnData');
			if (data) {
				const userArr = JSON.parse(data)
				this.userList = {
					...userArr
				}
				console.log('携带的参数:', this.userList);
				uni.removeStorage({
					key: 'returnData'
				});
			}
		},
		onReachBottom() {
			if (!this.loadingMore) {
				this.getList()
			}
		},
		onLoad(value) {
			this.current = value.status
			if (value.allotFlag == 'false') {
				this.allotFlag = false
				this.headTransfer = '钢瓶充装'
			} else {
				this.allotFlag = true
				this.headTransfer = '钢瓶调拨'
			}
		},
		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,
					inner_code: this.cylinderNumber,
				}).then(res => {
					if (res.code == 200) {
						this.totality = res.data.count
						const data = res.data.list
						data.forEach(item => {
							if (!item.checked) {
								item.checked = false
							}
						})
						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++
						}
					}
				})
			},
			// 快捷搜索
			quickSearch(value) {
				const arrValue = this.$cache.getCache('checkedList')
				if (arrValue) {
					this.checkedList = this.$cache.getCache('checkedList')
				}
				this.list = []
				this.getList()
			},
			// 选择调拨人、调拨步骤
			selectDispatcher() {
				this.assignerShow = true
			},
			// 选择接收人信息
			selectiveFlow() {
				this.allotType = 2
				uni.navigateTo({
					url: '/pages/information/flowStep?current=' + this.current
				});
			},
			selectiveFlow1() {
				this.assignerShow = false
				this.flowStepShow = true
			},
			// 流转步骤
			flowStepFocus() {
				var userInfo = this.$cache.getCache('userInfo')
				this.show = true
				this.columns = []
				let arrData = []
				if (userInfo.provUser) {
					if (userInfo.provUser.isorders == 0 && userInfo.provUser.userType == 3) {
						// 送气员端
						if (this.current == '1') {
							arrData.push('门店确认未配送重瓶返库')
						} else if (this.current == '2') {
							arrData.push('门店回收空瓶')
						} else {
							arrData.push('门店回收不合格瓶')
						}
					} else if (userInfo.provUser.userType == 3) {
						// 门店端
						if (this.current == '1') {
							let arrmd = ['送气员领重瓶出库', '司机确认重瓶从门店出库']
							arrData = arrmd
						} else if (this.current == '2') {
							arrData.push('司机确认空瓶装车')
						} else {
							arrData.push('司机回收不合格瓶')
						}
					} else if (userInfo.provUser.userType == 4) {
						// 司机端
						if (this.current == '1') {
							let arrsj = ['门店确认重瓶卸货入库', '气站确认重瓶到达气站']
							arrData = arrsj
						} else if (this.current == '2') {
							arrData.push('气站确认空瓶到达气站')
						} else {
							let arrsjbhg = ['门店回收不合格瓶', '气站回收不合格瓶']
							arrData = arrsjbhg
						}
					} else if (userInfo.provUser.userType == 5) {
						// 气站端
						if (this.current == '1') {
							arrData.push('司机确定重瓶从气站出库')
						} else if (this.current == '2') {
							arrData.push('')
						} else {
							arrData.push('司机回收不合格瓶')
						}
					}
				} else {
					// 送气员端
					if (this.current == '1') {
						arrData.push('门店确认未配送重瓶返库')
					} else if (this.current == '2') {
						arrData.push('门店回收空瓶')
					} else {
						arrData.push('门店回收不合格瓶')
					}
				}
				this.columns.push(arrData)
			},
			// 确定流转步骤
			confirm(event) {
				if (event.value[0] == '门店确认未配送重瓶返库') {
					this.flowStepData.id = '35'
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '门店回收空瓶') {
					this.flowStepData.id = '21'
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '门店回收不合格瓶') {
					this.flowStepData.id = this.current
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '送气员领重瓶出库') {
					this.flowStepData.id = '25'
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '司机确认重瓶从门店出库') {
					this.flowStepData.id = '033'
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '司机确认空瓶装车') {
					this.flowStepData.id = '11'
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '司机回收不合格瓶') {
					this.flowStepData.id = this.current
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '门店确认重瓶卸货入库') {
					this.flowStepData.id = '31'
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '气站确认重瓶到达气站') {
					this.flowStepData.id = '016'
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '气站确认空瓶到达气站') {
					this.flowStepData.id = '13'
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '门店回收不合格瓶') {
					this.flowStepData.id = this.current
					this.flowStepData.title = event.value[0]
				} else if (event.value[0] == '气站回收不合格瓶') {
					this.flowStepData.id = this.current
					this.flowStepData.title = event.value[0]
				}
				this.show = false
			},
			// 选择门店
			shopFocus() {
				uni.navigateTo({
					url: '/pages/information/flowStep'
				});
			},
			// 选择接收人
			recipientFocus() {
				uni.navigateTo({
					url: '/pages/information/storePersonnel'
				});
			},
			close() {
				this.assignerShow = false
				this.flowStepShow = false
			},
			// 关闭选择流转步骤
			flowCancel() {
				this.show = false
			},
			// 调拨提交
			submit() {
				if (this.allotFlag) {
					if (this.userList.userId) {
						if (this.checkedList.length > 0) {
							uni.showLoading({
								mask: true,
							});
							this.$api.post('/api/gas-cylinder-allot', {
								optType: this.userList.flowId,
								acceptUserId: Number(this.userList.userId),
								acceptCompanyId: Number(this.userList.shopID),
								innerCodeList: this.checkedList,
								gasCylinderStatus: this.current,
								allotType: this.allotType,
							}).then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									this.loadingMore = true
									this.Pagination.PageIndex = 1
									this.list = []
									this.getList()
									this.checkedList = []
									uni.$u.toast(res.msg)
									this.$forceUpdate()
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/information/transferRecord'
										});
									}, 1500)
								} else {
									uni.$u.toast(res.data.msg)
								}
							}).catch(() => {
								uni.hideLoading();
							})
						} else {
							uni.$u.toast('请先选择调拨钢瓶')
						}
					} else {
						uni.$u.toast('请选择接收人')
					}
				} else {
					// 空瓶充装
					if (this.checkedList.length > 0) {
						// 操作记录、流转步骤接口
						const param = {
							chipUidList: this.checkedList,
							optType: '14',
						}
						uni.showLoading({
							mask: true,
						});
						this.$api.post('/api/operation-log', param).then(res => {
							if (res.code == 200) {
								this.Pagination.PageIndex = 1
								this.list = []
								this.getList()
								this.checkedList = []
								uni.$u.toast('操作成功')
							} else {
								uni.$u.toast(res.data.msg)
							}
							uni.hideLoading();
						}).catch(() => {
							uni.hideLoading();
						})
					} else {
						uni.$u.toast('请先选择调拨钢瓶')
					}
				}
			},
			// 扫一扫
			allotSweep() {
				this.allotType = 1
				// 允许从相机和相册扫码
				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(',')
								this.userList.flowId = this.assignerData[0]
								this.userList.userId = this.assignerData[1]
								this.userList.name = this.assignerData[2]
								this.userList.shopID = this.assignerData[3]
								this.userList.shopName = this.assignerData[4]
								this.userList.flowName = this.assignerData[5]
							} else {
								uni.$u.toast('请扫描调拨码')
							}
						} 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
			},
			// 选择钢瓶编号
			checkboxChange(value) {
				for (let i = 0; i < this.list.length; i++) {
					let flag = value.includes(this.list[i].inner_code);
					if (flag) {
						this.list[i].checked = true
					} else {
						this.list[i].checked = false
					}
				}
				this.checkedList = this.checkedList.concat(value);
				this.$cache.setCache('checkedList', this.checkedList)
			},
			// 输入第几个
			howMany(value) {
				// this.checkedList = []
				let naxNum = value
				this.list.forEach((item, index) => {
					if (!item.isAllot) {
						if (index < naxNum && !item.isAllot) {
							item.checked = true
							this.checkedList.push(item.inner_code)
						} else {
							item.checked = false
						}
					} else {
						naxNum++
					}
				})
				this.$cache.setCache('checkedList', this.checkedList)
			},
			// 全选
			checkAll() {
				this.codeValue = ''
				this.checkedList = []
				for (let i = 0; i < this.list.length; i++) {
					if (!this.list[i].isAllot) {
						this.$set(this.list[i], 'checked', true)
					}
				}
				this.list.forEach(item => {
					if (item.checked) {
						this.checkedList.push(item.inner_code)
					}
				})
				this.$cache.setCache('checkedList', this.checkedList)
			},
			// 反选
			Inverse() {
				this.codeValue = ''
				this.checkedList = []
				for (let i = 0; i < this.list.length; i++) {
					if (!this.list[i].isAllot) {
						let flag = this.list[i].checked;
						this.$set(this.list[i], 'checked', !flag)
					}
				}
				this.list.forEach(item => {
					if (item.checked) {
						this.checkedList.push(item.inner_code)
					}
				})
				this.$cache.setCache('checkedList', this.checkedList)
			}
		}
	}
</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 {
		position: relative;
		border: 1rpx dashed #d7d7d7;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #f4f4f5;
	}

	.greyMaskCard {
		opacity: 0.5;
	}

	.white_card {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 60rpx;
	}

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

	.flow_step_title {
		font-size: 28rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
	}

	.tran_title {
		padding-left: 10rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

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

	.blue_titleil {
		font-size: 30rpx;
		color: #2979ff;
		margin-right: 20rpx;
	}

	.blue_titleilred {
		font-size: 30rpx;
		color: #ff9900;
		margin-right: 20rpx;
	}

	.blue_title {
		font-size: 30rpx;
		color: #2979ff;
	}

	.green_title {
		font-size: 30rpx;
		color: #5ac725;
	}

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

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

	.input_taaf {
		padding: 0rpx !important;
	}

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

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

	.blue_transferr {
		color: #2979ff;
		font-size: 26rpx;
	}

	.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
	}

	.title_step {
		margin: 15rpx 0px;
		font-size: 30rpx;

		span {
			color: red;
		}
	}

	.card_recipient {
		display: flex;
		padding: 6px 9px;
		border-radius: 4px;
		color: #c8c9cc;

		span {
			width: 100%;
			font-size: 30rpx;
		}
	}

	// 伪元素1rpx边框
	.frame_recip {
		position: relative; //重要
	}

	.frame_recip::after {
		position: absolute;
		content: '';
		border: 4rpx solid #e4e7ed;
		border-radius: 8rpx;
		width: 200%;
		height: 200%;
		top: 0;
		left: 0;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		/* 使伪元素不会阻止鼠标事件 */
	}
</style>