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 }}
              <el-tooltip v-if="form_query.isDirectlyFromDpm === 0 || form_query.isDirectlyFromDpm === 1" class="item" effect="dark" :content="`【${form_query.relatedDpmTaskInfo.taskId}】【${form_query.relatedDpmTaskInfo.name}】`" placement="top">
                <span class="synchronize-icon">
                  <img src="@/assets/home_images/WX20200914-141851@2x.png" @click="dpmUrl(form_query.dpmUrl)">
                  <i v-if="form_query.isDirectlyFromDpm === 0" class="el-icon-circle-close sty-icon" @click="deleteDpl()" />
                </span>
              </el-tooltip>
              <el-popover v-if="form_query.isDirectlyFromDpm === -1" placement="bottom" title="关联望岳任务" width="400" trigger="click" popper-class="synchronize">
                <div class="blueStr" />
                <div class="task-object-list">
                  <div v-for="(item, index) in dplOption" :key="index" class="task-item" @click="throttle(item.id)">
                    <span>{{ item.moduleInfoName }}</span>
                    <span class="item-name">{{ item.name }}</span>
                    <span class="item-id">{{ item.taskId }}</span>
                  </div>
                </div>
                <el-button v-if="form_query.isDirectlyFromDpm === -1" slot="reference" size="mini" type="text" @click.once="getDplList(taskId)">关联望岳</el-button>
              </el-popover>
            </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-button v-show="form_query.status === -4" disabled plain size="mini">已关闭</el-button>
          <el-dropdown v-show="form_query.status !== -2 && form_query.status !== -4" 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-tab-pane label="发布" name="6" />
          </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>
            <div class="Layout_space_between">
              <el-button v-if="form_query.isDirectlyFromDpm === 0 || form_query.isDirectlyFromDpm === 1" class="el-btn-size" size="mini" @click="dialogVisible = true">{{ '拉取望岳状态及工作流' }}</el-button>
              <div v-if="form_query.isTaskClose">
                <el-popover v-if="form_query.status !== -2" v-model="taskVisible" placement="bottom-end" width="300px" :visible-arrow="false" trigger="manual">
                  <el-input v-model="textarea1" type="textarea" rows="5" style="width:300px" placeholder="请输入关闭原因（选填）" />
                  <div style="text-align: right; margin-top: 10px;">
                    <el-button size="mini" type="text" @click="taskVisible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="taskOpenOrClose(textarea1), taskVisible = false">确定</el-button>
                  </div>
                  <el-button slot="reference" class="el-btn-size" size="mini" @click="changeTaskClose">{{ form_query.status === -4 ? closeTask = '解除关闭任务' : closeTask = '关闭任务' }}</el-button>
                </el-popover>
              </div>
              <div v-if="!form_query.isTaskClose && form_query.status !== -2 && form_query.status === -4">
                <el-button v-if="taskCode" slot="reference" class="el-btn-size" size="mini" @click="changeTaskClose(false)">{{ form_query.status === -4 ? closeTask = '解除关闭任务' : taskCode = false }}</el-button>
              </div>
              <el-popover v-if="form_query.status !== -4" 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>
          </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)">{{ 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="jumps('需求详情',form_query)">{{ 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
                    v-if="!form_query.needGrey || isScheduleLocked === 1 "
                    class="titleStatus"
                    :class=" isScheduleLocked === 1 ? 'el-icon-lock' : 'el-icon-unlock'"
                    @click="changeSchedule"
                  >
                    {{ isScheduleLocked === 1 ? '已锁定' : '未锁定' }}
                  </span>
                </el-tooltip>
                <span v-if="isShowLockedTime" class="tip">
                  <i class="el-icon-timer icon" />剩余{{ autoLockScheduleCountdown }}将自动锁定
                </span>
              </div>
            </div>
          </div>
          <section class="main-section">
            <div class="task-help-tips">
              <div class="tips-icon">
                <i class="el-icon-question" />
                <span> 帮助提示</span>
              </div>
              <div class="tips-context">
                .每个任务仅支持一次提测和一次准出，请合理拆解任务后再排期。<br>
                .任务状态未变更【已排期】前，排期不可锁定；状态变更为【已排期】时，任务排期将被系统自动锁定。<br>
                .需求排期锁定时，任务排期将全部被锁定；所有任务锁定时，需求排期将被系统自动锁定。<br>
                .任务排期锁定后，如果解锁了排期，排期将在24小时后再次自动锁定。请解锁后，及时进行排期调整。<br>
                .任务新增、修改、删除排期时，系统会于半小时后将任务排期及交付时间同步至望岳。若多个任务关联同一个望岳任务，同步时排期会汇总一并同步到望岳，交付时间则按最晚日期同步至望岳。<br>
              </div>
            </div>
            <div class="list-tips">
              <div class="tips">
                <i v-if="tips" class="el-icon-warning-outline" style="color:#e88792;" />
                <span v-if="tips" style="color:#e88792;">当前任务归属的需求计划排期呈锁定状态，当前任务的排期无法同步到需求计划中去，请将归属需求的排期解锁！</span>
              </div>
              <div class="schedule-control">
                <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="form_query.relatedDpmTaskInfo" class="Scheduling" @click="synchronizeDialog = true"><i class="el-icon-s-fold" /> 同步排期至望岳</div>
                <div v-show="BackToTheLatest === true" align="left" class="Scheduling" @click="scheduleHiHide"><i 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" />
              <div v-if="form_query.status >= 70" class="border-top">
                <el-divider />
                <el-form :inline="true" :model="form_query" class="Layout_space_start" label-position="left" label-width="110px">
                  <el-form-item v-if="form_query.status >= 70" label="实际提测时间">
                    <el-date-picker v-model="form_query.launchTestRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
                  </el-form-item>
                  <el-form-item v-if="form_query.status >= 90" label="实际准出时间：">
                    <el-date-picker v-model="form_query.testFinishRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
                  </el-form-item>
                  <el-form-item v-if="form_query.status >= 100" label="实际上线时间：">
                    <el-date-picker v-model="form_query.onlineRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
                  </el-form-item>
                </el-form>
              </div>
            </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">
            <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" :show-hide="true" no-show="taskName" :obj-id="{ taskId: taskId }" />
        </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>
      <!-- 统计 -->

      <!-- 发布 -->
      <el-container v-if="activeName === '6'" class="is-vertical">
        <publishTask
          v-if="loaded"
          :task-id="form_query.id"
          :task-name="form_query.name"
          :user-names="userNames"
          :user-information="userInformation"
        />
      </el-container>
      <!-- 发布 -->

      <!-- 新建（bug） -->
      <createdBug v-if="bug_open" ref="createdBug" @getBugList="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" />
      <!-- 排期锁定 -->
      <!-- 状态及工作流 -->
      <workflowAndStatus
        :visible.sync="dialogVisible"
        :name="'任务'"
        :dpmrequired="toilp"
        @update="taskGet(); dialogVisible=false "
      />
      <!-- 状态及工作流 -->
      <!-- 同步望月 -->
      <synchronize-dialog
        v-if="synchronizeDialog"
        :id="taskId"
        :data="form_query.relatedDpmTaskInfo"
        :visible.sync="synchronizeDialog"
        @change="taskGet()"
      />
      <!-- 同步望月 -->
      <drawer
        ref="drawer"
        title="任务成员"
        center
        :display.sync="display"
        width="28%"
        :delete="form_query"
        :types="false"
        :inner="true"
        :mask="false"
        @childValInput="childVal"
        @click.stop
      />
      <checkListStopConfirm
        :visible="checklistStopVisible"
        @confirm="checklistConfirm"
        @cancel="checklistCancel"
      />
    </el-container>
  </div>
