<template>
	<div class="delivery-form">
	  <!-- 表格容器 -->
	  <table border="1" cellpadding="5" cellspacing="0" style="width: 90%; margin: 20px auto; border-collapse: collapse; font-size: 14px;">
		<!-- 标题行 -->
		<tr>
		  <td colspan="6" style="text-align: center; font-weight: bold; font-size: 18px;">
			国网唐山供电公司贾庵子仓库货物配送单
		  </td>
		</tr>
  
		<!-- 配送项目名称 & 项目编号 -->
		<tr>
		  <td rowspan="2" style="width: 150px;">配送项目名称</td>
		  <td colspan="3">冀北唐山路南区10kV广鑫环网柜等6座环网柜配电自动化改造工程</td>
		  <td rowspan="2">项目编号</td>
		  <td rowspan="2">I801032401LD</td>
		</tr>
		<tr>
		  <td colspan="3"></td>
		</tr>
  
		<!-- 配送地址 -->
		<tr>
		  <td>配送地址</td>
		  <td colspan="3">唐山市路南区女织寨赵田庄村民源电气</td>
		  <td>配送日期</td>
		  <td>2025年12月2日</td>
		</tr>
  
		<!-- 配送车号 -->
		<tr>
		  <td>配送车号</td>
		  <td colspan="3">冀B1947L</td>
		  <td>司机签名</td>
		  <td></td>
		</tr>
  
		<!-- 接收单位 -->
		<tr>
		  <td>接收单位</td>
		  <td colspan="3">路南供电中心</td>
		  <td>配送吨数</td>
		  <td>孟利红</td>
		</tr>
  
		<!-- 发货人联系方式 -->
		<tr>
		  <td colspan="3">发货人联系方式姓名：林生/15531558587</td>
		  <td colspan="2">制单</td>
		  <td></td>
		</tr>
  
		<!-- 接收人联系 -->
		<tr>
		  <td colspan="3">接收人联系方式姓名：王小强/18733306661</td>
		  <td colspan="2">出库复核</td>
		  <td></td>
		</tr>
  
		<!-- 物资明细表 -->
		<tr>
		  <td>序号</td>
		  <td>物料编码</td>
		  <td>物资名称</td>
		  <td>数量</td>
		  <td>单位</td>
		  <td>订单号</td>
		  <td>供应商名称</td>
		  <td>备注</td>
		</tr>
  
		<!-- 数据行 1 -->
		<tr>
		  <td>1</td>
		  <td>500138342</td>
		  <td>二次融合成套环网箱,AC10kV,630A,固体,二进四出</td>
		  <td>1</td>
		  <td>套</td>
		  <td>101378434</td>
		  <td>宁波奥克斯智能科技股份有限公司</td>
		  <td>ID：169736945</td>
		</tr>
  
		<!-- 数据行 2 -->
		<tr>
		  <td>2</td>
		  <td>500138342</td>
		  <td>二次融合成套环网箱,AC10kV,630A,固体,二进四出</td>
		  <td>1</td>
		  <td>套</td>
		  <td>101378434</td>
		  <td>宁波奥克斯智能科技股份有限公司</td>
		  <td>ID：169736952</td>
		</tr>
  
		<!-- 接收物资状态 -->
		<tr>
		  <td>接收物资状态</td>
		  <td colspan="7">
			<label><input type="radio" name="status" checked /> 数量齐全、状态完好</label>
			<label><input type="radio" name="status" /> 存在问题：</label>
			<input type="text" style="width: 100%;" />
		  </td>
		</tr>
  
		<!-- 接收人确认 -->
		<tr>
		  <td>接收人确认</td>
		  <td colspan="7">
			签字：<br /><br />
			日期：<br />
			<input type="text" placeholder="年" style="width: 50px;" /> 年
			<input type="text" placeholder="月" style="width: 50px;" /> 月
			<input type="text" placeholder="日" style="width: 50px;" /> 日
		  </td>
		</tr>
	  </table>
	</div>
  </template>
  
  <script setup>
  // 可以从父组件传入数据，如：props
  // import { ref } from 'vue'
  // const props = defineProps({
  //   deliveryData: Object
  // })
  </script>
  
  <style scoped>
  .delivery-form {
	font-family: "SimSun", "宋体", sans-serif;
	background-color: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
  table {
	border: 1px solid black;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
  }
  
  td {
	border: 1px solid black;
	padding: 5px;
	text-align: left;
	vertical-align: top;
  }
  
  td:first-child {
	width: 120px;
  }
  
  /* 表格标题居中 */
  table tr:first-child td {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
  }
  
  /* 修正列宽和换行 */
  td:nth-child(3) {
	width: 250px;
  }
  
  /* 调整输入框样式 */
  input[type="text"] {
	border: 1px solid #ccc;
	padding: 2px;
	font-size: 14px;
  }
  </style>