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 v-if="type === '需求' || type === '需求状态' || type === '需求等级' || type === '需求类型' || title === '需求分布图数据' && type === '跟版客户端' || type === 'pm'" label="需求名称" min-width="360" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ scope.row.requirementDisplayId }}</div>
          <div class="drawer-name" @click="jumper(scope.row, '需求')">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '任务' || type === '任务状态' || type === '任务等级' || type === '开发负责人' || type === '测试负责人' || title === '任务分布图数据' && type === '跟版客户端' || type === '直接归属'" label="任务名称" min-width="360" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="drawer-id">{{ scope.row.taskIdSting }}</div>
          <div class="drawer-name" @click="jumper(scope.row, '任务')">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '开发负责人'" label="开发负责人" min-width="100" align="center">
        <template slot-scope="scope">{{ scope.row.rdObject !== null? scope.row.rdObject.name: '' }}</template>
      </el-table-column>
      <el-table-column v-if="type === '测试负责人'" label="测试负责人" min-width="100" align="center">
        <template slot-scope="scope">{{ scope.row.qaObject !== null?scope.row.qaObject.name: '' }}</template>
      </el-table-column>
      <el-table-column v-if="title === '需求分布图数据' && type === '跟版客户端'" label="跟版客户端" min-width="100" align="center">
        {{ oftype }}
      </el-table-column>
      <el-table-column v-if="title === '任务分布图数据' && type === '跟版客户端'" label="跟版客户端" min-width="100" align="center">
        {{ oftype }}
      </el-table-column>
      <el-table-column v-if="type === '直接归属'" label="直接归属" min-width="110" align="center" show-overflow-tooltip>
        {{ oftype }}
      </el-table-column>
      <el-table-column v-if="type === 'pm'" 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="需求类型" min-width="100" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级'" label="状态" prop="statusName" min-width="100" align="center" />
      <el-table-column v-if="type === '任务' || type === '任务状态' || 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 v-if="type === '缺陷状态' || type === '优先级' " prop="bugStatusName" label="状态" min-width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.bugStatusName }}
        </template>
      </el-table-column>
      <el-table-column v-if="type === '缺陷等级'" prop="bugStatusName" label="缺陷等级" min-width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.priorityName }}
        </template>
      </el-table-column>
      <el-table-column v-if="type === '端类型' || type === '发现方式' || type === '发现阶段' || type === '缺陷类型'" :label="type" min-width="100" align="center">
        {{ oftype }}
      </el-table-column>
    </el-table>

    <el-table v-if="title === '报告统计数据'" :data="data" style="width: auto;" height="calc(100vh - 296px)" :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">
          <span v-if="scope.row.typeString === '日报'" class="drawer-name" @click.stop="jumper(scope.row, '日报')">{{ scope.row.reportName || '' }}</span>
          <span v-if="scope.row.typeString === '准出'" class="drawer-name" @click.stop="jumper(scope.row, '准出')">{{ scope.row.reportName || '' }}</span>
          <span v-if="scope.row.typeString === '提测报告'" class="drawer-name" @click.stop="jumper(scope.row, '提测')">{{ scope.row.reportName || '' }}</span>
          <div v-if="scope.row.typeString === '准出' && scope.row.passStatus === 1" style="color: red;">不通过</div>
          <div v-if="scope.row.typeString === '提测报告' && scope.row.returnReason" style="color: red;">打回报告：{{ scope.row.returnReason }}</div>
        </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 },
    oftype: { type: String, default: null }
  },
  data() {
    return {
      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD']
    }
  },
  methods: {
    jumper(val, name) { // 需求、任务、缺陷跳转
      const { bizId = null } = this.$store.state.global || {}
      const bizId_id = EncryptId(`${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>