thoth-frontend-test/src/views/projectManage/taskList/taskViewDetail.vue

<template>
  <div class="bg-project" @click="display = false">
    <el-container>
      <el-header class="main-header">
        <div class="top-page-title">
          <el-tooltip :disabled="form_query.name && form_query.name.length > 20 ? false : true" effect="dark" :content="form_query.name" placement="bottom">
            <div class="header-title">任务 : {{ form_query.name | ellipsis(10) }}</div>
          </el-tooltip>
          <el-dropdown placement="bottom" @command="updateStatus">
            <el-button size="mini" plainclass="el-dropdown-link drop_down">
              {{ getStatus.msg }}
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" align="center">
              <el-dropdown-item
                v-for="item in allStatus"
                :key="item.msg"
                :command="{value:item.code,label:item.msg}"
                :disabled="form_query.status === item.code? true: false"
              >{{ item.msg }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="top-tabs">
          <el-tabs v-model="activeName">
            <el-tab-pane label="概览" name="1" />
            <el-tab-pane label="缺陷" name="2" />
            <el-tab-pane label="报告" name="3" />
            <el-tab-pane label="统计" name="4" />
          </el-tabs>
        </div>
        <div class="top-control">
          <el-dropdown placement="bottom">
            <i class="el-icon-circle-plus icon-add" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="created_bug()">新建缺陷</el-dropdown-item>
              <el-dropdown-item @click.native="createReport(1, form_query)">新建提测报告</el-dropdown-item>
              <el-dropdown-item @click.native="createReport(2, form_query)">新建测试报告</el-dropdown-item>
              <el-dropdown-item @click.native="createReport(3, form_query)">新建准出报告</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="line" />
          <span style="vertical-align: bottom; cursor: pointer; color: #6F7C93;" @click.stop="setChild(), display = true"><img style="width: 24px; display: inline-block;" :src="image_url">&nbsp; {{ num }} &nbsp;</span>
          <div class="line" />
          <i class="el-icon-setting icon-delete" @click="open_created" />
          <div class="line" />
          <i class="el-icon-delete icon-delete" @click="deleteVisible = true" />
        </div>
      </el-header>
      <!-- 概览 -->
      <el-container v-show="activeName === '1'" class="is-vertical">
        <section class="main-section">
          <div class="el-main-title">
            <div class="title-left-icon" />
            <div class="title-left-name">基础信息</div>
          </div>
          <div class="detail-info">
            <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="right" label-width="100px">
              <el-form-item label="所属项目：">
                <el-select v-model="form_query.projectId" placeholder="请选择" @change="changeArea">
                  <el-option v-for="(item,index) in belongProjectList" :key="item.name + index" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="所属需求：">
                <el-select v-model="form_query.requireId" placeholder="请选择" @change="changeArea">
                  <el-option v-for="(item,index) in requireList" :key="item.name + index" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="所属模块：">
                <span class="module">{{ form_query.moduleInfoName }}</span>
              </el-form-item>
            </el-form>
            <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="right" label-width="100px">
              <el-form-item label="开发负责人：">
                <search-people :value.sync="form_query.rdOwner" @change="changeArea" />
              </el-form-item>
              <el-form-item label="测试负责人：">
                <search-people :value.sync="form_query.qaOwner" @change="changeArea" />
              </el-form-item>
              <el-form-item label="是否跟版：">
                <el-select v-model="form_query.followVersion" size="small" filterable placeholder="请选择" @change="changeArea">
                  <el-option v-for="(item,index) in dependList" :key="item.msg + index" :label="item.msg" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-form>
            <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="right" label-width="100px">
              <el-form-item label="跟版客户端：">
                <el-select v-if="form_query.followVersion === 1" v-model="form_query.involveApp" size="small" filterable placeholder="请选择" @change="changeArea">
                  <el-option v-for="(item,index) in appClient" :key="item.msg + index" :label="item.msg" :value="item.code" />
                </el-select>
              </el-form-item>
              <el-form-item label="任务进度：">
                <div class="form-progress">
                  <el-progress :percentage="Number(form_query.rate && form_query.rate.substring(0,4)) || 0" color="#409eff" />
                </div>
              </el-form-item>
            </el-form>
          </div>
        </section>
        <section class="main-section">
          <div class="el-main-title">
            <div class="title-left-icon" />
            <div class="title-left-name">任务计划</div>
          </div>
          <div>
            <schedule-list :id="taskId" :type-list="taskScheduleEvent" />
          </div>
        </section>
        <section class="main-section">
          <div class="el-main-title">
            <div class="title-left-icon" />
            <div class="title-left-name">任务描述</div>
          </div>
          <div>
            <text-area :id="'pro-desc'" :value.sync="form_query.description" :empty-text="'点击'" :input-button="'添加描述'" @change="changeArea" />
          </div>
        </section>
        <section class="main-section">
          <div class="el-main-title">
            <div class="title-left-icon" />
            <div class="title-left-name">评论</div>
          </div>
          <div class="detail-info">
            <ul class="comment-main">
              <li v-for="(item,index) in comments" :key="'comment'+index">
                <span class="comment-name">{{ item.commentInfo.name }}</span>
                <span class="comment-gmtCreater">{{ item.commentInfo.gmtCreater }}</span>
                <span class="comment-content">{{ item.commentInfo.content }}</span>
              </li>
            </ul>
            <el-input
              v-model="commentContent"
              type="textarea"
              placeholder="请输入评论内容"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 3, maxRows: 5}"
              style="margin-bottom: 20px"
            />
            <el-row>
              <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addComment">发表评论</el-button></el-col>
            </el-row>
          </div>
        </section>
      </el-container>
      <!-- 概览 -->
      <!-- 缺陷 -->
      <el-container v-show="activeName === '2'" class="is-vertical">
        <section class="main-section">
          <bugs-list />
        </section>
      </el-container>
      <!-- 缺陷 -->
      <!-- 报告 -->
      <el-container v-show="activeName === '3'" class="is-vertical">
        <section class="main-section">
          <report-list />
        </section>
      </el-container>
      <!-- 报告 -->
      <!-- 统计 -->
      <el-container v-if="activeName === '4'" class="is-vertical">
        <section class="main-section" />
      </el-container>
      <!-- 统计 -->
      <!-- 新建（bug） -->
      <createdBug v-if="bug_open" ref="createdBug" />
      <Test-report v-if="dialogTest" ref="TestReport" />
      <Daily-report v-if="dialogDaily" ref="DailyReport" />
      <Client-report v-if="dialogClient" ref="ClientReport" />
      <!-- 新建 -->
      <!-- 编辑 -->
      <open-dialog v-if="updateVisible" ref="task_createdUpdata" />
      <!-- 编辑 -->
      <!-- 删除 -->
      <el-dialog :visible.sync="deleteVisible" width="30%" center :close-on-click-modal="false">
        <div align="center">确定要删除此 {{ form_query.name }} 任务吗？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteVisible = false">关 闭</el-button>
          <el-button type="primary" @click="taskDelete()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除 -->
      <normal-dialog :show-dialog.sync="statusDialog" :title="'状态变更：已上线'" :width="'50%'" @confirm="confirmStatus()">
        <div class="dialog-change-status">
          <span>实际上线时间：</span>
          <el-date-picker v-model="changeStatusDate" type="date" style="width:100%;" placeholder="选择日期" format="yyyy-MM-dd HH:mm:ss" />
        </div>
      </normal-dialog>
      <drawer
        ref="drawer"
        title="项目成员"
        center
        :display.sync="display"
        width="28%"
        :delete="form_query"
        :types="false"
        :inner="true"
        :mask="false"
        @childValInput="childVal"
        @click.stop
      />
    </el-container>
  </div>
