From 977868dd0b770530133f7543df439d467749b28d Mon Sep 17 00:00:00 2001
From: sankeyangshu <1260323835@qq.com>
Date: Thu, 5 Dec 2024 16:30:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=94=B9=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Send/components/BoatInfoSend.vue    | 329 ++++++++++--------
 .../Send/components/ManifestDetailSend.vue    | 184 ++++++----
 src/views/Send/components/ManifestSend.vue    | 235 ++++++++-----
 src/views/Send/components/Send.vue            |   8 +-
 4 files changed, 465 insertions(+), 291 deletions(-)

diff --git a/src/views/Send/components/BoatInfoSend.vue b/src/views/Send/components/BoatInfoSend.vue
index d2a9b79..e5db6a6 100644
--- a/src/views/Send/components/BoatInfoSend.vue
+++ b/src/views/Send/components/BoatInfoSend.vue
@@ -1,128 +1,175 @@
 <template>
-  <el-form
-    class="form"
-    ref="ruleFormRef"
-    :inline="true"
-    label-width="auto"
-    :rules="formRules"
-    :model="boatForm"
-  >
-    <el-form-item label="企业" prop="enterpriseId">
-      <RemoteSelect
-        v-model:value="boatForm.enterpriseId"
-        placeholder="请选择企业"
-        :api="postEnterpriseListAPI"
-        style="width: 170px"
-      />
-    </el-form-item>
-    <el-form-item label="船名" prop="shipId">
-      <RemoteSelect
-        v-model:value="boatForm.shipId"
-        placeholder="请输入船名"
-        style="width: 170px"
-        :api="postShipListAPI"
-      />
-    </el-form-item>
-    <el-form-item label="航次" prop="voyage">
-      <el-input v-model="boatForm.voyage" placeholder="请输入航次" />
-    </el-form-item>
-    <el-form-item label="航线" prop="shipRouteId">
-      <RemoteSelect
-        v-model:value="boatForm.shipRouteId"
-        placeholder="请选择航线"
-        :api="postRouteListAPI"
-        style="width: 170px"
-      />
-    </el-form-item>
-    <el-form-item label="装货码头" prop="loadWharfId">
-      <RemoteSelect
-        v-model:value="boatForm.loadWharfId"
-        placeholder="请输入装货码头"
-        style="width: 170px"
-        :api="postWharfListAPI"
-      />
-    </el-form-item>
-    <el-form-item label="卸货码头" prop="dischargeWharfId">
-      <RemoteSelect
-        v-model:value="boatForm.dischargeWharfId"
-        placeholder="请输入装货码头"
-        style="width: 170px"
-        :api="postWharfListAPI"
-      />
-    </el-form-item>
+  <el-form class="form" ref="ruleFormRef" :rules="formRules" :model="boatForm">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="船名" prop="shipId">
+          <RemoteSelect
+            v-model:value="boatForm.shipId"
+            placeholder="请输入船名"
+            style="width: 170px"
+            :api="postShipListAPI"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="航次" prop="voyage">
+          <el-input v-model="boatForm.voyage" placeholder="请输入航次" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="航线" prop="shipRouteId">
+          <RemoteSelect
+            v-model:value="boatForm.shipRouteId"
+            placeholder="请选择航线"
+            :api="postRouteListAPI"
+            style="width: 170px"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
 
-    <el-form-item label="计划装载" required>
-      <el-col :span="6">
-        <el-form-item prop="carNumPlan" style="width: 100%">
-          <el-input v-model="boatForm.carNumPlan" placeholder="商品车数量" />
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="装货港口" prop="loadPortId">
+          <RemoteSelect
+            v-model:value="boatForm.loadPortId"
+            placeholder="请输入装货港口"
+            :api="postPortListAPI"
+            style="width: 170px"
+            :disabled="true"
+          />
         </el-form-item>
       </el-col>
-      <el-col :span="1" style="margin: 0 4px; text-align: center">/</el-col>
-      <el-col :span="6">
-        <el-form-item prop="spareNumPlan" style="width: 100%">
-          <el-input v-model="boatForm.spareNumPlan" placeholder="件杂货数量" />
+      <el-col :span="16">
+        <el-form-item label="卸货港口" prop="dischargePortId">
+          <RemoteSelect
+            v-model:value="boatForm.dischargePortId"
+            placeholder="请输入卸货港口"
+            :api="postPortListAPI"
+            style="width: 170px"
+          />
         </el-form-item>
       </el-col>
