thoth-frontend-test/src/views/quality/components/requireDrawer.vue

<template>
  <el-drawer :title="Statistics.label" :visible.sync="drawer_" :direction="direction" :modal="false" :class="{'drawer-box': showClass}" size="100%" :before-close="handleClose">
    <div style="height: calc(100vh - 200px); overflow: scroll; overflow-x: hidden;">
      <el-table :data="tableData" style="width: 100%;" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }" class="integration-num">
        <el-table-column label="优先级" min-width="100">
          <template slot-scope="scope">
            <div class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ 'P'+scope.row.priority }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="Statistics.typeStr + '名称'" min-width="250">
          <template slot-scope="scope">
            <div v-if="Statistics.typeStr === '缺陷'" class="drawer-id">{{ scope.row.bugId }}</div>
            <div v-if="Statistics.typeStr === '任务'" class="drawer-id">{{ scope.row.taskIdSting }}</div>
            <div v-if="Statistics.typeStr === '需求'" class="drawer-id">{{ scope.row.requirementDisplayId }}</div>
            <el-tooltip v-if="Statistics.typeStr === '需求' && scope.row.name.length >= 15 || Statistics.typeStr === '任务' && scope.row.name.length >= 15" class="item" effect="dark" :content="scope.row.name" placement="top">
              <div class="drawer-name" @click="jumper(scope.row)">{{ scope.row.name | ellipsis }}</div>
            </el-tooltip>
            <div v-else class="drawer-name" @click="jumper(scope.row)">{{ scope.row.name | ellipsis }}</div>
            <el-tooltip v-if="Statistics.typeStr === '缺陷' && scope.row.bugName.length >= 15" class="item" effect="dark" :content="scope.row.bugName" placement="top">
              <div class="drawer-name" @click="jumper(scope.row)">{{ scope.row.bugName | ellipsis }}</div>
            </el-tooltip>
            <div v-else class="drawer-name" @click="jumper(scope.row)">{{ scope.row.bugName | ellipsis }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="100">
          <template slot-scope="scope">
            <div v-if="Statistics.typeStr === '需求'">{{ scope.row.statusName }}</div>
            <div v-if="Statistics.typeStr === '任务'">{{ scope.row.statusString }}</div>
            <div v-if="Statistics.typeStr === '缺陷'">{{ querySatus(scope.row.status) }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="text-align: center;"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-drawer>
</template>

<script>
import { EncryptId } from '@/utils/crypto-js.js'
import { getRequirement } from '@/api/requirement.js'
import { taskList } from '@/api/taskIndex'
import { bugList, bugGetEnum } from '@/api/defectManage'
export default {
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 15) {
        return value.slice(0, 15) + '...'
      }
      return value
    }
  },
  props: {
    data: { type: Object, required: true },
    drawer: { type: Boolean, default: false }
  },
  data() {
    return {
      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
      Statistics: {}, // title
      direction: 'rtl',
      showClass: false,
      bugList: [],
      currentPage: 1,
      total: 0,
      paging: {
        curIndex: 1, // 分页
        pageSize: 10 // 分页
      },
      tableData: []
    }
  },
  computed: {
    drawer_: {
      get() { return this.drawer },
      set(v) {
        this.$emit('clone', v)
      }
    }
  },
  watch: {
    data: {
      handler(newV, oldV) {
        this.Statistics = newV
        this.currentPage = 1
        this.paging = {
          curIndex: 1, // 分页
          pageSize: 10 // 分页
        }
        this.getTableData()
      },
      immediate: true
    }
  },
  created() {
    this.bugGetEnum()
  },
  methods: {
    async getTableData() {
      if (this.Statistics.idList !== undefined && this.Statistics.idList.length > 0) {
        this.paging.ids = this.Statistics.idList
        if (this.Statistics.typeStr === '需求') {
          const res = await getRequirement(this.paging)
          if (res.code === 200) {
            this.tableData = res.data.list
            this.total = res.data.total
          }
        } else if (this.Statistics.typeStr === '任务') {
          const res = await taskList(this.paging)
          if (res.code === 200) {
            this.tableData = res.data
            this.total = res.total
          }
        } else if (this.Statistics.typeStr === '缺陷') {
          const res = await bugList(this.paging)
          if (res.code === 200) {
            this.tableData = res.data
            this.total = res.total
          }
        }
      } else {
        this.tableData = []
      }
    },
    querySatus(val) {
      let data = ''
      this.bugList.map(item => {
        if (val === item.code) {
          data = item.name
        }
      })
      return data
    },
    jumper(val) {
      const bizId_id = EncryptId(`${val.bizId}_${val.id}`)
      const newTab = this.$router.resolve({ name: this.Statistics.typeStr + '详情', query: { bizId_id: bizId_id }})
      window.open(newTab.href, '_blank')
    },
    async bugGetEnum() {
      const res = await bugGetEnum()
      if (res.code === 200) {
        this.bugList = res.data.bugEnumList
        this.showClass = true
      }
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.paging.curIndex = val
      this.getTableData()
    },
    handleClose(done) {
      this.$emit('clone')
    }
  }
}
</script>

<style lang="scss" scoped>
>>> :focus{outline:0;}
.integration-num {
  margin: 20px;
}

.drawer-name:hover {
  color: #409eff;
  cursor: pointer;
}

.div_priority {
  color: #ffffff;
  width:fit-content;
  padding: 0 12px;
  border-radius: 4px;
  margin-left: 4px;
}
.drawer-id {
  color: rgb(167, 174, 188);
  font-size: 10px;
}
>>>.el-drawer__header {
    color: #444;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0px;
    padding: 20px 30px 0;
}
.drawer-box {
  box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
}
 .el-drawer__wrapper {
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    overflow: hidden;
    margin: 0;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
>>>.el-drawer__container {
    left: 0;
    right: 0;
    width: 50%;
}
>>>.el-table td, .el-table th {
    padding: 5px 0;
}
</style>