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">
          <div v-if="form_query.stage === 1 || form_query.stage === 2 || form_query.stage === 3" class="task-stage">
            <div class="task-stage-main">
              <img v-if="form_query.stage === 1" :src="normalImg">
              <img v-if="form_query.stage === 2" :src="stageImg">
              <img v-if="form_query.stage === 3" :src="warningImg">
              <el-tooltip class="item" effect="dark" :disabled="form_query.lateMsg===null" :content="form_query.stageString + '：' + form_query.lateMsg" placement="bottom">
                <div class="task-stage-title">
                  <span :class="{'small-size':form_query.stage === 2}">{{ form_query.stageString }}</span>
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="header-title">
            <span class="title-id">TASK-{{ form_query.id }}</span>
            <el-tooltip class="item" effect="dark" :content="form_query.name" placement="bottom">
              <span
                v-clipboard:copy="form_query.name"
                v-clipboard:success="copyName"
                class="title-name"
              >{{ form_query.name }}</span>
            </el-tooltip>
          </div>
          <el-button v-show="form_query.status === -2" disabled plain size="mini">Hold</el-button>
          <el-dropdown v-show="form_query.status !== -2" placement="bottom" @command="updateStatus">
            <el-button size="mini" plainclass="el-dropdown-link drop_down">
              {{ getStatus.name }}
              <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.name"
                :command="{status:item.code,label:item.name}"
                :disabled="form_query.status === item.code ? true : false"
              >{{ item.name }}</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-tab-pane label="统计" name="5" />
          </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="createChildren = true">新建子任务</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: 20px; 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'">
        <section class="main-section">
          <div class="Layout_space_between">
            <div class="el-main-title">
              <div class="title-left-icon" />
              <div class="title-left-name">工作流</div>
            </div>
            <el-popover
              v-model="visible"
              placement="bottom-end"
              width="300px"
              :visible-arrow="false"
              trigger="manual"
            >
              <el-input
                v-model="textarea2"
                type="textarea"
                rows="5"
                style="width:300px"
                placeholder="请输入Hold原因（选填）"
              />
              <div style="text-align: right; margin-top: 10px;">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="taskHold(textarea2)">确定</el-button>
              </div>
              <el-button slot="reference" class="el-btn-size" size="mini" @click="changeBtn">{{ form_query.status === -2 ? HoldTask = '解除 Hold' : HoldTask = 'Hold 任务' }}</el-button>
            </el-popover>
          </div>
          <timeLine :id="taskId" ref="timeLine" :name="'任务'" />
        </section>
      </el-container>
      <!-- 概览 -->
      <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="left" label-width="100px">
              <el-form-item label="所属项目：" class="module">
                <div v-if="form_query.projectId !== -1" @click="jump('项目详情',form_query.projectId)">{{ form_query.projectName }}</div>
                <template v-else>{{ form_query.projectName }}</template>
              </el-form-item>
              <el-form-item label="所属需求：" class="module">
                <div v-if="form_query.requireId !== -1" @click="jump('需求详情',form_query.requireId)">{{ form_query.requireName }}</div>
                <template v-else>{{ form_query.requireName }}</template>
              </el-form-item>
              <el-form-item label="所属模块：" class="module">
                <div>{{ form_query.moduleInfoName }}</div>
              </el-form-item>
            </el-form>
            <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="left" 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="left" 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>
            <el-form :inline="true" :model="form_query" class="demo-form-inline" style="white-space: nowrap;" label-position="left" label-width="100px">
              <el-form-item label="技术文档：" class="module">
                <span class="PRD-link"><a :href="form_query.devUrl" target="_blank">{{ form_query.devUrl }}</a></span>
              </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>任务计划
                <el-tooltip class="item" effect="dark" :content="isScheduleLocked === 1? '点击解锁排期' : '点击锁定排期'" placement="top">
                  <span class="titleStatus" :class="isScheduleLocked === 1 ? 'el-icon-lock' : 'el-icon-unlock'" @click="changeSchedule"> {{ isScheduleLocked === 1 ? '已锁定' : '未锁定' }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
          <section class="main-section">
            <div class="allTips">
              <div class="tips">
                <i class="el-icon-warning-outline" /> 每个任务仅支持一次提测和一次准出，请合理拆解后任务再排期<br>
                <i v-if="tips" class="el-icon-warning-outline" style="color:#e88792;" />
                <span v-if="tips" style="color:#e88792;">当前任务归属的需求计划排期呈锁定状态，当前任务的排期无法同步到需求计划中去，请将归属需求的排期解锁！</span>
              </div>
              <div class="Layout_space_between">
                <div v-show="BackToTheLatest === false" class="Scheduling" style="margin-right: 20px;" @click="clickBackToTheLatest"><i class="el-icon-refresh" /> 回到最新</div>
                <div v-show="isScheduleLocked === 0">
                  <div v-show="BackToTheLatest === true" class="Scheduling" style="margin-right: 20px;" @click="clickAddScheduling()"><i class="el-icon-circle-plus-outline" /> 添加排期</div>
                </div>
                <div v-show="BackToTheLatest === true" align="left" class="Scheduling" @click="scheduleHiHide"><div class="el-icon-document" /> 排期变更记录</div>
                <download :id="taskId" :name="'任务'" />
              </div>
            </div>
          </section>
          <el-container>
            <el-main style="padding: 0;">
              <schedule-list :id="taskId" ref="taskSchedule" :showunlock="showunlock" :type-list="taskScheduleEvent" class-name="white" @updataData="getSchedule" />
            </el-main>
            <el-aside v-if="lockHide" class="SchedulingAside">
              <div v-for="(item, index) in SchedulingContent" :key="index" class="SchedulingDiv" @click="clickScheduling(item)">
                <i v-show="index < SchedulingContent.length - 1" />
                <div class="timeline">
                  <div class="SchedulingTow" :class="{'vss' : item.id === ScheduId}">
                    <div v-if="item.operationType === 0" class="el-icon-unlock image" />
                    <div v-if="item.operationType === 1" class="el-icon-lock image" />
                  </div>
                  <div class="modifyTime">{{ item.modifyTime }}</div>
                  <div>{{ item.operatorObject.name !== null ? item.operatorObject.name : '' }} <span class="btn">{{ item.operation }}</span></div>
                  <div v-if="item.remarkTypeName"><span class="modifyTime">{{ '解锁原因 : ' }}</span>{{ item.remarkTypeName }}</div>
                  <div v-if="item.remark"><span class="modifyTime">{{ '具体描述 : ' }}</span>{{ item.remark }}</div>
                </div>
              </div>
              <div v-if="SchedulingContent.length === 0" style="width: 270px; margin: 50% 20px; text-align: center;"> 暂无排期变更记录!</div>
            </el-aside>
          </el-container>
        </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>
          <el-tabs v-model="tabPosition" class="sign-tabs" @tab-click="handleClick">
            <el-tab-pane label="评论" name="first">
              <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><br>
                    <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>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="second">
              <record :id="taskId" ref="record" :name="'任务'" />
            </el-tab-pane>
          </el-tabs>

        </section>
      </el-container>
      <!-- 概览 -->
      <!-- 子任务 -->
      <el-container v-if="activeName === '2'" class="is-vertical">
        <section class="main-section contain">
          <children-list ref="children-list" />
        </section>
      </el-container>
      <!-- 子任务 -->
      <!-- 缺陷 -->
      <el-container v-if="activeName === '3'" class="is-vertical">
        <section class="main-section contain">
          <bugTableDialog ref="bugTableDialog" no-show="taskName" :obj-id="{ taskId: Number(this.$route.query.id) }" />
        </section>
      </el-container>
      <!-- 缺陷 -->
      <!-- 报告 -->
      <el-container v-if="activeName === '4'" class="is-vertical">
        <report-list />
      </el-container>
      <!-- 报告 -->
      <!-- 统计 -->
      <el-container v-if="activeName === '5'" class="is-vertical">
        <section class="main-section contain">
          <data-statistics ref="data-statistics" />
        </section>
      </el-container>
      <!-- 统计 -->
      <!-- 新建（bug） -->
      <createdBug v-if="bug_open" ref="createdBug" @reloadList="reloadList" />
      <create-children v-if="createChildren" :visible.sync="createChildren" :data="form_query" :new-add="true" @change="reloadList" />
      <Test-report v-if="dialogTest" ref="TestReport" />
      <Daily-report v-if="dialogDaily" ref="DailyReport" />
      <ReleaseReport v-if="dialogClient" ref="ClientReport" />
      <!-- 新建 -->
      <!-- 编辑 -->
      <open-dialog v-if="updateVisible" ref="task_createdUpdata" />
      <!-- 编辑 -->
      <!-- 删除 -->
      <el-dialog :visible.sync="deleteVisible" title="删除确认" class="public_task" width="30%" :close-on-click-modal="false">
        <div class="blueStripe" />
        <div align="center">确定要删除此 {{ form_query.name }} 任务吗？</div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="deleteVisible = false">关 闭</el-button>
          <el-button size="mini" type="primary" @click="taskDelete()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除 -->
      <task-dialog v-if="showTaskDialog" :show.sync="showTaskDialog" :task-id="taskIds.id" :status-name="taskIds.statusString" @getList="taskGet" />
      <!-- 排期锁定 -->
      <schedule ref="ScheduleEvent" :visible.sync="scheduleVisble" :name="'任务'" :is-schedule-locked="isScheduleLocked" :require-id="taskId" @updataData="getScheduleGetTaskScheduleHistory" />
      <!-- 排期锁定 -->
      <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 Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
import {
  taskGet,
  configShowTaskEnum,
  tasktaskDelete,
  taskUpdate,
  commentCreate,
  commentList,
  taskHold,
  taskUnhold,
  configShowRequirementVersionEnum,
  scheduleGetTaskScheduleHistory
} from '@/api/taskIndex'
import '@/styles/PublicStyle/index.scss'
import { listByTask } from '@/api/projectViewDetails'
import { projectListProject, scheduleGetHistoryScheduleById } 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 openDialog from '@/views/projectManage/dialog_vue'
import createChildren from './childrenTask/createChildren'
import childrenList from './childrenTask/childrenList'
import scheduleList from './components/scheduleList'
import reportList from './components/reportList'
import dataStatistics from './components/dataStatistics'
import TestReport from '@/views/reportManagement/components/TestingReport' // 提测
import DailyReport from '@/views/reportManagement/components/DailyReport' // 日报
import ReleaseReport from '@/views/reportManagement/components/ReleaseReport' // 准出
import stage from '@/assets/detailPage/风险状态.png'
import stage1 from '@/assets/detailPage/正常状态.png'
import stage2 from '@/assets/detailPage/延期状态.png'
import taskDialog from '@/views/projectManage/taskList/dialog/taskDialog' // 任务状态修改（已上线/已提测/已准出）
import bugTableDialog from '@/views/projectManage/bugList/details/bugTableDialog' // 缺陷表格
import '@/styles/PublicStyle/index.scss'
import schedule from '@/views/projectManage/schedule' // 排期锁定弹窗
import download from '@/views/projectManage/components/export.vue'
import record from '@/views/projectManage/components/record.vue'
import timeLine from '@/views/projectManage/components/timeLine.vue'
export default {
  components: {
    searchPeople,
    textArea,
    drawer,
    createdBug,
    openDialog,
    createChildren,
    childrenList,
    scheduleList,
    reportList,
    dataStatistics,
    TestReport,
    DailyReport,
    ReleaseReport,
    taskDialog,
    bugTableDialog,
    schedule,
    download,
    record,
    timeLine
  },
  filters: {
    ellipsis(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  data() {
    return {
      tabPosition: 'first',
      textarea2: '',
      HoldTask: '',
      visible: false, // Hold任务
      showunlock: true,
      ScheduId: '', // 排期ID
      LockState: {}, // 锁定状态
      tips: '', // 后加入需求的任务排期提示
      scheduleVisble: false, // 排期锁定
      isParentRequireScheduleLocked: '',
      BackToTheLatest: true, // 显示添加排期按钮
      lockHide: false, // 隐藏排期变更记录
      SchedulingContent: [], // 排期历史变更记录
      stageImg: stage,
      normalImg: stage1,
      warningImg: stage2,
      activeName: '1', // 顶部tab切换
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      textarea: '', // 评论
      showTaskDialog: false, // 状态弹窗
      taskId: Number(this.$route.query.id), // 任务id
      allStatus: [], // 任务所有状态
      belongProjectList: [], // 所属项目列表
      requireList: [], // 所属需求列表
      appClient: [], // 跟版客户端列表
      taskScheduleEvent: [], // 排期类型
      dependList: [{ msg: '否', code: 2 }, { msg: '是', code: 1 }], // 是否跟版
      form_query: {},
      display: false, // 设置成员弹框
      isScheduleLocked: '', // 锁定状态1锁定0未锁定
      num: 0, // 成员数量
      image_url: image_url, // 成员icon
      createChildren: false, // 新建子任务弹框
      updateVisible: false, // 编辑任务弹框
      deleteVisible: false, // 删除任务弹框
      bug_open: false, // 新建缺陷弹框
      dialogTest: false, // 新建提测报告
      dialogDaily: false, // 新建测试日报
      dialogClient: false, // 新建准出报告
      iterationList: [], // 所属迭代列表
      commentContent: null, // 评论内容
      comments: [], // 评论列表
      taskIds: '' // 将要修改状态的任务id
    }
  },
  computed: {
    getStatus() {
      return this.allStatus.find(item => item.code === this.form_query.status) || { name: null }
    }
  },
  created() {
    this.taskGet()
    this.getTaskStatus()
    this.getBelongProject()
    this.getRequireList()
    this.getCommentList()
    this.getScheduleGetTaskScheduleHistory()
    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: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async getScheduleGetTaskScheduleHistory() {
      this.scheduleVisble = false
      const res = await scheduleGetTaskScheduleHistory(this.taskId)
      this.SchedulingContent = res.data
      const res1 = await listByTask(this.taskId)
      this.isScheduleLocked = res1.data.isScheduleLocked
      this.tips = res1.data.tips
      this.isParentRequireScheduleLocked = res1.data.isParentRequireScheduleLocked
      this.$refs.taskSchedule.listByTask(this.taskId)
      this.taskGet()
    },
    async getSchedule() {
      this.scheduleVisble = false
      const res = await scheduleGetTaskScheduleHistory(this.taskId)
      this.SchedulingContent = res.data
      const res1 = await listByTask(this.taskId)
      this.isScheduleLocked = res1.data.isScheduleLocked
      this.tips = res1.data.tips
      this.isParentRequireScheduleLocked = res1.data.isParentRequireScheduleLocked
    },
    async clickScheduling(ele) {
      this.showunlock = false
      this.ScheduId = ele.id
      const res = await scheduleGetHistoryScheduleById(ele.id)
      this.taskScheduleEvent = res.data.scheduleDetailRespons
      this.BackToTheLatest = false
    },
    clickBackToTheLatest() {
      this.showunlock = true
      this.BackToTheLatest = true
      this.lockHide = false
      this.$refs.taskSchedule.listByTask(this.taskId)
    },
    changeSchedule() { // 修改锁定状态
      if (this.isParentRequireScheduleLocked === 1) {
        this.$message({ message: '无法解锁，请先变更归属需求的排期状态为未锁定状态！', type: 'error', duration: 3000, offset: 150 })
      } else {
        this.scheduleVisble = true
      }
    },

    changeBtn() {
      if (this.HoldTask === 'Hold 任务') {
        this.visible = !this.visible
        this.textarea2 = ''
      }
      if (this.HoldTask === '解除 Hold') {
        this.taskHold()
      }
    },

    async taskHold(val) { // 锁定Hold
      if (this.HoldTask === 'Hold 任务') {
        const res = await taskHold(this.taskId, { 'remark': val })
        if (res.code === 200) {
          this.taskGet()
          this.$refs.timeLine.taskGetWorkFlow()
          this.visible = false
          this.$message({ message: '已修改状态为 Hold', type: 'success', duration: 1000, offset: 150 })
        }
      }
      if (this.HoldTask === '解除 Hold') {
        const res = await taskUnhold(this.taskId)
        if (res.code === 200) {
          this.taskGet()
          this.allStatus = []
          this.allStatus.push({ code: -2, msg: 'Hold' })
          this.$refs.timeLine.taskGetWorkFlow()
          this.$message({ message: 'Hold 状态已解除', type: 'success', duration: 1000, offset: 150 })
        }
      }
    },
    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.taskScheduleEvent = res.data.taskScheduleEvent || []
        this.appClient = res.data.appClient.map(item => {
          return {
            ...item,
            code: `${item.code}`
          }
        })
      }
    },
    async taskGet() { // 获取任务详情
      const res = await taskGet(this.$route.query.id)
      if (res.code === 200) {
        this.form_query = res.data
        this.allStatus = res.data.availableStatusList
        this.$refs.timeLine.taskGetWorkFlow()
      }
    },
    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.status === 70 || e.status === 90 || e.status === 100) {
        this.taskIds = this.form_query
        this.allStatus.map(item => {
          item.code === e.status ? this.taskIds.statusString = e.label : ''
        })
        this.showTaskDialog = true
        this.taskIds.status = e.status
        return
      } else {
        const user = {
          name: localStorage.getItem('username'),
          ename: localStorage.getItem('realname'),
          id: ''
        }
        const taskInfoDO = this.form_query
        taskInfoDO.status = e.status
        const resTask = await taskUpdate({ taskInfoDO, user })
        if (resTask.code === 200) {
          this.$refs.timeLine.taskGetWorkFlow()
          this.$refs.record.operationLogTask()
          this.taskGet()
          this.$message({ message: '修改成功', type: 'success', offset: 150 })
        }
      }
    },
    clickAddScheduling() { // 模拟调用自组件方法
      this.$refs.taskSchedule.addSchedule()
    },
    scheduleHiHide() { // 排期变更显示隐藏
      this.lockHide = !this.lockHide
      this.BackToTheLatest = true
      this.showunlock = true
      this.ScheduId = ''
    },
    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: 'success', duration: 1000, offset: 150 })
        this.$router.push({ name: '任务', query: {}})
      }
    },
    created_bug() { // 缺陷创建
      this.bug_open = true
      this.$nextTick(() => {
        this.$refs.createdBug.init(1, { id: this.taskId })
      })
    },
    createReport(e, ele) { // 创建报告
      switch (e) {
        case 1: // 提测
          this.dialogTest = true
          this.$nextTick(() => { this.$refs.TestReport.init(7, [this.taskId]) })
          break
        case 2: // 日报
          this.dialogDaily = true
          this.$nextTick(() => {
            this.$refs.DailyReport.init(7, [this.taskId])
          })
          break
        case 3:
          this.dialogClient = true
          this.$nextTick(() => { this.$refs.ClientReport.init(7, [this.taskId]) })
          break
      }
    },
    jump(page, id) { // 跳转
      this.$router.push({ name: page, query: { id: id }})
    },
    reloadList() {
      this.taskGet()
      if (this.$refs['bugTableDialog']) {
        this.$refs['bugTableDialog'].bugGetTableList()
      }
      if (this.$refs['data-statistics']) {
        this.$refs['data-statistics'].getRequireSumData()
      }
      if (this.$refs['children-list']) {
        this.$refs['children-list'].getSubTasksList()
      }
    },
    returnEmpty(val) {
      return val || ''
    },
    copyName(name) { // 复制名字
      this.$message({ message: '复制成功', type: 'success', duration: 1000, offset: 150 })
    }
  }
}
</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;
  .title-name {
    cursor: pointer;
  }
}
.main-header::after {
  @include main-header-after;
}
.contain {
  height: calc(100vh - 140px);
  overflow: scroll;
}
.main-section {
  @include main-section;
  .require-plan {
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
      color: #E6A23C;
      font-size: 12px;
    }
  }
  .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: 15px 0 0 0;
      margin: 0 0 20px 0;
      li {
        list-style: none;
        padding: 0px;
        margin: 0px 0px 25px 0;
      }
      .comment-name {
        font-size:14px;
        color:#333B4A;
      }
      .comment-gmtCreater {
        margin-left:20px;
        color: #9B9B9B;
        font-size:12px
      }
      .comment-content {
        font-size:14px;
        color:#333B4A;
        margin-top: 10px;
        white-space: pre-line;
      }
    }
    .PRD-link:hover{
      color:#409EFF;
    }
    .PRD-link {
      width: 50%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
}
.task-stage {
  position: absolute;
  left: 5px;
  top: 0px;
  z-index: 999;
  .task-stage-main {
    position: relative;
    height: 52px;
    width: 15.5px;
    img{
      height: 52px;
      width: 15.5px;
    }
    .task-stage-title{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      color: #ffffff;
      font-size: 10px;
      text-align: center;
    }
    .small-size {
      transform: scale(0.6);
      position: absolute;
      left: 0;
      top: -15px;
    }
  }
}
>>>.module .el-form-item__content {
    display: inline-block;
    width: calc(100% - 100px);
    div {
      line-height: 18px;
      padding-top: 12px;
      cursor: pointer;
    }
    div:hover{
      color: #409EFF;
    }
  }
.form-progress {
  width: 200px;
  padding-top: 12px;
  padding-left: 15px;
}
>>>.el-input--small {
  font-size: 14px;
}
.vss {
   border:1px solid #409EFF !important;
   color:#409EFF !important;
}
.sign-tabs {
  padding: 0 30px;
}
.el-btn-size {
   margin: 10px 30px;
}
</style>

<style>
 .el-main-title .el-popper[x-placement^=bottom] {
    margin: 12px 10px 0 0;
    width: 300px;
}
</style>