thoth-frontend-test/src/views/projectManage/requirement/details/index.vue

<template>
  <el-container>
    <el-header style="margin: 2%;" class="layout_header">
      <div>
        <span style="font-size: 16px;color:#333333">{{ '需求：' + requirement.name }}</span>
        <el-dropdown
          size="mini"
          split-button
          style="margin-left: 10px"
          @command="updateRequirementStatus"
        >
          <span class="el-dropdown-link">{{ getStatusName() }}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item,index) in searchInfo.requirementStatus"
              :key="index"
              :command="item"
            >{{ item.msg }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div style="display: inline-block;float: right">
          <el-button size="mini" style="margin-left: 10px" @click="deleteRequirement">删除需求</el-button>
          <el-button type="primary" size="mini" @click="createTask">新建</el-button>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="52%" style="margin: 0% 2% 2% 2%;" class="layout_aside">
        <div style="font-size: 18px">
          <b style="color: #409EFF">I</b>数据统计
        </div>
        <div v-loading="loading.task || loading.bug" class="div_statistics" style="margin: 2%">
          <el-container style="border-bottom: 1px solid #D8D8D8">
            <el-aside width="30%" style="border-right: 2px solid #BBBBBB">
              <div style="width:100%;text-align: center;">
                <div style="font-size: 16px;margin-top: 26px">任务数量</div>
                <div style="font-size: 72px">{{ statistics.task.totalCount }}</div>
                <div
                  style="font-size: 14px;color: rgba(245,108,108,1);margin-bottom: 16px"
                >{{ '已延期'+statistics.task.delayCount+'个' }}</div>
              </div>
            </el-aside>
            <el-aside width="70%">
              <requirement-chart
                :chart-id="'taskCount'"
                :option="taskOption"
                style="position: relative;bottom: 30px"
              />
            </el-aside>
          </el-container>
          <el-container>
            <el-aside width="30%" style="border-right: 2px solid #BBBBBB">
              <div style="width:100%;text-align: center;">
                <div style="font-size: 16px;margin-top: 26px">任务数量</div>
                <div style="font-size: 72px">{{ statistics.bug.totalCount }}</div>
                <div
                  style="font-size: 14px;color: rgba(245,108,108,1);margin-bottom: 16px"
                >{{ '以后修复'+statistics.bug.fixInFutureCount+'个' }}</div>
              </div>
            </el-aside>
            <el-aside width="70%">
              <requirement-chart
                :chart-id="'bugCount'"
                :option="bugOption"
                style="position: relative;bottom: 30px"
              />
            </el-aside>
          </el-container>
        </div>
      </el-aside>
      <el-aside width="42%" style="margin: 0% 2% 2% 0;" class="layout_aside">
        <div style="font-size: 18px">
          <b style="color: #409EFF;">I</b>基础信息
        </div>
        <div
          v-loading="loading.info"
          style="font-size: 14px;color: #666666;margin-top: 4%"
          class="div_requirment_info"
        >
          <el-row>
            <el-col :span="6">归属的项目:</el-col>
            <el-col :span="18">
              <div
                style="display: inline-block;color: #409EFF"
              >{{ requirement.belongingProjectName }}</div>
              <el-button
                style="position: absolute;top: 5px;right: 0"
                type="primary"
                size="mini"
                @click="updateDialogVisible = true"
              >修改</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">业务线:</el-col>
            <el-col :span="18">{{ requirement.bizName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">优先级:</el-col>
            <el-col :span="18">{{ requirement.priorityName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">需求来源:</el-col>
            <el-col :span="18">{{ requirement.sourceTypeName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">PM:</el-col>
            <el-col :span="18">{{ getPmName() }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">PRD链接:</el-col>
            <el-col :span="18">
              <el-link type="primary" :href="requirement.mrdUrl">{{ requirement.mrdUrl }}</el-link>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">是否跟版:</el-col>
            <el-col :span="18">{{ requirement.dependOnRelease? '是':'否' }}</el-col>
          </el-row>
          <el-row v-if="requirement.dependOnRelease">
            <el-col :span="6">涉及的客户端:</el-col>
            <el-col :span="18">{{ getAppClientName() }}</el-col>
          </el-row>
        </div>
      </el-aside>
    </el-container>
    <el-main id="requirement_details" style="margin: 0 2% 0 2%;padding: 0" class="layout_main">
      <div style="font-size: 18px;margin: 2%">
        <b style="color: #409EFF;">I</b>任务
      </div>
      <el-radio-group v-model="radio" size="mini" style="float: right;margin: 0 1% 1% 0">
        <el-radio-button label="列表" />
        <el-radio-button label="甘特图" />
      </el-radio-group>
      <br>
      <el-table
        v-if="radio === '列表'"
        v-loading="loading.table"
        :data="tableData"
        style="width: 100%;"
        highlight-current-row
        :header-cell-style="{ background: '#6AB4FF', color: '#FFFFFF',textAlign: 'center'}"
        :cell-style="{textAlign: 'center'}"
      >
        <el-table-column prop="name" label="任务名" min-width="20%">
          <template v-slot="scope">
            <div style="cursor: pointer;" @click="getToTaskDetails(scope.row.id)">{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="beginTime" label="排期" min-width="15%">
          <template
            v-slot="scope"
          >{{ getSchedule(scope.row) }}</template>
        </el-table-column>
        <el-table-column prop="statusString" label="状态" min-width="10%">
          <template v-slot="scope">
            <div style="color: #FF9500">{{ scope.row.statusString }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="stageString" label="任务健康状态" min-width="12%">
          <template v-slot="scope">{{ scope.row.stageString }}</template>
        </el-table-column>
        <el-table-column prop="rate" label="任务进展" min-width="15%">
          <template v-slot="scope">
            <el-progress :percentage="Number(scope.row.rate?scope.row.rate.replace(/%/g,''):0)" />
          </template>
        </el-table-column>
        <el-table-column prop="rdObject" label="开发负责人" min-width="10%">
          <template v-slot="scope">{{ scope.row.rdObject?scope.row.rdObject.name:'空' }}</template>
        </el-table-column>
        <el-table-column prop="qaObject" label="测试负责人" min-width="10%">
          <template v-slot="scope">{{ scope.row.qaObject?scope.row.qaObject.name:'空' }}</template>
        </el-table-column>
        <el-table-column prop="rdList" label="开发" min-width="10%">
          <template v-slot="scope">{{ getQaOrRdNameList(scope.row.rdList) }}</template>
        </el-table-column>
        <el-table-column prop="qaList" label="测试" min-width="10%">
          <template v-slot="scope">{{ getQaOrRdNameList(scope.row.qaList) }}</template>
        </el-table-column>
      </el-table>
      <div style="margin:0 2%;padding: 2% 0;border-bottom: 1px solid #D8D8D8;font-size: 14px;color: #333333">排期汇总：{{ getScheduleCollect() }}</div>
      <el-row style="margin: 2%;font-size: 14px;color: #333333">
        <el-col :span="8">
          <div v-for="(item,index) in task.preOnlineVersion" :key="index" style="margin-bottom:10px"> <span :style="{visibility: index===0?'visible ':'hidden'}">预期上线版本：</span>{{ item }}</div>
        </el-col>
        <el-col :span="16">
          <div v-for="(item,index) in task.preOnlineVersion" :key="index" style="margin-bottom:10px"> <span :style="{visibility: index===0?'visible ':'hidden'}">实际上线版本：</span>{{ item }}</div>
        </el-col>
      </el-row>
    </el-main>
    <el-main style="margin: 2%;" class="layout_main requirement_details_layout_main">
      <div style="font-size: 18px;margin-bottom: 2%">
        <b style="color: #409EFF;">I</b>评论
      </div>
      <div>
        <div v-for="(item,index) in comments" :key="index" class="animated bounceInRight">
          <div
            style="font-size:14px;color:#333B4A;display: inline-block;"
          >{{ item.commentInfo.name }}</div>
          <div
            style="margin-left:20px;display: inline-block;color: #9B9B9B;font-size:12px"
          >{{ item.commentInfo.gmtCreater }}</div>
          <p
            style="font-size:14px;color:#333B4A;margin-top: 10px;white-space: pre-line;"
          >{{ item.commentInfo.content }}</p>
          <br>
        </div>
        <el-input
          v-model="commentContent"
          type="textarea"
          placeholder="请输入评论内容"
          maxlength="300"
          show-word-limit
          :autosize="{ minRows: 3, maxRows: 5}"
          style="margin: 2% 0;"
        />
        <el-button type="primary" size="small" style="float: right" @click="addComment">发表评论</el-button>
      </div>
    </el-main>
    <requirement-update
      title="编辑需求"
      :data="requirement"
      :visible="updateDialogVisible"
      :info="searchInfo"
      @cancel="updateDialogVisible=false"
      @confirm="getRequirementById();updateDialogVisible=false"
    />
  </el-container>
</template>

<script>
import {
  getRequirementById,
  showRequirementEnum,
  getTaskStatusMapInfo,
  getBugStatusMapInfo,
  getTaskByRequireId,
  deleteRequirement,
  updateRequirementStatus,
  getCommentList,
  addComment
} from '@/api/requirement.js'
import RequirementChart from '@/components/chart/index.vue'
import RequirementUpdate from '@/views/projectManage/requirement/list/create.vue'

export default {
  components: {
    RequirementChart,
    RequirementUpdate
  },
  props: {
    id: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      loading: {
        table: true,
        info: true,
        task: true,
        bug: true
      },
      radio: '列表',
      updateDialogVisible: false,
      tableData: null,
      statistics: {
        task: {
          totalCount: 0,
          delayCount: 0
        },
        bug: {
          totalCount: 0,
          fixInFutureCount: 0
        }
      },
      belongingProject: { msg: '不存在' },
      status: {},
      requirement: {
        name: ''
      },
      projectOb: {},
      bizTypeOb: {},
      appClientOb: {},
      requirementStatusOb: {},
      searchInfo: {
        belongingProject: [],
        sourceType: [],
        bizType: [],
        priority: [],
        requirementStatus: []
      },
      taskOption: {
        color: ['#69B3FF'],
        title: {
          show: false
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['未开始', '开发中', '测试中', '已上线'],
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            label: {
              show: true,
              position: 'inside'
            },
            data: []
          }
        ]
      },
      bugOption: {
        color: ['#69B3FF'],
        title: {
          show: false
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['待开发', '开发中', '待测试', '已完成', 'Reopen'],
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            label: {
              show: true,
              position: 'inside'
            },
            data: []
          }
        ]
      },
      comments: [],
      commentContent: null,
      task: {
        reqStartTime: null,
        reqEndTime: null,
        preOnlineVersion: []
      }
    }
  },
  mounted() {
    this.showRequirementEnum().then(res => {
      this.getRequirementById()
    })
    this.getTaskStatusMapInfo()
    this.getBugStatusMapInfo()
    this.getTaskByRequireId()
    this.getCommentList()
  },
  methods: {
    getScheduleCollect() {
      if (this.task.reqStartTime && this.task.reqEndTime) {
        return this.task.reqStartTime.substring(0, 10).replace(/-/, '年').replace(/-/, '月') + '日' + ' ~ ' + this.task.reqEndTime.substring(0, 10).replace(/-/, '年').replace(/-/, '月') + '日'
      }
      return ''
    },
    getSchedule(row) {
      if (row.beginTime && row.endTime) {
        return row.beginTime.substring(2, 10).replace(/-/g, '/') + ' ~ ' + row.endTime.substring(2, 10).replace(/-/g, '/')
      }
      return '无'
    },
    getCommentList() {
      getCommentList({ type: 4, joinId: this.id }).then(res => {
        this.comments = res.data
        this.commentContent = ''
      })
    },
    addComment() {
      if (!this.commentContent) {
        this.$message.warning('评论不能为空')
        return
      }
      const user = localStorage.getItem('username')
      addComment({
        commentInfo: { joinId: this.id, type: 4, content: this.commentContent },
        user: { ename: user }
      }).then(res => {
        if (res.code === 200) {
          this.getCommentList()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    getStatusName() {
      return this.requirementStatusOb[this.requirement.status]
    },
    getRequirementById() {
      this.loading.info = true
      getRequirementById({
        id: this.id
      }).then(res => {
        this.requirement = res.data
        this.loading.info = false
      })
    },
    getTaskStatusMapInfo() {
      getTaskStatusMapInfo({
        requireId: this.id
      }).then(res => {
        const name = []
        const data = []
        for (const i in res.data.statusInfoList) {
          name.push(res.data.statusInfoList[i].statusString)
          data.push(res.data.statusInfoList[i].count)
        }
        this.statistics.task = res.data
        this.taskOption.xAxis[0].data = name
        this.taskOption.series[0].data = data
        this.taskOption = JSON.parse(JSON.stringify(this.taskOption))
        this.loading.task = false
      })
    },
    getBugStatusMapInfo() {
      getBugStatusMapInfo({
        requireId: this.id
      }).then(res => {
        const name = []
        const data = []
        for (const i in res.data.statusInfoList) {
          name.push(res.data.statusInfoList[i].statusString)
          data.push(res.data.statusInfoList[i].count)
        }
        this.statistics.bug = res.data
        this.bugOption.xAxis[0].data = name
        this.bugOption.series[0].data = data
        this.bugOption = JSON.parse(JSON.stringify(this.bugOption))
        this.loading.bug = false
      })
    },
    getTaskByRequireId() {
      getTaskByRequireId({
        id: this.id
      }).then(res => {
        this.task = res.data
        this.tableData = res.data.taskDetails
        this.loading.table = false
      })
    },
    getPmName() {
      const names = []
      for (const i in this.requirement.pm) {
        names.push(this.requirement.pm[i].name)
      }
      return names.join(',')
    },
    getAppClientName() {
      const names = []
      for (const i in this.requirement.referredClientType) {
        names.push(this.appClientOb[this.requirement.referredClientType[i]])
      }
      return names.join('\n')
    },
    showRequirementEnum() {
      return showRequirementEnum().then(res => {
        this.searchInfo = res.data
        for (const i in this.searchInfo.belongingProject) {
          this.projectOb[
            this.searchInfo.belongingProject[i].code
          ] = this.searchInfo.belongingProject[i].msg
        }
        for (const i in this.searchInfo.bizType) {
          this.bizTypeOb[
            this.searchInfo.bizType[i].code
          ] = this.searchInfo.bizType[i].msg
        }
        for (const i in this.searchInfo.appClient) {
          this.appClientOb[
            this.searchInfo.appClient[i].code
          ] = this.searchInfo.appClient[i].msg
        }
        for (const i in this.searchInfo.requirementStatus) {
          this.requirementStatusOb[
            this.searchInfo.requirementStatus[i].code
          ] = this.searchInfo.requirementStatus[i].msg
        }
      })
    },
    deleteRequirement() {
      const user = localStorage.getItem('username')
      this.$confirm('此操作将永久删除该需求, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteRequirement({
            id: this.id,
            modifier: user
          }).then(res => {
            if (res.code === 200) {
              this.$router.push({ name: '需求' })
            } else {
              this.$message.warning(res.msg)
            }
          })
        })
        .catch(() => {})
    },
    createTask() {},
    updateRequirementStatus(status) {
      const modifier = localStorage.getItem('username')
      updateRequirementStatus({ id: this.id, status: status.code, modifier: modifier }).then(
        res => {
          if (res.code === 200) {
            this.getRequirementById()
          } else {
            this.$message.warning(res.msg)
          }
        }
      )
    },
    getQaOrRdNameList(list) {
      const arr = []
      for (const i in list) {
        arr.push(list[i].name)
      }
      return arr.join(',')
    },
    getToTaskDetails(id) {
      // this.$router.push({ name: '任务', params: { id: id + '' }})
    }
  }
}
</script>

<style scoped>
.div_requirment_info .el-row .el-col {
  margin: 10px 0;
}
.layout_header,
.layout_aside,
.layout_main {
  border-radius: 8px;
  background-color: #ffffff;
}
.div_statistics > .el-container {
  margin: 0;
}
.layout_aside,
.layout_main {
  padding: 2%;
}
.layout_header {
  line-height: 60px;
}
.requirement_info::before {
  height: 0px;
}
</style>

<style>
.requirement_details_layout_main .el-table__body tr:hover td {
  color: #409eff;
  background: #eef0f5;
} /*hover时字体, 背景颜色*/
</style>