ohplay_system/src/views/order/list/index.vue

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <el-form-item label="订单编号:">
        <el-input v-model="form.orderCode" placeholder="请输入订单编号" clearable />
      </el-form-item>
      <el-form-item label="用户账号:">
        <el-input v-model="form.userName" placeholder="请输入用户账户" clearable />
      </el-form-item>
      <el-form-item label="用户手机号:">
        <el-input type="number" v-model.number="form.phone" placeholder="请输入用户手机号" clearable />
      </el-form-item>
      <!-- 流量订单 -->
      <span v-if="form.searchType === '2'">
        <el-form-item label="SIM卡号:">
          <el-input v-model="form.simCode" placeholder="请输入SIM卡号" clearable />
        </el-form-item>
        <el-form-item label="生效状态">
          <el-select v-model="form.flowStatus" placeholder="请选择生效状态">
            <el-option v-for="item in flowOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
      </span>
      <!-- 除充值订单 -->
      <span v-if="form.searchType !== '3'">
        <el-form-item label="商品ID:">
          <el-input v-model="form.goodsid" placeholder="请输入商品ID" />
        </el-form-item>
        <el-form-item label="商品名称:">
          <el-input v-model="form.goodsName" placeholder="请输入商品名称" />
        </el-form-item>
      </span>
      <el-form-item label="操作系统" v-else>
        <el-select v-model="form.platform" placeholder="请选择操作系统">
          <el-option v-for="item in systemOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <!-- 会员订单 -->
      <el-form-item v-if="form.searchType === '4'" label="资源平台:">
        <el-select v-model="form.platformId" placeholder="请选择资源平台">
          <el-option v-for="item in platformIdOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付状态:">
        <el-select v-model="form.status" placeholder="请选择订单状态">
          <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式:">
        <el-select v-model="form.payType" placeholder="请选择支付方式">
          <el-option v-for="item in payOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间:">
        <el-date-picker v-model="form.listDate" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" icon="el-icon-download" @click="handleExport"
          v-hasPermi="['order:list:export']">导出</el-button>
        <el-button type="primary" @click="getDialog" v-hasPermi="['order:list:export']">查看</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="订单编号" prop="orderCode" key="orderCode" align="center" />
      <el-table-column v-if="form.searchType === '2'" label="第三方订单编号" key="thirdOrderId" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.thirdOrderId | empty(scope.row.thirdOrderId) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品ID" prop="goodsid" key="goodsid" align="center" />
      <el-table-column label="商品名称" prop="goodsName" key="goodsName" align="center" show-overflow-tooltip />
      <el-table-column label="订单金额 / 元" prop="amount" key="amount" align="center" :formatter="amountFormatter" />
      <el-table-column v-if="form.searchType === '2'" label="SIM卡号" prop="simCode" key="simCode" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.simCode | empty(scope.row.simCode) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="form.searchType === '1'" label="购买类型" prop="charging" key="charging" align="center"
        :formatter="chargingFormatter" />
      <el-table-column v-if="form.searchType === '3'" label="订单来源" prop="platform" key="platform" align="center"
        :formatter="platformFormatter" />
      <el-table-column v-if="form.searchType === '4'" label="栏目" prop="groupId" key="groupId" align="center"
        :formatter="groupFormatter" />
      <el-table-column v-if="form.searchType === '4'" label="服务时长" prop="expirationTime" key="expirationTime"
        align="center" :formatter="timeFormatter" />
      <el-table-column v-if="form.searchType === '4'" label="资源平台" prop="platformId" key="platformId" align="center"
        :formatter="platformIdFormatter" />
      <el-table-column label="下单时间" prop="createTime" key="createTime" align="center" />
      <el-table-column label="支付方式" prop="payType" key="payType" align="center" :formatter="payTypeFormatter" />
      <el-table-column label="支付状态" prop="status" key="status" align="center" :formatter="statusFormatter" />
      <el-table-column label="支付时间" prop="goodsUpdateTime" key="goodsUpdateTime" align="center" />
      <el-table-column label="用户账号" prop="userName" key="userName" align="center" />
      <el-table-column label="支付流水号" key="payId" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payId | empty(scope.row.payId) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="form.searchType === '2'" label="生效状态" prop="flowStatus" key="flowStatus" align="center"
        :formatter="flowFormatter" />
      <el-table-column v-if="form.searchType === '2'" label="生效时间" key="effectTime" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.effectTime | empty(scope.row.effectTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
      @pagination="getList" />
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="导出历史" width="1000px">
      <el-table :data="dialogTable" v-loading="dialogLoading">
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column label="任务ID" prop="msgId" align="center" />
        <el-table-column label="任务名称" prop="jobName" align="center" />
        <el-table-column label="任务类型" prop="jobType" align="center" />
        <el-table-column label="导出时间" prop="updateTime" align="center" />
        <el-table-column label="操作人" prop="useName" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="getDownLoad(scope.row)" :disabled="scope.row.status === 1">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="dialogTotal > 0" :total="dialogTotal" :page.sync="dialogForm.pageNum"
        :limit.sync="dialogForm.pageSize" @pagination="getDialogList" />
    </el-dialog>
  </div>
</template>

<script>
import { list, dialogList, download, downLoadHistory } from '@/api/order/list'
import { list as sceneList } from '@/api/operation/scene'
import { payTypeMixin, systemMixin, serviceTimeMixin } from '@/mixin/index'
export default {
  mixins: [payTypeMixin, systemMixin, serviceTimeMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      dialogLoading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10,
        searchType: this.$route.query.searchType
      },
      // 列表
      tableData: [],
      // 总数据
      total: 0,
      // 弹窗
      dialogVisible: false,
      // 弹窗表单
      dialogForm: {
        pageNum: 1,
        pageSize: 10,
        searchType: this.$route.query.searchType
      },
      // 弹窗列表
      dialogTable: [],
      // 历史数据
      dialogTotal: 0,
      // 支付方式
      payOptions: [{
        value: 1,
        label: '微信'
      }, {
        value: 2,
        label: '支付宝'
      }],
      // 支付状态
      statusOptions: [{
        value: 2,
        label: '支付成功'
      }, {
        value: 3,
        label: '支付失败'
      }],
      // 栏目
      sceneOptions: [],
      // 生效状态
      flowOptions: [{
        value: 0,
        label: '已生效'
      }, {
        value: 1,
        label: '待生效'
      }, {
        value: 2,
        label: '已失效'
      }],
      platformIdOptions: [{
        value: 6,
        label: 'QQ音乐'
      }, {
        value: 9,
        label: '酷狗音乐'
      }, {
        value: 10,
        label: '爱听音乐'
      }],
      // 时间搜索不超过1个月
      selectDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  mounted() {
    this.getScene()
    this.getList()
    this.payOptions.push(this.form.searchType === '3' ? {
      value: 3,
      label: '苹果支付'
    } : {
      value: 4,
      label: '猫币支付'
    })
  },
  methods: {
    // 列表
    getList() {
      this.loading = true
      list(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },

    // 搜索
    getSearch() {
      this.form.pageNum = 1
      this.getList()
    },

    // 重置
    getRefresh() {
      this.form = {
        pageNum: 1,
        pageSize: 10,
        searchType: this.$route.query.searchType
      }
      this.getList()
    },

    // 导出
    handleExport() {
      download(this.form).then(res => {
        if (res.code === 0) {
          this.$message.success(`${res.data}`)
        }
      })
    },

    // 弹窗
    getDialog() {
      this.dialogVisible = true
      this.getDialogList()
    },

    // 历史列表
    getDialogList() {
      this.dialogLoading = true
      dialogList(this.dialogForm).then(res => {
        if (res.code === 0) {
          this.dialogTable = res.data.records
          this.dialogTotal = res.data.total
          this.dialogLoading = false
        }
      })
    },

    // 历史下载
    getDownLoad(row) {
      this.$confirm(`是否下载${row.jobName}?`, '提示', {
        type: 'warning'
      }).then(() => {
        downLoadHistory(row.msgId).then(res => {
          if (res.code === 0) {
            this.$message.success('下载成功！')
            window.location.href = res.data
            this.getDialogList()
          }
        })
      }).catch(() => { })
    },

    // 栏目
    getScene() {
      sceneList().then(res => {
        if (res.code === 0) {
          res.data.map(i => {
            this.sceneOptions.push({
              value: i.id,
              label: i.name
            })
          })
        }
      })
    },

    // 字典翻译
    payTypeFormatter(row) {
      return this.selectDictLabel(this.payOptions, row.payType)
    },

    statusFormatter(row) {
      return this.selectDictLabel(this.statusOptions, row.status)
    },

    groupFormatter(row) {
      return row.groupId === null ? '-' : this.selectDictLabel(this.sceneOptions, row.groupId)
    },

    chargingFormatter(row) {
      return this.selectDictLabel(this.payTypeOptions, row.charging)
    },

    platformFormatter(row) {
      return this.selectDictLabel(this.systemOptions, row.platform)
    },

    platformIdFormatter(row) {
      return row.platformId === null ? '-' : this.selectDictLabel(this.platformIdOptions, row.platformId)
    },

    flowFormatter(row) {
      return row.flowStatus === null ? '-' : this.selectDictLabel(this.flowOptions, row.flowStatus)
    },

    amountFormatter(row) {
      return row.amount.toFixed(2)
    },
    
    timeFormatter(row) {
      return this.selectDictLabel(this.serviceTimeOptions, row.expirationTime)
    }
  },
  // 过滤器
  filters: {
    empty(row) {
      return !row ? '-' : row
    }
  }
}
</script>