admin_operation/src/views/orderList/finance.vue

<template>
  <div class="app-container oderList">
    <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.phoneNo"
            type="textarea"
            :autosize="{ minRows: 1.1, maxRows: 5 }"
            class="phone"
            size="small"
            placeholder="请输入内容"
            clearable
          />
        </div>
        <!-- <div class="w_input stylephone">
          <div class="textSpan marginphone">通道订单号：</div>
          <el-input v-model="body.Id" 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%"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="oncheckTimeStart"
          />
        </div>
        <div class="w_date">
          <span class="textSpan">发送时间：</span>
          <el-date-picker
            v-model="applyDateStart"
            size="small"
            type="datetimerange"
            style="width: 79%"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="oncustom"
          />
        </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
            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-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_input">
          <span class="textSpan">　　面额：</span>
          <!-- <el-input
            v-model="flowAmount"
            style="width: 65%"
            placeholder="请输入订单号"
            size="small"
            clearable
            @change="changeflow"
          /> -->
           <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
            v-model="body.callbackStatus"
            size="small"
            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
                        v-model="body.gwSeqNo"
                        style="width: 67%;"
                        placeholder="请输入通道订单号"
                        size="small"
                        clearable
                    />
            </div>
      </div>
      <div class="flexend">
       
        <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>
    <div class="tag">
      <span
        class="money"
      >客户结算总价:</span>
      <span class="money_span">{{ sumPrice }}</span>
      <span
        class="money"
      >合作伙伴结算总价:</span>
      <span class="money_span">{{ sumPartnerPrice }}</span>
      <span
        class="money"
      >运营商结算总价:</span>
      <span class="money_span">{{ sumOperatorPrice }}</span>
    </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="70"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.flowAmount / 10000 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="客户价格" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>

      <el-table-column label="运营商价格" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.operatorBalancePrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="代理商价格" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.partnerBalancePrice }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="运营商"
        width="70"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
           <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="70"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.phoneHome }}</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="90"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.channelName }}</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="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="90"
        align="center"
        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="产品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="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>

    <!--分页-->
    <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: '',
      // phone:true,    //控制批量手机号
      tableData: [],
      applyDateStart: '', // 发送时间
      callbackTimeEnd: '', // 回调时间
      flowAmount: '', // 面额乘以10000
      flowAmount1: '', // 面额乘以10000
      body: {
        Id: '',
        orderId: '',
        extorderId: '',
        usedMobile: '',
        applyDateStart: '',
        applyDateEnd: '',
        enterpriseIdDesc: '',
        channelIdDesc: '',
        status: '',
        mobileOperator: '',
        flowAmount: '',
        checkTimeStart: '',
        checkTimeEnd: '',
        gwSeqNo: '',
        mobileHome: '',
        page: 1,
        size: 10
      },
      sumOperatorPrice: "",
    sumPartnerPrice: "",
    sumPrice: "",
      total: 0, // 总数据
    //   sum: 10100,
      loading: false,
      status: [
        { id: 1, name: '待发' },
        { id: 2, name: '已发' },
        { id: 6, name: '成功' },
        { id: 4, name: '失败' },
        { id: 5, name: '风控' }
      ],
      mobileOperator: [
          {id:1,name:"移动"},
          {id:3,name:"联通"},
          {id:2,name:"电信"},
      ],
      dealFlag: [
        { id: '6', name: '成功' },
        { id: '4', 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.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
      api.finance.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
        this.sumOperatorPrice = res.data.data.sumOperatorPrice
        this.sumPartnerPrice = res.data.data .sumPartnerPrice
        this.sumPrice = res.data.data .sumPrice
        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() {
      const applyDateStart = this.applyDateStart
      this.body.applyDateStart = applyDateStart[0]
      this.body.applyDateEnd = applyDateStart[1]
      // console.log(applyDateStart)
      // console.log(this.body.applyDateStart)
    },
    // 搜索回调时间
    oncheckTimeStart() {
      // checkTimeStart:"",
      //   checkTimeEnd:"",
      const checkTimeStart = this.callbackTimeEnd
      this.body.callbackTimeStart = checkTimeStart[0]
      this.body.callbackTimeEnd = 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.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;
}
.tag{
    margin-bottom: 20px;
}
.money {
  font-size: 14px;
  /* font-weight: 600; */
  color: rgb(87, 86, 86);
  position: relative;
  bottom: 2px;
}
.money_span{
    font-weight: 600;
    margin-right: 20px;
    font-weight: 500px;
    font-size: 20px;
    color:salmon

}
.phone {
  width: 66% !important ;
  z-index: 100;
}
/* .classitem{
   background: salmon;
 } */
</style>