appWareHouse/pages/wMSSystem/index.vue

<template>
	<view class="box-container">
		<view class="container">
			<u-form labelPosition="left" labelWidth="" :model="ruleForm" :rules="rules" ref="ruleFormRef">
				<u-form-item prop="orderNo">
					<u-search :customStyle="{backgroundColor: '#F5F5F5'}" @clickIcon="getSearchData"
						@search="getSearchData" @scanIcon="getScanData" clearable placeholder="订单号/客户订单号/FBA单号"
						v-model="ruleForm.orderNo" shape="round" :showAction="false">
					</u-search>
				</u-form-item>
			</u-form>
			<view class="info">
				<view style="font-size: 16px;font-weight:500;">{{userName}}</view>
				<view style="color:#99A5B4" @tap="signOut">退出</view>
			</view>
			<view class="company">
				深圳市美通供应链有限公司
			</view>
			<view class="imgContainer">

				<view v-for="(item,index) in imgList" :key="index" @tap="getOperation(item.type)">
					<image class="img" :src="item.url"></image>
					<view style="margin-top: 10rpx;text-align: center;">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="dashboard">
			<view style="margin: 30rpx 50rpx;font-size: 16px;font-weight: 600;">仓库看板</view>
			<view class="info-container">
				<view v-for="(item,index) in infoList" :key="index" class="info-box" @click="getInfoList">
					<view class="info">
						<image class="img" :src="item.url"></image>

						<view style="margin-left: 30rpx;">
							{{item.title}}
						</view>
					</view>

					<u-divider lineColor="#F7F9FF" v-show="index+1 < infoList.length"></u-divider>


				</view>
			</view>
		</view>
		<u-action-sheet @close="closeClick" :title="'请选择操作项目'" :safeAreaInsetBottom="true" round="15" :show="show">
			<slot>
				<view v-for="(item,index) in list" :key="index" class="actionInfo" @click="getselectClick(item.type)">
					{{item.name}}
				</view>
			</slot>
		</u-action-sheet>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import Api from '@/api/api.js'
	import store from '@/store/index'
	import {
		initScan,
		startScan,
		stopScan
	} from "@/libs/scan.js"
	export default {
		onShow() {
			initScan(this.scanSuccess);
			startScan();
		},

		onHide() {
			stopScan();
		},
		data() {
			return {
				ruleForm: {
					orderNo: ""
				},
				rules: {

				},
				imgList: [{
						url: "../../static/images/common/warehouse.png",
						title: "入库",
						type: 1
					},
					{
						url: "../../static/images/common/departure.png",
						title: "出库",
						type: 2
					},
					{
						url: "../../static/images/common/inventory.png",
						title: "盘点",
						type: 3
					},
					{
						url: "../../static/images/common/workOrder.png",
						title: "工单",
						type: 4
					},
				],
				infoList: [{
						url: "../../static/images/common/workOrderINfo.png",
						title: "工单信息"
					},
					{
						url: "../../static/images/common/warehouseInfo.png",
						title: "入仓信息"
					},
					{
						url: "../../static/images/common/departureInfo.png",
						title: "出库信息"
					},
					{
						url: "../../static/images/common/stockInfo.png",
						title: "库存信息"
					},
				],
				list: [],
				show: false,
				userName: store.state.userInfo.userName,
			}
		},
		computed: {},
		components: {

		},
		created() {

		},
		methods: {
			getInfoList() {
				uni.showToast({
					title: "功能尚在开发中",
					icon: 'none'
				})
			},
			async scanSuccess(code) {
				this.ruleForm.orderNo = code
				uni.navigateTo({
					url: `/pages/order/orderDetail?orderNo=${code.trim()}`
				})
			},
			getOperation(type) {
				switch (type) {
					case 1:
						this.list = [{
								name: '卸货',
								type: 1
							},
							{
								name: '录入材积',
								type: 3
							},
							{
								name: '打板',
								type: 2
							},
							{
								name: '叉车入库',
								type: 4
							},
						];
						this.show = true
						break;
					case 2:
						this.list = [{
								name: '找货',
								type: 5
							},
							{
								name: '叉车备货',
								type: 7
							},
							{
								name: '贴单',
								type: 6
							},
							{
								name: '监装',
								type: 8
							},
						];
						this.show = true
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/initiateInventoryCount/index"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/workOrder/workOrderAdd"
						})
						break;
					default:
				}
			},
			getselectClick(val) {
				switch (val) {
					case 1:
						uni.navigateTo({
							url: "/pages/outStock/discharge"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/outStock/palletizing"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/outStock/recordingVolume"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/outStock/forkliftWarehousing"
						})

						break;
					case 5:
						uni.navigateTo({
							url: "/pages/outBound/pickUpGoods"
						})
						break;
					case 6:
						uni.navigateTo({
							url: "/pages/outBound/attachBill"
						})
						break;
					case 7:
						uni.navigateTo({
							url: "/pages/outBound/forkliftPrepareGoods"
						})
						break;
					case 8:
						uni.navigateTo({
							url: "/pages/outBound/superviseLoading"
						})
						break;
					default:
				}
			},
			closeClick() {
				this.show = false
			},

			getSearchData() {
				uni.navigateTo({
					url: `/pages/order/orderDetail?orderNo=${this.ruleForm.orderNo}`
				})
			},
			getScanData() {
				uni.scanCode({
					success: (res) => {
						if (res.result) {
							this.ruleForm.orderNo = res.result
							uni.navigateTo({
								url: `/pages/order/orderDetail?orderNo=${res.result.trim()}`
							})
						}

					},
					fail: (err) => {

					},
					complete: () => {

					}
				})

			},
			signOut() {
				uni.showModal({
					title: '提示',
					content: '确定要退出吗？',
					success: (res) => {
						if (res.confirm) {
							this.$store.commit('GET_TOKEN', '')
							this.$store.commit('GET_USER_INFO', {})
							uni.clearStorage()
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.box-container {
		position: relative;

		.container {
			background-color: #26456D;
			height: 562rpx;
			padding: 10rpx 40rpx;
			color: #fff;
			font-size: 14px;

			.info {
				padding: 10rpx;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

			}

			.company {
				padding: 10rpx;
				font-size: 12px;
				color: #C3C3C3;
			}

			.imgContainer {
				padding: 10rpx;
				margin-top: 64rpx;
				display: flex;
				justify-content: space-between;

			}

		}

		.dashboard {
			border-top-right-radius: 60rpx;
			border-top-left-radius: 60rpx;
			top: 520rpx;
			position: absolute;
			width: 100%;
			z-index: 99;
			height: 130%;
			background-color: #F7F9FF;

			.info-container {
				padding: 20rpx 0rpx;
				width: 90%;
				margin: auto;
				background-color: #fff;
				border-radius: 60rpx;

				.info-box {
					padding: 0 48rpx;

					.info {
						display: flex;

						align-items: center;
					}
				}

			}

		}

		.actionInfo {
			padding: 20rpx 60rpx;
			text-align: left;
			margin-bottom: 50rpx;
		}
	}

	.img {
		display: block;
		width: 84rpx;
		height: 84rpx;
	}
</style>