123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278 |
- <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}">
- <v-select v-model="searchForm.storeId" mode="multiple" placeholder="请选择" allowClear></v-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.title }}</a-select-option>
- </a-select>
- <!-- <v-select v-model="searchForm.itemId" placeholder="请选择" allowClear></v-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="seeDetail(record)">查看</a-button>
- <a-button type="danger" @click="refund(record)">退款</a-button>
- </span>
- </s-table>
- </a-card>
- </template>
- <script>
- import { STable, VSelect } from '@/components'
- import getDate from '../../libs/getDate.js'
- import { orderCenterList } from '../../api/order.js'
- import moment from 'moment'
- export default {
- components: {
- STable,
- VSelect
- },
- data() {
- return {
- // 查询参数
- searchForm: {
- beginDate: null, // 创建的开始时间
- endDate: null, // 创建的结束时间
- storeId: '', // 网点名称
- orderNo: '', // 单号
- itemId:'', // 服务项目
- customerMobile:'', // 手机号码
- orderStatus:'' // 状态
- },
- pageNo:1,
- pageSize:10,
- countHJ:'40',
- incomeHJ:'2000',
- itemOptionData:[], // 服务项目数据
- 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 => {
- return orderCenterList({
- pageNo:this.pageNo,
- pageSize:this.pageSize}).then(res=>{
- console.log(res,'--------------')
- if(res.status == 200){
- // for (let i = 0; i < res.data.list.length; i++) {
- // const _item = res.data.list[i]
- // // _item.status = _item.status + '' === '1'
- // }
- return res.data.list
- }
- })
-
-
- // this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
- // this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
- // 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)
- },
- // 合计
- getTotal(){},
- // 查看详情--跳转到对应的详情页
- seeDetail(row) {
- this.$router.push({name: 'OrderDetail',query: {id: row.id}
- })
- },
- // 退款
- 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.$refs.searchForm.resetFields()
- this.$refs.table.refresh()
- }
- }
- }
- </script>
- <style lang="less">
- .orderCenter-searchForm,
- .addButton {
- margin-bottom: 0;
- }
- .orderCenter-searchForm .ant-form-inline .ant-form-item {
- margin-bottom: 15px;
- }
- .total {
- margin-bottom: 24px;
- width:100%;
- background-color: #e6f7ff;
- border: 1px solid #91d5ff;
- padding: 8px 15px 8px 27px;
- border-radius: 4px;
- .iconImg{
- color: #1890FF;
- margin-right: 10px;
- }
- }
- </style>
|