feat: 船货修改功能
parent
016f8ce306
commit
b072ce9879
|
@ -37,9 +37,9 @@
|
||||||
</template>
|
</template>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="数据覆盖 :">
|
<!-- <el-form-item label="数据覆盖 :">
|
||||||
<el-switch v-model="isCover" />
|
<el-switch v-model="isCover" />
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
@ -79,6 +79,8 @@ const acceptParams = (params: ExcelParameterProps) => {
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const emits = defineEmits(['endFileUpload']);
|
||||||
|
|
||||||
// 文件上传
|
// 文件上传
|
||||||
const uploadExcel = async (param: UploadRequestOptions) => {
|
const uploadExcel = async (param: UploadRequestOptions) => {
|
||||||
let excelFormData = new FormData();
|
let excelFormData = new FormData();
|
||||||
|
@ -87,6 +89,7 @@ const uploadExcel = async (param: UploadRequestOptions) => {
|
||||||
await parameter.value.importApi!(excelFormData);
|
await parameter.value.importApi!(excelFormData);
|
||||||
parameter.value.getTableList && parameter.value.getTableList();
|
parameter.value.getTableList && parameter.value.getTableList();
|
||||||
dialogVisible.value = false;
|
dialogVisible.value = false;
|
||||||
|
emits('endFileUpload');
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -0,0 +1,75 @@
|
||||||
|
<template>
|
||||||
|
<el-select
|
||||||
|
v-model="valueContent"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
style="width: 100%"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
remote
|
||||||
|
reserve-keyword
|
||||||
|
remote-show-suffix
|
||||||
|
:remote-method="onRemoteData"
|
||||||
|
:loading="selectLoading"
|
||||||
|
:disabled="disabled"
|
||||||
|
value-key="id"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in optionList" :key="item.id" :label="item.text" :value="item" />
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useRequest } from 'vue-hooks-plus';
|
||||||
|
import { dictionaryListType } from '@/types';
|
||||||
|
|
||||||
|
interface SelectType {
|
||||||
|
value: string | number | dictionaryListType;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
api?: (params: any) => Promise<any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 接受父组件参数
|
||||||
|
const props = withDefaults(defineProps<SelectType>(), {
|
||||||
|
value: '',
|
||||||
|
placeholder: '请选择',
|
||||||
|
disabled: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 内容监听,触发父组件改变,实现双向数据绑定
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(event: 'update:value', value: string | number | dictionaryListType): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const valueContent = computed({
|
||||||
|
get() {
|
||||||
|
return props.value;
|
||||||
|
},
|
||||||
|
set(val: string | number | dictionaryListType) {
|
||||||
|
emit('update:value', val);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 远程搜索loading
|
||||||
|
const selectLoading = ref(false);
|
||||||
|
|
||||||
|
// 选项列表
|
||||||
|
const optionList = ref<dictionaryListType[]>([]);
|
||||||
|
|
||||||
|
const { runAsync } = useRequest(props.api!, {
|
||||||
|
debounceWait: 500,
|
||||||
|
onSuccess: (list) => {
|
||||||
|
optionList.value = list.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取列表
|
||||||
|
const onRemoteData = async (query: string) => {
|
||||||
|
selectLoading.value = true;
|
||||||
|
const { data } = await runAsync({ q: query });
|
||||||
|
selectLoading.value = false;
|
||||||
|
optionList.value = data;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
|
@ -1,5 +1,14 @@
|
||||||
import { PageRowsType } from '.';
|
import { PageRowsType } from '.';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发布人
|
||||||
|
*/
|
||||||
|
export interface CreateUserType {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
phone: string;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 船舶信息类型
|
* 船舶信息类型
|
||||||
*/
|
*/
|
||||||
|
@ -7,6 +16,7 @@ export interface BoatInfoType {
|
||||||
id: number;
|
id: number;
|
||||||
createBy: number;
|
createBy: number;
|
||||||
createDate: string;
|
createDate: string;
|
||||||
|
createUser: CreateUserType;
|
||||||
updateBy: number;
|
updateBy: number;
|
||||||
updateDate: string;
|
updateDate: string;
|
||||||
version: number;
|
version: number;
|
||||||
|
@ -201,6 +211,8 @@ export interface ShipType {
|
||||||
seaworthiness: string;
|
seaworthiness: string;
|
||||||
regular: string;
|
regular: string;
|
||||||
status: string;
|
status: string;
|
||||||
|
layer: number;
|
||||||
|
fragment: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -48,11 +48,11 @@
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-title">发布单位:</div>
|
<div class="info-title">发布单位:</div>
|
||||||
<div class="info-text">{{ userInfo.enterpriseName }}</div>
|
<div class="info-text">{{ dialogProps.enterprise?.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-title">发布人:</div>
|
<div class="info-title">发布人:</div>
|
||||||
<div class="info-text">{{ userInfo.username }}</div>
|
<div class="info-text">{{ dialogProps.createUser?.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-title">发布时间:</div>
|
<div class="info-title">发布时间:</div>
|
||||||
|
@ -64,7 +64,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-title">联系电话:</div>
|
<div class="info-title">联系电话:</div>
|
||||||
<div class="info-text">暂无</div>
|
<div class="info-text">{{ dialogProps.createUser?.phone }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
|
@ -76,9 +76,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { storeToRefs } from 'pinia';
|
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useUserStore } from '@/store/modules/user';
|
|
||||||
import { BoatInfoType } from '@/types/boatInfo';
|
import { BoatInfoType } from '@/types/boatInfo';
|
||||||
|
|
||||||
// 是否显示dialog
|
// 是否显示dialog
|
||||||
|
@ -95,10 +93,6 @@ const isShowDialog = (params: BoatInfoType) => {
|
||||||
|
|
||||||
// 向父组件暴露该方法
|
// 向父组件暴露该方法
|
||||||
defineExpose({ isShowDialog });
|
defineExpose({ isShowDialog });
|
||||||
|
|
||||||
// 获取用户信息
|
|
||||||
const userState = useUserStore();
|
|
||||||
const { userInfo } = storeToRefs(userState);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -149,7 +143,6 @@ const { userInfo } = storeToRefs(userState);
|
||||||
.info {
|
.info {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 238px;
|
width: 238px;
|
||||||
height: 180px;
|
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
font-family: 'Arial Normal', Arial;
|
font-family: 'Arial Normal', Arial;
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<div class="card-title">请选择船名</div>
|
<div class="card-title">请选择船名</div>
|
||||||
<div class="card-text">
|
<div class="card-text">
|
||||||
<RemoteSelect
|
<RemoteSelect
|
||||||
v-model:value="searchTableForm.scheduleId"
|
v-model:value="searchTableForm.scheduleData"
|
||||||
:api="postSaleShipListAPI"
|
:api="postSaleShipListAPI"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
/>
|
/>
|
||||||
|
@ -24,10 +24,10 @@
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="deck">
|
<div class="deck" v-if="deskShipData?.layer > 0 && searchTableForm.scheduleData?.id">
|
||||||
<div
|
<div
|
||||||
class="deck-btn"
|
class="deck-btn"
|
||||||
v-for="item in 12"
|
v-for="item in deskShipData?.layer"
|
||||||
:class="{ 'deck-btn-active': item === currentDesk }"
|
:class="{ 'deck-btn-active': item === currentDesk }"
|
||||||
:key="item"
|
:key="item"
|
||||||
@click="onClickOpenDeck(item)"
|
@click="onClickOpenDeck(item)"
|
||||||
|
@ -62,9 +62,9 @@
|
||||||
<div class="right-table">
|
<div class="right-table">
|
||||||
<el-table v-loading="tableLoading" :data="tableData" style="width: 100%" height="400px">
|
<el-table v-loading="tableLoading" :data="tableData" style="width: 100%" height="400px">
|
||||||
<el-table-column type="index" label="No." width="50" />
|
<el-table-column type="index" label="No." width="50" />
|
||||||
|
<el-table-column prop="billNo" label="积载编号" align="center" width="160" />
|
||||||
<el-table-column prop="cabin" label="舱段" align="center" width="80" />
|
<el-table-column prop="cabin" label="舱段" align="center" width="80" />
|
||||||
<el-table-column prop="billNo" label="贸易类型" align="center" width="160" />
|
<el-table-column prop="billNo" label="贸易类型" align="center" width="160" />
|
||||||
<el-table-column prop="billNo" label="提单号" align="center" width="160" />
|
|
||||||
<el-table-column label="货名/品牌/型号" align="center" width="200">
|
<el-table-column label="货名/品牌/型号" align="center" width="200">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="goods-name">
|
<div class="goods-name">
|
||||||
|
@ -77,21 +77,40 @@
|
||||||
<el-table-column prop="spareNum" label="件杂货" align="center" width="100" />
|
<el-table-column prop="spareNum" label="件杂货" align="center" width="100" />
|
||||||
<el-table-column prop="weight" label="重量 (kg)" align="center" width="100" />
|
<el-table-column prop="weight" label="重量 (kg)" align="center" width="100" />
|
||||||
<el-table-column prop="volume" label="体积 (m3)" align="center" width="100" />
|
<el-table-column prop="volume" label="体积 (m3)" align="center" width="100" />
|
||||||
<!-- TODO:港口没有 -->
|
|
||||||
<el-table-column prop="consigner" label="发货人" align="center" width="180" />
|
<el-table-column prop="consigner" label="发货人" align="center" width="180" />
|
||||||
<el-table-column prop="consignee" label="收货人" align="center" width="180" />
|
<el-table-column prop="consignee" label="收货人" align="center" width="180" />
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right-map">
|
||||||
|
<div class="map-content">
|
||||||
|
<div>
|
||||||
|
<div style="height: 30px"></div>
|
||||||
|
<div class="triangle-right"></div>
|
||||||
|
</div>
|
||||||
|
<div class="map-deck" v-for="item in deskShipData?.fragment" :key="item">
|
||||||
|
<div class="map-deck-title">{{ item }}舱段</div>
|
||||||
|
<div class="map-deck-item">
|
||||||
|
<div class="item-wrap"><span>No:</span>WOW240001</div>
|
||||||
|
<div class="item-wrap"><span>沃尔沃XC90:</span>20</div>
|
||||||
|
<div class="item-wrap"><span>位置</span>RORO-1-1-1-1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="map-bottom">船舶舱层数据映射关系图 - 此图根据舱单数据生成,仅供参考。</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
import { reactive, ref } from 'vue';
|
import { reactive, ref, watch } from 'vue';
|
||||||
import { postSaleShipListAPI } from '@/api/Boat/info';
|
import { postSaleShipListAPI } from '@/api/Boat/info';
|
||||||
import { getManifestFileExportAPI, getManifestListAPI } from '@/api/Manifest';
|
import { getManifestFileExportAPI, getManifestListAPI } from '@/api/Manifest';
|
||||||
import RemoteSelect from '@/components/RemoteSelect/index.vue';
|
import { postShipGetAPI } from '@/api/Ship';
|
||||||
|
import RemoteSelect from '@/components/RemoteSelect/select.vue';
|
||||||
|
import { dictionaryListType } from '@/types';
|
||||||
|
import { ShipType } from '@/types/boatInfo';
|
||||||
import { ManifestType } from '@/types/manifest';
|
import { ManifestType } from '@/types/manifest';
|
||||||
|
|
||||||
const emits = defineEmits(['ReturnRouter', 'CurrentNav']);
|
const emits = defineEmits(['ReturnRouter', 'CurrentNav']);
|
||||||
|
@ -107,15 +126,18 @@ const tableData = ref<ManifestType[]>([]);
|
||||||
|
|
||||||
// 查询条件
|
// 查询条件
|
||||||
const searchTableForm = reactive({
|
const searchTableForm = reactive({
|
||||||
scheduleId: '',
|
scheduleData: {} as dictionaryListType,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 表格是否加载
|
// 表格是否加载
|
||||||
const tableLoading = ref(false);
|
const tableLoading = ref(false);
|
||||||
|
|
||||||
|
// 舱层列表
|
||||||
|
const deskShipData = ref<ShipType>();
|
||||||
|
|
||||||
// 查询
|
// 查询
|
||||||
const onClickSearch = async () => {
|
const onClickSearch = async () => {
|
||||||
if (searchTableForm.scheduleId === '') {
|
if (!searchTableForm.scheduleData?.id) {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: '请选择船名',
|
message: '请选择船名',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
|
@ -124,8 +146,13 @@ const onClickSearch = async () => {
|
||||||
}
|
}
|
||||||
tableLoading.value = true;
|
tableLoading.value = true;
|
||||||
|
|
||||||
|
// 获取船舶舱层
|
||||||
|
const { data: deckData } = await postShipGetAPI({ id: searchTableForm.scheduleData.extra2 });
|
||||||
|
|
||||||
|
deskShipData.value = deckData;
|
||||||
|
|
||||||
const { data } = await getManifestListAPI({
|
const { data } = await getManifestListAPI({
|
||||||
scheduleId: searchTableForm.scheduleId,
|
scheduleId: searchTableForm.scheduleData.id,
|
||||||
});
|
});
|
||||||
tableData.value = data;
|
tableData.value = data;
|
||||||
|
|
||||||
|
@ -135,13 +162,25 @@ const onClickSearch = async () => {
|
||||||
// 当前选中的舱层
|
// 当前选中的舱层
|
||||||
const currentDesk = ref(0);
|
const currentDesk = ref(0);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => searchTableForm.scheduleData?.id,
|
||||||
|
(newValue) => {
|
||||||
|
if (!newValue) {
|
||||||
|
currentDesk.value = 0;
|
||||||
|
deskShipData.value = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// 舱层搜索
|
// 舱层搜索
|
||||||
const onClickOpenDeck = async (item: number) => {
|
const onClickOpenDeck = async (item: number) => {
|
||||||
// 判断用户是否传递了船ID
|
// 判断用户是否传递了船ID
|
||||||
if (searchTableForm.scheduleId) {
|
if (searchTableForm.scheduleData.id) {
|
||||||
|
if (currentDesk.value === item) return;
|
||||||
|
|
||||||
currentDesk.value = item;
|
currentDesk.value = item;
|
||||||
const { data } = await getManifestListAPI({
|
const { data } = await getManifestListAPI({
|
||||||
scheduleId: searchTableForm.scheduleId,
|
scheduleId: searchTableForm.scheduleData.id,
|
||||||
desk: item,
|
desk: item,
|
||||||
});
|
});
|
||||||
tableData.value = data;
|
tableData.value = data;
|
||||||
|
@ -391,6 +430,68 @@ const onClickReturn = () => {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
.right-map {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 374px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
background-color: rgb(51 51 51 / 100%);
|
||||||
|
border-radius: 13px;
|
||||||
|
.map-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
width: 100%;
|
||||||
|
.triangle-right {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 135px solid transparent;
|
||||||
|
border-bottom: 135px solid transparent;
|
||||||
|
border-left: 217px solid #f2f2f2;
|
||||||
|
}
|
||||||
|
.map-deck {
|
||||||
|
width: 258px;
|
||||||
|
height: 300px;
|
||||||
|
margin-right: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
.map-deck-title {
|
||||||
|
height: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #f2f2f2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.map-deck-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
.item-wrap {
|
||||||
|
font-size: 13px;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #333;
|
||||||
|
span {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 17px;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #0ff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -21,7 +21,7 @@ defineProps({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.chart {
|
.chart {
|
||||||
width: 280px;
|
width: 300px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -154,6 +154,9 @@ const outImportVoyages = ref({
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
|
formatter: function (name: string) {
|
||||||
|
return name.length > 3 ? name.substr(0, 3) + '...' : name;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -198,6 +201,9 @@ const outExportVoyages = ref({
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
|
formatter: function (name: string) {
|
||||||
|
return name.length > 3 ? name.substr(0, 3) + '...' : name;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -242,6 +248,9 @@ const inTotalVoyages = ref({
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
|
formatter: function (name: string) {
|
||||||
|
return name.length > 3 ? name.substr(0, 3) + '...' : name;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -286,6 +295,9 @@ const inYearVoyages = ref({
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
|
formatter: function (name: string) {
|
||||||
|
return name.length > 3 ? name.substr(0, 3) + '...' : name;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -330,6 +342,9 @@ const outImportCargos = ref({
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
|
formatter: function (name: string) {
|
||||||
|
return name.length > 3 ? name.substr(0, 3) + '...' : name;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -371,6 +386,10 @@ const outExportCargos = ref({
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
left: 'left',
|
left: 'left',
|
||||||
top: 'middle',
|
top: 'middle',
|
||||||
|
itemWidth: 20,
|
||||||
|
formatter: function (name: string) {
|
||||||
|
return name.length > 3 ? name.substr(0, 3) + '...' : name;
|
||||||
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
|
@ -418,6 +437,9 @@ const inTotalCargos = ref({
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
|
formatter: function (name: string) {
|
||||||
|
return name.length > 3 ? name.substr(0, 3) + '...' : name;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -462,6 +484,9 @@ const inYearCargos = ref({
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
|
formatter: function (name: string) {
|
||||||
|
return name.length > 3 ? name.substr(0, 3) + '...' : name;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -588,7 +613,7 @@ onMounted(async () => {
|
||||||
.charts {
|
.charts {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-right: 50px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.home-footer {
|
.home-footer {
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
v-for="item in noticeList"
|
v-for="item in noticeList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="list-item"
|
class="list-item"
|
||||||
|
:class="{ 'list-item-active': currentNotice === item.id }"
|
||||||
@click="onClickOpenDialog(item)"
|
@click="onClickOpenDialog(item)"
|
||||||
>
|
>
|
||||||
<div class="item-icon"></div>
|
<div class="item-icon"></div>
|
||||||
|
@ -51,9 +52,6 @@ const onClickReturn = () => {
|
||||||
const noticeList = ref<NoticeType[]>([]);
|
const noticeList = ref<NoticeType[]>([]);
|
||||||
const noticeViewData = ref<NoticeType>();
|
const noticeViewData = ref<NoticeType>();
|
||||||
|
|
||||||
// 是否显示公告
|
|
||||||
const isShowNotice = ref(false);
|
|
||||||
|
|
||||||
// 分页参数-当前页数
|
// 分页参数-当前页数
|
||||||
const currentPage = ref(1);
|
const currentPage = ref(1);
|
||||||
|
|
||||||
|
@ -82,10 +80,13 @@ const noticeListLoad = async () => {
|
||||||
await getNoticeList();
|
await getNoticeList();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 当前选中的公告
|
||||||
|
const currentNotice = ref(0);
|
||||||
|
|
||||||
const onClickOpenDialog = async (row: NoticeType) => {
|
const onClickOpenDialog = async (row: NoticeType) => {
|
||||||
|
currentNotice.value = row.id;
|
||||||
const { data } = await noticeGetAPI({ id: row.id });
|
const { data } = await noticeGetAPI({ id: row.id });
|
||||||
noticeViewData.value = data;
|
noticeViewData.value = data;
|
||||||
isShowNotice.value = true;
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -154,6 +155,14 @@ const onClickOpenDialog = async (row: NoticeType) => {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.list-item:hover {
|
||||||
|
color: #333;
|
||||||
|
background-color: #ffffc9;
|
||||||
|
}
|
||||||
|
.list-item-active {
|
||||||
|
color: #333;
|
||||||
|
background-color: #ffffc9;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -0,0 +1,485 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog v-model="dialogVisible" width="802px" style="padding: 0" :show-close="false">
|
||||||
|
<template #header>
|
||||||
|
<div class="header">船期信息详情</div>
|
||||||
|
</template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="content-left">
|
||||||
|
<div class="right-info">
|
||||||
|
<el-form :model="form" :rules="formRules" ref="ruleFormRef" label-width="auto">
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">起运港:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="loadPortId">
|
||||||
|
<el-input
|
||||||
|
v-model="dialogProps.row.loadWharf!.name"
|
||||||
|
style="width: 170px"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">目的港:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="dischargePortId">
|
||||||
|
<RemoteSelect
|
||||||
|
v-model:value="form.dischargePortId"
|
||||||
|
placeholder="请输入目的港"
|
||||||
|
:api="postPortListAPI"
|
||||||
|
style="width: 170px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">卸货码头:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="dischargeWharfId">
|
||||||
|
<RemoteSelect
|
||||||
|
v-model:value="form.dischargeWharfId"
|
||||||
|
placeholder="请输入卸货码头"
|
||||||
|
style="width: 170px"
|
||||||
|
:api="() => postWharfListAPI({ ref: form.dischargePortId })"
|
||||||
|
:disabled="!form.dischargePortId"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">船名:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="shipId">
|
||||||
|
<RemoteSelect
|
||||||
|
v-model:value="form.shipId"
|
||||||
|
placeholder="请输入船名"
|
||||||
|
style="width: 170px"
|
||||||
|
:api="postShipListAPI"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">航次:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="voyage">
|
||||||
|
<el-input v-model="form.voyage" placeholder="请输入航次" style="width: 170px" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="item">
|
||||||
|
<div class="title">航线:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="shipRouteId">
|
||||||
|
<RemoteSelect
|
||||||
|
v-model:value="form.shipRouteId"
|
||||||
|
placeholder="请选择航线"
|
||||||
|
:api="postRouteListAPI"
|
||||||
|
style="width: 170px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">计划装载数量:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item required>
|
||||||
|
<div class="form-item">
|
||||||
|
<el-form-item prop="carNumPlan" style="width: 100%">
|
||||||
|
<el-input
|
||||||
|
v-model="form.carNumPlan"
|
||||||
|
placeholder="商品车数量"
|
||||||
|
style="width: 75px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<div style="margin: 0 8px; text-align: center">/</div>
|
||||||
|
<el-form-item prop="spareNumPlan" style="width: 100%">
|
||||||
|
<el-input
|
||||||
|
v-model="form.spareNumPlan"
|
||||||
|
placeholder="件杂货数量"
|
||||||
|
style="width: 75px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">实际装载数量:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item required>
|
||||||
|
<el-form-item prop="carNumActual">
|
||||||
|
<el-input
|
||||||
|
v-model="form.carNumActual"
|
||||||
|
placeholder="商品车数量"
|
||||||
|
style="width: 75px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<div style="margin: 0 8px; text-align: center">/</div>
|
||||||
|
<el-form-item prop="spareNumActual">
|
||||||
|
<el-input
|
||||||
|
v-model="form.spareNumActual"
|
||||||
|
placeholder="件杂货数量"
|
||||||
|
style="width: 75px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">计划离港时间:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="departureDatePlan">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.departureDatePlan"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="请选择计划离港时间"
|
||||||
|
style="width: 170px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">实际离港时间:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.departureDateActual"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="请选择实际离港时间"
|
||||||
|
style="width: 170px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">当前状态:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="shipStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="form.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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="title">贸易类型:</div>
|
||||||
|
<div class="text">
|
||||||
|
<el-form-item prop="tradeType">
|
||||||
|
<el-select
|
||||||
|
v-model="form.tradeType"
|
||||||
|
placeholder="请选择贸易类型"
|
||||||
|
style="width: 170px"
|
||||||
|
>
|
||||||
|
<el-option label="外贸进口" value="外贸进口" />
|
||||||
|
<el-option label="外贸出口" value="外贸出口" />
|
||||||
|
<el-option label="内贸" value="内贸" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="btn" @click="onClickConfirm(ruleFormRef)">保存修改</div>
|
||||||
|
<div class="btn-del" @click="onClickDelete">删除发布</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-right">
|
||||||
|
<div class="info">
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-title">发布单位:</div>
|
||||||
|
<div class="info-text">{{ dialogProps.row.enterprise?.name }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-title">发布人:</div>
|
||||||
|
<div class="info-text">{{ dialogProps.row.createUser?.name }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-title">发布时间:</div>
|
||||||
|
<div class="info-text">{{ dialogProps.row.createDate }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-title">更新时间:</div>
|
||||||
|
<div class="info-text">{{ dialogProps.row.updateDate }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-title">联系电话:</div>
|
||||||
|
<div class="info-text">{{ dialogProps.row.createUser?.phone }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||||
|
import { nextTick, reactive, ref, watch } from 'vue';
|
||||||
|
// import { postRouteListAPI } from '@/api/BoatRoute';
|
||||||
|
import { postPortListAPI } from '@/api/Port';
|
||||||
|
import { postShipListAPI } from '@/api/Ship';
|
||||||
|
import { postWharfListAPI } from '@/api/Wharf';
|
||||||
|
import RemoteSelect from '@/components/RemoteSelect/index.vue';
|
||||||
|
import { BoatInfoType } from '@/types/boatInfo';
|
||||||
|
|
||||||
|
interface DialogPropsType {
|
||||||
|
row: Partial<BoatInfoType>;
|
||||||
|
isView: boolean;
|
||||||
|
api?: (params: any) => Promise<any>;
|
||||||
|
delApi?: (params: any) => Promise<any>;
|
||||||
|
getTableList?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 是否显示dialog
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
|
||||||
|
// 父组件传递的值
|
||||||
|
const dialogProps = ref<DialogPropsType>({
|
||||||
|
isView: false,
|
||||||
|
row: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 船期信息表单
|
||||||
|
const form = reactive<any>({
|
||||||
|
id: '',
|
||||||
|
enterpriseId: '',
|
||||||
|
loadPortId: '',
|
||||||
|
loadWharfId: '',
|
||||||
|
shipRouteId: '',
|
||||||
|
dischargePortId: '',
|
||||||
|
dischargeWharfId: '',
|
||||||
|
shipId: '',
|
||||||
|
voyage: '',
|
||||||
|
carNumPlan: '',
|
||||||
|
spareNumPlan: '',
|
||||||
|
carNumActual: '',
|
||||||
|
spareNumActual: '',
|
||||||
|
departureDatePlan: '',
|
||||||
|
departureDateActual: '',
|
||||||
|
shipStatus: '',
|
||||||
|
tradeType: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听卸货港口变化
|
||||||
|
watch(
|
||||||
|
() => form.dischargePortId ?? '',
|
||||||
|
(newValue, oldValue) => {
|
||||||
|
if (newValue !== oldValue) {
|
||||||
|
form.dischargeWharfId = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 初始化表单
|
||||||
|
const initForm = (params: BoatInfoType) => {
|
||||||
|
form.id = params.id;
|
||||||
|
form.enterpriseId = params.enterpriseId;
|
||||||
|
form.loadPortId = params.loadPortId;
|
||||||
|
form.loadWharfId = params.loadWharfId;
|
||||||
|
form.shipRouteId = params.shipRouteId;
|
||||||
|
form.shipId = params.shipId;
|
||||||
|
form.voyage = params.voyage;
|
||||||
|
form.dischargePortId = params.dischargePortId;
|
||||||
|
form.dischargeWharfId = params.dischargeWharfId;
|
||||||
|
form.carNumPlan = params.carNumPlan;
|
||||||
|
form.spareNumPlan = params.spareNumPlan;
|
||||||
|
form.carNumActual = params.carNumActual;
|
||||||
|
form.spareNumActual = params.spareNumActual;
|
||||||
|
form.departureDatePlan = params.departureDatePlan;
|
||||||
|
form.departureDateActual = params.departureDateActual;
|
||||||
|
form.shipStatus = params.shipStatus;
|
||||||
|
form.tradeType = params.tradeType;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 显示dialog,新增/编辑订阅
|
||||||
|
const isShowDialog = (params: DialogPropsType) => {
|
||||||
|
nextTick(() => {
|
||||||
|
dialogProps.value = params;
|
||||||
|
initForm(params.row as BoatInfoType);
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 向父组件暴露该方法
|
||||||
|
defineExpose({ isShowDialog });
|
||||||
|
|
||||||
|
// 表单校验规则
|
||||||
|
const formRules = reactive<FormRules>({
|
||||||
|
shipId: [{ required: true, message: '请输入船ID', trigger: 'blur' }],
|
||||||
|
voyage: [{ required: true, message: '请输入航次', trigger: 'blur' }],
|
||||||
|
dischargeWharfId: [{ required: true, message: '请输入卸货码头', trigger: 'blur' }],
|
||||||
|
carNumPlan: [{ required: true, message: '请输入计划商品车数量', trigger: 'blur' }],
|
||||||
|
spareNumPlan: [{ required: true, message: '请输入计划件杂货数量', trigger: 'blur' }],
|
||||||
|
carNumActual: [{ required: true, message: '请输入实际商品车数量', trigger: 'blur' }],
|
||||||
|
spareNumActual: [{ required: true, message: '请输入实际件杂货数量', trigger: 'blur' }],
|
||||||
|
departureDatePlan: [{ required: true, message: '请选择计划离港时间', trigger: 'change' }],
|
||||||
|
shipStatus: [{ required: true, message: '请选择船舶状态', trigger: 'change' }],
|
||||||
|
dischargePortId: [{ required: true, message: '请输入卸货港口', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 表单节点
|
||||||
|
const ruleFormRef = ref<FormInstance>();
|
||||||
|
|
||||||
|
// 新增/编辑
|
||||||
|
const onClickConfirm = (formEl: FormInstance | undefined) => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.validate(async (valid) => {
|
||||||
|
if (!valid) return;
|
||||||
|
try {
|
||||||
|
await dialogProps.value.api!(form);
|
||||||
|
ElMessage({
|
||||||
|
message: `编辑成功`,
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
dialogProps.value.getTableList!();
|
||||||
|
} finally {
|
||||||
|
dialogVisible.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
endManifestDetail: [];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const onClickDelete = () => {
|
||||||
|
ElMessageBox.confirm(`你确定要删除船货信息吗?`, '温馨提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
draggable: true,
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
await dialogProps.value.delApi!([form.id]);
|
||||||
|
// 更新表格
|
||||||
|
emit('endManifestDetail');
|
||||||
|
dialogVisible.value = false;
|
||||||
|
ElMessage({
|
||||||
|
message: '删除成功',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
console.log('用户点击了取消');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 50px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #a30014;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px 60px;
|
||||||
|
.content-left {
|
||||||
|
width: 319px;
|
||||||
|
.right-info {
|
||||||
|
width: 100%;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
.title {
|
||||||
|
width: 147px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
flex: 1;
|
||||||
|
color: #027db4;
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
padding: 40px 0 0;
|
||||||
|
background-color: #fff;
|
||||||
|
.btn {
|
||||||
|
width: 120px;
|
||||||
|
height: 55px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 55px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgb(109 0 14 / 100%);
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
|
||||||
|
}
|
||||||
|
.btn-del {
|
||||||
|
width: 120px;
|
||||||
|
height: 55px;
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 55px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgb(0 0 0 / 100%);
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 238px;
|
||||||
|
height: 342px;
|
||||||
|
.info {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 238px;
|
||||||
|
padding: 15px 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-family: 'Arial Normal', Arial;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #333;
|
||||||
|
background-color: rgb(242 242 242 / 100%);
|
||||||
|
border-radius: 7px;
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 30px;
|
||||||
|
.info-title {
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
.info-text {
|
||||||
|
flex: 1;
|
||||||
|
color: #027db4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,5 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<el-form class="form" ref="ruleFormRef" :rules="formRules" :model="boatForm">
|
<el-form
|
||||||
|
class="form"
|
||||||
|
ref="ruleFormRef"
|
||||||
|
:rules="formRules"
|
||||||
|
:model="boatForm"
|
||||||
|
require-asterisk-position="right"
|
||||||
|
>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="船名" prop="shipId">
|
<el-form-item label="船名" prop="shipId">
|
||||||
|
@ -180,7 +186,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<ImportFile ref="importFileRef" />
|
<ImportFile ref="importFileRef" @endFileUpload="endFileUpload" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -310,8 +316,13 @@ interface propsType {
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
updateBoatID: [value: propsType];
|
updateBoatID: [value: propsType];
|
||||||
|
endManifestDetail: [];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const endFileUpload = () => {
|
||||||
|
emit('endManifestDetail');
|
||||||
|
};
|
||||||
|
|
||||||
// 提交
|
// 提交
|
||||||
const onClickConfirm = (formEl: FormInstance | undefined) => {
|
const onClickConfirm = (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return;
|
if (!formEl) return;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="historyTable">
|
<div class="historyTable">
|
||||||
<el-table :data="historyData">
|
<el-table :data="boatInfoTable" @row-dblclick="onClickEditHistoryTable">
|
||||||
<el-table-column prop="ship.name" label="船名" align="center" />
|
<el-table-column prop="ship.name" label="船名" align="center" />
|
||||||
<el-table-column prop="voyage" label="航次" align="center" />
|
<el-table-column prop="voyage" label="航次" align="center" />
|
||||||
<el-table-column label="装货港 / 装货码头" align="center">
|
<el-table-column label="装货港 / 装货码头" align="center">
|
||||||
|
@ -19,8 +19,20 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="carNumActual" label="商品车数量" align="center" />
|
<el-table-column prop="carNumActual" label="商品车数量" align="center" />
|
||||||
<el-table-column prop="spareNumActual" label="件杂货数量" align="center" />
|
<el-table-column prop="spareNumActual" label="件杂货数量" align="center" />
|
||||||
<el-table-column prop="departureDatePlan" label="计划离港时间" align="center" />
|
<el-table-column label="计划离港时间" align="center">
|
||||||
<el-table-column prop="departureDateActual" label="实际离港时间" align="center" />
|
<template #default="scope">
|
||||||
|
<div class="goods-name">
|
||||||
|
{{ handleTableData(scope.row?.departureDatePlan) }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="实际离港时间" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<div class="goods-name">
|
||||||
|
{{ handleTableData(scope.row?.departureDateActual) }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column prop="shipStatus" label="当前状态" align="center" />
|
<el-table-column prop="shipStatus" label="当前状态" align="center" />
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
|
@ -97,6 +109,7 @@
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<BoatInfoDialog ref="boatInfoDialogRef" @endManifestDetail="endManifestDetail" />
|
||||||
<ManifestDialog ref="manifestDialogRef" />
|
<ManifestDialog ref="manifestDialogRef" />
|
||||||
<ManifestDetailDialog ref="manifestDetailDialogRef" />
|
<ManifestDetailDialog ref="manifestDetailDialogRef" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -106,10 +119,20 @@
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { getManifestListAPI, postManifestSaveAPI } from '@/api/Manifest';
|
import {
|
||||||
import { getManifestDetailListAPI, postManifestDetailSaveAPI } from '@/api/Manifest/detail';
|
getSailScheduleDeleteAPI,
|
||||||
|
getSailScheduleGetAPI,
|
||||||
|
getSailScheduleSaveAPI,
|
||||||
|
} from '@/api/Boat/info';
|
||||||
|
import { getManifestListAPI, postManifestDeleteAPI, postManifestSaveAPI } from '@/api/Manifest';
|
||||||
|
import {
|
||||||
|
getManifestDetailListAPI,
|
||||||
|
postManifestDetailDeleteAPI,
|
||||||
|
postManifestDetailSaveAPI,
|
||||||
|
} from '@/api/Manifest/detail';
|
||||||
import { BoatInfoType } from '@/types/boatInfo';
|
import { BoatInfoType } from '@/types/boatInfo';
|
||||||
import { ManifestDetailType, ManifestType } from '@/types/manifest';
|
import { ManifestDetailType, ManifestType } from '@/types/manifest';
|
||||||
|
import BoatInfoDialog from './BoatInfoDialog.vue';
|
||||||
import ManifestDetailDialog from './ManifestDetailDialog.vue';
|
import ManifestDetailDialog from './ManifestDetailDialog.vue';
|
||||||
import ManifestDialog from './ManifestDialog.vue';
|
import ManifestDialog from './ManifestDialog.vue';
|
||||||
|
|
||||||
|
@ -118,6 +141,31 @@ const props = defineProps<{
|
||||||
historyData: BoatInfoType[];
|
historyData: BoatInfoType[];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const handleTableData = (item: string) => {
|
||||||
|
return dayjs(item).format('YYYY-MM-DD HH:mm');
|
||||||
|
};
|
||||||
|
|
||||||
|
const boatInfoTable = ref<BoatInfoType[]>([]);
|
||||||
|
|
||||||
|
// 获取船货信息
|
||||||
|
const getBoatInfoTable = async () => {
|
||||||
|
const { data } = await getSailScheduleGetAPI({ id: props.historyData[0].id });
|
||||||
|
|
||||||
|
boatInfoTable.value = [data];
|
||||||
|
};
|
||||||
|
|
||||||
|
const boatInfoDialogRef = ref<InstanceType<typeof BoatInfoDialog> | null>(null);
|
||||||
|
const onClickEditHistoryTable = (row: BoatInfoType) => {
|
||||||
|
const params = {
|
||||||
|
isView: false,
|
||||||
|
row: { ...row },
|
||||||
|
api: getSailScheduleSaveAPI,
|
||||||
|
delApi: getSailScheduleDeleteAPI,
|
||||||
|
getTableList: getBoatInfoTable,
|
||||||
|
};
|
||||||
|
boatInfoDialogRef.value?.isShowDialog(params);
|
||||||
|
};
|
||||||
|
|
||||||
// 舱单信息
|
// 舱单信息
|
||||||
const manifestTable = ref<ManifestType[]>([]);
|
const manifestTable = ref<ManifestType[]>([]);
|
||||||
|
|
||||||
|
@ -137,6 +185,7 @@ const onClickEditManifest = (row: ManifestType) => {
|
||||||
isView: false,
|
isView: false,
|
||||||
row: { ...row },
|
row: { ...row },
|
||||||
api: postManifestSaveAPI,
|
api: postManifestSaveAPI,
|
||||||
|
delApi: postManifestDeleteAPI,
|
||||||
getTableList: getManifestTable,
|
getTableList: getManifestTable,
|
||||||
};
|
};
|
||||||
manifestDialogRef.value?.isShowDialog(params);
|
manifestDialogRef.value?.isShowDialog(params);
|
||||||
|
@ -158,6 +207,7 @@ interface addManifestDetailType {
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
addManifest: [value: propsType];
|
addManifest: [value: propsType];
|
||||||
addManifestDetail: [value: addManifestDetailType];
|
addManifestDetail: [value: addManifestDetailType];
|
||||||
|
endManifestDetail: [];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
// 继续添加舱单信息
|
// 继续添加舱单信息
|
||||||
|
@ -173,6 +223,7 @@ const onClickAddManifest = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
await getBoatInfoTable();
|
||||||
await getManifestTable();
|
await getManifestTable();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -208,6 +259,7 @@ const onClickEditManifestDetail = (row: ManifestDetailType) => {
|
||||||
isView: false,
|
isView: false,
|
||||||
row: { ...row },
|
row: { ...row },
|
||||||
api: postManifestDetailSaveAPI,
|
api: postManifestDetailSaveAPI,
|
||||||
|
delApi: postManifestDetailDeleteAPI,
|
||||||
getTableList: resetManifestDetailTable,
|
getTableList: resetManifestDetailTable,
|
||||||
};
|
};
|
||||||
manifestDetailDialogRef.value?.isShowDialog(params);
|
manifestDetailDialogRef.value?.isShowDialog(params);
|
||||||
|
@ -248,6 +300,10 @@ const onClickAddManifestDetail = () => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const endManifestDetail = () => {
|
||||||
|
emit('endManifestDetail');
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -51,6 +51,7 @@
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
|
<el-button @click="onClickDelete" type="danger">删除</el-button>
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button v-show="!dialogProps.isView" type="primary" @click="onClickConfirm(ruleFormRef)">
|
<el-button v-show="!dialogProps.isView" type="primary" @click="onClickConfirm(ruleFormRef)">
|
||||||
确认
|
确认
|
||||||
|
@ -61,7 +62,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||||
import { reactive, ref, watch } from 'vue';
|
import { reactive, ref, watch } from 'vue';
|
||||||
import { postVehicleListAPI } from '@/api/Vehicle';
|
import { postVehicleListAPI } from '@/api/Vehicle';
|
||||||
import { postVehicleDetailListAPI } from '@/api/Vehicle/detail';
|
import { postVehicleDetailListAPI } from '@/api/Vehicle/detail';
|
||||||
|
@ -72,6 +73,7 @@ interface DialogPropsType {
|
||||||
row: Partial<ManifestDetailType>;
|
row: Partial<ManifestDetailType>;
|
||||||
isView: boolean;
|
isView: boolean;
|
||||||
api?: (params: any) => Promise<any>;
|
api?: (params: any) => Promise<any>;
|
||||||
|
delApi?: (params: any) => Promise<any>;
|
||||||
getTableList?: () => void;
|
getTableList?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -98,6 +100,7 @@ const form = reactive<any>({
|
||||||
damageDesc: '',
|
damageDesc: '',
|
||||||
bamm: '',
|
bamm: '',
|
||||||
lrmm: '',
|
lrmm: '',
|
||||||
|
id: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 监听车型明细
|
// 监听车型明细
|
||||||
|
@ -112,6 +115,7 @@ watch(
|
||||||
|
|
||||||
// 初始化表单
|
// 初始化表单
|
||||||
const initForm = (params: ManifestDetailType) => {
|
const initForm = (params: ManifestDetailType) => {
|
||||||
|
form.id = params.id;
|
||||||
form.manifestId = params.manifestId;
|
form.manifestId = params.manifestId;
|
||||||
form.vehicleTypeId = params.vehicleTypeId;
|
form.vehicleTypeId = params.vehicleTypeId;
|
||||||
form.vehicleTypeDetailId = params.vehicleTypeDetailId;
|
form.vehicleTypeDetailId = params.vehicleTypeDetailId;
|
||||||
|
@ -164,6 +168,29 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const onClickDelete = () => {
|
||||||
|
ElMessageBox.confirm(`你确定要删除舱单明细吗?`, '温馨提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
draggable: true,
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
await dialogProps.value.delApi!([form.id]);
|
||||||
|
// 更新表格
|
||||||
|
dialogProps.value.getTableList!();
|
||||||
|
dialogVisible.value = false;
|
||||||
|
ElMessage({
|
||||||
|
message: '删除成功',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
console.log('用户点击了取消');
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
@ -1,5 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<el-form class="form" ref="ruleFormRef" :rules="formRules" :model="form">
|
<el-form
|
||||||
|
class="form"
|
||||||
|
ref="ruleFormRef"
|
||||||
|
:rules="formRules"
|
||||||
|
:model="form"
|
||||||
|
require-asterisk-position="right"
|
||||||
|
>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="提单号">
|
<el-form-item label="提单号">
|
||||||
|
@ -128,7 +134,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<ImportFile ref="importFileRef" />
|
<ImportFile ref="importFileRef" @endFileUpload="endFileUpload" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -252,17 +258,6 @@ const onClickUpload = () => {
|
||||||
importFileRef.value?.acceptParams(params);
|
importFileRef.value?.acceptParams(params);
|
||||||
};
|
};
|
||||||
|
|
||||||
// interface emitsType {
|
|
||||||
// scheduleId: string;
|
|
||||||
// voyage: string;
|
|
||||||
// loadPortId: string;
|
|
||||||
// dischargePortId: string;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const emit = defineEmits<{
|
|
||||||
// updateBoatID: [value: emitsType];
|
|
||||||
// }>();
|
|
||||||
|
|
||||||
// 保存并继续提交
|
// 保存并继续提交
|
||||||
const onClickAddSubmit = (formEl: FormInstance | undefined) => {
|
const onClickAddSubmit = (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return;
|
if (!formEl) return;
|
||||||
|
@ -281,6 +276,10 @@ const onClickAddSubmit = (formEl: FormInstance | undefined) => {
|
||||||
|
|
||||||
const emits = defineEmits(['endManifestDetail']);
|
const emits = defineEmits(['endManifestDetail']);
|
||||||
|
|
||||||
|
const endFileUpload = () => {
|
||||||
|
emits('endManifestDetail');
|
||||||
|
};
|
||||||
|
|
||||||
// 提交
|
// 提交
|
||||||
const onClickConfirm = (formEl: FormInstance | undefined) => {
|
const onClickConfirm = (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return;
|
if (!formEl) return;
|
||||||
|
|
|
@ -59,6 +59,7 @@
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
|
<el-button @click="onClickDelete" type="danger">删除</el-button>
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button v-show="!dialogProps.isView" type="primary" @click="onClickConfirm(ruleFormRef)">
|
<el-button v-show="!dialogProps.isView" type="primary" @click="onClickConfirm(ruleFormRef)">
|
||||||
确认
|
确认
|
||||||
|
@ -69,7 +70,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||||
import { reactive, ref } from 'vue';
|
import { reactive, ref } from 'vue';
|
||||||
import { postBrandListAPI } from '@/api/Brand';
|
import { postBrandListAPI } from '@/api/Brand';
|
||||||
import RemoteSelect from '@/components/RemoteSelect/index.vue';
|
import RemoteSelect from '@/components/RemoteSelect/index.vue';
|
||||||
|
@ -79,6 +80,7 @@ interface DialogPropsType {
|
||||||
row: Partial<ManifestType>;
|
row: Partial<ManifestType>;
|
||||||
isView: boolean;
|
isView: boolean;
|
||||||
api?: (params: any) => Promise<any>;
|
api?: (params: any) => Promise<any>;
|
||||||
|
delApi?: (params: any) => Promise<any>;
|
||||||
getTableList?: () => void;
|
getTableList?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -107,10 +109,12 @@ const form = reactive<any>({
|
||||||
consigner: '',
|
consigner: '',
|
||||||
consignee: '',
|
consignee: '',
|
||||||
goodsStatus: '',
|
goodsStatus: '',
|
||||||
|
id: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始化表单
|
// 初始化表单
|
||||||
const initForm = (params: ManifestType) => {
|
const initForm = (params: ManifestType) => {
|
||||||
|
form.id = params.id;
|
||||||
form.scheduleId = params.scheduleId;
|
form.scheduleId = params.scheduleId;
|
||||||
form.deck = params.deck;
|
form.deck = params.deck;
|
||||||
form.cabin = params.cabin;
|
form.cabin = params.cabin;
|
||||||
|
@ -172,6 +176,29 @@ const onClickConfirm = (formEl: FormInstance | undefined) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const onClickDelete = () => {
|
||||||
|
ElMessageBox.confirm(`你确定要删除舱单吗?`, '温馨提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
draggable: true,
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
await dialogProps.value.delApi!([form.id]);
|
||||||
|
// 更新表格
|
||||||
|
dialogProps.value.getTableList!();
|
||||||
|
dialogVisible.value = false;
|
||||||
|
ElMessage({
|
||||||
|
message: '删除成功',
|
||||||
|
type: 'success',
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
console.log('用户点击了取消');
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
@ -1,5 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<el-form class="form" ref="ruleFormRef" :rules="formRules" :model="form">
|
<el-form
|
||||||
|
class="form"
|
||||||
|
ref="ruleFormRef"
|
||||||
|
:rules="formRules"
|
||||||
|
:model="form"
|
||||||
|
require-asterisk-position="right"
|
||||||
|
>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="船名" prop="voyage">
|
<el-form-item label="船名" prop="voyage">
|
||||||
|
@ -80,14 +86,14 @@
|
||||||
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="商品车 / 件杂货" required>
|
<el-form-item label="商品车/件杂货" required>
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<el-form-item prop="carNum">
|
<el-form-item prop="carNum">
|
||||||
<el-input v-model="form.carNum" placeholder="数量" style="width: 70px" />
|
<el-input v-model="form.carNum" placeholder="数量" style="width: 60px" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div style="margin: 0 10px; text-align: center">/</div>
|
<div style="margin: 0 3px; text-align: center">/</div>
|
||||||
<el-form-item prop="spareNum">
|
<el-form-item prop="spareNum">
|
||||||
<el-input v-model="form.spareNum" placeholder="数量" style="width: 70px" />
|
<el-input v-model="form.spareNum" placeholder="数量" style="width: 60px" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
@ -138,7 +144,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<ImportFile ref="importFileRef" />
|
<ImportFile ref="importFileRef" @endFileUpload="endFileUpload" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -286,8 +292,13 @@ interface emitsType {
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
updateBoatID: [value: emitsType];
|
updateBoatID: [value: emitsType];
|
||||||
|
endManifestDetail: [];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const endFileUpload = () => {
|
||||||
|
emit('endManifestDetail');
|
||||||
|
};
|
||||||
|
|
||||||
// 保存并继续提交
|
// 保存并继续提交
|
||||||
const onClickAddSubmit = (formEl: FormInstance | undefined) => {
|
const onClickAddSubmit = (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return;
|
if (!formEl) return;
|
||||||
|
|
|
@ -13,12 +13,17 @@
|
||||||
<div class="left-title">{{ currentTitle[currentActive - 1] }}</div>
|
<div class="left-title">{{ currentTitle[currentActive - 1] }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<BoatInfoSend @updateBoatID="onUpdateBoatID" v-if="currentActive === 1" />
|
<BoatInfoSend
|
||||||
|
@updateBoatID="onUpdateBoatID"
|
||||||
|
@endManifestDetail="endManifestDetail"
|
||||||
|
v-if="currentActive === 1"
|
||||||
|
/>
|
||||||
<ManifestSend
|
<ManifestSend
|
||||||
:scheduleId="manifestProps?.scheduleId"
|
:scheduleId="manifestProps?.scheduleId"
|
||||||
:voyage="manifestProps?.voyage"
|
:voyage="manifestProps?.voyage"
|
||||||
:dischargePortId="manifestProps?.dischargePortId"
|
:dischargePortId="manifestProps?.dischargePortId"
|
||||||
@updateBoatID="onUpdateManifest"
|
@updateBoatID="onUpdateManifest"
|
||||||
|
@endManifestDetail="endManifestDetail"
|
||||||
v-if="currentActive === 2"
|
v-if="currentActive === 2"
|
||||||
/>
|
/>
|
||||||
<ManifestDetailSend
|
<ManifestDetailSend
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
:historyData="historyData!"
|
:historyData="historyData!"
|
||||||
@addManifest="onClickAddManifest"
|
@addManifest="onClickAddManifest"
|
||||||
@addManifestDetail="onClickAddManifestDetail"
|
@addManifestDetail="onClickAddManifestDetail"
|
||||||
|
@endManifestDetail="onClickEndManifestDetail"
|
||||||
/>
|
/>
|
||||||
<Send
|
<Send
|
||||||
ref="sendRef"
|
ref="sendRef"
|
||||||
|
|
Loading…
Reference in New Issue