thoth-frontend-test/src/views/workbench/bugTableList.vue

<template>
  <div>
    <div class="table-top">
      <label>{{ name }}的缺陷</label>
    </div>
    <el-table
      ref="bug_tableHeader"
      size="small"
      :data="tableData"
      class="bug_tableHeader"
      show-overflow-tooltip="true"
      :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '500' }"
      row-key="id"
    >
      <el-table-column label="优先级" prop="priorityCode" min-width="90" sortable align="right">
        <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="360" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span style=" color: #A7AEBC; font-size: 10px;">{{ 'BUG-' + scope.row.id }}</span>
          <br>
          <span class="bugNameSty" @click.stop="click_bugName(scope.row.id)">{{ scope.row.bugName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="priorityName" label="缺陷等级" align="center" />
      <el-table-column prop="bugStatusName" label="状态" min-width="110" align="center">
        <template slot-scope="scope">
          <statusChange :bug-id="scope.row.id" :status-code="Number(scope.row.status)" :bug-data="scope.row" :status-obj="statusObj" @bugGet="getNew" />
        </template>
      </el-table-column>
      <el-table-column prop="taskName" label="所属任务" align="center" min-width="250" show-overflow-tooltip />
      <el-table-column prop="creatorList" label="提报人" align="center" />
      <el-table-column prop="assignerList" label="责任人" min-width="150" align="center" show-overflow-tooltip />
      <el-table-column prop="currentHandlerList" label="修复人" min-width="150" align="center" show-overflow-tooltip />
      <el-table-column prop="gmtCreate" label="创建日期" min-width="120" align="center">
        <template slot-scope="scope">{{ scope.row.gmtCreate | naspOut }}</template>
      </el-table-column>
    </el-table>
    <div align="right">
      <el-pagination
        :page-sizes="[10, 20, 30, total]"
        :current-page.sync="pages.curIndex"
        :page-size="pages.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-drawer v-if="drawerShow" :visible.sync="drawerShow" :modal="false" :with-header="false" size="50%" class="bug_manage_drawer" @click.stop>
      <div @click.stop>
        <bug-details
          :id="bugQuery.id+''"
          ref="bugDetails"
          :type="'drawer'"
          :drawer-show="drawerShow"
          @close="drawerShow = false"
          @delete="getBugSelfList"
          @update="bugGetTableList"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import statusChange from '@/views/projectManage/bugList/details/statusChange'
import { bugGetEnum, bugList } from '@/api/defectManage'
import BugDetails from '@/views/projectManage/bugList/details/index'
import '@/styles/PublicStyle/index.scss'

export default {
  components: {
    statusChange,
    BugDetails
  },
  filters: {
    naspOut(value) {
      if (!value) return ''
      var da = value.split(/\s+/)
      return da[0]
    }
  },
  props: {
    idList: {
      type: Array,
      default: () => [],
      required: true
    },
    name: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      tableData: [], // tableData
      statusCode: 1, // 当前筛选的状态
      pages: {
        pageSize: 10, // 分页
        curIndex: 1 // 分页
      },
      total: 0, // 总数
      bugQuery: '', // bug详情
      drawerShow: false, // drawer展示
      statusObj: null // 状态对象
    }
  },
  watch: {
    idList: {
      handler(newV) {
        this.bugGetTableList()
      },
      deep: true
    },
    name: {
      handler(newV) {},
      immediate: true
    }
  },
  created() {
    this.getBugSelect()
  },
  methods: {
    async getBugSelect() { //  获取下拉菜单option
      const res = await bugGetEnum()
      if (res.code === 200) {
        this.statusObj = {
          bugEnumList: res.data.bugEnumList, // status
          repairResultEnumList: res.data.repairResultEnumList, // 修复结果
          bugReasonEnumList: res.data.bugReasonEnumList, // 缺陷原因
          theBugTypeEnumList: this.deleteChild(res.data.theBugTypeEnumList) // 缺陷类型
        }
      }
    },
    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
    },
    async bugGetTableList() { // 获取缺陷列表
      if (this.idList.length === 0) {
        this.tableData = []
        return
      }
      const res = await bugList({ ids: this.idList, ...this.pages })
      if (res && res.code === 200) {
        this.tableData = res.data
        this.total = res.total
      }
    },
    getBugSelfList() {
      this.bugGetTableList()
      this.$nextTick(() => {
        this.drawerShow = false
      })
    },
    handleSizeChange(val) {
      this.pages.pageSize = val
      this.bugGetTableList()
    },
    handleCurrentChange(val) {
      this.pages.curIndex = val
      this.bugGetTableList()
    },
    click_bugName(e) {
      this.bugQuery = JSON.parse(
        JSON.stringify(this.tableData.filter(value => value.id === e)[0])
      )
      this.drawerShow = true
    },
    getNew() { // 通知父组件，让父组件去执行子组件的数据更新
      this.$emit('change', '缺陷')
    }
  }
}
</script>

<style scoped lang="scss">
.table-top {
  color: #333333;
  font-size: 16px;
  width: 100%;
  padding: 10px 15px 0 15px;
  display: flex;
  justify-content: space-between;
}
.dropdown {
  margin: 20px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
.bug_tableHeader {
  width: 100%;
  font-size: 14px;
  color:rgba(102,102,102,1);
}
.div_priority {
  display: inline-block;
  width: 38px;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  color: #fff;
  border-radius: 4px;
  margin-right: 30px;
}
.bugNameSty:hover {
  cursor: pointer;
  color: #409EFF !important;
}
.bug_manage_drawer .el-drawer__header{
  margin-bottom: 15px;
}
.no-sidebar .bug_manage_drawer {
  pointer-events: none;
  margin-top: 10px;
}
.open-sidebar .bug_manage_drawer {
  pointer-events: none;
}
.top-sidebar .bug_manage_drawer {
  pointer-events: none;
  margin-top: 70px;
}
.bug_manage_drawer .el-drawer{
  pointer-events: auto;
}
</style>
<style>
.el-drawer__open .el-drawer.rtl {
    -webkit-animation: none;
    animation: none;
}
</style>