rtk-wms-uniapp/pages/workbranch/warehouse/production/materialIssuance.vue

<template>
	<gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
		<template #gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goBack">&#xe6c5;</text>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text
					class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text">发料单</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;" />
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template #gBody>
			<view class="list-content">
				<view class="body-card">
					<view class="body-card-row">
						<span>领料单</span>
						<span>{{ objectJSON.workOrderBomNo }}</span>
					</view>
					<view class="body-card-row">
						<span>订单号</span>
						<span>{{ objectJSON.workOrderNo }}</span>
					</view>
					<view class="body-card-row">
						<span>产品号</span>
						<span>{{ objectJSON.productCode }}</span>
					</view>
				</view>
				<view class="table-title" style="margin-top: 16px;">
					<span>发料明细</span>
				</view>
				<view class="custom-table">
					<uni-table border stripe empty-text="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr class="custom-table-head">
							<uni-th align="center" width="140px">物料</uni-th>
							<uni-th align="center" width="140px">批次</uni-th>
							<uni-th align="center" width="140px">发料量</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, key) in tableData" :key="key">
							<uni-td align="center">{{ item.erpMaterialId }}({{ item.materialName }})</uni-td>
							<uni-td align="center">{{ item.batchNumber }}</uni-td>
							<uni-td align="center">{{ item.batchQty }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="card-list-item"
					style="margin: 12px 0;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;">
					<button type="default" style="width: calc(100% - 8px);margin: 0 4px;"
						@click="handleComplete">签收</button>
					<button type="primary" style="width: calc(100% - 8px);margin: 0 4px;"
						@click="handleSubmit">提交</button>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script>
	import {
		ref,
		onMounted,
		defineComponent,
		onBeforeMount
	} from 'vue'
	export default defineComponent({
		setup(options) {
			const parentRow = uni.getStorageSync('ids') ?? {}
			const objectJSON = ref({
				productCode: '',
				workOrderBomNo: '',
				workOrderNo: ''
			})
			const tableData = ref([])

			const search = function() {
				uni.$reqGet('getOutStockAllPreparedPage', {
						pageNo: 1,
						pageSize: 100,
						detailErpId: objectJSON.value?.detailErpId ?? ''
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							tableData.value = data
						} else {
							uni.showToast({
								title: msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
			}

			onBeforeMount(() => {
				if (!['', undefined, null, NaN].includes(parentRow)) {
					Object.assign(objectJSON.value, JSON.parse(parentRow))
				}
			})

			onMounted(() => {
				search()
			})

			const goBack = function() {
				uni.$goBack('/pages/workbranch/warehouse/production/scanMaterials')
			}

			const handleComplete = function() {
				// #ifdef APP-PLUS
				const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
				mpaasScanModule.mpaasScan({
						// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
						'scanType': ['qrCode', 'barCode'],
						// 是否隐藏相册，默认false不隐藏
						'hideAlbum': false
					},
					(ret) => {
						if (ret.resp_code === 1000) {
							// 扫描员工工号
							uni.$reqPut('completePrepareMaterial', {
									encodedEmployeeId: ret.resp_result,
									masterId: objectJSON.value.masterId
								})
								.then(({
									code,
									data,
									msg
								}) => {
									if (code === 0) {
										uni.showToast({
											title: '签收成功',
											icon: 'none',
											duration: 2000
										})
										uni.$goBack(
											'/pages/workbranch/warehouse/production/prepareMaterials')
									} else {
										uni.showToast({
											title: msg,
											icon: 'none',
											duration: 2000
										})
									}
								})
						}
					})
				// #endif
				// #ifdef H5
				// 扫描员工工号
				uni.$reqPut('completePrepareMaterial', {
						encodedEmployeeId: 'MTY0NTYxNDY4MjgzMjAyMzU1NA==',
						masterId: objectJSON.value.masterId
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							uni.showToast({
								title: '签收成功',
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				// #endif
			}

			const handleSubmit = function() {
				uni.$reqPut('createOutStockMaterial', {
						detailErpId: objectJSON.value.detailErpId
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							uni.$reqGet('getOutStockMainDetailPage', {
									pageNo: 1,
									pageSize: 100,
									keyWord: objectJSON.value.workOrderBomNo
								})
								.then(({
									data
								}) => {
									tableData.value = data?.list
								})
							uni.showToast({
								title: '提交成功！',
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
			}

			return {
				goBack,
				objectJSON,
				tableData,
				handleComplete,
				handleSubmit
			}
		}
	})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.list-content {
		margin-top: 80px;
		background-color: #edeeee;
	}

	.card-list-flexbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin: 3px 2px;

		.card-list-item {
			width: 750rpx;
			height: 40px;
			margin: 2rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			uni-text {
				font-size: 14px;
				height: 50rpx;
				text-align: left;
				padding: 0 12px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.text-1 {
				flex: 1;
				height: 40px;
				justify-content: flex-start;
			}

			.text-2 {
				flex: 3;
				height: 40px;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 6px;
			}
		}

	}

	.fixedTop {
		bottom: 0 !important;
		top: 3.25rem !important;
	}

	.popup-content {
		height: 75vh;
		overflow-y: scroll;
		background-color: #edeeee;
	}

	.font-icons {
		width: 40px;
		font-size: 20px;
	}

	.body-card {
		width: calc(100% - 48px);
		margin: 12px;
		padding: 0 12px;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		border-radius: 6px;
		background-color: white;

		.body-card-row {
			height: 35px;
			line-height: 35px;
			display: flex;
			justify-content: space-between;
		}
	}

	.table-title {
		height: 40px;
		line-height: 40px;
		margin: 4px 0 -3px 0;
		padding: 0 12px;
		font-size: 16px;
		font-weight: bold;
		background-color: white;
	}

	.custom-table {
		height: 24vh;
		min-height: 230px;
		margin: 5px 0;
		// min-height: 600px;
		overflow-y: scroll;
	}
</style>