马士基订舱+船期维护
parent
b35d85d615
commit
d57e4ae42b
File diff suppressed because one or more lines are too long
@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="title">MSK 订舱</div>
|
||||
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="订舱产品代码">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="请求类别">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="订舱合同唯一ID">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="服务船公司">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="订舱公司名称">
|
||||
BEST SHIPPING LINE CO LTD
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="订舱方ID">
|
||||
BEST SHIPPING LINE CO LTD
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="联系人">
|
||||
BEST SHIPPING LINE CO LTD
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="邮箱">
|
||||
BEST SHIPPING LINE CO LTD
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="合约方名称">
|
||||
BEST SHIPPING LINE CO LTD
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="合约方ID">
|
||||
BEST SHIPPING LINE CO LTD
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="title">地点、船期详情</div>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="始发地">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="目的地">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="始发地服务模式">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="目的地运输条款">
|
||||
<a-input v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="预计离港日期">
|
||||
<a-input style="width: 72%;" v-model="form.name" />
|
||||
<span @click="handleOpenCQ" style="color: #02A7F0;cursor: pointer;margin-left: 5px;">检索船期</span>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
<a-modal title="检索船期" :visible="visible" width="1000px" @cancel="visible = false">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<a-row>
|
||||
<a-form-model :model="searchForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="始发地">
|
||||
<a-input style="width: 72%;" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="目的地">
|
||||
<a-input style="width: 72%;" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="船名">
|
||||
<a-input style="width: 72%;" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="航次号">
|
||||
<a-input style="width: 72%;" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-form-model>
|
||||
</a-row>
|
||||
<a-button type="primary">检索</a-button>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="top">
|
||||
<span class="top-text">Qingdao, China </span>
|
||||
<img style="margin: 0 15px;" src="../../../assets/icons/u92.svg" alt="">
|
||||
<span class="top-text">Belgrade, Serbia</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<div class="item-left"> <img src="../../../assets/icons/u90.svg" alt=""> </div>
|
||||
<div class="item-right">
|
||||
<div>离港</div>
|
||||
<div>2024-02-24 06:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-left"> <img src="../../../assets/icons/u90.svg" alt=""> </div>
|
||||
<div class="item-right">
|
||||
<div>离港</div>
|
||||
<div>2024-02-24 06:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-left"> <img src="../../../assets/icons/u90.svg" alt=""> </div>
|
||||
<div class="item-right">
|
||||
<div>离港</div>
|
||||
<div>2024-02-24 06:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-left"> <img src="../../../assets/icons/u90.svg" alt=""> </div>
|
||||
<div class="item-right">
|
||||
<div>离港</div>
|
||||
<div>2024-02-24 06:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
searchForm: {},
|
||||
visible: false,
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 14 }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleOpenCQ() {
|
||||
this.visible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
padding-left: 20px;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid black;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 1px black dashed;
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
.top{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.top-text{
|
||||
font-size: 15px;
|
||||
}
|
||||
.bottom{
|
||||
display: flex;
|
||||
}
|
||||
.item{
|
||||
display: flex;
|
||||
.item-left{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue