hunanzeyunew/snowy-admin-web/src/views/biz/bizorder/detail.vue

<template>
	<xn-form-container title="详情" :width="900" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" :label-col="labelCol4" :wrapper-col="wrapperCol20">
			<a-descriptions :column="4" size="middle" bordered class="mb-2" :label-style="labelStyle" :contentStyle="contentStyle">
				<a-descriptions-item label="订单编号" :span="2">{{ formData.orderNumber }}</a-descriptions-item>
				<a-descriptions-item label="订单名称" :span="2">{{ formData.orderName }}</a-descriptions-item>
				<a-descriptions-item label="客户名称" :span="2">{{ formData.customerName }}</a-descriptions-item>
				<a-descriptions-item label="联系人" :span="2">{{ formData.customerContactName }}</a-descriptions-item>
				<a-descriptions-item label="手机号" :span="2">{{ formData.customerPhone }}</a-descriptions-item>
				<a-descriptions-item label="客户地址" :span="2">{{ formData.customerAddress }}</a-descriptions-item>
				<a-descriptions-item label="货品名称" :span="2">{{ formData.goodsName }}</a-descriptions-item>
				<a-descriptions-item label="货品规格" :span="2">{{ formData.goodsModel }}</a-descriptions-item>
				<a-descriptions-item label="订单来源" :span="2">
					<a-tag
						:color="
							formData.orderSource === '1'
								? 'orange'
								: formData.orderSource === '2'
								  ? 'green'
								  : 'purple'
						"
					>
						{{ $TOOL.dictTypeData('order_source', formData.orderSource) }}
					</a-tag>
				</a-descriptions-item>
				<a-descriptions-item label="订单状态" :span="2">
					<a-tag
						:color="
							formData.orderStatus === '1'
								? 'blue'
								: formData.orderStatus === '2'
								  ? 'warning'
								  : formData.orderStatus === '3'
								  ? 'processing'
								  : formData.orderStatus === '4'
								  ? 'volcano'
								  : formData.orderStatus === '5'
								  ? 'purple'
								  : formData.orderStatus === '6'
								  ? 'error'
								  : formData.orderStatus === '7'
								  ? 'red'
								  : '#f50'
						"
					>
						{{ $TOOL.dictTypeData('order_status', formData.orderStatus) }}
					</a-tag>
				</a-descriptions-item>
				<a-descriptions-item label="订单重量" :span="2">{{ formData.orderWeight +'吨'}}</a-descriptions-item>
				<a-descriptions-item label="过磅重量" :span="2">{{ formData.netWeight +'吨'}}</a-descriptions-item>
				<a-descriptions-item label="提货开始时间" :span="2">{{ formData.confStartTime}}</a-descriptions-item>
				<a-descriptions-item label="提货结束时间" :span="2">{{ formData.confEndTime}}</a-descriptions-item>
				<a-descriptions-item label="签名" :span="4">
					<a-image v-if="formData.orderSign != null" :width="200" :src="formData.orderSign" />
				</a-descriptions-item>
				<a-descriptions-item label="结束备注" :span="4">{{ formData.endReason}}</a-descriptions-item>
				<a-descriptions-item label="审核备注" :span="4">{{ formData.orderReason}}</a-descriptions-item>
			</a-descriptions>
		</a-form>
	</xn-form-container>
</template>

<script setup name="recordDoubleForm">
	import { cloneDeep } from 'lodash-es'
	// 默认是关闭状态
	const visible = ref(false)
	const formData = ref({})
	const table = ref()
	const resultJson = ref()

	const labelStyle = {
		width: '20%'
	}
	const contentStyle = {
		width: '30%'
	}

	const labelCol4 = ref({span: 4, style: 'width: 26%; line-height: 20px; white-space: normal',})
	const labelCol8 = ref({span: 8, style: 'width: 26%; line-height: 20px; white-space: normal',})
	const wrapperCol20 = ref({span: 20})

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		//getRecordDoubleDetail(record)
		if(record){
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
		}

	}
	const getRecordDoubleDetail = (record) => {
		const param = {
			id: record.id
		}
		tbRecordDoubleApi.recordDoubleDetailPic(param).then((data) => {
			Object.assign(record, data)
			formData.value = record
		})
	}
	// 关闭抽屉
	const onClose = () => {
		resultJson.value = ''
		visible.value = false
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style scoped>
	.imgDiv ::v-deep .ant-image {
		margin-left: 20px;
		margin-top: 10px;
	}
	.imgDiv ::v-deep .ant-image-mask-info {
		margin-left: 20px;
		margin-top: 10px;
	}
</style>