自用-前端分页

<template>
  <section>
    <div class="main">
      <section class="operation search-box">
        <div class="flex">
	<el-select v-model="date_type" size="small" class="mr15">
						<el-option v-for="item in dateTypeOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
					</el-select>
          <!-- <span class="label mr15">来源时间</span> -->
          <el-date-picker v-model="timeRange" size="small" class="mr15" type="daterange" :editable="false" :picker-options="pickerOptions" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>

					<span class="label mr15">部门</span>
					<el-select v-model="searchSelfVisit" size="small" class="mr15">
            <div v-for="(item,index) in shuju1" :key="index">
						<el-option  v-for="(i,index) in item" :key="index" :value="index" :label="i" :change="change()"></el-option>
            </div>
					</el-select>

         <span class="label mr15">信息来源：</span>
          <el-select v-model="searchDepartment" size="small" class="mr15">
              <el-option v-for="item in searchDepartmentOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>

        </div>

        <el-button type="primary" size="small" class="mb10" @click="searchCustomer">开始筛选</el-button>
	     	<el-button type="primary" size="small" class="orange mr15 mb10" @click="importList">导 出</el-button>

      </section>

      <el-table :data="sgData"
       class="jdefalue-table border-b"
       @cell-click="show" v-loading="isloading" :span-method="objectSpanMethod" element-loading-text="加载中" element-loading-custom-class="jloading">
        <el-table-column label="所属区域" align="center" width="150" prop="group_name"></el-table-column>
        <el-table-column prop="name" label="名字" width="150" align="center"></el-table-column>
        <el-table-column prop="1" label="已做其他品牌"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="2" label="自己做"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="3" label="品牌不认可"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="4" label="距离太近"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="5" label="消防问题"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="6" label="资金问题"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="7" label="有酒店管理经验" min-width="150" align="center"></el-table-column>
        <el-table-column prop="8" label="房屋建设中"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="9" label="房屋不合适" min-width="100" align="center"></el-table-column>
        <el-table-column prop="10" label="不做了" min-width="100" align="center"></el-table-column>
        <el-table-column prop="11" label="意向不错" min-width="100" align="center"></el-table-column>
        <el-table-column prop="12" label="保持沟通" min-width="100" align="center"></el-table-column>
        <el-table-column prop="13" label="为落实房子" min-width="100" align="center"></el-table-column>
        <el-table-column prop="14" label="出租和地皮未启动" min-width="150" align="center"></el-table-column>
        <el-table-column prop="15" label="房东问题" min-width="100" align="center"></el-table-column>
        <el-table-column
          prop="16"
          label="年底启动未到项目期"
           min-width="150" 
           align="center"
        ></el-table-column>
        <el-table-column prop="17" label="老店影响"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="18" label="意向不明"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="19" label="物业谈判中"  min-width="100" align="center"></el-table-column>
        <el-table-column prop="20" label="品牌在当地做不好" min-width="150" align="center"></el-table-column>
        <el-table-column prop="21" label="需要考虑" min-width="100" align="center"></el-table-column>
        <el-table-column prop="22" label="位置不合适" min-width="100" align="center"></el-table-column>
        <el-table-column prop="23" label="房屋未租赁" min-width="100" align="center"></el-table-column>
        <el-table-column prop="24" label="拒接" min-width="100" align="center"></el-table-column>
        <el-table-column prop="25" label="合伙人较多" min-width="100" align="center"></el-table-column>
        <el-table-column prop="26" label="商量中" min-width="100" align="center"></el-table-column>
        <el-table-column prop="27" label="费用太高" min-width="100" align="center"></el-table-column>
        <el-table-column prop="sum" label="合计" min-width="100" align="center"></el-table-column>
      </el-table>

<!-- 弹框表单 -->
      <el-dialog title="信息详情" :visible.sync="dialogTableVisible" width="70%">

          <el-table :data="jiekou3">
          <el-table-column v-if="date_type === 1" width="200" property="sourced_at" label="来源时间" align="center" ></el-table-column>
          <el-table-column v-else width="200" property="sourced_at" label="首次已考察时间" align="center" ></el-table-column>
          <el-table-column width="215" property="customer_name" label="客户姓名" align="center" ></el-table-column>
          <el-table-column width="180" property="phone_number" label="客户电话" align="center"></el-table-column>
          <el-table-column width="180" property="channel_name" label="来源渠道" align="center"></el-table-column>
          <el-table-column width="180" property="name" label="客户状态" align="center"></el-table-column>
          <el-table-column width="180" property="desc" label="未签约原因" align="center"></el-table-column>  

          </el-table>

          <el-pagination
            @current-change="windowsclick"
            background
            current-page.sync
            :page-size="windowsNum"
            layout="total,prev, pager, next"
            :total="zsTOTAL1">
           </el-pagination>

       </el-dialog>

      <el-pagination
        @current-change="handleCurrentChange"
        background
        :page-size="everypageNum"
        layout="total,prev, pager, next"
        :total="zsTOTAL">
      </el-pagination>

    </div>
  </section>
</template>

