feat(port): 添加港口管理和运输周期功能

- 创建港口信息管理页面，支持港口的增删改查操作
- 添加港口列表展示功能，包括港口编码、名称、状态等字段
- 实现港口是否在用状态的选择和显示逻辑
- 创建运输周期管理组件，支持始发港到目的港的运输周期设置
- 添加运输周期的陆运、海运、空运三种运输方式及周期天数
- 实现运输周期数据的批量上传和模板下载功能
- 添加港口运输周期的编辑和保存功能
- 优化港口列表界面布局，采用栅格系统改进表单样式

src/api/port/portInfo.js

@@ -5,4 +5,4 @@ export const searchPortList = data => createAPI('/portInfo/list', 'POST', data)
 export const createPort = data => createAPI('/portInfo/save', 'POST', data)
 export const updatePort = data => createAPI('/portInfo/save', 'POST', data)
 export const searchPortInfo = data => createAPI('portInfo/getPort','POST', data)
-export const deletePort = id => createAPI('/portInfo/delete', 'POST', { id: id })
+export const deletePort = data => createAPI('/portInfo/delete', 'POST', data)

src/api/port/portTransit.js

@@ -1,15 +1,10 @@
 import { createAPI } from '@/utils/httpRequest.js'
 
 //分页列表
-export const searchTransitPage = data => createAPI('/portTransit/page', 'POST', data)
+export const groupedList = data => createAPI('/portTransitCycle/groupedList', 'POST', data)
 // 查询列表（根据港口编码）
-export function getTransitList(data) { return request({ url: '/portTransit/list', method: 'post', data }) }
-// 新增
-export function createTransit(data) { return request({ url: '/portTransit/save', method: 'post', data }) }
+export const getTransitList = data => createAPI('/portTransitCycle/list', 'POST', data)
 // 更新
-export function updateTransit(data) { return request({ url: '/portTransit/save', method: 'post', data }) }
-// 删除
-export function deleteTransit(data) { return request({ url: '/portTransit/delete', method: 'delete', data }) }
-
+export const updateTransit = data => createAPI('/portTransitCycle/save', 'POST', data)
 // 查询运输选项列表
-export function searchTransportOptions(data) { return request({ url: '/portTransit/calculateArrivalTime', method: 'post', data }) }
+export const searchTransportOptions = data => createAPI('/portTransitCycle/calculateArrivalTime', 'POST', data)

src/views/modules/port/portInfo.vue

@@ -42,7 +42,12 @@
         :min-width="item.columnWidth"
         :label="item.columnLabel">
         <template slot-scope="scope">
-          <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
+          <span v-if="!item.columnHidden">
+            <span v-if="item.columnProp === 'active'">
+              {{ scope.row.active === true || scope.row.active === 'Y' ? '是' : (scope.row.active === false || scope.row.active === 'N' ? '否' : '-') }}
+            </span>
+            <span v-else>{{ scope.row[item.columnProp] }}</span>
+          </span>
         </template>
       </el-table-column>
       <!-- 操作列 -->
@@ -71,37 +76,53 @@
       layout="total, sizes, prev, pager, next, jumper">
     </el-pagination>
 
-    <!-- 运输周期标签页 -->
-    <el-tabs v-model="activeName" style="margin-top: 0px; width: 99%;" @tab-click="tabClick" class="customer-tab" type="border-card">
-      <el-tab-pane label="运输周期列表" name="transitList">
-        <transitList ref="subDataList" :height="tabHeight"></transitList>
-      </el-tab-pane>
-    </el-tabs>
+
 
     <!-- 港口新增/编辑弹出框 -->
-    <el-dialog 
-      :title="dialogTitle" 
-      :visible.sync="portDialogVisible" 
-      width="500px" 
-      top="3vh" 
-      :close-on-click-modal="false" 
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="portDialogVisible"
+      width="500px"
+      top="3vh"
+      :close-on-click-modal="false"
       class="part-dialog">
       <div class="dialog-content">
