thoth-frontend-test/src/views/workbench/team/components/needsList.vue

<template>
  <div>
    <div class="table-top">
      <label>{{ name }}的需求</label>
      <span class="new-tab-open">
        <el-switch
          v-model="newTabOpen"
          active-text="新标签页跳转"
        />
      </span>
    </div>
    <el-table
      ref="planTable"
      :data="needsDataList"
      style="width: 100%;"
      size="mini"
      row-key="id"
      :header-cell-style="{ color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500'}"
      :row-style="{ fontSize: '14px' }"
      show-overflow-tooltip="true"
      :header-row-style="{height: '50px'}"
    >
      <el-table-column label="优先级" fixed prop="priority" width="100" sortable align="center">
        <template slot-scope="scope" style="text-align: center;">
          <span class="div_priority" :class="scope.row.priorityName">
            {{ scope.row.priorityName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="需求名称" fixed min-width="300" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="table-project-name" @click="needs_link(scope.row.id)">
            <span class="id">
              {{ scope.row.requirementDisplayId }}
              <img v-if="scope.row.type === 1" :src="extraUrgent" style="height: 17px;padding: 0 10px;">
              <div
                v-if="scope.row.optionsObject && scope.row.optionsObject.tagsType !==-1 && scope.row.optionsObject.remindTags && scope.row.status !== -2"
                :class="'tag-tip'+scope.row.optionsObject.tagsType"
              >{{ scope.row.optionsObject.remindTags }}
              </div>
              <div v-if="scope.row.status === -2" class="tag-tip1">hold</div>
            </span>
            <span class="name">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="150" align="left">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.status"
            :class="[
              {
                'bottom-i': scope.row.status <= 0 || scope.row.status >= 30,
                'bottom-u': scope.row.status === 10 || scope.row.status === 16,
                'bottom-y': scope.row.status === 20
              },
              'status'+scope.row.status
            ]"
            class="btnSize"
            size="mini"
            @change="changeStatus(scope.row)"
          >
            <el-option v-for="item in scope.row.availableStatusList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="PM" width="150" align="center" show-overflow-tooltip>
        <template v-if="scope.row.pmMemberInfoResponse" slot-scope="scope">
          <span>{{ scope.row.pmMemberInfoResponse.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="需求方向" min-width="150" align="center" show-overflow-tooltip>
        <template v-slot="scope">
          {{ scope.row.rqmtOrntNames }}
        </template>
      </el-table-column>
      <el-table-column label="跟版客户端" width="200" align="center" prop="referredClientTypeName" show-overflow-tooltip />
      <el-table-column label="PRD链接" width="300" align="left" prop="mrdUrl" show-overflow-tooltip>
        <template v-slot="scope">
          <el-link :href="scope.row.mrdUrl" class="mrdUrl" target="_blank">{{ scope.row.mrdUrl }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="交付日期" min-width="200" align="center" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.optionsObject === null? '' :scope.row.optionsObject.endTime }}</template>
      </el-table-column>
      <el-table-column label="任务数量" width="100" align="center" prop="taskCount" show-overflow-tooltip />
      <el-table-column label="缺陷数量" width="100" align="center" prop="bugCount" show-overflow-tooltip />
    </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>
  </div>
</template>
<script>
import { configShowRequireStatusEnum, updateRequirementStatus, getRequirement } from '@/api/requirement'
import extraUrgent from '@/assets/extraUrgent.png'
export default {
  props: {
    idList: {
      type: Array,
      default: () => [],
      required: true
    },
    name: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      newTabOpen: false, // 是否新的tab页打开
      extraUrgent: extraUrgent, // 紧急图片
      needsDataList: [], // 需求列表
      allStatus: [], // 状态列表
      pages: {
        pageSize: 10,
        curIndex: 1
      },
      total: 0
    }
  },
  watch: {
    idList: {
      handler(newV) {
        this.getNeedsList()
      },
      deep: true
    },
    name: {
      handler(newV) {},
      immediate: true
    }
  },
  created() {
    this.getTaskStatus()
  },
  methods: {
    setStatus(val) {
      this.status = val
      this.pages.curIndex = 1
      this.getNeedsList()
    },
    handleSizeChange(val) {
      this.pages.pageSize = val
      this.getNeedsList()
    },
    handleCurrentChange(val) {
      this.pages.curIndex = val
      this.getNeedsList()
    },
    async getTaskStatus() { // 获取需求的所有状态
      const res1 = await configShowRequireStatusEnum(localStorage.getItem('bizId'))
      if (res1.code === 200) {
        this.allStatus = []
        this.allStatus = res1.data.requirementStatus
      }
    },
    async getNeedsList() { // 获取需求列表
      if (this.idList.length === 0) {
        this.needsDataList = []
        return
      }
      const res = await getRequirement({ ids: this.idList, ...this.pages })
      if (res && res.code === 200) {
        this.needsDataList = res.data.list
        this.total = res.data.total
      }
    },
    async changeStatus(e) { // 状态改变
      const modifier = localStorage.getItem('username')
      const res = await updateRequirementStatus({ id: e.id, status: e.status, modifier: modifier })
      if (res.code === 200) {
        this.$message({ message: '修改成功', type: 'success', offset: 150 })
        this.getNeedsList()
      }
    },
    needs_link(id) {
      if (this.newTabOpen) {
        const newTab = this.$router.resolve({ name: '需求详情', query: { id: id }})
        window.open(newTab.href, '_blank')
      } else {
        this.$router.push({ name: '需求详情', query: { id: id }})
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin setStatus($color) {
  input {
    color:$color;
    border: 1px solid $color;
  }
  >>> .el-select__caret{
    color:$color;
  }
  >>> .el-input__inner{
    color:$color;
    border-color: $color;
  }
  >>> .el-input__inner:focus {
    border-color: $color;
  }
}
>>>.el-row .el-col {
  margin: 10px 0;
}
.table-top {
  color: #333333;
  font-size: 16px;
  width: 100%;
  padding: 10px 15px 0 15px;
  display: flex;
  justify-content: space-between;
}
.color-blue {
	color:#409EFF;
}
.P0 {
  background-color: #F56C6C;
}
.P1 {
  background-color: #FF8952;
}
.P2 {
  background-color: #F5E300;
}
.P3 {
  background-color: #7ED321;
}
.P4 {
  background-color: #61D3B8;
}
.P5 {
  background-color: #69B3FF;
}
.P6 {
  background-color: #BDBDBD;
}
.status0 {
  @include setStatus(#409EFF)
}
.status10 {
  @include setStatus(#FF8952)
}
.status16 {
  @include setStatus(#FF8952)
}
.status20 {
  @include setStatus(#FF8952)
}
.status30 {
  @include setStatus(#FF8952)
}
.status40 {
  @include setStatus(#FF8952)
}
.status100 {
  @include setStatus(#FF8952)
}
.status150 {
  @include setStatus(#7ED321)
}
.tag-tip0,.tag-tip1 {
  margin-left: 5px;
  display: inline-block;
  padding: 0 5px;
  border-radius: 8px;
  height: 16px;
  line-height: 16px;
}
.tag-tip0 {
  background: rgba(255,137,82,0.15);
  color: rgba(255,137,82,1);
}
.tag-tip1{
  background: rgba(245,108,108,0.17);
  color: rgba(245,108,108,1);
}
.div_priority {
  text-align: center;
  color: #ffffff;
  padding: inherit;
  border-radius: 4px;
  width: 40px;
  display: inline-block;
}
.table-project-name {
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .id {
    color: #A7AEBC;
    font-size: 10px;
  }
  .name {
    font-size: 14px;
    color: #666666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.mrdUrl{
  cursor: pointer;
  color: #69B3FF;
}
>>>.btnSize .el-input--suffix .el-input__inner {
    padding-right: 10px;
    padding-left: 10px;
}
.bottom-i { width: 73px; }
.bottom-u { width: 100px; }
.bottom-y { width: 110px; }
</style>