index.vue

<template>
  <div class="main-box">
    <div class="total-box">
      <div class="box-title">
        <div class="blue-area mr-12"></div>
        <span class="bold-font">总体情况</span>
      </div>
      <el-row :gutter="20" class="data-box">
        <el-col v-for="(item, index) in totalList" :key="index" :span="6">
          <div class="grid-content mb-12">{{ item.label }}</div>
          <h1>{{ totalData[item.prop] }}</h1>
        </el-col>
      </el-row>
    </div>
    <div class="person-area">
      <div class="box-title">
        <div class="blue-area mr-12"></div>
        <span class="bold-font">个人绩效情况</span>
      </div>
      <div class="type-box">
        <span class="mr-10">选择统计周期：</span>
        <el-radio-group v-model="periodType" @input="handleClick">
          <el-radio-button label="month">月度</el-radio-button>
          <el-radio-button label="quarter">季度</el-radio-button>
          <el-radio-button label="year">年度</el-radio-button>
        </el-radio-group>
      </div>
      <div class="type-box">
        <span class="mr-10">选择统计年份：</span>
        <el-select v-model="yearBtn" placeholder="请选择" @change="change">
          <el-option
            v-for="item in yearList"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </div>
      <el-table
        :data="tableData"
        border
        :show-summary="showSummary"
        class="mt-20"
      >
        <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { checkerQuality, adminQuality } from "@/api/qualitycontrol-report"
export default {
  data() {
    return {
      curRole: "",
      totalList: [
        {
          label: "累计审核病例数",
          prop: "checked",
        },
        {
          label: "累计审核合格病例数",
          prop: "pass",
        },
        {
          label: "累计审核驳回修改病例数",
          prop: "back",
        },
        {
          label: "累计审核不合格病例数",
          prop: "unPass",
        },
      ],
      totalData: {},
      periodType: "month",
      yearList: [],
      yearBtn: 0,
      tableData: [],
      tableColumn: [],
      allData: [],
      month: [
        { label: "1月", prop: "value1" },
        { label: "2月", prop: "value2" },
        { label: "3月", prop: "value3" },
        { label: "4月", prop: "value4" },
        { label: "5月", prop: "value5" },
        { label: "6月", prop: "value6" },
        { label: "7月", prop: "value7" },
        { label: "8月", prop: "value8" },
        { label: "9月", prop: "value9" },
        { label: "10月", prop: "value10" },
        { label: "11月", prop: "value11" },
        { label: "12月", prop: "value12" },
      ],
      quarter: [
        { label: "第1季度", prop: "value1" },
        { label: "第2季度", prop: "value2" },
        { label: "第3季度", prop: "value3" },
        { label: "第4季度", prop: "value4" },
      ],
      year: [],
      showSummary: false,
    }
  },
  computed: {
    roles() {
      return this.$store.state.user.roles
    },
  },
  watch: {},
  mounted() {},
  created() {
    this.getNow()
    if (this.roles.length > 0) {
      let roleCodeArr = this.roles.map((e) => e.roleCode)
      console.log(roleCodeArr)
      if (roleCodeArr.includes("admin")) {
        this.curRole = "admin"
      } else if (roleCodeArr.includes("auditer")) {
        this.curRole = "auditer"
      }
    }
    this.getQuality()
  },
  methods: {
    change(val) {
      console.log(val)
      this.getQuality()
    },
    getNow() {
      const nowDate = new Date()
      this.yearBtn = nowDate.getFullYear()
      for (let i = 2023; i <= this.yearBtn; i++) {
        this.yearList.push(i)
      }
    },
    async getQuality() {
      let res
      // console.log(this.curRole)
      switch (this.curRole) {
        case "admin":
          res = await adminQuality({ year: this.yearBtn })
          let { overall } = res.data
          this.allData = res.data
          this.totalData = overall
          this.showSummary = true
          this.handleClick()
          break

        case "auditer":
          res = await checkerQuality({ year: this.yearBtn })
          this.allData = res.data
          this.totalData = res.data.overall
          this.showSummary = false
          this.handleClick()
          break
        default:
          break
      }
    },
    handleClick(val) {
      let tableData
      let headerData
      if (this.curRole == "admin") {
        switch (this.periodType) {
          case "month":
            tableData = this.allData.month
            headerData = this.month
            this.tableColumn = [
              {
                label: "审核员/月份",
                prop: "name",
              },
              ...this.month,
              {
                label: "合计",
                prop: "sum",
              },
            ]
            break
          case "quarter":
            tableData = this.allData.quarter
            headerData = this.quarter
            this.tableColumn = [
              {
                label: "审核员/季度",
                prop: "name",
              },
              ...this.quarter,
              {
                label: "合计",
                prop: "sum",
              },
            ]
            break
          case "year":
            tableData = this.allData.year
            this.year = this.yearList.map((e, index) => {
              let obj = {
                label: e + "年",
                prop: "value" + (index + 1),
              }
              return obj
            })
            headerData = this.year
            this.tableColumn = [
              {
                label: "审核员/年份",
                prop: "name",
              },
              ...this.year,
            ]
            break
          default:
            break
        }
        // //处理动态表头  //
        this.tableData = []
        tableData.forEach((e, index) => {
          let data = {
            name: e.name,
          }
          // 计算
          for (let i = 0; i < headerData.length; i++) {
            let value = headerData[i].label
            let filterArr = e.list.filter((item) => item.value === value)
            if (filterArr.length > 0) {
              data[headerData[i].prop] = filterArr[0].checked
            } else {
              data[headerData[i].prop] = 0
            }
          }
          // !计算右侧合计条数
          let arr = e.list.map((listItem) => listItem.checked)
          data.sum = eval(arr.join("+"))
          // !计算底部合计
          this.tableData.push(data)
        })
      } else if (this.curRole == "auditer") {
        headerData = [
          {
            label:
              this.periodType == "month"
                ? "月份"
                : this.periodType == "quarter"
                ? "季度"
                : this.periodType == "year"
                ? "年度"
                : "",
            prop: "value",
          },
          { label: "审核病例数(例)", prop: "checked" },
        ]
        this.tableColumn = headerData
        this.tableData =
          this.periodType == "month"
            ? this.allData.month
            : this.periodType == "quarter"
            ? this.allData.quarter
            : this.periodType == "year"
            ? this.allData.year
            : []
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep {
  .data-box {
    margin: 24px 0px;
    border-bottom: 1px solid #f3f3f3;
  }
  .el-col {
    text-align: center;
    margin: 12px 0px 28px;
    border-right: 1px solid #f3f3f3;
    .grid-content {
      font-size: 16px;
      font-family: AlibabaPuHuiTiR;
      color: #333333;
    }
    h1 {
      color: #4e68ff;
      font-weight: bold;
      font-size: 32px;
    }
  }
  .el-col:last-child {
    border-right: none;
  }
}
.main-box {
  margin: 24px;
}
.box-title {
  display: flex;
  flex-direction: row;
}
.blue-area {
  width: 4px;
  height: 24px;
  background: #4e68ff;
}
.bold-font {
  font-size: 18px;
  font-family: AlibabaPuHuiTiM;
  color: #333333;
  font-weight: bold;
}
.type-box {
  display: flex;
  flex-direction: row;
  margin: 32px 0px 0px;
  line-height: 32px;
}
</style>