<template>
|
<TableLayout :permissions="['business:goodsorder:query']">
|
<!-- 搜索表单 -->
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
|
<!-- 0待支付 1待发货 2待收货 3交易完成 4已关闭 5部分发货 -->
|
<el-tabs v-model="status" @tab-click="handleClick">
|
<el-tab-pane
|
v-for="tab in statusList"
|
:key="tab.name"
|
:name="tab.name"
|
>
|
<template #label>
|
<span>{{ tab.label }}</span>
|
<el-badge
|
v-if="tab.count > 0"
|
:value="tab.count"
|
class="tab-badge"
|
/>
|
</template>
|
</el-tab-pane>
|
</el-tabs>
|
<el-form-item label="订单编号" prop="code">
|
<el-input v-model="searchForm.code" placeholder="请输入订单编号" type="number" clearable @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="收货人" prop="nickName">
|
<el-input v-model="searchForm.nickName" placeholder="请输入姓名/手机号" clearable @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="取货方式" prop="receiveType">
|
<el-select v-model="searchForm.receiveType" placeholder="请选择取货方式" clearable @change="search" >
|
<el-option :key="0" :value="0" label="快递配送"></el-option>
|
<el-option :key="1" :value="1" label="自提"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="归属经销商" prop="shopName">
|
<el-input v-model="searchForm.shopName" placeholder="请输入经销商名称" clearable @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="支付单号" prop="payOrderId">
|
<el-input v-model="searchForm.payOrderId" placeholder="请输入支付单号" clearable @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<div class="date-style" style="display: inline">
|
<el-form-item label="订单时间" prop="starttime" >
|
<el-date-picker
|
style="width: 160px"
|
clearable
|
@change="search"
|
v-model="searchForm.starttime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
range-separator="至"
|
placeholder="开始时间"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="-" label-width="10px" prop="endtime" >
|
<el-date-picker
|
style="width: 160px"
|
clearable
|
v-model="searchForm.endtime"
|
type="datetime"
|
@change="search"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
range-separator="至"
|
placeholder="截止时间"
|
></el-date-picker>
|
</el-form-item>
|
</div>
|
<section>
|
<el-button type="primary" @click="search">搜索</el-button>
|
<el-button type="primary" :loading="isWorking.export" v-permissions="['business:goodsorder:exportExcel']" @click="exportExcel">导出</el-button>
|
<el-button @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<div v-for="item in tableData.list" :key="'id_'+item.id" class="order-detail">
|
<div class="order-title-message" >
|
<div class="base-message" >
|
<div class="date" >订单时间：{{ item.createDate }}</div>
|
<div class="date" >订单编号：<span @click="$refs.operaGoodsOrderDetail.open('订单详情', item, 'first')" style="cursor: pointer;">{{ item.code }}</span></div>
|
<div v-if="item.distributionShopId">经销商：{{ item.shopName || ''}}</div>
|
</div>
|
<div>
|
<span v-if="item.status ==0" class="orange">待支付</span>
|
<span v-if="item.status ==1" class="orange">{{item.receiveType==1?'待自提':'待发货'}}</span>
|
<span v-if="item.status ==2" class="orange">待收货</span>
|
<span v-if="item.status ==3" class="grey">交易完成</span>
|
<span v-if="item.status ==4" class="grey">已取消</span>
|
<span v-if="item.status ==6" class="grey">已退款</span>
|
</div>
|
</div>
|
<div class="detail-message">
|
<div class="goods-message right-border">
|
<div class="goods-base-message" :key="item.id+'_'+goods.id" v-for="goods in item.goodsorderDetailList">
|
<div style="width: 60px; height: 60px;">
|
<el-image
|
style="width: 60px; height: 60px; border-radius: 2px;"
|
:src="goods.imgurl"
|
:preview-src-list="[goods.imgurl]"
|
></el-image>
|
</div>
|
<div class="message" style="">
|
<div class="name">{{ goods.name }}</div>
|
<div class="attr">￥{{ goods.goodsNum }}</div>
|
</div>
|
</div>
|
<div class="mark" v-if="item.sysInfo&& item.sysInfo.length" >备注：{{item.sysInfo}}</div>
|
</div>
|
<div class="member-message right-border">
|
<div class="el-icon-user" style="padding: 5px 5px;width: 100%;">{{ item.linkname }}</div>
|
<div class="el-icon-phone-outline" style="padding: 10px 5px;width: 100%;color: #777;font-size: 13px;">{{ item.linkphone }}</div>
|
</div>
|
<div class="address-message right-border right-border" style="padding-top: 15px;" >
|
<div class="underway el-icon-sell" >{{item.receiveType==1?'到店自提':'快递配送'}} </div>
|
<div class=" el-icon-add-location" v-if="item.receiveType!=1">{{ item.linkaddr }}</div>
|
</div>
|
<div class="price-message right-border">
|
<div class="underway" >订单总价：￥{{ (item.totalPrice||0).toFixed(2) }}</div>
|
<div class="price-info">商品总价：￥{{ ((item.totalPrice||0)-(item.mailPrice || 0)).toFixed(2)}}</div>
|
<div class="price-info">物流运费：￥{{ (item.mailPrice || 0).toFixed(2)}}</div>
|
<div class="price-info">积分抵扣：-￥{{ (item.integral || 0 ).toFixed(2)}}</div>
|
<div class="price-info">优惠金额：-￥{{ (item.couponPrice).toFixed(2) }}</div>
|
<div class="price-info">实付金额：<span class="red" style="font-weight: 600">￥{{ (item.price).toFixed(2) }}</span></div>
|
</div>
|
<div class="action">
|
<el-button v-if="item.status==1 && item.receiveType!=1" style=" width: 80%;" type="primary" @click="$refs.operaShipmentsWindow.open('发货', item)">发货</el-button>
|
<div></div>
|
<el-button v-if="item.status == 0 || item.status==1" style="color: red; " type="text" @click="$refs.OperaOrderCancelWindow.open('取消订单', item)">取消订单</el-button>
|
<div></div>
|
<el-button v-if="item.status == 3" style="color: red " type="text" @click="$refs.OperaOrderRefundWindow.open('订单退款', item)">订单退款</el-button>
|
<div></div>
|
<el-button v-if="item.status==2 && item.receiveType!=1" style="color: #666; " type="text" @click="$refs.operaShipmentsWindow.open('快递信息变更', item)">快递变更</el-button>
|
<div></div>
|
<el-button style="color: #666; " type="text" @click="$refs.operaOrderMarkWindow.open(item.sysInfo && item.sysInfo.length?'编辑备注':'添加备注', item)">
|
{{ item.sysInfo && item.sysInfo.length?'修改备注':'添加备注' }}</el-button>
|
<div></div>
|
<el-button style="color: #216EEE; " type="text" @click="$refs.operaGoodsOrderDetail.open('订单详情', item, 'first')">查看详情</el-button>
|
</div>
|
</div>
|
</div>
|
<div style="width: 100%;text-align: center;padding: 50px;color: #999;font-size: 12px;" v-if="!tableData.pagination ||!tableData.pagination.total">暂无数据</div>
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
>
|
</pagination>
|
</template>
|
<!-- 新建/修改 -->
|
<OperaShipmentsWindow ref="operaShipmentsWindow" @success="search"/>
|
<OperaOrderMarkWindow ref="operaOrderMarkWindow" @success="handlePageChange"/>
|
<OperaOrderRefundWindow ref="OperaOrderRefundWindow" @success="handlePageChange"/>
|
<OperaOrderCancelWindow ref="OperaOrderCancelWindow" @success="handlePageChange"/>
|
<OperaGoodsOrderDetail ref="operaGoodsOrderDetail" @success="handlePageChange"/>
|
</TableLayout>
|
</template>
|
|
<script>
|
import BaseTable from '@/components/base/BaseTable'
|
import TableLayout from '@/layouts/TableLayout'
|
import Pagination from '@/components/common/Pagination'
|
import OperaShipmentsWindow from '@/components/business/OperaShipmentsWindow'
|
import OperaOrderMarkWindow from '@/components/business/OperaOrderMarkWindow'
|
import OperaOrderCancelWindow from '@/components/business/OperaOrderCancelWindow'
|
import OperaGoodsOrderDetail from '@/components/business/OperaGoodsOrderDetail'
|
import OperaOrderRefundWindow from '@/components/business/OperaOrderRefundWindow'
|
export default {
|
name: 'Goodsorder',
|
extends: BaseTable,
|
components: { OperaOrderRefundWindow, TableLayout, Pagination, OperaShipmentsWindow, OperaOrderMarkWindow, OperaGoodsOrderDetail, OperaOrderCancelWindow },
|
data () {
|
return {
|
status: '10',
|
createDate: [],
|
id: '',
|
statusList: [{ name: '10', label: '全部订单', count: 0 },
|
{ name: '0', label: '待支付', count: 0 },
|
{ name: '1', label: '待发货/待自提', count: 0 },
|
{ name: '2', label: '待收货', count: 0 },
|
{ name: '3', label: '交易完成', count: 0 },
|
{ name: '6', label: '已退款', count: 0 },
|
{ name: '4', label: '已取消', count: 0 }],
|
// 搜索
|
searchForm: {
|
id: '',
|
receiveType: '',
|
shopName: '',
|
goodsName: '',
|
code: '',
|
status: '',
|
nickName: '',
|
starttime: null,
|
enttime: null
|
}
|
}
|
},
|
created () {
|
this.config({
|
module: '商品订单信息表',
|
api: '/business/goodsorder',
|
'field.id': 'name',
|
'field.main': 'id'
|
})
|
this.search()
|
},
|
methods: {
|
handlePageChange (pageIndex) {
|
this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
|
this.isWorking.search = true
|
this.api.fetchList({
|
page: this.tableData.pagination.pageIndex,
|
capacity: this.tableData.pagination.pageSize,
|
model: this.searchForm, // 销售模式变更
|
sorts: this.tableData.sorts
|
})
|
.then(data => {
|
this.tableData.list = data.records || []
|
this.tableData.pagination.total = data.total || 0
|
if (this.tableData.pagination.pageIndex === 1) {
|
var totalData = data.countData || {}
|
this.statusList[1].count = totalData.waitPayNum || 0
|
this.statusList[2].count = totalData.waitKdNum || 0
|
this.statusList[3].count = totalData.waitDoneNum || 0
|
}
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
selectDate (v) {
|
this.searchForm.startDate = v[0]
|
this.searchForm.endDate = v[1]
|
this.search()
|
},
|
reset () {
|
this.createDate = []
|
this.searchForm.starttime = ''
|
this.searchForm.enttime = ''
|
this.$refs.searchForm.resetFields()
|
this.search()
|
},
|
handleClick (table, val) {
|
// this.$refs.searchForm.resetFields()
|
if (this.status == 9) {
|
this.searchForm.isdeleted = 1
|
this.searchForm.status = ''
|
} else if (this.status == 10) {
|
this.searchForm.status = ''
|
} else {
|
this.searchForm.isdeleted = 0
|
this.searchForm.status = this.status
|
}
|
this.search()
|
},
|
cancelOrder (item) {
|
this.$dialog.messageWaring(`确定取消订单：${item.code}？`)
|
.then(() => {
|
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tab-badge{
|
color: green;
|
}
|
.order-detail {
|
font-size: 14px;
|
color: #666;
|
margin-bottom: 10px;
|
.order-title-message {
|
display: flex;
|
justify-content: space-between;
|
padding: 10px 20px;
|
font-weight: 500;
|
box-sizing: border-box;
|
background-color: #f2f2f2;
|
.base-message {
|
display: flex;
|
color: #333;
|
.date {
|
width: auto;
|
margin-right: 100px;
|
}
|
span {
|
color: #333;
|
}
|
}
|
.soon-style {
|
color: rgb(235, 80, 50);
|
}
|
}
|
.detail-message {
|
border: #ccc solid 1px;
|
min-height: 120px;
|
display: flex;
|
.right-border {
|
border-right: #ccc solid 1px;
|
box-sizing: border-box;
|
padding: 10px;
|
}
|
.goods-message {
|
flex: 1;
|
.goods-base-message {
|
display: flex;
|
margin-bottom: 10px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #f2f2f2;
|
.message {
|
flex-basis: content-box;
|
display: flex;width: 100%;
|
margin-left: 10px;
|
.name {
|
flex: 3;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
max-height: 40px;
|
}
|
.attr{
|
padding-top: 10px;
|
text-align: right;
|
flex: 1;
|
padding-right: 30px;
|
font-size: 12px;
|
color: #666;
|
}
|
}
|
}
|
.mark {
|
margin-bottom: 5px;
|
font-size: 13px;
|
color: rgb(235, 80, 50);
|
}
|
}
|
.member-message {
|
flex: 0.4;
|
}
|
.address-message {
|
flex: 0.7;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
.underway {
|
display: block;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #f2f2f2;
|
color: #71b247;
|
margin-bottom: 10px;
|
}
|
}
|
.price-message {
|
flex: 0.6;
|
font-weight: 600;
|
.underway {
|
padding-bottom: 10px;
|
border-bottom: 1px solid #f2f2f2;
|
color: rgb(233, 165, 80);
|
margin-bottom: 10px;
|
}
|
.price-info {
|
text-align: left;
|
width: 100%;
|
font-weight: normal;
|
color: #777;
|
font-size: 13px;
|
}
|
}
|
.status-message {
|
flex: 0.4;
|
text-align: center;
|
.underway {
|
padding-bottom: 10px;
|
border-bottom: 1px solid #f2f2f2;
|
color: rgb(233, 165, 80)
|
}
|
|
.complete {
|
color: #ccc;
|
}
|
}
|
.action {
|
flex: 0.4;
|
box-sizing: border-box;
|
padding: 10px;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