</template>
<script>
const _ = require('lodash')
import {
  taskGet,
  configShowTaskEnum,
  tasktaskDelete,
  taskUpdate,
  commentCreate,
  commentList,
  configShowRequirementVersionEnum
} from '@/api/taskIndex'
import { projectListProject } from '@/api/requirement.js'
import searchPeople from '@/components/select/searchPeople'
import textArea from '@/components/input/textArea'
import drawer from '@/views/projectManage/Drawer'
import image_url from '@/assets/home_images/home_u.png'
import createdBug from '@/views/projectManage/bugList/file/createdBug'
import normalDialog from '@/components/dialog/normalDialog'
import openDialog from '@/views/projectManage/dialog_vue'
import scheduleList from './components/scheduleList'
import bugsList from './components/bugsList'
import reportList from './components/reportList'
import TestReport from '@/views/Platform/presentation/Templates/TestReport' // 提测
import DailyReport from '@/views/Platform/presentation/Templates/DailyReport' // 日报
import ClientReport from '@/views/Platform/presentation/Templates/ClientReport' // 准出
export default {
  components: {
    searchPeople,
    normalDialog,
    textArea,
    drawer,
    createdBug,
    openDialog,
    scheduleList,
    bugsList,
    reportList,
    TestReport,
    DailyReport,
    ClientReport
  },
  filters: {
    ellipsis(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  data() {
    return {
      activeName: '1', // 顶部tab切换
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      textarea: '', // 评论
      taskId: Number(this.$route.query.id), // 任务id
      allStatus: [], // 任务所有状态
      belongProjectList: [], // 所属项目列表
      requireList: [], // 所属需求列表
      appClient: [], // 跟版客户端列表
      taskScheduleEvent: [], // 排期类型
      dependList: [{ msg: '否', code: 2 }, { msg: '是', code: 1 }], // 是否跟版
      statusDialog: false, // 修改状态弹框
      changeStatusDate: null, // 状态改变时间
      form_query: {},
      display: false, // 设置成员弹框
      num: 0, // 成员数量
      image_url: image_url, // 成员icon
      updateVisible: false, // 编辑任务弹框
      deleteVisible: false, // 删除任务弹框
      bug_open: false, // 新建缺陷弹框
      dialogTest: false, // 新建提测报告
      dialogDaily: false, // 新建日报报告
      dialogClient: false, // 新建准出报告
      iterationList: [], // 所属迭代列表
      commentContent: null, // 评论内容
      comments: [] // 评论列表
    }
  },
  computed: {
    getStatus() {
      return this.allStatus.find(item => item.code === this.form_query.status) || { msg: null }
    }
  },
  created() {
    this.taskGet()
    this.getTaskStatus()
    this.getBelongProject()
    this.getRequireList()
    this.getCommentList()
    this.$store.state.data.status = true
    this.$store.state.data.bizId = true
  },
  destroyed() {
    this.$store.state.data.status = false
    this.$store.state.data.bizId = false
  },
  methods: {
    async changeArea(e) { // area修改
      const taskInfoDO = _.cloneDeep(this.form_query)
      const user = {
        name: localStorage.getItem('username'),
        ename: localStorage.getItem('realname'),
        id: ''
      }
      const res = await taskUpdate({ taskInfoDO, user })
      if (res.code === 200) {
        this.$message({ message: '修改', type: 'success', duration: 1000, offset: 150 })
      }
      this.taskGet()
    },
    async getBelongProject() { // 获取所属项目列表
      const res = await projectListProject({ bizId: Number(localStorage.getItem('bizId')) })
      if (res.code === 200) {
        this.belongProjectList = res.data
      }
    },
    async getRequireList() { // 获取所属需求列表
      const res = await configShowRequirementVersionEnum({ bizId: Number(localStorage.getItem('bizId')) })
      if (res.code === 200) {
        this.requireList = res.data
      }
    },
    async getTaskStatus() { // 获取任务状态列表，跟版客户端列表
      const res = await configShowTaskEnum()
      if (res.code === 200) {
        this.allStatus = res.data.taskStatus
        this.taskScheduleEvent = res.data.taskScheduleEvent || []
        this.appClient = res.data.appClient.map(item => {
          return {
            ...item,
            code: `${item.code}`
          }
        })
        console.log(this.appClient)
      }
    },
    async taskGet() { // 获取任务详情
      const res = await taskGet(this.$route.query.id)
      if (res.code === 200) {
        this.form_query = res.data
      }
    },
    async getCommentList() { // 获取任务评论
      const res = await commentList({ type: 3, joinId: this.taskId })
      if (res.code === 200) {
        this.comments = res.data
        this.commentContent = ''
      }
    },
    async addComment() { // 发表任务评论
      if (this.commentContent.replace(/\s+/g, '') === '' || this.commentContent === null) {
        this.$message.warning('评论不能为空')
        return
      }
      const commentInfo = {
        joinId: this.taskId,
        content: this.commentContent,
        type: 3,
        fatherId: 0,
        name: this.userNames,
        email: this.userInformation
      }
      const user = { name: this.userNames, ename: this.userInformation, id: '' }
      const res = await commentCreate({ commentInfo, user })
      if (res.code === 200) {
        this.$message({ message: '评论成功', type: 'success', duration: 1000, offset: 150 })
        this.getCommentList()
      } else {
        this.$message.warning(res.msg)
      }
    },
    async updateStatus(e) { // 状态改变
      if (e.value === 5) { // 已上线
        this.statusDialog = true
        this.form_query.status = e.value
      } else {
        this.changeArea()
      }
    },
    async confirmStatus() { // 确认更改状态
      this.form_query.onlineRealTime = this.changeStatusDate
      this.changeArea()
    },
    childVal(val) {
      this.num = val
    },
    setChild() { // 设置成员
      this.$refs.drawer.getRoleList()
    },
    open_created() { // 编辑任务
      // 打开弹窗
      this.updateVisible = true
      this.$nextTick(() => {
        this.$refs.task_createdUpdata.init(3, [null, this.taskId])
      })
    },
    async taskDelete() { // 删除任务
      const user = { name: this.userNames, ename: this.userInformation, id: '' }
      const res = await tasktaskDelete(user, this.taskId)
      if (res.code === 200) {
        this.$message({ message: '删除成功', type: 'warning', duration: 1000, offset: 150 })
      }
    },
    created_bug() { // 缺陷创建
      this.bug_open = true
      this.$nextTick(() => {
        this.$refs.createdBug.init(1)
      })
    },
    createReport(e, ele) { // 创建报告
      switch (e) {
        case 1: // 提测
          this.dialogTest = true
          this.$nextTick(() => { this.$refs.TestReport.init(1, ele) })
          break
        case 2: // 日报
          this.dialogDaily = true
          this.$nextTick(() => { this.$refs.DailyReport.init(1) })
          break
        case 3:
          this.dialogClient = true
          this.$nextTick(() => { this.$refs.ClientReport.init(1, ele) })
          break
      }
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/styles/detail-pages.scss';
/deep/.el-button {
  cursor: pointer;
}
@include hide-open-header;
.bg-project {
  @include bg-project;
}
.main-header {
  @include main-header;
}
.main-header::after {
  @include main-header-after;
}
.main-section {
  @include main-section;
  .detail-info {
    padding: 0 34px 20px 34px;
    /deep/.el-input__inner{
      border: 1px solid rgba(220,223,230,0)
    }
    /deep/.el-input__inner:hover{
      border: 1px solid rgba(220,223,230,1)
    }
    /deep/.is-focus .el-input__inner {
      border: 1px solid #409EFF;
    }
    /deep/.el-select{
      .el-input__suffix-inner {
        visibility: hidden;
      }
    }
    /deep/.el-select:hover{
      .el-input__suffix-inner {
        visibility: visible;
      }
    }
    .demo-form-inline {
      .el-form-item {
        width: 33%;
        margin-right: 0;
      }
    }
    .comment-main {
      list-style: none;
      padding: 0px;
      margin: 0 0 20px 0;
      li {
        list-style: none;
        padding: 0px;
        margin: 0px;
      }
      .comment-name {
        font-size:14px;
        color:#333B4A;
      }
      .comment-gmtCreater {
        margin-left:20px;
        color: #9B9B9B;
        font-size:12px
      }
      .comment-content {
        margin-left:20px;
        font-size:14px;
        color:#333B4A;
        margin-top: 10px;
        white-space: pre-line;
      }
    }
    .PRD-link {
      width: 50%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
}
.module {
  width: 100%;
  overflow: hidden;
}
.dialog-change-status {
  margin: 2% 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space:nowrap;
}
.form-progress {
  width: 200px;
  padding-top: 12px;
}
</style>