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

订舱详情

Browse Source
dev
lilu 2 years ago
parent 5f8f9d43dc
commit fcc2cfc127
7 changed files with 355 additions and 61 deletions
Show Stats Download Patch File Download Diff File

2
public/index.html
Unescape Escape View File

@ -11,7 +11,7 @@
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_rdzgrx8i7xi.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_gubqtj026pb.css">
<!-- 1.8K仔百度收录 -->
<meta name="baidu-site-verification" content="code-QVfBYJ5laQ" />
</head>

4
src/utils/request.js
Unescape Escape View File

@ -7,8 +7,8 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'
// 创建 axios 实例
const service = axios.create({
baseURL: '/api', // api base_url
//baseURL: process.env.VUE_APP_API_BASE_URL,//不用代理就用这个
// baseURL: '/api', // api base_url
baseURL: process.env.VUE_APP_API_BASE_URL, // 不用代理就用这个
timeout: 6000 // 请求超时时间
})

6
src/views/main/BookingLedger/detail/index.less
Unescape Escape View File

@ -0,0 +1,6 @@
@import "~ant-design-vue/lib/style/index";
// The prefix to use on all css classes from ant-pro.
@ant-pro-prefix : ant-pro;
@ant-global-sider-zindex : 106;
@ant-global-header-zindex : 105;

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

