拣货管理页面优化

pages/warehouse/picking/add.vue

@@ -4,7 +4,8 @@
 			<template slot="float"></template>
 		</uni-nav-bar>
 
-		<u-form class="baseForm" labelPosition="left" :model="formData" ref="formRef" labelWidth="260" labelAlign="right">
+		<u-form class="baseForm" labelPosition="left" :model="formData" ref="formRef" labelWidth="220"
+			labelAlign="right">
 			<u-form-item label="拣货编码" prop="code" borderBottom>
 				<u-input disableColor="#ffffff" v-model="formData.code" placeholder="请选择" disabled type="text" />
 			</u-form-item>
@@ -94,7 +95,10 @@
 
 <script>
 	// import ScanCode from '@/components/ScanCode.vue'
-	import { savePickgoods, getCode } from '@/api/warehouseManagement'
+	import {
+		savePickgoods,
+		getCode
+	} from '@/api/warehouseManagement'
 	export default {
 		data() {
 			return {
@@ -198,7 +202,8 @@
 					for (let i = 0; i < this.productList.length; i++) {
 						let obj = this.tableList.find(item => item.categoryCode == this.productList[i].categoryCode)
 						if (!!obj) {
-							if (this.productList[i].packingQuantity != obj.packingQuantity || this.productList[i].packingUnit != obj.packingUnit) {
+							if (this.productList[i].packingQuantity != obj.packingQuantity || this.productList[i]
+								.packingUnit != obj.packingUnit) {
 								uni.showToast({
 									title: '请检查拣货清单',
 									icon: 'none'
@@ -253,14 +258,17 @@
 		height: 100vh;
 		display: flex;
 		flex-direction: column;
+
 		/deep/.required-form .u-form-item__body__left__content__label::before {
 			content: '*';
 			color: red;
 		}
 	}
+
 	.required-form-text {
 		/deep/ .u-form-item__body__right {
 			overflow: hidden;
+
 			.u-form-item__body__right__content {
 				width: 100%;
 				display: inline-block !important;
@@ -275,6 +283,7 @@
 		align-items: center;
 		justify-content: center;
 	}
+
 	.tabs {
 		display: flex;
 		width: 100vw;
@@ -283,9 +292,10 @@
 		display: flex;
 		justify-content: flex-start;
 		align-items: flex-end;
-		margin-bottom: 20rpx;
+		margin: 20rpx 0;
 		padding: 0 10rpx;
 		box-sizing: border-box;
+
 		.tab-item {
 			flex: 1;
 			display: flex;
@@ -293,14 +303,19 @@
 			align-items: center;
 			padding: 10rpx 0;
 			box-sizing: border-box;
+			height: 72rpx;
+
+
 			.label {
 				margin-right: 10rpx;
 			}
+
 			&.active {
 				background: linear-gradient(180deg, rgba(75, 121, 2, 1) 0%, rgba(255, 255, 255, 1) 12%);
 				border-right: 1rpx solid #ccc;
 				border-left: 1rpx solid #ccc;
 				border-bottom: 1rpx solid #ccc;
+				border-radius: 10rpx;
 			}
 		}
 	}
@@ -311,10 +326,12 @@
 		justify-items: flex-start;
 		flex-wrap: wrap;
 	}
+
 	/deep/.baseForm {
 		.u-form-item__body {
-			padding: 0px !important;
+			padding: 4px !important;
 		}
+
 		.assetType_box {
 			padding: 12rpx 18rpx;
 			width: 100%;
@@ -323,6 +340,7 @@
 			text-overflow: ellipsis;
 		}
 	}
+
 	/deep/.picList .u-image {
 		margin-right: 10rpx;
 		margin-bottom: 10rpx;
@@ -342,6 +360,7 @@
 			margin: 0 !important;
 			width: 180rpx;
 		}
+
 		.selectEnterType {
 			margin-left: 10rpx !important;
 		}
@@ -376,18 +395,22 @@
 			margin-right: 8rpx !important;
 		}
 	}
+
 	.tableBox {
 		flex: 1;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
+
 		.scrollList {
 			flex: 1;
 			height: 100% !important;
+
 			.listBox {
 				display: flex;
 				padding: 20rpx;
 				border-bottom: 2rpx solid #e5e5e5;
+
 				.listBox-con {
 					width: 100%;
 					align-items: center;
@@ -413,16 +436,20 @@
 						justify-content: space-between;
 						font-size: $uni-font-size-sm;
 						flex-wrap: wrap;
-						> view {
+
+						>view {
 							width: 50%;
 							overflow: hidden;
 							white-space: nowrap;
 							text-overflow: ellipsis;
+							line-height: 24px;
 						}
+
 						.input_view {
 							display: flex;
 							align-items: center;
 							justify-content: center;
+
 							.u-input {
 								height: 36rpx;
 								padding: 0 !important;
@@ -430,6 +457,7 @@
 								border: 1px solid #ddd;
 							}
 						}
+
 						.w100 {
 							width: 100%;
 						}
@@ -437,26 +465,31 @@
 				}
 			}
 		}
+
 		.no_data {
 			flex: 1;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 		}
+
 		.list {
 			padding: 20rpx 10rpx;
 			border-bottom: 1px #f2f2f2 solid;
 			position: relative;
+
 			&.code {
 				.label {
 					width: 120rpx !important;
 				}
 			}
+
 			.listTit {
 				width: 100%;
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
+
 				/deep/uni-button {
 					margin-right: 20rpx;
 					width: 100rpx;
@@ -465,6 +498,7 @@
 						width: 180rpx;
 					}
 				}
+
 				.name {
 					width: 50%;
 					margin-left: 10px;
@@ -507,8 +541,10 @@
 					margin-top: -14rpx;
 				}
 			}
+
 			.z_list {
 				max-height: 500rpx;
+
 				.material {
 					margin-top: 10rpx;
 
@@ -565,6 +601,7 @@
 								word-wrap: break-word;
 								flex-grow: 1 !important;
 							}
+
 							.input_box {
 								padding: 0 !important;
 							}
@@ -647,6 +684,7 @@
 					}
 				}
 			}
+
 			.more {
 				position: absolute;
 				bottom: 26rpx;
@@ -661,14 +699,17 @@
 		display: flex;
 		justify-content: flex-end;
 		margin-bottom: 10rpx;
+
 		.timeBox {
 			display: flex;
 			width: 500rpx;
+
 			.firstBtn {
 				margin-right: 10rpx;
 			}
 		}
 	}
+
 	.textBox {
 		border: 1px #f2f2f2 solid;
 		height: 160px;
@@ -680,7 +721,8 @@
 		width: 50%;
 		margin: 40rpx auto;
 	}
+
 	.top-css {
 		border-bottom: 1px solid rgb(207, 204, 204);
 	}
-</style>
+</style>

pages/warehouse/picking/components/CardList.vue

@@ -1,31 +1,64 @@
 <template>
 	<view class="marginTop">
-		<view v-for="(item, index) in list" class="kd-row" :key="item.id" @click="goDetail(item)" v-show="list.length !== 0">
-			<!-- 进度组件 -->
-			<view class="kd-col">
-				<text class="title">{{ item.code }}</text>
-				<text>名称：{{ item.name }}</text>
-			</view>
-			<view class="kd-col">
-				<text>领料单号：{{ item.sourceNo }}</text>
-			</view>
-			<view class="kd-col">
-				<text>出库单号：{{ item.outInNo }}</text>
-			</view>
-			<view class="kd-col">
-				<text>拣货人：{{ item.createName }}</text>
-			</view>
-			<view class="kd-col">
-				<text class="text-danger">创建时间 {{ item.createTime }}</text>
-				<text class="status" :class="statusList[item.status && item.status] && statusList[item.status && item.status].class">{{ statusList[item.status] && statusList[item.status].label }}</text>
-			</view>
-			<view class="kd-col">
-				<text>仓库：{{ item.warehouseName }}</text>
-			</view>
-		</view>
-		<view v-show="list.length === 0" class="no_data">
-			<u-empty mode="data" textSize="22"></u-empty>
-		</view>
+		<u-list>
+			<u-list-item v-for="(item, index) in list" :key="item.id" v-show="list.length !== 0">
+				<view class="card_box" @click="goDetail(item)">
+					<view class="item_box flex_between">
+						<view class="rx-sc">
+							<view class="round">{{Number(index)+1}}</view>
+							<view class="orderId">{{item.code}} </view>
+						</view>
+						<view class="status"
+							:class="statusList[item.status && item.status] && statusList[item.status && item.status].class">
+							{{ statusList[item.status] && statusList[item.status].label }}
+						</view>
+					</view>
+					<view class="item_box rx-bc">
+						<view class="item_one perce50 rx-sc">
+							<view class="lable">名称：</view>
+							<view>{{item.name }}</view>
+						</view>
+					</view>
+					<view class="item_box rx-bc">
+						<view class="item_one perce50 rx-sc">
+							<view class="lable">领料单号：</view>
+							<view>{{item.sourceNo }}</view>
+						</view>
+					</view>
+					<view class="item_box rx-bc">
+						<view class="item_one perce50 rx-sc">
+							<view class="lable">出库单号：</view>
+							<view>{{item.outInNo }}</view>
+						</view>
+					</view>
+					<view class="item_box rx-bc">
+						<view class="item_one perce50 rx-sc">
+							<view class="lable">拣货人：</view>
+							<view>{{item.createName}}</view>
+						</view>
+					</view>
+					<view class="item_box rx-bc">
+						<view class="item_one perce50 rx-sc">
+							<view class="lable">创建时间：</view>
+							<view>{{item.createTime}}</view>
+						</view>
+					</view>
+					<view class="item_box rx-bc">
+						<view class="item_one perce50 rx-sc">
+							<view class="lable">仓库：</view>
+							<view>{{item.warehouseName}}</view>
+						</view>
+					</view>
+				</view>
+			</u-list-item>
+			<u-list-item v-if="list.length === 0">
+				<view style='margin-top: 20vh;'>
+					<u-empty iconSize='150' textSize='32' text='暂无数据'>
+					</u-empty>
+				</view>
+			</u-list-item>
+
+		</u-list>
 	</view>
 </template>
 
@@ -40,16 +73,25 @@
 		data() {
 			return {
 				statusList: {
-					0: { class: 'text-danger', label: '拣货中' },
-					1: { class: 'normal', label: '拣货完成' },
-					2: { class: 'text-primary', label: '已出库' }
+					0: {
+						class: 'text-danger',
+						label: '拣货中'
+					},
+					1: {
+						class: 'normal',
+						label: '拣货完成'
+					},
+					2: {
+						class: 'text-primary',
+						label: '已出库'
+					}
 				}
 			}
 		},
 		methods: {
-			goDetail({ outInNo }) {
+			goDetail(val) {
 				uni.navigateTo({
-					url: `/pages/warehouse/outHouse/details?&bizNo=${outInNo}`
+					url: `/pages/warehouse/outHouse/details?&bizNo=${val.outInNo}`
 				})
 			}
 		}
@@ -59,52 +101,114 @@
 <style lang="scss" scoped>
 	.marginTop {
 		border-top: 20rpx solid $page-bg;
+	}
 
-		.kd-row {
-			font-size: 28rpx;
-			padding: 14rpx 12rpx 6rpx;
-			border-bottom: 1rpx solid $page-bg;
-			.kd-col {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				padding: 2rpx;
-				color: #aaaaaa;
-
-				.status {
-					display: inline-block;
-					padding: 4rpx 10rpx;
-					border-radius: 18rpx;
-
-					&.normal {
-						background-color: $page-bg;
-					}
-					&.text-danger {
-						background-color: rgba($color: $uni-color-order-error, $alpha: 0.1);
-					}
-					&.text-primary {
-						background-color: rgba($color: $j-primary-green, $alpha: 0.1);
-					}
-				}
+	.card_box {
+		width: 750rpx;
+		padding: 16rpx 32rpx;
+		box-sizing: border-box;
+		border-bottom: 2rpx solid #E1E1E1;
+
+
+		.item_box {
+			margin-top: 10rpx;
+
+			.round {
+				width: 40rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				border-radius: 50%;
+				background: $theme-color;
+				color: #fff;
+				text-align: center;
+				font-size: 20rpx;
+			}
+
+			.orderId {
+				color: #000;
+				font-family: PingFang HK;
+				font-size: 28rpx;
+				font-style: normal;
+				font-weight: 600;
+				margin-left: 16rpx;
 			}
-			.title {
-				font-weight: bold;
-				color: #333333;
+
+			.item_one {
+				width: 100%;
+				font-size: 26rpx;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 38rpx;
+				word-wrap: break-word;
+			}
+
+			.gylx {
+				color: $theme-color;
 			}
+
+			.perce50 {
+				width: 100%;
+			}
+		}
+
+		.flex_between {
+			display: flex;
+			justify-content: space-between;
+		}
+	}
+
+	.status {
+		font-size: 28rpx;
+		display: inline-block;
+		padding: 4rpx 10rpx;
+		border-radius: 18rpx;
+
+		&.normal {
+			background-color: $page-bg;
 		}
 
-		.center {
-			text-align: center;
-			margin-bottom: 10rpx;
-			color: #999;
+		&.text-danger {
+			background-color: rgba($color: $uni-color-order-error, $alpha: 0.1);
 		}
-		.no_data {
-			position: fixed;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			color: #999;
-			font-size: 28rpx;
+
+		&.text-primary {
+			background-color: rgba($color: $j-primary-green, $alpha: 0.1);
 		}
 	}
-</style>
+
+	// 	.kd-row {
+	// 		font-size: 28rpx;
+	// 		padding: 14rpx 12rpx 6rpx;
+	// 		border-bottom: 1rpx solid $page-bg;
+
+	// 		.kd-col {
+	// 			display: flex;
+	// 			justify-content: space-between;
+	// 			align-items: center;
+	// 			padding: 2rpx;
+	// 			color: #aaaaaa;
+
+
+	// 		}
+
+	// 		.title {
+	// 			font-weight: bold;
+	// 			color: #333333;
+	// 		}
+	// 	}
+
+	// 	.center {
+	// 		text-align: center;
+	// 		margin-bottom: 10rpx;
+	// 		color: #999;
+	// 	}
+
+	// 	.no_data {
+	// 		position: fixed;
+	// 		top: 50%;
+	// 		left: 50%;
+	// 		transform: translate(-50%, -50%);
+	// 		color: #999;
+	// 		font-size: 28rpx;
+	// 	}
+</style>