From caef8c12a7fc2d49eb92b27a03326fcdafd2004a Mon Sep 17 00:00:00 2001 From: qiankanghui Date: Tue, 28 Apr 2026 10:24:54 +0800 Subject: [PATCH] =?UTF-8?q?feat(port):=20=E6=B7=BB=E5=8A=A0=E6=B8=AF?= =?UTF-8?q?=E5=8F=A3=E7=AE=A1=E7=90=86=E5=92=8C=E8=BF=90=E8=BE=93=E5=91=A8?= =?UTF-8?q?=E6=9C=9F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 创建港口信息管理页面，支持港口的增删改查操作 - 添加港口列表展示功能，包括港口编码、名称、状态等字段 - 实现港口是否在用状态的选择和显示逻辑 - 创建运输周期管理组件，支持始发港到目的港的运输周期设置 - 添加运输周期的陆运、海运、空运三种运输方式及周期天数 - 实现运输周期数据的批量上传和模板下载功能 - 添加港口运输周期的编辑和保存功能 - 优化港口列表界面布局，采用栅格系统改进表单样式 --- src/api/port/portInfo.js | 2 +- src/api/port/portTransit.js | 13 +- src/views/modules/port/portInfo.vue | 170 +++++---- src/views/modules/port/portTransit.vue | 478 +++++++++++++++++++++---- 4 files changed, 494 insertions(+), 169 deletions(-) diff --git a/src/api/port/portInfo.js b/src/api/port/portInfo.js index 7dc8978..47d5ab9 100644 --- a/src/api/port/portInfo.js +++ b/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) diff --git a/src/api/port/portTransit.js b/src/api/port/portTransit.js index 918c2cb..f3a84fa 100644 --- a/src/api/port/portTransit.js +++ b/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 }) } \ No newline at end of file +export const searchTransportOptions = data => createAPI('/portTransitCycle/calculateArrivalTime', 'POST', data) diff --git a/src/views/modules/port/portInfo.vue b/src/views/modules/port/portInfo.vue index 020e3dc..1dfe729 100644 --- a/src/views/modules/port/portInfo.vue +++ b/src/views/modules/port/portInfo.vue @@ -42,7 +42,12 @@ :min-width="item.columnWidth" :label="item.columnLabel"> @@ -71,37 +76,53 @@ layout="total, sizes, prev, pager, next, jumper"> - - - - - - + -
- - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -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; } } - \ No newline at end of file + diff --git a/src/views/modules/port/portTransit.vue b/src/views/modules/port/portTransit.vue index 956e8da..a4a240a 100644 --- a/src/views/modules/port/portTransit.vue +++ b/src/views/modules/port/portTransit.vue @@ -9,13 +9,13 @@ 查询 - 新增 + 导入 @@ -37,57 +37,164 @@ + label="操作"> - - + +
- + + + - - - - - - - + + - - - - + + + + +
+
运输周期
+ + + + + + + + + + +
+
-
+ +
保存 取消
+ + + +
+ 请选择文件 + + + 选择文件 + + 上传 + + 下载模板 + +
+ + + + + + + + + + + + + + + + + +
+ 保存 + 关闭 +
+
- \ No newline at end of file +