admin_operation/src/views/orderList/Distribute.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <div class="flex">
        <div class="w_input">
          <span class="textSpan">　订单号：</span>
          <el-input
            v-model="body.orderId"
            style="width:65%;"
            placeholder="请输入订单号"
            size="small"
            clearable
          />
        </div>
        <div class="w_input stylephone">
          <div class="textSpan marginphone">手机号：</div>
          <el-input
            v-model="body.phoneNo"
            type="textarea"
            :autosize="{ minRows: 1.1, maxRows: 5}"
            class="phone"
            size="small"
            placeholder="请输入内容"
            clearable
          />
        </div>
        <div class="w_input">
          <span class="textSpan">通道名称：</span>
          <el-input
            v-model="body.channelName"
            style="width:65%;"
            placeholder="请输入通道名称"
            size="small"
            clearable
          />
        </div>
      </div>
      <div class="flex">
        <div class="w_input">
          <span class="textSpan">订单状态：</span>
          <el-select v-model="body.status" size="small" clearable placeholder="请选择订单状态" style="width: 65%" @change="changeScope">
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="w_input">
          <span class="textSpan">　面额：</span>
          <el-input
            v-model="flowAmount"
            style="width:65%;"
            placeholder="请输入订单号"
            size="small"
            clearable
            @change="changeflow"
          />
        </div>
        <div class="w_input">
          <span class="textSpan">　归属地：</span>
          <el-input
            v-model="body.phoneHome"
            style="width: 65%;"
            placeholder="请选择归属地"
            size="small"
            clearable
          />
        </div>
      </div>
      <div class="flex">
        <div class="w_input">
          <span class="textSpan">分发ID号：</span>
          <el-input
            v-model="body.recId"
            style="width:65%;"
            placeholder="请输入订单号"
            size="small"
            clearable
          />
        </div>

         <div class="w_input">
          <span class="textSpan">运营商：</span>
          <el-select v-model="body.phoneOperator" size="small" clearable placeholder="请选择运营商" style="width: 65%" @change="changeoperator">
            <el-option
              v-for="item in mobileOperator"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>

      </div>
      <div class="flex">
        <div class="w_date" >
          <span class="textSpan">发送时间：</span>
          <el-date-picker
            v-model="applyDateStart"
            size="small"
            type="datetimerange"
            style="width:70%"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="[&quot;00:00:00&quot;,&quot;23:59:59&quot;]"
            start-placeholder="开始日期"
            end-placeholder="结束日期" 
            @change="oncustom"
            />

        </div>

      </div>
      <div class="flexend">
        <el-button class="classitem"  type="primary" plain icon="el-icon-star-off" @click="handleReset">导出
        </el-button>
        <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="handleSearch">搜索</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <el-table-column label="订单号" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="分发订单号" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.recId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="客户名称" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.customerName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号码" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.phoneNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="流量包ID" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.packageId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="运营商" width="70" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <!-- 运营商：1、移动 2、电信 3、联通 -->
          <span v-if="scope.row.phoneOperator==1">移动</span>
          <span v-if="scope.row.phoneOperator==2">电信</span>
          <span v-if="scope.row.phoneOperator==3">联通</span>
        </template>
      </el-table-column>

      <el-table-column label="归属地" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.phoneHome }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发送时间" width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createDate}}</span>
        </template>
      </el-table-column>

      <el-table-column label="回调时间" width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.callbackTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="分发组次数" width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sendCount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="通道组次数" width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.batchCount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发送状态" width="90" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sendStatus === 2" size="small">已发</el-tag>
          <el-tag v-if="scope.row.sendStatus === 4" size="small">失败</el-tag>
          <el-tag v-if="scope.row.sendStatus === 6" size="small">成功</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="通道名称" width="90" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.channelName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="通道订单号" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.gwSeqNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="通道错误代码" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.gwErrorCode }}</span>
        </template>
      </el-table-column>

      <el-table-column label="通道错误信息" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.gwErrorMsg }}</span>
        </template>
      </el-table-column>

      <el-table-column label="运营商订单号" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.operatorId }}</span>
        </template>
      </el-table-column>

    </el-table>

    <!--分页-->
    <div class="pagination">
      <el-pagination
        current-page.sync="body.page"
        :current-page="body.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import api from '@/api/orderList'
