whm
/
BookingHeChuanFront
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

临时提交

Browse Source
dev
lilu 2 years ago
parent 4e25be0d50
commit e75d0e1fb1
8 changed files with 1285 additions and 112 deletions
Show Stats Download Patch File Download Diff File

22
src/views/main/BookingLedger/detail/index.vue
Unescape Escape View File

@ -8,8 +8,18 @@
<basicInfo></basicInfo>
<!-- 收发通信息 -->
<mailingInfo></mailingInfo>
<!-- 货物信息 -->
<cargoInfo></cargoInfo>
<!-- 签单信息 -->
<billInfo></billInfo>
<!-- 备注信息 -->
<remarksInfo></remarksInfo>
<!-- 箱型 -->
<goodsTable></goodsTable>
</a-col>
<a-col :span="6">
</a-col>
<a-col :span="6"> </a-col>
</a-row>
</div>
</template>
@ -17,12 +27,20 @@
import operationArea from './modules/operationArea'
import basicInfo from './modules/basicInfo'
import mailingInfo from './modules/mailingInfo'
import cargoInfo from './modules/cargoInfo'
import billInfo from './modules/billInfo'
import remarksInfo from './modules/remarksInfo'
import goodsTable from './modules/goodsTable'
export default {
name: 'BookingDetail',
components: {
operationArea,
basicInfo,
mailingInfo
mailingInfo,
cargoInfo,
billInfo,
remarksInfo,
goodsTable
},
data() {
return {}

285
src/views/main/BookingLedger/detail/modules/billInfo.vue
Unescape Escape View File

@ -0,0 +1,285 @@
<template>
<a-collapse class="collapse-box" :bordered="false" expandIconPosition="right">
<a-collapse-panel>
<template slot="header">
<div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>签单信息</div>
</template>
<div class="container bill-info">
<a-form :form="form">
<a-row :gutter="10">
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="签单方式" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入签单方式！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入签单方式"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="签单日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-date-picker
format="YYYY-MM-DD HH:mm:ss"
placeholder="签单日期"
v-decorator="['createdTime', { rules: [{ required: false }] }]"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item
class="from-label"
label="签单地点"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入签单地点！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入签单地点"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="签单代码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入签单代码！"
v-decorator="['code', { rules: [{ required: true, message: '请输入签单代码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="提单份数" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-select default-value="ONE" style="width: 120px" @change="handleChange">
<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>
</a-select>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="副本份数" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-select default-value="ONE" style="width: 120px" @change="handleChange">
<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>
</a-select>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item
class="from-label"
label="预付地点"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入预付地点！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入预付地点"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item
class="from-label"
label="到付地点"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入到付地点！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入到付地点"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item
class="from-label"
label="付费方式"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入付费方式！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入付费方式"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item
class="from-label"
label="第三付款地"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入第三付款地！"
v-decorator="['code', { rules: [{ required: true, message: '请输入第三付款地！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item
class="from-label"
label="运输条款"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入运输条款！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入运输条款"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item
class="from-label"
label="冷藏通风量"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入冷藏通风量！"
v-decorator="['code', { rules: [{ required: true, message: '请输入冷藏通风量！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="设置温度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入设置温度！"
v-decorator="['code', { rules: [{ required: true, message: '请输入设置温度！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="温度单位" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入温度单位！"
v-decorator="['code', { rules: [{ required: true, message: '请输入温度单位！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="最低温度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入最低温度！"
v-decorator="['code', { rules: [{ required: true, message: '请输入最低温度！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="最高温度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入最高温度！"
v-decorator="['code', { rules: [{ required: true, message: '请输入最高温度！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
<a-form-item class="from-label" label="湿度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入湿度！"
v-decorator="['code', { rules: [{ required: true, message: '请输入湿度！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
</a-collapse-panel>
</a-collapse>
</template>
<script>
import { AutoComplete } from 'ant-design-vue'
export default {
name: '',
components: {
AutoComplete
},
data() {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
md: { span: 10 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 },
md: { span: 13 },
},
form: this.$form.createForm(this),
dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],
}
},
created() {},
methods: {
filterOption(input, option) {
return option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
},
},
}
</script>
<style lang="less" scoped>
.collapse-box{
margin-bottom: 10px;
background: #fff;
}
.base-tit {
font-size: 14px;
font-weight: 600;
color: #666;
position: relative;
height: 40px;
line-height: 40px;
&::before {
content: '';
position: absolute;
width: 4px;
height: 30px;
background: #1ebcd5;
top: 6px;
left: -10px;
}
i {
margin-right: 10px;
font-weight: 500;
}
}
</style>