@ -18,7 +18,7 @@
<goodsTable></goodsTable>
</a-col>
<a-col :span="6">
<rightContent></rightContent>
</a-col>
</a-row>
</div>
@ -31,6 +31,7 @@ import cargoInfo from './modules/cargoInfo'
import billInfo from './modules/billInfo'
import remarksInfo from './modules/remarksInfo'
import goodsTable from './modules/goodsTable'
import rightContent from './modules/rightContent'
export default {
name: 'BookingDetail',
components: {
@ -40,7 +41,8 @@ export default {
cargoInfo,
billInfo,
remarksInfo,
goodsTable
goodsTable,
rightContent
},
data() {
return {}

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

@ -1,44 +1,38 @@
<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>
<a-card :bordered="false">
<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>
<ve-table
rowKeyFieldName="rowKey"
:fixed-header="true"
:columns="editColumnsData"
:table-data="tableData"
:editOption="editOption"
:rowStyleOption="rowStyleOption"
border-y
/>
<div class="table-right">
<span>合计: 123</span>
<span>重量: 123</span>
<span>件数: 123</span>
<span>尺码: 123</span>
</div>
</div>
</x-card>
<div>
<ve-table
rowKeyFieldName="rowKey"
:fixed-header="true"
:columns="editColumnsData"
:table-data="tableData"
:editOption="editOption"
:rowStyleOption="rowStyleOption"
border-y
/>
</div>
</a-card>
</div>
</template>
<script>
import { XCard } from '@/components'
export default {
name: '',
components: {
XCard,
},
data() {
return {
editColumnsData: [
@ -69,6 +63,37 @@ export default {
align: 'left',
width: '8%',
edit: true,
renderBodyCell: ({ row, column, rowIndex }, h) => {
return (
<a-select
show-search
value={row['boxType']}
placeholder="Select a person"
option-filter-prop="children"
style="width: 60px"
on-filter-option={(input, option) =>{
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)}}
on-focus={(val) => {
console.log(val)
}}
on-blur={(val) => {
console.log(val)
}}
>
<a-select-option value="jack">
Jack
</a-select-option>
<a-select-option value="lucy">
Lucy
</a-select-option>
<a-select-option value="tom">
Tom
</a-select-option>
</a-select>
)
},
},
{
field: 'case',
@ -151,6 +176,7 @@ export default {
],
tableData: [
{
rowKey: 1001,
boxType: '40GP',
case: '40Lp',
boxNum: '32',
@ -164,6 +190,7 @@ export default {
weighingWeight: '称重重量',
},
{
rowKey: 1002,
boxType: '40GP',
case: '40Lp',
boxNum: '32',
@ -177,6 +204,7 @@ export default {
weighingWeight: '称重重量',
},
{
rowKey: 1003,
boxType: '40GP',
case: '40Lp',
boxNum: '32',
@ -190,6 +218,7 @@ export default {
weighingWeight: '称重重量',
},
{
rowKey: 1004,
boxType: '40GP',
case: '40Lp',
boxNum: '32',
@ -203,6 +232,7 @@ export default {
weighingWeight: '称重重量',
},
{
rowKey: 1005,
boxType: '40GP',
case: '40Lp',
boxNum: '32',

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

@ -1,26 +1,20 @@
<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>
<a-card class="ramark-box" :bordered="false">
<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>
</a-card>
</template>
<script>
import { XCard } from '@/components'
export default {
name: '',
components: {
XCard,
},
data() {
return {
remarks: '',
@ -40,8 +34,8 @@ export default {
font-weight: 600;
}
}
.ramark-box{
margin-bottom: 20px;
padding-bottom: 10px;
.ramark-box {
margin-bottom: 20px;
// padding-bottom: 10px;
}
</style>

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

@ -1,17 +1,279 @@
<template>
<div class="right-box">
<a-card :bodyStyle="tstyle" :bordered="false">
<div class="title"><i class="iconfont icon-ERP_zhuyi"></i><span>注意事项</span></div>
<div class="content">
<div class="tip">
注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项
</div>
</div>
</a-card>
<a-card :bodyStyle="tstyle" :bordered="false">
<div class="title"><i class="iconfont icon-fuwu"></i><span>服务项目</span></div>
<div class="content">
<div class="items">项目1项目1</div>
<div class="items">项22目1</div>
<div class="items">项目1</div>
<div class="items">项目1</div>
</div>
</a-card>
<a-card :bodyStyle="tstyle" :bordered="false">
<div class="title"><i class="iconfont icon-beizhu1"></i><span>备注</span></div>
<div class="content">
<div class="remark">
<div class="top"><i class="iconfont icon-yuandian"></i>备注内容备注内容备注内容备注内容备注内容备注内容</div>
<div class="bottom">2022-01-11 00：00：00</div>
</div>
<div class="remark">
<div class="top"><i class="iconfont icon-yuandian"></i>备注内容</div>
<div class="bottom">2022-01-11 00：00：00</div>
</div>
</div>
</a-card>
<a-card :bodyStyle="tstyle" :bordered="false">
<div class="title"><i class="iconfont icon-fujian-wenjian"></i><span>附件</span></div>
<div class="content">
<a-button type="primary" class="file-btn">新增附件</a-button>
<div class="file">
<div class="top">
<span class="left"><i class="iconfont icon-tupian"></i>文件名</span>
<span class="right"><i class="iconfont icon-yulan"></i><i class="iconfont icon-arrow-"></i></span>
</div>
<div class="bottom">2022-01-11 00：00：00</div>
</div>
<div class="file">
<div class="top">
<span class="left"><i class="iconfont icon-tupian"></i>文件名</span>
<span class="right"><i class="iconfont icon-yulan"></i><i class="iconfont icon-arrow-"></i></span>
</div>
<div class="bottom">2022-01-11 00：00：00</div>
</div>
<div class="file">
<div class="top">
<span class="left"><i class="iconfont icon-tupian"></i>文件名</span>
<span class="right"><i class="iconfont icon-yulan"></i><i class="iconfont icon-arrow-"></i></span>
</div>
<div class="bottom">2022-01-11 00：00：00</div>
</div>
</div>
</a-card>
<a-card :bodyStyle="tstyle" :bordered="false">
<div class="title"><i class="iconfont icon-lightning-full"></i><span>订单及货运动态</span></div>
<div class="content">
<div class="no-data">暂无内容</div>
</div>
</a-card>
<a-collapse class="collapse-box" :bordered="false" expandIconPosition="right">
<a-collapse-panel>
<template slot="header">
<div class="title"><i class="iconfont icon-rizhi"></i><span>日志</span></div>
</template>
<div class="cargo-info">
<div class="info-header">
<span>修改人</span>
<span>修改时间</span>
</div>
<div class="list">
<span>合川陈哈哈</span>
<span>2011-11-11 11:11:11</span>
</div>
<div class="list">
<span>合川陈哈哈</span>
<span>2011-11-11 11:11:11</span>
</div>
<div class="list">
<span>合川陈哈哈</span>
<span>2011-11-11 11:11:11</span>
</div>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</template>
<script>
<script>
export default {
name: '',
data() {
return {}
return {
tstyle: { padding: '0 15px 20px', 'margin-bottom': '10px', background: '#fff' },
}
},
created() {},
methods: {},
}
</script>
<style lang="less">
<style lang="less" scoped>
@import url('../index.less');
.title {
height: 46px;
line-height: 46px;
border-bottom: 1px solid #ccc;
font-size: 14px;
color: #666;
font-weight: 600;
.iconfont {
font-size: 14px;
margin-right: 10px;
color: @primary-color;
}
}
.content {
.tip {
width: 100%;
padding: 10px;
line-height: 22px;
font-size: 13px;
color: #666;
position: relative;
margin-top: 10px;
&::before {
width: 100%;
height: 100%;
content: '';
background: @primary-color;
opacity: 0.08;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
}
}
.items {
display: inline-block;
height: 28px;
line-height: 26px;
border: 1px dashed #ccc;
border-radius: 4px;
padding: 0 10px;
margin-top: 10px;
margin-right: 10px;
font-size: 13px;
cursor: pointer;
&:hover {
border: 1px dashed @primary-color;
position: relative;
&::before {
width: 100%;
height: 100%;
content: '';
background: @primary-color;
opacity: 0.08;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
}
}
}
.remark {
padding: 8px 0;
.top {
font-size: 13px;
line-height: 24px;
color: #666;
font-weight: 600;
position: relative;
padding-left: 20px;
.iconfont {
margin-right: 4px;
color: @primary-color;
position: absolute;
top: 0;
left: 0;
}
}
.bottom {
color: #999;
padding-left: 20px;
font-size: 12px;
}
}
.file-btn {
margin-top: 10px;
color: #fff;
}
.file {
padding: 10px 0;
border-bottom: 1px solid #eee;
&:nth-last-child(1) {
border: none;
}
.top {
display: flex;
.left {
flex: 1;
font-size: 14px;
color: #666;
i {
margin-right: 8px;
}
}
.right {
width: 40px;
i {
font-size: 14px;
// font-weight: 600;
color: @primary-color;
margin-right: 10px;
cursor: pointer;
}
}
}
.bottom {
font-size: 12px;
color: #999;
}
}
.no-data {
text-align: center;
color: #999;
padding: 20px 0;
line-height: 30px;
}
}
.collapse-box {
background: #fff;
padding-top: 0;
padding-bottom: 0;
border: none;
.title {
border: none;
}
.cargo-info {
.info-header{
display: flex;
background: #f4f4f4;
height: 40px;
line-height: 40px;
text-align: center;
span{
display: inline-block;
border: 1px solid #eee;
flex: 1;
&:nth-of-type(1){
border-right: none;
}
}
}
.list{
display: flex;
background: #fff;
height: 40px;
line-height: 40px;
text-align: center;
span{
display: inline-block;
flex: 1;
border: 1px solid #eee;
border-top: none;
padding: 0 8px;
overflow: hidden;
&:nth-of-type(1){
border-right: none;
}
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save