aivfo-oa-web/src/views/meeting/weeklyRecords.vue

<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between;margin-bottom: 8px">
      <div style="font-size: 24px">{{ title }}</div>
      <el-button size="mini" @click="exportPdf" icon="el-icon-download" style="margin-right: 20px">导出</el-button>
    </div>

    <el-descriptions title="" :column="2" :size="size" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          会议时间
        </template>
        2022-12-12 12:00:00至2022-12-12 12:00:00
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          会议主持人
        </template>
        张三
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          会议地点
        </template>
        重庆柏玮熠办公室
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          会议记录人
        </template>
        <el-tag size="small">李四</el-tag>
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          参会人员
        </template>
        王五、张三、小七
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          参会情况
        </template>
        应到15人，实到12人
      </el-descriptions-item>
    </el-descriptions>
    <el-table
      style="width: 100%" border stripe>
      <el-table-column
        prop="date"
        label="姓名" align="center"
        width="120">
      </el-table-column>
      <el-table-column prop="workzongjie" label="本周工作总结" align="center" min-width="450">
        <el-table-column label="工作内容" align="center">
        </el-table-column>
        <el-table-column label="是否上周遗留" align="center" width="120">
        </el-table-column>
        <el-table-column label="完成情况说明" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="workplan" label="下周工作计划" align="center">
        <el-table-column label="工作内容" align="center">
        </el-table-column>
        <el-table-column label="计划时间" align="center" width="150">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="pingfen" label="评分" align="center" width="85">
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center">
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
import {downloadPdf, getWeeksRecordsByWeeks} from "@/api/meeting/meeting";

export default {
  name: 'weeklyRecords',
  data() {
    return {

      title: '技术部周会',
      size: '',
      tableData: [],
      meetingId: 30,
      weeks: 46,
      m: {
        id: null,
        meetingName: '',
        external: 0,
        meetingType: 1,
        meetingPlace: null,
        beginTime: null,
        endTime: null,
        outAttendees: null,
        innerAttendees: '',
        emcee: null,
        recorder: null,
        createUserId: 1,
        createTime: null,
        status: 1,
        weeks: 46
      },
      workContents: {
        col: 0,
        row: 0
      },
      spanArr: [], // 存合并行数据的数组
      pos: 0,// 合并行数据数组下标
      rowIndex: 1, // 序号
      // 合并行
      mergeArr: [],
      // 排序号
      indexNum: {},

    }
  },
  methods: {
    exportPdf() {
      downloadPdf()
    },
    getData() {
      getWeeksRecordsByWeeks(this.meetingId, this.weeks).then(res => {
        this.tableData = res.data.workContent
        // this.getSpanArr(this.tableData)
        this.m = res.data.meeting
      })
    },
    colMethod(columnArr, data) {
      let column = {}
      let position = 0
      //遍历合并的列的数据
      columnArr.forEach((prop) => {
        column[prop] = []
        data.forEach((row, rowIndex) => {
          column[prop][rowIndex] = [1, 1]
          if (rowIndex === 0) {
            position = 0
          } else if (row[prop] === data[rowIndex - 1][prop]) {
            // 当前行数据等于上一行，根据记录的行号，计算需要合并几行。
            column[prop][position][0] += 1
            // 当前行 隐藏不显示
            column[prop][rowIndex][0] = 0
          } else {
            // 不相等之后，重置记录行号
            position = rowIndex
          }

        })
      })
      return column;
    },
    getList() {
      const _this = this;
      // 计算合并的行
      this.mergeArr = this.colMethod(['id'], this.tableData)
      // 浅拷贝处理数据
      let dataBase = Array.from(this.tableData);
      let saleIdArr = this.colMethod(['id'], dataBase)

      // 先根据saleId合并第一次，将数据源根据合并下标处理为多段数据源
      let newData = []
      saleIdArr.saleId.forEach((item, index) => {
        if (item[0] > 0) {
          let res = []
          for (let i = 0; i < item[0]; i++) {
            res.push(dataBase.slice(0, 1)[0])
            this.$delete(dataBase, 0)
          }
          newData.push(res)
        }
      })

      // 根据合并后的数据，分段处理time的合并行下标
      let outArr = []
      for (let i = 0; i < newData.length; i++) {
        let obt = _this.colMethod(['time'], newData[i]);
        if (obt.outboundTime.length > 0) {
          outArr.push(obt.outboundTime)
        }
      }

      // 处理time合并行
      let finishRes = []
      outArr.forEach(item => {
        if (item.length > 1) {
          for (let i = 0; i < item.length; i++) {
            finishRes.push(item[i])
          }
        } else {
          finishRes.push(item[0])
        }
      })
      // 赋值给总合并行集合
      this.mergeArr.outboundTime = finishRes

      //排列序号
      this.indexObj()

    },


    getSpanArr(data) {
      // 重新查询后，要清空行数据数组、序号重置为1
      this.spanArr = []
      this.rowIndex = 1
      for (let i = 0; i < data.length; i++) {
        let executor = data[i].executor;
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
          data[i].serialNo = this.rowIndex
          this.rowIndex++
        } else {
          if (data[i].executor === data[i - 1].executor) {
            this.spanArr.push[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
            data[i].serialNo = this.rowIndex
            this.rowIndex++
          }
        }

      }
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      let arr = this.mergeArr[column.property] || []
      if (column.type == 'index' && this.mergeArr['id'])
        return this.mergeArr['id'][rowIndex]
      else if (arr.length) return arr[rowIndex]
      else [1, 1]
    },
    indexObj() {
      let num = 0;
      this.mergeArr['id'].forEach((item, index) => {
        if (item[0] != 0) {
          this.indexNum[index] = num += 1
        }
      })

    }
  }

}
</script>