PointsMall_Admin/src/views/order/orderRefundList.vue

<template>
  <div class="article-manager">
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
      <div>
        <el-form :model="page" label-width="80px" label-position="right" inline @submit.native.prevent class="mt16">
          <el-form-item label="订单编号：">
            <el-input clearable placeholder="订单编号/商品货号" v-model="page.params.orderCode" />
          </el-form-item>

          <el-form-item label="申请时间：">
            <el-date-picker v-model="page.params.refundTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
          <el-form-item label="处理状态：">
            <el-select v-model="page.params.refundStatus" placeholder="状态" clearable @keyup.enter.native="getList">
              <el-option label="待处理" value="0" />
              <el-option label="已处理" value="1" />
              <el-option label="已拒绝" value="-1" />
            </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.takeSiteName }}</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.acctId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退款积分" min-width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.refundIntegral }}</span>
          </template>
        </el-table-column>

        <el-table-column label="申请状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.refundStatus | refundStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理时间" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.refundOptTime || '暂无' }}</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="auth(scope.row, scope)" type="text" v-if="scope.row.refundStatus == '0'">审核</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="refundDetailDialog" direction="ltr" size="70%">
        <orderRefundListDetail :detailData="detailData" @closeDialog="closeDialog" v-if="refundDetailDialog" />
      </el-drawer>

      <el-dialog title="审核" :visible.sync="verifyDialog" v-el-drag-dialog width="45%">
        <orderRefundListVerify @getList="getList" @closeDialog="closeDialog" v-if="verifyDialog" :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 orderRefundListDetail from './orderRefundListDetail'
import orderRefundListVerify from './orderRefundListVerify'
export default {
  name: 'product_productList',
  components: { orderRefundListDetail, orderRefundListVerify },

  filters: {
    refundStatus(e) {
      switch (e) {
        // 0待审核 1 审核通过-1 审核不通过
        case '0':
          return '待审核'
        case '1':
          return '审核通过'
        case '-1':
          return '审核不通过'
        default:
          return '暂无'
      }
    }
  },
  data() {
    return {
      template: false,
      refundDetailDialog: false,
      verifyDialog: 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: [],
      loading: false,
      data: [],
      total: 0,
      ids: [],
      goodsId: '',
      isProductBox: false,
      multipleSelection: [],
      detailData: {} //详情对象
    }
  },
  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
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },

    // 订单列表；
    getList() {
      orderInfoApi.getRefundOrder(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.verifyDialog = false
      this.refundDetailDialog = false
    },
    // 数据导出；
    exportData: function() {},

    // 详情
    detail(row) {
      orderInfoApi.getRefund(row.id).then(res => {
        if ((res.code = 20000)) {
          this.detailData = res.data
          this.refundDetailDialog = true
        }
      })
    },
    // 取消
    auth(row, tit, num) {
      // orderInfoApi.get(row.id).then(res => {
      //   if ((res.code = 20000)) {
      this.detailData = row
      this.verifyDialog = 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>