thoth-frontend-test/src/views/projectManage/bugList/details/bugTableDialog.vue

<template>
  <div ref="bugBg">
    <div v-if="showQuery" class="Layout_space_between">
      <div class="bug-Status">快速筛选：
        <span v-for="item in statusList" :key="item.value">
          <span class="bug-statusList" :class="[statusNum === item.value ? 'bug-color' : 'bug-bgColor']" @click="bugGetQueryList(item)">{{ item.name }}</span>
        </span>
      </div>
      <el-popover placement="bottom-end" width="400" trigger="click" :visible-arrow="false">
        <div class="bug-query">
          <div class="bug-queryTitle"> 筛选项 </div>
          <span class="el-icon-close bug-statusList" @click="clone" />
        </div>
        <el-form label-position="left" :model="bugFormQuery" label-width="100px" style="max-height: 450px;overflow-y: auto;">
          <el-form-item label="优先级">
            <el-select v-model="bugFormQuery.priorityLevels" multiple filterable clearable placeholder="请选择" size="medium" style="width:100%;">
              <el-option v-for="item in priorityLevelEnumList" :key="item.code" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="缺陷状态">
            <el-select v-model="bugFormQuery.statusList" filterable multiple clearable placeholder="请选择" size="medium" style="width:100%;">
              <el-option v-for="item in bugEnumList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="缺陷等级">
            <el-select v-model="bugFormQuery.priorityList" filterable multiple clearable placeholder="请选择" size="medium" style="width:100%;">
              <el-option v-for="item in priorityEnumList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="缺陷类型">
            <el-cascader v-model="bugFormQuery.theBugTypes" :options="theBugTypeEnumList" :props="{ value:'code', label:'name', children: 'childrenEnums', multiple: true, emitPath: false}" clearable placeholder="请选择" size="medium" style="width:100%;" />
          </el-form-item>
          <el-form-item label="提报人">
            <searchPeople :value.sync="bugFormQuery.creators" :multiple="true" :size="'medium'" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="责任人">
            <search-people :value.sync="bugFormQuery.assigners" :multiple="true" :size="'medium'" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="修复人">
            <searchPeople :value.sync="bugFormQuery.currentHandlers" :multiple="true" :size="'medium'" style="width: 100%;" />
          </el-form-item>
          <div class="Reopen">
            <div style="width: 77px; padding-right: 12px; margin-right: 23px;">是否发生Reopen</div>
            <el-select v-model="bugFormQuery.reopenTimes" filterable placeholder="请选择" size="medium" style="width:73%;">
              <el-option v-for="item in reopens" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </div>
          <el-form-item v-if="dataShow !== 'taskName'" label="所属任务">
            <el-select v-model="bugFormQuery.taskIds" filterable multiple clearable placeholder="请选择" size="medium" style="width:100%;">
              <el-option v-for="item in taskEnumList" :key="item.id" :label="item.name" :value="item.id">
                <div class="belong-task">
                  <div class="task-id">{{ item.id }}</div>
                  <div class="modules-name">
                    <span class="name">{{ item.name }}</span>
                    <span v-if="item.bizIdString" class="modules">{{ item.bizIdString }}</span>
                  </div>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="bug-footer">
          <el-button class="bug-botton" @click="bugFormQuery = {}">重置</el-button>
          <el-button class="bug-botton" style="margin-left: 20px;" type="primary" @click="bugGetTableList(bugFormQuery, false, 2)">筛选</el-button>
        </div>
        <div slot="reference" class="bug-Status" style="cursor: pointer;" @click="bugClickIcon"><svg-icon v-if="bugIcon" icon-class="筛选" /><svg-icon v-if="!bugIcon" icon-class="筛选1" /></div>
      </el-popover>
    </div>
    <el-table
      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 :status-code="Number(scope.row.status)" :bug-data="scope.row" :status-obj="statusObj" />
        </template>
      </el-table-column>
      <el-table-column v-if="dataShow !== 'taskName'" 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
        :current-page.sync="currentPage"
        :page-sizes="[15, 20, 30]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </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="getBugList"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
const _ = require('lodash')
import { mapGetters } from 'vuex'
import statusChange from '@/views/projectManage/bugList/details/statusChange'
import { bugList, bugGetEnum, taskListGet } from '@/api/defectManage'
import BugDetails from './index'
import '@/styles/PublicStyle/index.scss'
import searchPeople from '@/components/select/searchPeople' // 人员select

