PointsMall_Admin/src/views/order/orderList.vue

<template>
  <div class="article-manager">
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16 " style="padding:20px !important" :body-style="{ padding: '0 20px 20px' }">
      <el-tabs v-model="type" @tab-click="onClickTab" type="card">
        <!-- <el-tab-pane :label="item.name + '(' + item.count + ')'" :name="item.type" v-for="(item, index) in headeNum" :key="index" /> -->
        <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum" :key="index" />
      </el-tabs>
      <div>
        <el-form :model="page" label-width="80px" label-position="right" inline @submit.native.prevent>
          <el-form-item label="订单编号：">
            <el-input clearable placeholder="订单编号/商品货号" v-model="page.params.orderCode" />
          </el-form-item>
          <el-form-item label="收货人：">
            <el-input clearable placeholder="手机号码" v-model="page.params.customerPhone" type="phone" />
          </el-form-item>
          <el-form-item label="下单时间：">
            <el-date-picker v-model="page.params.createTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
          <el-form-item label="选择油站：">
            <el-select
              v-model="page.params.takeSiteId"
              clearable
              filterable
              remote
              reserve-keyword
              placeholder="油站名称"
              :remote-method="siteRemoteMethod"
              @keyup.enter.native="getByPage"
            >
              <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userSearchs">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="Button">
        <el-button class="export" @click="toOutPut">导出</el-button>
      </div>
      <el-table
        :data="tableList"
        class="ivu-mt mt14"
        v-loading="loading"
        highlight-current-row
        :row-key="getRowKey"
        @selection-change="handleSelectRow"
        empty-text="暂无数据"
      >
        <el-table-column type="selection" width="60" :reserve-selection="true"> </el-table-column>
        <el-table-column label="订单编号" width="180" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.orderCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户账号" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.customerPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" min-width="60" align="center">
          <template slot-scope="scope">
            <span>¥ {{ scope.row.marketPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付积分" min-width="80" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.integral }}</span>
          </template>
        </el-table-column>
        <el-table-column label="自提油站" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.takeSiteName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.orderStatus | orderStatus }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" minWidth="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="detail(scope.row)">查看订单</el-button>
            <el-button @click="cancle(scope.row, scope)" type="text" v-if="scope.row.orderStatus == '1'">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalCount"
        />
      </div>

      <el-drawer title="详情" class="table-detail-drawer" :visible.sync="detailDialog" direction="ltr" size="70%">
        <orderListDetail :detailData="detailData" @closeDialog="closeDialog" v-if="detailDialog" />
      </el-drawer>
      <el-dialog title="取消订单" :visible.sync="cancleDialog" v-el-drag-dialog width="45%">
        <orderListCancle @getList="getList" @closeDialog="closeDialog" v-if="cancleDialog" :detailData="detailData" />
      </el-dialog>

      <!-- 导出弹窗 -->
      <el-dialog v-el-drag-dialog title="导出" :visible.sync="outPutDialog" width="20%">
        <el-form label-width="75px" size="small">
          <el-row>
            <el-col :span="24">
              <el-form-item label="导出方式">
                <el-select v-model="output.outputType" style="width: 100%">
                  <el-option label="easyExcel条件导出" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="output.outputType !== 4">
                <div style="color:red"></div>
              </el-form-item>
            </el-col>
            <el-col v-if="output.outputType === 3 || output.outputType === 4" :span="12">
              <el-form-item label="开始页">
                <el-input v-model="output.startPage" />
              </el-form-item>
            </el-col>
            <el-col v-if="output.outputType === 3 || output.outputType === 4" :span="12">
              <el-form-item label="结束页">
                <el-input v-model="output.endPage" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="outputData">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import orderInfoApi from '@/api/order/orderInfo.js'
import orderListDetail from './orderListDetail'
import orderListCancle from './orderListCancle'
export default {
  name: 'product_productList',
  components: { orderListDetail, orderListCancle },

  filters: {
    orderStatus(e) {
      switch (e) {
        case '0':
          return '已下单'
        case '1':
          return '待核销'
        case '2':
          return '已核销'
        case '-1':
          return '已取消'
        default:
          return '暂无'
      }
    }
  },
  data() {
    return {
      template: false,
      detailDialog: false,
      cancleDialog: false,
      batchModal: false,
      outPutDialog: false, // 导出弹窗
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      output: {
        outputType: 4, // 导出方式，1导出选中，2导出本页，3条件导出，4导出全部
        startPage: 1, // 导出开始页
        endPage: 1, // 导出结束页
        pageSize: 10 // 每页条数
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        params: {},
        totalCount: 0
      },
      type: '',
      tableList: [],
      headeNum: [
        {
          count: 2,
          name: '全部订单',
          type: null
        },
        {
          count: 40,
          name: '已下单',
          type: '1'
        },
        {
          count: 5,
          name: '已核销',
          type: '2'
        },

        {
          count: 1,
          name: '已取消',
          type: '-1'
        }
      ],
      loading: false,
      data: [],
      total: 0,
      ids: [],
      goodsId: '',
      isProductBox: false,
      multipleSelection: [],
      detailData: {}, //详情对象
      siteList: []
    }
  },
  created() {
    // delete this.page.params.orderStatus

    this.getList()
  },

  activated() {},
  methods: {
    closeLabel(label) {
      let index = this.dataLabel.indexOf(this.dataLabel.filter(d => d.id == label.id)[0])
      this.dataLabel.splice(index, 1)
    },
    toOutPut() {
      // 导出
      this.outPutDialog = true
    },
    // 导出
    formatJson(filterVal, jsonData) {
      // 处理数据
      console.log('filterVal：' + JSON.stringify(filterVal))
      console.log('jsonData：' + JSON.stringify(jsonData))
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j.indexOf('.') < 0) {
            return v[j]
          }
          const keyArr = j.split('.')
          let data = v[keyArr[0]]
          for (var i = 1; i < keyArr.length; i++) {
            if (data) {
              data = data[keyArr[i]]
            }
          }
          return data
        })
      )
    },
    async outputData() {
      // 导出数据
      if (this.output.startPage > this.output.endPage) {
        this.$message.error('开始页不能大于结束页！')
        return
      }
      let tmpData = []

      const endIndex = (parseInt(this.output.endPage) + 1 - parseInt(this.output.startPage)) * parseInt(this.output.pageSize)
      const searchParam = { ...this.page }
      searchParam.pageSize = endIndex
      searchParam.currentPage = this.output.startPage
      orderInfoApi.exportExcel(searchParam).then(res => {
        const link = document.createElement('a')
        // 创建Blob对象，设置文件类型
        const blob = new Blob([res], { type: 'application/vnd.ns-excel' }) // MIME类型
        link.href = URL.createObjectURL(blob) // 创建URL
        link.setAttribute('download', decodeURI(Date.now() + '.xlsx')) // 设置下载文件名称
        link.click() // 下载文件
        document.body.appendChild(link)
        console.timeEnd()
        this.$message.success('导出成功')
        URL.revokeObjectURL(link.href) // 释放内存
      })

      import('@/vendor/Export2Excel').then(excel => {
        const data = this.formatJson(this.valColumn, tmpData)
        excel.export_json_to_excel({
          header: this.headers,
          data: data,
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },

    getRowKey(row) {
      return row.id
    },
    //  选中某一行
    handleSelectRow(selection) {
      const uniqueArr = []
      const ids = []
      for (let i = 0; i < selection.length; i++) {
        const item = selection[i]
        if (!ids.includes(item.id)) {
          uniqueArr.push(item)
          ids.push(item.id)
        }
      }
      this.ids = ids
      this.multipleSelection = uniqueArr
    },

    // tab选择
    onClickTab(e) {
      console.log(e)
      this.page.params.orderStatus = e.name
      this.page.currentPag = 1
      this.multipleSelection = []
      // this.$refs.table.clearSelection()
      this.getList()
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    siteRemoteMethod(value) {
      // 远程搜索油站
      if (value) {
        orderInfoApi.getIntegralSite(value).then(res => {
          this.siteList = res.data
        })
      }
    },
    // 订单列表；
    getList() {
      orderInfoApi.getByPage(this.page).then(res => {
        if ((res.code = 20000)) ({ list: this.tableList = [], totalCount: this.page.totalCount = 0 } = res.data)
      })
    },
    // 表格搜索
    userSearchs() {
      this.page.currentPage = 1
      this.getList()
    },
    closeDialog() {
      this.cancleDialog = false
      this.detailDialog = false
    },
    // 数据导出；
    exportData: function() {},

    // 详情
    detail(row) {
      orderInfoApi.get(row.id).then(res => {
        if ((res.code = 20000)) {
          this.detailData = res.data
          this.detailDialog = true
        }
      })
    },
    // 取消
    cancle(row, tit, num) {
      // orderInfoApi.get(row.id).then(res => {
      //   if ((res.code = 20000)) {
      this.detailData = row
      this.cancleDialog = true
      console.log(row)
      // }
      // })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  height: 54px !important;
  line-height: 54px !important;
}
::v-deep .ivu-modal-mask {
  z-index: 999 !important;
}

::v-deep .ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  ::v-deep .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.batch-box {
  ::v-deep .ivu-modal-body {
    overflow: auto;
    min-height: 350px;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
}

::v-deep .happy-scroll-content {
  width: 100%;

  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }
}

.labelInput {
  border: 1px solid #dcdee2;
  width: 100%;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--prev-color-primary);
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu__item {
  a {
    color: #606266;
  }
}
.label_width {
  width: 400px;
}
</style>