</template>
<script>
const _ = require('lodash')
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
import { mapGetters } from 'vuex'
// import store from '@/store'
import { EncryptId, analysisBizId_id } from '@/utils/crypto-js.js'
import {
  taskGet,
  configShowTaskEnum,
  tasktaskDelete,
  taskUpdate,
  commentCreate,
  commentList,
  taskHold,
  taskUnhold,
  taskOpenOrClose,
  configShowRequirementVersionEnum,
  scheduleGetTaskScheduleHistory
} from '@/api/taskIndex'
import checkListStopConfirm from '@/components/checkListStopConfirm'
import { listByTask, taskUpdates } from '@/api/projectViewDetails'
import { projectListProject, scheduleGetHistoryScheduleById, taskListAvailableDpmTask, taskSetTaskRelated, taskDeleteRelationship } 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 publishTask from '@/views/projectManage/publishTask'
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'
import { dailyReportCheckStatus, reportreleaseCheckStatus, reportdelivertestCheckStatus } from '@/api/reportTemplate'
import synchronizeDialog from './dialog/synchronizeDialog' // 同步弹框
import workflowAndStatus from '@/views/projectManage/components/workflowAndStatus.vue'
import '@/styles/PublicStyle/index.scss'
import { formatHMS } from '@/utils/global'
export default {
  components: {
    searchPeople,
    textArea,
    drawer,
    createdBug,
    openDialog,
    createChildren,
    childrenList,
    scheduleList,
    reportList,
    dataStatistics,
    TestReport,
    DailyReport,
    ReleaseReport,
    taskDialog,
    bugTableDialog,
    schedule,
    download,
    record,
    timeLine,
    workflowAndStatus,
    synchronizeDialog,
    publishTask,
    checkListStopConfirm // checklist拦截弹窗
  },
  filters: {
    ellipsis(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  data() {
    return {
      autoLockScheduleCountdown: '--', // 解锁剩余时间
      timer: null, // 定时器
      isShowLockedTime: false, // 是否显示解锁倒计时
      tabPosition: 'first',
      textarea2: '',
      textarea1: '',
      HoldTask: '',
      closeTask: '',
      visible: false, // Hold任务
      taskVisible: false, // 关闭任务
      dialogVisible: false,
      showunlock: true,
      taskCode: true,
      toilp: '',
      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: -1, // 任务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
      synchronizeDialog: false, // 同步任务至望月弹框
      dplOption: [], // 关联的望岳任务
      checklistStopVisible: false, // checklist拦截弹窗是否显示
      firstChecklistTaskId: -1,
      loaded: false // 是否请求到当前任务的task信息
    }
  },

  computed: {
    getStatus() {
      return this.allStatus.find(item => item.code === this.form_query.status) || { name: null }
    },
    ...mapGetters(['bizId'])
  },
  watch: {
    activeName: {
      handler(newV) {
        Number(newV) > 0
          ? this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, page: newV }})
          : this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, page: '1' }})
      }
    }
  },
  created() {
    this.analysisBizId_id()
    this.$nextTick(() => {
      this.activeName = this.$route.query.page ? this.$route.query.page : '1'
    })
    this.$store.state.data.status = true
  },
  destroyed() {
    clearInterval(this.timer)
    this.$store.state.data.status = false
  },
  methods: {
    analysisBizId_id() { // 解析路由中的bizId_id
      if (!this.$route.query.bizId_id) return
      const bizId_id = analysisBizId_id(this.$route.query.bizId_id)
      this.taskId = bizId_id[1]
      this.taskGet()
      this.getTaskStatus()
      this.getBelongProject()
      this.getRequireList()
      this.getCommentList()
      this.getScheduleGetTaskScheduleHistory()
    },
    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.isShowLockedTime = false
      if (res1.data.isScheduleLocked !== 1 && res1.data.autoLockScheduleCountdown > 0) {
        this.isShowLockedTime = true
        let totolTime = res1.data.autoLockScheduleCountdown || 6000
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          totolTime = totolTime - 1000
          this.autoLockScheduleCountdown = formatHMS(totolTime)
          if (totolTime < 1000) {
            this.isScheduleLocked = 1
            clearInterval(this.timer)
          }
        }, 1000)
      }
      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)
    },
    async setChangeArea(e) {
      const user = { name: localStorage.getItem('username'), ename: localStorage.getItem('realname'), id: '' }
      const taskInfoDO = this.form_query
      const resTask = await taskUpdate({ taskInfoDO, user })
      if (resTask.code === 200) {
        this.$message({ message: '修改成功', type: 'success', offset: 150 })
      }
    },
    changeSchedule() { // 修改锁定状态
      if (this.isParentRequireScheduleLocked === 1) {
        this.$message({ message: '无法解锁，请先变更归属需求的排期状态为未锁定状态！', type: 'error', duration: 3000, offset: 150 })
      } else {
        this.scheduleVisble = true
      }
    },
    changeTaskClose(e) {
      console.log(this.closeTask)
      if (e) {
        this.taskCode = e
      } else {
        this.taskCode = false
      }
      if (this.closeTask === '关闭任务') {
        this.taskVisible = !this.taskVisible
        this.textarea1 = ''
      }
      if (this.closeTask === '解除关闭任务') {
        this.taskOpenOrClose()
      }
    },
    async taskOpenOrClose(val) {
      const data = { id: this.taskId, remark: val, closeStatus: -3 }
      if (this.closeTask === '关闭任务') {
        data.remark = val
        data.closeStatus = -4
      } else if (this.closeTask === '解除关闭任务') {
        data.closeStatus = -3
      }
      const res = await taskOpenOrClose(data)
      if (res.code === 200) {
        this.taskGet()
        this.$refs.timeLine.taskGetWorkFlow()
        this.visible = false
        this.$message({ message: '已修改任务状态', type: 'success', duration: 1000, offset: 150 })
      }
    },

    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)
      taskInfoDO.rdOwner === null ? taskInfoDO.rdOwner = '' : ''
      taskInfoDO.qaOwner === null ? taskInfoDO.qaOwner = '' : ''
      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: this.bizId })
      if (res.code === 200) {
        this.belongProjectList = res.data
      }
    },
    async getRequireList() { // 获取所属需求列表
      const res = await configShowRequirementVersionEnum({ bizId: this.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.taskId)
      if (res.code === 200) {
        this.form_query = res.data
        if (!this.loaded) {
          this.loaded = true
        }
        if (this.form_query.isDirectlyFromDpm === 0 || this.form_query.isDirectlyFromDpm === 1) {
          this.toilp = this.form_query.relatedDpmTaskInfo.taskId + this.form_query.relatedDpmTaskInfo.name
        }
        this.allStatus = res.data.availableStatusList
        this.$refs.timeLine.taskGetWorkFlow()
        this.$refs.record.operationLogTask()
      }
    },
    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 === 60 || 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 taskUpdates({ 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: // 提测
          reportdelivertestCheckStatus([this.taskId]).then(res => {
            if (res.code === 200) {
              if (res.data) {
                this.checklistStopVisible = true
                this.firstChecklistTaskId = res.data
                return
              }
              this.dialogTest = true
              this.$nextTick(() => { this.$refs.TestReport.init(7, [this.taskId]) })
            }
          })
          break
        case 2: // 日报
          dailyReportCheckStatus([this.taskId]).then(res => {
            if (res.code === 200) {
              this.dialogDaily = true
              this.$nextTick(() => {
                this.$refs.DailyReport.init(7, [this.taskId])
              })
            }
          })
          break
        case 3:
          reportreleaseCheckStatus([this.taskId]).then(res => {
            if (res.code === 200) {
              this.dialogClient = true
              this.$nextTick(() => { this.$refs.ClientReport.init(7, [this.taskId]) })
            }
          })

          break
      }
    },
    jump(page, id) { // 跳转
      const bizId_id = EncryptId(`${id.requireProjectBizId}_${id.projectId}`)
      this.$router.push({ name: page, query: { bizId_id: bizId_id }})
    },
    jumps(page, id) { // 跳转
      const bizId_id = EncryptId(`${id.requireIdBizId}_${id.requireId}`)
      this.$router.push({ name: page, query: { bizId_id: bizId_id }})
    },
    reloadList() {
      this.taskGet()
      if (this.$refs['bugTableDialog']) {
        this.$refs['bugTableDialog'].bugQzGetTableList()
      }
      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 })
    },
    dpmUrl(url) {
      window.open(url, '_blank')
    },
    async getDplList(taskId) { // 获取关联望岳任务
      const res = await taskListAvailableDpmTask(taskId)
      if (res.code === 200) {
        this.dplOption = res.data
      }
    },
    throttle: _.throttle(function() {
      this.synchronize(...arguments)
    }, 5000, {
      leading: true,
      trailing: false
    }),
    async synchronize(id) { // 关联至望岳
      const res = await taskSetTaskRelated(this.taskId, id)
      if (res.code === 200) {
        this.taskGet()
        this.$message({ message: '关联成功', type: 'success', duration: 1000, offset: 150 })
      }
    },
    async deleteDpl() { // 取消关联
      const res = await taskDeleteRelationship(this.taskId)
      if (res.code === 200) {
        this.taskGet()
        this.$message({ message: '已取消关联', type: 'success', offset: 150 })
      }
    },
    checklistConfirm() {
      this.checklistStopVisible = false
      const { bizId = null } = this.$store.state.global || {}
      const bizId_id = EncryptId(`${bizId}_${this.firstChecklistTaskId}`)
      const newTab = this.$router.resolve({ name: '任务详情', query: { bizId_id: bizId_id, page: 6 }})
      window.open(newTab.href, '_blank')
    },
    checklistCancel() {
      this.checklistStopVisible = false
      this.dialogTest = true
      this.$nextTick(() => { this.$refs.TestReport.init(7, [this.taskId]) })
    }
  }
}
</script>
<style scoped lang="scss">
.border-top {
  margin: 0 20px;
  >>>.el-form-item {
    margin: 0 30px  10px 0;
  }
  >>>.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0;
  }
}
@import '@/styles/detail-pages.scss';
/deep/.el-button {
  cursor: pointer;
}
@include hide-open-header;
.bg-project {
  @include bg-project;
}
.hide-sidebar .main-header {
  @include normal-main-header
}
.top-sidebar .main-header {
  @include top-main-header
}
.open-sidebar .main-header {
  @include left-main-header;
}
.main-header {
  @include main-header;
  .title-name {
    cursor: pointer;
  }
  .synchronize-icon {
    position: relative;
    img {
      width: 60px;
    }
  }
  .sty-icon {
    position: absolute;
    right: -5px;
    top: -5px;
    background: #eee;
    border-radius: 50%;
  }
}
.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;
    }
  }
  .task-help-tips {
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    padding: 20px 13px;
    border-radius: 4px;
    background-color: rgba(64, 158, 255,0.1);
    .tips-icon {
      width: 100%;
      font-size: 14px;
      font-weight: 550;
      line-height: 24px;
      color: #333333;
      i {
        background: #1890FF;
        color: #e0eefd;
        border-color: #e0eefd;
        border-radius: 50%;
      }
    }
    .tips-context {
      width: 100%;
      font-size: 12px;
      line-height: 20px;
      color: #444444;
    }
  }
  .schedule-control {
    display: flex;
    justify-content: flex-end;
  }
  .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 rgb(64, 158, 255);
    }
    /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 10px 0;
}
.blueStr {
  width:4px;
  height:17px;
  background:#409EFF;
  border-radius:1px;
  position: absolute;
  top: 22px;
  left: 15px;
}
</style>

<style lang="scss">
.bg-project {
  .tip {
    color: #F56C6C;
    text-align: left;
    padding: 0 14px;
    font-size: 12px;
    .icon {
      margin-right: 2px;
    }
  }
}

.synchronize {
  .el-popover__title {
    color: #333333;
    padding: 10px 20px;
  }
  .task-object-list {
    width: 100%;
    overflow: scroll;
    cursor: pointer;
    .task-item {
      width: 100%;
      white-space: nowrap;
      color: #999999;
      margin-bottom: 5px;
      .item-id {
        padding-right: 20px;
      }
      .item-name {
        color: #333333;
        padding-right: 20px;
      }
    }
  }
  .task-object-list::-webkit-scrollbar {
    display: none;
  }
}
.el-main-title .el-popper[x-placement^=bottom] {
  margin: 12px 10px 0 0;
  width: 300px;
}

</style>