1985 lines
65 KiB
1985 lines
65 KiB
<template> |
|
<div> |
|
<newListLayout |
|
:isShow="{ |
|
seachZoom: true, |
|
listDetails: true, |
|
}" |
|
v-model="tableHeight" |
|
> |
|
<!-- 搜索框 start --> |
|
<div slot="seach"> |
|
<el-form |
|
:style="{ maxHeight: showSearch ? '' : '52px' }" |
|
label-width="90px" |
|
:inline="true" |
|
:model="page" |
|
class="search-form" |
|
:size="$store.getters.size" |
|
> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.companyId" |
|
placeholder="请输入公司名称/ID检索" |
|
clearable |
|
filterable |
|
remote |
|
reserve-keyword |
|
:remote-method="searchCompanyInfo" |
|
> |
|
<el-option |
|
v-for="item in companyList" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id" |
|
> |
|
{{ item.name }} |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.customerId" |
|
filterable |
|
remote |
|
reserve-keyword |
|
clearable |
|
placeholder="请输入司机编号/姓名/手机号码" |
|
:remote-method="searchUserInfo" |
|
> |
|
<el-option |
|
v-for="item in sysCustomerList" |
|
:key="item.id" |
|
:label="item.userName" |
|
:value="item.id" |
|
> |
|
{{ item.phone }} ( {{ item.userName }} - {{ item.userCode }}) |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-input |
|
v-model="page.params.siteName" |
|
placeholder="请输入油站名称" |
|
clearable |
|
/> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.channelCode" |
|
placeholder="油站渠道" |
|
clearable |
|
> |
|
<el-option value="XOIL" label="星油" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.oilProductType" |
|
placeholder="油品类型" |
|
clearable |
|
> |
|
<el-option value="DIESEL" label="柴油" /> |
|
<el-option value="GAS" label="天然气" /> |
|
<el-option value="PETROL" label="汽油" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.secondChannelCode" |
|
filterable |
|
clearable |
|
placeholder="二级所属渠道" |
|
> |
|
<el-option value="QP" label="壳牌" /> |
|
<el-option value="SQ" label="上汽" /> |
|
<el-option value="GDQP" label="广东壳牌" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.orderStatus" |
|
placeholder="订单状态" |
|
clearable |
|
> |
|
<el-option label="支付失败" :value="-1" /> |
|
<el-option label="支付中" :value="0" /> |
|
<el-option label="支付成功" :value="1" /> |
|
<el-option label="已取消" :value="2" /> |
|
<el-option label="已退款" :value="3" /> |
|
<el-option label="退款中" :value="4" /> |
|
<el-option label="退款失败" :value="5" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-radio-group v-model="payAccountType_t"> |
|
<el-radio-button :label="2"> |
|
<svg |
|
t="1629252270571" |
|
style="transform: scale(1.8); margin-right: 2px" |
|
class="icon" |
|
viewBox="0 0 1024 1024" |
|
version="1.1" |
|
xmlns="http://www.w3.org/2000/svg" |
|
p-id="1219" |
|
width="10" |
|
height="10" |
|
> |
|
<path |
|
d="M416 192v224H192V192h224m32-64H160c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32V160c0-17.67-14.33-32-32-32zM832 192v224H608V192h224m32-64H576c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32V160c0-17.67-14.33-32-32-32zM416 608v224H192V608h224m32-64H160c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32V576c0-17.67-14.33-32-32-32zM832 608v224H608V608h224m32-64H576c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32V576c0-17.67-14.33-32-32-32z" |
|
p-id="1220" |
|
:fill="payAccountType_t != 2 ? '#87888B' : '#fff'" |
|
/> |
|
</svg> |
|
<span>全部账户</span> |
|
</el-radio-button> |
|
<el-radio-button :label="0"> |
|
<svg-icon icon-class="iconsiji1" /> 个人账户 |
|
</el-radio-button> |
|
<el-radio-button :label="1"> |
|
<svg-icon icon-class="icongongsi-" /> 企业账户 |
|
</el-radio-button> |
|
</el-radio-group> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-input |
|
v-model="page.params.orderSerialNumber" |
|
placeholder="输入订单号/ID准确搜索" |
|
clearable |
|
@keyup.enter.native="getByPage" |
|
/> |
|
</el-form-item> |
|
<el-form-item> |
|
<gl-date-time-picker |
|
v-model="page.params.createTime" |
|
msg="创建时间" |
|
@keyup.enter.native="getByPage" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.siteBrand" |
|
placeholder="油站所属品牌" |
|
clearable |
|
@keyup.enter.native="getByPage" |
|
> |
|
<el-option label="中国石油" :value="1" /> |
|
<el-option label="中国石化" :value="2" /> |
|
<el-option label="壳牌" :value="3" /> |
|
<el-option label="民营" :value="4" /> |
|
<el-option label="中海油" :value="5" /> |
|
<el-option label="京博" :value="6" /> |
|
<el-option label="中化石油" :value="7" /> |
|
<el-option label="其他" :value="8" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-input |
|
v-model="page.params.plateNumber" |
|
placeholder="请输入车牌号" |
|
clearable |
|
/> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<!-- 搜索框 end --> |
|
<!-- 左边按钮区 start --> |
|
<div slot="seachbutten_left"> |
|
<el-row style="margin-top: 5px"> |
|
<el-col :span="12" class="tal"> |
|
<el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
type="primary" |
|
@click="toSupplement" |
|
> |
|
<svg-icon icon-class="iconxinzeng" /> 星油补单 |
|
</el-button> |
|
|
|
<el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
type="primary" |
|
@click="toSupplementZeYi" |
|
> |
|
<svg-icon icon-class="iconxinzeng" /> 三方补单 |
|
</el-button> |
|
<el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
type="primary" |
|
@click="toOutPut" |
|
> |
|
<svg-icon icon-class="icondaochu" /> 导出 |
|
</el-button> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
<!-- 左边按钮区 end --> |
|
<!-- 右边按钮区 start --> |
|
<div slot="seachbutten_right"> |
|
<el-row> |
|
<el-button |
|
type="primary" |
|
:size="$store.getters.size" |
|
icon="el-icon-search" |
|
@click="search" |
|
>查询</el-button |
|
> |
|
<el-button |
|
:size="$store.getters.size" |
|
icon="el-icon-refresh" |
|
type="info" |
|
@click="resetting" |
|
>重置</el-button |
|
> |
|
</el-row> |
|
</div> |
|
<!-- 右边按钮区 end --> |
|
<!-- 列表详情 start --> |
|
<div slot="listDetails"> |
|
<el-row> |
|
<el-col :span="24" :offset="0"> |
|
<el-collapse-transition> |
|
<div ref="showmore" class="statistic-container"> |
|
<div class="statictic-item"> |
|
<div class="left-count"> |
|
<div class="text">订单总数</div> |
|
<div class="count"> |
|
{{ totalData.totalCount | numSplit }} |
|
</div> |
|
</div> |
|
<div class="right-container"> |
|
<div |
|
v-for="(ele, index) in totalChannelData" |
|
:key="index" |
|
class="right-item" |
|
> |
|
<div class="pie-table"> |
|
<ripple-chart |
|
:chart-id="ele.type" |
|
:title="sites[ele.type]" |
|
:chart-color="pieColors[index]" |
|
:percent="ele.percent" |
|
/> |
|
</div> |
|
<div class="statis-info"> |
|
<div class="info-item">{{ sites[ele.type] }}</div> |
|
<div class="info-item"> |
|
订单总数：{{ ele.totalCount }}单 |
|
</div> |
|
<div class="info-item"> |
|
订单总金额：{{ ele.totalMoney }}￥ |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="statictic-item"> |
|
<div class="left-count"> |
|
<div class="text">订单总金额</div> |
|
<div class="count"> |
|
{{ totalData.totalMoney | numSplit }} |
|
</div> |
|
</div> |
|
<div class="right-container"> |
|
<div |
|
v-for="(item, index) in totalTypeData" |
|
:key="index" |
|
class="right-item" |
|
> |
|
<div class="pie-table"> |
|
<ripple-chart |
|
:chart-id="item.type" |
|
:title="item.type === '1' ? '企业' : '个人'" |
|
:chart-color="pieColors[index]" |
|
:percent="item.percent" |
|
/> |
|
</div> |
|
<div class="statis-info"> |
|
<div class="info-item"> |
|
{{ item.type === "1" ? "企业" : "个人" }} |
|
</div> |
|
<div class="info-item"> |
|
订单总数：{{ item.totalCount }}单 |
|
</div> |
|
<div class="info-item"> |
|
订单总金额：{{ item.totalMoney }}￥ |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-collapse-transition> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
<!-- 列表详情 end --> |
|
<!-- 表格 start --> |
|
<div slot="list"> |
|
<el-table |
|
stripe |
|
v-loading="tableLoading" |
|
:data="dataPage.list" |
|
fit |
|
:max-height="tableHeight" |
|
style="width: 100%" |
|
:size="$store.getters.size" |
|
@sort-change="sortHandler" |
|
@selection-change="handleSelectionChange" |
|
> |
|
<el-table-column type="selection" width="55" /> |
|
<el-table-column label="序号" type="index" :index="indexMethod" /> |
|
<template v-for="(item, index) in tableColumns"> |
|
<el-table-column |
|
v-if="item.show" |
|
:key="index" |
|
:fixed="item.fixed" |
|
:align="item.align" |
|
:header-align="item.headerAlign" |
|
:show-overflow-tooltip="true" |
|
:min-width="item.minWidth" |
|
:width="item.width" |
|
:prop="item.prop" |
|
:sortable="item.sortable" |
|
:label="item.label" |
|
:formatter="item.render" |
|
/> |
|
</template> |
|
|
|
<el-table-column fixed="right" label="操作" width="150px"> |
|
<template slot-scope="scope"> |
|
<el-button |
|
:size="$store.getters.size" |
|
type="text" |
|
@click="handleDetail(scope.row.id)" |
|
> |
|
<svg-icon icon-class="iconxiangqing1" /> 详情 |
|
</el-button> |
|
<el-dropdown> |
|
<el-button type="text"> |
|
更多<i class="el-icon-arrow-down el-icon--right" /> |
|
</el-button> |
|
<el-dropdown-menu |
|
v-if="scope.row.payChannel === 'SXF_WECHAT_MINIAPPS_PAYMENT'" |
|
slot="dropdown" |
|
> |
|
<el-dropdown-item @click.native="wechartRefund(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType === 'REAL_ORDER' && |
|
[1, 5].indexOf(scope.row.orderStatus) !== -1 |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconback" /> |
|
微信原路退回 |
|
</el-button> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
|
|
<el-dropdown-menu v-else slot="dropdown"> |
|
<el-dropdown-item @click.native="toCancelSf(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 2 && |
|
scope.row.createSource == 'SHUNFENG' && |
|
(scope.row.payChannel == 'BALANCE_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_APP_PAYMENT') |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
顺丰取消 |
|
</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item @click.native="toRefund(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 1 && |
|
scope.row.createSource != 'ZEYI' && |
|
scope.row.createSource != 'FUYOU' && |
|
scope.row.createSource != 'TY' && |
|
scope.row.createSource != 'SHUNFENG' && |
|
scope.row.createSource != 'WJY' && |
|
scope.row.createSource != 'QIAOPAI' && |
|
scope.row.createSource != 'RIRISHUN' && |
|
(scope.row.payChannel == 'BALANCE_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_APP_PAYMENT') |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
星油退款 |
|
</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item @click.native="toRefundFY(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 1 && |
|
scope.row.createSource == 'FUYOU' && |
|
(scope.row.payChannel == 'BALANCE_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_APP_PAYMENT') |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
福佑退款 |
|
</el-button> |
|
</el-dropdown-item> |
|
<!-- //顺丰退款 --> |
|
<el-dropdown-item @click.native="toRefundSf(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 1 && |
|
scope.row.createSource == 'SHUNFENG' && |
|
(scope.row.payChannel == 'BALANCE_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_APP_PAYMENT') |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
顺丰退款 |
|
</el-button> |
|
</el-dropdown-item> |
|
<!-- 退款 + 通联 --> |
|
<el-dropdown-item @click.native="toTongLianRefund(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 1 && |
|
scope.row.createSource != 'ZEYI' && |
|
scope.row.createSource != 'TY' && |
|
scope.row.createSource != 'WJY' && |
|
scope.row.payChannel == 'SYB_WECHAT_MINIAPPS_PAYMENT' |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
通联退款 |
|
</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item @click.native="RefundToBalance(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 1 && |
|
scope.row.createSource != 'ZEYI' && |
|
scope.row.createSource != 'TY' && |
|
scope.row.createSource != 'WJY' && |
|
scope.row.payChannel == 'SYB_WECHAT_MINIAPPS_PAYMENT' |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
退款到余额 |
|
</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item @click.native="RefundToBalance(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 1 && |
|
scope.row.createSource != 'ZEYI' && |
|
scope.row.createSource != 'TY' && |
|
scope.row.createSource != 'WJY' && |
|
(scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' || |
|
scope.row.payChannel == 'WECHAT_APP_PAYMENT') |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
微信退款到余额 |
|
</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item @click.native="toCancelOrder(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 1 && |
|
scope.row.createSource === 'ZEYI' && |
|
scope.row.payChannel == 'BALANCE_PAYMENT' && |
|
scope.row.suppleMark == 0 |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
则一退款 |
|
</el-button> |
|
</el-dropdown-item> |
|
<!-- end --> |
|
|
|
<el-dropdown-item @click.native="toTYRefund(scope.row)"> |
|
<el-button |
|
v-if=" |
|
scope.row.orderType == 'REAL_ORDER' && |
|
scope.row.orderStatus == 1 && |
|
scope.row.createSource === 'TY' && |
|
scope.row.payChannel == 'BALANCE_PAYMENT' && |
|
scope.row.suppleMark == 0 |
|
" |
|
:size="$store.getters.size" |
|
type="text" |
|
> |
|
<svg-icon icon-class="iconlajitong" /> |
|
团油退款 |
|
</el-button> |
|
</el-dropdown-item> |
|
|
|
<el-dropdown-item @click.native="toDelete(scope.row.id)"> |
|
<!-- <el-button |
|
:size="$store.getters.size" |
|
type="text" |
|
><svg-icon icon-class="iconlajitong" /> 删除</el-button> --> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<!-- 列表详情 end --> |
|
<!-- 分页底部 start --> |
|
<div slot="footerPage"> |
|
<el-pagination |
|
:current-page="page.currentPage" |
|
:page-sizes="[10, 15, 20, 30]" |
|
:page-size="page.pageSize" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="page.totalCount" |
|
@size-change="handleSizeChange" |
|
@current-change="handleCurrentChange" |
|
/> |
|
</div> |
|
<!-- 分页底部 end --> |
|
</newListLayout> |
|
<div> |
|
<el-drawer direction="ltr" :visible.sync="supplementDialog" size="60%"> |
|
<div slot="title" class="supplement-header"> |
|
<div class="icon"> |
|
<img |
|
src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/other/2021-4/a1eddda6dfde405a9a40da30af96eda5.png" |
|
alt="" |
|
/> |
|
</div> |
|
<div>补单</div> |
|
</div> |
|
<OrderInfoSupplement |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-drawer> |
|
<!-- 则一补单弹窗 --> |
|
<el-drawer |
|
direction="ltr" |
|
:visible.sync="supplementZeYiDialog" |
|
size="60%" |
|
> |
|
<div slot="title" class="supplement-header"> |
|
<div class="icon"> |
|
<img |
|
src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/other/2021-4/a1eddda6dfde405a9a40da30af96eda5.png" |
|
alt="" |
|
/> |
|
</div> |
|
<div>三方补单</div> |
|
</div> |
|
<OrderInfoZeYiSupplement |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-drawer> |
|
|
|
<!-- 添加弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="添加" |
|
:visible.sync="addDialog" |
|
width="55%" |
|
> |
|
<OrderInfoAdd @getByPage="getByPage" @closeDialog="closeDialog" /> |
|
</el-dialog> |
|
|
|
<!-- 订单匹配弹窗 --> |
|
<el-drawer |
|
direction="ltr" |
|
title="订单匹配" |
|
:visible.sync="orderTfDialog" |
|
size="60%" |
|
> |
|
<OrderTfAdd @getByPage="getByPage" @closeDialog="closeDialog" /> |
|
</el-drawer> |
|
|
|
<el-drawer |
|
title="导出" |
|
:visible.sync="outPutDialog" |
|
width="20%" |
|
size="40%" |
|
direction="ltr" |
|
> |
|
<el-form label-width="75px" size="small"> |
|
<el-row class="box_daochu"> |
|
<el-col :span="24"> |
|
<el-form-item label="导出方式"> |
|
<el-select v-model="output.outputType" style="width: 100%"> |
|
<el-option label="导出选中" :value="1" /> |
|
<el-option label="导出本页" :value="2" /> |
|
<el-option label="条件导出" :value="3" /> |
|
<el-option label="eseyExcel条件导出" :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"> |
|
<span v-if="output.outputType === 1" |
|
>当前选中数据 {{ multipleSelection.length }} 条</span |
|
> |
|
<span v-if="output.outputType === 2" |
|
>本页数据 {{ dataPage.list.length }} 条</span |
|
> |
|
<span v-if="output.outputType === 3" |
|
>条件导出将直接使用页面搜索条件进行数据过滤</span |
|
> |
|
</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-drawer> |
|
|
|
<!-- 导入弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="导入" |
|
:visible.sync="importDialog" |
|
width="55%" |
|
> |
|
<OrderInfoImport @getByPage="getByPage" @closeDialog="closeDialog" /> |
|
</el-dialog> |
|
|
|
<!-- 修改弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="修改" |
|
:visible.sync="updateDialog" |
|
width="55%" |
|
> |
|
<OrderInfoUpdate |
|
:order-info="orderInfo" |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
|
|
<!-- 详情抽屉 --> |
|
<el-drawer |
|
title="详情" |
|
:with-header="false" |
|
class="table-detail-drawer" |
|
:visible.sync="showTableDrawer" |
|
size="70%" |
|
direction="ltr" |
|
destroy-on-close |
|
> |
|
<OrderInfoInfo :order-info="orderInfo" /> |
|
</el-drawer> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
import tyApi from "@/api/finance/ty"; |
|
import OrderRefund from "@/api/finance/oilCompanyAccount"; |
|
import OrderTfAdd from "./OrderTfAdd"; |
|
import orderInfoApi from "@/api/order/orderInfo"; |
|
import sysCustomerInfoApi from "@/api/user/sysCustomerInfo"; |
|
import oilSiteInfoApi from "@/api/user/oilSiteInfo"; |
|
import OrderInfoAdd from "./OrderInfoAdd"; |
|
import OrderInfoUpdate from "./OrderInfoUpdate"; |
|
import OrderInfoInfo from "./OrderInfoInfo"; |
|
import OrderInfoImport from "./OrderInfoImport"; |
|
import OrderInfoSupplement from "./OrderInfoSupplement"; |
|
import OrderInfoZeYiSupplement from "./OrderInfoZeYiSupplement"; |
|
import rippleChart from "@/views/dashboard/admin/components/RippleChart"; |
|
import openTicketApi from "@/api/finance/openTicketApi"; |
|
import oilCompanyInfoApi from "@/api/user/oilCompanyInfo"; |
|
import newListLayout from "@/components/newListLayout/index/index"; |
|
import { mapGetters } from "vuex"; |
|
export default { |
|
components: { |
|
newListLayout, |
|
OrderInfoAdd, |
|
OrderTfAdd, |
|
OrderInfoUpdate, |
|
OrderInfoInfo, |
|
OrderInfoImport, |
|
OrderInfoSupplement, |
|
OrderInfoZeYiSupplement, |
|
rippleChart, |
|
}, |
|
data() { |
|
return { |
|
payAccountType_t: 2, |
|
companyList: [], |
|
tableLoading: false, |
|
sHeight: "", |
|
moreHeight: 260, |
|
orderFlag: false, |
|
output: { |
|
outputType: 1, // 导出方式，1导出选中，2导出本页，3条件导出，4导出全部 |
|
startPage: 1, // 导出开始页 |
|
endPage: 1, // 导出结束页 |
|
pageSize: 15, // 每页条数 |
|
}, |
|
siteList: [], |
|
multipleSelection: [], // 选择表格数据集合 |
|
importDialog: false, // 导入弹窗 |
|
outPutDialog: false, // 导出弹窗 |
|
showTableDrawer: false, |
|
page: { |
|
pageSize: 15, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: {}, // 查询参数 |
|
sorted: { |
|
createTime: "desc", |
|
}, |
|
columns: [], |
|
}, |
|
tableHeight: "", |
|
filters: this.$options.filters, |
|
dataPage: { |
|
// 分页显示page |
|
pageSize: 10, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: { |
|
// 查询参数 |
|
}, |
|
sorted: {}, |
|
}, |
|
tableColumns: [ |
|
{ |
|
prop: "orderSerialNumber", |
|
minWidth: 250, |
|
sortable: "custom", |
|
label: "订单号", |
|
show: true, |
|
render: (row, column, cell) => { |
|
// 订单号查询 |
|
return ( |
|
<div> |
|
<div> |
|
<el-button |
|
on-click={() => this.handleDetailBySerialNumber(cell)} |
|
type="text" |
|
> |
|
ID:{row.id} |
|
</el-button> |
|
</div> |
|
<div> |
|
<el-button |
|
on-click={() => this.handleDetailBySerialNumber(cell)} |
|
type="text" |
|
> |
|
订单号：{cell} |
|
</el-button> |
|
</div> |
|
</div> |
|
); |
|
}, |
|
}, |
|
{ |
|
prop: "customerId", |
|
minWidth: 200, |
|
sortable: "custom", |
|
label: "司机信息", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return ( |
|
<div class="column-info-container"> |
|
<div class="column-info-icon"> |
|
<svg-icon |
|
v-show={row.payAccountType === 0} |
|
icon-class="iconsiji1" |
|
/> |
|
<svg-icon |
|
v-show={row.payAccountType === 1} |
|
icon-class="icongongsi-" |
|
/> |
|
</div> |
|
<div class="column-info-content"> |
|
<div class="column-info-content-item"> |
|
{row.oilCustomerInfo.name |
|
? row.oilCustomerInfo.name |
|
: "暂无"} |
|
- |
|
{row.oilCustomerInfo.phone |
|
? row.oilCustomerInfo.phone |
|
: "暂无"} |
|
</div> |
|
<div |
|
v-show={row.payAccountType === 1} |
|
class="column-info-content-item" |
|
> |
|
{row.companyInfo.name ? row.companyInfo.name : "暂无"} |
|
</div> |
|
<div class="column-info-content-item" v-show={!row.editor}> |
|
<span>{row.plateNumber}</span> |
|
<el-button |
|
on-click={() => |
|
this.changeEditor(row, row.orderSerialNumber) |
|
} |
|
type="text" |
|
> |
|
<svg-icon |
|
style="width: 15px;height:15px;" |
|
icon-class="iconxiugai" |
|
/> |
|
</el-button> |
|
</div> |
|
<div class="column-info-content-item" v-show={row.editor}> |
|
<el-input |
|
ref={row.orderSerialNumber} |
|
on-blur={() => this.changeRowPlate(row)} |
|
size="mini" |
|
v-model={row.plateNumber} |
|
clearable |
|
/> |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
}, |
|
}, |
|
// { prop: 'siteId', minWidth: 200, headerAlign: 'center', sortable: 'custom', label: '油卡信息', show: true, render: (row, column, cell) => { |
|
// // <div class='column-info-content-item'>油卡余额：{row.oilCustomerInfo.plateNumber}</div> |
|
// return <div class='column-info-container'> |
|
// <div class='column-info-icon'> |
|
// <el-tag size='small' v-show={row.oilCardNature === 1} effect='plain' type='success'>个人</el-tag> |
|
// <el-tag size='small' v-show={row.oilCardNature === 2} effect='plain' type='primary'>直营</el-tag> |
|
// <el-tag size='small' v-show={row.oilCardNature === 3} effect='plain' type='danger'>外请</el-tag> |
|
// </div> |
|
// <div class='column-info-content'> |
|
// <div class='column-info-content-item'>{row.companyInfo.name}</div> |
|
// <div class='column-info-content-item'>卡号：{row.oilCustomerInfo.phone}</div> |
|
// </div> |
|
// </div> |
|
// } }, |
|
{ |
|
prop: "siteId", |
|
minWidth: 250, |
|
sortable: "custom", |
|
label: "油站", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return ( |
|
<div class="column-info-container"> |
|
<div class="column-info-icon"> |
|
<img |
|
style="width: 30px; height: 30px" |
|
src={ |
|
"https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/site-" + |
|
row.channelCode + |
|
".png" |
|
} |
|
/> |
|
</div> |
|
<div class="column-info-content"> |
|
<div class="column-info-content-item"> |
|
{" "} |
|
{row.siteLevel} - {row.siteInfo.siteName}-{row.siteInfo.id} |
|
</div> |
|
<div> |
|
<span style="color: red;font-size=16px;margin-right: 10px;font-weight:bold"> |
|
{row.oilProductType === "GAS" |
|
? "天然气" |
|
: row.oilProductType === "PETROL" |
|
? "汽油" |
|
: "柴油"} |
|
/{row.oilsCode} |
|
</span> |
|
<span> |
|
{row.realPrice}￥/ |
|
{row.oilProductType === "GAS" ? "KG" : "L"} |
|
</span> |
|
</div> |
|
<div> |
|
<div> |
|
{row.volume.toFixed(2)} |
|
{row.oilProductType === "GAS" ? "KG" : "L"}/ |
|
{row.payRealAmount}￥ |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
}, |
|
}, |
|
{ |
|
prop: "orderStatus", |
|
minWidth: 120, |
|
sortable: "custom", |
|
label: "订单状态", |
|
show: true, |
|
render: (row, column, cell) => { |
|
if (cell === -1) { |
|
return <el-tag type="danger">支付失败</el-tag>; |
|
} else if (cell === 0) { |
|
return <el-tag type="primary">支付中</el-tag>; |
|
} else if (cell === 1) { |
|
return <el-tag type="success">支付成功</el-tag>; |
|
} else if (cell === 2) { |
|
return ( |
|
<el-tag type="info" minWidth="80"> |
|
已取消 |
|
</el-tag> |
|
); |
|
} else if (cell === 3) { |
|
return ( |
|
<el-tag type="info" minWidth="80"> |
|
已退款 |
|
</el-tag> |
|
); |
|
} else if (cell === 4) { |
|
return ( |
|
<el-tag type="info" minWidth="80"> |
|
退款中 |
|
</el-tag> |
|
); |
|
} else if (cell === 5) { |
|
return ( |
|
<el-tag type="info" minWidth="80"> |
|
退款失败 |
|
</el-tag> |
|
); |
|
} else { |
|
return cell; |
|
} |
|
}, |
|
}, |
|
// { prop: 'siteBrand', minWidth: 80, sortable: 'custom', label: '油站所属品牌', show: true, render: (row, column, cell) => { |
|
// if (cell === 1) { |
|
// return '中国石油' |
|
// } |
|
// if (cell === 2) { |
|
// return '审核通过' |
|
// } |
|
// if (cell === 3) { |
|
// return '壳牌' |
|
// } |
|
// if (cell === 4) { |
|
// return '民营' |
|
// } |
|
// if (cell === 5) { |
|
// return '中海油' |
|
// } |
|
// if (cell === 6) { |
|
// return '京博' |
|
// } |
|
// if (cell === 7) { |
|
// return '中化石油' |
|
// } |
|
// if (cell === 8) { |
|
// return '其他' |
|
// } |
|
// return cell |
|
// } }, |
|
// { prop: 'realAmount', minWidth: 150, sortable: 'custom', label: '油品/升数/金额', show: true, render: (row, column, cell) => { |
|
// return <div> |
|
// <div> |
|
// <span style='color: red;font-size=16px;margin-right: 10px;font-weight:bold'>{row.oilsCode}</span> |
|
// <span>{row.realPrice} ￥/L</span> |
|
// </div> |
|
// <div> |
|
// <div>{row.volume}L/{row.payRealAmount}￥</div> |
|
// </div> |
|
// </div> |
|
// } }, |
|
{ |
|
prop: "createTime", |
|
minWidth: 160, |
|
sortable: "custom", |
|
label: "创建时间", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
{ |
|
prop: "orderSource", |
|
minWidth: 180, |
|
label: "来源/支付方式", |
|
show: true, |
|
render: (row, column, cell) => { |
|
var oilCardNatureName = ""; |
|
if (row.oilCardNature === 2) { |
|
oilCardNatureName = "自营油卡"; |
|
} |
|
if (row.oilCardNature === 3) { |
|
oilCardNatureName = "外请油卡"; |
|
} |
|
return ( |
|
<div> |
|
<div>来源：{this.markData.ORDER_SOURCE[cell]}</div> |
|
<div> |
|
支付：{oilCardNatureName ? oilCardNatureName + "/" : ""} |
|
{this.markData.PAY_CHANNEL[row.payChannel]} |
|
</div> |
|
</div> |
|
); |
|
}, |
|
}, |
|
], |
|
updateDialog: false, // 修改弹窗 |
|
supplementDialog: false, // 补单 |
|
supplementZeYiDialog: false, // 则一补单 |
|
orderTfDialog: false, // 订单匹配 |
|
orderInfo: {}, |
|
showStatistic: false, // 是否展示统计信息 |
|
showSearch: true, // 是否展示统计信息 |
|
totalData: {}, // 总金额和总订单数 |
|
totalTypeData: [], // 个人和企业统计信息 |
|
totalChannelData: [], // 渠道统计信息 |
|
sysCustomerList: [], // 用户集合 |
|
pieColors: [ |
|
// 饼图颜色 |
|
"#fe6b45", |
|
"#ff2e3b", |
|
"#fe6a46", |
|
"#5ed65e", |
|
], |
|
sites: { |
|
XOIL: "星油", |
|
WJY: "万金油", |
|
LV: "老吕", |
|
TY: "团油", |
|
YDJY: "一点加油", |
|
}, |
|
valColumn: [ |
|
"createTime", |
|
"siteInfo.siteName", |
|
"sitePrice", |
|
"realPrice", |
|
"volume", |
|
"sitePriceAmount", |
|
"payRealAmount", |
|
"siteLevel", |
|
"channelCode", |
|
"oilsCode", |
|
"orderStatus", |
|
"companyInfo.name", |
|
"oilCustomerInfo.customerId", |
|
"oilCustomerInfo.name", |
|
"plateNumber", |
|
"payAccountType", |
|
"siteId", |
|
"provinceName", |
|
"cityName", |
|
"oilsBar", |
|
"payTime", |
|
"updateTime", |
|
"id", |
|
"orderSerialNumber", |
|
"otherOrderId", |
|
"suppleRemak", |
|
], |
|
headers: [ |
|
"创建时间", |
|
"油站名称", |
|
"油站单价", |
|
"实际单价", |
|
"体积", |
|
"油站计算金额", |
|
"实际支付金额", |
|
"油站等级", |
|
"渠道名称", |
|
"油品类型", |
|
"订单状态", |
|
"公司名称", |
|
"司机编号", |
|
"司机姓名", |
|
"车牌号", |
|
"账户类型", |
|
"油站编号", |
|
"油站所在省", |
|
"油站所在市区", |
|
"油枪号", |
|
"支付时间", |
|
"修改时间", |
|
"订单编号", |
|
"流水号", |
|
"三方订单编号", |
|
"补单说明", |
|
], |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(["sysUserList", "markData"]), |
|
}, |
|
watch: { |
|
tableHeight(newValue, oldValue) { |
|
console.log(newValue, "-----------"); |
|
// this.tableHeight = document.documentElement.clientHeight - 300 - 60 - 60 |
|
}, |
|
}, |
|
created() { |
|
this.getByPage(); |
|
// this.getHeight() |
|
// 增加监听事件，窗口变化时得到高度。 |
|
// window.addEventListener('resize', this.getHeight, false) |
|
}, |
|
mounted() { |
|
// this.sHeight = this.$refs.searchHeight.offsetHeight |
|
}, |
|
methods: { |
|
Sfpush() { |
|
//顺丰订单补推 |
|
let data = { |
|
startTime: "2021-12-15 00:00:00", |
|
endTime: "2021-12-15 23:59:59", |
|
}; |
|
oilSiteInfoApi.handPushOrderToShunFeng(data).then((res) => { |
|
console.log(res); |
|
}); |
|
}, |
|
toRefundFY(row) { |
|
console.log(row.id); |
|
// 通联退款 |
|
this.$confirm( |
|
` |
|
您确定要对该福佑订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
let obj = { |
|
id: row.id, |
|
}; |
|
orderInfoApi.refundFY(obj).then((res) => { |
|
console.log(res); |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}, |
|
RefundToBalance(row) { |
|
// 退款到余额 |
|
console.log(row.id); |
|
OrderRefund.RefundToAccount(row.id).then((res) => { |
|
console.log(res); |
|
this.getByPage(); |
|
}); |
|
}, |
|
resetting() { |
|
this.page.params = {}; |
|
this.payAccountType_t = ""; |
|
}, |
|
searchCompanyInfo(info) { |
|
const oilSiteInfo = {}; |
|
oilSiteInfo.name = info; |
|
if (info && info !== "") { |
|
oilCompanyInfoApi.getLikeByNameOrId(oilSiteInfo).then((res) => { |
|
this.companyList = res.data; |
|
}); |
|
} |
|
}, |
|
// 微信退款 |
|
wechartRefund(row) { |
|
this.$confirm( |
|
` |
|
您确定要对该订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
this.tableLoading = true; |
|
OrderRefund.wechatPayRefund({ |
|
orderNum: row.orderSerialNumber, |
|
}).then((res) => { |
|
try { |
|
if (res.code === 20000) { |
|
this.$message.success("退款已发起，请稍后刷新列表查看"); |
|
this.getByPage(); |
|
} else { |
|
this.$message.error(res.msg); |
|
} |
|
} finally { |
|
this.tableLoading = false; |
|
} |
|
}); |
|
}); |
|
}, |
|
showSearchs() { |
|
console.log(this.showSearch); |
|
if (this.showSearch) { |
|
this.showSearch = false; |
|
this.tableHeight = this.tableHeight + this.sHeight; |
|
} else { |
|
this.showSearch = true; |
|
this.tableHeight = this.tableHeight - this.sHeight; |
|
} |
|
}, |
|
showStatistics() { |
|
console.log(this.moreHeight, "this.moreHeight"); |
|
if (this.showStatistic) { |
|
this.moreHeight = this.$refs.showmore.offsetHeight; |
|
console.log(this.showStatistic, " 为true时"); |
|
this.showStatistic = false; |
|
this.tableHeight = this.tableHeight + this.moreHeight; |
|
console.log(this.tableHeight, " this.tableHeight"); |
|
} else { |
|
console.log(this.showStatistic, " 为false时"); |
|
this.showStatistic = true; |
|
this.tableHeight = this.tableHeight - this.moreHeight; |
|
console.log(this.tableHeight, " this.tableHeight changee"); |
|
} |
|
}, |
|
searchUserInfo(info) { |
|
if (info && info !== "") { |
|
sysCustomerInfoApi.searchInfo(info).then((res) => { |
|
this.sysCustomerList = res.data; |
|
}); |
|
} |
|
}, |
|
// 远程搜索主油站 |
|
getSimpleOilSiteInfo(siteName) { |
|
if (siteName) { |
|
const oilSiteInfo = {}; |
|
oilSiteInfo.siteName = siteName; |
|
oilSiteInfoApi.getSimpleOilSiteInfo(oilSiteInfo).then((res) => { |
|
this.siteList = res.data; |
|
}); |
|
} else { |
|
this.sites = []; |
|
} |
|
}, |
|
indexMethod(index) { |
|
return (index + 1) * 1; |
|
}, |
|
handleSelectionChange(val) { |
|
// 选择表格数据 |
|
this.multipleSelection = val; |
|
}, |
|
toForbid() { |
|
// 禁用 |
|
if (!this.multipleSelection || this.multipleSelection.length < 1) { |
|
this.$message.error("请选择需要操作的数据"); |
|
return; |
|
} |
|
}, |
|
toStartUsing() { |
|
// 启用 |
|
if (!this.multipleSelection || this.multipleSelection.length < 1) { |
|
this.$message.error("请选择需要操作的数据"); |
|
return; |
|
} |
|
}, |
|
changeEditor(row, r) { |
|
// 修改是否允许修改标识 |
|
this.$set(row, "editor", true); |
|
this.$nextTick(() => { |
|
// console.log(this.$refs[r]) |
|
this.$refs[r].focus(); |
|
}); |
|
}, |
|
changeRowPlate(row) { |
|
// 修改车牌号 |
|
// row.plateNumber = row.oilCustomerInfo.plateNumber |
|
row.accountCardCode = null; |
|
orderInfoApi.update(row).then((res) => { |
|
this.$message.success(res.msg); |
|
this.$set(row, "editor", false); |
|
}); |
|
}, |
|
toSupplement() { |
|
// 补单 |
|
this.supplementDialog = true; |
|
}, |
|
toSupplementZeYi() { |
|
// 则一补单 |
|
this.supplementZeYiDialog = true; |
|
}, |
|
toOrderTf() { |
|
// 订单匹配 |
|
this.orderTfDialog = true; |
|
}, |
|
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() { |
|
// 导出数据 |
|
let tmpData = []; |
|
const status = this.output.outputType; |
|
if (status === 1) { |
|
tmpData = this.multipleSelection; |
|
this.ImportExcel(tmpData); |
|
} else if (status === 3 || status === 2) { |
|
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; |
|
searchParam.params.null_convertRelationOrderId = true; |
|
const res = await orderInfoApi.getByCustomPage(searchParam); |
|
tmpData = res.data.list; |
|
this.ImportExcel(tmpData); |
|
} else if (status === 4) { |
|
const searchParam = { ...this.page }; |
|
searchParam.currentPage = this.output.startPage; |
|
searchParam.params.endPage = this.output.endPage; |
|
searchParam.params.null_convertRelationOrderId = true; |
|
orderInfoApi |
|
.export2Web(searchParam) |
|
.then((res) => { |
|
if (res.code === 20000) { |
|
this.$message.success(res.msg); |
|
} else { |
|
this.$message.error(res.msg); |
|
} |
|
}) |
|
.catch((err) => { |
|
this.$message.error(err); |
|
}); |
|
} else { |
|
const cs = await orderInfoApi.getCount(); |
|
const dataCount = cs.data; |
|
|
|
const searchParam = { |
|
currentPage: 1, |
|
pageSize: dataCount, |
|
}; |
|
const res = await orderInfoApi.getByCustomPage(searchParam); |
|
tmpData = res.data.list; |
|
this.ImportExcel(tmpData); |
|
} |
|
this.outPutDialog = false; |
|
}, |
|
ImportExcel(tmpData) { |
|
tmpData = tmpData.map((item) => { |
|
if (item["payAccountType"] === 0) { |
|
item["payAccountType"] = "个人账户支付"; |
|
} else if (item["payAccountType"] === 1) { |
|
item["payAccountType"] = "企业账户支付"; |
|
} else { |
|
item["payAccountType"] = "未识别"; |
|
} |
|
if (item["orderStatus"] === 0) { |
|
item["orderStatus"] = "待支付"; |
|
} else if (item["orderStatus"] === 1) { |
|
item["orderStatus"] = "已支付"; |
|
} else if (item["orderStatus"] === 2) { |
|
item["orderStatus"] = "已取消"; |
|
} else if (item["orderStatus"] === 3) { |
|
item["orderStatus"] = "已退款"; |
|
} else if (item["orderStatus"] === -1) { |
|
item["orderStatus"] = "支付失败"; |
|
} else { |
|
item["orderStatus"] = "未识别"; |
|
} |
|
|
|
if (!item["suppleRemak"]) { |
|
item["suppleRemak"] = "暂无"; |
|
} |
|
return item; |
|
}); |
|
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", |
|
}); |
|
this.$message.success("导出成功"); |
|
}); |
|
}, |
|
handleDetail(id) { |
|
// 查看行 详情 |
|
console.log(id); |
|
orderInfoApi.getInfo(id).then((res) => { |
|
this.orderInfo = res.data; |
|
this.showTableDrawer = true; |
|
}); |
|
}, |
|
handleDetailBySerialNumber(id) { |
|
// 查看行 详情 |
|
orderInfoApi.getInfoBySerialNumber(id).then((res) => { |
|
this.orderInfo = res.data; |
|
this.showTableDrawer = true; |
|
}); |
|
}, |
|
getHeight() { |
|
// 获取浏览器高度并计算得到表格所用高度。 |
|
this.tableHeight = |
|
document.documentElement.clientHeight - 300 - 60 - 60 - 100; |
|
console.log(this.tableHeight); |
|
console.log(document.documentElement.clientHeight); |
|
}, |
|
search() { |
|
// 搜索 |
|
this.page.currentPage = 1; |
|
this.getByPage(); |
|
}, |
|
toggleSearchAdvance() { |
|
this.searchAdvice = !this.searchAdvice; |
|
}, |
|
handleSizeChange(val) { |
|
this.page.pageSize = val; |
|
this.getByPage(); |
|
}, |
|
handleCurrentChange(val) { |
|
this.page.currentPage = val; |
|
this.getByPage(); |
|
}, |
|
sortHandler(column) { |
|
// 排序查询 |
|
const key = column.prop; |
|
const value = column.order; |
|
this.page.sorted = {}; |
|
this.page.sorted[key] = value; |
|
this.getByPage(); |
|
}, |
|
toUpdate(id) { |
|
// 跳转到更新 |
|
orderInfoApi.get(id).then((res) => { |
|
this.orderInfo = res.data; |
|
this.updateDialog = true; |
|
}); |
|
}, |
|
toTYRefund(row) { |
|
openTicketApi.shouldRefund(row.orderSerialNumber).then((res) => { |
|
console.log(res); |
|
if ( |
|
res.msg == |
|
"该笔订单有申请开票记录，请核实情况后再退款，是否继续退款。" |
|
) { |
|
this.$confirm(res.msg, "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
this.$confirm( |
|
` |
|
您确定要对该团油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
tyApi.refund(row.id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}) |
|
.catch(() => { |
|
this.$message({ |
|
type: "info", |
|
message: "取消退款", |
|
}); |
|
}); |
|
} else if (res.code == 40000) { |
|
this.$message.error(res.msg); |
|
} else if (res.code == 20000) { |
|
this.$confirm( |
|
` |
|
您确定要对该团油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
tyApi.refund(row.id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
} |
|
}); |
|
// 团油退款 |
|
}, |
|
toRefund(row) { |
|
// 星油退款 |
|
console.log("测试"); |
|
console.log(row); |
|
openTicketApi.shouldRefund(row.orderSerialNumber).then((res) => { |
|
console.log(res); |
|
if ( |
|
res.msg == |
|
"该笔订单有申请开票记录，请核实情况后再退款，是否继续退款。" |
|
) { |
|
this.$confirm(res.msg, "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
this.$confirm( |
|
` |
|
您确定要对该星油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
if (row.openStatus == 1) { |
|
orderInfoApi.refundByOpenStatus(row).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
} else { |
|
orderInfoApi.refund(row.id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
} |
|
}); |
|
}) |
|
.catch(() => { |
|
this.$message({ |
|
type: "info", |
|
message: "取消退款", |
|
}); |
|
}); |
|
} else if (res.code == 40000) { |
|
this.$message.error(res.msg); |
|
} else if (res.code == 20000) { |
|
console.log("发起退款"); |
|
this.$confirm( |
|
` |
|
您确定要对该星油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
if (row.openStatus == 1) { |
|
console.log(row); |
|
orderInfoApi.refundByOpenStatus(row).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
} else { |
|
orderInfoApi.refund(row.id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
} |
|
}); |
|
} |
|
}); |
|
}, |
|
toRefundSf(row) { |
|
console.log(row.id); |
|
// 通联退款 |
|
this.$confirm( |
|
` |
|
您确定要对该顺丰订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
let obj = { |
|
id: row.id, |
|
}; |
|
orderInfoApi.refundSf(obj).then((res) => { |
|
console.log(res); |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}, |
|
toCancelSf(row) { |
|
//顺丰退款 |
|
console.log(row.id); |
|
// 通联退款 |
|
this.$confirm( |
|
` |
|
您确定要对该顺丰订单进行取消?当前取消人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
取消人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
取消金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
let obj = { |
|
id: row.id, |
|
}; |
|
console.log("obj:", obj, "row:", row); |
|
orderInfoApi.toCancelSf(row.id).then((res) => { |
|
console.log(res); |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}, |
|
toTongLianRefund(row) { |
|
console.log(row.id); |
|
// 通联退款 |
|
this.$confirm( |
|
` |
|
您确定要对该星油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
console.log(row); |
|
if (row.openStatus == 1) { |
|
orderInfoApi.refundByOpenStatus(row).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
} else { |
|
orderInfoApi.refund(row.id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
} |
|
}); |
|
}, |
|
toCancelOrder(row) { |
|
openTicketApi.shouldRefund(row.orderSerialNumber).then((res) => { |
|
console.log(res); |
|
if ( |
|
res.msg == |
|
"该笔订单有申请开票记录，请核实情况后再退款，是否继续退款。" |
|
) { |
|
this.$confirm(res.msg, "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
this.$confirm( |
|
` |
|
您确定要对该则一订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
oilSiteInfoApi.cancelOrder(row.id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}) |
|
.catch(() => { |
|
this.$message({ |
|
type: "info", |
|
message: "取消退款", |
|
}); |
|
}); |
|
} else if (res.code == 40000) { |
|
this.$message.error(res.msg); |
|
} else if (res.code == 20000) { |
|
this.$confirm( |
|
` |
|
您确定要对该则一订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/> |
|
退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]， |
|
退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/> |
|
`, |
|
|
|
"提示", |
|
{ type: "info", dangerouslyUseHTMLString: true } |
|
).then(() => { |
|
oilSiteInfoApi.cancelOrder(row.id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
} |
|
}); |
|
|
|
// 则一退款 |
|
}, |
|
|
|
toDelete(id) { |
|
// 删除 |
|
this.$confirm("确定删除?", "提示", { type: "error" }).then(() => { |
|
orderInfoApi.deleteById(id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}, |
|
getByPage() { |
|
this.addDialog = false; |
|
|
|
if (this.page.params.orderStatus === "" && this.orderFlag) { |
|
delete this.page.params.orderStatus; |
|
console.log("删除订单标识"); |
|
} else { |
|
this.orderFlag = true; |
|
} |
|
console.log("订单标识"); |
|
console.log(this.orderFlag); |
|
if ( |
|
this.page.params.createTime != null && |
|
this.page.params.createTime != "" |
|
) { |
|
this.page.params.createTime_start = |
|
this.page.params.createTime.split("~")[0]; |
|
this.page.params.createTime_end = |
|
this.page.params.createTime.split("~")[1]; |
|
} |
|
|
|
this.page.params.payAccountType = this.payAccountType_t; |
|
if (this.payAccountType_t == 2) { |
|
delete this.page.params.payAccountType; |
|
} |
|
if ( |
|
this.page.params.orderStatus == "" && |
|
this.page.params.orderStatus != 0 |
|
) { |
|
delete this.page.params.orderStatus; |
|
} |
|
|
|
orderInfoApi.getByCustomPage(this.page).then((res) => { |
|
this.dataPage = res.data; |
|
this.page.totalCount = this.dataPage.totalCount; |
|
this.page.totalPage = this.dataPage.totalPage; |
|
this.getStatisticData(); |
|
}); |
|
}, |
|
async getStatisticData() { |
|
// 查询统计信息 |
|
|
|
const res = await orderInfoApi.statisticOrderTotalData(this.page); |
|
this.totalData = res.data ? res.data : {}; |
|
|
|
const res1 = await orderInfoApi.statisticOrderTotalDataByType(this.page); |
|
this.totalTypeData = res1.data; |
|
const res2 = await orderInfoApi.statisticOrderTotalDataByChannel( |
|
this.page |
|
); |
|
this.totalChannelData = res2.data; |
|
}, |
|
closeDialog() { |
|
this.addDialog = false; |
|
this.updateDialog = false; |
|
this.supplementDialog = false; |
|
this.supplementZeYiDialog = false; |
|
this.orderTfDialog = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
>>> .foot-page { |
|
margin-top: 0 !important; |
|
} |
|
|
|
.felxLayout { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.el-form { |
|
max-height: 300px; |
|
overflow: hidden; |
|
transition: 0.5s; |
|
} |
|
|
|
.statistic-container { |
|
display: flex; |
|
flex-direction: column; |
|
text-align: left; |
|
background-color: #3595f8; |
|
margin-top: 20px; |
|
color: #fff; |
|
|
|
.statictic-item { |
|
display: flex; |
|
height: 100px; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin: 15px 0; |
|
|
|
.left-count { |
|
width: 16%; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
|
|
.count { |
|
font-size: 34px; |
|
font-weight: bold; |
|
} |
|
|
|
.text { |
|
font-size: 14px; |
|
margin-top: 5px; |
|
} |
|
} |
|
|
|
.right-container { |
|
width: 84%; |
|
height: 100%; |
|
display: flex; |
|
justify-content: start; |
|
align-items: center; |
|
|
|
.right-item { |
|
width: 25%; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
.pie-table { |
|
margin-right: 15px; |
|
background-color: #fff; |
|
width: 100px; |
|
height: 100px; |
|
border-radius: 50%; |
|
color: #33334d; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.statis-info { |
|
font-size: 14px; |
|
font-weight: bold; |
|
display: flex; |
|
height: 100%; |
|
flex-direction: column; |
|
justify-content: space-evenly; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |
|
<style scoped> |
|
.box_daochu { |
|
padding: 3%; |
|
} |
|
|
|
.column-info-container { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.column-info-icon { |
|
color: #4988fd; |
|
margin-right: 10px; |
|
} |
|
|
|
.column-info-icon .icon { |
|
width: 20px; |
|
height: 20px; |
|
} |
|
|
|
.column-info-content { |
|
font-size: 12px; |
|
} |
|
|
|
.handle-button-group { |
|
margin-bottom: 10px; |
|
} |
|
|
|
.supplement-header { |
|
display: flex; |
|
line-height: 2.5rem; |
|
color: #000; |
|
} |
|
|
|
.supplement-header img { |
|
background-size: cover; |
|
width: 2.5rem; |
|
margin-right: 0.8rem; |
|
} |
|
|
|
.table-header /deep/ .table-list { |
|
/* max-height: 100% !important; */ |
|
} |
|
</style>
|
|
|