<script>
//未签约统计的  参数  统计   详情  以及导出
import {Statisticalsigningparameter , Statisticalsigning , Statisticalsigningparticulars,Statisticalsigningexport} from '../../api/index.js'  
export default {
  data () {
    return {
      //搜索条件
      timeRange: [new Date(new Date().getTime() - 3600 * 1000 * 24 * 30), new Date()],
      dateTypeOptions:[{id:1,label:'来源时间'},{id:2,label:'首次已考察时间'}],
      searchDepartment: '全部',
      searchDepartmentOptions: [{id: '全部',label: '全部'},{id: '公司信息',label: '公司信息'}, {id: '自建信息',label: '自建信息'}],

      date_type:1,//时间区间类型
      dialogTableVisible: false,

      searchSelfVisit: '请选择',
      searchSelfVisit2: 'person',
      isloading: false,
      //表格数据
      tableData: [],
      //分页
      // currentPage: 1,
      // total: 46,
      // pageSize: 15,
      branch_id:'', //部门id
      user_id:'',//用户id
      property:'', //未签约状态
      shuju1:[],
      shuju2:[],
      shuju3:[],
      jiekou1:'',
      jiekou3:'',
      spanArr:[],
      row11:'',   //无用row


       sgData:[], //表格中的数据
      resData: [], //请求返回的数据
      shData:[],
      zsTOTAL : 0, //总共有多少条数据
      pageVal :1, //默认显示第一页
      everypageNum :12,  //每一页显示多少条


      //弹出框部分分页
      zsTOTAL1 : 0, //总共多少条数据
      windowsNum:12,  //每一页显示多少条
      windowsPage:1   //默认显示第一页
    }
  },
  computed: {
    pickerOptions () {
      //时间段设置
      return this.$store.state.b.pickerOptions
    }
  },
  created(){
    this.ceshi()
   
  },
  mounted () {

    // let search = {
    //   'date-end': "2021-10-08",
    //   'date-start': "2021-06-08",
    //   'department': "0",
    //   }
    // this.refreshTableData(search)   

  },
  
  methods: {
  ceshi(){
    this.isloading = true
    Statisticalsigningparameter().then(response => {    //第一次请求的数据
      this.isloading = false       
      console.log(response);
				this.jiekou1 = response.info.data
         let obj = this.jiekou1
         Object.keys(obj).forEach((v)=>{
            let ob ={}
            ob[v] = obj[v]
            this.shuju1.push(ob)  
        })
		})
 
  },

  change(){
    this.branch_id = this.searchSelfVisit

  },
 //表格单元格合并相关,prop传入要合并的字段名字
 rowspan(list , prop) {
      var spanArr = []
      var position = 0
      list.forEach((item, index) => {
       if (index === 0) {
            spanArr.push(1)
           position = 0
       } else {
         if (list[index][prop] === list[index - 1][prop]) {
              spanArr[position] += 1 //有相同项
               spanArr.push(0) // 名称相同后往数组里面加一项0
             } else {
               spanArr.push(1) //同列的前后两行单元格不相同
               position = index
            }
                }
            })
            return spanArr
        },  
 // 合并单元格
    objectSpanMethod({ row, rowIndex, columnIndex }) {
      //  console.log(row);
      this.row11 =row
       const _row = this.spandata[rowIndex]
       const _col = _row > 0 ? 1 : 0
       if (columnIndex === 0) {
           return {
            rowspan: _row,
            colspan: _col
           }
       }
    },

    //点击表格方法
    show(row,column,event){
      this.windowsPage = 1
      let _this = this
      let proid =  column.property  
      this.property = proid//获取当前格子的id签约状态
      this.user_id = row.uid       //获得用户id
          
      let text = event.innerText
      this.zsTOTAL1 = parseInt(text)

      if(text>0){  
      _this.isloading = true 

      let async3 = this.searchCondition3()
      Statisticalsigningparticulars(async3).then(response => {     
        _this.jiekou3 = response.info.data          
        _this.isloading = false  
        _this.dialogTableVisible = true
     })
      }else{
        alert("当前无信息可查！")
      }
      
    },

    tableSizeChange (val) {
      this.pageSize = val
      let param = this.searchCondition()
      this.refreshTableData(param)
    },
    // table数据  页数1 2 3 4
    tablePageChange (val) {
      console.log('val====>' + val);
      this.currentPage = val
      let param = this.searchCondition()
      console.log(param);
      this.refreshTableData(param)
    },
    //查询条件--提交到后台,t1  t2为时间条件  第二次请求所用的数据
    searchCondition () {
      let [t1, t2] = [this.timeRange[0], this.timeRange[1]]
      let search = {
        'date-start': this.transmitDay(t1), //开始时间
        'date-end': this.transmitDay(t2),  //结束时间
        'department':this.branch_id,      //部门
        'type':this.date_type,            //首次已考察时间
        'status':this.searchDepartment,      //部门

      }
      return search
    },
    searchCondition3 () {               //第三次请求用的数据
      let [t1, t2] = [this.timeRange[0], this.timeRange[1]]
      let search3 = {
        'date-start': this.transmitDay(t1), //开始时间
        'date-end': this.transmitDay(t2),   //结束时间
        'department':this.branch_id,        //部门id
        'user_id':this.user_id,             //用户id
        'page': this.pageVal,                //页码
        'page_num': this.everypageNum,         //每页条数
         'status' :this.property              //未签约状态   就是当前点击的某个格子
      }
      return search3
    },
    //格式化时间方法
    transmitDay (t) {
      let year = t.getFullYear()
      let month = t.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = t.getDate()
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + month + '-' + day
    },
    //查询
    searchCustomer () {  //不论查询还是初始化刷新表格  都要重新请求数据分页 和 合并单元格

    if(this.branch_id == '请选择'){
      alert('请选择部门后再筛选数据!')
    }else{
      let _this = this
      _this.isloading = true

      let async = _this.searchCondition()
      Statisticalsigning(async).then(response => {
        _this.total = response.info.data.length   
          let data = response.info.data
          let arr =[]
          for(var i in data){
            arr.push(data[i])
          }
        this.resData = arr  //这是得到的结果，数组中有n条数据
        let num = arr.length  //arr.length 为有多少条数据
        this.zsTOTAL = num
        this.sgData = arr.slice(this.pageVal-1,this.everypageNum) //当页面第一次加载进来，默认第一页数据
        _this.isloading = false  
        _this.spandata =  this.rowspan(response.info.data , 'group_name')

     })
    }
      

    },
    //刷新表格数据
    refreshTableData (search) {
      let _this = this
			this.isloading = true
    
      Statisticalsigning(search).then(response => {
          let data = response.info.data
          let arr =[]
          for(var i in data){
            arr.push(data[i])
          }
          this.resData = arr  //这是得到的结果，数组中有n条数据
          let num = arr.length  //arr.length 为有多少条数据
          this.zsTOTAL = num
          this.sgData = arr.slice(this.pageVal-1,this.everypageNum) //当页面第一次加载进来，默认第一页数据
 
          _this.isloading = false  
          _this.spandata =  this.rowspan(response.info.data , 'group_name')

      })
    },
    windowsclick(num){
      this.windowsPage = num
      let _this = this
      this.isloading = true
      let [t1, t2] = [this.timeRange[0], this.timeRange[1]]
      let search4 = {
        'date-start': this.transmitDay(t1), //开始时间
        'date-end': this.transmitDay(t2),   //结束时间
        'department':this.branch_id,        //部门id
        'user_id':this.user_id,             //用户id
        'page': this.windowsPage,                      //页码
        'page_num': this.windowsNum,         //每页条数
         'status' :this.property              //未签约状态   就是当前点击的某个格子
      }
      Statisticalsigningparticulars(search4).then(response => {     
          _this.jiekou3 = response.info.data                   
          _this.isloading = false  
          _this.dialogTableVisible = true
     })

    },
     handleCurrentChange(val) {
      this.pageVal = val; //此处为用户点击第几页
      if(val == 1){
        this.sgData = this.resData.slice(this.pageVal-1,this.everypageNum) //当页面第一次加载进来，默认第一页数据
        this.spandata =  this.rowspan(this.sgData , 'group_name')
      }else{

        // 1: 0,19  当用户点击第一页，那么就是前20条，对耶下标位置应为0至19
        //后面截取的位置
        var that =this
        let start = that.everypageNum*val-12
        let end = that.everypageNum*val 
        if(that.resData.length<= that.everypageNum){  //这种情况为只有20条或者20条以下数据的情况
            that.sgData = that.resData
            that.spandata =  that.rowspan(that.sgData , 'group_name')
        }else{  //这种情况为大于20条数据
          if(that.everypageNum*val>=that.resData.length){//用户点击的那一页是最后一页的数据，比如有49条数据，用户点击第3页，第二3就应该显示最后9条的数据
              that.sgData = that.resData.slice(start)
              that.spandata =  that.rowspan(that.sgData , 'group_name')
          }else{ //用户点击的那一页不是最后一页的数据，比如有49条数据，用户点击第二页，第二页就应该显示20至40条的数据
            that.sgData = that.resData.slice(start,end)
            that.spandata =  that.rowspan(that.sgData , 'group_name')
          }
        }
      }
      
      //当有7个 that.resData
      //当有21个  that.resData.slice(0,20)  that.resData.slice(20)
      //当有40， ...
      //当有47个  that.resData.slice(20,40)  that.resData.slice(40)
      //以此类推找规律
    },
		//导出
		importList() {
			const loading = this.$loading({
				lock: true,
				text: '导出中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			Statisticalsigningexport(this.searchCondition()).then(response => {
				//下载
				let blob = new Blob([response], { type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob)
				} else {
					const link = document.createElement('a')
					link.style.display = 'none'
					link.href = URL.createObjectURL(blob)
					link.download = '未签约统计.xls'
					document.body.appendChild(link)
					link.click()
					document.body.removeChild(link)
				}
				loading.close()
			})
		}
  }
}
</script>
<style scoped>
#table{
  margin: 0;
  padding: 0;
  
}
.main{
  position: relative;
}


el-table-column{
  border-bottom: 1px solid #ccc;
}
</style>