-    </el-form-item>
-    <el-form-item label="实际装载" required>
-      <el-col :span="6">
-        <el-form-item prop="carNumActual" style="width: 100%">
-          <el-input v-model="boatForm.carNumActual" placeholder="商品车数量" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="1" style="margin: 0 4px; text-align: center">/</el-col>
-      <el-col :span="6">
-        <el-form-item prop="spareNumActual" style="width: 100%">
-          <el-input v-model="boatForm.spareNumActual" placeholder="件杂货数量" />
-        </el-form-item>
-      </el-col>
-    </el-form-item>
+    </el-row>
 
-    <el-form-item label="计划离泊时间" prop="departureDatePlan">
-      <el-date-picker
-        v-model="boatForm.departureDatePlan"
-        type="datetime"
-        placeholder="请选择计划离泊时间"
-      />
-    </el-form-item>
-    <el-form-item label="实际离泊时间" prop="departureDateActual">
-      <el-date-picker
-        v-model="boatForm.departureDateActual"
-        type="datetime"
-        placeholder="请选择实际离泊时间"
-      />
-    </el-form-item>
-    <el-form-item label="船舶状态" prop="shipStatus">
-      <el-select v-model="boatForm.shipStatus" placeholder="请选择船舶状态" style="width: 200px">
-        <el-option label="有计划" value="有计划" />
-        <el-option label="已靠港" value="已靠港" />
-        <el-option label="作业中" value="作业中" />
-        <el-option label="已离港" value="已离港" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="贸易类型" prop="tradeType">
-      <el-select v-model="boatForm.tradeType" placeholder="请选择贸易类型" style="width: 200px">
-        <el-option label="外贸进口" value="外贸进口" />
-        <el-option label="外贸出口" value="外贸出口" />
-        <el-option label="内贸" value="内贸" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="装货港口" prop="loadPortId">
-      <RemoteSelect
-        v-model:value="boatForm.loadPortId"
-        placeholder="请输入装货港口"
-        :api="postPortListAPI"
-        style="width: 170px"
-      />
-    </el-form-item>
-    <el-form-item label="卸货港口" prop="dischargePortId">
-      <RemoteSelect
-        v-model:value="boatForm.dischargePortId"
-        placeholder="请输入卸货港口"
-        :api="postPortListAPI"
-        style="width: 170px"
-      />
-    </el-form-item>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="装货码头" prop="loadWharfId">
+          <RemoteSelect
+            v-model:value="boatForm.loadWharfId"
+            placeholder="请输入装货码头"
+            style="width: 170px"
+            :api="() => postWharfListAPI({ ref: boatForm.loadPortId })"
+            :disabled="!boatForm.loadPortId"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="16">
+        <el-form-item label="卸货码头" prop="dischargeWharfId">
+          <RemoteSelect
+            v-model:value="boatForm.dischargeWharfId"
+            placeholder="请输入装货码头"
+            style="width: 170px"
+            :api="() => postWharfListAPI({ ref: boatForm.dischargePortId })"
+            :disabled="!boatForm.dischargePortId"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="计划装载" required>
+          <div class="form-item">
+            <el-form-item prop="carNumPlan" style="width: 100%">
+              <el-input
+                v-model="boatForm.carNumPlan"
+                placeholder="商品车数量"
+                style="width: 100px"
+              />
+            </el-form-item>
+            <div style="margin: 0 10px; text-align: center">/</div>
+            <el-form-item prop="spareNumPlan" style="width: 100%">
+              <el-input
+                v-model="boatForm.spareNumPlan"
+                placeholder="件杂货数量"
+                style="width: 100px"
+              />
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <div class="form-item">
+          <el-form-item label="实际装载" required>
+            <el-form-item prop="carNumActual">
+              <el-input
+                v-model="boatForm.carNumActual"
+                placeholder="商品车数量"
+                style="width: 100px"
+              />
+            </el-form-item>
+            <div style="margin: 0 10px; text-align: center">/</div>
+            <el-form-item prop="spareNumActual">
+              <el-input
+                v-model="boatForm.spareNumActual"
+                placeholder="件杂货数量"
+                style="width: 100px"
+              />
+            </el-form-item>
+          </el-form-item>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="计划离港时间" prop="departureDatePlan">
+          <el-date-picker
+            v-model="boatForm.departureDatePlan"
+            type="datetime"
+            placeholder="请选择计划离港时间"
+            style="width: 170px"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="实际离港时间" prop="departureDateActual">
+          <el-date-picker
+            v-model="boatForm.departureDateActual"
+            type="datetime"
+            placeholder="请选择实际离港时间"
+            style="width: 170px"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="船舶状态" prop="shipStatus">
+          <el-select
+            v-model="boatForm.shipStatus"
+            placeholder="请选择船舶状态"
+            style="width: 170px"
+          >
+            <el-option label="有计划" value="有计划" />
+            <el-option label="已靠港" value="已靠港" />
+            <el-option label="作业中" value="作业中" />
+            <el-option label="已离港" value="已离港" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="贸易类型" prop="tradeType">
+          <el-select v-model="boatForm.tradeType" placeholder="请选择贸易类型" style="width: 170px">
+            <el-option label="外贸进口" value="外贸进口" />
+            <el-option label="外贸出口" value="外贸出口" />
+            <el-option label="内贸" value="内贸" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
 
     <div class="footer">
       <div class="footer-left">
