admin_operation/src/views/orderList/index.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">
                <span class="textSpan">客户订单号：</span>
                 <el-input
                        v-model="body.extorderId"
                        style="width: 65%;"
                        placeholder="请输入客户订单号"
                        size="small"
                        clearable
                    />
            </div>
             <div class="w_input stylephone">
                <div class="textSpan marginphone">通道订单号：</div>
                    <el-input
                        v-model="body.gwSeqNo"
                        style="width: 67%;"
                        placeholder="请输入通道订单号"
                        size="small"
                        clearable
                    />
            </div>
        </div>
        <div class="flex">
            <div class="w_date">
                <span class="textSpan">回调时间：</span>
                <el-date-picker
                v-model="callbackTimeEnd"
                size="small"
                type="datetimerange"
                range-separator="至"
                style="width:78%"
                 @change="oncheckTimeStart"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time='["00:00:00","23:59:59"]'
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                >
                </el-date-picker>

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

            </div>
            
        </div>
          <div class="flex">
            <div class="w_input">
                <span class="textSpan">通道名称：</span>
                 <el-input
                        v-model="body.channelIdDesc"
                        style="width:65%;"
                        placeholder="请输入通道名称"
                        size="small"
                        clearable
                    />
            </div>
             <div class="w_input">
                <span class="textSpan">　订单状态：</span>
                <el-select size="small" v-model="body.status" 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-select size="small" v-model="body.phoneOperator" 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_input">
              <!-- <el-col :span="5"> -->
                <span class="textSpan">　　面额：</span>
              <!-- </el-col> -->
                
                 <!-- <el-input
                        v-model="flowAmount"
                        @change="changeflow"
                        style="width:65%;"
                        placeholder="请输入面额"
                        size="small"
                        clearable
                    /> -->
                    <!-- <el-col :span="6"> -->
                      <el-input
                        v-model="flowAmount"
                        @clear="changeflow(flowAmount)"
                        style="width:26%"
                        placeholder="请输入面额"
                        size="small"
                        clearable
                    />
                    <span>　-　</span>
                      <el-input
                        v-model="flowAmount1"
                         @clear="changeflow1(flowAmount)"
                        style="width:26%"
                        placeholder="请输入面额"
                        size="small"
                        clearable
                    />
            </div>
             <div class="w_input">
                <span class="textSpan">　客户名称：</span>
                 <el-input
                        v-model="body.customerName"
                        style="width: 65%;"
                        placeholder="请输入客户名称"
                        size="small"
                        clearable
                    />
            </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">回调状态：</span>
                <el-select size="small" v-model="body.callbackStatus" clearable placeholder="请选择订单状态" style="width: 65%" @change="changeScope">
                <el-option
                v-for="item in dealFlag"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                />
            </el-select>
            </div>
             <div class="w_input stylephone">
                <div class="textSpan marginphone">　　手机号：</div>
                    <el-input
                      type="textarea"
                      v-model="body.phoneNo"
                      :autosize="{ minRows: 1.1, maxRows: 5}"
                      class="phone"
                      size="small"
                      placeholder="请输入手机号"
                      clearable
                      >
                    </el-input>

            </div>
        </div>
          <div class="flexend">
            <el-button class="filter-item" type="info" icon="el-icon-edit"  plain @click="handleReset">置重发
            </el-button>
            <el-button class="filter-item" type="warning" icon="el-icon-message" plain @click="handleReset">置回调
            </el-button>
           
            <el-button class="filter-item" icon="el-icon-delete" type="danger" plain @click="handleReset">置失败
            </el-button>
            <el-button class="filter-item" type="warning" icon="el-icon-check" plain @click="handleReset">置成功
            </el-button>
            <el-button class="filter-item" type="success" icon="el-icon-check" plain @click="handleReset">补单
            </el-button>
            
             <el-button class="classitem" style="marginRight:50px"  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 type="selection" width="40"/>

      <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="appID"
          width="100"
          align="center"
          prop="createTime"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.appId }}</span>
          </template>
        </el-table-column> -->
      <el-table-column
        label="客户名称"
        width="100"
        align="center"
        prop="createTime"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="面额"
        width="70"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.flowAmount / 10000 }}</span>
        </template>
      </el-table-column>
      <el-table-column
      label="产品ID"
        width="100"
        align="center"
        prop="createTime"
        show-overflow-tooltip
      >
         <template slot-scope="scope">
           <span>{{scope.row.packageId}}</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="运营商"
        width="70"
        align="center"
        prop="createTime"
        show-overflow-tooltip
       >
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.phoneOperator }}</span> -->
          <el-tag v-if="scope.row.phoneOperator === 2" size="small">电信</el-tag>
            <el-tag v-if="scope.row.phoneOperator === 1" size="small">移动</el-tag>
            <el-tag v-if="scope.row.phoneOperator === 3" size="small">联通</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="归属地"
        width="100"
        align="center"
        prop="createTime"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.phoneHome }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发送时间" width="170" align="center" show-overflow-tooltip> 
         <template slot-scope="scope">
            <i class="el-icon-time"></i>
           <span>{{ scope.row.limitedDate }}</span>
         </template>
      </el-table-column>
      <el-table-column label="回调时间" width="170" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
            <i v-if="scope.row.lastModifyDate" class="el-icon-time"></i>
           <span>{{ scope.row.lastModifyDate }}</span>
         </template>
      </el-table-column>
        <el-table-column
          label="订单状态"
          width="90"
          align="center"
          prop="createTime"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 2" size="small">充值中</el-tag>
            <el-tag v-if="scope.row.status === 1" size="small">待充值</el-tag>
            <!-- <el-tag v-if="scope.row.status === 3" size="small">重发</el-tag> -->
            <el-tag v-if="scope.row.status === 4" size="small" >充值失败</el-tag>
            <!-- <el-tag v-if="scope.row.status === 5" size="small">回调</el-tag> -->
            <el-tag v-if="scope.row.status === 6" size="small">充值成功</el-tag>
          </template> 
        </el-table-column>

        <el-table-column
        label="用时"
        width="90"
        align="center"
        prop="createTime"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.usedTime }}</span>
        </template>
      </el-table-column>
           <el-table-column
        label="回调状态"
        width="90"
        align="center"
        prop="createTime"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.dealFlag }}</span> -->
          <el-tag v-if="scope.row.callbackStatus === 6" size="small">成功</el-tag>
          <el-tag v-if="scope.row.callbackStatus === 4" size="small">失败</el-tag>
        </template> 
      </el-table-column>
       
      <el-table-column
        label="通道名称"
        width="90"
        align="center"
        prop="createTime"
        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.extorderId }}</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.gwStatus }}</span>
        </template>
      </el-table-column>   
        
    </el-table>

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

