334 lines
10 KiB
Vue
334 lines
10 KiB
Vue
<template>
|
||
<a-card :bordered="false">
|
||
<div class="card-title">{{ $route.meta.title }}</div>
|
||
<div class="table-operator">
|
||
<!-- 搜索板块 -->
|
||
<a-row class="row-item-search">
|
||
<a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
|
||
<a-form-item label="司机手机号">
|
||
<a-input v-decorator="['search']" placeholder="请输入司机手机号" />
|
||
</a-form-item>
|
||
<a-form-item label="司机姓名">
|
||
<a-input v-decorator="['driver_name']" placeholder="请输入司机姓名" />
|
||
</a-form-item>
|
||
<a-form-item label="单号">
|
||
<a-input v-decorator="['orderNo']" placeholder="油卡编号/销售单号/批次号/运单号" />
|
||
</a-form-item>
|
||
<a-form-item label="发放状态">
|
||
<a-select v-decorator="['oil_status', { initialValue: -1 }]">
|
||
<a-select-option :value="-1">全部</a-select-option>
|
||
<a-select-option
|
||
v-for="(item, index) in OilStatusEnum.data"
|
||
:key="index"
|
||
:value="item.value"
|
||
>{{ item.name }}</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item label="企油通发放态">
|
||
<a-select v-decorator="['oil_status_zsy', { initialValue: -1 }]">
|
||
<a-select-option :value="-1">全部</a-select-option>
|
||
<a-select-option :value="0">未提交</a-select-option>
|
||
<a-select-option :value="2">发放成功</a-select-option>
|
||
<a-select-option :value="3">发放失败</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item label="加油核销">
|
||
<a-select v-decorator="['use_status', { initialValue: -1 }]">
|
||
<a-select-option :value="-1">全部</a-select-option>
|
||
<a-select-option
|
||
v-for="(item, index) in UseStatusEnum.data"
|
||
:key="index"
|
||
:value="item.value"
|
||
>{{ item.name }}</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item label="合作商">
|
||
<a-select v-decorator="['partners_id', { initialValue: -1 }]">
|
||
<a-select-option :value="-1">全部</a-select-option>
|
||
<a-select-option
|
||
v-for="(item, index) in partnersListData"
|
||
:key="index"
|
||
:value="item.partners_id"
|
||
>{{ item.name }}</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<template>
|
||
<a-config-provider :locale="zhCN">
|
||
<a-form-item label="下单时间">
|
||
<a-range-picker format="YYYY-MM-DD" v-decorator="['betweenTime']" />
|
||
</a-form-item>
|
||
</a-config-provider>
|
||
</template>
|
||
<a-form-item class="search-btn">
|
||
<a-button type="primary" icon="search" html-type="submit">搜索</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-row>
|
||
<!-- 操作板块 -->
|
||
<div class="row-item-tab clearfix flex-box">
|
||
<span class="form-total">发放总金额：￥{{ total_money }}</span>
|
||
</div>
|
||
</div>
|
||
<s-table
|
||
ref="table"
|
||
rowKey="order_id"
|
||
:loading="isLoading"
|
||
:columns="columns"
|
||
:data="loadData"
|
||
:pageSize="15"
|
||
>
|
||
<span slot="partners" slot-scope="text">
|
||
<p>{{ text.name }}</p>
|
||
</span>
|
||
<div slot="driver" slot-scope="item">
|
||
<p class="mtb-2">{{ item.driver_name || '-' }}</p>
|
||
<p class="mtb-2 f-13">{{ item.mobile }}</p>
|
||
</div>
|
||
<div slot="qyt" slot-scope="item">
|
||
<p class="mtb-2 f-13">批次：{{ item.batch_no || '-' }}</p>
|
||
<p class="mtb-2 f-13">运单：{{ item.waybill_no || '-' }}</p>
|
||
</div>
|
||
<div slot="consume" slot-scope="item">
|
||
<template v-if="item.use_status === 1">
|
||
<p class="mtb-2 f-13">{{ item.station_name || '-' }}</p>
|
||
<p class="mtb-2 f-13">{{ item.oil_name }} {{ item.litter }}L</p>
|
||
<p class="mtb-2 f-13">实付：￥{{ (item.pay_fee / 100).toFixed(2) }}</p>
|
||
</template>
|
||
<span v-else>-</span>
|
||
</div>
|
||
<div slot="status" slot-scope="item">
|
||
<p class="mtb-2">
|
||
<span class="f-13">发放状态：</span>
|
||
<a-tag
|
||
:color="item.oil_status == OilStatusEnum.OIL.value ? 'green' : ''"
|
||
>{{ OilStatusEnum[item.oil_status].name }}</a-tag>
|
||
</p>
|
||
<p class="mtb-2">
|
||
<span class="f-13">加油核销：</span>
|
||
<a-tag
|
||
:color="item.use_status == UseStatusEnum.USE.value ? 'green' : ''"
|
||
>{{ UseStatusEnum[item.use_status].name }}</a-tag>
|
||
</p>
|
||
<p class="mtb-2">
|
||
<span class="f-13">企油通：</span>
|
||
<a-tag :color="qytColor(item.oil_status_zsy)">{{ qytText(item.oil_status_zsy) }}</a-tag>
|
||
</p>
|
||
<p v-if="item.oil_text" class="mtb-2 f-13 order-remark">{{ item.oil_text }}</p>
|
||
</div>
|
||
<div class="actions" slot="action" slot-scope="item">
|
||
<!--有付款权限，订单状态为进行中，已支付，并且未使用-->
|
||
<a
|
||
v-if="(inArray(item.oil_status_zsy, [3])) && item.oil_status === 0 && item.oilCardType === 'zsy_ticket'"
|
||
@click="handleShare(item)"
|
||
>重新发放</a>
|
||
<a
|
||
v-if="(inArray(item.oil_status_zsy, [2])) && item.oil_status === 1 && item.use_status === 0 && item.oilCardType === 'zsy_ticket'"
|
||
@click="handlePay(item)"
|
||
>加油链接</a>
|
||
<a
|
||
v-if="(inArray(item.oil_status_zsy, [2])) && item.oil_status === 1 && item.oilCardType === 'zsy_ticket'"
|
||
@click="handleOil(item)"
|
||
>重推发放结果</a>
|
||
<a
|
||
v-if="(inArray(item.oil_status_zsy, [2])) && item.oil_status === 1 && item.use_status === 1 && item.oilCardType === 'zsy_ticket'"
|
||
@click="handleUse(item)"
|
||
>重推加油结果</a>
|
||
</div>
|
||
</s-table>
|
||
<ShareForm ref="ShareForm" @handleSubmit="handleRefresh" />
|
||
<PayForm ref="PayForm" @handleSubmit="handleRefresh" />
|
||
<OilForm ref="OilForm" @handleSubmit="handleRefresh" />
|
||
<UseForm ref="UseForm" @handleSubmit="handleRefresh" />
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import * as Api from '@/api/partners/order'
|
||
import { STable } from '@/components/Table'
|
||
import {
|
||
OilStatusEnum, UseStatusEnum
|
||
} from '@/common/enum/order'
|
||
import { OilForm, UseForm, ShareForm, PayForm } from './modules'
|
||
import { assignment, inArray } from '@/utils/util'
|
||
import zhCN from 'ant-design-vue/es/locale/zh_CN'
|
||
import * as PartnersApi from '@/api/partners'
|
||
|
||
export default {
|
||
name: 'Index',
|
||
components: {
|
||
STable,
|
||
ShareForm,
|
||
PayForm,
|
||
OilForm,
|
||
UseForm
|
||
},
|
||
data () {
|
||
return {
|
||
// 当前表单元素
|
||
searchForm: this.$form.createForm(this),
|
||
// 查询参数
|
||
queryParam: {},
|
||
// 正在加载
|
||
isLoading: false,
|
||
// 表头
|
||
columns: [
|
||
{
|
||
title: 'ID',
|
||
dataIndex: 'order_id'
|
||
},
|
||
{
|
||
title: '油卡编号',
|
||
dataIndex: 'oilCardNo',
|
||
scopedSlots: { customRender: 'oilCardNo' }
|
||
},
|
||
{
|
||
title: '企油通单号',
|
||
scopedSlots: { customRender: 'qyt' }
|
||
},
|
||
{
|
||
title: '对接公司内部销售单号',
|
||
dataIndex: 'partners_order_no',
|
||
scopedSlots: { customRender: 'partners_order_no' }
|
||
},
|
||
{
|
||
title: '数量',
|
||
dataIndex: 'total_num',
|
||
scopedSlots: { customRender: 'total_num' }
|
||
},
|
||
{
|
||
title: '发放金额',
|
||
dataIndex: 'total_price'
|
||
},
|
||
{
|
||
title: '司机',
|
||
scopedSlots: { customRender: 'driver' }
|
||
},
|
||
{
|
||
title: '加油信息',
|
||
scopedSlots: { customRender: 'consume' }
|
||
},
|
||
{
|
||
title: '合作商',
|
||
dataIndex: 'partners',
|
||
scopedSlots: { customRender: 'partners' }
|
||
},
|
||
{
|
||
title: '交易状态',
|
||
scopedSlots: { customRender: 'status' }
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: '180px',
|
||
scopedSlots: { customRender: 'action' }
|
||
},
|
||
{
|
||
title: '订单时间',
|
||
dataIndex: 'create_time'
|
||
}
|
||
],
|
||
// 加载数据方法 必须为 Promise 对象
|
||
loadData: param => {
|
||
return Api.list({ ...param, ...this.queryParam })
|
||
.then(response => {
|
||
// 假设 total_money 在 response.data.total_money
|
||
this.total_money = response.data.total_money || 0
|
||
return response.data.list
|
||
})
|
||
},
|
||
// 合作商列表
|
||
partnersListData: [],
|
||
total_money: 0,
|
||
zhCN
|
||
}
|
||
},
|
||
beforeCreate () {
|
||
// 批量给当前实例赋值
|
||
assignment(this, {
|
||
inArray,
|
||
OilStatusEnum,
|
||
UseStatusEnum
|
||
})
|
||
},
|
||
created () {
|
||
this.getPartnersList()
|
||
},
|
||
methods: {
|
||
|
||
/**
|
||
* 刷新列表
|
||
* @param Boolean bool 强制刷新到第一页
|
||
*/
|
||
handleRefresh (bool = false) {
|
||
this.$refs.table.refresh(bool)
|
||
},
|
||
|
||
// 确认搜索
|
||
handleSearch (e) {
|
||
e.preventDefault()
|
||
this.searchForm.validateFields((error, values) => {
|
||
if (!error) {
|
||
this.queryParam = { ...this.queryParam, ...values }
|
||
this.handleRefresh(true)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 企油通发放态文案
|
||
qytText (v) {
|
||
return { 0: '未提交', 1: '处理中', 2: '发放成功', 3: '发放失败' }[v] || '未知'
|
||
},
|
||
// 企油通发放态颜色
|
||
qytColor (v) {
|
||
return { 2: 'green', 3: 'red' }[v] || ''
|
||
},
|
||
|
||
// 重新发放
|
||
handleShare (record) {
|
||
this.$refs.ShareForm.show(record)
|
||
},
|
||
// 付款码
|
||
handlePay (record) {
|
||
this.$refs.PayForm.show(record)
|
||
},
|
||
// 分油回调
|
||
handleOil (record) {
|
||
this.$refs.OilForm.show(record)
|
||
},
|
||
// 使用回调
|
||
handleUse (record) {
|
||
this.$refs.UseForm.show(record)
|
||
},
|
||
|
||
/**
|
||
* 获取代理商列表
|
||
*/
|
||
getPartnersList () {
|
||
this.isLoading = true
|
||
PartnersApi.all()
|
||
.then(result => {
|
||
this.partnersListData = result.data.list
|
||
})
|
||
.finally(() => {
|
||
this.isLoading = false
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.ant-card-body {
|
||
padding: 22px 29px 25px;
|
||
}
|
||
.flex-box{
|
||
display: flex;
|
||
}
|
||
.form-total{
|
||
color: #1890ff;
|
||
margin-right: 10px;
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|