-        <el-form 
-          :model="portForm" 
-          :rules="portRules" 
-          ref="portForm" 
-          label-position="top" 
+        <el-form
+          :model="portForm"
+          :rules="portRules"
+          ref="portForm"
+          label-position="top"
           class="part-form">
-          <el-form-item label="港口编码" prop="portCode">
-            <el-input v-model="portForm.portCode" :disabled="dialogType === 'edit'" placeholder="请输入港口编码"></el-input>
-          </el-form-item>
-          <el-form-item label="港口名称" prop="portName">
-            <el-input v-model="portForm.portName" placeholder="请输入港口名称"></el-input>
-          </el-form-item>
-          <el-form-item label="备注" prop="remark">
-            <el-input v-model="portForm.remark" type="textarea" :rows="1" placeholder="请输入备注"></el-input>
-          </el-form-item>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="港口编码" prop="portCode">
+                <el-input v-model="portForm.portCode" :disabled="dialogType === 'edit'" placeholder="请输入港口编码"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="港口名称" prop="portName">
+                <el-input v-model="portForm.portName" placeholder="请输入港口名称"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="是否在用" prop="active">
+                <el-select v-model="portForm.active" placeholder="请选择" style="width: 100%">
+                  <el-option label="是" value="Y"></el-option>
+                  <el-option label="否" value="N"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+            <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="备注" prop="remark">
+                <el-input v-model="portForm.remark" type="textarea" :rows="1" placeholder="请输入备注"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
       </div>
       <div slot="footer" class="dialog-footer" style="margin-top: 20px; text-align: center;">
@@ -123,42 +144,34 @@ import {
   deletePort        // 删除港口
 } from '@/api/port/portInfo.js'
 