<script>
import { ordersearch } from '@/api/orderList'
export default {
  data() {
    return {
      Name: '',
      // phone:true,    //控制批量手机号
      tableData:[],
     applyDateStart:"",  //发送时间
     callbackTimeEnd:"",  //回调时间
     flowAmount:"",   //面额乘以10000
     flowAmount1:"",   //面额乘以10000
     body:{
          Id:"",
          gwSeqNo:"",
          orderId:"",
          extorderId:"",
          phoneNo:"",
          applyDateStart:"",
          applyDateEnd:"",
          customerName:"",
          channelIdDesc:"",
          phoneHome:"",
          status:"",
          phoneOperator:"",
          flowAmount:"",
          callbackTimeStart:"",
          callbackTimeEnd:"",
          callbackStatus:"",
          mobileHome:"",
          page:1,
          size:10,
      },
      total:0,   //总数据
      loading:false,
      status:[
        {id:1,name:"待发"},
        {id:2,name:"充值中"},
        {id:6,name:"成功"},
        {id:4,name:"失败"},
      ],
      mobileOperator:[
          {id:1,name:"移动"},
          {id:3,name:"联通"},
          {id:2,name:"电信"},
      ],
      dealFlag:[
        {id:"6",name:"成功"},        
        {id:"4",name:"失败"},
      ]
    }
  },
  created(){
      let nowDate = new Date()
  let date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate()
  }
  let 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.applyDateStart = systemTime + " 00:00:00"
  this.body.applyDateEnd = systemTime + " 23:59:59"
  // this.body.applyDateEnd = systemTime + " 23:59:59"
  // this.
  this.getTenantList()
  },
  methods: {
    //获取数据
    getTenantList(){
      this.loading=true
        ordersearch(this.body).then(res=>{
          this.loading=false
          // this.tableData=res.data.data.records
          // limitedDate ：发送时间
          // lastModifyDate ：回调
          // usedTime   ：用时
          let tableData=res.data.data.records
          let arry=tableData.map((res)=>{
             if(res.lastModifyDate != null && res.lastModifyDate != ""){
                let limitedDate = res.limitedDate
                let lastModifyDate =res.lastModifyDate
                 //发送时间 减去  回调时间
                 let date = new Date(limitedDate)
                 let time= date.valueOf()
                 let modify =new Date(lastModifyDate)
                 let last = modify.valueOf()
                 let  used = last - time
                res.usedTime = used / 1000
             }
             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(flow){
        this.flowAmount = ""

      },
      //清除面额
      changeflow1(flow){
        this.flowAmount1 = ""

      },
      //搜索发送时间
     oncustom(){
          let applyDateStart = this.applyDateStart;
          this.body.applyDateStart = applyDateStart[0]
          this.body.applyDateEnd = applyDateStart[1]
          // console.log(applyDateStart)
          // console.log(this.body.applyDateStart)
      },
      //搜索回调时间
      oncheckTimeStart(){
        // checkTimeStart:"",
        //   checkTimeEnd:"",
        let callbackTimeStart =this.callbackTimeEnd
        this.body.callbackTimeStart= callbackTimeStart[0]
          this.body.callbackTimeEnd	=callbackTimeStart[1]
      },
      //搜索状态
      changeScope(){
          console.log(this.body.status)
      },
      //运营商
      changeoperator(){
          console.log(this.body.mobileOperator)
      },
      //搜索
      handleSearch(){
        this.body.page = 1
        if(this.applyDateStart == null){ //发送时间为空时清空 body 里的发送时间
          this.body.applyDateEnd = ""
          this.body.applyDateStart = ""
        }
        if(this.callbackTimeEnd == null){ //回调时间
          this.body.callbackTimeStart = ""
          this.body.callbackTimeEnd = ""
        }
        //面额前后为空判断
        let flowAmount=this.flowAmount * 10000;
        let flowAmount1=this.flowAmount1 * 10000;
        if(this.flowAmount1 != "" && this.flowAmount != ""){   //面额
          this.body.flowAmount = flowAmount  + "-" + flowAmount1 
        }
       if(this.flowAmount == "" && this.flowAmount1 == ""){
          this.body.flowAmount = ""
          // console.log(this.body.flowAmount)
        }
        else if(this.flowAmount == ""){   //面额
          this.body.flowAmount = 0 + "-" + flowAmount1 
        }
        else if(this.flowAmount1 == ""){
          this.body.flowAmount = flowAmount + "-" + 10000000
        }
        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>