diff --git a/src/views/quality/component/shipmentCode.vue b/src/views/quality/component/shipmentCode.vue
new file mode 100644
index 0000000..006714e
--- /dev/null
+++ b/src/views/quality/component/shipmentCode.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="shipment-code-wrap">
+		<div class="pick-info">
+			<strong>状态栏：</strong>
+			请扫描下一个待发运零件
+		</div>
+		<div class="pick-info pick-code">
+			<strong>扫描条码：</strong>
+			<el-input maxlength="50"
+								ref="pkgInput"
+								style="width: calc(100% - 240px);"
+								v-model="pickCode"
+								placeholder="条码"
+								autofocus
+								@keyup.enter.native="enterPress"></el-input>
+			<el-button type="trimary" class="reset-code">重置扫描</el-button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		isVisible: {
+			default: false,
+		}
+	},
+  data() {
+    return {
+			pickCode: '',
+    }
+  },
+	methods: {
+		enterPress(e) {
+			console.log(e)
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.shipment-code-wrap {
+	padding: 10px;
+	.pick-info {
+		background: #f5f7fc;
+		padding: 10px;
+		margin-right: 20px;
+		strong {
+			width: 100px;
+			display: inline-block;
+		}
+		.reset-code {
+			background: #0A708F;
+			display: inline-block;
+			color: #fff;
+			width: 130px;
+			height: 36px;
+		}
+	}
+	.pick-code {
+		margin-top: 10px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/quality/component/shipmentList.vue b/src/views/quality/component/shipmentList.vue
new file mode 100644
index 0000000..7e90781
--- /dev/null
+++ b/src/views/quality/component/shipmentList.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="shipment-list-wrap">
+		<div class="shipment-list-info clearfix">
+			<div class="pick-info pick-info1 fl">
+				<strong>捡料单号：</strong>20210920-F39-2
+			</div>
+			<div class="pick-info pick-info2 fl">
+				<strong>描述：</strong>第二车包装
+			</div>
+			<div class="pick-info pick-info3 fl">
+				<strong>计划/实际(数量)：</strong>6/666
+			</div>
+		</div>
+		<div class="pick-table">
+			<el-table
+				v-loading="loading"
+				:data="tableData"
+				border
+				height="100%"
+				>
+				<el-table-column prop="date" label="位置" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="name" label="零件号" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="date" label="项目号" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="name" label="描述" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="date" label="标包" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="name" label="需求包装数" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="date" label="计划数量" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="name" label="实际数量" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="date" label="状态" show-overflow-tooltip></el-table-column>
+			</el-table>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		isVisible: {
+			default: false,
+		}
+	},
+  data() {
+    return {
+			tableData: [{
+				date: '第一本包装',
+				name: '12',
+			},{
+				date: '第一本包装',
+				name: '376',
+			}],
+			loading: false,
+    }
+  },
+	methods: {
+		
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.shipment-list-wrap {
+	height: 100%;
+	.shipment-list-info {
+		max-height: 68px;
+		padding: 10px;
+		border-bottom: 5px solid #F5F7FC;
+		.pick-info {
+			background: #f5f7fc;
+			padding: 10px;
+			margin-right: 20px;
+		}
+		.pick-info1 {
+			width: 300px;
+		}
+		.pick-info2 {
+			width: 350px;
+		}
+		.pick-info3 {
+			width: 220px;
+		}
+	}
+	.pick-table {
+		height: calc(100% - 70px);
+		padding: 10px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/quality/component/shipmentSearch.vue b/src/views/quality/component/shipmentSearch.vue
new file mode 100644
index 0000000..931b707
--- /dev/null
+++ b/src/views/quality/component/shipmentSearch.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="shipment-search-wrap">
+		<div class="clearfix">
+			<el-button class="before-after-day fl" @click="beforeDayHandle">前一天</el-button>
+			<el-date-picker
+				v-model="dateValue"
+				type="date"
+				class="fl select-date"
+				placeholder="选择日期"
+				format="yyyy-MM-dd"
+				value-format="yyyy-MM-dd">
+			</el-date-picker>
+			<el-button class="before-after-day fr" @click="afterDayHandle">后一天</el-button>
+		</div>
+		<el-table
+			v-loading="loading"
+      :data="tableData"
+			highlight-current-row
+			class="dispatch-order-table"
+			border
+			@current-change="handleCurrentChange"
+			height="calc(100% - 50px)">
+      <el-table-column prop="date" label="描述" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="name" label="计划数量" width="100" show-overflow-tooltip></el-table-column>
+    </el-table>
+	</div>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+	props: {
+		isVisible: {
+			default: false,
+		}
+	},
+  data() {
+    return {
+			dateValue: moment().format('YYYY-MM-DD'),
+			tableData: [{
+				date: '第一本包装',
+				name: '12',
+			},{
+				date: '第一本包装',
+				name: '376',
+			}],
+			loading: false,
+    }
+  },
+	methods: {
+		moment,
+		handleCurrentChange(val) {
+			console.log(val)
+		},
+		beforeDayHandle() {
+			let afterDay = moment(this.dateValue).subtract(1,"days").format("YYYY-MM-DD")
+			this.dateValue = afterDay
+		},
+		afterDayHandle() {
+			let afterDay = moment(this.dateValue).add(1,"days").format("YYYY-MM-DD")
+			this.dateValue = afterDay
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/ ::-webkit-scrollbar-thumb { // 滚动条颜色
+  background: #dce2f0;
+}
+.shipment-search-wrap {
+	padding: 10px;
+	height: 100%;
+	.before-after-day {
+		width: 80px;
+		background: #0A708F;
+		color: #fff;
+		min-height: 36px;
+	}
+	.select-date {
+		width: 150px;
+		margin-left: 5px;
+	}
+	.dispatch-order-table {
+		width: 100%;
+		margin-top: 10px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/quality/shipment.vue b/src/views/quality/shipment.vue
new file mode 100644
index 0000000..3b7e919
--- /dev/null
+++ b/src/views/quality/shipment.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="app-container shipment-wrapper">
+		<div class="shipment-top-wrap">
+			<div class="shipment-left-wrap">
+				<div class="shipment-search">
+					<shipmentSearch />
+				</div>
+			</div>
+			<div class="shipment-right-wrap">
+				<shipmentList />
+			</div>
+		</div>
+		<div class="shipment-bottom-wrap">
+			<shipmentCode />
+		</div>
+	</div>
+</template>
+
+<script>
+import shipmentSearch from './component/shipmentSearch.vue'
+import shipmentList from './component/shipmentList.vue'
+import shipmentCode from './component/shipmentCode.vue'
+export default {
+	name: 'shipment',
+	components: {
+		shipmentSearch,
+		shipmentList,
+		shipmentCode
+	},
+	data() {
+		return {
+			
+		}
+	},
+	methods: {
+		
+	},
+}
+</script>
+<style lang="scss">
+.shipment-wrapper {
+	background: #F5F7FC;
+	.shipment-top-wrap {
+		height: calc(100vh - 100px - 36px - 10px - 156px);
+		display: flex;
+		width: 100%;
+		.shipment-left-wrap {
+			width: 350px;
+			height: 100%;
+			padding: 0px 10px 0 0px;
+			.shipment-search {
+				background: #fff;
+				height: 100%;
+			}
+		}
+		.shipment-right-wrap {
+			width: calc(100% - 350px);
+			height: 100%;
+			background: #fff;
+		}
+	}
+	.shipment-bottom-wrap {
+		height: 200px;
+		background: #fff;
+		margin-top: 10px;
+	}
+}
+</style>
\ No newline at end of file