修改订舱样式

dev
lilu 2 years ago
parent e48aaf2199
commit 89bf6d5f12

@ -1,5 +1,5 @@
<template>
<div class="more-edi" :style="{paddingTop:'25px'}">
<div class="more-edi" :style="{paddingTop:'20px', paddingBottom:'10px'}">
<a-form-model ref="ediFrom" :model="details" :rules="rules">
<div class="normal">
<a-row :gutter="16">
@ -143,7 +143,7 @@
has-feedback
prop="iscontainersoc"
>
<a-select :default-value="iscontainersoc" style="width: 120px" v-model="iscontainersoc">
<a-select size="small" :default-value="iscontainersoc" style="width: 120px" v-model="iscontainersoc">
<a-select-option value="1"> </a-select-option>
<a-select-option value="0"> </a-select-option>
</a-select>
@ -204,8 +204,9 @@
:wrapperCol="{ xs: { span: 24 }, sm: { span: 21 } }"
has-feedback
prop="bookingEDIExt.weiTuoFang"
style="margin-top:4px;"
>
<a-textarea v-model="details.bookingEDIExt.weiTuoFang" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" v-model="details.bookingEDIExt.weiTuoFang" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
</a-row>
@ -226,7 +227,7 @@
has-feedback
prop="bookingEDIExt.exRemark1"
>
<a-textarea :allowClear="true" v-model="details.bookingEDIExt.exRemark1" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" :allowClear="true" v-model="details.bookingEDIExt.exRemark1" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -237,7 +238,7 @@
has-feedback
prop="bookingEDIExt.exRemark2"
>
<a-textarea :allowClear="true" v-model="details.bookingEDIExt.exRemark2" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" :allowClear="true" v-model="details.bookingEDIExt.exRemark2" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -248,7 +249,7 @@
has-feedback
prop="bookingEDIExt.exRemark3"
>
<a-textarea :allowClear="true" v-model="details.bookingEDIExt.exRemark3" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" :allowClear="true" v-model="details.bookingEDIExt.exRemark3" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -259,7 +260,7 @@
has-feedback
prop="bookingEDIExt.exRemark4"
>
<a-textarea :allowClear="true" v-model="details.bookingEDIExt.exRemark4" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" :allowClear="true" v-model="details.bookingEDIExt.exRemark4" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
</a-row>
@ -313,7 +314,7 @@
has-feedback
prop="bookingEDIExt.salerCode"
>
<a-select default-value="CN087 | GRACE SUN" v-model="details.bookingEDIExt.salerCode" @change="handleSaleChange">
<a-select size="small" default-value="CN087 | GRACE SUN" v-model="details.bookingEDIExt.salerCode" @change="handleSaleChange">
<a-select-option v-for="(sales, sindex) in StoreSalesRepCode" :value="sales.NAME" :key="sindex">
{{ sales.NAME }}
</a-select-option>
@ -340,7 +341,7 @@
has-feedback
prop="bookingEDIExt.masterBolIndicator"
>
<a-select v-model="details.bookingEDIExt.masterBolIndicator" @change="handleMasterBolChange">
<a-select size="small" v-model="details.bookingEDIExt.masterBolIndicator" @change="handleMasterBolChange">
<a-select-option v-for="(master, mindex) in StoreMasterBOLIndicator" :value="master.NAME" :key="mindex">
{{ master.NAME }}
</a-select-option>
@ -354,8 +355,9 @@
:wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
has-feedback
prop="bookingEDIExt.s0CC0C"
style="margin-top:4px;"
>
<a-textarea :allowClear="true" v-model="details.bookingEDIExt.s0CC0C" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" :allowClear="true" v-model="details.bookingEDIExt.s0CC0C" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -365,8 +367,9 @@
:wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
has-feedback
prop="bookingEDIExt.ckhi"
style="margin-top:4px;"
>
<a-textarea v-model="details.bookingEDIExt.ckhi" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" v-model="details.bookingEDIExt.ckhi" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
</a-row>
@ -381,7 +384,7 @@
has-feedback
prop="bookingEDIExt.cncm"
>
<a-textarea v-model="details.bookingEDIExt.cncm" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" v-model="details.bookingEDIExt.cncm" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -392,7 +395,7 @@
has-feedback
prop="bookingEDIExt.wncm"
>
<a-textarea v-model="details.bookingEDIExt.wncm" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<a-textarea size="small" v-model="details.bookingEDIExt.wncm" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -540,7 +543,7 @@ export default {
padding: 60px 20px;
background: #ffffff;
.ant-row{
margin-bottom: 10px;
margin-bottom: 0;
}
}
.bottom-btn {
@ -551,7 +554,7 @@ export default {
}
}
.normal{
margin-bottom: 10px;
// margin-bottom: 10px;
overflow: hidden;
}
.taiping{
@ -566,7 +569,7 @@ export default {
height: 40px;
display: flex;
width: 100%;
margin-bottom:20px;
// margin-bottom:20px;
.text{
width: 87px;
height: 40px;
@ -616,4 +619,14 @@ export default {
/deep/ .ant-input-affix-wrapper{
color: rgba(0, 0, 0, 0.25) !important;
}
/deep/ .ant-form-item-label {
height:36px !important;
line-height: 36px !important;
// border: 1px solid #f00;
}
/deep/ .ant-form-item-control{
height:36px !important;
line-height: 36px !important;
}
</style>

@ -1,5 +1,5 @@
<template>
<div class="booking-detail">
<div class="booking-detail" style="margin-top:0;">
<a-row :gutter="24" :class="showSecNav ? 'show-content' : 'hide-content'">
<div class="nav-min-icon" v-if="!showSecNav" @click="openNav"><i class="iconfont icon-liebiao"></i></div>
<a-col :span="showSecNav ? 5 : 0" v-if="showSecNav">

@ -21,10 +21,87 @@
@copy="copyBookingFun"
@addSedList="addSedList"
></operationArea>
<a-tabs type="card" size="small" :activeKey="mainOrderActiveKey" @change="changeMainTab" :tabBarStyle="{ }">
<ul class="parent-tabs-box">
<div class="parents-tabs-top">
<li @click="changeParentTabs('1-1')">
<input type="radio" name="tabs" id="tab1" checked />
<label class="tabs-label" for="tab1">基础信息</label>
</li>
<li @click="changeParentTabs('2-2')">
<input type="radio" name="tabs" id="tab2" />
<label class="tabs-label" for="tab2">EDI补充信息</label>
</li>
</div>
<div class="parents-tabs-content">
<div id="tab-content1" class="tab-content" v-show="mainOrderActiveKey === '1-1'">
<div class="pane-box">
<!-- 基本信息 -->
<basicInfo
ref="basicInfo"
:type="type"
:details="bookingDetails"
:rules="basicRules"
:inPageLoading="inPageLoading"
@changeDetail="changeDetailFun"
></basicInfo>
<!-- 收发通信息 -->
<mailingInfo
ref="mailingInfo"
:details="bookingDetails"
:rules="mailingRules"
@changeDetail="changeDetailFun"
@spliceMore="spliceMorefun"
@pkgsEnCapital="pkgsEnCapitalFun"
></mailingInfo>
<!-- 货物信息 -->
<cargoInfo
ref="cargoInfo"
:details="bookingDetails"
:rules="cargoRules"
:moreStr="moreStr"
@changeDetail="changeDetailFun"
></cargoInfo>
<!-- 签单信息 -->
<billInfo
ref="billInfo"
:details="bookingDetails"
:rules="billRules"
@changeDetail="changeDetailFun"
></billInfo>
<!-- 备注信息 -->
<remarksInfo
ref="remarksInfo"
:details="bookingDetails"
:rules="remarksRules"
@changeDetail="changeDetailFun"
></remarksInfo>
<!-- 箱型 -->
<goodsTable
ref="goodsTable"
:details="bookingDetails"
:rules="tableRules"
@changeDetail="changeDetailFun"
@changeTotal="changeTotalFun"
v-if="!inPageLoading"
></goodsTable>
</div>
</div>
<div id="tab-content2" class="tab-content" v-show="mainOrderActiveKey === '2-2'">
<ediMore
ref="ediMore"
class="pane-box"
:details="bookingDetails"
:rules="ediRules"
@changeDetail="changeDetailFun"
></ediMore>
</div>
</div>
</ul>
<!-- <a-tabs type="card" size="small" :activeKey="mainOrderActiveKey" @change="changeMainTab" :tabBarStyle="tabBarStyle2">
<a-tab-pane key="1-1" tab="基础信息">
<div class="pane-box">
<!-- 基本信息 -->
<basicInfo
ref="basicInfo"
:type="type"
@ -33,7 +110,6 @@
:inPageLoading="inPageLoading"
@changeDetail="changeDetailFun"
></basicInfo>
<!-- 收发通信息 -->
<mailingInfo
ref="mailingInfo"
:details="bookingDetails"
@ -42,7 +118,6 @@
@spliceMore="spliceMorefun"
@pkgsEnCapital="pkgsEnCapitalFun"
></mailingInfo>
<!-- 货物信息 -->
<cargoInfo
ref="cargoInfo"
:details="bookingDetails"
@ -50,21 +125,18 @@
:moreStr="moreStr"
@changeDetail="changeDetailFun"
></cargoInfo>
<!-- 签单信息 -->
<billInfo
ref="billInfo"
:details="bookingDetails"
:rules="billRules"
@changeDetail="changeDetailFun"
></billInfo>
<!-- 备注信息 -->
<remarksInfo
ref="remarksInfo"
:details="bookingDetails"
:rules="remarksRules"
@changeDetail="changeDetailFun"
></remarksInfo>
<!-- 箱型 -->
<goodsTable
ref="goodsTable"
:details="bookingDetails"
@ -84,7 +156,7 @@
@changeDetail="changeDetailFun"
></ediMore>
</a-tab-pane>
</a-tabs>
</a-tabs> -->
</template>
<!-- <template v-if="inPageLoading">
<div class="load-block" style="width: 100%; height: 107px;"></div>
@ -276,7 +348,11 @@ export default {
bookingDetails: JSON.parse(JSON.stringify(initDetail)),
tabBarStyle: {
background: '#fff',
padding: '0 20px'
padding: '0 20px',
marginBottom: '0'
},
tabBarStyle2: {
padding: '0'
},
excuteRules: [],
excuteRulesType: '',
@ -1383,6 +1459,9 @@ export default {
},
pkgsEnCapitalFun(data) {
this.bookingDetails.totalno = data
},
changeParentTabs (type) {
this.mainOrderActiveKey = type
}
}
}
@ -1553,4 +1632,68 @@ export default {
// top: -3px !important;
// }
}
.parent-tabs-box{
width: 100%;
// float: none;
list-style: none;
position: relative;
text-align: left;
padding: 29px 0 0 0;
.parents-tabs-top{
position:absolute;
top: 0;left: 0;
li {
float: left;
}
input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs-label {
display: block;
padding: 4px 10px;
border-radius: 2px 2px 0 0;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
background: #fafafa;
color: #999;
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
// transition: all 0.2s ease-in-out;
margin-right: 4px;
}
[id^="tab"]:checked + label {
top: 0;
background: #fff;
color: @primary-color;
font-size: 14px;
}
}
.parents-tabs-content{
width: 100%;
overflow: hidden;
white-space: nowrap;
vertical-align: top;
.tab-content {
display: inline-block;
vertical-align: top;
transition: .5s all;
overflow: hidden;
width: 100%;
padding: 10px 0;
}
}
// [id^="tab"]:checked ~ [id^="tab-content"] {
// display: block;
// }
}
</style>

@ -1,6 +1,6 @@
<template>
<div class="basic-info">
<x-card style="padding-top: 10px;">
<x-card style="padding-top: 15px;">
<div slot="content" style="margin-top: -24px;">
<a-form-model style="margin-bottom:10px;" size="small" ref="basicFrom" :selfUpdate="true" :model="details" :rules="rules">
<a-row class="from-box" :gutter="10">
@ -1515,12 +1515,12 @@ export default {
.from-box {
border-bottom: 1px dashed #ccc;
margin-bottom: 8px;
padding-bottom: 10px;
margin-bottom: 2px;
padding-bottom: 6px;
}
.from-box2 {
padding-bottom: 10px;
padding-bottom: 6px;
overflow: hidden;
text-align: left;
}
@ -1528,12 +1528,12 @@ export default {
.from-box3 {
border-top: 1px dashed #ccc;
/*margin-top: 20px;*/
padding-top: 8px;
padding-top: 0;
}
.date-box {
display: flex;
// padding-top:4px;
padding-top:4px;
.date-picker {
flex: 1;
@ -1567,7 +1567,7 @@ export default {
padding: 0 4px;
color: @primary-color;
cursor: pointer;
margin-top: -3px;
margin-top: -6px;
}
}
.my-dropdown2 {
@ -1735,6 +1735,17 @@ export default {
}
}
/deep/ .ant-form-item-label {
height:36px !important;
line-height: 36px !important;
// border: 1px solid #f00;
}
/deep/ .ant-form-item-control{
height:36px !important;
line-height: 36px !important;
}
// .ant-calendar-picker-input{
// padding: 0 4px;
// }

@ -25,6 +25,7 @@
@change="issuetypeChange"
/> -->
<a-select
size="small"
class="customer-input"
v-model="details.issuetype"
@change="debounce(handleIssuetypeChange, 300, $event)"
@ -47,7 +48,7 @@
has-feedback
prop="issuedate"
>
<a-date-picker v-model="details.issuedate" format="YYYY-MM-DD" />
<a-date-picker size="small" v-model="details.issuedate" format="YYYY-MM-DD" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -61,6 +62,7 @@
>
<!-- 这里需要改成可输入 -->
<auto-complete
size="small"
:allowClear="true"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '200px'}"
@ -81,7 +83,7 @@
has-feedback
prop="issueplaceid"
>
<a-input :allowClear="true" v-model="details.issueplaceid" />
<a-input size="small" :allowClear="true" v-model="details.issueplaceid" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -93,7 +95,7 @@
has-feedback
prop="nobill"
>
<a-select :default-value="details.nobill || 'THREE'" v-model="details.nobill" @change="handleNoChange">
<a-select size="small" :default-value="details.nobill || 'THREE'" v-model="details.nobill" @change="handleNoChange">
<a-select-option value="ONE"> ONE </a-select-option>
<a-select-option value="TWO"> TWO </a-select-option>
<a-select-option value="THREE"> THREE </a-select-option>
@ -116,7 +118,7 @@
has-feedback
prop="copynobill"
>
<a-select :default-value="details.copynobill || 'THREE'" v-model="details.copynobill" @change="handleCopyNoChange">
<a-select size="small" :default-value="details.copynobill || 'THREE'" v-model="details.copynobill" @change="handleCopyNoChange">
<a-select-option value="ONE"> ONE </a-select-option>
<a-select-option value="TWO"> TWO </a-select-option>
<a-select-option value="THREE"> THREE </a-select-option>
@ -140,6 +142,7 @@
prop="prepardat"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.prepardat"
:data-source="prepardatDataArr"
@ -161,6 +164,7 @@
prop="payableat"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.payableat"
:data-source="payableatDataArr"
@ -182,6 +186,7 @@
prop="blfrt"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.blfrt"
:data-source="blfrtDataArr"
@ -202,7 +207,7 @@
has-feedback
prop="thirdpayaddr"
>
<a-input :allowClear="true" v-model="details.thirdpayaddr" />
<a-input size="small" :allowClear="true" v-model="details.thirdpayaddr" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -215,6 +220,7 @@
prop="service"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.service"
:data-source="serviceDataArr"
@ -236,7 +242,7 @@
has-feedback
prop="reeferf"
>
<a-input :allowClear="true" v-model="details.reeferf" />
<a-input size="small" :allowClear="true" v-model="details.reeferf" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -248,7 +254,7 @@
has-feedback
prop="tempset"
>
<a-input :allowClear="true" v-model="details.tempset" />
<a-input size="small" :allowClear="true" v-model="details.tempset" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -261,7 +267,7 @@
prop="tempid"
>
<!-- <a-input :allowClear="true" v-model="details.tempid" /> -->
<a-select :default-value="details.tempid || 'C'" v-model="details.tempid">
<a-select size="small" :default-value="details.tempid || 'C'" v-model="details.tempid">
<a-select-option value="C"> C摄氏 </a-select-option>
<a-select-option value="F"> F华氏 </a-select-option>
</a-select>
@ -276,7 +282,7 @@
has-feedback
prop="tempmin"
>
<a-input :allowClear="true" v-model="details.tempmin" />
<a-input size="small" :allowClear="true" v-model="details.tempmin" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -288,12 +294,12 @@
has-feedback
prop="tempmax"
>
<a-input :allowClear="true" v-model="details.tempmax" />
<a-input size="small" :allowClear="true" v-model="details.tempmax" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-model-item class="from-label" label="湿度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback prop="humidity">
<a-input :allowClear="true" v-model="details.humidity" />
<a-input size="small" :allowClear="true" v-model="details.humidity" />
</a-form-model-item>
</a-col>
</template>
@ -307,7 +313,7 @@
has-feedback
prop="dclass"
>
<a-input :allowClear="true" v-model="details.dclass" />
<a-input size="small" :allowClear="true" v-model="details.dclass" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -319,7 +325,7 @@
has-feedback
prop="dunno"
>
<a-input :allowClear="true" v-model="details.dunno" />
<a-input size="small" :allowClear="true" v-model="details.dunno" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -331,7 +337,7 @@
has-feedback
prop="dpage"
>
<a-input :allowClear="true" v-model="details.dpage" />
<a-input size="small" :allowClear="true" v-model="details.dpage" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -343,7 +349,7 @@
has-feedback
prop="dlabel"
>
<a-input :allowClear="true" v-model="details.dlabel" />
<a-input size="small" :allowClear="true" v-model="details.dlabel" />
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -355,7 +361,7 @@
has-feedback
prop="linkman"
>
<a-input :allowClear="true" v-model="details.linkman" />
<a-input size="small" :allowClear="true" v-model="details.linkman" />
</a-form-model-item>
</a-col>
</template>
@ -821,12 +827,18 @@ export default {
right: 10px !important;
}
.bill-info{
padding-bottom: 10px;
}
.bill-info-box{
/deep/ .ant-row{
margin-bottom: 5px !important;
margin-bottom: 0 !important;
}
}
/deep/ .ant-collapse-content-box{
padding: 0 !important;
}
/deep/ .ant-calendar-picker-clear{
color: rgba(0, 0, 0, 0.25) !important;
}
@ -838,4 +850,14 @@ export default {
/deep/ .collapse-box{
margin-bottom: 2px !important;
}
/deep/ .ant-form-item-label {
height:36px !important;
line-height: 36px !important;
// border: 1px solid #f00;
}
/deep/ .ant-form-item-control{
height:36px !important;
line-height: 36px !important;
}
</style>

@ -9,7 +9,7 @@
<a-form-model :selfUpdate="true" ref="cargoFrom" :model="details" :rules="rules">
<a-row :gutter="20">
<a-col :span="8">
<div class="tit" :class="{'required':rules['marks'] && rules['marks'][0].required}">
<div class="cargo-info-tit" :class="{'required':rules['marks'] && rules['marks'][0].required}">
<div>Seal No.(封志号)</div>
<div>Marks & Nos.(标记与号码)</div>
</div>
@ -38,6 +38,7 @@
<a-form-model-item has-feedback prop="goodsname" label="" :class="{'goods-name-box':rules['goodsname'] && rules['goodsname'][0].required}">
<i class="icon required" v-if="rules['goodsname'] && rules['goodsname'][0].required"></i>
<auto-complete
size="small"
:allowClear="true"
:dropdown-match-select-width="false"
style="width: 75%;max-width:210px;"
@ -50,10 +51,10 @@
/>
</a-form-model-item>
</div>
<div class="cargo-mark" >
<div :class="{'required':rules['cargoid'] && rules['cargoid'][0].required}" style="padding-top:4px;">货物标志</div>
<a-form-model-item has-feedback prop="cargoid" label="">
<a-select :default-value="details.cargoid || 'S'" v-model="details.cargoid" style="width: 120px" @change="handleChange">
<div class="cargo-mark">
<div :class="{'required':rules['cargoid'] && rules['cargoid'][0].required}" class="tit">货物标志</div>
<a-form-model-item class="cargoid" has-feedback prop="cargoid" label="">
<a-select size="small" :default-value="details.cargoid || 'S'" v-model="details.cargoid" style="width: 120px" @change="handleChange">
<a-select-option value="S"> S 普通货 </a-select-option>
<a-select-option value="R"> R 冻柜 </a-select-option>
<a-select-option value="D"> D 危险品 </a-select-option>
@ -61,10 +62,10 @@
</a-select>
</a-form-model-item>
</div>
<div class="input" >
<div :class="{'required':rules['hscode'] && rules['hscode'][0].required}" style="padding-top:4px;">HS编码</div>
<a-form-model-item has-feedback prop="hscode" label="" style="margin-top:-2px;">
<a-input :allowClear="true" v-model="details.hscode" />
<div class="input">
<div :class="{'required':rules['hscode'] && rules['hscode'][0].required}" calss="tit">HS编码</div>
<a-form-model-item class="cargoid" has-feedback prop="hscode" label="" style="margin-top:-2px;">
<a-input size="small" :allowClear="true" v-model="details.hscode" />
</a-form-model-item>
</div>
</div>
@ -295,28 +296,32 @@ export default {
.tit {
text-align: left;
width: 100%;
margin-bottom: 10px;
height: 54px;
padding-top: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 18px;
}
.line {
text-align: left;
width: 100%;
display: flex;
margin-bottom: 10px;
height: 54px;
// margin-bottom: 10px;
// height: 54px;
}
.left {
// text-align: left;
// display: inline-block;
// padding-top: 4px;
// flex: 1;
text-align: left;
display: inline-block;
padding-top: 4px;
/* padding-top: 4px; */
flex: 1;
line-height: 18px;
.title{
padding-bottom:4px;
// padding-bottom:4px;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
@ -345,9 +350,34 @@ export default {
display: inline-block;
width: 120px;
margin-right: 10px;
.ant-form-item{
margin-bottom: 0;
}
}
.cargo-info-tit{
font-size: 14px;
line-height: 18px;
height: 45px;
}
/deep/ .ant-form-item-label {
height:36px !important;
line-height: 36px !important;
}
/deep/ .ant-form-item-control{
height:36px !important;
line-height: 36px !important;
}
.line{
height: 45px;
}
.cargo-mark{
padding: 0;
height: 56px;
}
.input-box {
height: 200px;
// height: 200px;
height: 100px;
font-size: 14px;
}
.num-box {
@ -401,7 +431,8 @@ export default {
margin-top: -6px;
}
.textarea-label{
// margin-top: 18px;
margin-bottom: 0;
min-height: 104px;
}
.required{
padding-left: 10px;

@ -1,13 +1,13 @@
<template>
<div class="goods-table">
<a-card :bordered="false">
<a-card :bordered="false" :bodyStyle="{padding: '10px 20px'}">
<div class="from-line">
<div class="left">
<a-button class="btn btn-add" type="primary" @click="addboxLine"></a-button>
<a-button class="btn btn-delete" @click="removeLine" :style="{ marginRight: '50px' }">删除</a-button>
<a-button class="btn btn-more-name" type="primary" @click="openDialog" :disabled="tableData.length === 0"><a-icon type="appstore" />多品名 </a-button>
<a-button class="btn btn-import-station" type="primary" @click="importYarn" :loading="YarnLoading"><a-icon type="import" />引入场站数据</a-button>
<a-button class="btn btn-weight" type="primary" @click="importWeight" :loading="WeightLoading"><a-icon type="import" />引入箱皮重</a-button>
<a-button size="default" class="btn btn-add" type="primary" @click="addboxLine"></a-button>
<a-button size="default" class="btn btn-delete" @click="removeLine" :style="{ marginRight: '50px' }">删除</a-button>
<a-button size="default" class="btn btn-more-name" type="primary" @click="openDialog" :disabled="tableData.length === 0"><a-icon type="appstore" />多品名 </a-button>
<a-button size="default" class="btn btn-import-station" type="primary" @click="importYarn" :loading="YarnLoading"><a-icon type="import" />引入场站数据</a-button>
<a-button size="default" class="btn btn-weight" type="primary" @click="importWeight" :loading="WeightLoading"><a-icon type="import" />引入箱皮重</a-button>
</div>
<div class="table-right">
<!-- <span>合计: {{ totalCtnall }}</span> -->
@ -136,6 +136,7 @@ export default {
renderBodyCell: ({ row, column, rowIndex }, h) => {
return (
<a-select
size='small'
value={row['ctnall']}
showSearch
ref="ctnallView"
@ -275,6 +276,7 @@ export default {
renderBodyCell: ({ row, column, rowIndex }, h) => {
return (
<a-select
size='small'
allow-clear={true}
showSearch
defaultValue={row['kindpkgs']}
@ -397,6 +399,7 @@ export default {
renderBodyCell: ({ row, column, rowIndex }, h) => {
return (
<a-select
size='small'
show-search
value={row['weightype']}
option-filter-prop="children"
@ -1504,12 +1507,16 @@ export default {
<style lang="less">
.from-line {
display: flex;
margin: 0 0 20px 0;
margin: 0 0 10px 0;
.left {
flex: 1;
text-align: left;
.btn {
margin-right: 10px;
font-size: 14px;
padding: 0 10px;
line-height: 25px;
height: 28px;
}
.btn-delete {
border: 1px solid #ff6646;

@ -149,114 +149,150 @@
</a-col>
<a-col class="right-content" :xs="24" :sm="24" :md="24" :lg="14" :xl="13">
<a-row :gutter="16">
<a-col :span="12">
<a-form-model-item
class="from-label yarn-label"
label="场站"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="overflow: visible"
prop="yard"
>
<div class="yard-box" style="display: flex">
<!-- <auto-complete
<div class="right-content-top" style="border-bottom:1px dashed #ddd;padding-bottom:4px;margin-bottom:4px; overflow:hidden;">
<a-col :span="12">
<a-form-model-item
class="from-label yarn-label"
label="场站"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
style="overflow: visible"
prop="yard"
>
<div class="yard-box" style="display: flex">
<!-- <auto-complete
:allowClear="true"
v-model="details.yard"
class="customer-input"
:data-source="yardDataArr"
@select="yardSelect"
@change="yardChange"
/> -->
<a-select
size="small"
class="customer-input"
:default-value="details.yard"
v-model="details.yard"
@change="debounce(handleYardChange, 300, $event)"
show-search
:filter-option="filterOption"
:dropdownMatchSelectWidth="false"
style="flex:1;"
>
<a-select-option v-for="(yard, yindex) in yardSelectData" :key="yindex" :value="yindex">
{{ yard.selectShowTab }}
</a-select-option>
</a-select>
<i class="iconfont icon-touxiang" style="margin: 0 4px" @click="changeYard('content')"></i>
<i class="iconfont icon-bianji1" @click="changeYard('remark')"></i>
<!-- <div class="feeself">
<a-button size="small" :type="details.feeself ? 'primary' : ''" @click="changeFeeself"></a-button>
</div> -->
<!-- <a-checkbox v-model="details.feeself"> </a-checkbox> -->
</div>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="from-label"
label="自结"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
prop="feeself"
>
<a-radio-group size="small" v-model="details.feeself" @change="changeFeeself">
<a-radio size="small" :value="true">
</a-radio>
<a-radio size="small" :value="false">
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="from-label"
label="报关行"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
prop="customser"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.yard"
v-model="details.customser"
class="customer-input"
:data-source="yardDataArr"
@select="yardSelect"
@change="yardChange"
/> -->
<a-select
:data-source="customserDataArr"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '200px' }"
@select="customserSelect"
@focus="customserChange"
@change="debounce(customserChange, 300, $event)"
/>
<!-- @change="customserChange" -->
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="from-label"
label="车队"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
prop="trucker"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.trucker"
class="customer-input"
:default-value="details.yard"
v-model="details.yard"
@change="debounce(handleYardChange, 300, $event)"
show-search
:filter-option="filterOption"
:dropdownMatchSelectWidth="false"
style="width:110px;"
>
<a-select-option v-for="(yard, yindex) in yardSelectData" :key="yindex" :value="yindex">
{{ yard.selectShowTab }}
</a-select-option>
</a-select>
<i class="iconfont icon-touxiang" style="margin: 0 4px" @click="changeYard('content')"></i>
<i class="iconfont icon-bianji1" @click="changeYard('remark')"></i>
<div class="feeself">
<a-checkbox v-model="details.feeself"> </a-checkbox>
</div>
</div>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="from-label"
label="报关行"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
prop="customser"
>
<auto-complete
:allowClear="true"
v-model="details.customser"
class="customer-input"
:data-source="customserDataArr"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '200px' }"
@select="customserSelect"
@focus="customserChange"
@change="debounce(customserChange, 300, $event)"
/>
<!-- @change="customserChange" -->
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="from-label"
label="车队"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
prop="trucker"
>
<auto-complete
:allowClear="true"
v-model="details.trucker"
class="customer-input"
:data-source="truckerDataArr"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '200px' }"
@select="truckerSelect"
@focus="truckerChange"
@change="debounce(truckerChange, 300, $event)"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="from-label"
label="国外代理"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
prop="agentid"
>
<auto-complete
:allowClear="true"
v-model="details.agentid"
class="customer-input"
:data-source="agentidDataArr"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '200px' }"
@select="agentidSelect"
@focus="agentidChange"
@change="debounce(agentidChange, 300, $event)"
/>
</a-form-model-item>
</a-col>
:data-source="truckerDataArr"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '200px' }"
@select="truckerSelect"
@focus="truckerChange"
@change="debounce(truckerChange, 300, $event)"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="from-label"
label="国外代理"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
prop="agentid"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.agentid"
class="customer-input"
:data-source="agentidDataArr"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '200px' }"
@select="agentidSelect"
@focus="agentidChange"
@change="debounce(agentidChange, 300, $event)"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item
class="from-label"
label=" "
style="opacity:0;"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
></a-form-model-item>
</a-col>
</div>
<a-col :span="12">
<a-form-model-item
class="from-label"
@ -341,6 +377,7 @@
prop="placereceiptid"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.placereceiptid"
class="customer-input"
@ -362,7 +399,7 @@
has-feedback
prop="placereceipt"
>
<inputView type="placereceipt" :parentVal="details.placereceipt" @getInputChange="inputChange"/>
<inputView type="placereceipt" size="small" :parentVal="details.placereceipt" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.placereceipt" /> -->
</a-form-model-item>
</a-col>
@ -376,6 +413,7 @@
prop="portloadid"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.portloadid"
class="customer-input"
@ -397,7 +435,7 @@
has-feedback
prop="portload"
>
<inputView type="portload" :parentVal="details.portload" @getInputChange="inputChange"/>
<inputView type="portload" size="small" :parentVal="details.portload" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.portload" /> -->
</a-form-model-item>
</a-col>
@ -411,6 +449,7 @@
prop="transportid"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.transportid"
class="customer-input"
@ -432,7 +471,7 @@
has-feedback
prop="transport"
>
<inputView type="transport" :parentVal="details.transport" @getInputChange="inputChange"/>
<inputView type="transport" size="small" :parentVal="details.transport" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.transport" /> -->
</a-form-model-item>
</a-col>
@ -446,6 +485,7 @@
prop="portdischargeid"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.portdischargeid"
class="customer-input"
@ -467,7 +507,7 @@
has-feedback
prop="portdischarge"
>
<inputView type="portdischarge" :parentVal="details.portdischarge" @getInputChange="inputChange"/>
<inputView type="portdischarge" size="small" :parentVal="details.portdischarge" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.portdischarge" /> -->
</a-form-model-item>
</a-col>
@ -481,6 +521,7 @@
prop="destinationid"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.destinationid"
class="customer-input"
@ -502,7 +543,7 @@
has-feedback
prop="destination"
>
<inputView type="destination" :parentVal="details.destination" @getInputChange="inputChange"/>
<inputView type="destination" size="small" :parentVal="details.destination" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.destination" /> -->
</a-form-model-item>
</a-col>
@ -516,6 +557,7 @@
prop="placedeliveryid"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.placedeliveryid"
class="customer-input"
@ -537,7 +579,7 @@
has-feedback
prop="placedelivery"
>
<inputView type="placedelivery" :parentVal="details.placedelivery" @getInputChange="inputChange"/>
<inputView type="placedelivery" size="small" :parentVal="details.placedelivery" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.placedelivery" /> -->
</a-form-model-item>
</a-col>
@ -552,7 +594,7 @@
>
<div class="line-box">
<!-- <inputView type="pkgs" :parentVal="details.pkgs" inputType="number" @getInputChange="inputChange"/> -->
<a-input :allowClear="true" v-model="details.pkgs" type="number" @change="changePkgs"/>
<a-input :allowClear="true" size="small" v-model="details.pkgs" type="number" @change="changePkgs"/>
<i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('pkgs')"></i>
</div>
</a-form-model-item>
@ -567,6 +609,7 @@
prop="kindpkgs"
>
<auto-complete
size="small"
:allowClear="true"
v-model="details.kindpkgs"
class="customer-input"
@ -590,7 +633,7 @@
>
<div class="line-box">
<!-- <inputView type="kgs" :parentVal="details.kgs" @getInputChange="inputChange"/> -->
<a-input :allowClear="true" v-model="details.kgs" />
<a-input size="small" :allowClear="true" v-model="details.kgs" />
<i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('kgs')"></i>
<span class="unit">KGS</span>
</div>
@ -607,7 +650,7 @@
>
<div class="line-box">
<!-- <inputView type="cbm" :parentVal="details.cbm" @getInputChange="inputChange"/> -->
<a-input :allowClear="true" v-model="details.cbm" />
<a-input size="small" :allowClear="true" v-model="details.cbm" />
<i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('cbm')"></i>
<span class="unit">CBM</span>
</div>
@ -785,12 +828,12 @@ export default {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
md: { span: 10 }
md: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 },
md: { span: 13 }
sm: { span: 16 },
md: { span: 16 }
},
YardlabelCol: {
xs: { span: 24 },
@ -1884,6 +1927,12 @@ export default {
console.log('尺码: ', cbm)
this.details.cbm = cbm
this.cbmtotalRes = cbm
},
changeFeeself (e) {
// this.details.feeself = e
// this.details.feeself = !this.details.feeself
this.$forceUpdate()
// this.$emit('', this.details.feeself)
}
}
}
@ -2081,6 +2130,9 @@ export default {
// right: 44px;
display: none;
}
.customer-input{
margin-right: 4px;
}
}
/deep/ .ant-form-item-children-icon .anticon-check-circle{
display: none;
@ -2093,9 +2145,23 @@ export default {
}
.feeself {
position: absolute;
top: -3px;
right: -63px;
transform: scale(0.8);
//
// top: -3px;
// right: -63px;
//
top: 8px;
// left: 104px;
right: -4px;
button{
line-height: 18px;
margin-top: 0px;
height: 20px;
font-size: 13px;
}
/deep/ .ant-btn-primary{
color: #fff !important;
}
}
.from-label {
margin-bottom: 0;
@ -2147,9 +2213,9 @@ export default {
}
@media (max-width: 1800px) {
.feeself {
right: -75px !important;
}
// .feeself {
// right: -75px !important;
// }
}
@media (max-width: 1700px) {
@ -2158,15 +2224,15 @@ export default {
margin-top: -11px !important;
}
}
.feeself {
top: 6px !important;
right: -43px !important;
.ant-checkbox-wrapper{
span{
padding: 0 4px;
}
}
}
// .feeself {
// top: 6px !important;
// right: -43px !important;
// .ant-checkbox-wrapper{
// span{
// padding: 0 4px;
// }
// }
// }
.yarn-label {
position: relative;
/deep/ .ant-form-item-children-icon{
@ -2176,18 +2242,18 @@ export default {
}
@media (max-width: 1622px) {
.feeself {
top: 6px !important;
right: -52px !important;
}
// .feeself {
// top: 6px !important;
// right: -52px !important;
// }
}
@media (max-width: 1495px) {
.feeself {
top: 6px !important;
right: -61px !important;
}
// .feeself {
// top: 6px !important;
// right: -61px !important;
// }
}
.has-error{
@ -2199,6 +2265,7 @@ export default {
}
.ant-select-selection__rendered{
margin-right: 0 !important;
line-height: 24px;
}
.ant-select-arrow{
right: 0 !important;
@ -2324,5 +2391,17 @@ export default {
padding-top: 4px !important;
padding-block: 0 !important;
}
.right-content{
/deep/ .ant-form-item-label {
height:36px !important;
line-height: 36px !important;
// border: 1px solid #f00;
}
/deep/ .ant-form-item-control{
height:36px !important;
line-height: 36px !important;
}
}
// }
</style>

@ -63,10 +63,9 @@
<div
v-if="!details.hbList || details.hbList.length === 0"
class="btn-list single-view-1"
:style="{ width: '150px' }"
:style="{ width: '110px' }"
>
<button @click="addChild()"><span class="iconfont icon-zhizhishu"></span>添加分单</button>
<!-- <button><span class="iconfont icon-electronic-signature"></span>自定义必填项</button> -->
</div>
</a-card>

@ -1,7 +1,7 @@
<template>
<a-card class="ramark-box" :bordered="false">
<!-- <a-button type="primary" @click="checkbasic"> </a-button> -->
<a-form-model style="margin-bottom:10px;" ref="remarkFrom" :model="details" :rules="rules">
<a-form-model ref="remarkFrom" :model="details" :rules="rules">
<a-row :gutter="24">
<a-col :span="12">
<a-form-model-item prop="soremark">
@ -94,16 +94,19 @@ export default {
</style>
<style lang="less" scoped>
.tit {
margin-bottom: 10px;
// margin-bottom: 10px;
// font-size: 14px;
// color: #666;
font-size: 14px;
color: #666;
line-height: 32px;
.iconfont {
margin-right: 4px;
font-weight: 600;
}
}
.ramark-box {
margin-bottom: 20px;
margin-bottom: 2px;
// padding-bottom: 10px;
}
.required{

@ -283,10 +283,8 @@ export default {
margin-bottom: 10px;
height: 54px;
padding-top: 4px;
box-sizing: border-box;
box-sizing: border-box;
}
.line {
text-align: left;
width: 100%;

Loading…
Cancel
Save