-// ============ 子组件导入 ============
-import transitList from './portTransit.vue'
-
 
 
 export default {
   name: 'PortManagement',
-  components: {
-    transitList
-  },
+  components: {},
   data() {
     return {
       // 布局高度
-      height: 200,
-      tabHeight: 300,
-      
+      height: 400,
+
       // 主列表加载状态
       dataListLoading: false,
       // 主列表数据
       mainDataList: [],
-      
+
       // 子列表加载状态
       subDataLoading: false,
       // 子列表数据（运输周期）
       subDataList: [],
-      
+
       // 分页参数
       pageIndex: 1,
       pageSize: 20,
       totalPage: 0,
-      
-      // 当前选中的标签页
-      activeName: 'transitList',
+
       // 当前选中的港口行
       currentRow: {},
-      
+
       // 查询条件
       searchData: {
         portCode: '',
@@ -166,17 +179,18 @@ export default {
         page: 1,
         limit: 20
       },
-      
+
       // 港口列表列配置
       columnArray1: [
         { columnProp: 'portCode', columnLabel: '港口编码', columnWidth: '120', headerAlign: 'center', align: 'center', fixed: false, columnHidden: false, columnSortable: false, showOverflowTooltip: true },
         { columnProp: 'portName', columnLabel: '港口名称', columnWidth: '180', headerAlign: 'center', align: 'center', fixed: false, columnHidden: false, columnSortable: false, showOverflowTooltip: true },
+        { columnProp: 'active', columnLabel: '是否在用', columnWidth: '100', headerAlign: 'center', align: 'center', fixed: false, columnHidden: false, columnSortable: false, showOverflowTooltip: true },
         { columnProp: 'remark', columnLabel: '备注', columnWidth: '200', headerAlign: 'center', align: 'left', fixed: false, columnHidden: false, columnSortable: false, showOverflowTooltip: true },
-        { columnProp: 'createdBy', columnLabel: '创建人', columnWidth: '100', headerAlign: 'center', align: 'center', fixed: false, columnHidden: false, columnSortable: false, showOverflowTooltip: true },
-        { columnProp: 'createdTime', columnLabel: '创建时间', columnWidth: '160', headerAlign: 'center', align: 'center', fixed: false, columnHidden: false, columnSortable: false, showOverflowTooltip: true }
+        { columnProp: 'createBy', columnLabel: '创建人', columnWidth: '100', headerAlign: 'center', align: 'center', fixed: false, columnHidden: false, columnSortable: false, showOverflowTooltip: true },
+        { columnProp: 'createDate', columnLabel: '创建时间', columnWidth: '160', headerAlign: 'center', align: 'center', fixed: false, columnHidden: false, columnSortable: false, showOverflowTooltip: true }
       ],
-      
-      
+
+
       // ========== 港口对话框相关 ==========
       portDialogVisible: false,
       dialogType: 'add', // add: 新增, edit: 编辑
@@ -184,13 +198,14 @@ export default {
       portForm: {
         portCode: '',
         portName: '',
+        active: 'Y',
         remark: ''
       },
       portRules: {
         portCode: [{ required: true, message: '请输入港口编码', trigger: 'blur' }],
         portName: [{ required: true, message: '请输入港口名称', trigger: 'blur' }]
       },
-      
+
       // ========== 运输周期对话框相关 ==========
       transitDialogVisible: false,
       transitDialogType: 'add', // add: 新增, edit: 编辑
@@ -225,15 +240,13 @@ export default {
   methods: {
     // 计算高度
     calcHeight() {
-      this.height = (window.innerHeight - 280) / 2
-      this.tabHeight = this.height - 50
+      this.height = window.innerHeight - 280
     },
-    
+
     handleResize() {
       this.calcHeight()
-      this.refreshCurrentSubTable()
     },
-    
+
     // 重置查询条件
     resetSearch() {
       this.searchData = {
@@ -244,21 +257,21 @@ export default {
       }
       this.getMainData()
     },
-    
+
     // ========== 港口主列表操作 ==========
     // 获取港口主列表数据
     getMainData() {
       this.dataListLoading = true
       this.searchData.limit = this.pageSize
       this.searchData.page = this.pageIndex
-      
+
       searchPortPage(this.searchData).then(({ data }) => {
         if (data.code === 0) {
           this.mainDataList = data.page.list || []
           this.pageIndex = data.page.currPage
           this.pageSize = data.page.pageSize
           this.totalPage = data.page.totalCount
-          
+
           if (this.mainDataList.length > 0) {
             this.$refs.mainTable.setCurrentRow(this.mainDataList[0])
             this.changeData(this.mainDataList[0])
@@ -273,26 +286,25 @@ export default {
         this.dataListLoading = false
       })
     },
-    
+
     // 分页大小改变
     sizeChangeHandle(val) {
       this.pageSize = val
       this.pageIndex = 1
       this.getMainData()
     },
-    
+
     // 当前页改变
     currentChangeHandle(val) {
       this.pageIndex = val
       this.getMainData()
     },
-    
+
     // 选中行改变
     changeData(row) {
       this.currentRow = row ? JSON.parse(JSON.stringify(row)) : { portCode: '' }
-      this.refreshCurrentSubTable()
     },
-    
+
     // 打开新增港口对话框
     openAddDialog() {
       this.dialogType = 'add'
@@ -301,6 +313,7 @@ export default {
         createBy: this.$store.state.user.name,
         portCode: '',
         portName: '',
+        active: 'Y',
         remark: ''
       }
       this.portDialogVisible = true
@@ -310,7 +323,7 @@ export default {
         }
       })
     },
-    
+
     // 打开编辑港口对话框
     openEditDialog(row) {
       this.dialogType = 'edit'
@@ -318,6 +331,7 @@ export default {
       this.portForm = {
         portCode: row.portCode,
         portName: row.portName,
+        active: row.active || 'Y',
         remark: row.remark || ''
       }
       this.portDialogVisible = true
@@ -327,7 +341,7 @@ export default {
         }
       })
     },
-    
+
     // 提交港口表单
     submitPort() {
       this.$refs.portForm.validate((valid) => {
@@ -349,10 +363,10 @@ export default {
         }
       })
     },
-    
+
     // 删除港口
     deletePort(row) {
-      this.$confirm(`确定删除港口 "${row.portCode} - ${row.portName}" 吗？删除后该港口的运输周期数据也会被删除。`, '提示', {
+      this.$confirm(`确定删除港口 "${row.portCode} - ${row.portName}" 吗？`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -368,30 +382,6 @@ export default {
           this.$message.error('删除失败: ' + error.message)
         })
       }).catch(() => {})
-    },
-    
-    // ========== 运输周期子列表操作 ==========
-    // 刷新当前子表（运输周期列表）
-    refreshCurrentSubTable() {
-      if (this.activeName === 'transitList') {
-        this.getTransitList()
-      }
-    },
-    
-    // 获取运输周期列表
-    getTransitList(){
-      let inData = {
-          site: this.currentRow.site,
-          portId: this.currentRow.id,
-          portCode: this.currentRow.portCode,
-          height: this.tabHeight
-      }
-       this.$refs.subDataList.init(inData)
-    },
- 
-    // 标签页切换
-    tabClick() {
-      this.refreshCurrentSubTable()
     }
   }
 }
@@ -405,4 +395,4 @@ export default {
     color: #F56C6C;
   }
 }
-</style>
+</style>

src/views/modules/port/portTransit.vue

@@ -9,13 +9,13 @@
       </el-form-item>
       <el-form-item label=" ">
         <el-button type="primary" @click="searchTable()">查询</el-button>
-        <el-button type="primary" @click="addModal()" v-if="shouldShowButton">新增</el-button>
+        <el-button type="primary" @click="exportModal()" v-if="shouldShowButton">导入</el-button>
       </el-form-item>
     </el-form>
 
     <el-table
       :data="dataList"
-      :height="searchData.height"
+      :height="tableHeight"
       border
       v-loading="dataListLoading"
       style="width: 100%;">
@@ -37,57 +37,164 @@
       <el-table-column
         header-align="center"
         align="center"
-        width="180"
+        width="100"
         fixed="right"
-        label="Actions">
+        label="操作">
         <template slot-scope="scope">
-          <a type="text" size="small" @click="editModel(scope.row)">Edit |</a>
-          <a type="text" size="small" @click="deleteData(scope.row)"> Delete</a>
+          <el-link type="primary" @click="editModel(scope.row)">编辑</el-link>
         </template>
       </el-table-column>
     </el-table>
 
-    <!-- 新增/编辑弹窗 -->
-    <el-dialog :title="dialogTitle" :close-on-click-modal="false" v-drag :visible.sync="dialogVisible" width="600px">
+    <!-- 编辑弹窗 -->
+    <el-dialog
+      :title="dialogTitle"
+      v-drag
+      :visible.sync="dialogVisible"
+      width="500px"
+      top="3vh"
+      :close-on-click-modal="false"
+      class="custom-dialog"
+    >
       <div class="dialog-content">
-        <el-form label-position="top" :model="formData" :rules="formRules" ref="formRef">
+
+        <!-- 表单 -->
+        <el-form
+          label-position="top"
+          :model="formData"
+          :rules="formRules"
+          ref="formRef"
+          class="form-area"
+        >
           <el-row :gutter="20">
             <el-col :span="12">
-              <el-form-item label="始发港" prop="departure">
-                <el-input v-model="formData.departure" placeholder="请输入始发港"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="目的港" prop="destination">
-                <el-input v-model="formData.destination" placeholder="请输入目的港"></el-input>
+              <el-form-item label="始发港名称" prop="departureName">
+                <el-input v-model="formData.departureName" disabled></el-input>
               </el-form-item>
             </el-col>
-          </el-row>
-          <el-row :gutter="20">
             <el-col :span="12">
-              <el-form-item label="停留天数" prop="transitDays">
-                <el-input v-model="formData.transitDays" type="number" placeholder="请输入停留天数"></el-input>
+              <el-form-item label="目的港名称" prop="destinationName">
+                <el-input v-model="formData.destinationName" disabled></el-input>
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
+
+        <!-- 表格区域（关键：撑满） -->
+        <div class="table-area">
+          <div class="table-title">运输周期</div>
+
+          <el-table
+            :data="transportList"
+            border
+            style="width: 100%"
+            height="100%"
+          >
+            <el-table-column
+              prop="shipMethod"
+              label="运输方式"
+              align="center"
+              width="150"
+            >
+              <template slot-scope="scope">
+                <span>{{ scope.row.shipMethod }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              prop="transitDays"
+              label="周期(天)"
+              align="center"
+            >
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.transitDays"
+                  placeholder="请输入天数"
+                  class="centered-input"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
       </div>
-      <div slot="footer" class="dialog-footer" style="margin-top: 20px">
+
+      <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitData()">保存</el-button>
         <el-button @click="dialogVisible = false">取消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="港口运输周期数据上传" :visible.sync="uploadDialogVisible" width="800px">
+      <!-- 选择文件 -->
+      <div style="margin-bottom:15px;display:flex;align-items:center">
+        <span style="margin-right:10px">请选择文件</span>
+        <el-input v-model="uploadFileName" style="width:400px;margin-right:10px" readonly></el-input>
+        <el-upload ref="upload" action="/api/portTransitCycle/upload"
+                   :show-file-list="false" :on-change="handleFileChange"
+                   :auto-upload="false">
+          <el-button type="primary">选择文件</el-button>
+        </el-upload>
+        <el-button type="success" style="margin-left:10px" @click="previewUpload">上传</el-button>
+        <el-button type="primary" @click="downloadTemplate" style="margin-left:10px">
+          <i class="el-icon-download"></i> 下载模板
+        </el-button>
+      </div>
+      <!-- 预览表格 -->
+      <el-table
+        :data="uploadPreviewList"
+        border
+        height="250"
+        style="width:100%;margin-top:10px"
+      >
+        <el-table-column
+          prop="departure"
+          label="始发港ID"
+          align="center"
+          width="155">
+        </el-table-column>
+        <el-table-column
+          prop="destination"
+          label="目的港ID"
+          align="center"
+          width="160">
+        </el-table-column>
+        <el-table-column
+          prop="luyun"
+          label="陆运周期"
+          align="center"
+          width="150">
+        </el-table-column>
+
+        <el-table-column
+          prop="haiyun"
+          label="海运周期"
+          align="center"
+          width="150">
+        </el-table-column>
+
+        <el-table-column
+          prop="kongyun"
+          label="空运周期"
+          align="center"
+          width="160">
+        </el-table-column>
+
+      </el-table>
+      <!-- 按钮 -->
+      <div style="margin-top:20px;text-align:center">
+        <el-button type="primary" @click="confirmUpload">保存</el-button>
+        <el-button @click="uploadDialogVisible=false" style="margin-right:30px">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 // 请根据实际API路径调整导入
 import {
-  searchTransitPage, // 分页查询运输周期列表（如果需要分页）
-  searchTransitList,   // 查询运输周期列表
-  createTransit,    // 新增运输周期
-  updateTransit,    // 更新运输周期
-  deleteTransit     // 删除运输周期
+  groupedList, // 分页查询运输周期列表
+  updateTransit    // 更新运输周期
 } from '@/api/port/portTransit.js'
 
 export default {
@@ -96,12 +203,12 @@ export default {
     return {
       dataList: [],
       dataListLoading: false,
+      tableHeight: 400, // 表格高度
       searchData: {
         departure: '',
         destination: '',
         portId: '',
-        portCode: '', 
-        height: '200',
+        portCode: '',
         page: 1,
         limit: 1000
       },
@@ -110,18 +217,33 @@ export default {
       formData: {
         id: '',
         departure: '',
+        departureName: '',
         destination: '',
-        transitDays: ''
+        destinationName: ''
       },
+      // 运输周期列表
+      transportList: [
+        { shipMethod: '陆运', transitDays: 0 },
+        { shipMethod: '海运', transitDays: 0 },
+        { shipMethod: '空运', transitDays: 0 }
+      ],
       formRules: {
-        departure: [{ required: true, message: '请输入始发港', trigger: 'blur' }],
-        destination: [{ required: true, message: '请输入目的港', trigger: 'blur' }],
-        transitDays: [{ required: true, message: '请输入停留天数', trigger: 'blur' }]
+        departureName: [{ required: true, message: '请输入始发港名称', trigger: 'blur' }],
+        destinationName: [{ required: true, message: '请输入目的港名称', trigger: 'blur' }]
       },
+      // 上传相关
+      uploadDialogVisible: false,
+      uploadFileName: '',
+      uploadFile: null,
+      uploadPreviewList: [],
       columnList: [
-        { columnProp: 'departure', headerAlign: 'center', align: 'left', columnLabel: '始发港', columnWidth: 150, fixed: '', columnHidden: false, columnSortable: false },
-        { columnProp: 'destination', headerAlign: 'center', align: 'left', columnLabel: '目的港', columnWidth: 150, fixed: '', columnHidden: false, columnSortable: false },
-        { columnProp: 'transitDays', headerAlign: 'center', align: 'center', columnLabel: '停留天数', columnWidth: 120, fixed: '', columnHidden: false, columnSortable: true }
+        { columnProp: 'departure', headerAlign: 'center', align: 'left', columnLabel: '始发港ID', columnWidth: 120, fixed: '', columnHidden: false, columnSortable: false },
+        { columnProp: 'departureName', headerAlign: 'center', align: 'left', columnLabel: '始发港', columnWidth: 150, fixed: '', columnHidden: false, columnSortable: false },
+        { columnProp: 'destination', headerAlign: 'center', align: 'left', columnLabel: '目的港口ID', columnWidth: 120, fixed: '', columnHidden: false, columnSortable: false },
+        { columnProp: 'destinationName', headerAlign: 'center', align: 'left', columnLabel: '目的港口名称', columnWidth: 150, fixed: '', columnHidden: false, columnSortable: false },
+        { columnProp: 'luyun', headerAlign: 'center', align: 'center', columnLabel: '陆运周期', columnWidth: 100, fixed: '', columnHidden: false, columnSortable: true },
+        { columnProp: 'haiyun', headerAlign: 'center', align: 'center', columnLabel: '海运周期', columnWidth: 100, fixed: '', columnHidden: false, columnSortable: true },
+        { columnProp: 'kongyun', headerAlign: 'center', align: 'center', columnLabel: '空运周期', columnWidth: 100, fixed: '', columnHidden: false, columnSortable: true }
       ]
     }
   },
@@ -130,7 +252,28 @@ export default {
       return true
     }
   },
+  created() {
+    this.$nextTick(() => {
+      this.calcHeight()
+    })
+    // 页面加载时自动查询数据
+    this.searchTable()
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
+    // 计算表格高度
+    calcHeight() {
+      this.tableHeight = window.innerHeight - 200
+    },
+    // 窗口大小改变时重新计算高度
+    handleResize() {
+      this.calcHeight()
+    },
     // 初始化方法，供父组件调用
     init(inData) {
       if (inData) {
@@ -141,9 +284,10 @@ export default {
     // 查询列表
     searchTable() {
       this.dataListLoading = true
-      searchTransitPage(this.searchData).then(({ data }) => {
+      groupedList(this.searchData).then(({ data }) => {
         if (data && data.code === 0) {
-          this.dataList = data.rows
+          // 直接使用后端返回的数据
+          this.dataList = data.rows || []
         } else {
           this.dataList = []
         }
@@ -159,9 +303,16 @@ export default {
         id: '',
         portId: this.searchData.portId || '',
         departure: '',
+        departureName: '',
         destination: '',
-        transitDays: ''
+        destinationName: ''
       }
+      // 重置运输周期列表
+      this.transportList = [
+        { shipMethod: '陆运', transitDays: 0 },
+        { shipMethod: '海运', transitDays: 0 },
+        { shipMethod: '空运', transitDays: 0 }
+      ]
       this.dialogVisible = true
       this.$nextTick(() => {
         if (this.$refs.formRef) {
@@ -172,65 +323,254 @@ export default {
     // 编辑
     editModel(row) {
       this.dialogTitle = '编辑港口运输周期'
-      this.formData = JSON.parse(JSON.stringify(row))
-      this.dialogVisible = true
-      this.$nextTick(() => {
-        if (this.$refs.formRef) {
-          this.$refs.formRef.clearValidate()
+
+      this.formData = {
+        departure: row.departure,
+        departureName: row.departureName,
+        destination: row.destination,
+        destinationName: row.destinationName
+      }
+      this.$http({
+        url: this.$http.adornUrl('/portTransitCycle/getDetail'),
+        method: 'post',
+        params: {
+          departure: row.departure,
+          destination: row.destination
+        }
+      }).then(({ data }) => {
+        if (data.code === 0) {
+          this.transportList = data.data || []
+        } else {
+          this.transportList = []
         }
       })
+
+      this.dialogVisible = true
     },
     // 提交保存
     submitData() {
       this.$refs.formRef.validate((valid) => {
         if (!valid) return
-        
-        const api = this.formData.id ? updateTransit : createTransit
-        api(this.formData).then(({ data }) => {
-          if (data && data.code === 0) {
-            this.$message.success(data.msg || '保存成功')
+
+        // 转换成后端需要的结构
+        const result = {
+          departure: this.formData.departure,
+          destination: this.formData.destination,
+          luyun: null,
+          haiyun: null,
+          kongyun: null
+        }
+
+        this.transportList.forEach(item => {
+          if (item.transitDays === null || item.transitDays === '') return
+
+          if (item.shipMethod === '陆运') {
+            result.luyun = Number(item.transitDays)
+          } else if (item.shipMethod === '海运') {
+            result.haiyun = Number(item.transitDays)
+          } else if (item.shipMethod === '空运') {
+            result.kongyun = Number(item.transitDays)
+          }
+        })
+
+        this.$http({
+          url: this.$http.adornUrl('/portTransitCycle/save'),
+          method: 'post',
+          data: result
+        }).then(({ data }) => {
+          if (data.code === 0) {
+            this.$message.success('保存成功')
             this.dialogVisible = false
             this.searchTable()
           } else {
-            this.$message.warning(data.msg || '保存失败')
+            this.$message.error(data.msg || '保存失败')
           }
-        }).catch(() => {
-          this.$message.error('保存失败')
         })
       })
     },
-    // 删除
-    deleteData(row) {
-      this.$confirm('确认删除该条港口运输周期记录吗？', '提示', {
-        confirmButtonText: '确认',
+
+    // ========== 上传功能 ==========
+    // 打开上传弹窗
+    exportModal() {
+      this.uploadDialogVisible = true
+      this.uploadFileName = ''
+      this.uploadFile = null
+      this.uploadPreviewList = []
+    },
+    // 文件选择变化
+    handleFileChange(file) {
+      this.uploadFile = file.raw
+      this.uploadFileName = file.name
+    },
+    // 预览上传数据
+    previewUpload() {
+      if (!this.uploadFile) {
+        this.$message.warning('请先选择文件')
+        return
+      }
+
+      const formData = new FormData()
+      formData.append('file', this.uploadFile)
+
+      // 调用后端预览接口
+      this.$http({
+        url: this.$http.adornUrl('/portTransitCycle/previewUpload'),
+        method: 'post',
+        data: formData
+        // 注意：不要手动设置 Content-Type，让 axios 自动处理 boundary
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.uploadPreviewList = data.data || []
+          this.$message.success('文件解析成功，请确认数据后点击保存')
+        } else {
+          this.$message.error(data.msg || '文件解析失败')
+        }
+      }).catch((error) => {
+        console.error('文件解析失败:', error)
+        const errorMsg = (error.response && error.response.data && error.response.data.msg) || error.message || '未知错误'
+        this.$message.error('文件解析失败: ' + errorMsg)
+      })
+    },
+    // 确认上传
+    confirmUpload() {
+      if (this.uploadPreviewList.length === 0) {
+        this.$message.warning('没有可保存的数据')
+        return
+      }
+
+      this.$confirm(`确认保存 ${this.uploadPreviewList.length} 条数据吗？`, '提示', {
+        confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        deleteTransit(row.id).then(({ data }) => {
-          if (data.code === 0) {
-            this.$message.success('删除成功')
+        const formData = new FormData()
+        formData.append('file', this.uploadFile)
+
+        // 调用后端保存接口
+        this.$http({
+          url: this.$http.adornUrl('/portTransitCycle/batchSave'),
+          method: 'post',
+          data: formData
+          // 注意：不要手动设置 Content-Type，让 axios 自动处理 boundary
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message.success('数据保存成功')
+            this.uploadDialogVisible = false
             this.searchTable()
           } else {
-            this.$message.warning(data.msg || '删除失败')
+            this.$message.error(data.msg || '数据保存失败')
           }
-        }).catch(() => {
-          this.$message.error('删除失败')
+        }).catch((error) => {
+          console.error('数据保存失败:', error)
+          const errorMsg = (error.response && error.response.data && error.response.data.msg) || error.message || '未知错误'
+          this.$message.error('数据保存失败: ' + errorMsg)
         })
       }).catch(() => {})
+    },
+    // 下载模板
+    downloadTemplate() {
+      const loading = this.$loading({
+        lock: true,
+        text: '正在下载模板...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      this.$http({
+        url: this.$http.adornUrl('/portTransitCycle/downloadTemplate'),
+        method: 'get',
+        responseType: 'blob'
+      }).then(response => {
+        loading.close()
+
+        // 创建下载文件
+        const blob = new Blob([response.data], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        })
+
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = '港口运输周期模板.xlsx'
+
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+
+        window.URL.revokeObjectURL(url)
+
+        this.$message.success('模板下载成功')
+      }).catch(error => {
+        loading.close()
+        console.error('模板下载失败:', error)
+        this.$message.error('模板下载失败，请联系管理员')
+      })
     }
+
   }
 }
 </script>
 
-<style scoped lang="scss">
-.dialog-content {
+<style scoped lang="scss">/* 表格行高 */
+::v-deep .el-table__row {
+  height: 60px !important;
+}
+
+/* 单元格内边距 */
+::v-deep .el-table td {
+  padding: 8px 0;
+  vertical-align: middle;
+}
+
+/* input 样式 */
+::v-deep .el-input__inner {
+  height: 36px !important;
+  line-height: 36px !important;
+}
+
+/* 去掉错误居中方式 */
+.centered-input {
   width: 100%;
-  max-height: 60vh;
-  overflow-y: auto;
-  padding-right: 10px;
+}
+/* 整个弹窗拉高 */
+::v-deep .upload-dialog .el-dialog {
+  height: 90vh;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* body变成flex */
+::v-deep .upload-dialog .el-dialog__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 总容器 */
+.upload-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部区域固定 */
+.upload-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+/* 表格区域自动撑满 */
+.upload-table {
+  flex: 1;
+  overflow: hidden;
 }
 
-.customer-css {
-  padding: 10px;
+/* 表格填满 */
+.upload-table .el-table {
+  height: 100%;
 }
-</style>
+</style>