292 lines
8.2 KiB
Vue
292 lines
8.2 KiB
Vue
<template>
|
|
<div class="currentorder">
|
|
<person-title>当前位置 :: 接单大厅 >> <em>订单列表</em></person-title>
|
|
<div class="currentorder-cont">
|
|
<div class="findOrder-search">
|
|
<el-form :inline="true" :model="findOrderForm" class="user-findOrder">
|
|
<el-form-item label="查询条件">
|
|
<el-select v-model="findOrderForm.condition" placeholder="选择查询条件">
|
|
<el-option label=" " value="1"></el-option>
|
|
<el-option label="姓名" value="name"></el-option>
|
|
<el-option label="电话" value="phone"></el-option>
|
|
<el-option label="快递公司" value="company"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="请输入">
|
|
<el-input v-model="findOrderForm.answers" placeholder="查询条件"></el-input>
|
|
</el-form-item>
|
|
<el-button type="primary" v-on:click="queryData()">查询</el-button>
|
|
</el-form>
|
|
</div>
|
|
<el-table
|
|
:data="OrderData"
|
|
class="userOrderList"
|
|
:default-sort="{prop: 'createTime', order: 'descending'}"
|
|
style="width: 100%">
|
|
<div class="emptyTip" slot="empty">
|
|
已经没有订单了.休息一下吧
|
|
</div>
|
|
<el-table-column type="expand">
|
|
<template slot-scope="props">
|
|
<el-form label-position="left"
|
|
inline class="userTable demo-table-expand">
|
|
<el-form-item label="订单号 :">
|
|
<span>{{ props.row.id }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="收货人姓名 :">
|
|
<span>{{props.row.name}}</span>
|
|
</el-form-item>
|
|
<el-form-item label="电话 :">
|
|
<span>{{props.row.phone}}</span>
|
|
</el-form-item>
|
|
<el-form-item label="快递大小 :">
|
|
<span>{{ props.row.typeDesc }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="快递公司 :">
|
|
<span>{{ props.row.company}}</span>
|
|
</el-form-item>
|
|
<el-form-item label="取货码 :">
|
|
<span>{{props.row.number}}</span>
|
|
</el-form-item>
|
|
<el-form-item label="公寓 :">
|
|
<span>{{props.row.flats}}</span>
|
|
</el-form-item>
|
|
<el-form-item label="寝室号 :">
|
|
<span>{{props.row.hostel}}</span>
|
|
</el-form-item>
|
|
<el-form-item label="发布时间 :">
|
|
<span>{{ props.row.createTime }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="备注 :">
|
|
<span>{{ props.row.decs }}</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-for="item in titleList"
|
|
:key='item.id'
|
|
:sortable='item.sortable'
|
|
:label="item.columnTitle"
|
|
:prop="item.prop">
|
|
</el-table-column>
|
|
<el-table-column>
|
|
<template slot="header" slot-scope="scope">操作
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<template v-if="scope.row.status==1">
|
|
<el-button
|
|
size="mini"
|
|
class="btn-cancel"
|
|
type='success'
|
|
key='Cancel'
|
|
v-on:click="getOrder(scope.row.id)"
|
|
>接受此单
|
|
</el-button>
|
|
<!-- handleSuccess(scope.$index, scope.row) -->
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pageination-oder">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="4"
|
|
:page-sizes="[10, 50, 80, 100]"
|
|
:page-size="10"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalOrder">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getCourierLst, getTack} from '../../../api/order'
|
|
import {formData} from '../../../unit/formDate'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
findOrderForm: {
|
|
condition: '',
|
|
answers: ''
|
|
},
|
|
OrderData: null,
|
|
selectData: {
|
|
page: 1,
|
|
size: 10,
|
|
flats: '',
|
|
name: '',
|
|
phone: '',
|
|
company: '',
|
|
starttime: '',
|
|
endtime: '',
|
|
type: '',
|
|
status: '',
|
|
},
|
|
totalOrder: 0,
|
|
showPagination: true,
|
|
listType: {
|
|
noCompBtn: true
|
|
},
|
|
titleList: [
|
|
{id: 1, columnTitle: '订单号', prop: 'id'},
|
|
{id: 2, columnTitle: '姓名', prop: 'name'},
|
|
{id: 2, columnTitle: '公寓号', prop: 'flats'},
|
|
]
|
|
}
|
|
},
|
|
created () {
|
|
this.getUserOrder()
|
|
},
|
|
methods: {
|
|
queryData(){
|
|
var data = this.findOrderForm
|
|
this.selectData.company=''
|
|
this.selectData.phone=''
|
|
this.selectData.name=''
|
|
this.selectData.name=''
|
|
if (data.condition == 'flats'){
|
|
}else if (data.condition == 'name'){
|
|
this.selectData.name=data.answers
|
|
}else if (data.condition == 'name'){
|
|
this.selectData.name=data.answers
|
|
}else if (data.condition == 'phone'){
|
|
this.selectData.phone=data.answers
|
|
}else if (data.condition == 'company'){
|
|
this.selectData.company=data.answers
|
|
}
|
|
this.getUserOrder()
|
|
},
|
|
getUserOrder () {
|
|
let loading = this.$loading({lock: true, text: '玩命加载中...'})
|
|
getCourierLst(this.selectData).then((res) => {
|
|
setTimeout(loading.close(),1000)
|
|
var data = res.data
|
|
if (data.success) {
|
|
this.OrderData = []
|
|
var list = data.data.list
|
|
for (let i = 0; i < list.length; i++) {
|
|
var dataitem = list[i]
|
|
dataitem.lastTime = formData(list[i].lastTime, 'yyyy-MM-dd hh:mm:ss')
|
|
dataitem.createTime = formData(list[i].createTime, 'yyyy-MM-dd hh:mm:ss')
|
|
this.OrderData.push(dataitem)
|
|
}
|
|
this.totalOrder = data.data.count
|
|
}else {
|
|
this.$message({
|
|
type: 'info',
|
|
message: data.msg
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getOrder (id) {
|
|
let data = {
|
|
id: id
|
|
}
|
|
getTack(data).then((res) => {
|
|
if (res.data.success) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: res.data.msg
|
|
})
|
|
this.getUserOrder()
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: res.data.msg
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleSizeChange (val) {
|
|
this.selectData.size = val
|
|
this.getUserOrder()
|
|
},
|
|
handleCurrentChange (val) {
|
|
this.selectData.page = val
|
|
this.getUserOrder()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
.userOrderList {
|
|
.el-message {
|
|
top: 5rem;
|
|
}
|
|
|
|
.el-button {
|
|
width: 4.2rem;
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
padding: 0;
|
|
|
|
span {
|
|
font-size: 0.6rem;
|
|
}
|
|
}
|
|
|
|
//交易操作
|
|
.btn-cancel {
|
|
margin-right: 0.2rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.btn-success {
|
|
/*background-color: #409eff;*/
|
|
/*color: #fff;*/
|
|
|
|
&:hover {
|
|
/*background-color: lighten(#409eff, 5%);*/
|
|
}
|
|
}
|
|
|
|
// 当前订单没有数据时候
|
|
.emptyTip a {
|
|
color: rgb(226, 137, 137);
|
|
|
|
&:hover {
|
|
color: rgb(214, 29, 29);
|
|
}
|
|
}
|
|
|
|
.el-button + .el-button {
|
|
margin-left: 0;
|
|
}
|
|
|
|
// 展开详情后文本 的span
|
|
.horder .el-form-item__content span,
|
|
.currentorder .el-form-item__content span {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.demo-table-expand {
|
|
font-size: 0;
|
|
}
|
|
|
|
.demo-table-expand label {
|
|
width: 6.2rem;
|
|
color: #99a9bf;
|
|
}
|
|
|
|
.demo-table-expand .el-form-item {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.el-button {
|
|
margin: 0 auto;
|
|
}
|
|
.findOrder-search{
|
|
padding-top: 1rem;
|
|
}
|
|
</style>
|