cvsip
/
cvsip-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 更改发布信息

main
sankeyangshu 2024-12-05 16:30:39 +08:00
parent 9813ae3c79
commit 977868dd0b
4 changed files with 465 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

329
src/views/Send/components/BoatInfoSend.vue
View File

@ -1,128 +1,175 @@
<template> <template>
<el-form <el-form class="form" ref="ruleFormRef" :rules="formRules" :model="boatForm">
class="form" <el-row :gutter="20">
ref="ruleFormRef" <el-col :span="8">
:inline="true" <el-form-item label="船名" prop="shipId">
label-width="auto" <RemoteSelect
:rules="formRules" v-model:value="boatForm.shipId"
:model="boatForm" placeholder="请输入船名"
> style="width: 170px"
<el-form-item label="企业" prop="enterpriseId"> :api="postShipListAPI"
<RemoteSelect />
v-model:value="boatForm.enterpriseId" </el-form-item>
placeholder="请选择企业" </el-col>
:api="postEnterpriseListAPI" <el-col :span="8">
style="width: 170px" <el-form-item label="航次" prop="voyage">
/> <el-input v-model="boatForm.voyage" placeholder="请输入航次" style="width: 170px" />
</el-form-item> </el-form-item>
<el-form-item label="船名" prop="shipId"> </el-col>
<RemoteSelect <el-col :span="8">
v-model:value="boatForm.shipId" <el-form-item label="航线" prop="shipRouteId">
placeholder="请输入船名" <RemoteSelect
style="width: 170px" v-model:value="boatForm.shipRouteId"
:api="postShipListAPI" placeholder="请选择航线"
/> :api="postRouteListAPI"
</el-form-item> style="width: 170px"
<el-form-item label="航次" prop="voyage"> />
<el-input v-model="boatForm.voyage" placeholder="请输入航次" /> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="航线" prop="shipRouteId"> </el-row>
<RemoteSelect
v-model:value="boatForm.shipRouteId"
placeholder="请选择航线"
:api="postRouteListAPI"
style="width: 170px"
/>
</el-form-item>
<el-form-item label="装货码头" prop="loadWharfId">
<RemoteSelect
v-model:value="boatForm.loadWharfId"
placeholder="请输入装货码头"
style="width: 170px"
:api="postWharfListAPI"
/>
</el-form-item>
<el-form-item label="卸货码头" prop="dischargeWharfId">
<RemoteSelect
v-model:value="boatForm.dischargeWharfId"
placeholder="请输入装货码头"
style="width: 170px"
:api="postWharfListAPI"
/>
</el-form-item>
<el-form-item label="计划装载" required> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="8">
<el-form-item prop="carNumPlan" style="width: 100%"> <el-form-item label="装货港口" prop="loadPortId">
<el-input v-model="boatForm.carNumPlan" placeholder="商品车数量" /> <RemoteSelect
v-model:value="boatForm.loadPortId"
placeholder="请输入装货港口"
:api="postPortListAPI"
style="width: 170px"
:disabled="true"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="1" style="margin: 0 4px; text-align: center">/</el-col> <el-col :span="16">
<el-col :span="6"> <el-form-item label="卸货港口" prop="dischargePortId">
<el-form-item prop="spareNumPlan" style="width: 100%"> <RemoteSelect
<el-input v-model="boatForm.spareNumPlan" placeholder="件杂货数量" /> v-model:value="boatForm.dischargePortId"
placeholder="请输入卸货港口"
:api="postPortListAPI"
style="width: 170px"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form-item> </el-row>
<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-row :gutter="20">
<el-date-picker <el-col :span="8">
v-model="boatForm.departureDatePlan" <el-form-item label="装货码头" prop="loadWharfId">
type="datetime" <RemoteSelect
placeholder="请选择计划离泊时间" v-model:value="boatForm.loadWharfId"
/> placeholder="请输入装货码头"
</el-form-item> style="width: 170px"
<el-form-item label="实际离泊时间" prop="departureDateActual"> :api="() => postWharfListAPI({ ref: boatForm.loadPortId })"
<el-date-picker :disabled="!boatForm.loadPortId"
v-model="boatForm.departureDateActual" />
type="datetime" </el-form-item>
placeholder="请选择实际离泊时间" </el-col>
/> <el-col :span="16">
</el-form-item> <el-form-item label="卸货码头" prop="dischargeWharfId">
<el-form-item label="船舶状态" prop="shipStatus"> <RemoteSelect
<el-select v-model="boatForm.shipStatus" placeholder="请选择船舶状态" style="width: 200px"> v-model:value="boatForm.dischargeWharfId"
<el-option label="有计划" value="有计划" /> placeholder="请输入装货码头"
<el-option label="已靠港" value="已靠港" /> style="width: 170px"
<el-option label="作业中" value="作业中" /> :api="() => postWharfListAPI({ ref: boatForm.dischargePortId })"
<el-option label="已离港" value="已离港" /> :disabled="!boatForm.dischargePortId"
</el-select> />
</el-form-item> </el-form-item>
<el-form-item label="贸易类型" prop="tradeType"> </el-col>
<el-select v-model="boatForm.tradeType" placeholder="请选择贸易类型" style="width: 200px"> </el-row>
<el-option label="外贸进口" value="外贸进口" />
<el-option label="外贸出口" value="外贸出口" /> <el-row :gutter="20">
<el-option label="内贸" value="内贸" /> <el-col :span="12">
</el-select> <el-form-item label="计划装载" required>
</el-form-item> <div class="form-item">
<el-form-item label="装货港口" prop="loadPortId"> <el-form-item prop="carNumPlan" style="width: 100%">
<RemoteSelect <el-input
v-model:value="boatForm.loadPortId" v-model="boatForm.carNumPlan"
placeholder="请输入装货港口" placeholder="商品车数量"
:api="postPortListAPI" style="width: 100px"
style="width: 170px" />
/> </el-form-item>
</el-form-item> <div style="margin: 0 10px; text-align: center">/</div>
<el-form-item label="卸货港口" prop="dischargePortId"> <el-form-item prop="spareNumPlan" style="width: 100%">
<RemoteSelect <el-input
v-model:value="boatForm.dischargePortId" v-model="boatForm.spareNumPlan"
placeholder="请输入卸货港口" placeholder="件杂货数量"
:api="postPortListAPI" style="width: 100px"
style="width: 170px" />
/> </el-form-item>
</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">
<div class="footer-left"> <div class="footer-left">
@ -138,25 +185,33 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'; import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue'; import { storeToRefs } from 'pinia';
import { reactive, ref, watch } from 'vue';
import { import {
getSailScheduleImportAPI, getSailScheduleImportAPI,
getSailScheduleSaveAPI, getSailScheduleSaveAPI,
getSailScheduleTmpExportAPI, getSailScheduleTmpExportAPI,
} from '@/api/Boat/info'; } from '@/api/Boat/info';
import { postRouteListAPI } from '@/api/BoatRoute'; import { postRouteListAPI } from '@/api/BoatRoute';
import { postEnterpriseListAPI } from '@/api/Enterprise/company';
import { postPortListAPI } from '@/api/Port'; import { postPortListAPI } from '@/api/Port';
import { postShipListAPI } from '@/api/Ship'; import { postShipListAPI } from '@/api/Ship';
import { postWharfListAPI } from '@/api/Wharf'; import { postWharfListAPI } from '@/api/Wharf';
import ImportFile from '@/components/ImpordFile/index.vue'; import ImportFile from '@/components/ImpordFile/index.vue';
import RemoteSelect from '@/components/RemoteSelect/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({ const boatForm = reactive({
enterpriseId: '', enterpriseId: userInfo.value.enterpriseId,
shipId: '', shipId: '',
voyage: '', voyage: '',
shipRouteId: '', shipRouteId: '',
loadPortId: userInfo.value.portId,
dischargePortId: '',
loadWharfId: '', loadWharfId: '',
dischargeWharfId: '', dischargeWharfId: '',
carNumPlan: '', carNumPlan: '',
@ -167,10 +222,19 @@ const boatForm = reactive({
departureDateActual: '', departureDateActual: '',
shipStatus: '', shipStatus: '',
tradeType: '', tradeType: '',
loadPortId: '',
dischargePortId: '',
}); });
// 监听卸货港口变化
watch(
() => boatForm.dischargePortId ?? '',
(newValue, oldValue) => {
if (newValue !== oldValue) {
boatForm.dischargeWharfId = '';
}
}
);
// 表单校验规则
const formRules = reactive<FormRules>({ const formRules = reactive<FormRules>({
enterpriseId: [{ required: true, message: '请输入企业ID', trigger: 'blur' }], enterpriseId: [{ required: true, message: '请输入企业ID', trigger: 'blur' }],
shipId: [{ 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 ruleFormRef = ref<FormInstance>();
// // 重置
// const onResetForm = () => {
// ruleFormRef.value?.resetFields();
// };
// 下载模版 // 下载模版
const onClickDownload = () => { const onClickDownload = () => {
ElMessageBox.confirm(`你确定要下载模版吗?`, '温馨提示', { ElMessageBox.confirm(`你确定要下载模版吗?`, '温馨提示', {
@ -246,7 +305,6 @@ const onClickUpload = () => {
interface propsType { interface propsType {
scheduleId: string; scheduleId: string;
voyage: string; voyage: string;
loadPortId: string;
dischargePortId: string; dischargePortId: string;
} }
@ -256,13 +314,6 @@ const emit = defineEmits<{
// 提交 // 提交
const onClickConfirm = (formEl: FormInstance | undefined) => { const onClickConfirm = (formEl: FormInstance | undefined) => {
// TEST: 测试数据
// emit('updateBoatID', {
// scheduleId: 'data',
// voyage: 'boatForm.voyage',
// loadPortId: 'boatForm.loadPortId',
// dischargePortId: 'boatForm.dischargePortId',
// });
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
if (!valid) return; if (!valid) return;
@ -270,7 +321,6 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
emit('updateBoatID', { emit('updateBoatID', {
scheduleId: data, scheduleId: data,
voyage: boatForm.voyage, voyage: boatForm.voyage,
loadPortId: boatForm.loadPortId,
dischargePortId: boatForm.dischargePortId, dischargePortId: boatForm.dischargePortId,
}); });
ruleFormRef.value?.resetFields(); ruleFormRef.value?.resetFields();
@ -287,6 +337,10 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.form-item {
display: flex;
flex-direction: row;
}
.footer { .footer {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -294,6 +348,7 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
margin-top: 40px;
.footer-left { .footer-left {
display: flex; display: flex;
.btn-down { .btn-down {

184
src/views/Send/components/ManifestDetailSend.vue
View File

@ -1,68 +1,119 @@
<template> <template>
<el-form <el-form class="form" ref="ruleFormRef" :rules="formRules" :model="form">
class="form" <el-row :gutter="20">
ref="ruleFormRef" <el-col :span="8">
:inline="true" <el-form-item label="提单号">
label-width="auto" <el-input v-model="boatForm.billNo" disabled style="width: 170px" />
:rules="formRules" </el-form-item>
:model="form" </el-col>
> <el-col :span="8">
<el-form-item label="提单号"> <el-form-item label="品牌">
<el-input v-model="boatForm.billNo" disabled /> <RemoteSelect
</el-form-item> v-model:value="boatForm.brandId"
<el-form-item label="品牌"> placeholder="请输入品牌"
<RemoteSelect :api="postBrandListAPI"
v-model:value="boatForm.brandId" style="width: 170px"
placeholder="请输入品牌" disabled
:api="postBrandListAPI" />
style="width: 170px" </el-form-item>
disabled </el-col>
/> <el-col :span="8">
</el-form-item> <el-form-item label="型号">
<el-form-item label="型号"> <el-input v-model="boatForm.model" disabled style="width: 170px" />
<el-input v-model="boatForm.model" disabled /> </el-form-item>
</el-form-item> </el-col>
</el-row>
<el-form-item label="车型" prop="vehicleTypeId"> <el-row :gutter="20">
<RemoteSelect <el-col :span="8">
v-model:value="form.vehicleTypeId" <el-form-item label="车型" prop="vehicleTypeId">
placeholder="请输入车型" <RemoteSelect
:api="postVehicleListAPI" v-model:value="form.vehicleTypeId"
style="width: 170px" placeholder="请输入车型"
/> :api="postVehicleListAPI"
</el-form-item> style="width: 170px"
<el-form-item label="车型明细" prop="vehicleTypeDetailId"> />
<RemoteSelect </el-form-item>
v-model:value="form.vehicleTypeDetailId" </el-col>
placeholder="请输入车型明细" <el-col :span="8">
:api="postVehicleDetailListAPI" <el-form-item label="车型明细" prop="vehicleTypeDetailId">
style="width: 170px" <RemoteSelect
/> v-model:value="form.vehicleTypeDetailId"
</el-form-item> placeholder="请输入车型明细"
<el-form-item label="VIN" prop="vin"> :api="postVehicleDetailListAPI"
<el-input v-model="form.vin" placeholder="请输入VIN" /> style="width: 170px"
</el-form-item> />
<el-form-item label="重量" prop="weight"> </el-form-item>
<el-input v-model="form.weight" placeholder="请输入重量" /> </el-col>
</el-form-item> </el-row>
<el-form-item label="体积" prop="volume">
<el-input v-model="form.volume" placeholder="请输入体积" /> <el-row :gutter="20">
</el-form-item> <el-col :span="8">
<el-form-item label="长" prop="length"> <el-form-item label="VIN" prop="vin">
<el-input v-model="form.length" placeholder="请输入长" /> <el-input v-model="form.vin" placeholder="请输入VIN" style="width: 170px" />
</el-form-item> </el-form-item>
<el-form-item label="宽" prop="width"> </el-col>
<el-input v-model="form.width" placeholder="请输入宽" /> <el-col :span="14">
</el-form-item> <el-form-item label="重量(Kg) / 体积(m3)">
<el-form-item label="高" prop="height"> <div class="form-item">
<el-input v-model="form.height" placeholder="请输入高" /> <el-form-item prop="weight">
</el-form-item> <el-input v-model="form.weight" placeholder="请输入重量" style="width: 100px" />
<el-form-item label="有无质损" prop="damage"> </el-form-item>
<el-input v-model="form.damage" placeholder="请输入有无质损" /> <div style="margin: 0 10px; text-align: center">/</div>
</el-form-item> <el-form-item prop="volume">
<el-form-item label="质损描述" prop="damageDesc"> <el-input v-model="form.volume" placeholder="请输入体积" style="width: 100px" />
<el-input v-model="form.damageDesc" placeholder="请输入质损描述" /> </el-form-item>
</el-form-item> </div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="长(mm)/ 宽(mm)/ 高(mm)">
<div class="form-item">
<el-form-item prop="length">
<el-input v-model="form.length" placeholder="长" style="width: 70px" />
</el-form-item>
<div style="margin: 0 5px; text-align: center"></div>
<el-form-item prop="width">
<el-input v-model="form.width" placeholder="宽" style="width: 70px" />
</el-form-item>
<div style="margin: 0 5px; text-align: center"></div>
<el-form-item prop="height">
<el-input v-model="form.height" placeholder="高" style="width: 70px" />
</el-form-item>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="BAmm / LRmm">
<div class="form-item">
<el-form-item prop="bamm">
<el-input v-model="form.bamm" placeholder="BAmm" style="width: 70px" />
</el-form-item>
<div style="margin: 0 5px; text-align: center">/</div>
<el-form-item prop="lrmm">
<el-input v-model="form.lrmm" placeholder="LRmm" style="width: 70px" />
</el-form-item>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="有无质损" prop="damage">
<el-input v-model="form.damage" placeholder="请输入有无质损" style="width: 170px" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="质损描述" prop="damageDesc">
<el-input v-model="form.damageDesc" placeholder="请输入质损描述" style="width: 340px" />
</el-form-item>
</el-col>
</el-row>
<div class="footer"> <div class="footer">
<div class="footer-left"> <div class="footer-left">
@ -122,6 +173,8 @@ const form = reactive({
height: '', height: '',
damage: '', damage: '',
damageDesc: '', damageDesc: '',
bamm: '',
lrmm: '',
}); });
const formRules = reactive<FormRules>({ const formRules = reactive<FormRules>({
@ -227,6 +280,10 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.form-item {
display: flex;
flex-direction: row;
}
.footer { .footer {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -234,6 +291,7 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
margin-top: 40px;
.footer-left { .footer-left {
display: flex; display: flex;
.btn-down { .btn-down {

235
src/views/Send/components/ManifestSend.vue
View File

@ -1,88 +1,123 @@
<template> <template>
<el-form <el-form class="form" ref="ruleFormRef" :rules="formRules" :model="form">
class="form" <el-row :gutter="20">
ref="ruleFormRef" <el-col :span="8">
:inline="true" <el-form-item label="船名" prop="voyage">
label-width="auto" <el-input v-model="boatForm.scheduleName" style="width: 170px" disabled />
:rules="formRules" </el-form-item>
:model="form" </el-col>
> <el-col :span="8">
<el-form-item label="船期" prop="scheduleId"> <el-form-item label="装货港" prop="loadPortId">
<RemoteSelect <RemoteSelect
v-model:value="boatForm.scheduleId" v-model:value="boatForm.loadPortId"
placeholder="请输入船名" placeholder="请输入卸货港"
style="width: 170px" :api="postPortListAPI"
:api="postShipListAPI" style="width: 170px"
disabled disabled
/> />
</el-form-item> </el-form-item>
<el-form-item label="航次" prop="voyage"> </el-col>
<el-input v-model="boatForm.voyage" disabled /> <el-col :span="8">
</el-form-item> <el-form-item label="卸货港" prop="dischargePortId">
<el-form-item label="装货港口" prop="loadPortId"> <RemoteSelect
<RemoteSelect v-model:value="boatForm.dischargePortId"
v-model:value="boatForm.loadPortId" placeholder="请输入卸货港"
placeholder="请输入卸货港口" :api="postPortListAPI"
:api="postPortListAPI" style="width: 170px"
style="width: 170px" disabled
disabled />
/> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="卸货港口" prop="dischargePortId"> </el-row>
<RemoteSelect
v-model:value="boatForm.dischargePortId" <el-row :gutter="20">
placeholder="请输入卸货港口" <el-col :span="8">
:api="postPortListAPI" <el-form-item label="舱层" prop="deck">
style="width: 170px" <el-input v-model="form.deck" placeholder="请输入舱层" style="width: 170px" />
disabled </el-form-item>
/> </el-col>
<el-col :span="8">
<el-form-item label="舱段" prop="cabin">
<el-input v-model="form.cabin" placeholder="请输入舱段" style="width: 170px" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="提单号" prop="billNo">
<el-input v-model="form.billNo" placeholder="请输入提单号" style="width: 170px" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="货名" prop="goodsName">
<el-input v-model="form.goodsName" placeholder="请输入货名" style="width: 170px" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="品牌" prop="brandId">
<RemoteSelect
v-model:value="form.brandId"
placeholder="请选择品牌"
style="width: 170px"
:api="postBrandListAPI"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="型号" prop="model">
<el-input v-model="form.model" placeholder="请输入型号" style="width: 170px" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="唛头" prop="shippingMark">
<el-input v-model="form.shippingMark" placeholder="请输入唛头" style="width: 170px" />
</el-form-item> </el-form-item>
<el-form-item label="舱层" prop="deck"> <el-row :gutter="20">
<el-input v-model="form.deck" placeholder="请输入舱层" /> <el-col :span="8">
</el-form-item> <el-form-item label="商品车 / 件杂货" required>
<el-form-item label="舱段" prop="cabin"> <div class="form-item">
<el-input v-model="form.cabin" placeholder="请输入舱段" /> <el-form-item prop="carNum">
</el-form-item> <el-input v-model="form.carNum" placeholder="数量" style="width: 70px" />
<el-form-item label="提单号" prop="billNo"> </el-form-item>
<el-input v-model="form.billNo" placeholder="请输入提单号" /> <div style="margin: 0 10px; text-align: center">/</div>
</el-form-item> <el-form-item prop="spareNum">
<el-form-item label="货名" prop="goodsName"> <el-input v-model="form.spareNum" placeholder="数量" style="width: 70px" />
<el-input v-model="form.goodsName" placeholder="请输入货名" /> </el-form-item>
</el-form-item> </div>
<el-form-item label="品牌" prop="brandId"> </el-form-item>
<RemoteSelect </el-col>
v-model:value="form.brandId" <el-col :span="8">
placeholder="请选择品牌" <el-form-item label="重量（Kg）" prop="weight">
style="width: 170px" <el-input v-model="form.weight" placeholder="请输入重量" style="width: 170px" />
:api="postBrandListAPI" </el-form-item>
/> </el-col>
</el-form-item> <el-col :span="8">
<el-form-item label="型号" prop="model"> <el-form-item label="体积（m3）" prop="volume">
<el-input v-model="form.model" placeholder="请输入型号" /> <el-input v-model="form.volume" placeholder="请输入体积" style="width: 170px" />
</el-form-item> </el-form-item>
<el-form-item label="唛头" prop="shippingMark"> </el-col>
<el-input v-model="form.shippingMark" placeholder="请输入唛头" /> </el-row>
</el-form-item>
<el-form-item label="车数量" prop="carNum"> <el-row :gutter="20">
<el-input v-model="form.carNum" placeholder="请输入车数量" /> <el-col :span="8">
</el-form-item> <el-form-item label="发货人" prop="consigner">
<el-form-item label="件杂货数" prop="spareNum"> <el-input v-model="form.consigner" placeholder="请输入发货人" style="width: 170px" />
<el-input v-model="form.spareNum" placeholder="请输入件杂货数" /> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="重量" prop="weight"> <el-col :span="8">
<el-input v-model="form.weight" placeholder="请输入重量" /> <el-form-item label="收货人" prop="consignee">
</el-form-item> <el-input v-model="form.consignee" placeholder="请输入收货人" style="width: 170px" />
<el-form-item label="体积" prop="volume"> </el-form-item>
<el-input v-model="form.volume" placeholder="请输入体积" /> </el-col>
</el-form-item> </el-row>
<el-form-item label="发货人" prop="consigner">
<el-input v-model="form.consigner" placeholder="请输入发货人" /> <el-form-item label="状态" prop="goodsStatus">
</el-form-item>
<el-form-item label="收货人" prop="consignee">
<el-input v-model="form.consignee" placeholder="请输入收货人" />
</el-form-item>
<el-form-item label="货物状态" prop="goodsStatus">
<el-select v-model="form.goodsStatus" placeholder="请选择货物状态" style="width: 170px"> <el-select v-model="form.goodsStatus" placeholder="请选择货物状态" style="width: 170px">
<el-option label="有计划" value="有计划" /> <el-option label="有计划" value="有计划" />
<el-option label="已靠港" value="已靠港" /> <el-option label="已靠港" value="已靠港" />
@ -108,18 +143,23 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'; 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 { postBrandListAPI } from '@/api/Brand';
import { getManifestImportAPI, getManifestTmpExportAPI, postManifestSaveAPI } from '@/api/Manifest'; import { getManifestImportAPI, getManifestTmpExportAPI, postManifestSaveAPI } from '@/api/Manifest';
import { postPortListAPI } from '@/api/Port'; import { postPortListAPI } from '@/api/Port';
import { postShipListAPI } from '@/api/Ship'; import { postShipGetAPI } from '@/api/Ship';
import ImportFile from '@/components/ImpordFile/index.vue'; import ImportFile from '@/components/ImpordFile/index.vue';
import RemoteSelect from '@/components/RemoteSelect/index.vue'; import RemoteSelect from '@/components/RemoteSelect/index.vue';
import { useUserStore } from '@/store/modules/user';
// 获取当前用户信息
const userState = useUserStore();
const { userInfo } = storeToRefs(userState);
interface propsType { interface propsType {
scheduleId: string; scheduleId: string;
voyage: string; voyage: string;
loadPortId: number | string;
dischargePortId: number | string; dischargePortId: number | string;
} }
@ -127,11 +167,27 @@ interface propsType {
const props = withDefaults(defineProps<propsType>(), { const props = withDefaults(defineProps<propsType>(), {
scheduleId: '', scheduleId: '',
voyage: '', voyage: '',
loadPortId: '',
dischargePortId: '', 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({ const form = reactive({
scheduleId: props.scheduleId, scheduleId: props.scheduleId,
@ -265,6 +321,10 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.form-item {
display: flex;
flex-direction: row;
}
.footer { .footer {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -272,6 +332,7 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
margin-top: 40px;
.footer-left { .footer-left {
display: flex; display: flex;
.btn-down { .btn-down {

8
src/views/Send/components/Send.vue
View File

@ -17,7 +17,6 @@
<ManifestSend <ManifestSend
:scheduleId="manifestProps?.scheduleId" :scheduleId="manifestProps?.scheduleId"
:voyage="manifestProps?.voyage" :voyage="manifestProps?.voyage"
:loadPortId="manifestProps?.loadPortId"
:dischargePortId="manifestProps?.dischargePortId" :dischargePortId="manifestProps?.dischargePortId"
@updateBoatID="onUpdateManifest" @updateBoatID="onUpdateManifest"
v-if="currentActive === 2" v-if="currentActive === 2"
@ -44,15 +43,16 @@ import ManifestSend from './ManifestSend.vue';
const currentActive = ref(1); const currentActive = ref(1);
const currentTitle = ref(['发布船期信息', '发布舱单信息', '提交舱单明细']); const currentTitle = ref(['发布船期信息', '发布舱单信息', '提交舱单明细']);
// 舱单信息类型
interface manifestPropsType { interface manifestPropsType {
scheduleId: string; scheduleId: string;
voyage: string; voyage: string;
loadPortId: number | string;
dischargePortId: string | number; dischargePortId: string | number;
} }
// 舱单信息
const manifestProps = ref<manifestPropsType>(); const manifestProps = ref<manifestPropsType>();
// 发布船期信息 // 发布船期信息-进入舱单信息
const onUpdateBoatID = (params: manifestPropsType) => { const onUpdateBoatID = (params: manifestPropsType) => {
manifestProps.value = params; manifestProps.value = params;
currentActive.value = 2; currentActive.value = 2;
@ -94,7 +94,7 @@ const onUpdateManifest = (params: manifestDetailPropsType) => {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 30%; width: 380px;
height: 100%; height: 100%;
padding: 40px 0 0 20px; padding: 40px 0 0 20px;
background-color: #027db4; background-color: #027db4;