admin_operation/src/views/orderList/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <!-- <el-row :gutter="20" style="marginBottom:20px">
          <el-col :span="8"  :xs="12"  :lg="8">
              <div>
                  <span class="textSpan">
                     订单号： 
                  </span>
                <el-input
                        v-model="body.orderId"
                        style="width: 70%;"
                        placeholder="请输入订单号"
                        size="small"
                        clearable
                    />
              </div>
          </el-col>
          <el-col :span="8"  :xs="12"  :lg="8">
              <div>
                  <span class="textSpan">
                     商户订单号: 
                  </span>
                <el-input
                        v-model="body.extorderId"
                        style="width: 70%;"
                        placeholder="请输入商户订单号"
                        size="small"
                        clearable
                    />
              </div>
          </el-col>
          <el-col :span="8"  :xs="12"  :lg="8">
              <div>
                  <span class="textSpan">
                     手机号码： 
                  </span>
                <el-input
                        v-model="body.usedMobile"
                        style="width: 70%;"
                        placeholder="请输入手机号码"
                        size="small"
                        clearable
                    />
              </div>
          </el-col>
      </el-row> -->
        <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.usedMobile"
                        style="width:65%;"
                        v-if="phone"
                        placeholder="请输入手机号"
                        size="small"
                        clearable
                    /> -->
                    <el-input
                      type="textarea"
                      v-model="body.usedMobile"
                      :autosize="{ minRows: 1.1, maxRows: 5}"
                      class="phone"
                      size="small"
                      placeholder="请输入内容"
                      clearable
                      >
                    </el-input>

            </div>
        </div>
        <div class="flex">
            <div class="w_date">
                <span class="textSpan">回调时间：</span>
                <el-date-picker
                v-model="checkTimeStart"
                size="small"
                type="datetimerange"
                range-separator="至"
                style="width:76%"
                 @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:77%"
                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.mobileOperator" 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">
                <span class="textSpan">　　面额：</span>
                 <el-input
                        v-model="flowAmount"
                         @change="changeflow"
                        style="width:65%;"
                        placeholder="请输入订单号"
                        size="small"
                        clearable
                    />
            </div>
             <div class="w_input">
                <span class="textSpan">　客户名称：</span>
                 <el-input
                        v-model="body.enterpriseIdDesc"
                        style="width: 65%;"
                        placeholder="请输入客户名称"
                        size="small"
                        clearable
                    />
            </div>
             <div class="w_input">
                <span class="textSpan">　归属地：</span>
                 <el-input
                        v-model="body.mobileHome"
                        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.dealFlag" 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>
          <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="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="客户名称"
        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="产品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.usedMobile }}</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.mobileOperator }}</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.mobileHome }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发送时间" width="160" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.limitedDate }}</span>
         </template>
      </el-table-column>
      <el-table-column label="回调时间" width="160" align="center">
         <template slot-scope="scope">
           <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 === 1" size="small">充值中</el-tag>
            <el-tag v-if="scope.row.status === 2" 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.dealFlag === '1'" size="small">成功</el-tag>
          <el-tag v-if="scope.row.dealFlag === '2'" 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.channelIdDesc }}</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>

     <!--分页-->
    <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:[],
      // tableData: [
      //   { orderId: '1618675202869450462',
      //     userName: 'test',
      //     extorderId: 'CD2104253953427952',
      //     usedMobile: '18820454014',
      //     applyDateStart: '2021-04-26 00:00:00',
      //     applyDateEnd: '2021-04-26 23:59:59',
      //     enterpriseIdDesc: '山东茶蛋信息技术有限公司',
      //     channelIdDesc: 'BF移动',
      //     status: '充值成功',
      //     mobileOperator: '移动',
      //     flowAmount: '10',
      //     checkTimeStart: '2021-04-25 00:39:53',
      //     checkTimeEnd: '2021-04-25 23:39:53',
      //     dealFlag: '已回调',
      //     mobileHome: '广东-茂名-移动' },
      //   { orderId: '1618675202869450462',
      //     userName: 'test',
      //     extorderId: 'CD2104253953427952',
      //     usedMobile: '18820454014',
      //     applyDateStart: '2021-04-26 00:00:00',
      //     applyDateEnd: '2021-04-26 23:59:59',
      //     enterpriseIdDesc: '山东茶蛋信息技术有限公司',
      //     channelIdDesc: 'BF移动',
      //     status: '充值成功',
      //     mobileOperator: '移动',
      //     flowAmount: '10',
      //     checkTimeStart: '2021-04-25 00:39:53',
      //     checkTimeEnd: '2021-04-25 23:39:53',
      //     dealFlag: '已回调',
      //     mobileHome: '广东-茂名-移动' },
      //   { orderId: '1618675202869450462',
      //     userName: 'test',
      //     extorderId: 'CD2104253953427952',
      //     usedMobile: '18820454014',
      //     applyDateStart: '2021-04-26 00:00:00',
      //     applyDateEnd: '2021-04-26 23:59:59',
      //     enterpriseIdDesc: '山东茶蛋信息技术有限公司',
      //     channelIdDesc: 'BF移动',
      //     status: '充值成功',
      //     mobileOperator: '移动',
      //     flowAmount: '10',
      //     checkTimeStart: '2021-04-25 00:39:53',
      //     checkTimeEnd: '2021-04-25 23:39:53',
      //     dealFlag: '已回调',
      //     mobileHome: '广东-茂名-移动' },
      //   { orderId: '1618675202869450462',
      //     userName: 'test',
      //     extorderId: 'CD2104253953427952',
      //     usedMobile: '18820454014',
      //     applyDateStart: '2021-04-26 00:00:00',
      //     applyDateEnd: '2021-04-26 23:59:59',
      //     enterpriseIdDesc: '山东茶蛋信息技术有限公司',
      //     channelIdDesc: 'BF移动',
      //     status: '充值成功',
      //     mobileOperator: '移动',
      //     flowAmount: '10',
      //     checkTimeStart: '2021-04-25 00:39:53',
      //     checkTimeEnd: '2021-04-25 23:39:53',
      //     dealFlag: '已回调',
      //     mobileHome: '广东-茂名-移动' }
      // ],
     applyDateStart:"",  //发送时间
     checkTimeStart:"",  //回调时间
     flowAmount:"",   //面额乘以10000
     body:{
          orderId:"",
          extorderId:"",
          usedMobile:"",
          applyDateStart:"",
          applyDateEnd:"",
          enterpriseIdDesc:"",
          channelIdDesc:"",
          status:"",
          mobileOperator:"",
          flowAmount:"",
          checkTimeStart:"",
          checkTimeEnd:"",
          dealFlag:"",
          mobileHome:"",
          page:1,
          size:10,
      },
      total:0,   //总数据
      loading:false,
      status:[
        {id:1,name:"待发"},
        {id:2,name:"已发"},
        {id:6,name:"成功"},
        {id:4,name:"失败"},
        {id:5,name:"风控"},
      ],
      mobileOperator:[
          {id:"YD",name:"移动"},
          {id:"LT",name:"联通"},
          {id:"DX",name:"电信"},
      ],
      dealFlag:[
        {id:"0",name:"运营商处理中"},
        {id:"1",name:"待回调"},
        {id:"3",name:"以回调"},
        {id:"2",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
          this.total=res.data.data.total
          console.log(res.data.data.records)
        })
    },
    //搜索手机号
    onphon(){
      console.log(this.phone)
    },
      //搜索面额
      changeflow(){
        let flow=this.flowAmount;
        // let body=this.body.flowAmount;
        this.body.flowAmount=flow * 10000;
      },
      //搜索发送时间
     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 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-right: 40px;
 }
 .phone{
   width:66.5% !important ;
   z-index: 100;
 }
 /* .classitem{
   background: salmon;
 } */
</style>