qiankanghui
1 month ago
8 changed files with 1013 additions and 186 deletions
-
11src/api/order/poOrder.js
-
2src/api/part/partInfo.js
-
8src/api/port/portInfo.js
-
12src/api/port/portTransit.js
-
1src/api/supplier/purQuotation.js
-
509src/views/modules/order/poOrder.vue
-
408src/views/modules/port/portInfo.vue
-
236src/views/modules/port/portTransit.vue
@ -0,0 +1,11 @@ |
|||||
|
import { createAPI } from '@/utils/httpRequest.js' |
||||
|
|
||||
|
export const searchPoDetailList = (data) => createAPI(`/pODetail/list`, 'post', data) |
||||
|
|
||||
|
export const searchPoDetailPage = (data) => createAPI(`/pODetail/page`, 'post', data) |
||||
|
export const createPoDetail = (data) => createAPI(`/pODetail/save`, 'post', data) |
||||
|
export const updatePoDetail = (data) => createAPI(`/pODetail/save`, 'post', data) |
||||
|
export const deletePoDetail = (data) => createAPI(`/pODetail/delete`, 'post', data) |
||||
|
|
||||
|
//批量更新
|
||||
|
export const batchUpdatePoDetail = (data) => createAPI(`/pODetail/batchUpdatePoDetail`, 'post', data) |
||||
@ -0,0 +1,8 @@ |
|||||
|
import { createAPI } from '@/utils/httpRequest.js' |
||||
|
|
||||
|
export const searchPortPage = data => createAPI('/portInfo/page', 'POST', data) |
||||
|
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 }) |
||||
@ -0,0 +1,12 @@ |
|||||
|
import { createAPI } from '@/utils/httpRequest.js' |
||||
|
|
||||
|
//分页列表
|
||||
|
export const searchTransitPage = data => createAPI('/portTransit/page', '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 function updateTransit(data) { return request({ url: '/portTransit/save', method: 'post', data }) } |
||||
|
// 删除
|
||||
|
export function deleteTransit(data) { return request({ url: '/portTransit/delete', method: 'delete', data }) } |
||||
@ -0,0 +1,408 @@ |
|||||
|
<!-- 港口管理界面 --> |
||||
|
<template> |
||||
|
<div class="customer-css"> |
||||
|
<!-- 查询条件 --> |
||||
|
<el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;"> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="港口编码:"> |
||||
|
<el-input v-model="searchData.portCode" style="width: 150px" clearable placeholder="请输入港口编码"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="港口名称:"> |
||||
|
<el-input v-model="searchData.portName" style="width: 150px" clearable placeholder="请输入港口名称"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=" "> |
||||
|
<el-button class="customer-bun-min" type="primary" @click="getMainData">查询</el-button> |
||||
|
<el-button @click="resetSearch" style="margin-left: 2px">重置</el-button> |
||||
|
<el-button type="primary" @click="openAddDialog">新增</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 港口列表 --> |
||||
|
<el-table |
||||
|
:height="height" |
||||
|
:data="mainDataList" |
||||
|
border |
||||
|
ref="mainTable" |
||||
|
highlight-current-row |
||||
|
@row-click="changeData" |
||||
|
v-loading="dataListLoading" |
||||
|
style="margin-top: 0px; width: 100%;"> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in columnArray1" |
||||
|
:key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- 操作列 --> |
||||
|
<el-table-column |
||||
|
fixed="right" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="180" |
||||
|
label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-link style="cursor: pointer; margin-right: 10px;" @click="openEditDialog(scope.row)">编辑</el-link> |
||||
|
<el-link style="cursor: pointer; color: #F56C6C;" @click="deletePort(scope.row)">删除</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<el-pagination |
||||
|
style="margin-top: 0px" |
||||
|
@size-change="sizeChangeHandle" |
||||
|
@current-change="currentChangeHandle" |
||||
|
:current-page="pageIndex" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="pageSize" |
||||
|
:total="totalPage" |
||||
|
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" |
||||
|
class="part-dialog"> |
||||
|
<div class="dialog-content"> |
||||
|
<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-form> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer" style="margin-top: 20px; text-align: center;"> |
||||
|
<el-button type="primary" @click="submitPort">提交</el-button> |
||||
|
<el-button @click="portDialogVisible = false">取消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
// ============ API 接口导入（请根据实际后端接口调整） ============ |
||||
|
import { |
||||
|
searchPortPage, // 分页查询港口列表 |
||||
|
createPort, // 新增港口 |
||||
|
updatePort, // 更新港口 |
||||
|
deletePort // 删除港口 |
||||
|
} from '@/api/port/portInfo.js' |
||||
|
|
||||
|
// ============ 子组件导入 ============ |
||||
|
import transitList from './portTransit.vue' |
||||
|
|
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'PortManagement', |
||||
|
components: { |
||||
|
transitList |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 布局高度 |
||||
|
height: 200, |
||||
|
tabHeight: 300, |
||||
|
|
||||
|
// 主列表加载状态 |
||||
|
dataListLoading: false, |
||||
|
// 主列表数据 |
||||
|
mainDataList: [], |
||||
|
|
||||
|
// 子列表加载状态 |
||||
|
subDataLoading: false, |
||||
|
// 子列表数据（运输周期） |
||||
|
subDataList: [], |
||||
|
|
||||
|
// 分页参数 |
||||
|
pageIndex: 1, |
||||
|
pageSize: 20, |
||||
|
totalPage: 0, |
||||
|
|
||||
|
// 当前选中的标签页 |
||||
|
activeName: 'transitList', |
||||
|
// 当前选中的港口行 |
||||
|
currentRow: {}, |
||||
|
|
||||
|
// 查询条件 |
||||
|
searchData: { |
||||
|
portCode: '', |
||||
|
portName: '', |
||||
|
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: '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 } |
||||
|
], |
||||
|
|
||||
|
|
||||
|
// ========== 港口对话框相关 ========== |
||||
|
portDialogVisible: false, |
||||
|
dialogType: 'add', // add: 新增, edit: 编辑 |
||||
|
dialogTitle: '新增港口', |
||||
|
portForm: { |
||||
|
portCode: '', |
||||
|
portName: '', |
||||
|
remark: '' |
||||
|
}, |
||||
|
portRules: { |
||||
|
portCode: [{ required: true, message: '请输入港口编码', trigger: 'blur' }], |
||||
|
portName: [{ required: true, message: '请输入港口名称', trigger: 'blur' }] |
||||
|
}, |
||||
|
|
||||
|
// ========== 运输周期对话框相关 ========== |
||||
|
transitDialogVisible: false, |
||||
|
transitDialogType: 'add', // add: 新增, edit: 编辑 |
||||
|
transitDialogTitle: '新增运输周期', |
||||
|
transitForm: { |
||||
|
id: '', |
||||
|
portCode: '', |
||||
|
departure: '', |
||||
|
destination: '', |
||||
|
transitDays: 0, |
||||
|
remark: '' |
||||
|
}, |
||||
|
transitRules: { |
||||
|
departure: [{ required: true, message: '请输入始发港', trigger: 'blur' }], |
||||
|
destination: [{ required: true, message: '请输入目的港', trigger: 'blur' }], |
||||
|
transitDays: [{ required: true, message: '请输入停留天数', trigger: 'blur' }] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getMainData() |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.calcHeight() |
||||
|
}) |
||||
|
window.addEventListener('resize', this.handleResize) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
window.removeEventListener('resize', this.handleResize) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 计算高度 |
||||
|
calcHeight() { |
||||
|
this.height = (window.innerHeight - 280) / 2 |
||||
|
this.tabHeight = this.height - 50 |
||||
|
}, |
||||
|
|
||||
|
handleResize() { |
||||
|
this.calcHeight() |
||||
|
this.refreshCurrentSubTable() |
||||
|
}, |
||||
|
|
||||
|
// 重置查询条件 |
||||
|
resetSearch() { |
||||
|
this.searchData = { |
||||
|
portCode: '', |
||||
|
portName: '', |
||||
|
page: 1, |
||||
|
limit: this.pageSize |
||||
|
} |
||||
|
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]) |
||||
|
} else { |
||||
|
this.changeData(null) |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '查询失败') |
||||
|
} |
||||
|
this.dataListLoading = false |
||||
|
}).catch(() => { |
||||
|
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' |
||||
|
this.dialogTitle = '新增港口' |
||||
|
this.portForm = { |
||||
|
createBy: this.$store.state.user.name, |
||||
|
portCode: '', |
||||
|
portName: '', |
||||
|
remark: '' |
||||
|
} |
||||
|
this.portDialogVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.portForm) { |
||||
|
this.$refs.portForm.clearValidate() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 打开编辑港口对话框 |
||||
|
openEditDialog(row) { |
||||
|
this.dialogType = 'edit' |
||||
|
this.dialogTitle = '编辑港口' |
||||
|
this.portForm = { |
||||
|
portCode: row.portCode, |
||||
|
portName: row.portName, |
||||
|
remark: row.remark || '' |
||||
|
} |
||||
|
this.portDialogVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.portForm) { |
||||
|
this.$refs.portForm.clearValidate() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 提交港口表单 |
||||
|
submitPort() { |
||||
|
this.$refs.portForm.validate((valid) => { |
||||
|
if (valid) { |
||||
|
const apiMethod = this.dialogType === 'add' ? createPort : updatePort |
||||
|
apiMethod(this.portForm).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
this.$message.success(this.dialogType === 'add' ? '新增成功' : '编辑成功') |
||||
|
this.portDialogVisible = false |
||||
|
this.getMainData() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '操作失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
this.$message.error('操作失败: ' + error.message) |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.warning('请填写必填字段') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 删除港口 |
||||
|
deletePort(row) { |
||||
|
this.$confirm(`确定删除港口 "${row.portCode} - ${row.portName}" 吗？删除后该港口的运输周期数据也会被删除。`, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
deletePort({ portCode: row.portCode }).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
this.$message.success('删除成功') |
||||
|
this.getMainData() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '删除失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
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() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
// 如有额外样式可在此添加 |
||||
|
.customer-css { |
||||
|
.el-link--danger { |
||||
|
color: #F56C6C; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,236 @@ |
|||||
|
<template> |
||||
|
<div class="customer-css"> |
||||
|
<el-form :inline="true" label-position="top" :model="searchData"> |
||||
|
<el-form-item label="始发港"> |
||||
|
<el-input v-model="searchData.departure" clearable style="width: 150px"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="目的港"> |
||||
|
<el-input v-model="searchData.destination" clearable style="width: 150px"></el-input> |
||||
|
</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-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table |
||||
|
:data="dataList" |
||||
|
:height="searchData.height" |
||||
|
border |
||||
|
v-loading="dataListLoading" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in columnList" |
||||
|
:key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed == '' ? false : item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="180" |
||||
|
fixed="right" |
||||
|
label="Actions"> |
||||
|
<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> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 新增/编辑弹窗 --> |
||||
|
<el-dialog :title="dialogTitle" :close-on-click-modal="false" v-drag :visible.sync="dialogVisible" width="600px"> |
||||
|
<div class="dialog-content"> |
||||
|
<el-form label-position="top" :model="formData" :rules="formRules" ref="formRef"> |
||||
|
<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> |
||||
|
</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> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer" style="margin-top: 20px"> |
||||
|
<el-button type="primary" @click="submitData()">保存</el-button> |
||||
|
<el-button @click="dialogVisible = false">取消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 请根据实际API路径调整导入 |
||||
|
import { |
||||
|
searchTransitPage, // 分页查询运输周期列表（如果需要分页） |
||||
|
searchTransitList, // 查询运输周期列表 |
||||
|
createTransit, // 新增运输周期 |
||||
|
updateTransit, // 更新运输周期 |
||||
|
deleteTransit // 删除运输周期 |
||||
|
} from '@/api/port/portTransit.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'PortTransitList', |
||||
|
data() { |
||||
|
return { |
||||
|
dataList: [], |
||||
|
dataListLoading: false, |
||||
|
searchData: { |
||||
|
departure: '', |
||||
|
destination: '', |
||||
|
portId: '', |
||||
|
portCode: '', |
||||
|
height: '200', |
||||
|
page: 1, |
||||
|
limit: 1000 |
||||
|
}, |
||||
|
dialogVisible: false, |
||||
|
dialogTitle: '新增港口运输周期', |
||||
|
formData: { |
||||
|
id: '', |
||||
|
departure: '', |
||||
|
destination: '', |
||||
|
transitDays: '' |
||||
|
}, |
||||
|
formRules: { |
||||
|
departure: [{ required: true, message: '请输入始发港', trigger: 'blur' }], |
||||
|
destination: [{ required: true, message: '请输入目的港', trigger: 'blur' }], |
||||
|
transitDays: [{ required: true, message: '请输入停留天数', trigger: 'blur' }] |
||||
|
}, |
||||
|
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 } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
shouldShowButton() { |
||||
|
return true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 初始化方法，供父组件调用 |
||||
|
init(inData) { |
||||
|
if (inData) { |
||||
|
this.searchData = { ...this.searchData, ...inData } |
||||
|
} |
||||
|
this.searchTable() |
||||
|
}, |
||||
|
// 查询列表 |
||||
|
searchTable() { |
||||
|
this.dataListLoading = true |
||||
|
searchTransitPage(this.searchData).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.dataList = data.rows |
||||
|
} else { |
||||
|
this.dataList = [] |
||||
|
} |
||||
|
this.dataListLoading = false |
||||
|
}).catch(() => { |
||||
|
this.dataListLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 新增 |
||||
|
addModal() { |
||||
|
this.dialogTitle = '新增港口运输周期' |
||||
|
this.formData = { |
||||
|
id: '', |
||||
|
portId: this.searchData.portId || '', |
||||
|
departure: '', |
||||
|
destination: '', |
||||
|
transitDays: '' |
||||
|
} |
||||
|
this.dialogVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.formRef) { |
||||
|
this.$refs.formRef.clearValidate() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 编辑 |
||||
|
editModel(row) { |
||||
|
this.dialogTitle = '编辑港口运输周期' |
||||
|
this.formData = JSON.parse(JSON.stringify(row)) |
||||
|
this.dialogVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.formRef) { |
||||
|
this.$refs.formRef.clearValidate() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 提交保存 |
||||
|
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 || '保存成功') |
||||
|
this.dialogVisible = false |
||||
|
this.searchTable() |
||||
|
} else { |
||||
|
this.$message.warning(data.msg || '保存失败') |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.$message.error('保存失败') |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
// 删除 |
||||
|
deleteData(row) { |
||||
|
this.$confirm('确认删除该条港口运输周期记录吗？', '提示', { |
||||
|
confirmButtonText: '确认', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
deleteTransit(row.id).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
this.$message.success('删除成功') |
||||
|
this.searchTable() |
||||
|
} else { |
||||
|
this.$message.warning(data.msg || '删除失败') |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.$message.error('删除失败') |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.dialog-content { |
||||
|
width: 100%; |
||||
|
max-height: 60vh; |
||||
|
overflow-y: auto; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.customer-css { |
||||
|
padding: 10px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue