caimei-mall-admin-ui/src/views/order/list.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="searchForm" :inline="true" class="demo-form-inline">
        <el-form-item label="订单ID:" style="width:180px;float: left;">
          <el-input v-model="listQuery.orderID" placeholder="请输入订单ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="订单号:" style="width:180px;float: left;">
          <el-input v-model="listQuery.orderNo" placeholder="请输入订单号" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="买家:" style="width:200px;float: left;">
          <el-input v-model="listQuery.buyer" placeholder="请输入买家名称" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="收货人:" style="width:180px;float: left;">
          <el-input v-model="listQuery.receiver" placeholder="请输入收货人" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item class="date-box" label="下单时间:" style="width:405px;float: left;">
          <el-date-picker
            v-model="listQuery.startTime"
            style="width:150px;margin-bottom: 10px;"
            type="date"
            placeholder="请选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleFilter"
          />
          至
          <el-date-picker
            v-model="listQuery.endTime"
            style="width:150px;margin-bottom: 10px;"
            type="date"
            placeholder="请选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleFilter"
          />
        </el-form-item>
        <el-form-item class="date-box" label="订单状态:" style="width:200px;float: left;">
          <el-select v-model="listQuery.status" placeholder="订单状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
            <el-option label="待确认" value="0" />
            <el-option label="交易中" value="99" />
            <el-option label="交易完成" value="4" />
            <el-option label="订单完成" value="5" />
            <el-option label="已关闭" value="6" />
            <el-option label="交易全退" value="7" />
          </el-select>
        </el-form-item>
        <el-form-item class="date-box" label="收款状态:" style="width:200px;float: left;">
          <el-select v-model="listQuery.receiptStatus" placeholder="收款状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
            <el-option label="待收款" value="1" />
            <el-option label="部分收款" value="2" />
            <el-option label="已收款" value="3" />
          </el-select>

        </el-form-item>
        <el-form-item class="date-box" label="发货状态:" style="width:200px;float: left;">
          <el-select v-model="listQuery.sendOutStatus" placeholder="发货状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
            <el-option label="待发货" value="1" />
            <el-option label="部分发货" value="2" />
            <el-option label="已发货" value="3" />
          </el-select>

        </el-form-item>
        <el-form-item class="date-box" label="付款状态:" style="width:200px;float: left;">
          <el-select v-model="listQuery.payStatus" placeholder="付款状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
            <el-option label="待付款" value="1" />
            <el-option label="部分付款" value="2" />
            <el-option label="已付款" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item class="date-box" label="退款状态:" style="width:200px;float: left;">
          <el-select v-model="listQuery.refundType" placeholder="退款状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
            <el-option label="无退款" value="0" />
            <el-option label="部分退款" value="1" />
            <el-option label="已退款" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item class="date-box" label="待审核退款:" style="width:220px;float: left;">
          <el-select v-model="listQuery.returnedPurchaseStatus" placeholder="待审核退款" clearable style="width: 120px" class="filter-item" value="" @change="handleFilter">
            <el-option label="有" value="1" />
            <el-option label="无" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item style="width:100px;float: left;">
          <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column label="订单ID" align="center" prop="orderID" />
      <el-table-column label="订单编号" align="center" prop="orderNo" />
      <el-table-column label="买家" align="center" prop="buyer" />
      <el-table-column label="收货人" align="center" prop="receiver" />
      <el-table-column label="订单状态" align="center" prop="status">
        <template slot-scope="{row}">
          <template v-if="['11','12','13','21','22','23','31','32','33'].indexOf(row.status)>=0">
            <el-tag type="success" size="small">交易中</el-tag><span style="display: inline-block;margin:5px;">{{ statusObj[row.status] }}</span>
          </template>
          <template v-else>
            <el-tag :type="row.status*1===6?'info':''" size="small">{{ statusObj[row.status] }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="收款状态" align="center" prop="receiptStatus">
        <template slot-scope="{row}">
          <el-tag v-if="row.receiptStatus*1===1" type="danger" size="small">待收款</el-tag>
          <el-tag v-if="row.receiptStatus*1===2" type="warning" size="small">部分收款</el-tag>
          <el-tag v-if="row.receiptStatus*1===3" type="success" size="small">已收款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="付款状态" align="center" prop="payStatus">
        <template slot-scope="{row}">
          <el-tag v-if="row.payStatus*1===1" type="danger" size="small">待付款</el-tag>
          <el-tag v-if="row.payStatus*1===2" type="warning" size="small">部分付款</el-tag>
          <el-tag v-if="row.payStatus*1===3" type="success" size="small">已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发货状态" align="center" prop="sendOutStatus">
        <template slot-scope="{row}">
          <el-tag v-if="row.sendOutStatus*1===1" type="danger" size="small">待发货</el-tag>
          <el-tag v-if="row.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
          <el-tag v-if="row.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="退款状态" align="center" prop="refundType">
        <template slot-scope="{row}">
          <el-tag v-if="row.refundType*1===1" type="info" size="small">部分退款</el-tag>
          <el-tag v-else-if="row.refundType*1===2" type="info" size="small">已退款</el-tag>
          <el-tag v-else type="info" size="small">无退款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="待审核退款" align="center" prop="returnedPurchaseStatus">
        <template slot-scope="{row}">
          <el-tag v-if="row.returnedPurchaseStatus*1===1" type="warning" size="small">有</el-tag>
          <el-tag v-else type="info" size="small">无</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center" prop="payTotalFee">
        <template slot-scope="{row}">
          ¥{{ row.payTotalFee | toThousandFloatFilter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="下单时间" prop="orderTime">
        <template v-if="row.orderTime" slot-scope="{row}">
          <span>{{ row.orderTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <router-link :to="'/order/detail/' + row.orderID ">
            <el-button type="primary" size="mini" style="width: 70px;margin:5px 0 0 0;">查看详情</el-button>
          </router-link>
          <el-dropdown>
            <el-button type="success" size="mini" style="width: 70px;margin:5px 0 0 0;">
              功能<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><div @click="RemarksOrder(row.orderID)">备注</div></el-dropdown-item>
              <el-dropdown-item v-if="['0','11','21','6','4'].indexOf(row.status)<0"><router-link :to="'/order/logistics/' + row.orderID ">发货记录</router-link></el-dropdown-item>
              <el-dropdown-item v-if="['0','11','6'].indexOf(row.status)<0"><router-link :to="'/order/refund-record/' + row.orderID ">收退款记录</router-link></el-dropdown-item>
              <el-dropdown-item v-if="['0','11','6'].indexOf(row.status)<0"><router-link :to="'/order/refund-return/' + row.orderID ">退款（退货）记录</router-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />

    <Remarks dialog-title="订单备注信息" :is-visible.sync="dialogRemarksVisible" :order-id="dialogRemarksOrderId" :remark-list="dialogRemarkList" />
    <template>
      <el-backtop style="right: 40px; bottom: 40px;">
        <i class="el-icon-upload2" />
      </el-backtop>
    </template>
  </div>
</template>

<script>
import { getList, getRemarks } from '@/api/order'
import Pagination from '@/components/Pagination'
import Remarks from './components/remarks'
export default {
  components: { Pagination, Remarks },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      dialogRemarkList: [],
      dialogRemarksVisible: false,
      dialogRemarksOrderId: 0,
      listQuery: {
        index: 1,
        pageSize: 20,
        organizeID: this.$store.getters.organizeID,
        orderID: '',
        orderNo: '',
        buyer: '',
        receiver: '',
        status: '',
        receiptStatus: '',
        sendOutStatus: '',
        payStatus: '',
        refundType: '',
        returnedPurchaseStatus: '',
        startTime: '',
        endTime: ''
      },
      statusObj: {
        '0': '待确认',
        '4': '交易完成',
        '5': '订单完成',
        '6': '已关闭',
        '7': '交易全退',
        '11': '待收款、待发货',
        '12': '待收款、部分发货',
        '13': '待收款、全部发货',
        '21': '部分收款、待发货',
        '22': '部分收款、部分发货',
        '23': '部分收款、全部发货',
        '31': '全部收款、待发货',
        '32': '全部收款、部分发货',
        '33': '全部收款、全部发货'
      }
    }
  },
  computed: {
    organizeID() {
      return this.$store.getters.organizeID
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.results
        this.total = response.data.totalRecord
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleFilter() {
      this.fetchData()
    },
    RemarksOrder: function(id) {
      getRemarks({ orderID: id }).then(response => {
        this.dialogRemarkList = response.data
      })
      this.dialogRemarksOrderId = id
      this.dialogRemarksVisible = true
    }
  }
}
</script>

<style scoped>
  .el-form-item{
    margin-bottom: 0
  }
  .date-box{
    margin-right:0;
  }
</style>