139
src/views/main/BookingLedger/detail/modules/cargoInfo.vue
Unescape Escape View File

@ -0,0 +1,139 @@
<template>
<a-collapse class="collapse-box" :bordered="false" expandIconPosition="right">
<a-collapse-panel>
<template slot="header">
<div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>货物信息</div>
</template>
<div class="container cargo-info">
<a-row :gutter="20">
<a-col :span="8">
<div class="tit">
<div>Seal No.(封志号)</div>
<div>Marks & Nos.(标记与号码)</div>
</div>
<div class="bottom">
<a-textarea class="input-box" placeholder="请输入内容" v-model="sealNo" />
</div>
</a-col>
<a-col :span="16">
<div class="line">
<div class="left">
<div>Description of Goods</div>
<div>(包装种类与货名)</div>
</div>
<div class="input">
<div>货物标志</div>
<a-select default-value="R" style="width: 120px">
<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>
</a-select>
</div>
<div class="input">
<div>HS编码</div>
<a-input placeholder="请输入HS编码" v-model="HSinput" />
</div>
</div>
<div class="bottom">
<a-textarea class="input-box" placeholder="请输入内容" v-model="sealNo" />
</div>
</a-col>
<a-col class="num-box" :span="24">
<span class="label">件数大写: </span>
<a-input class="input-val" placeholder="请输入件数大写" v-model="HSinput" />
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</template>
<script>
export default {
name: '',
data() {
return {
sealNo: '',
HSinput: '',
}
},
created() {},
methods: {},
}
</script>
<style lang="less" scoped>
.collapse-box{
margin-bottom: 10px;
background: #fff;
}
.base-tit {
font-size: 14px;
font-weight: 600;
color: #666;
position: relative;
height: 40px;
line-height: 40px;
&::before {
content: '';
position: absolute;
width: 4px;
height: 30px;
background: #1ebcd5;
top: 6px;
left: -10px;
}
i {
margin-right: 10px;
font-weight: 500;
}
}
.cargo-info {
box-shadow: none;
font-size: 14px;
color: #666;
.tit {
text-align: left;
width: 100%;
margin-bottom: 10px;
height: 54px;
padding-top: 4px;
box-sizing: border-box;
}
.line {
text-align: left;
width: 100%;
display: flex;
margin-bottom: 10px;
height: 54px;
}
.left {
text-align: left;
display: inline-block;
width: 170px;
}
.input {
text-align: left;
display: inline-block;
flex: 1;
}
.input-box {
height: 200px;
}
.num-box{
display: flex;
height: 30px;
margin-top: 15px;
}
.label{
width: 80px;
height: 30px;
line-height: 30px;
font-size: 14px;
}
.input-val{
flex:1;
}
}
</style>

276
src/views/main/BookingLedger/detail/modules/goodsTable.vue
Unescape Escape View File

