school-developer/src/views/recruit/recruitstudentsignup/contanctByUserStatic.vue

<template>
  <div class="mod-config">
    <basic-container>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="init()"  ref="searchForm">
        <el-form-item label="招生计划" prop="groupId">
          <el-select v-model="dataForm.groupId" filterable  placeholder="请选择招生计划" size="small" >
            <el-option
              v-for="item in planList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button  icon="el-icon-search" type="primary" size="small"
                      @click="handleFilter()">查询
          </el-button>
          <el-button icon="el-icon-delete" type="normal" plain size="small"
                     @click="resetForm('searchForm')">清空
          </el-button>

        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-button  icon="el-icon-download" type="warning" size="small" @click="dataExportHandle()">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="list"  border stripe  :span-method="objectSpanMethod" v-loading="dataListLoading"
                  :summary-method="getSummaries"  show-summary  :row-style="changeRowColor"
        >
          <el-table-column  align="center" header-align="center" prop="deptName" label="部门" />
          <el-table-column  align="center" header-align="center" prop="contantName" label="联系人" />
          <el-table-column  align="center" header-align="center" prop="peopleNum" label="招生人数" />
          <el-table-column  align="center" header-align="center" prop="czNum" label="初中生" />
          <el-table-column  align="center" header-align="center" prop="gzNum" label="高中生" />
          <el-table-column  align="center" header-align="center" prop="jzxNum" label="技职校" />
          <el-table-column  align="center" header-align="center" prop="allNum" label="高中+技职校" />
        </el-table>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {getContantByUserStatic} from "@/api/recruit/recruitstudentsignup";
import {list} from "@/api/recruit/recruitstudentplangroup";

export default {
  data() {
    return {
      dataForm: {groupId:""},
      list: [],
      planList:[],
      indexArray: [],
      dataListLoading: false,
    }
  },
  mounted() {
  },
  created () {
    this.init()
  },
  methods: {
    init(){
      let _this = this;
      list().then(data =>{
        _this.planList = data.data.data
        _this.dataForm.groupId=_this.planList[0].id;
        this.getDataList();
      });
    },
    getDataList(){
      this.list = [];
      this.indexArray=[];
      getContantByUserStatic(this.dataForm).then(response =>{
        this.list = response.data.data;
        let count = 0
        for (let rowIndex = 0; rowIndex < this.list.length; ) {
          this.indexArray.push(rowIndex)
          count = this.getRows(rowIndex, this.list[rowIndex].deptName)
          rowIndex += count
        }
      })
    },
    exportExcel: function(form,url) {
      return axios({ // 用axios发送post请求
        method: 'post',
        url: url, // 请求地址
        data: form, // 参数
        responseType: 'blob', // 表明返回服务器返回的数据类型
        headers: {
          'Content-Type': 'application/json'
        }
      })
    },
    /**
     * 导出表格
     */
    dataExportHandle() {
      this.exportLoading = true
      this.exportExcel(this.dataForm,'/recruit/recruitstudentsignup/getContantByUserStaticExport').then(res => { // 处理返回的文件流
        console.log(res)
        const blob = new Blob([res.data]);
        const fileName = '按联系人导出.xls';
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      })
    },
    changeRowColor ({ row }) {
      if (row.contantName === "小记") { // 变颜色的条件
        return {
          color: "red"
        }
      }
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
        } else if (index != 0 && index !=1) {
            const values = data.map(item => Number(item[column.property]))
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr)
                  if (!isNaN(value) ) {
                    let value = prev + curr;
                    return value
                  } else {
                    return prev
                  }
                }, 0)/2;
            } else {
              sums[index] = '--'
            }
        } else {
          sums[index] = '--'
        }
      })
      return sums
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let rowCount = 0
        if (this.indexArray.includes(rowIndex)) {
          rowCount = this.getRows(rowIndex, row.deptName)
          return {
            rowspan: rowCount,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    getRows(rowIndex, name) {
      let count = 0
      for (let i = rowIndex; i < this.list.length; i++) {
        if (this.list[i].deptName === name) {
          count++
        } else {
          break
        }
      }
      return count
    },
    handleFilter(){
      this.getDataList();
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>