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

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>订单ID:</span>
        <el-input v-model="listQuery.orderID" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>订单号:</span>
        <el-input v-model="listQuery.orderNo" style="width:180px;" placeholder="订单号" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input v-model="listQuery.buyer" placeholder="机构名称" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>收货人:</span>
        <el-input v-model="listQuery.receiver" style="width:120px;" placeholder="收货人" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>商品名称:</span>
        <el-input v-model="listQuery.receiver" placeholder="商品名称" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>订单状态:</span>
        <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <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>
      </div>
      <div class="filter-control">
        <span>收款状态:</span>
        <el-select v-model="listQuery.receiptStatus" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="待收款" value="1" />
          <el-option label="部分收款" value="2" />
          <el-option label="已收款" value="3" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>发货状态:</span>
        <el-select v-model="listQuery.sendOutStatus" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="待发货" value="1" />
          <el-option label="部分发货" value="2" />
          <el-option label="已发货" value="3" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>付款状态:</span>
        <el-select v-model="listQuery.sendOutStatus" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="待付款" value="1" />
          <el-option label="部分付款" value="2" />
          <el-option label="已付款" value="3" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>退款状态:</span>
        <el-select v-model="listQuery.refundType" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="无退款" value="0" />
          <el-option label="部分退款" value="1" />
          <el-option label="已退款" value="2" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>待审核退款:</span>
        <el-select v-model="listQuery.returnedPurchaseStatus" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="有" value="1" />
          <el-option label="无" value="0" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>待审核退款:</span>
        <el-select v-model="listQuery.returnedPurchaseStatus" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="协销订单" value="1" />
          <el-option label="自主订单" value="0" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>下单时间:</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
      </div>
    </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" width="65" />
      <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" width="150px">
        <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="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="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" width="65">
        <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" min-width="90">
        <template slot-scope="{row}">
          ¥{{ row.payTotalFee | toThousandFloatFilter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="下单时间" prop="orderTime" min-width="90">
        <template v-if="row.orderTime" slot-scope="{row}">
          <span>{{ row.orderTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleDetailes(row.orderID)">查看详情</el-button>
          <!-- <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="getList" />

    <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 pickerOptions from '@/utils/time-picker.js'
import Remarks from './components/remarks'
export default {
  components: { Pagination, Remarks },
  data() {
    return {
      time: '',
      pickerOptions,
      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: '',
        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.getList()
  },
  methods: {
    initTime() {
      // 初始化获取时间筛选值
      if (this.time && this.time.length > 0) {
        this.listQuery.startTime = this.time[0]
        this.listQuery.endTime = this.time[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
    },
    getList() {
      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
      })
    },
    // 查看订单详情
    handleDetailes(orderID) {
      this.$router.push({ path: '/order/detail', query: { orderID: orderID }})
    },
    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>