feat: 更改发布信息
sankeyangshu
parent
9813ae3c79
commit
977868dd0b
|
|
@ -1,20 +1,7 @@
|
|||
<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 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"
|
||||
|
|
@ -23,9 +10,13 @@
|
|||
:api="postShipListAPI"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="航次" prop="voyage">
|
||||
<el-input v-model="boatForm.voyage" placeholder="请输入航次" />
|
||||
<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"
|
||||
|
|
@ -34,87 +25,22 @@
|
|||
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-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-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-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-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-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="16">
|
||||
<el-form-item label="卸货港口" prop="dischargePortId">
|
||||
<RemoteSelect
|
||||
v-model:value="boatForm.dischargePortId"
|
||||
|
|
@ -123,6 +49,127 @@
|
|||
style="width: 170px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<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 {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
<template>
|
||||
<el-form
|
||||
class="form"
|
||||
ref="ruleFormRef"
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
:rules="formRules"
|
||||
:model="form"
|
||||
>
|
||||
<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 />
|
||||
<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"
|
||||
|
|
@ -19,10 +16,16 @@
|
|||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="型号">
|
||||
<el-input v-model="boatForm.model" disabled />
|
||||
<el-input v-model="boatForm.model" disabled style="width: 170px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车型" prop="vehicleTypeId">
|
||||
<RemoteSelect
|
||||
v-model:value="form.vehicleTypeId"
|
||||
|
|
@ -31,6 +34,8 @@
|
|||
style="width: 170px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车型明细" prop="vehicleTypeDetailId">
|
||||
<RemoteSelect
|
||||
v-model:value="form.vehicleTypeDetailId"
|
||||
|
|
@ -39,30 +44,76 @@
|
|||
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" />
|
||||
<el-input v-model="form.vin" placeholder="请输入VIN" style="width: 170px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="重量" prop="weight">
|
||||
<el-input v-model="form.weight" placeholder="请输入重量" />
|
||||
</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>
|
||||
<el-form-item label="体积" prop="volume">
|
||||
<el-input v-model="form.volume" placeholder="请输入体积" />
|
||||
<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>
|
||||
<el-form-item label="长" prop="length">
|
||||
<el-input v-model="form.length" placeholder="请输入长" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="宽" prop="width">
|
||||
<el-input v-model="form.width" placeholder="请输入宽" />
|
||||
</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>
|
||||
<el-form-item label="高" prop="height">
|
||||
<el-input v-model="form.height" placeholder="请输入高" />
|
||||
<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="请输入有无质损" />
|
||||
<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="请输入质损描述" />
|
||||
<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 {
|
||||
|
|
|
|||
|
|
@ -1,55 +1,63 @@
|
|||
<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 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-form-item label="航次" prop="voyage">
|
||||
<el-input v-model="boatForm.voyage" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="装货港口" prop="loadPortId">
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="装货港" prop="loadPortId">
|
||||
<RemoteSelect
|
||||
v-model:value="boatForm.loadPortId"
|
||||
placeholder="请输入卸货港口"
|
||||
placeholder="请输入卸货港"
|
||||
:api="postPortListAPI"
|
||||
style="width: 170px"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="卸货港口" prop="dischargePortId">
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="卸货港" prop="dischargePortId">
|
||||
<RemoteSelect
|
||||
v-model:value="boatForm.dischargePortId"
|
||||
placeholder="请输入卸货港口"
|
||||
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="请输入舱层" />
|
||||
<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="请输入舱段" />
|
||||
<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="请输入提单号" />
|
||||
<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="请输入货名" />
|
||||
<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"
|
||||
|
|
@ -58,31 +66,58 @@
|
|||
:api="postBrandListAPI"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="型号" prop="model">
|
||||
<el-input v-model="form.model" placeholder="请输入型号" />
|
||||
<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="请输入唛头" />
|
||||
<el-input v-model="form.shippingMark" placeholder="请输入唛头" style="width: 170px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车数量" prop="carNum">
|
||||
<el-input v-model="form.carNum" placeholder="请输入车数量" />
|
||||
|
||||
<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>
|
||||
<el-form-item label="件杂货数" prop="spareNum">
|
||||
<el-input v-model="form.spareNum" placeholder="请输入件杂货数" />
|
||||
<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>
|
||||
<el-form-item label="重量" prop="weight">
|
||||
<el-input v-model="form.weight" placeholder="请输入重量" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="体积" prop="volume">
|
||||
<el-input v-model="form.volume" placeholder="请输入体积" />
|
||||
</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="请输入发货人" />
|
||||
<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="请输入收货人" />
|
||||
<el-input v-model="form.consignee" placeholder="请输入收货人" style="width: 170px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="货物状态" prop="goodsStatus">
|
||||
</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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue