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

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.form.orderID" placeholder="订单ID" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.form.orderNo" placeholder="订单号" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-form-item label="创建时间:">
        <el-date-picker
          v-model="searchTimeVal"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-input v-model="listQuery.form.buyer" placeholder="买家" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.form.receiver" placeholder="收货人" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.form.status" placeholder="订单状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
        <!-- <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id" /> -->
      </el-select>
      <el-select v-model="listQuery.form.receiptStatus" placeholder="收款状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
        <!-- <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id" /> -->
      </el-select>
      <el-select v-model="listQuery.form.sendOutStatus" placeholder="发货状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
        <!-- <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id" /> -->
      </el-select>
      <el-select v-model="listQuery.form.payStatus" placeholder="付款状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
        <!-- <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id" /> -->
      </el-select>
      <el-select v-model="listQuery.form.refundType" placeholder="退款状态" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
        <!-- <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id" /> -->
      </el-select>
      <el-select v-model="listQuery.form.returnedPurchaseStatus" placeholder="待审核退款" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
        <!-- <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id" /> -->
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width:100%;margin-top:20px;"
    >
      <el-table-column align="center" label="序号" width="35px">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <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" />
      <el-table-column label="收款状态" align="center" prop="receiptStatus" />
      <el-table-column label="付款状态" align="center" prop="payStatus" />
      <el-table-column label="发货状态" align="center" prop="sendOutStatus" />
      <el-table-column label="退款状态" align="center" prop="refundType" />
      <el-table-column label="待审核退款" align="center" prop="returnedPurchaseStatus" />
      <el-table-column label="订单金额" align="center" prop="payTotalFee" />
      <el-table-column align="center" label="下单时间" prop="orderTime">
        <template slot-scope="{row}">
          <i class="el-icon-time" />
          <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="small">查看详情</el-button></router-link>
          <el-dropdown>
            <el-button type="primary" size="small" style="margin-top:5px;">
              功能<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>编辑经理折扣</el-dropdown-item>
              <el-dropdown-item>备注</el-dropdown-item>
              <el-dropdown-item>发货记录</el-dropdown-item>
              <el-dropdown-item>收退款记录</el-dropdown-item>
              <el-dropdown-item>退款（退货）记录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

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

  </div>
</template>

<script>
import { getList } from '@/api/goods'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'gray'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      searchTimeVal: '',
      listQuery: {
        page: 1,
        limit: 10,
        form: {
          orderID: '',
          orderNo: '',
          buyer: '',
          receiver: '',
          status: '',
          receiptStatus: '',
          sendOutStatus: '',
          payStatus: '',
          refundType: '',
          returnedPurchaseStatus: '',
          organizeID: this.organizeID
        }
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      }).catch(() => {
        // 封装静态数据
        this.list = [
          {
            orderID: '1',
            orderNo: 'ffgvdf',
            buyer: '',
            receiver: '',
            status: '',
            receiptStatus: '',
            sendOutStatus: '',
            payStatus: '',
            refundType: '',
            returnedPurchaseStatus: '',
            payTotalFee: '',
            orderTime: new Date(),
            organizeID: this.organizeID
          },
          {
            orderID: '',
            orderNo: '',
            buyer: '',
            receiver: '',
            status: '',
            receiptStatus: '',
            sendOutStatus: '',
            payStatus: '',
            refundType: '',
            returnedPurchaseStatus: '',
            payTotalFee: '',
            orderTime: new Date(),
            organizeID: this.organizeID
          }
        ]
      })
      this.listLoading = false
      this.total = 2
    },
    handleFilter() {
      alert('搜索')
    },
    handleCreate() {
      alert('添加')
    }
  }
}
</script>

<style scoped>

</style>