hunanzeyunew/snowy-admin-web/src/views/biz/bizappointmentrecord/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.licenseNumber }}</a-descriptions-item>
				<a-descriptions-item label="车辆轴数" :span="2">{{ formData.axleNumber+'轴' }}</a-descriptions-item>
				<a-descriptions-item label="提货开始时间" :span="2">{{ formData.beginTime }}</a-descriptions-item>
				<a-descriptions-item label="提货结束时间" :span="2">{{formData.endTime }}</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.goodsName }}</a-descriptions-item>
				<a-descriptions-item label="货品编码" :span="2">{{ formData.goodsCode }}</a-descriptions-item>
				<a-descriptions-item label="司机姓名" :span="2">{{ formData.driverName }}</a-descriptions-item>
				<a-descriptions-item label="司机电话" :span="2">{{ formData.driverMobile }}</a-descriptions-item>
				<a-descriptions-item label="创建人" :span="2">{{ formData.createUserName }}</a-descriptions-item>
				<a-descriptions-item label="创建时间" :span="2">{{ formData.createTime }}</a-descriptions-item>

				<a-descriptions-item label="预约状态" :span="4">
					<a-tag
						:color="
							formData.status === '1'
								? 'volcano'
								: formData.status === '2'
								  ? 'red'
								  : formData.status === '3'
								  ? 'processing'
								  : formData.status === '4'
								  ? 'warning'
								  : formData.status === '5'
								  ? 'magenta'
								  : formData.status === '6'
								  ? 'orange'
								  : formData.status === '7'
								  ? 'gold'
								   : formData.status === '8'
								  ? 'lime'
								   : formData.status === '9'
								  ? 'green'
								  : formData.status === '10'
								  ? 'cyan'
								  : formData.status === '11'
								  ? 'success'
								  : formData.status === '12'
								  ? 'blue'
								  : formData.status === '13'
								  ? 'geekblue'
								  : 'error'
						"
					>
						{{ $TOOL.dictTypeData('appointment_status', formData.status) }}
					</a-tag>
				</a-descriptions-item>
				<a-descriptions-item label="审核备注" :span="4">{{ formData.appointmentReason }}</a-descriptions-item>
				<a-descriptions-item label="司机确认" :span="4">
					<a-image :width="200" :src="formData.driverSign" />
				</a-descriptions-item>
				<a-descriptions-item label="卸货重量（吨）" :span="4">{{ formData.unloadWeight }}</a-descriptions-item>
				<a-descriptions-item label="司机回签" :span="4">
					<div v-for="(item,index) in fileList " :key="item.value">
						<a-image :width="200" :src="item.url" />
					</div>
				</a-descriptions-item>
				<a-descriptions-item label="签收审核" :span="4" v-if="formData.auditSign!=null && formData.auditSign!=''">
					<a-image :width="200" :src="formData.auditSign" />
				</a-descriptions-item>
			</a-descriptions>
		</a-form>
	</xn-form-container>
</template>

<script setup name="recordDoubleForm">
	import { cloneDeep } from 'lodash-es'
	import sysConfig from "@/config";
	// 默认是关闭状态
	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 fileList = ref([])
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		//getRecordDoubleDetail(record)
		if(record){
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
			fileList.value = []
			if(formData.value.unloadImg!=null){
				for (var i=0;i<formData.value.unloadImg.split(',').length;i++){
					fileList.value.push({
						name: formData.value.unloadName.split(',')[i],
						url:sysConfig.PREVIEW_PATH + formData.value.unloadImg.split(',')[i]
					})
				}
			}
		}

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