<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 label="全部订单" name="10"></el-tab-pane>
|
<!-- <el-tab-pane label="待支付" name="0"></el-tab-pane> -->
|
<el-tab-pane label="待发货" name="1"></el-tab-pane>
|
<el-tab-pane label="待收货" name="2"></el-tab-pane>
|
<el-tab-pane label="交易完成" name="3"></el-tab-pane>
|
<!-- <el-tab-pane label="交易关闭" name="4"></el-tab-pane>
|
<el-tab-pane label="回收站" name="9"></el-tab-pane> -->
|
</el-tabs>
|
<el-form-item label="订单编号" prop="code">
|
<el-input v-model="searchForm.code" placeholder="请输入订单编号" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="用户信息" prop="information">
|
<el-input v-model="searchForm.information" placeholder="请输入昵称/手机号" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="订单时间" prop="createDate">
|
<el-date-picker
|
v-model="createDate"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="selectDate"
|
/>
|
</el-form-item>
|
<!-- <el-form-item label="催发货" prop="isSoon">
|
<el-select
|
v-model="searchForm.isSoon"
|
placeholder="请选择是否催发货"
|
@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="payOrderId">
|
<el-input v-model="searchForm.payOrderId" placeholder="请输入支付单号" @keypress.enter.native="search"></el-input>
|
</el-form-item> -->
|
|
|
<!-- <el-form-item label="更新人编码" prop="editor">
|
<el-input v-model="searchForm.editor" placeholder="请输入更新人编码" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="是否删除0否 1是" prop="isdeleted">
|
<el-input v-model="searchForm.isdeleted" placeholder="请输入是否删除0否 1是" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="searchForm.remark" placeholder="请输入备注" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="订单编号" prop="code">
|
<el-input v-model="searchForm.code" placeholder="请输入订单编号" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="订单实付价格（元/咖豆）" prop="price">
|
<el-input v-model="searchForm.price" placeholder="请输入订单实付价格（元/咖豆）" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="商品总数量" prop="goodsNum">
|
<el-input v-model="searchForm.goodsNum" placeholder="请输入商品总数量" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="下单人编码（关联member表）" prop="memberId">
|
<el-input v-model="searchForm.memberId" placeholder="请输入下单人编码（关联member表）" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="收货地址编码（关联addr表）" prop="addrId">
|
<el-input v-model="searchForm.addrId" placeholder="请输入收货地址编码（关联addr表）" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="收货人姓名" prop="linkname">
|
<el-input v-model="searchForm.linkname" placeholder="请输入收货人姓名" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="收货人电话" prop="linkphone">
|
<el-input v-model="searchForm.linkphone" placeholder="请输入收货人电话" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="收货地址" prop="linkaddr">
|
<el-input v-model="searchForm.linkaddr" placeholder="请输入收货地址" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="状态 0待支付 1待发货 2待收货 3交易完成 4已关闭 5部分发货" prop="status">
|
<el-input v-model="searchForm.status" placeholder="请输入状态 0待支付 1待发货 2待收货 3交易完成 4已关闭 5部分发货" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="是否已评价 0未评价 1已评价" prop="isComment">
|
<el-input v-model="searchForm.isComment" placeholder="请输入是否已评价 0未评价 1已评价" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="支付状态 0未支付 1已支付" prop="payStatus">
|
<el-input v-model="searchForm.payStatus" placeholder="请输入支付状态 0未支付 1已支付" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="支付时间" prop="payDate">
|
<el-date-picker v-model="searchForm.payDate" value-format="yyyy-MM-dd" placeholder="请输入支付时间" @change="search"/>
|
</el-form-item>
|
|
<el-form-item label="支付方式 0微信支付 1线下支付" prop="payMethod">
|
<el-input v-model="searchForm.payMethod" placeholder="请输入支付方式 0微信支付 1线下支付" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="快递单号" prop="kdCode">
|
<el-input v-model="searchForm.kdCode" placeholder="请输入快递单号" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="快递名称" prop="kdName">
|
<el-input v-model="searchForm.kdName" placeholder="请输入快递名称" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="快递编码（关联labels表）" prop="kdId">
|
<el-input v-model="searchForm.kdId" placeholder="请输入快递编码（关联labels表）" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="用户备注" prop="memberInfo">
|
<el-input v-model="searchForm.memberInfo" placeholder="请输入用户备注" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="平台备注" prop="sysInfo">
|
<el-input v-model="searchForm.sysInfo" placeholder="请输入平台备注" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="取消时间" prop="cancelDate">
|
<el-date-picker v-model="searchForm.cancelDate" value-format="yyyy-MM-dd" placeholder="请输入取消时间" @change="search"/>
|
</el-form-item>
|
<el-form-item label="取消人" prop="cancelUser">
|
<el-input v-model="searchForm.cancelUser" placeholder="请输入取消人" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="取消备注" prop="cancelInfo">
|
<el-input v-model="searchForm.cancelInfo" placeholder="请输入取消备注" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="发货时间" prop="kdDate">
|
<el-date-picker v-model="searchForm.kdDate" value-format="yyyy-MM-dd" placeholder="请输入发货时间" @change="search"/>
|
</el-form-item>
|
<el-form-item label="发货备注" prop="kdInfo">
|
<el-input v-model="searchForm.kdInfo" placeholder="请输入发货备注" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="发货人编码（关联system_user表）" prop="kdUser">
|
<el-input v-model="searchForm.kdUser" placeholder="请输入发货人编码（关联system_user表）" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="完成时间" prop="doneDate">
|
<el-date-picker v-model="searchForm.doneDate" value-format="yyyy-MM-dd" placeholder="请输入完成时间" @change="search"/>
|
</el-form-item>
|
<el-form-item label="完成备注" prop="doneInfo">
|
<el-input v-model="searchForm.doneInfo" placeholder="请输入完成备注" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="是否已售后 0否 1是" prop="isAftersale">
|
<el-input v-model="searchForm.isAftersale" placeholder="请输入是否已售后 0否 1是" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="订单类型 0平台商城 1咖豆商城 2咖啡计划编码" prop="type">
|
<el-input v-model="searchForm.type" placeholder="请输入订单类型 0平台商城 1咖豆商城 2咖啡计划编码" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="优惠金额" prop="couponPrice">
|
<el-input v-model="searchForm.couponPrice" placeholder="请输入优惠金额" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="优惠券编码（关联MEMBER_COUPON表）" prop="couponId">
|
<el-input v-model="searchForm.couponId" placeholder="请输入优惠券编码（关联MEMBER_COUPON表）" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="咖啡计划订单形式 0新增 1延长" prop="planOrderType">
|
<el-input v-model="searchForm.planOrderType" placeholder="请输入咖啡计划订单形式 0新增 1延长" @keypress.enter.native="search"></el-input>
|
</el-form-item> -->
|
<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 list" :key="id" class="order-detail">
|
<div class="order-title-message">
|
<div class="base-message">
|
<div class="date">{{ item.createDate }}</div>
|
<div>订单编号：<span>{{ item.code }}</span></div>
|
</div>
|
<div class="soon-style">{{ `用户于${item.soonTime}催发货` }}</div>
|
</div>
|
<div class="detail-message">
|
<div class="goods-message right-border">
|
<div class="goods-base-message">
|
<el-image
|
style="width: 90px; height: 90px; border-radius: 2px;"
|
:src="item.imgurl"
|
:preview-src-list="[item.imgurl]"
|
></el-image>
|
<div class="message">
|
<div>{{ item.goodsName }}</div>
|
<div class="attr">规格：{{ item.attr }}</div>
|
<div class="attr">价格：{{ item.price }}</div>
|
</div>
|
</div>
|
<div v-if="item.memberInfo" class="mark">用户备注：{{ item.memberInfo }}</div>
|
<div v-if="item.sysInfo" class="mark">平台备注：{{ item.sysInfo }}</div>
|
</div>
|
<div class="member-message right-border">
|
<div>{{ item.linkname }}</div>
|
<div>{{ item.linkphone }}</div>
|
</div>
|
<div class="address-message right-border">{{ item.linkaddr }}</div>
|
<div class="price-message right-border">{{ item.price }}咖豆</div>
|
<div class="status-message right-border">
|
<!-- // 0待支付 1待发货 2待收货 3交易完成 4已关闭 5部分发货 -->
|
<div :class="[0,1,2,5].indexOf(item.status) != -1 ? 'underway' : 'complete'">
|
{{
|
item.status==0 ? '待支付'
|
: item.status==1 ? '待发货'
|
: item.status==2 ? '待收货'
|
: item.status==3 ? '交易完成'
|
: item.status==4 ? '已关闭' : '部分发货'
|
}}
|
</div>
|
<el-button style="color: #666; font-size: 16px;" type="text" @click="$refs.operaGoodsOrderDetail.open('订单详情', item, 'first', false)">订单详情</el-button>
|
<div></div>
|
<el-button style="color: #666; font-size: 16px;" type="text" @click="$refs.operaGoodsOrderDetail.open('物流详情', item, 'second', false)">物流详情</el-button>
|
</div>
|
<div class="action">
|
<el-button v-if="item.status==1" style="font-size: 16px; width: 80%;" type="primary" @click="$refs.operaShipmentsWindow.open('发货', item)">发货</el-button>
|
<div></div>
|
<el-button v-if="item.status<2" style="color: #666; font-size: 16px;" type="text" @click="cancelOrder(item)">取消订单</el-button>
|
<div></div>
|
<el-button style="color: #666; font-size: 16px;" type="text" @click="$refs.operaOrderMarkWindow.open(item.sysInfo.length?'编辑备注':'添加备注', item)">备注</el-button>
|
</div>
|
</div>
|
</div>
|
<!-- <el-table
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
stripe
|
>
|
|
<el-table-column
|
v-if="containPermissions(['business:goodsorder:update', 'business:goodsorder:delete'])"
|
label="操作"
|
min-width="120"
|
fixed="right"
|
>
|
<template slot-scope="{row}">
|
<el-button type="text" @click="$refs.operaGoodsorderWindow.open('编辑商品订单信息表', row)" icon="el-icon-edit" v-permissions="['business:goodsorder:update']">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table> -->
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
>
|
</pagination>
|
</template>
|
<!-- 新建/修改 -->
|
<OperaShipmentsWindow ref="operaShipmentsWindow" @success="handlePageChange"/>
|
<OperaOrderMarkWindow ref="operaOrderMarkWindow" @success="handlePageChange"/>
|
<OperaGoodsOrderDetail ref="operaGoodsOrderDetail"/>
|
</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 OperaGoodsOrderDetail from '@/components/business/OperaGoodsOrderDetail'
|
export default {
|
name: 'Goodsorder',
|
extends: BaseTable,
|
components: { TableLayout, Pagination, OperaShipmentsWindow, OperaOrderMarkWindow, OperaGoodsOrderDetail },
|
data () {
|
return {
|
status: '10',
|
createDate: [],
|
id: '',
|
// 搜索
|
searchForm: {
|
id: '',
|
creator: '',
|
createDate: '',
|
editor: '',
|
editDate: '',
|
isdeleted: '',
|
remark: '',
|
code: '',
|
price: '',
|
goodsNum: '',
|
memberId: '',
|
addrId: '',
|
linkname: '',
|
linkphone: '',
|
linkaddr: '',
|
status: '',
|
isComment: '',
|
payStatus: '',
|
payDate: '',
|
payOrderId: '',
|
payMethod: '',
|
kdCode: '',
|
kdName: '',
|
kdId: '',
|
memberInfo: '',
|
sysInfo: '',
|
cancelDate: '',
|
cancelUser: '',
|
cancelInfo: '',
|
kdDate: '',
|
kdInfo: '',
|
kdUser: '',
|
doneDate: '',
|
doneInfo: '',
|
isAftersale: '',
|
type: '1', // 0平台商城 1咖豆商城 2咖啡计划
|
couponPrice: '',
|
couponId: '',
|
planOrderType: ''
|
},
|
list: [
|
{
|
id: '1',
|
code: '256302564258',
|
payOrderId: '256302564258',
|
createDate: '2022-11-01 22:30:43',
|
payDate: '2022-11-01 22:30:59',
|
soonTime: '2022-11-03 22:30:43',
|
completeDate: '2022-11-05 22:30:43',
|
imgurl: '',
|
goodsName: '咖啡杯',
|
attr: '白色；其它规格内容； 10L',
|
memberInfo: '这里是用户备注',
|
sysInfo: '这里是平台备注',
|
linkname: '李怀英',
|
linkphone: '18055151023',
|
linkaddr: '四川省成都市金牛区，金泉街道中海国际社区蓝岸街98号橙郡一期5-2-504',
|
price: '2333',
|
status: 1,
|
kdCode: 'SF01021213',
|
kdDate: '2022-11-03 23:30:43',
|
kdId: 'KD21312',
|
kdInfo: '这是发货备注',
|
kdName: '顺丰快递',
|
kdUser: '00190',
|
|
}
|
]
|
}
|
},
|
created () {
|
this.config({
|
module: '商品订单信息表',
|
api: '/business/goodsorder',
|
'field.id': 'name',
|
'field.main': 'id'
|
})
|
this.search()
|
},
|
methods: {
|
selectDate(v) {
|
this.searchForm.startDate = v[0]
|
this.searchForm.endDate = v[1]
|
this.search()
|
},
|
reset () {
|
this.createDate = []
|
this.searchForm.startDate = ''
|
this.searchForm.endDate = ''
|
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.cancelOrder(`确定取消订单：${item.code}？`)
|
.then(() => {
|
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.order-detail {
|
.order-title-message {
|
display: flex;
|
justify-content: space-between;
|
padding: 8px;
|
font-weight: 500;
|
box-sizing: border-box;
|
background-color: #f2f2f2;
|
.base-message {
|
display: flex;
|
font-size: 14px;
|
color: #999;
|
.date {
|
width: 150px;
|
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;
|
.message {
|
margin-left: 10px;
|
font-size: 16px;
|
.attr {
|
font-size: 13px;
|
}
|
}
|
}
|
.mark {
|
margin-bottom: 5px;
|
color: rgb(235, 80, 50);
|
font-size: 13px;
|
}
|
}
|
.member-message {
|
flex: 0.4;
|
|
font-size: 14px;
|
:last-child {
|
margin-top: 5px;
|
font-size: 13px;
|
}
|
}
|
.address-message {
|
flex: 0.6;
|
}
|
.price-message {
|
flex: 0.5;
|
font-size: 18px;
|
font-weight: 600;
|
text-align: center;
|
}
|
.status-message {
|
flex: 0.4;
|
text-align: center;
|
.underway {
|
color: rgb(233, 165, 80)
|
}
|
.complete {
|
color: #ccc;
|
}
|
}
|
.action {
|
flex: 0.6;
|
box-sizing: border-box;
|
padding: 10px;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