@ -0,0 +1,276 @@
<template>
<div class="goods-table">
<x-card>
<div slot="content">
<div class="from-line">
<div class="left">
<a-button class="btn" type="primary" @click="addboxLine">添加</a-button>
<a-button class="btn" type="primary">删除</a-button>
<a-button class="btn" type="primary" @click="openDialog">多品名</a-button>
<a-button class="btn" type="primary">引入场站数据</a-button>
<a-button class="btn" type="primary">引入箱皮重</a-button>
</div>
<div class="table-right">
<span>合计: 123</span>
<span>重量: 123</span>
<span>件数: 123</span>
<span>尺码: 123</span>
</div>
</div>
<div>
<ve-table
rowKeyFieldName="rowKey"
:fixed-header="true"
:columns="editColumnsData"
:table-data="tableData"
:editOption="editOption"
:rowStyleOption="rowStyleOption"
border-y
/>
</div>
</div>
</x-card>
</div>
</template>
<script>
import { XCard } from '@/components'
export default {
name: '',
components: {
XCard,
},
data() {
return {
editColumnsData: [
// {
// field: '',
// key: 'checkbox',
// type: 'checkbox',
// title: '序号',
// width: 50,
// operationColumn: true,
// align: 'center',
// },
{
field: '',
key: 'a',
title: '',
width: 50,
align: 'center',
operationColumn: true,
renderBodyCell: ({ row, column, rowIndex }, h) => {
return ++rowIndex
},
},
{
field: 'boxType',
key: 'boxType',
title: '箱型',
align: 'left',
width: '8%',
edit: true,
},
{
field: 'case',
key: 'case ',
title: '箱量',
align: 'left',
width: '8%',
edit: true,
},
{
field: 'boxNum',
key: 'boxNum',
title: '箱号',
align: 'right',
width: '8%',
edit: true,
},
{
field: 'title',
key: 'title',
title: '封号',
align: 'left',
width: '8%',
edit: true,
},
{
field: 'number',
key: 'number',
title: '件数',
align: 'left',
width: '8%',
edit: true,
},
{
field: 'packing',
key: 'packing',
title: '包装',
align: 'left',
width: '8%',
edit: true,
},
{
field: 'weight',
key: 'weight',
title: '重量',
align: 'left',
width: '8%',
edit: true,
},
{
field: 'size',
key: 'size',
title: '尺码',
align: 'left',
width: '8%',
edit: true,
},
{
field: 'tareWeight',
key: 'tareWeight',
title: '箱皮重',
align: 'left',
width: '8%',
edit: true,
},
{
field: 'weighType',
key: 'weighType',
title: '称重方式',
align: 'left',
edit: true,
},
{
field: 'weighingWeight',
key: 'weighingWeight',
title: '称重重量',
align: 'left',
edit: true,
},
],
tableData: [
{
boxType: '40GP',
case: '40Lp',
boxNum: '32',
title: '封号',
number: 1,
packing: '包装',
weight: '60KG',
size: 'L',
tareWeight: '2KG',
weighType: '称重方式',
weighingWeight: '称重重量',
},
{
boxType: '40GP',
case: '40Lp',
boxNum: '32',
title: '封号',
number: 1,
packing: '包装',
weight: '60KG',
size: 'L',
tareWeight: '2KG',
weighType: '称重方式',
weighingWeight: '称重重量',
},
{
boxType: '40GP',
case: '40Lp',
boxNum: '32',
title: '封号',
number: 1,
packing: '包装',
weight: '60KG',
size: 'L',
tareWeight: '2KG',
weighType: '称重方式',
weighingWeight: '称重重量',
},
{
boxType: '40GP',
case: '40Lp',
boxNum: '32',
title: '封号',
number: 1,
packing: '包装',
weight: '60KG',
size: 'L',
tareWeight: '2KG',
weighType: '称重方式',
weighingWeight: '称重重量',
},
{
boxType: '40GP',
case: '40Lp',
boxNum: '32',
title: '封号',
number: 1,
packing: '包装',
weight: '60KG',
size: 'L',
tareWeight: '2KG',
weighType: '称重方式',
weighingWeight: '称重重量',
},
],
editOption: {
beforeCellValueChange: ({ row, column, changeValue }) => {
console.log('beforeCellValueChange')
console.log('row::', row)
console.log('column::', column)
console.log('changeValue::', changeValue)
console.log('---')
if (column.field === 'number' && !/^\d+$/.test(changeValue)) {
alert('请输入数字')
return false
}
},
afterCellValueChange: ({ row, column, changeValue }) => {
console.log('afterCellValueChange')
console.log('row::', row)
console.log('column::', column)
console.log('changeValue::', changeValue)
console.log('---')
},
},
// 可控单元格编辑
rowStyleOption: {
clickHighlight: false,
hoverHighlight: false,
},
}
},
created() {},
methods: {
addboxLine() {},
openDialog() {},
},
}
</script>
<style lang="less">
.from-line {
display: flex;
margin: 20px 0;
.left {
flex: 1;
text-align: left;
.btn {
margin-right: 10px;
}
}
.table-right {
line-height: 28px;
font-size: 14px;
span {
margin-left: 10px;
color: #666;
font-weight: 600;
}
}
}
</style>