@@ -138,25 +185,33 @@
 
 <script lang="ts" setup>
 import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
-import { reactive, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { reactive, ref, watch } from 'vue';
 import {
   getSailScheduleImportAPI,
   getSailScheduleSaveAPI,
   getSailScheduleTmpExportAPI,
 } from '@/api/Boat/info';
 import { postRouteListAPI } from '@/api/BoatRoute';
-import { postEnterpriseListAPI } from '@/api/Enterprise/company';
 import { postPortListAPI } from '@/api/Port';
 import { postShipListAPI } from '@/api/Ship';
 import { postWharfListAPI } from '@/api/Wharf';
 import ImportFile from '@/components/ImpordFile/index.vue';
 import RemoteSelect from '@/components/RemoteSelect/index.vue';
+import { useUserStore } from '@/store/modules/user';
 
+// 获取当前用户信息
+const userState = useUserStore();
+const { userInfo } = storeToRefs(userState);
+
+// 船期信息表单
 const boatForm = reactive({
-  enterpriseId: '',
+  enterpriseId: userInfo.value.enterpriseId,
   shipId: '',
   voyage: '',
   shipRouteId: '',
+  loadPortId: userInfo.value.portId,
+  dischargePortId: '',
   loadWharfId: '',
   dischargeWharfId: '',
   carNumPlan: '',
@@ -167,10 +222,19 @@ const boatForm = reactive({
   departureDateActual: '',
   shipStatus: '',
   tradeType: '',
-  loadPortId: '',
-  dischargePortId: '',
 });
 
+// 监听卸货港口变化
+watch(
+  () => boatForm.dischargePortId ?? '',
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      boatForm.dischargeWharfId = '';
+    }
+  }
+);
+
+// 表单校验规则
 const formRules = reactive<FormRules>({
   enterpriseId: [{ required: true, message: '请输入企业ID', trigger: 'blur' }],
   shipId: [{ required: true, message: '请输入船ID', trigger: 'blur' }],
@@ -193,11 +257,6 @@ const formRules = reactive<FormRules>({
 // 表单节点
 const ruleFormRef = ref<FormInstance>();
 
-// // 重置
-// const onResetForm = () => {
-//   ruleFormRef.value?.resetFields();
-// };
-
 // 下载模版
 const onClickDownload = () => {
   ElMessageBox.confirm(`你确定要下载模版吗?`, '温馨提示', {
@@ -246,7 +305,6 @@ const onClickUpload = () => {
 interface propsType {
   scheduleId: string;
   voyage: string;
-  loadPortId: string;
   dischargePortId: string;
 }
 
@@ -256,13 +314,6 @@ const emit = defineEmits<{
 
 // 提交
 const onClickConfirm = (formEl: FormInstance | undefined) => {
-  // TEST: 测试数据
-  // emit('updateBoatID', {
-  //   scheduleId: 'data',
-  //   voyage: 'boatForm.voyage',
-  //   loadPortId: 'boatForm.loadPortId',
-  //   dischargePortId: 'boatForm.dischargePortId',
-  // });
   if (!formEl) return;
   formEl.validate(async (valid) => {
     if (!valid) return;
@@ -270,7 +321,6 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
     emit('updateBoatID', {
       scheduleId: data,
       voyage: boatForm.voyage,
-      loadPortId: boatForm.loadPortId,
       dischargePortId: boatForm.dischargePortId,
     });
     ruleFormRef.value?.resetFields();
@@ -287,6 +337,10 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  .form-item {
+    display: flex;
+    flex-direction: row;
+  }
   .footer {
     box-sizing: border-box;
     display: flex;
@@ -294,6 +348,7 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
     justify-content: space-between;
     width: 100%;
     padding: 20px;
+    margin-top: 40px;
     .footer-left {
       display: flex;
       .btn-down {
diff --git a/src/views/Send/components/ManifestDetailSend.vue b/src/views/Send/components/ManifestDetailSend.vue
index 00cb39b..bf66a19 100644
--- a/src/views/Send/components/ManifestDetailSend.vue
+++ b/src/views/Send/components/ManifestDetailSend.vue
@@ -1,68 +1,119 @@
 <template>
-  <el-form
-    class="form"
-    ref="ruleFormRef"
-    :inline="true"
-    label-width="auto"
-    :rules="formRules"
-    :model="form"
-  >
-    <el-form-item label="提单号">
-      <el-input v-model="boatForm.billNo" disabled />
-    </el-form-item>
-    <el-form-item label="品牌">
-      <RemoteSelect
-        v-model:value="boatForm.brandId"
-        placeholder="请输入品牌"
-        :api="postBrandListAPI"
-        style="width: 170px"
-        disabled
-      />
-    </el-form-item>
-    <el-form-item label="型号">
-      <el-input v-model="boatForm.model" disabled />
-    </el-form-item>
+  <el-form class="form" ref="ruleFormRef" :rules="formRules" :model="form">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="提单号">
+          <el-input v-model="boatForm.billNo" disabled style="width: 170px" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="品牌">
+          <RemoteSelect
+            v-model:value="boatForm.brandId"
+            placeholder="请输入品牌"
+            :api="postBrandListAPI"
+            style="width: 170px"
+            disabled
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="型号">
+          <el-input v-model="boatForm.model" disabled style="width: 170px" />
+        </el-form-item>
+      </el-col>
+    </el-row>
 
-    <el-form-item label="车型" prop="vehicleTypeId">
-      <RemoteSelect
-        v-model:value="form.vehicleTypeId"
-        placeholder="请输入车型"
-        :api="postVehicleListAPI"
-        style="width: 170px"
-      />
-    </el-form-item>
-    <el-form-item label="车型明细" prop="vehicleTypeDetailId">
-      <RemoteSelect
-        v-model:value="form.vehicleTypeDetailId"
-        placeholder="请输入车型明细"
-        :api="postVehicleDetailListAPI"
-        style="width: 170px"
-      />
-    </el-form-item>
-    <el-form-item label="VIN" prop="vin">
-      <el-input v-model="form.vin" placeholder="请输入VIN" />
-    </el-form-item>
-    <el-form-item label="重量" prop="weight">
-      <el-input v-model="form.weight" placeholder="请输入重量" />
-    </el-form-item>
-    <el-form-item label="体积" prop="volume">
-      <el-input v-model="form.volume" placeholder="请输入体积" />
-    </el-form-item>
-    <el-form-item label="长" prop="length">
-      <el-input v-model="form.length" placeholder="请输入长" />
-    </el-form-item>
-    <el-form-item label="宽" prop="width">
-      <el-input v-model="form.width" placeholder="请输入宽" />
-    </el-form-item>
-    <el-form-item label="高" prop="height">
-      <el-input v-model="form.height" placeholder="请输入高" />
-    </el-form-item>
-    <el-form-item label="有无质损" prop="damage">
-      <el-input v-model="form.damage" placeholder="请输入有无质损" />
-    </el-form-item>
-    <el-form-item label="质损描述" prop="damageDesc">
-      <el-input v-model="form.damageDesc" placeholder="请输入质损描述" />
-    </el-form-item>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="车型" prop="vehicleTypeId">
+          <RemoteSelect
+            v-model:value="form.vehicleTypeId"
+            placeholder="请输入车型"
+            :api="postVehicleListAPI"
+            style="width: 170px"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="车型明细" prop="vehicleTypeDetailId">
+          <RemoteSelect
+            v-model:value="form.vehicleTypeDetailId"
+            placeholder="请输入车型明细"
+            :api="postVehicleDetailListAPI"
+            style="width: 170px"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="VIN" prop="vin">
+          <el-input v-model="form.vin" placeholder="请输入VIN" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="14">
+        <el-form-item label="重量(Kg) / 体积(m3)">
+          <div class="form-item">
+            <el-form-item prop="weight">
+              <el-input v-model="form.weight" placeholder="请输入重量" style="width: 100px" />
+            </el-form-item>
+            <div style="margin: 0 10px; text-align: center">/</div>
+            <el-form-item prop="volume">
+              <el-input v-model="form.volume" placeholder="请输入体积" style="width: 100px" />
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="长(mm)/ 宽(mm)/ 高(mm)">
+          <div class="form-item">
+            <el-form-item prop="length">
+              <el-input v-model="form.length" placeholder="长" style="width: 70px" />
+            </el-form-item>
+            <div style="margin: 0 5px; text-align: center"></div>
+            <el-form-item prop="width">
+              <el-input v-model="form.width" placeholder="宽" style="width: 70px" />
+            </el-form-item>
+            <div style="margin: 0 5px; text-align: center"></div>
+            <el-form-item prop="height">
+              <el-input v-model="form.height" placeholder="高" style="width: 70px" />
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="BAmm / LRmm">
+          <div class="form-item">
+            <el-form-item prop="bamm">
+              <el-input v-model="form.bamm" placeholder="BAmm" style="width: 70px" />
+            </el-form-item>
+            <div style="margin: 0 5px; text-align: center">/</div>
+            <el-form-item prop="lrmm">
+              <el-input v-model="form.lrmm" placeholder="LRmm" style="width: 70px" />
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="有无质损" prop="damage">
+          <el-input v-model="form.damage" placeholder="请输入有无质损" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="16">
+        <el-form-item label="质损描述" prop="damageDesc">
+          <el-input v-model="form.damageDesc" placeholder="请输入质损描述" style="width: 340px" />
+        </el-form-item>
+      </el-col>
+    </el-row>
 
     <div class="footer">
       <div class="footer-left">
@@ -122,6 +173,8 @@ const form = reactive({
   height: '',
   damage: '',
   damageDesc: '',
+  bamm: '',
+  lrmm: '',
 });
 
 const formRules = reactive<FormRules>({
@@ -227,6 +280,10 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  .form-item {
+    display: flex;
+    flex-direction: row;
+  }
   .footer {
     box-sizing: border-box;
     display: flex;
@@ -234,6 +291,7 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
     justify-content: space-between;
     width: 100%;
     padding: 20px;
+    margin-top: 40px;
     .footer-left {
       display: flex;
       .btn-down {
diff --git a/src/views/Send/components/ManifestSend.vue b/src/views/Send/components/ManifestSend.vue
index d73cea8..7153ea9 100644
--- a/src/views/Send/components/ManifestSend.vue
+++ b/src/views/Send/components/ManifestSend.vue
@@ -1,88 +1,123 @@
 <template>
-  <el-form
-    class="form"
-    ref="ruleFormRef"
-    :inline="true"
-    label-width="auto"
-    :rules="formRules"
-    :model="form"
-  >
-    <el-form-item label="船期" prop="scheduleId">
-      <RemoteSelect
-        v-model:value="boatForm.scheduleId"
-        placeholder="请输入船名"
-        style="width: 170px"
-        :api="postShipListAPI"
-        disabled
-      />
-    </el-form-item>
-    <el-form-item label="航次" prop="voyage">
-      <el-input v-model="boatForm.voyage" disabled />
-    </el-form-item>
-    <el-form-item label="装货港口" prop="loadPortId">
-      <RemoteSelect
-        v-model:value="boatForm.loadPortId"
-        placeholder="请输入卸货港口"
-        :api="postPortListAPI"
-        style="width: 170px"
-        disabled
-      />
-    </el-form-item>
-    <el-form-item label="卸货港口" prop="dischargePortId">
-      <RemoteSelect
-        v-model:value="boatForm.dischargePortId"
-        placeholder="请输入卸货港口"
-        :api="postPortListAPI"
-        style="width: 170px"
-        disabled
-      />
+  <el-form class="form" ref="ruleFormRef" :rules="formRules" :model="form">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="船名" prop="voyage">
+          <el-input v-model="boatForm.scheduleName" style="width: 170px" disabled />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="装货港" prop="loadPortId">
+          <RemoteSelect
+            v-model:value="boatForm.loadPortId"
+            placeholder="请输入卸货港"
+            :api="postPortListAPI"
+            style="width: 170px"
+            disabled
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="卸货港" prop="dischargePortId">
+          <RemoteSelect
+            v-model:value="boatForm.dischargePortId"
+            placeholder="请输入卸货港"
+            :api="postPortListAPI"
+            style="width: 170px"
+            disabled
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="舱层" prop="deck">
+          <el-input v-model="form.deck" placeholder="请输入舱层" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="舱段" prop="cabin">
+          <el-input v-model="form.cabin" placeholder="请输入舱段" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="提单号" prop="billNo">
+          <el-input v-model="form.billNo" placeholder="请输入提单号" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="货名" prop="goodsName">
+          <el-input v-model="form.goodsName" placeholder="请输入货名" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="品牌" prop="brandId">
+          <RemoteSelect
+            v-model:value="form.brandId"
+            placeholder="请选择品牌"
+            style="width: 170px"
+            :api="postBrandListAPI"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="型号" prop="model">
+          <el-input v-model="form.model" placeholder="请输入型号" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-form-item label="唛头" prop="shippingMark">
+      <el-input v-model="form.shippingMark" placeholder="请输入唛头" style="width: 170px" />
     </el-form-item>
 
-    <el-form-item label="舱层" prop="deck">
-      <el-input v-model="form.deck" placeholder="请输入舱层" />
-    </el-form-item>
-    <el-form-item label="舱段" prop="cabin">
-      <el-input v-model="form.cabin" placeholder="请输入舱段" />
-    </el-form-item>
-    <el-form-item label="提单号" prop="billNo">
-      <el-input v-model="form.billNo" placeholder="请输入提单号" />
-    </el-form-item>
-    <el-form-item label="货名" prop="goodsName">
-      <el-input v-model="form.goodsName" placeholder="请输入货名" />
-    </el-form-item>
-    <el-form-item label="品牌" prop="brandId">
-      <RemoteSelect
-        v-model:value="form.brandId"
-        placeholder="请选择品牌"
-        style="width: 170px"
-        :api="postBrandListAPI"
-      />
-    </el-form-item>
-    <el-form-item label="型号" prop="model">
-      <el-input v-model="form.model" placeholder="请输入型号" />
-    </el-form-item>
-    <el-form-item label="唛头" prop="shippingMark">
-      <el-input v-model="form.shippingMark" placeholder="请输入唛头" />
-    </el-form-item>
-    <el-form-item label="车数量" prop="carNum">
-      <el-input v-model="form.carNum" placeholder="请输入车数量" />
-    </el-form-item>
-    <el-form-item label="件杂货数" prop="spareNum">
-      <el-input v-model="form.spareNum" placeholder="请输入件杂货数" />
-    </el-form-item>
-    <el-form-item label="重量" prop="weight">
-      <el-input v-model="form.weight" placeholder="请输入重量" />
-    </el-form-item>
-    <el-form-item label="体积" prop="volume">
-      <el-input v-model="form.volume" placeholder="请输入体积" />
-    </el-form-item>
-    <el-form-item label="发货人" prop="consigner">
-      <el-input v-model="form.consigner" placeholder="请输入发货人" />
-    </el-form-item>
-    <el-form-item label="收货人" prop="consignee">
-      <el-input v-model="form.consignee" placeholder="请输入收货人" />
-    </el-form-item>
-    <el-form-item label="货物状态" prop="goodsStatus">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="商品车 / 件杂货" required>
+          <div class="form-item">
+            <el-form-item prop="carNum">
+              <el-input v-model="form.carNum" placeholder="数量" style="width: 70px" />
+            </el-form-item>
+            <div style="margin: 0 10px; text-align: center">/</div>
+            <el-form-item prop="spareNum">
+              <el-input v-model="form.spareNum" placeholder="数量" style="width: 70px" />
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="重量（Kg）" prop="weight">
+          <el-input v-model="form.weight" placeholder="请输入重量" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="体积（m3）" prop="volume">
+          <el-input v-model="form.volume" placeholder="请输入体积" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-form-item label="发货人" prop="consigner">
+          <el-input v-model="form.consigner" placeholder="请输入发货人" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="收货人" prop="consignee">
+          <el-input v-model="form.consignee" placeholder="请输入收货人" style="width: 170px" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-form-item label="状态" prop="goodsStatus">
       <el-select v-model="form.goodsStatus" placeholder="请选择货物状态" style="width: 170px">
         <el-option label="有计划" value="有计划" />
         <el-option label="已靠港" value="已靠港" />
@@ -108,18 +143,23 @@
 
 <script lang="ts" setup>
 import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
-import { reactive, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { onMounted, reactive, ref } from 'vue';
 import { postBrandListAPI } from '@/api/Brand';
 import { getManifestImportAPI, getManifestTmpExportAPI, postManifestSaveAPI } from '@/api/Manifest';
 import { postPortListAPI } from '@/api/Port';
-import { postShipListAPI } from '@/api/Ship';
+import { postShipGetAPI } from '@/api/Ship';
 import ImportFile from '@/components/ImpordFile/index.vue';
 import RemoteSelect from '@/components/RemoteSelect/index.vue';
+import { useUserStore } from '@/store/modules/user';
+
+// 获取当前用户信息
+const userState = useUserStore();
+const { userInfo } = storeToRefs(userState);
 
 interface propsType {
   scheduleId: string;
   voyage: string;
-  loadPortId: number | string;
   dischargePortId: number | string;
 }
 
@@ -127,11 +167,27 @@ interface propsType {
 const props = withDefaults(defineProps<propsType>(), {
   scheduleId: '',
   voyage: '',
-  loadPortId: '',
   dischargePortId: '',
 });
 
-const boatForm = ref<propsType>(props);
+const boatForm = ref({
+  scheduleName: '',
+  loadPortId: userInfo.value.portId,
+  dischargePortId: props.dischargePortId,
+});
+
+// 获取船舶信息
+const getScheduleInfo = async () => {
+  if (props.scheduleId) {
+    const { data } = await postShipGetAPI({ id: props.scheduleId });
+    boatForm.value.scheduleName = `${data.name} / ${props.voyage}`;
+  }
+};
+
+// 初始化船信息
+onMounted(async () => {
+  await getScheduleInfo();
+});
 
 const form = reactive({
   scheduleId: props.scheduleId,
@@ -265,6 +321,10 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  .form-item {
+    display: flex;
+    flex-direction: row;
+  }
   .footer {
     box-sizing: border-box;
     display: flex;
@@ -272,6 +332,7 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
     justify-content: space-between;
     width: 100%;
     padding: 20px;
+    margin-top: 40px;
     .footer-left {
       display: flex;
       .btn-down {
diff --git a/src/views/Send/components/Send.vue b/src/views/Send/components/Send.vue
index 1e3f29e..65f192c 100644
--- a/src/views/Send/components/Send.vue
+++ b/src/views/Send/components/Send.vue
@@ -17,7 +17,6 @@
         <ManifestSend
           :scheduleId="manifestProps?.scheduleId"
           :voyage="manifestProps?.voyage"
-          :loadPortId="manifestProps?.loadPortId"
           :dischargePortId="manifestProps?.dischargePortId"
           @updateBoatID="onUpdateManifest"
           v-if="currentActive === 2"
@@ -44,15 +43,16 @@ import ManifestSend from './ManifestSend.vue';
 const currentActive = ref(1);
 const currentTitle = ref(['发布船期信息', '发布舱单信息', '提交舱单明细']);
 
+// 舱单信息类型
 interface manifestPropsType {
   scheduleId: string;
   voyage: string;
-  loadPortId: number | string;
   dischargePortId: string | number;
 }
 
+// 舱单信息
 const manifestProps = ref<manifestPropsType>();
-// 发布船期信息
+// 发布船期信息-进入舱单信息
 const onUpdateBoatID = (params: manifestPropsType) => {
   manifestProps.value = params;
   currentActive.value = 2;
@@ -94,7 +94,7 @@ const onUpdateManifest = (params: manifestDetailPropsType) => {
       box-sizing: border-box;
       display: flex;
       flex-direction: row;
-      width: 30%;
+      width: 380px;
       height: 100%;
       padding: 40px 0 0 20px;
       background-color: #027db4;