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:180px;"
          placeholder="订单ID"
          clearable
          @input="e => (listQuery.orderId = checkedInput(e))"
          @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.clubName"
          style="width:180px;"
          placeholder="机构名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>收货人:</span>
        <el-input
          v-model="listQuery.receiver"
          style="width:180px;"
          placeholder="收货人"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>商品名称:</span>
        <el-input
          v-model="listQuery.productName"
          style="width:180px;"
          placeholder="商品名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>订单状态:</span>
        <el-select v-model="listQuery.status" style="width:180px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <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:180px;" 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:180px;" 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.payStatus" style="width:180px;" 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:180px;" 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-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 orderSource">
        <span>订单类型:</span>
        <el-select v-model="listQuery.orderType" style="width:180px;" @change="getList">
          <el-option label="所有" value="" />
          <el-option label="采购员订单" :value="0" />
          <el-option label="自主订单" :value="1" />
        </el-select>
      </div>
      <div class="filter-control orderSource">
        <span>订单来源:</span>
        <el-select v-model="listQuery.organizeId" style="width:180px;" @change="getList">
          <el-option label="【丽格集采联盟】平台" :value="4" />
        </el-select>
      </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="payTotalFee">
        <template slot-scope="{row}">
          {{ row.orderType === 1 ? '自主订单' : '采购员订单' }}
        </template>
      </el-table-column>
      <el-table-column label="机构" align="center" prop="clubName" />
      <el-table-column label="收货人" align="center" prop="receiver" width="100" />
      <!-- <el-table-column label="订单状态" align="center" prop="status" width="120">
        <template slot-scope="{row}">
          <template v-if="['11'].indexOf(row.status)>=0">
            <el-tag type="success" size="small">交易中</el-tag>
          </template>
          <template v-else>
            <el-tag :type="row.status*1===6?'info':''" size="small">{{ row.status | orderStatusFilter }}</el-tag>
          </template>
        </template>
      </el-table-column> -->
      <el-table-column label="收款状态" align="center" prop="receiptStatus" width="120">
        <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" width="120">
        <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" width="120">
        <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" width="120">
        <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="payTotalFee">
        <template slot-scope="{row}">
          ¥{{ row.payTotalFee | toThousandFloatFilter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="下单时间" prop="orderTime" width="100">
        <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" width="120">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleDetailes(row.orderId)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>10" :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 pickerOptions from '@/utils/time-picker.js'
import Remarks from './components/remarks'
export default {
  components: { Remarks },
  data() {
    return {
      time: '',
      pickerOptions,
      list: null,
      listLoading: true,
      total: 0,
      dialogRemarkList: [],
      dialogRemarksVisible: false,
      dialogRemarksOrderId: 0,
      listQuery: {
        index: 1,
        pageSize: 10,
        orderType: '',
        organizeId: 4,
        orderId: '',
        orderNo: '',
        buyer: '',
        receiver: '',
        status: '',
        receiptStatus: '',
        sendOutStatus: '',
        refundType: '',
        returnedPurchaseStatus: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  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
      this.initTime()
      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 }})
    },
    checkedInput(event) {
      const pattern = /[^0-9.]/g
      return event.replace(pattern, '')
    },
    RemarksOrder: function(id) {
      getRemarks({ orderID: id }).then(response => {
        this.dialogRemarkList = response.data
      })
      this.dialogRemarksOrderId = id
      this.dialogRemarksVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
  .el-form-item{
    margin-bottom: 0
  }
  .date-box{
    margin-right:0;
  }
  .orderSource {
    ::v-deep .el-select {
      width: 200px !important;
    }
  }
</style>