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

<template>
  <div>
    <el-dropdown class="dropdown" trigger="click">
      <span class="el-dropdown-link">
        {{ title }}<i class="el-icon-arrow-down el-icon--right" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item, index) in bugProcessStatusList" :key="index" @click.native="handleClick(item)">{{ item.name }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <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="100" sortable align="center">
        <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="bugGetTableList" />
        </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="[15, 30, 45, total]"
        :current-page.sync="curIndex"
        :page-size="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="drawerShow = false;type === 'page'?this.$emit('getBugList'):this.$emit('getBugSelfList')"
          @update="type === 'page'?this.$emit('getBugList'):this.$emit('getBugSelfList')"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import statusChange from '@/views/projectManage/bugList/details/statusChange'
import { bugGetEnum, bugTeamList, bugSelfList } 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: {
    name: { type: String, default: null },
    bizId: { type: Number, default: null },
    teamId: { type: Number, default: null }
  },
  data() {
    return {
      title: '待团队成员处理',
      tableData: [], // tableData
      statusCode: 1, // 当前筛选的状态
      pageSize: 15, // 分页
      curIndex: 1, // 分页
      total: 0, // 总数
      bugQuery: '', // bug详情
      drawerShow: false, // drawer展示
      bugProcessStatusList: [], // 筛选
      statusObj: null // 状态对象
    }
  },
  computed: {
    clickCount() {
      return this.$store.state.app.clickCount
    }
  },
  watch: {
    clickCount(newVal, oldVal) {
      this.drawerShow = false
    }
  },
  created() {
    // this.bugGetTableList()
    this.getBugSelect()
  },
  methods: {
    handleClick(vel) {
      this.title = vel.name
      this.statusCode = vel.code
      this.curIndex = 1
      this.bugGetTableList()
    },
    getBugSelect() { //  获取下拉菜单option
      bugGetEnum().then(res => {
        if (this.name === '个人') {
          this.title = '待我处理'
          this.bugProcessStatusList = res.data.bugProcessStatusList // 个人
        }
        if (this.name === '团队') {
          this.title = '待团队成员处理'
          this.bugProcessStatusList = res.data.bugProcessTeamStatusList // 待团队成员处理
        }
        this.statusObj = {
          bugEnumList: res.data.bugEnumList, // status
          repairResultEnumList: res.data.repairResultEnumList, // 修复结果
          bugReasonEnumList: res.data.bugReasonEnumList // 缺陷原因
        }
      })
    },
    async bugGetTableList(name, value) {
      const teamSearchInfo = value || { teamId: this.teamId, bizId: this.bizId }
      if (value) {
        this.curIndex = 1
      }
      const pageInfoDO = {}
      pageInfoDO.pageSize = this.pageSize
      pageInfoDO.curIndex = this.curIndex
      if (this.name === '团队') {
        const res = await bugTeamList({ pageInfoDO, status: this.statusCode, teamSearchInfo })
        if (res.code === 200) {
          this.$forceUpdate()
          this.tableData = res.data.map(item => { return { ...item, isSelected: false } })
          this.total = res.total
        }
      }
      if (this.name === '个人') {
        const res = await bugSelfList({ pageInfoDO, status: this.statusCode })
        if (res.code === 200) {
          this.$forceUpdate()
          this.tableData = res.data.map(item => { return { ...item, isSelected: false } })
          this.total = res.total
        }
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.curIndex = val
      this.bugGetTableList()
    },
    click_bugName(e) {
      this.bugQuery = JSON.parse(
        JSON.stringify(this.tableData.filter(value => value.id === e)[0])
      )
      this.drawerShow = true
    }
  }
}
</script>

<style scoped lang="scss">
.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 {
  text-align: center;
  color: #ffffff;
  padding: inherit;
  border-radius: 4px;
  margin-right: 14%;
  width: 35px;
  display: inline-block;
}
.bugNameSty:hover {
  cursor: pointer;
  color: #409EFF !important;
}
.bug_manage_drawer .el-drawer__header{
  margin-bottom: 15px;
}
.bug_manage_drawer {
  pointer-events: none;
  margin-top: 55px;
}
.bug_manage_drawer .el-drawer{
  pointer-events: auto;
}
</style>