610
src/views/main/BookingLedger/detail/modules/mailingInfo.vue
Unescape Escape View File

@ -1,115 +1,488 @@
<template>
<div>
<a-collapse default-active-key="1" :bordered="false" expandIconPosition="right">
<a-collapse-panel>
<template slot="header">
<div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>收发通信息</div>
</template>
<div class="mail-info">
<a-row :gutter="10">
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<div class="sender">
<div class="top">
<div class="name"><span class="iconfont icon-bianji"></span>发货人 </div>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入船名"
:filter-option="filterOption"
/>
<a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
<div class="right">
<span class="btn-circle">*</span>
<span class="btn" @click="changeCode(35)">35</span>
<span class="btn" @click="changeCode(40)">40</span>
<span class="btn" @click="changeCode(50)">50</span>
</div>
<a-collapse class="collapse-box" :bordered="false" expandIconPosition="right">
<a-collapse-panel>
<template slot="header">
<div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>收发通信息</div>
</template>
<div class="mail-info">
<a-row :gutter="10">
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<div class="sender">
<div class="top">
<div class="name"><span class="iconfont icon-bianji"></span>发货人</div>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入船名"
:filter-option="filterOption"
/>
<a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
<div class="right">
<span class="btn-circle">*</span>
<span class="btn" @click="changeCode(35)">35</span>
<span class="btn" @click="changeCode(40)">40</span>
<span class="btn" @click="changeCode(50)">50</span>
</div>
<div class="bottom">
<a-textarea
v-model="senderInfo"
placeholder="Autosize height with minimum and maximum number of lines"
:auto-size="{ minRows: 2, maxRows: 6 }"
style="height:100px;"
/>
<div class="line-count">
<template v-for="(num, index) in senderInfo.split('\n')">
<div :key="index">{{ num.length }}</div>
</template>
</div>
</div>
<div class="bottom">
<a-textarea
v-model="senderInfo"
placeholder="Autosize height with minimum and maximum number of lines"
:auto-size="{ minRows: 2, maxRows: 6 }"
style="height: 130px"
/>
<div class="line-count">
<template v-for="(num, index) in senderInfo.split('\n')">
<div :key="index">{{ num.length }}</div>
</template>
</div>
</div>
<div class="sender">
<div class="top">
<div class="name"><span class="iconfont icon-bianji"></span>发货人 </div>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入船名"
:filter-option="filterOption"
/>
<a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
<div class="right">
<span class="btn-circle">*</span>
<span class="btn" @click="changeCode(35)">35</span>
<span class="btn" @click="changeCode(40)">40</span>
<span class="btn" @click="changeCode(50)">50</span>
</div>
</div>
<div class="consignee">
<div class="top">
<div class="name"><span class="iconfont icon-bianji"></span>发货人</div>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入船名"
:filter-option="filterOption"
/>
<a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
<div class="right">
<span class="btn-circle">*</span>
<span class="btn" @click="changeCode(35)">35</span>
<span class="btn" @click="changeCode(40)">40</span>
<span class="btn" @click="changeCode(50)">50</span>
</div>
<div class="bottom">
<a-textarea
v-model="senderInfo"
placeholder="Autosize height with minimum and maximum number of lines"
:auto-size="{ minRows: 2, maxRows: 6 }"
style="height:100px;"
/>
<div class="line-count">
<template v-for="(num, index) in senderInfo.split('\n')">
<div :key="index">{{ num.length }}</div>
</template>
</div>
</div>
<div class="bottom">
<a-textarea
v-model="senderInfo"
placeholder="Autosize height with minimum and maximum number of lines"
:auto-size="{ minRows: 2, maxRows: 6 }"
style="height: 130px"
/>
<div class="line-count">
<template v-for="(num, index) in senderInfo.split('\n')">
<div :key="index">{{ num.length }}</div>
</template>
</div>
</div>
<div class="sender">
<div class="top">
<div class="name"><span class="iconfont icon-bianji"></span>发货人 </div>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入船名"
:filter-option="filterOption"
/>
<a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
<div class="right">
<span class="btn-circle">*</span>
<span class="btn" @click="changeCode(35)">35</span>
<span class="btn" @click="changeCode(40)">40</span>
<span class="btn" @click="changeCode(50)">50</span>
</div>
</div>
<div class="notifier">
<div class="top">
<div class="name"><span class="iconfont icon-bianji"></span>发货人</div>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入船名"
:filter-option="filterOption"
/>
<a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
<div class="right">
<span class="btn-circle">*</span>
<span class="btn" @click="changeCode(35)">35</span>
<span class="btn" @click="changeCode(40)">40</span>
<span class="btn" @click="changeCode(50)">50</span>
</div>
<div class="bottom">
<a-textarea
v-model="senderInfo"
placeholder="Autosize height with minimum and maximum number of lines"
:auto-size="{ minRows: 2, maxRows: 6 }"
style="height:100px;"
/>
<div class="line-count">
<template v-for="(num, index) in senderInfo.split('\n')">
<div :key="index">{{ num.length }}</div>
</template>
</div>
</div>
<div class="bottom">
<a-textarea
v-model="senderInfo"
placeholder="Autosize height with minimum and maximum number of lines"
:auto-size="{ minRows: 2, maxRows: 6 }"
style="height: 130px"
/>
<div class="line-count">
<template v-for="(num, index) in senderInfo.split('\n')">
<div :key="index">{{ num.length }}</div>
</template>
</div>
</div>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</div>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<a-form :form="form">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item
class="from-label"
label="场站"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<div style="display: flex">
<auto-complete
style="flex: 1"
v-decorator="['name', { rules: [{ required: true, message: '请输入场站！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入场站"
:filter-option="filterOption"
/>
<i class="iconfont icon-touxiang" style="margin: 0 4px"></i>
<i class="iconfont icon-bianji1"></i>
</div>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="报关行"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入报关行"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入报关行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="车队"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入车队"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入车队！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="国外代理"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入国外代理"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入国外代理！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="预抵日期"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-date-picker
format="YYYY-MM-DD HH:mm:ss"
placeholder="预抵日期"
v-decorator="['createdTime', { rules: [{ required: false }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="截港时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-date-picker
format="YYYY-MM-DD HH:mm:ss"
placeholder="截港时间"
v-decorator="['createdTime', { rules: [{ required: false }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="截单时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-date-picker
format="YYYY-MM-DD HH:mm:ss"
placeholder="截单时间"
v-decorator="['createdTime', { rules: [{ required: false }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="VGM时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-date-picker
format="YYYY-MM-DD HH:mm:ss"
placeholder="VGM时间"
v-decorator="['createdTime', { rules: [{ required: false }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="装货港"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入装货港！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入装货港"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="装货港代码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入装货港代码"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入装货港代码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="中转港"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入中转港！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入中转港"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="中转港代码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入中转港代码"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入中转港代码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="卸货港"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入卸货港！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入卸货港"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="卸货港代码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入卸货港代码"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入卸货港代码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="目的地"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入目的地！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入目的地"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="目的代码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入目的代码"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入目的代码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="交货地"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入交货地！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入交货地"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="交货代码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入交货代码"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入交货代码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="收货地"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入收货地！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入收货地"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="收货代码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入收货代码"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入收货代码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="件数"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入件数"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入件数！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="包装"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<auto-complete
v-decorator="['name', { rules: [{ required: true, message: '请输入包装！' }] }]"
:data-source="dataSource"
option-label-prop="title"
placeholder="请输入包装"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="毛重"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入毛重"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入毛重！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
class="from-label"
label="尺寸"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input
placeholder="请输入尺寸"
v-decorator="['paramName', { rules: [{ required: true, message: '请输入尺寸！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</template>
<script>
import { XCard } from '@/components'
@ -123,6 +496,17 @@ export default {
return {
dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],
senderInfo: 'Hope has always been like a young man, clean and pure.',
form: this.$form.createForm(this),
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
md: { span: 10 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 },
md: { span: 13 },
},
}
},
methods: {
@ -178,6 +562,10 @@ ${newStr.slice(split)}`
}
</script>
<style lang="less" scoped>
.collapse-box{
margin-bottom: 10px;
background: #fff;
}
.base-tit {
font-size: 14px;
font-weight: 600;
@ -200,18 +588,19 @@ ${newStr.slice(split)}`
}
}
.sender,
.consignee {
.consignee,
.notifier {
margin-bottom: 20px;
.top {
margin-bottom: 15px;
margin-bottom: 15px;
.name {
display: inline-block;
display: inline-block;
font-size: 13px;
margin-right: 10px;
color: #666;
color: #666;
.iconfont {
margin-right: 4px;
font-weight: 600;
font-weight: 600;
}
}
.save-btn {
@ -245,8 +634,8 @@ ${newStr.slice(split)}`
font-size: 12px;
margin-right: 4px;
cursor: pointer;
margin-top: 2px;
vertical-align: top;
margin-top: 2px;
vertical-align: top;
}
}
.bottom {
@ -272,4 +661,7 @@ ${newStr.slice(split)}`
}
}
}
.from-label {
margin-bottom: 10px;
}
</style>

47
src/views/main/BookingLedger/detail/modules/remarksInfo.vue
Unescape Escape View File

@ -0,0 +1,47 @@
<template>
<x-card class="ramark-box">
<div slot="content">
<a-row :gutter="24">
<a-col :span="12">
<div class="tit"><span class="iconfont icon-bianji"></span>订舱备注</div>
<a-textarea class="input-box" placeholder="请输入内容" v-model="remarks" />
</a-col>
<a-col :span="12">
<div class="tit"><span class="iconfont icon-bianji"></span>截单备注</div>
<a-textarea class="input-box" placeholder="请输入内容" v-model="remarks" />
</a-col>
</a-row>
</div>
</x-card>
</template>
<script>
import { XCard } from '@/components'
export default {
name: '',
components: {
XCard,
},
data() {
return {
remarks: '',
}
},
created() {},
methods: {},
}
</script>
<style lang="less">
.tit {
margin-bottom: 10px;
font-size: 14px;
color: #666;
.iconfont {
margin-right: 4px;
font-weight: 600;
}
}
.ramark-box{
margin-bottom: 20px;
padding-bottom: 10px;
}
</style>

17
src/views/main/BookingLedger/detail/modules/rightContent.vue
Unescape Escape View File

@ -0,0 +1,17 @@
<template>
<div class="right-box">
</div>
</template>
<script>
export default {
name: '',
data() {
return {}
},
created() {},
methods: {},
}
</script>
<style lang="less">
</style>

1
src/views/tableDemo/index.vue
Unescape Escape View File

@ -503,7 +503,6 @@ export default {
edit: true
}
],
// table data
tableData: [
{
name: 'John',

Write Preview
Loading…
Cancel
Save