elementUi合并单元格

<template>
  <div class="app-container region-container">
    <el-row :gutter="20">
      <el-col :span="24" class="right-col">
        <!-- 右侧列表 -->
        <div>
          <div class="filter-container">
            <el-form :inline="true">
              <el-row></el-row>
            </el-form>
          </div>
          <div class="content">
            <div class="title">成员管理</div>
            <div class="filter-container">
              <el-form :inline="true" class="demo-form-inline">
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple-light">
                      <el-form>

                        <el-form-item label="岗位：">
                          <el-select v-model="form.post" placeholder="请选择岗位" @change="choosePost">
                            <el-option v-for="item in postList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="职级（必填）" v-show="postTwo || postThr">
                          <el-select v-model="form.level" placeholder="请选择职级">
                            <el-option v-for="item in levelList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="职级2（必填）" v-show="postThr">
                          <el-select v-model="form.level2" placeholder="请选择职级2">
                            <el-option v-for="item in levelArrFour" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="学历：">
                          <el-select v-model="form.education" placeholder="请选择学历">
                            <el-option v-for="item in educationList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="年龄: ">
                          <el-select v-model="form.ageRang" placeholder="请选择年龄">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="20以下" value="1"></el-option>
                            <el-option label="20~30" value="2"></el-option>
                            <el-option label="30~40" value="3"></el-option>
                            <el-option label="40-50" value="4"></el-option>
                            <el-option label="50以上" value="5"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="入职日期：">
                          <el-date-picker v-model="form.columnDateTime" type="daterange" value-format='yyyy-MM-dd' range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <div class="statisticArea">
                        <p>区域总人数</p>
                        <div class="num">{{statistic.totalNum}}</div>
                        <div class="statistic">男:{{statistic.maleNum}}</div>
                        <div class="statistic">女:{{statistic.femaleNum}}</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <div class="statisticArea">
                        <p>离职人数</p>
                        <div class="num">{{statistic.quitJobNum}}</div>
                        <div class="statistic">离职率</div>
                        <div class="statistic">{{statistic.quitJobRate}}%</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <div class="statisticArea">
                        <p>增长人数</p>
                        <div class="num">{{statistic.jobNum}}</div>
                        <div class="statistic">增长率</div>
                        <div class="statistic">{{statistic.jobRate}}%</div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-form-item>
                        <el-button type="primary" size="small" @click="handleAllFilter">
                          <i class="el-icon-search"></i> 查询
                        </el-button>
                      </el-form-item>
                      <!-- <el-form-item>
                        <el-button type="primary" size="small" @click="handleAllFilter">
                          <i class="el-icon-upload"></i> 导出
                        </el-button>
                      </el-form-item> -->
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="tab-container">
              <el-table :span-method="objectSpanMethod" :data="tableData.list" v-loading="listLoading" element-loading-text="Loading" ref="tableData" border tooltip-effect="dark" style="width: 100%;overflow: auto">
                <!-- <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> -->
                <el-table-column label="部门" min-width="180" align="center" prop="departName">
                  <template slot-scope="scope">
                    <span>{{scope.row.departName || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="总人数" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.totalNum || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="男" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.maleNum || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="女" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.femaleNum || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="学历" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.education || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="年龄" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span v-if='scope.row.stageAge===1'>20以下</span>
                    <span v-else-if='scope.row.stageAge===2'>20~30</span>
                    <span v-else-if='scope.row.stageAge===3'>30~40</span>
                    <span v-else-if='scope.row.stageAge===4'>40~50</span>
                    <span v-else-if='scope.row.stageAge===5'>50以上</span>
                  </template>
                </el-table-column>
                <el-table-column label="离职人数" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.quitJobNum || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="离职率" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.quitJobRate+'%' || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="增长人数" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.jobNum || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="增长率" min-width="180" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.jobRate+'%' || '-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="150" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="mini" plain type="primary" @click="seeDetail(scope.row)">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-container" v-if="tableData.total > 10">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,20,30,50]" :page-size="tableData.limit" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable */
import sha1 from 'js-sha1'
import { Encrypt, Decrypt } from '@/utils/crypto.js'
import { SQLFilter } from 'nplus-filter'
import exportDetail from '@/components/export/up'
import { salesList, areaList, controlSale, deleteSale, setDepart, memberDepart, saleDetail } from '@/api/message'
import { getInfoList } from '@/api/dictionaryDetail'
import { exportCheckList, importExcel, importResult, dealImport, queueMission } from '@/api/promotion'
import { getBasicInfoStatistic, companyStatistics } from '@/api/basicDataInfo'
export default {
  components: { exportDetail },
  props: {

  },
  data () {
    return {

      listLoading: false,
      querys: {
        station: '',
        grade: '',
        subGrade: '',
        education: '',
        ageSign: '',
        joinStart: '',
        joinEnd: '',
      },
      levelList: [],//职级一
      levelArrFour: [],//职级二
      selectList: [],
      inputVisible: false,
      inputValue: '',
      form: {
        education: '',
        level2: '',
        level: '',
        ageRang: '',
        columnDateTime: [],
      },
      dataLoad: false,
      tableData: {
        start: 0,
        limit: 10,
        pageNum: 1,
        total: 0,
        list: []
      },
      roleValue: '',
      optionType: [{
        label: '请选择',
        value: ''
      }, {
        label: '区域',
        value: 'region'
      }, {
        label: '门店',
        value: 'store'
      }],
      nodeData: {},
      resolveData: [],
      dialogSet: {
        visible: false,
        title: '设置所在部门',
        table: [],
        userId: ''
      },
      postList: [{
        label: '请选择',
        value: ''
      }],
      educationList: [{
        label: '请选择',
        value: ''
      }],
      userId: '',
      agentId: 1,
      timer: null,
      other: null,
      dialogCheck: {
        visible: false,
        title: '查看成员',
        form: {
          name: '',
          gender: '1',
          mobile: '',
          identiy: '',
          avatar: '',
          // 学历
          education: '',
          // 岗位
          post: '',
          store: '',
          // 区域
          department: '',
          time: '',
          age: '',
          kinfolk: '',
          home: '',
          // 职级
          level: '',
          status: '',
          userId: ''
        },
        loading: false
      },
      postArrOne: [],
      postOne: false,
      postArrTwo: [],
      postTwo: false,
      postArrThr: [],
      postThr: false,
      statistic: {},
      spanArr: [],
      pos: 0,
    }
  },
  watch: {

  },
  created () {
    this.agentId = this.$setfile.qyh.agentId
    this.getPostDictionary()
    this.getCompanyStatistic()
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    getCompanyStatistic () {
      companyStatistics(this.querys).then(res => {
        console.log(res);
        res.data.quitJobRate = (res.data.quitJobRate * 100).toFixed(0)
        res.data.jobRate = (res.data.jobRate * 100).toFixed(0)
        this.statistic = res.data
      })
    },

    handleSelectionChange (val) {
      this.selectList = val
      this.$emit('showMemberList', val)
    },
    handleClose (index) {
      this.toggleSelection([this.selectList[index]])
    },
    filterData () {
      let data = {
        start: this.tableData.start,
        limit: this.tableData.limit
      }
      return data
    },
    getQueryObj () {
      var formVal = this.form
      let querys = {
        station: formVal.post,
        grade: formVal.level,
        subGrade: formVal.level2,
        education: formVal.education,
        ageSign: formVal.ageRang,
        joinStart: formVal.columnDateTime[0],
        joinEnd: formVal.columnDateTime[1],
      }
      return querys
    },
    // 获取人员列表
    getDataList () {
      this.listLoading = true
      let data = this.filterData()
      let timestamp = new Date().getTime() - this.$store.state.minDate
      var formVal = this.form
      let querys = this.getQueryObj()
      let params = {
        // timestamp: timestamp,
        query: JSON.stringify(querys),
        start: data.start,
        limit: data.limit,
      }
      this.spanArr = []
      let contactDot = 0
      getBasicInfoStatistic(params).then(res => {
        res.data.data.forEach((item, index) => {
          item.jobRate = (item.jobRate * 100).toFixed(0)
          item.quitJobRate = (item.quitJobRate * 100).toFixed(0)
          if (index === 0) {
            this.spanArr.push(1)
          } else {
            // 后一个和前一个相比，相同的存入同一个index,不同的存入index++，**有顺序要求，所以要先排序**
            if (item.departName === res.data.data[index - 1].departName) {
              this.spanArr[contactDot] += 1
              this.spanArr.push(0)
            } else {
              this.spanArr.push(1)
              contactDot = index
            }
          }
        })
        console.log(this.spanArr);
        this.tableData.list = res.data.data
        this.tableData.total = res.data.total
        this.tableData.pageNum = res.data.pageNum
        this.listLoading = false
      })
    },

    // 改变每页显示条数
    handleSizeChange (val) {
      this.tableData.start = 0
      this.tableData.limit = val
      this.getDataList()
    },
    // 改变页数
    handleCurrentChange (val) {
      this.tableData.start = (val - 1) * this.tableData.limit
      this.getDataList()
    },
    // 查询
    handleAllFilter () {
      this.tableData.start = 0
      this.tableData.list = []
      this.tableData.total = 0
      this.tableData.pageNum = 1
      this.getCompanyStatistic()
      this.getDataList()
    },
    // 导出
    getFile (taskId) {
      this.$refs.ExportDetail.load()
      if (this.$NUtil.isEmpty(taskId)) {
        let filterData = this.filterData()
        let data = {
          scene: 'wxCpUser',
          sceneType: filterData.mobile,
          filter: filterData.filter
        }
        exportCheckList(data).then(response => {
          if (!this.$NUtil.isEmpty(response.data.id)) {
            localStorage.setItem('key_members', response.data.id)
            this.getFileInfo(response.data.id)
          }
        }).catch((err) => {
        })
      } else {
        this.getFileInfo(taskId)
      }
    },
    // 导出
    getFileInfo (taskId) {
      this.$refs.ExportDetail.data(taskId, ' 用户导出记录', 'key_members')
    },
    // 跳转导入
    importNav () {
      this.$router.push('importFile')
    },
    // data加密
    encryptSelect () {
      let timestamp = new Date().getTime() - this.$store.state.minDate
      let nonce = this.$NUtil.randomString()
      let token = process.env.Select_Token
      let appId = 'qyh'
      let sign = `appId=${appId}&nonce=${nonce}&timestamp=${timestamp}&token=${token}`
      let params = {
        appId: appId,
        sign: sha1(sign).toUpperCase(),
        timestamp: timestamp,
        nonce: nonce
      }
      return params
    },

    // 选择类型
    choosePost (val) {
      let one = this.postArrOne.indexOf(val)
      let two = this.postArrTwo.indexOf(val)
      let thr = this.postArrThr.indexOf(val)
      if (one >= 0) {
        this.postOne = true
        this.postTwo = false
        this.postThr = false
      } else if (two >= 0) {
        this.postOne = false
        this.postTwo = true
        this.postThr = false
        this.levelList = this.levelArrTwo
      } else if (thr >= 0) {
        this.postOne = false
        this.postTwo = false
        this.postThr = true
        this.levelList = this.levelArrThr
      }
    },
    // 获取字典
    getPostDictionary () {
      getInfoList('qyh', 'RYSX', 'GW_ZG').then(res => {
        let arr = res.data.value.split(',')
        let objArr = arr.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.postArrOne = arr
        this.postList = this.postList.concat(objArr)
      })
      getInfoList('qyh', 'RYSX', 'GW_PX').then(res => {
        let arr = res.data.value.split(',')
        let objArr = arr.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.postArrTwo = arr
        this.postList = this.postList.concat(objArr)
      })
      getInfoList('qyh', 'RYSX', 'GW_DG').then(res => {
        let arr = res.data.value.split(',')
        let objArr = arr.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.postArrThr = arr
        this.postList = this.postList.concat(objArr)
      })
      // getInfoList('qyh', 'RYSX', 'XB').then(res => {
      //   let arr = res.data.value.split(',')
      // })
      getInfoList('qyh', 'RYSX', 'XL').then(res => {
        let arr = res.data.value.split(',')
        let objArr = arr.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.educationList = this.educationList.concat(objArr)
      })
      getInfoList('qyh', 'RYSX', 'QS').then(res => {
        let arr = res.data.value.split(',')
        let objArr = arr.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.kinfolkList = objArr
      })
      getInfoList('qyh', 'RYSX', 'ZJ_DG').then(res => {
        let arr = res.data.value.split(',')
        let objArr = arr.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.levelArrThr = objArr
      })
      getInfoList('qyh', 'RYSX', 'ZJ_PX').then(res => {
        let arr = res.data.value.split(',')
        let objArr = arr.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.levelArrTwo = objArr
      })
      getInfoList('qyh', 'RYSX', 'ZJ_DG2').then(res => {
        let arr = res.data.value.split(',')
        let objArr = arr.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.levelArrFour = objArr
      })
    },
    seeDetail (row) {
      var querys = this.getQueryObj()
      querys.ageSign = row.stageAge
      querys.education = row.education
      localStorage.setItem("querys", JSON.stringify(querys))
      this.$router.push({
        path: 'memberStatistic',
        query: { departId: row.departId }
      })
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 第一列的合并处理
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>
<style lang="scss">
.region-tree {
  .el-tree-node__content {
    position: relative;
    font-size: 13px;
  }
}
</style>

<style lang="scss" scoped>
.region-container {
  .left-col {
    .el-dropdown {
      position: absolute;
      right: 10px;
      top: 5px;
    }
  }
}
.statisticArea {
  width: 300px;
  height: 150px;
  border-radius: 5rpx;
  background: #fff;
  border: 1px solid #e4e4e4;
  padding: 30px;
  margin-bottom: 10px;
  margin: 0 auto;
  p {
    font-weight: bold;
    margin: 0 0 15px;
  }
  .num {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
  }
  .statistic {
    // margin-top: 20px;
    text-align: right;
  }
}
</style>