修改
This commit is contained in:
‘937886381’
@@ -44,14 +44,14 @@
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
<!-- <method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="80"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="viewDetDetail"
|
||||
/>
|
||||
/> -->
|
||||
</base-table>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
@@ -63,7 +63,7 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="环形图" name="barChart">
|
||||
<div v-if="activeName === 'barChart'">
|
||||
<div
|
||||
<div
|
||||
id="logDetPieBar"
|
||||
style="width: 60%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
@@ -73,51 +73,14 @@
|
||||
</el-tabs>
|
||||
</div>
|
||||
<!-- 详情抽屉 -->
|
||||
<el-drawer
|
||||
title="发货详情"
|
||||
size="50%"
|
||||
:append-to-body="true"
|
||||
:visible.sync="innerDrawer"
|
||||
@close='closeB'
|
||||
:show-close='false'>
|
||||
<div class="box3">
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<span class="title">订单名：</span>
|
||||
<span class="text">{{orderMsg.orderName ? orderMsg.orderName : '-'}}</span>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<span class="title">发货单号：</span>
|
||||
<span class="text">{{logCode ? logCode : '-'}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="box4">
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>详情</span>
|
||||
</div>
|
||||
<base-table
|
||||
:page="queryParams2.pageNo"
|
||||
:limit="queryParams2.pageSize"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:max-height="tableH2"
|
||||
/>
|
||||
<pagination
|
||||
:page.sync="queryParams2.pageNo"
|
||||
:limit.sync="queryParams2.pageSize"
|
||||
:total="total2"
|
||||
@pagination="getList2"
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { deliveryLogPage, deliveryLogDetPage } from '@/api/base/delivery'
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
import * as echarts from 'echarts'
|
||||
import detailButton from './detailButton';
|
||||
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
const tableProps = [
|
||||
{
|
||||
@@ -142,55 +105,21 @@ const tableProps = [
|
||||
{
|
||||
prop: 'rate',
|
||||
label: '发货比列(%)',
|
||||
width: 110
|
||||
width: 110,
|
||||
filter: (val) =>
|
||||
val != null ? `${(val).toFixed(2)}%` : '',
|
||||
},
|
||||
{
|
||||
prop: 'principalCost',
|
||||
label: '运输费用'
|
||||
},
|
||||
{
|
||||
prop: 'desc',
|
||||
label: '装车详情',
|
||||
subcomponent: detailButton,
|
||||
}
|
||||
]
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '添加时间',
|
||||
filter: parseTime,
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
prop: 'deliveryCarCode',
|
||||
label: '装车单号',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'loadTime',
|
||||
label: '装车时间',
|
||||
filter: parseTime,
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: '装车产品',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'packagingSize',
|
||||
label: '装箱规格（片/箱）',
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
prop: 'packagingNum',
|
||||
label: '箱数'
|
||||
},
|
||||
{
|
||||
prop: 'quantity',
|
||||
label: '装车总量'
|
||||
},
|
||||
{
|
||||
prop: 'productDate',
|
||||
label: '产品批次',
|
||||
showOverflowtooltip: true
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'DeliveryLogDetDetail',
|
||||
mixins: [resize],
|
||||
@@ -224,7 +153,6 @@ export default {
|
||||
pageSize: 20,
|
||||
logId: ''
|
||||
},
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
tableH2: this.tableHeight(275),
|
||||
total2: 0,
|
||||
@@ -288,7 +216,7 @@ export default {
|
||||
for (let i = 0; i < this.tableData.length; i++) {
|
||||
let obj = {}
|
||||
obj.value = this.tableData[i].num
|
||||
obj.name = this.tableData[i].name
|
||||
obj.name = this.tableData[i].code
|
||||
seriesData.push(obj)
|
||||
if (i < 5) {
|
||||
colorList.push(color[i])
|
||||
@@ -394,14 +322,7 @@ export default {
|
||||
this.total2 = res.data.total || 0
|
||||
})
|
||||
},
|
||||
closeB() {
|
||||
this.logCode = ''
|
||||
this.queryParams2.pageNo = 1
|
||||
this.queryParams2.pageSize = 20
|
||||
this.queryParams2.logId = ''
|
||||
this.tableData2 = []
|
||||
this.total2 = 0
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -498,4 +419,4 @@ export default {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
253
src/views/delivery/deliveryLogDet/components/detailButton.vue
Normal file
253
src/views/delivery/deliveryLogDet/components/detailButton.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-03 14:09:18
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-10-13 16:47:25
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="tableInner">
|
||||
<el-button @click="viewDetDetail" type="text" style="margin: 5px 0; padding: 0" >
|
||||
<span class="iconfont" :class="'icon-detail' +
|
||||
' primary-color'
|
||||
"></span>
|
||||
</el-button>
|
||||
<el-drawer title="发货详情" size="50%" :append-to-body="true" :visible.sync="innerDrawer" @close='closeB'
|
||||
:show-close='false'>
|
||||
<div class="box3">
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<span class="title">订单名：</span>
|
||||
<span class="text">{{ orderMsg.orderName ? orderMsg.orderName : '-' }}</span>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<span class="title">发货单号：</span>
|
||||
<span class="text">{{ logCode ? logCode : '-' }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="box4">
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>详情</span>
|
||||
</div>
|
||||
<base-table :page="queryParams2.pageNo" :limit="queryParams2.pageSize" :table-props="tableProps2"
|
||||
:table-data="tableData2" :max-height="tableH2" />
|
||||
<pagination :page.sync="queryParams2.pageNo" :limit.sync="queryParams2.pageSize" :total="total2"
|
||||
@pagination="getList2" />
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deliveryLogDetPage } from '@/api/base/delivery'
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
|
||||
const tableProps2 = [
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '添加时间',
|
||||
// filter: parseTime,
|
||||
// minWidth: 160
|
||||
// },
|
||||
{
|
||||
prop: 'deliveryCarCode',
|
||||
label: '装车单号',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'loadTime',
|
||||
label: '装车时间',
|
||||
filter: parseTime,
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: '装车产品',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'packagingSize',
|
||||
label: '装箱规格（片/箱）',
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
prop: 'packagingNum',
|
||||
label: '箱数'
|
||||
},
|
||||
{
|
||||
prop: 'quantity',
|
||||
label: '装车总量'
|
||||
},
|
||||
{
|
||||
prop: 'productDate',
|
||||
label: '产品批次',
|
||||
showOverflowtooltip: true
|
||||
}
|
||||
]
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: this.injectData,
|
||||
visible: false,
|
||||
tableProps2,
|
||||
logCode:'',
|
||||
orderMsg: {},
|
||||
tableData2: [],
|
||||
tableH2: this.tableHeight(275),
|
||||
total2: 0,
|
||||
innerDrawer:false,
|
||||
queryParams2: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
logId: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH2 = this.tableHeight(275)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
viewDetDetail() {
|
||||
console.log(this.list);
|
||||
|
||||
this.logCode = this.list.code
|
||||
this.orderMsg.orderName = this.list.orderName
|
||||
this.innerDrawer = true
|
||||
this.queryParams2.logId = this.list.id
|
||||
this.getList2()
|
||||
},
|
||||
closeB() {
|
||||
this.logCode = ''
|
||||
this.queryParams2.pageNo = 1
|
||||
this.queryParams2.pageSize = 20
|
||||
this.queryParams2.logId = ''
|
||||
this.tableData2 = []
|
||||
this.total2 = 0
|
||||
},
|
||||
getList2() {
|
||||
deliveryLogDetPage({ ...this.queryParams2 }).then(res => {
|
||||
this.tableData2 = res.data.list || []
|
||||
this.total2 = res.data.total || 0
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.box1 {
|
||||
height: 76px;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
margin: 0px 8px 20px 30px;
|
||||
|
||||
.box_col {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
padding: 8px 8px 8px 8px;
|
||||
|
||||
.blodTip {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.lightTip {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box2 {
|
||||
padding: 0px 32px 30px 30px;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.boxTitle {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.blueTitle {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
padding: 8px 8px 8px 40px;
|
||||
|
||||
.title {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.text {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.box4 {
|
||||
padding: 32px 32px 30px 30px;
|
||||
height: calc(100vh - 125px);
|
||||
}
|
||||
</style>
|
||||
<style lang='scss'>
|
||||
.deliveryLogDetail {
|
||||
.el-tabs__nav::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #e4e7ed;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
src/views/delivery/deliveryLogDet/components/shippingBtn.vue
Normal file
153
src/views/delivery/deliveryLogDet/components/shippingBtn.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-03 14:09:18
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-10-13 16:47:25
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="tableInner">
|
||||
<el-button @click="handleClick" type="text" style="margin: 5px 0; padding: 0">
|
||||
<span class="iconfont" :class="'icon-detail' +
|
||||
' primary-color'
|
||||
"></span>
|
||||
</el-button>
|
||||
<delivery-log-det-detail ref='deliveryLogDetail' />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DeliveryLogDetDetail from './deliveryLogDetDetail.vue'
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: this.injectData,
|
||||
};
|
||||
},
|
||||
components: { DeliveryLogDetDetail },
|
||||
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.deliveryLogDetail.init(this.list)
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.box1 {
|
||||
height: 76px;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
margin: 0px 8px 20px 30px;
|
||||
|
||||
.box_col {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
padding: 8px 8px 8px 8px;
|
||||
|
||||
.blodTip {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.lightTip {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box2 {
|
||||
padding: 0px 32px 30px 30px;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.boxTitle {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.blueTitle {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
padding: 8px 8px 8px 40px;
|
||||
|
||||
.title {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.text {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.box4 {
|
||||
padding: 32px 32px 30px 30px;
|
||||
height: calc(100vh - 125px);
|
||||
}
|
||||
</style>
|
||||
<style lang='scss'>
|
||||
.deliveryLogDetail {
|
||||
.el-tabs__nav::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #e4e7ed;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user