505 lines
14 KiB
Vue
505 lines
14 KiB
Vue
<template>
|
||
<div class="article-manager">
|
||
<el-card :bordered="false" shadow="never" class="ivu-mt mt16 " style="padding:20px !important" :body-style="{ padding: '0 20px 20px' }">
|
||
<el-tabs v-model="type" @tab-click="onClickTab" type="card">
|
||
<!-- <el-tab-pane :label="item.name + '(' + item.count + ')'" :name="item.type" v-for="(item, index) in headeNum" :key="index" /> -->
|
||
<el-tab-pane :label="item.name" :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" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="选择油站：">
|
||
<el-select
|
||
v-model="page.params.takeSiteId"
|
||
clearable
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
placeholder="油站名称"
|
||
:remote-method="siteRemoteMethod"
|
||
@keyup.enter.native="getByPage"
|
||
>
|
||
<el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId" />
|
||
</el-select>
|
||
</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="toOutPut">导出</el-button>
|
||
</div>
|
||
<el-table
|
||
: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.marketPrice }}</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-drawer title="详情" class="table-detail-drawer" :visible.sync="detailDialog" direction="ltr" size="70%">
|
||
<orderListDetail :detailData="detailData" @closeDialog="closeDialog" v-if="detailDialog" />
|
||
</el-drawer>
|
||
<el-dialog title="取消订单" :visible.sync="cancleDialog" v-el-drag-dialog width="45%">
|
||
<orderListCancle @getList="getList" @closeDialog="closeDialog" v-if="cancleDialog" :detailData="detailData" />
|
||
</el-dialog>
|
||
|
||
<!-- 导出弹窗 -->
|
||
<el-dialog v-el-drag-dialog title="导出" :visible.sync="outPutDialog" width="20%">
|
||
<el-form label-width="75px" size="small">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="导出方式">
|
||
<el-select v-model="output.outputType" style="width: 100%">
|
||
<el-option label="easyExcel条件导出" :value="4" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item v-if="output.outputType !== 4">
|
||
<div style="color:red"></div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-if="output.outputType === 3 || output.outputType === 4" :span="12">
|
||
<el-form-item label="开始页">
|
||
<el-input v-model="output.startPage" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-if="output.outputType === 3 || output.outputType === 4" :span="12">
|
||
<el-form-item label="结束页">
|
||
<el-input v-model="output.endPage" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item>
|
||
<el-button type="primary" @click="outputData">导出</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-dialog>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import orderInfoApi from '@/api/order/orderInfo.js'
|
||
import orderListDetail from './orderListDetail'
|
||
import orderListCancle from './orderListCancle'
|
||
export default {
|
||
name: 'product_productList',
|
||
components: { orderListDetail, orderListCancle },
|
||
|
||
filters: {
|
||
orderStatus(e) {
|
||
switch (e) {
|
||
case '0':
|
||
return '已下单'
|
||
case '1':
|
||
return '待核销'
|
||
case '2':
|
||
return '已核销'
|
||
case '-1':
|
||
return '已取消'
|
||
default:
|
||
return '暂无'
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
template: false,
|
||
detailDialog: false,
|
||
cancleDialog: false,
|
||
batchModal: false,
|
||
outPutDialog: false, // 导出弹窗
|
||
grid: {
|
||
xl: 6,
|
||
lg: 8,
|
||
md: 12,
|
||
sm: 24,
|
||
xs: 24
|
||
},
|
||
output: {
|
||
outputType: 4, // 导出方式，1导出选中，2导出本页，3条件导出，4导出全部
|
||
startPage: 1, // 导出开始页
|
||
endPage: 1, // 导出结束页
|
||
pageSize: 10 // 每页条数
|
||
},
|
||
page: {
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
params: {},
|
||
totalCount: 0
|
||
},
|
||
type: '',
|
||
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: [],
|
||
detailData: {}, //详情对象
|
||
siteList: []
|
||
}
|
||
},
|
||
created() {
|
||
// delete this.page.params.orderStatus
|
||
|
||
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)
|
||
},
|
||
toOutPut() {
|
||
// 导出
|
||
this.outPutDialog = true
|
||
},
|
||
// 导出
|
||
formatJson(filterVal, jsonData) {
|
||
// 处理数据
|
||
console.log('filterVal：' + JSON.stringify(filterVal))
|
||
console.log('jsonData：' + JSON.stringify(jsonData))
|
||
return jsonData.map(v =>
|
||
filterVal.map(j => {
|
||
if (j.indexOf('.') < 0) {
|
||
return v[j]
|
||
}
|
||
const keyArr = j.split('.')
|
||
let data = v[keyArr[0]]
|
||
for (var i = 1; i < keyArr.length; i++) {
|
||
if (data) {
|
||
data = data[keyArr[i]]
|
||
}
|
||
}
|
||
return data
|
||
})
|
||
)
|
||
},
|
||
async outputData() {
|
||
// 导出数据
|
||
if (this.output.startPage > this.output.endPage) {
|
||
this.$message.error('开始页不能大于结束页！')
|
||
return
|
||
}
|
||
let tmpData = []
|
||
|
||
const endIndex = (parseInt(this.output.endPage) + 1 - parseInt(this.output.startPage)) * parseInt(this.output.pageSize)
|
||
const searchParam = { ...this.page }
|
||
searchParam.pageSize = endIndex
|
||
searchParam.currentPage = this.output.startPage
|
||
orderInfoApi.exportExcel(searchParam).then(res => {
|
||
const link = document.createElement('a')
|
||
// 创建Blob对象，设置文件类型
|
||
const blob = new Blob([res], { type: 'application/vnd.ns-excel' }) // MIME类型
|
||
link.href = URL.createObjectURL(blob) // 创建URL
|
||
link.setAttribute('download', decodeURI(Date.now() + '.xlsx')) // 设置下载文件名称
|
||
link.click() // 下载文件
|
||
document.body.appendChild(link)
|
||
console.timeEnd()
|
||
this.$message.success('导出成功')
|
||
URL.revokeObjectURL(link.href) // 释放内存
|
||
})
|
||
|
||
import('@/vendor/Export2Excel').then(excel => {
|
||
const data = this.formatJson(this.valColumn, tmpData)
|
||
excel.export_json_to_excel({
|
||
header: this.headers,
|
||
data: data,
|
||
autoWidth: true,
|
||
bookType: 'xlsx'
|
||
})
|
||
})
|
||
},
|
||
|
||
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.params.orderStatus = e.name
|
||
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()
|
||
},
|
||
siteRemoteMethod(value) {
|
||
// 远程搜索油站
|
||
if (value) {
|
||
orderInfoApi.getIntegralSite(value).then(res => {
|
||
this.siteList = res.data
|
||
})
|
||
}
|
||
},
|
||
// 订单列表；
|
||
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()
|
||
},
|
||
closeDialog() {
|
||
this.cancleDialog = false
|
||
this.detailDialog = false
|
||
},
|
||
// 数据导出；
|
||
exportData: function() {},
|
||
|
||
// 详情
|
||
detail(row) {
|
||
orderInfoApi.get(row.id).then(res => {
|
||
if ((res.code = 20000)) {
|
||
this.detailData = res.data
|
||
this.detailDialog = true
|
||
}
|
||
})
|
||
},
|
||
// 取消
|
||
cancle(row, tit, num) {
|
||
// orderInfoApi.get(row.id).then(res => {
|
||
// if ((res.code = 20000)) {
|
||
this.detailData = row
|
||
this.cancleDialog = true
|
||
console.log(row)
|
||
// }
|
||
// })
|
||
}
|
||
}
|
||
}
|
||
</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>
|