|
@@ -1,321 +0,0 @@
|
|
|
-<template>
|
|
|
- <a-card :bordered="false">
|
|
|
- <!-- 搜索条件 -->
|
|
|
- <div class="orderCenter-searchForm">
|
|
|
- <a-form ref="searchForm">
|
|
|
- <a-row :gutter="48">
|
|
|
- <a-col :span="8">
|
|
|
- <a-form-item label="创建时间" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
|
|
|
- <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item label="网点名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
- <a-select placeholder="请选择" allowClear v-model="storeId" mode="multiple">
|
|
|
- <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
- <a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear/>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="4">
|
|
|
- <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
|
|
- <a-button type="" @click="resetForm">重置</a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="48">
|
|
|
- <a-col :span="8">
|
|
|
- <a-form-item label="服务项目" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
|
|
|
- <a-select placeholder="请选择" allowClear v-model="searchForm.itemId">
|
|
|
- <a-select-option v-for="item in itemOptionData" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
- <a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear maxLength="11" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
- <v-select v-model="searchForm.orderStatus" ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear></v-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- <!-- 合计 -->
|
|
|
- <div class="total" >
|
|
|
- <a-icon type="info-circle" class="iconImg"/>
|
|
|
- <strong>合计:</strong><span v-model="countHJ">{{countHJ}} 单</span><strong style="margin-left: 15px;">实收:</strong><span v-model="incomeHJ">{{incomeHJ}} 元</span>
|
|
|
- </div>
|
|
|
- <!-- 列表 -->
|
|
|
- <s-table ref="table" size="default" :showPagination="false" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
|
|
|
- <!-- 状态 -->
|
|
|
- <span slot="orderStatus" slot-scope="text, record">
|
|
|
- {{ $refs.orderStatus.getNameByCode(text) }}
|
|
|
- </span>
|
|
|
- <!-- 实收金额 -->
|
|
|
- <span slot="paymentAmount" slot-scope="text, record">
|
|
|
- <template v-if=" record.payStatus == 'PAID' ">{{ record.paymentAmount }}</template>
|
|
|
- <template v-else-if=" record.payStatus != 'PAID' ">{{ 0 }}</template>
|
|
|
- </span>
|
|
|
- <!-- 操作 -->
|
|
|
- <span slot="action" slot-scope="text, record">
|
|
|
- <!-- <a-button type="primary" @click="openDetailModal=true">查看</a-button> -->
|
|
|
- <a-button type="primary" @click="seeDetail(record)">查看</a-button>
|
|
|
- <!-- 本期暂不做 -->
|
|
|
- <!-- <a-button type="danger" @click="refund(record)">退款</a-button> -->
|
|
|
- </span>
|
|
|
- </s-table>
|
|
|
- <!-- 查看详情弹窗 -->
|
|
|
- <order-detail-modal
|
|
|
- :openModal="openDetailModal"
|
|
|
- :nowId="detailId"
|
|
|
- @close="openDetailModal=false"/>
|
|
|
- </a-card>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { STable, VSelect } from '@/components'
|
|
|
- import getDate from '../../libs/getDate.js'
|
|
|
- import { orderCenterList, itemList, storeList } from '../../api/order.js'
|
|
|
- import OrderDetailModal from './OrderDetailModal.vue'
|
|
|
- import moment from 'moment'
|
|
|
- export default {
|
|
|
- name:'OrderCenter',
|
|
|
- components: {
|
|
|
- STable,
|
|
|
- VSelect,
|
|
|
- OrderDetailModal
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- storeId: [], // 网点名称
|
|
|
- // 查询参数
|
|
|
- searchForm: {
|
|
|
- beginDate: null, // 创建的开始时间
|
|
|
- endDate: null, // 创建的结束时间
|
|
|
- storeIdList: [], // 网点名称
|
|
|
- orderNo: '', // 单号
|
|
|
- itemId:'', // 服务项目
|
|
|
- customerMobile:'', // 手机号码
|
|
|
- orderStatus:'' // 状态
|
|
|
- },
|
|
|
- pageNo:1, // 列表当前页
|
|
|
- pageSize:10, // 列表当前页码
|
|
|
- countHJ:'40',
|
|
|
- incomeHJ:'2000',
|
|
|
- itemOptionData:[], // 服务项目数据
|
|
|
- storeOptionData:[], // 网点名称数据
|
|
|
- openDetailModal:false, // 查看详情弹窗 默认关闭
|
|
|
- detailId:null, // 初始化id
|
|
|
- time: [
|
|
|
- moment(getDate.getToday().starttime, this.dateFormat),
|
|
|
- moment(getDate.getToday().endtime, this.dateFormat)
|
|
|
- ],
|
|
|
- dateFormat: 'YYYY-MM-DD',
|
|
|
- columns: [{
|
|
|
- title: '下单时间',
|
|
|
- dataIndex: 'orderTime',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '单号',
|
|
|
- dataIndex: 'orderNo',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '网点名称',
|
|
|
- dataIndex: 'storeName',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '服务项目',
|
|
|
- dataIndex: 'itemName',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '手机号码',
|
|
|
- dataIndex: 'customerMobile',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '应收(¥)',
|
|
|
- dataIndex: 'payableAmount',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '实收(¥)',
|
|
|
- dataIndex: 'paymentAmount',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'paymentAmount'
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- // {
|
|
|
- // title: '优惠(¥)',
|
|
|
- // dataIndex: 'couponAmount',
|
|
|
- // minWidth: '40',
|
|
|
- // align: 'center'
|
|
|
- // },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- dataIndex: 'orderStatus',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'orderStatus'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- dataIndex: 'action',
|
|
|
- minWidth: '40',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'action'
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- ],
|
|
|
- // 加载数据方法 必须为 Promise 对象
|
|
|
- loadData: parameter => {
|
|
|
- // console.log(this.searchForm.storeId)
|
|
|
- this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
|
|
|
- this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
|
|
|
- this.searchForm.storeIdList = this.storeId
|
|
|
- // console.log(this.searchForm.storeId)
|
|
|
- return orderCenterList(Object.assign(parameter, this.searchForm)).then(res => {
|
|
|
- console.log(res,'0000000000000000000')
|
|
|
- if (res.status == 200) {
|
|
|
- // const no = (res.data.pageNo - 1) * res.data.pageSize
|
|
|
- // for (let i = 0; i < res.data.list.length; i++) {
|
|
|
- // const _item = res.data.list[i]
|
|
|
- // _item.no = no + i + 1
|
|
|
- // _item.status = _item.status + '' === '1'
|
|
|
- // }
|
|
|
- return res.data.list
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- moment,
|
|
|
- // 创建时间change
|
|
|
- onChange(dates, dateStrings) {
|
|
|
- if ((dates, dateStrings)) {
|
|
|
- this.searchForm.beginDate = dateStrings[0]
|
|
|
- this.searchForm.endDate = dateStrings[1]
|
|
|
- }
|
|
|
- console.log(this.searchForm.beginDate, this.searchForm.endDate)
|
|
|
- },
|
|
|
- // 获取服务项目数据
|
|
|
- getItemListData(){
|
|
|
- itemList({pageNo:this.pageNo,pageSize:this.pageSize}).then(res=>{
|
|
|
- console.log(res,'-----------')
|
|
|
- if(res.status == 200){
|
|
|
- this.itemOptionData = res.data.list
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取网点名称数据
|
|
|
- getStoreListData(){
|
|
|
- storeList({pageNo:this.pageNo,pageSize:this.pageSize}).then(res=>{
|
|
|
- console.log(res,'-----------')
|
|
|
- if(res.status == 200){
|
|
|
- this.storeOptionData = res.data.list
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 合计
|
|
|
- getTotal(){},
|
|
|
- // 查看详情--跳转到对应的详情页
|
|
|
- seeDetail(record) {
|
|
|
- // this.$router.push({name: 'OrderDetail',query: {id: record.id}
|
|
|
- // })
|
|
|
- this.detailId = record.id
|
|
|
- this.openDetailModal = true
|
|
|
- console.log(this.detailId)
|
|
|
- },
|
|
|
- // 退款---暂不做
|
|
|
- // refund(row) {
|
|
|
- // const _this = this
|
|
|
- // this.$confirm({
|
|
|
- // title: '警告',
|
|
|
- // content: '确认退款后 款项将通过原渠道退回 且不可撤回,确认退款?',
|
|
|
- // okText: '确定',
|
|
|
- // cancelText: '取消',
|
|
|
- // // onOk() {
|
|
|
- // // deleteItem({
|
|
|
- // // id: row.id
|
|
|
- // // }).then(res => {
|
|
|
- // // if (res.status == 200) {
|
|
|
- // // _this.$message.success('退款成功')
|
|
|
- // // _this.$refs.table.refresh()
|
|
|
- // // }
|
|
|
- // // })
|
|
|
- // // }
|
|
|
- // })
|
|
|
- // },
|
|
|
- // 重置
|
|
|
- resetForm() {
|
|
|
- this.searchForm.beginDate = getDate.getToday().starttime
|
|
|
- this.searchForm.endDate = getDate.getToday().endtime
|
|
|
- this.time = [
|
|
|
- moment(getDate.getToday().starttime, this.dateFormat),
|
|
|
- moment(getDate.getToday().endtime, this.dateFormat)
|
|
|
- ]
|
|
|
- this.storeId = []
|
|
|
- this.searchForm.storeIdList = []
|
|
|
- this.searchForm.orderNo = ''
|
|
|
- this.searchForm.itemId = ''
|
|
|
- this.searchForm.customerMobile = ''
|
|
|
- this.searchForm.orderStatus = ''
|
|
|
- // this.$refs.searchForm.resetFields()
|
|
|
- this.$refs.table.refresh()
|
|
|
- }
|
|
|
- },
|
|
|
- beforeRouteEnter (to, from, next) {
|
|
|
- next(vm => {
|
|
|
- vm.getItemListData()
|
|
|
- vm.resetForm()
|
|
|
- vm.getStoreListData()
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-<style lang="less">
|
|
|
- .orderCenter-searchForm{
|
|
|
- // 搜索框的下间距
|
|
|
- .ant-form-item{
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- // 合计
|
|
|
- .total {
|
|
|
- margin:15px 0 25px;
|
|
|
- width:100%;
|
|
|
- background-color: #e6f7ff;
|
|
|
- border: 1px solid #91d5ff;
|
|
|
- padding: 8px 15px 8px 27px;
|
|
|
- border-radius: 4px;
|
|
|
- .iconImg{
|
|
|
- color: #1890FF;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-</style>
|