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

<template>
	<!-- 调拨记录 -->
	<view>
		<u-navbar title="调拨记录" autoBack placeholder></u-navbar>
		<view class="tabs_card_bg">
			<u-tabs :list="list4" :current="belowStandard" lineWidth="20" :scrollable="false" lineHeight="7"
				:lineColor="`url(${lineBg}) 100% 100%`" @click="standardClick"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
			<u-tabs :current="tabNumber" :list="bottleList" lineWidth="40" :scrollable="false" @click="bottleClick"
				itemStyle="padding: 15rpx;"></u-tabs>
		</view>
		<view style="padding-bottom: 30rpx;" v-if="list.length > 0">
			<view class="transfer_card_item" v-for="(item,index) in list" :key="index" @click="recordParticulars(item)">
				<view class="title_status" :style="{color:getColor(item.status)}">{{ getstatus(item.status) }}</view>
				<view class="item_title_record1" v-if="getFlowStep(item.optType)">
					<span>流转步骤：</span>
					{{getFlowStep(item.optType)}}
				</view>
				<view class="item_title_record1">
					<span>调拨人：</span>
					{{item.allotUser.nickName}}
				</view>
				<view class="item_title_record">
					<span>接收人：</span>
					{{item.acceptUser.nickName}}
				</view>
				<view class="item_title_record">
					<span>调拨时间：</span>
					{{item.createdAt}}
				</view>
				<view class="item_title_record">
					<span>单位内编号：</span>
					<span class="examine_title" @click.stop="clickToView(item)">点击查看</span>
				</view>
			</view>
		</view>
		<view style="margin-top: 40%;" v-else>
			<u-empty mode="list" text="暂无调拨记录"></u-empty>
		</view>
		<u-popup :show="innerCodeShow" round="10" @close="close">
			<view style="display: flex;flex-direction: column;touch-action: none;">
				<view class="headlinetitle">
					<view class="title_head_code">单位内编号</view>
					<span>总数: {{innerCodeData.length}}</span>
				</view>
				<view style="max-height: 800rpx;overflow-y: auto;overscroll-behavior: none;">
					<view class="card_inner_item" v-for="(item,index) in innerCodeData" :key="index">
						<view class="title_index_item">{{index + 1}}</view>
						<view>{{item}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		flowStep
	} from '@/static/js/blockSort.js'
	export default {
		data() {
			return {
				lineBg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=',
				list4: [{
					name: '我调拨的',
				}, {
					name: '我接收的'
				}],
				belowStandard: 0,
				bottleList: [{
					name: '全部',
				}, {
					name: '调拨中',
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}, {
					name: '超时取消'
				}],
				tabNumber: 0,
				// allot-我调拨的 accept-我签收的
				myType: 'allot',
				list: [],
				Pagination: {
					PageIndex: 1,
					PageSize: 20,
					Total: 0,
				},
				loadingMore: true,
				innerCodeShow: false,
				innerCodeData: [],
			}
		},
		onReachBottom() {
			if (!this.loadingMore) {
				this.getList()
			}
		},
		onShow() {
			this.Pagination.PageIndex = 1
			this.list = []
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					mask: true,
				});
				let statusNum = ''
				if (this.tabNumber != 0) {
					statusNum = this.tabNumber
				}
				this.loadingMore = true
				this.$api.get('/api/gas-cylinder-allot', {
					my: this.myType,
					status: statusNum,
					page: this.Pagination.PageIndex,
					pageSize: this.Pagination.PageSize,
				}).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++
						}
					}
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			// 点击查看
			clickToView(value) {
				this.innerCodeShow = true
				this.innerCodeData = value.innerCodeList
			},
			getstatus(value) {
				if (value == 1) {
					return '调拨中'
				} else if (value == 2) {
					return '已完成'
				} else if (value == 3) {
					return '已取消'
				} else if (value == 4) {
					return '超时取消'
				}
			},
			// 调拨状态
			bottleClick(event) {
				this.tabNumber = event.index

				this.Pagination.PageIndex = 1
				this.list = []
				this.getList()
			},
			// 我调拨的/我接收的
			standardClick(event) {
				this.belowStandard = event.index
				if (event.index == 0) {
					this.myType = 'allot'
				} else {
					this.myType = 'accept'
				}
				this.Pagination.PageIndex = 1
				this.list = []
				this.getList()
			},
			// 详情
			recordParticulars(value) {
				uni.setStorageSync('transferData', JSON.stringify(value));
				uni.navigateTo({
					url: '/pages/information/transferDetails?type=' + this.belowStandard
				});
			},
			getColor(value) {
				if (value == 1) {
					return '#3c9cff'
				} else if (value == 2) {
					return '#5ac725'
				} else if (value == 3) {
					return '#909399'
				} else if (value == 4) {
					return '#909399'
				}
			},
			getFlowStep(value) {
				let array = flowStep()
				const filteredArray = array.filter(item => item.value === value)
				if(filteredArray.length > 0){
					return filteredArray[0].label
				}
			},
			close() {
				this.innerCodeShow = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f5;
	}

	.tabs_card_bg {
		background-color: #fff;
	}

	.transfer_card_item {
		position: relative;
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.title_status {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx;
	}

	.item_title_record1 {
		font-size: 30rpx;

		span {
			font-size: 28rpx;
			color: #909399;
		}

		.examine_title {
			cursor: pointer;
			color: #2979ff;
		}
	}

	.item_title_record {
		font-size: 30rpx;
		margin-top: 10rpx;

		span {
			font-size: 28rpx;
			color: #909399;
		}

		.examine_title {
			cursor: pointer;
			color: #2979ff;
		}
	}

	.title_index_item {
		color: #909399;
		margin-right: 20rpx;
	}

	.headlinetitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #d7d7d7;

		span {
			color: #2979ff;
		}
	}

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

	.card_inner_item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #d7d7d7;
	}
</style>