初始化项目
This commit is contained in:
@@ -0,0 +1,307 @@
|
||||
<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="['goods_no']" 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="['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="goods" slot-scope="text">
|
||||
<GoodsItem
|
||||
:data="{
|
||||
image: text.images[0].file.preview_url,
|
||||
imageAlt: '商品图片',
|
||||
title: text.goods_name,
|
||||
goods_no: text.goods_no,
|
||||
goodsProps: text.goods_props
|
||||
}"
|
||||
/>
|
||||
</span>
|
||||
<span slot="partners" slot-scope="text">
|
||||
<p>{{ text.name }}</p>
|
||||
</span>
|
||||
<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>
|
||||
</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, GoodsItem } 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,
|
||||
GoodsItem,
|
||||
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: '分油记录编号',
|
||||
dataIndex: 'shareNo',
|
||||
scopedSlots: { customRender: 'shareNo' }
|
||||
},
|
||||
{
|
||||
title: '对接公司内部销售单号',
|
||||
dataIndex: 'partners_order_no',
|
||||
scopedSlots: { customRender: 'partners_order_no' }
|
||||
},
|
||||
{
|
||||
title: '油卡数量',
|
||||
dataIndex: 'total_num',
|
||||
scopedSlots: { customRender: 'total_num' }
|
||||
},
|
||||
{
|
||||
title: '油卡金额',
|
||||
dataIndex: 'total_price'
|
||||
},
|
||||
{
|
||||
title: '商品信息',
|
||||
dataIndex: 'goods',
|
||||
scopedSlots: { customRender: 'goods' }
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'mobile',
|
||||
scopedSlots: { customRender: 'mobile' }
|
||||
},
|
||||
{
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 手动分油
|
||||
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>
|
||||
Reference in New Issue
Block a user