ezhizao_dms_app/components/dialog-turnoverTask/dialog-turnoverTask.vue

<template>
	<dialog-base ref="baseDialog" title="周转任务">
		<view class="list-title uni-row"><text class="label">{{form['process']}}</text>
		<text class="label">→</text>
		<text class="label">{{form['car']}}</text></view>
		<view class="list-container">
			<view class="list-container-item uni-row">
				<text class="label">批次</text>
				<text class="label value">{{form['batch']}}</text>
			</view>
			<view class="list-container-item uni-row">
				<text class="label">箱数</text>
				<text class="label value">{{form['cases']}}</text>
			</view>
			<view class="list-container-item uni-row">
				<text class="label">数量</text>
				<text class="label value">{{form['amount']}}</text>
			</view>
			<view class="list-container-item uni-row" >
				<text class="label">箱号</text>
				<text class="label value">{{form['caseNumber']}}</text>
			</view>
			<view class="list-container-item uni-row" >
				<text class="label">申请时间</text>
				<text class="label value">{{form['applyTime']}}</text>
			</view>
			<view class="list-container-item uni-row" >
				<text class="label">申请人</text>
				<text class="label value">{{form['applier']}}</text>
			</view>
		</view>
		
	<view class="add-btn-container uni-row">
		<button type="primary" class="btn" style="flex: 1;">确认周转</button>
	</view>
	</dialog-base>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	 const baseDialog = ref(null)
	const form = ref({
						process: "粗磨",
						car: "NC车",
						batch: "DC23727410070",
						cases: 5,
						amount:780,
						caseNumber: "X12522、X55222、X15522、J5211、J5211",
						applyTime:"2023-06-15 15:52:12",
						applier:"王伟"
					})
const open = (data) => {
			// console.log(dialog.value)
			baseDialog.value.open()
		}
		defineExpose({
		  open
		})
</script>

<style lang="scss">
	.dialog-body {
		.list-title {
			margin: 40rpx 0 20rpx 0;
		    
			.label {
				padding-right: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		
		.list-container {
			width: 100%;
			display: flex;
			align-items: flex-start;
			padding: 0 4rpx;
		
			.list-container-item {
				width: 100%;
				padding: 12rpx 8rpx;
				align-items: center;
		
				.label {
					font-size: 28rpx;
					color: gray;
					width: 144rpx;
					
					&.value {
						
						flex: 1;
						color: #000000;
					}
				}
			}
		
		}
		
		.equipment-container {
		
			.item {
				flex: 1;
				border: 1rpx solid #aaaaaa;
				border-radius: 4;
				margin: 0 8rpx;
				padding: 12rpx 0;
				justify-content: center;
				align-items: center;
				
				.label {
					font-size: 32rpx;
				}
			}
		}
	.add-btn-container {
			margin-top: 32rpx;
		}
	}
</style>