export default {
  data() {
    return {
      Name: '',
      tableData: [],
      applyDateStart: '', // 发送时间
      checkTimeStart: '', // 回调时间
      flowAmount: '', // 面额乘以10000
      body: {
        orderId: '',
        channelName:'',
        createDateEnd:'',
        createDateStart:'',
        flowAmount:'',
        phoneHome:'',
        phoneNo:'',
        phoneOperator:'',
        recId:'',
        sendStatus:'',
        page: 1,
        size: 10
      },
      total: 0, // 总数据
      loading: false,
      status: [
        { id: 2, name: '已发' },
        { id: 6, name: '成功' },
        { id: 4, name: '失败' },
      ],
      mobileOperator: [
        { id: 1, name: '移动' },
        { id: 3, name: '联通' },
        { id: 2, name: '电信' }
      ],
      dealFlag: [
        { id: '0', name: '运营商处理中' },
        { id: '1', name: '待回调' },
        { id: '3', name: '以回调' },
        { id: '2', name: '无需回调' }
      ]
    }
  },
  created() {
    const nowDate = new Date()
    const date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      date: nowDate.getDate()
    }
    const systemTime = date.year + '-' + date.month + '-' + date.date
    // this.body.applyDateStart = "2021-05-14 + " 00:00:00"
    this.applyDateStart = [systemTime + ' 00:00:00', systemTime + ' 23:59:59']
    this.body.createDateStart = systemTime + ' 00:00:00'
    this.body.createDateEnd = systemTime + ' 23:59:59'
    // this.body.applyDateEnd = systemTime + " 23:59:59"
    // this.
    this.getTenantList()
  },
  methods: {
    // 获取数据
    getTenantList() {
      this.loading = true
      api.dispatch.Search(this.body).then(res => {
        this.loading = false
        // this.tableData=res.data.data.records
        // limitedDate ：发送时间
        // lastModifyDate ：回调
        // usedTime   ：用时
        const tableData = res.data.data.records
        const arry = tableData.map((res) => {
          if (res.lastModifyDate != null && res.lastModifyDate != '') {
            const limitedDate = res.limitedDate
            const lastModifyDate = res.lastModifyDate
            // 发送时间 减去  回调时间
            const date = new Date(limitedDate)
            const time = date.valueOf()
            const modify = new Date(lastModifyDate)
            const last = modify.valueOf()
            const used = last - time
            res.usedTime = used
          }
          return res
        })
        this.tableData = arry
        console.log(arry)
        this.total = res.data.data.total
        console.log(res.data.data.records)
      })
    },
    // 搜索手机号
    onphon() {
      console.log(this.phone)
    },
    // 搜索面额
    changeflow() {
      const flow = this.flowAmount
      // let body=this.body.flowAmount;
      this.body.flowAmount = flow //* 10000
    },
    // 搜索发送时间
    oncustom() {
      const applyDateStart = this.applyDateStart
      this.body.createDateStart = applyDateStart[0]
      this.body.createDateEnd = applyDateStart[1]
      // console.log(applyDateStart)
      // console.log(this.body.applyDateStart)
    },
    // 搜索回调时间
    oncheckTimeStart() {
      // checkTimeStart:"",
      //   checkTimeEnd:"",
      const checkTimeStart = this.checkTimeStart
      this.body.checkTimeStart = checkTimeStart[0]
      this.body.checkTimeEnd = checkTimeStart[1]
    },
    // 搜索状态
    changeScope() {
      console.log(this.body.status)
    },
    // 运营商
    changeoperator() {
      console.log(this.body.mobileOperator)
    },
    // 搜索
    handleSearch() {
      console.log(this.applyDateStart)
      this.body.page = 1
      if (this.applyDateStart == null) { // 发送时间为空时清空 body 里的发送时间
        this.body.applyDateEnd = ''
        this.body.applyDateStart = ''
      }
      if (this.checkTimeStart == null) { // 回调时间
        this.body.checkTimeStart = ''
        this.body.checkTimeEnd = ''
      }
      if (this.flowAmount == null || this.flowAmount == 0) { // 面额
        this.body.flowAmount = ''
      }
      this.currentPage = '1'
      this.getTenantList()
    },
    //
    handleReset() {

    },
    // 分页
    handleSizeChange: function(val) {
      this.body.size = val
      this.getTenantList()
    },
    // 换页
    handleCurrentChange: function(val) {
      this.body.page = val
      this.getTenantList()
    }
  }
}
</script>

<style scoped>
 .textSpan{
   position: relative;
   top: 0;
     font-size: 14px;
     font-weight: 600;
     color:rgb(87, 86, 86)
 }
 .stylephone{
    display: flex;
 }
 .marginphone{
   padding-top: 9px;
 }
 .flex{
     width: 100%;
     display: flex;
     flex-direction: row;
     margin-bottom: 10px;
     /* flex-wrap: wrap; */
     /* justify-content: space-evenly; */
 }
 .w_date{
     width: 66%;
 }
 .w_input{
     width:33.33%;
 }
 .flexend{
   display: flex;
   justify-content: flex-end;
   padding-top:20px;
   padding-right: 40px;
 }
 .phone{
   width:66.5% !important ;
   z-index: 100;
 }
 /* .classitem{
   background: salmon;
 } */
</style>