export default {
  components: {
    statusChange,
    BugDetails,
    searchPeople
  },
  filters: {
    naspOut(value) {
      if (!value) return ''
      var da = value.split(/\s+/)
      return da[0]
    }
  },
  props: {
    noShow: {
      type: String,
      default: '',
      required: false
    },
    objId: {
      type: Object,
      default: null
    },
    showHide: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      bugIcon: true,
      statusNum: null,
      showQuery: false,
      theBugTypeEnumList: [],
      dataShow: '',
      priorityLevelEnumList: [], // 优先级
      bugEnumList: [], // 缺陷类型
      priorityEnumList: [], // 缺陷等级
      bugFormQuery: {
        theBugTypes: []
      },
      reopens: [{ code: 1, name: '是' }, { code: 0, name: '否' }],
      statusList: [{ value: null, name: '全部' }, { value: -1, name: '未完成' }, { value: 0, name: '待修复' }, { value: 2, name: '待测试' }, { value: 3, name: '已完成' }],
      tableData: [], // tableData
      taskEnumList: [], // 所属任务
      pageSize: 15, // 分页
      curIndex: 1, // 分页
      currentPage: 1,
      total: 0, // 总数
      bugQuery: '', // bug详情
      drawerShow: false, // drawer展示
      queryData: {}, // 查询条件
      data: {}, // 查询条件
      eleId: {},
      statusObj: null // 状态对象
    }
  },
  computed: {
    ...mapGetters(['bizId']),
    clickCount() {
      return this.$store.state.app.clickCount
    }
  },
  watch: {
    clickCount(newVal, oldVal) {
      this.drawerShow = false
    },
    noShow: {
      handler(newV, oldV) {
        this.dataShow = newV
      },
      deep: true,
      immediate: true
    },
    objId: {
      handler(newV, oldV) {
        if (newV !== null) {
          this.eleId = newV
        }
      },
      deep: true,
      immediate: true
    },
    bizId: {
      handler(newV) {
        if (newV === -1) return
        this.getBugSelect()
        this.bugGetTableList(this.queryData, false)
      },
      immediate: true
    },
    showHide: {
      handler(newV) {
        this.showQuery = newV
      },
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.bugGetTableList(this.eleId, false)
    })
  },
  methods: {
    async getBugSelect() { //  获取下拉菜单option
      const res = await bugGetEnum()
      if (res.code === 200) {
        this.priorityLevelEnumList = res.data.priorityLevelEnumList // 优先级
        this.bugEnumList = res.data.bugEnumList // status
        this.priorityEnumList = res.data.priorityEnumList // 缺陷等级
        this.theBugTypeEnumList = this.deleteChild(res.data.theBugTypeEnumList) // 缺陷类型
        this.theBugTypeEnumList[0].code = '0'
        this.statusObj = {
          bugEnumList: res.data.bugEnumList, // status
          repairResultEnumList: res.data.repairResultEnumList, // 修复结果
          bugReasonEnumList: res.data.bugReasonEnumList, // 缺陷原因
          theBugTypeEnumList: this.theBugTypeEnumList, // 缺陷类型
          priorityEnumList: res.data.priorityEnumList // 缺陷等级
        }
      }
      if (this.dataShow !== 'taskName') {
        const res = await taskListGet(this.eleId)
        if (res.code === 200) {
          this.taskEnumList = res.data || []
        }
      }
    },
    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
    },
    bugGetQueryList(e) {
      this.bugIcon = true
      this.statusNum = e.value
      this.$set(this.bugFormQuery, 'theBugTypes', '')
      this.bugFormQuery = {}
      this.bugGetTableList(this.bugFormQuery, false, 1)
    },
    bugGetTableList(e, index, vel) {
      this.queryData = e
      this.data = {}
      if (index) {
        this.currentPage = 1
        this.curIndex = 1
      }
      if (vel === 1) {
        this.data.status = this.statusNum
      } else if (vel === 2) {
        this.data = _.cloneDeep(this.queryData)
        this.statusNum = ''
      } else {
        this.data = _.cloneDeep(this.queryData)
        this.statusNum = null
      }
      this.data.bizId = this.bizId
      this.data.pageSize = this.pageSize
      this.data.curIndex = this.curIndex
      const query = Object.assign(this.data, this.eleId)
      bugList(query).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.map(item => { return { ...item, isSelected: false } })
          this.total = res.total
          this.$emit('curIndexs', this.data)
          this.$refs.bugBg.click()
        }
      })
    },
    bugClickIcon() {
      this.bugIcon = false
      this.statusNum = 44
    },
    getBugList() {
      this.bugGetTableList(this.queryData, false)
    },
    getBugSelfList() {
      this.bugGetTableList(this.queryData, false)
      this.$nextTick(() => {
        this.drawerShow = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.bugGetTableList(this.queryData, false)
    },
    clone() {
      this.bugIcon = false
      this.$refs.bugBg.click()
    },
    handleCurrentChange(val) { // 分页
      this.curIndex = val
      this.bugGetTableList(this.queryData, false)
    },
    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">
.Reopen {
  display: flex;
  margin-bottom: 22px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.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;
}
.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 lang="scss" scoped>
  .bug-Status {
    line-height: 60px;
    padding: 0 30px;
  }
  .bug-bgColor {
    color: #606266;
  }
  .bug-color {
    color: #409eff;
  }
  .bug-statusList:hover {
    color: #409eff;
    cursor: pointer;
  }
  .bug-statusList {
    margin: 0 10px;
  }
  .bug-query {
    text-align: center;
    display: flex;
    line-height: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
  }
  .bug-queryTitle {
    flex: 1;
  }
  .bug-footer {
    text-align: right;
    border-top: 1px solid #eeeeee;
  }
  .bug-botton {
    margin:10px 0 0;
  }
  .belong-task {
    max-width: 500px;
    display: flex;
    .modules-name {
    width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .modules {
    color: #999999;
  }
  .task-id {
    color: #999999;
    width: 80px;
    margin-right: 20px;
  }
  .name {
    color: #333333;
    margin-right: 20px;
  }
  }
</style>