hunanzeyunew/snowy-admin-web/src/views/biz/bizloadappoint/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-divider dashed style="border-color: gray">起卸预约</a-divider>
			<a-descriptions :column="4" size="middle" bordered class="mb-2" :label-style="labelStyle" :contentStyle="contentStyle">
				<a-descriptions-item label="预约单号" :span="2">{{ formData.loadNumber }}</a-descriptions-item>
				<a-descriptions-item label="订单类型" :span="2">
					<a-tag
						:color="
							formData.orderType === '1'
								? 'orange'
								: formData.orderType === '2'
								  ? 'green'
								  : 'purple'
						"
					>
						{{ $TOOL.dictTypeData('load_appoint_type', formData.orderType) }}
					</a-tag>
				</a-descriptions-item>
				<a-descriptions-item label="客户名称" :span="2">{{ formData.customerName }}</a-descriptions-item>
				<a-descriptions-item label="联系人" :span="2">{{ formData.customerContact }}</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.goodsCode }}</a-descriptions-item>
				<a-descriptions-item label="订单重量" :span="2">{{ formData.orderWeight +'吨'}}</a-descriptions-item>
				<a-descriptions-item label="单价" :span="2">{{ formData.orderPrice +'元/吨'}}</a-descriptions-item>
				<a-descriptions-item label="订单总额" :span="2">{{ formData.orderAmount +'元'}}</a-descriptions-item>
				<a-descriptions-item label="运费单价" :span="2">{{ formData.freightPrice +'元/吨'}}</a-descriptions-item>
				<a-descriptions-item label="订单状态" :span="2">
					<a-tag
						:color="
							formData.status === '1'
								? 'blue'
								: formData.status === '2'
								  ? 'warning'
								  : formData.status === '3'
								  ? 'processing'
								  : formData.status === '4'
								  ? 'volcano'
								  : formData.status === '5'
								  ? 'purple'
								  : formData.status === '6'
								  ? 'error'
								  : formData.status === '7'
								  ? 'red'
								  : '#f50'
						"
					>
						{{ $TOOL.dictTypeData('load_appoint_status', formData.status) }}
					</a-tag>
				</a-descriptions-item>
				<a-descriptions-item label="船运供应商" :span="2">{{ formData.supplierName}}</a-descriptions-item>
				<a-descriptions-item label="创建时间" :span="2">{{ formData.createTime}}</a-descriptions-item>
				<a-descriptions-item label="创建人" :span="2">{{ formData.createUserName}}</a-descriptions-item>

				<a-descriptions-item label="签名" :span="4">
					<a-image v-if="formData.customerSign != null" :width="200" :src="formData.customerSign" />
				</a-descriptions-item>
				<a-descriptions-item label="签名时间" :span="4">
					{{formData.signTime}}
				</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-divider dashed style="border-color: gray" >汽运供应商</a-divider>
			<a-table
				:dataSource="supplierDataSource"
				:columns="supplierDataColumns"
				:pagination="false"
				:bordered="true"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'status'">
						<a-tag :color="record.status === '1' ? 'green' : 'red'">{{
								$TOOL.dictTypeData('examine_status', record.status)
							}}</a-tag>
					</template>
				</template>
			</a-table>
		</a-form>
	</xn-form-container>
</template>

<script setup name="recordDoubleForm">
	import { cloneDeep } from 'lodash-es'
	import bizOrderSupplierApi from '@/api/biz/bizOrderSupplierApi'
	import bizLoadAppointSupplierApi from '@/api/biz/bizLoadAppointSupplierApi'

	// 默认是关闭状态
	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 supplierDataSource = ref([])

	const supplierDataColumns = [
		{
			title: '供应商名称',
			dataIndex: 'supplierName',
			align: 'center'
		},
		{
			title: '过磅重量(吨)',
			dataIndex: 'netWeight',
			align: 'center'
		},
		{
			title: '卸货重量(吨)',
			dataIndex: 'shippingWeight',
			align: 'center'
		},
	]

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

			bizLoadAppointSupplierApi.getList({appointId:formData.value.id}).then((res)=>{
				supplierDataSource.value = res
			})
		}

	}
	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>