You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
9.2 KiB
376 lines
9.2 KiB
<template> |
|
<div class="article-manager"> |
|
<el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }"> |
|
<el-tabs v-model="page.params.orderStatus" @tab-click="onClickTab"> |
|
<el-tab-pane :label="item.name + '(' + item.count + ')'" :name="item.type" v-for="(item, index) in headeNum" :key="index" /> |
|
</el-tabs> |
|
<div> |
|
<el-form :model="page" label-width="80px" label-position="right" inline @submit.native.prevent> |
|
<el-form-item label="订单编号："> |
|
<el-input clearable placeholder="订单编号/商品货号" v-model="page.params.orderCode" /> |
|
</el-form-item> |
|
<el-form-item label="收货人："> |
|
<el-input clearable placeholder="手机号码" v-model="page.params.customerPhone" type="phone" /> |
|
</el-form-item> |
|
<el-form-item label="下单时间："> |
|
<el-date-picker v-model="page.params.createTime" type="date" placeholder="选择日期"> </el-date-picker> |
|
</el-form-item> |
|
|
|
<el-form-item> |
|
<el-button type="primary" @click="userSearchs">查询</el-button> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="Button"> |
|
<el-button class="export" @click="exports">导出</el-button> |
|
</div> |
|
<el-table |
|
:key="id" |
|
:data="tableList" |
|
class="ivu-mt mt14" |
|
v-loading="loading" |
|
highlight-current-row |
|
:row-key="getRowKey" |
|
@selection-change="handleSelectRow" |
|
empty-text="暂无数据" |
|
> |
|
<el-table-column type="selection" width="60" :reserve-selection="true"> </el-table-column> |
|
<el-table-column label="订单编号" width="180" align="center"> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.orderCode }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="下单时间" min-width="120" align="center"> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.createTime }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="用户账号" min-width="120" align="center"> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.customerPhone }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="订单金额" min-width="60" align="center"> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.integral }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="支付积分" min-width="80" align="center"> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.integral }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="自提油站" min-width="120" align="center"> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.takeSiteName }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="订单状态" min-width="100" align="center"> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.orderStatus | orderStatus }}</span> |
|
</template> |
|
</el-table-column> |
|
|
|
<el-table-column label="操作" fixed="right" minWidth="100" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="detail(scope.row)">查看订单</el-button> |
|
<el-button @click="cancle(scope.row, scope)" type="text" v-if="scope.row.orderStatus == '1'">取消订单</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="acea-row row-right page"> |
|
<el-pagination |
|
@size-change="handleSizeChange" |
|
@current-change="handleCurrentChange" |
|
:current-page="page.currentPage" |
|
:page-sizes="[10, 15, 20, 30]" |
|
:page-size="page.pageSize" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="page.totalCount" |
|
/> |
|
</div> |
|
</el-card> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import orderInfoApi from '@/api/order/orderInfo.js' |
|
export default { |
|
name: 'product_productList', |
|
// components: { expandRow, attribute, taoBao, goodsDetail, userLabel, couponList }, |
|
|
|
filters: { |
|
orderStatus(e) { |
|
switch (e) { |
|
case '0': |
|
return '已下单' |
|
case '1': |
|
return '待核销' |
|
case '2': |
|
return '已核销' |
|
case '-1': |
|
return '已取消' |
|
default: |
|
return '暂无' |
|
} |
|
} |
|
}, |
|
data() { |
|
return { |
|
template: false, |
|
modals: false, |
|
batchModal: false, |
|
grid: { |
|
xl: 6, |
|
lg: 8, |
|
md: 12, |
|
sm: 24, |
|
xs: 24 |
|
}, |
|
page: { |
|
currentPage: 1, |
|
pageSize: 10, |
|
params: {}, |
|
totalCount: 0 |
|
}, |
|
tableList: [], |
|
headeNum: [ |
|
{ |
|
count: 2, |
|
name: '全部订单', |
|
type: null |
|
}, |
|
{ |
|
count: 40, |
|
name: '已下单', |
|
type: '1' |
|
}, |
|
{ |
|
count: 5, |
|
name: '已核销', |
|
type: '2' |
|
}, |
|
|
|
{ |
|
count: 1, |
|
name: '已取消', |
|
type: '-1' |
|
} |
|
], |
|
loading: false, |
|
data: [], |
|
total: 0, |
|
ids: [], |
|
goodsId: '', |
|
isProductBox: false, |
|
multipleSelection: [], |
|
detail: {} //详情对象 |
|
} |
|
}, |
|
created() { |
|
this.getList() |
|
}, |
|
activated() {}, |
|
methods: { |
|
closeLabel(label) { |
|
let index = this.dataLabel.indexOf(this.dataLabel.filter(d => d.id == label.id)[0]) |
|
this.dataLabel.splice(index, 1) |
|
}, |
|
|
|
getPath() {}, |
|
// 导出 |
|
async exports() { |
|
let [th, filekey, data, fileName] = [[], [], [], ''] |
|
let excelData = JSON.parse(JSON.stringify(this.artFrom)) |
|
excelData.page = 1 |
|
excelData.limit = 50 |
|
excelData.ids = this.ids |
|
for (let i = 0; i < excelData.page + 1; i++) { |
|
let lebData = await this.getExcelData(excelData) |
|
if (!fileName) fileName = lebData.filename |
|
if (!filekey.length) { |
|
filekey = lebData.fileKey |
|
} |
|
if (!th.length) th = lebData.header |
|
if (lebData.export.length) { |
|
data = data.concat(lebData.export) |
|
excelData.page++ |
|
} else { |
|
this.$exportExcel(th, filekey, fileName, data) |
|
return |
|
} |
|
} |
|
}, |
|
getExcelData(excelData) {}, |
|
|
|
getRowKey(row) { |
|
return row.id |
|
}, |
|
// 选中某一行 |
|
handleSelectRow(selection) { |
|
const uniqueArr = [] |
|
const ids = [] |
|
for (let i = 0; i < selection.length; i++) { |
|
const item = selection[i] |
|
if (!ids.includes(item.id)) { |
|
uniqueArr.push(item) |
|
ids.push(item.id) |
|
} |
|
} |
|
this.ids = ids |
|
this.multipleSelection = uniqueArr |
|
}, |
|
|
|
// tab选择 |
|
onClickTab(e) { |
|
console.log(e) |
|
this.page.currentPag = 1 |
|
this.multipleSelection = [] |
|
// this.$refs.table.clearSelection() |
|
this.getList() |
|
}, |
|
|
|
handleSizeChange(val) { |
|
this.page.pageSize = val |
|
this.getList() |
|
}, |
|
handleCurrentChange(val) { |
|
this.page.currentPage = val |
|
this.getList() |
|
}, |
|
|
|
// 订单列表； |
|
getList() { |
|
orderInfoApi.getByPage(this.page).then(res => { |
|
if ((res.code = 20000)) ({ list: this.tableList = [], totalCount: this.page.totalCount = 0 } = res.data) |
|
}) |
|
}, |
|
// 表格搜索 |
|
userSearchs() { |
|
this.page.currentPage = 1 |
|
this.getList() |
|
}, |
|
|
|
// 数据导出； |
|
exportData: function() {}, |
|
|
|
// 编辑 |
|
detail(row) { |
|
// this.$router.push({ path: this.$routeProStr + '/product/add_product/' + row.id }); |
|
}, |
|
// 取消 |
|
cancle(row, tit, num) {} |
|
} |
|
} |
|
</script> |
|
<style scoped lang="scss"> |
|
::v-deep .el-tabs__item { |
|
height: 54px !important; |
|
line-height: 54px !important; |
|
} |
|
::v-deep .ivu-modal-mask { |
|
z-index: 999 !important; |
|
} |
|
|
|
::v-deep .ivu-modal-wrap { |
|
z-index: 999 !important; |
|
} |
|
|
|
.Box { |
|
::v-deep .ivu-modal-body { |
|
height: 700px; |
|
overflow: auto; |
|
} |
|
} |
|
|
|
.batch-box { |
|
::v-deep .ivu-modal-body { |
|
overflow: auto; |
|
min-height: 350px; |
|
} |
|
} |
|
|
|
.tabBox_img { |
|
width: 36px; |
|
height: 36px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
|
|
.bg { |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(0, 0, 0, 0.5); |
|
z-index: 11; |
|
} |
|
|
|
::v-deep .happy-scroll-content { |
|
width: 100%; |
|
|
|
.demo-spin-icon-load { |
|
animation: ani-demo-spin 1s linear infinite; |
|
} |
|
|
|
@keyframes ani-demo-spin { |
|
from { |
|
transform: rotate(0deg); |
|
} |
|
|
|
50% { |
|
transform: rotate(180deg); |
|
} |
|
|
|
to { |
|
transform: rotate(360deg); |
|
} |
|
} |
|
|
|
.demo-spin-col { |
|
height: 100px; |
|
position: relative; |
|
border: 1px solid #eee; |
|
} |
|
} |
|
|
|
.labelInput { |
|
border: 1px solid #dcdee2; |
|
width: 100%; |
|
padding: 0 15px; |
|
border-radius: 5px; |
|
min-height: 30px; |
|
cursor: pointer; |
|
font-size: 12px; |
|
|
|
.span { |
|
color: #c5c8ce; |
|
} |
|
|
|
.iconxiayi { |
|
font-size: 12px; |
|
} |
|
} |
|
.el-dropdown-link { |
|
cursor: pointer; |
|
color: var(--prev-color-primary); |
|
font-size: 12px; |
|
} |
|
.el-icon-arrow-down { |
|
font-size: 12px; |
|
} |
|
.el-dropdown-menu__item { |
|
a { |
|
color: #606266; |
|
} |
|
} |
|
.label_width { |
|
width: 400px; |
|
} |
|
</style>
|
|
|