Skip to content

M
member
Commit fa76eb8d by caoyanzhi
Options

update: 添加门店code

parent 9cd65180
Showing with 117 additions and 56 deletions
src/components/allCustomers/order-list/order-table.vue
......@@ -20,6 +20,7 @@
style="margin-left: 10px">
</el-date-picker>
</div>
<!-- 展示表头 -->
<el-table class="table-header">
<el-table-column label="商品信息" min-width="350px"></el-table-column>
<el-table-column label="吊牌价/应收(元)" min-width="130px"></el-table-column>
......@@ -28,6 +29,7 @@
<el-table-column label="订单金额(元)" min-width="210px"></el-table-column>
<el-table-column label="收货/导购信息" min-width="244px"></el-table-column>
</el-table>
<!-- 无数据时列表展示 -->
<el-table v-if="tableData.length == 0" :show-header="false">
<el-table-column label="商品信息" min-width="350px"></el-table-column>
<el-table-column label="吊牌价/应收(元)" min-width="130px"></el-table-column>
......@@ -36,33 +38,52 @@
<el-table-column label="订单金额(元)" min-width="210px"></el-table-column>
<el-table-column label="收货/导购信息" min-width="244px"></el-table-column>
</el-table>
<!-- 有数据时列表展示 -->
<div class="order-list" v-for="el in tableData" :key="el">
<div class="order-info-box">
<div class="order-info">
<!-- orderType 订单类型 -1 所有，1 销售，2.退货，4.退换货 -->
<!-- 购买单、销售单为绿色背景 order-buy -->
<!-- 退款单背景色为红色 order-refund -->
<!-- 退换单背景色为黄色 order-exchange -->
<!-- 线下订单orderType=1时为销售单 -->
<div v-if="el.orderType == 1" class="order-type-tag order-buy">{{ el.channelType == 3 ? '销售单' : '购买单' }}</div>
<div v-if="el.orderType == 2" class="order-type-tag order-refund">退款单</div>
<div v-if="el.orderType == 4" class="order-type-tag order-exchange">退换货单</div>
<!-- 购买单、销售单为订单号 -->
<!-- 退款单为退款单号 -->
<!-- 退换单为退换单号 -->
<div class="order-num">订单号：{{ el.orderNumber }}</div>
<!-- 退款单、退换单才有原始单号 -->
<div class="connect-order-num">{{ el.orderType == 2 || el.orderType == 4 ? `原始订单号：${ el.oorderNumber }` : ''}}</div>
<div class="order-create-time">创建时间：{{ el.orderCreateTime | formatTime }}</div>
<div class="order-sync-time">订单同步时间：{{ el.createTime | formatTime }}</div>
</div>
<div class="store-info">
<!-- 天猫、微盟、抖音、门店 -->
<div v-if="formatChannelType(el.channelType)" class="store-type-tag">{{ formatChannelType(el.channelType) }}</div>
<div class="store-name">{{ el.storeName }}</div>
</div>
</div>
<el-table :data="el.orderItems" :show-header="false" :span-method="({ rowIndex, columnIndex }) => spanMethod(el, rowIndex, columnIndex)" class="order-detail">
<!-- 订单号、订单时间、门店等信息 -->
<el-table class="order-info-box" :data="[{}]" :span-method="orderInfoSpan" :show-header="false">
<el-table-column label="商品信息" min-width="350px">
<div class="order-info">
<!-- orderType 订单类型 -1 所有，1 销售，2.退货，4.退换货 -->
<!-- 购买单、销售单为绿色背景 order-buy -->
<!-- 退款单背景色为红色 order-refund -->
<!-- 退换单背景色为黄色 order-exchange -->
<!-- 线下订单orderType=1时为销售单 -->
<div v-if="el.orderType == 1" class="order-type-tag order-buy">{{ el.channelType == 3 ? '销售单' : '购买单' }}</div>
<div v-if="el.orderType == 2" class="order-type-tag order-refund">退款单</div>
<div v-if="el.orderType == 4" class="order-type-tag order-exchange">退换货单</div>
<!-- 购买单、销售单为订单号 -->
<!-- 退款单为退款单号 -->
<!-- 退换单为退换单号 -->
<div class="order-num">订单号：{{ el.orderNumber }}</div>
<!-- 退款单、退换单才有原始单号 -->
<div class="connect-order-num">{{ el.orderType == 2 || el.orderType == 4 ? `原始订单号：${ el.oorderNumber }` : ''}}</div>
</div>
</el-table-column>
<el-table-column label="吊牌价/应收(元)" min-width="130px">abc</el-table-column>
<el-table-column label="数量" min-width="70px">
<div class="order-time-info">
<div class="time-info-box">
<div class="order-create-time">创建时间：{{ el.orderCreateTime | formatTime }}</div>
<div class="order-sync-time">订单同步时间：{{ el.createTime | formatTime }}</div>
</div>
<div class="store-info">
<!-- 天猫、微盟、抖音、门店 -->
<div v-if="formatChannelType(el.channelType)" class="store-type-tag">{{ formatChannelType(el.channelType) }}</div>
<div class="store-name">
{{ el.storeName }}
<br />
<template v-if="el.channelType == 3">{{ el.storeCode }}</template>
</div>
</div>
</div>
</el-table-column>
<el-table-column label="小计金额(元)" min-width="120px">abc</el-table-column>
<el-table-column label="订单金额(元)" min-width="210px">abc</el-table-column>
<el-table-column label="收货/导购信息" min-width="244px">abc</el-table-column>
</el-table>
<!-- 订单商品、价格等信息 -->
<el-table :data="el.orderItems" :show-header="false" :span-method="({ rowIndex, columnIndex }) => goodsInfoSpan(el, rowIndex, columnIndex)" class="order-detail">
<el-table-column label="商品信息" min-width="350px" show-overflow-tooltip>
<div class="goods-info-box" slot-scope="{ row }">
<div class="goods-logo">
......@@ -274,7 +295,16 @@ export default {
this.getTableData();
},
methods: {
spanMethod(data, rowIndex, columnIndex) {
orderInfoSpan({rowIndex, columnIndex}) {
if (columnIndex == 0) {
return [1, 2];
} else if (columnIndex == 2) {
return [1, 4];
} else {
return [0, 0];
}
},
goodsInfoSpan(data, rowIndex, columnIndex) {
if (columnIndex == 4 || columnIndex == 5) {
if (rowIndex == 0) {
return [data.orderItems.length, 1];
......@@ -349,16 +379,15 @@ export default {
/deep/ .el-table__empty-block {
display: none;
}
/deep/ th>.cell:first-child {
padding-left: 10px;
}
}
.order-list {
+.order-list {
margin-top: 12px;
}
.order-info-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
width: 100%;
height: 36px;
font-size: 13px;
......@@ -367,6 +396,13 @@ export default {
background: #F7F8FA;
border-bottom: 1px solid #E4E7ED;
box-sizing: border-box;
/deep/ tr, /deep/ tr:hover>td.el-table__cell {
background-color: transparent;
}
/deep/ .el-table__cell {
padding: 0;
border-bottom: none;
}
&+.order-info-box {
margin-top: 12px;
}
......@@ -374,7 +410,9 @@ export default {
display: flex;
justify-content: flex-start;
align-items: center;
height: 36px;
.order-type-tag {
flex-shrink: 0;
padding: 0 9px;
height: 22px;
text-align: center;
......@@ -395,42 +433,65 @@ export default {
}
}
.order-num {
flex-shrink: 0;
margin-left: 17px;
width: 166px;
}
.connect-order-num {
margin-left: 30px;
width: 179px;
}
.order-create-time {
margin-left: 37px;
width: 196px;
}
.order-sync-time {
margin-left: 30px;
width: 222px;
.connect-order-num {
flex-shrink: 0;
width: 210px;
}
}
.store-info {
.order-time-info {
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: center;
.store-type-tag {
height: 36px;
.time-info-box {
flex-shrink: 0;
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
margin-right: 6px;
padding: 0 4px;
// width: 32px;
height: 18px;
background: #DEE3FC;
border-radius: 2px;
font-size: 12px;
font-weight: 400;
color: #2F54EB;
.order-create-time {
flex-shrink: 0;
width: 200px;
}
.order-sync-time {
flex-shrink: 0;
margin-left: 30px;
width: 228px;
}
}
.store-info {
// flex-shrink: 0;
display: flex;
justify-content: flex-start;
align-items: center;
line-height: normal;
max-width: calc(100% - 475px);
.store-type-tag {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
margin-right: 6px;
padding: 0 4px;
// width: 32px;
height: 18px;
background: #DEE3FC;
border-radius: 2px;
font-size: 12px;
font-weight: 400;
color: #2F54EB;
}
.store-name {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.goods-info-box {
display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment