thoth-frontend-test/src/views/quality/components/tables/index.vue

<template>
  <div style="margin: 0 30px;">
    <el-table v-if="title === '状态停留分布图数据' || title === '需求分布图数据' || title === '任务分布图数据'" :data="data" style="width: 100%;" :height="title === '状态停留分布图数据' ? 'calc(100vh - 363px)': 'calc(100vh - 318px)'" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
      <el-table-column label="优先级" min-width="80" align="left">
        <template slot-scope="scope" style="text-align: center;">
          <span class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ 'P'+scope.row.priority }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="`${type}名称`" min-width="360" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="type === '需求'" class="drawer-id">{{ scope.row.requirementDisplayId }}</div>
          <div v-if="type === '任务'" class="drawer-id">{{ scope.row.taskIdSting }}</div>
          <div class="drawer-name" @click="jumper(scope.row, type)">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column v-if="type === '需求'" prop="typeName" label="需求类型" min-width="110" align="center" />
      <el-table-column v-if="type === '需求'" label="PM" min-width="100" show-overflow-tooltip align="center">
        <template v-if="scope.row.pmMemberInfoResponse" slot-scope="scope">
          <span>{{ scope.row.pmMemberInfoResponse.name }}</span>
        </template>
      </el-table-column> -->
      <el-table-column v-if="type === '需求'" label="状态" prop="statusName" min-width="100" align="center" />
      <el-table-column v-if="type === '任务'" label="状态" prop="statusString" min-width="100" align="center" />
    </el-table>

    <el-table v-if="title === '去除节假日的修复时长区间数据' || title === '不去除节假日的修复时长区间数据'" :data="data" style="width: auto;" height="calc(100vh - 355px)" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
      <el-table-column label="优先级" prop="priorityCode" min-width="80" align="left">
        <template slot-scope="scope" style="text-align: center;">
          <span class="div_priority" :class="[{'priority_color': scope.row.priorityLevel === 'High'},{'priority_color1': scope.row.priorityLevel === 'Medium'},{'priority_color3': scope.row.priorityLevel === 'Low'}]">
            {{ scope.row.priorityLevel.substring(0, 1) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="bugName" label="缺陷名称" min-width="200" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ 'BUG-' + scope.row.id }}</div>
          <span class="drawer-name" @click.stop="jumper(scope.row, '缺陷')">{{ scope.row.bugName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="title === '不去除节假日的修复时长区间数据'" prop="devFixTime" label="缺陷修复时长" min-width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.devFixTime/(1000 * 3600) | numFilter }}H
        </template>
      </el-table-column>
      <el-table-column v-if="title === '去除节假日的修复时长区间数据'" prop="fixTimePurgeNH" label="缺陷修复时长(去除节假日)" min-width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.devFixTimePurgeNH/(1000 * 3600) | numFilter }}H
        </template>
      </el-table-column>
      <el-table-column prop="bugStatusName" label="状态" min-width="100" align="center" />
    </el-table>

    <el-table v-if="title === '分布图数据' || title === '去除节假日的修复时长数据' || title === '模块分布数据' || title === '缺陷统计数据'" :data="data" style="width: auto;" :height="title === '模块分布数据' ? 'calc(100vh - 175px)': 'calc(100vh - 318px)'" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
      <el-table-column label="优先级" prop="priorityCode" min-width="80" align="left">
        <template slot-scope="scope" style="text-align: center;">
          <span class="div_priority" :class="[{'priority_color': scope.row.priorityLevel === 'High'},{'priority_color1': scope.row.priorityLevel === 'Medium'},{'priority_color3': scope.row.priorityLevel === 'Low'}]">
            {{ scope.row.priorityLevelShortName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="bugName" label="缺陷名称" min-width="200" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ 'BUG-' + scope.row.id }}</div>
          <span class="drawer-name" @click.stop="jumper(scope.row, '缺陷')">{{ scope.row.bugName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="title === '模块分布数据' || title === '缺陷统计数据'" prop="devFixTime" label="缺陷修复时长" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.devFixTime/(1000 * 3600) | numFilter }}H
        </template>
      </el-table-column>
      <el-table-column v-if="title === '模块分布数据' || title === '去除节假日的修复时长数据'" prop="fixTimePurgeNH" label="缺陷修复时长(去除节假日)" :min-width="title === '模块分布数据' ? '110': '80'" align="center">
        <template slot-scope="scope">
          {{ scope.row.devFixTimePurgeNH/(1000 * 3600) | numFilter }}H
        </template>
      </el-table-column>
      <el-table-column prop="bugStatusName" label="状态" min-width="100" align="center" />
    </el-table>

    <el-table v-if="title === '报告统计数据'" :data="data" style="width: auto;" height="calc(100vh - 318px)" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
      <el-table-column label="报告名称" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ scope.row.id }}</div>
          <span class="drawer-name" @click.stop="jumper(scope.row, '报告')">{{ scope.row.reportName || '' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="statusString" label="状态" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.statusString }}
        </template>
      </el-table-column>
      <el-table-column label="报告人" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.creatorObject.name || '' }}
        </template>
      </el-table-column>
      <el-table-column prop="typeString" label="类型" min-width="110" />
    </el-table>
  </div>
</template>

<script>
import '@/styles/PublicStyle/index.scss'
import { EncryptId } from '@/utils/crypto-js.js'
export default {
  filters: {
    numFilter(value) {
      let realVal = ''
      if (!isNaN(value) && value !== '') {
        realVal = parseFloat(value).toFixed(1) // 截取当前数据到小数点后两位
      } else {
        realVal = '--'
      }
      return realVal
    }
  },
  props: {
    data: { type: Array, default: null },
    title: { type: String, required: true },
    type: { type: String, default: null }
  },
  data() {
    return {
      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD']
    }
  },
  methods: {
    deleteChild(arr) { // 删除无用子属性
      const bfs = arr => {
        arr.forEach(item => {
          if (!item.childrenEnums || item.childrenEnums.length === 0) {
            delete item.childrenEnums
          } else {
            this.deleteChild(item.childrenEnums)
          }
        })
      }
      bfs(arr)
      return arr
    },
    jumper(val, name) { // 需求、任务、缺陷跳转
      const bizId_id = EncryptId(`${val.bizId}_${val.id}`)
      const newTab = this.$router.resolve({ name: name + '详情', query: { bizId_id: bizId_id }})
      window.open(newTab.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.div_priority {
  color: #ffffff;
  width:fit-content;
  padding: 0 12px;
  border-radius: 4px;
  margin-left: 4px;
}
.drawer-name:hover {
  color: #409eff;
  cursor: pointer;
}
.drawer-id {
  color: rgb(167, 174, 188);
  font-size: 10px;
}
</style>