thoth-frontend-test/src/views/projectManage/requirement/requirementDetail.vue

<template>
  <div class="bg-project" @click="display = false">
    <el-container>
      <el-header class="main-header" :class="{'paddingLeft': form_query.type === 1}">
        <div class="top-page-title">
          <img v-if="form_query.type === 1" :src="urgent" style="height: 32px;padding: 0 10px;">
          <div class="header-title">
            <span class="title-id">REQUIREMENT-{{ 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 form_query.availableStatusList"
                :key="item.name"
                :command="{value: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-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="reated_task()">新建任务</el-dropdown-item>
              <el-dropdown-item @click.native="created_bug()">新建缺陷</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="updateVisible = true" />
          <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-start"
              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="requirementHold(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="requirementId" ref="timeLine1" :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.belongingProject !== -1" @click="jump('项目详情',form_query.belongingProject)">{{ form_query.belongingProjectName }}</div>
                <template v-else>{{ form_query.belongingProjectName }}</template>
              </el-form-item>
              <el-form-item label="所属迭代：">
                <el-select v-model="form_query.iterationId" placeholder="请选择" @change="changeArea">
                  <el-option v-for="(item,index) in iterationList" :key="item.name + index" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="PM：">
                <search-people :value.sync="form_query.pm" :clearable="false" @change="changeArea" />
              </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-cascader v-model="form_query.rqmtOrntIds" size="medium" collapse-tags :props="props" :options="demandDirection" placeholder="请选择" @change="changeArea" />
              </el-form-item>
              <el-form-item label="需求来源：">
                <el-select v-model="form_query.sourceType" size="small" filterable placeholder="请选择" @change="changeArea">
                  <el-option v-for="(item,index) in sourceTypeList" :key="item.msg + index" :label="item.msg" :value="item.code" />
                </el-select>
              </el-form-item>
              <el-form-item label="需求提出人：">
                <search-people :value.sync="form_query.rqmtProposer" :clearable="false" :multiple="true" @change="changeArea" />
              </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-model="form_query.priority" size="small" filterable placeholder="请选择" @change="changeArea">
                  <el-option v-for="(item,index) in priorityList" :key="item.msg + index" :label="item.msg" :value="item.code" />
                </el-select>
              </el-form-item>
              <el-form-item label="是否跟版：">
                <el-select v-model="form_query.dependOnRelease" 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-item v-if="form_query.dependOnRelease === 1" label="跟版客户端：">
                <el-select v-model="form_query.referredClientType" size="small" multiple 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>
            <el-form :model="form_query" class="demo-form-inline" label-position="left" label-width="100px">
              <el-form-item label="BRD链接：" class="PRD">
                <span class="PRD-link"><a :href="form_query.brdUrl" target="_blank">{{ form_query.brdUrl }}</a></span>
              </el-form-item>
              <el-form-item label="PRD链接：" prop="mrdUrl" class="PRD">
                <span class="PRD-link"><a :href="form_query.mrdUrl" target="_blank">{{ form_query.mrdUrl }}</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>
          </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>需求计划
                <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>
              </div>
            </div><br>
          </div>
          <section class="main-section">
            <div class="allTips">
              <el-radio-group v-model="listOrGannt" size="small" style="margin-left: 10px">
                <el-radio-button label="列表" />
                <el-radio-button label="甘特图" />
              </el-radio-group>
              <div v-show="listOrGannt === '列表'" class="allTips">
                <div v-if="BackToTheLatest" class="Scheduling" @click="GetRequireScheduleHistory"><i class="el-icon-refresh" /> 回到最新</div>
                <div v-if="Latest" align="left" class="Scheduling" @click="scheduleHiHide"><div class="el-icon-document" /> 排期变更记录</div>
                <download :id="requirementId" :name="'需求'" />
              </div>
            </div>
          </section>

          <el-container v-show="listOrGannt === '列表'" class="allTips">
            <el-main style="padding: 0;">
              <!-- <schedule-list :id="requirementId" ref="ScheduleEvent" :showunlock="showunlock" :type-list="taskScheduleEvent" :required-list="taskScheduleList" class-name="white" :all="true" :no-move="false" /> -->
              <demand :id="requirementId" ref="ScheduleEvent" :showunlock="showunlock" :type-list="taskScheduleEvent" :required-list="taskScheduleList" />
            </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>
          <gannt-views v-if="listOrGannt === '甘特图'" />
          <div class="detail-info border-top">
            <el-divider />
            <el-form ref="form_query" :inline="true" :model="form_query" class="Layout_space_start" label-position="left" label-width="140px">
              <el-form-item
                v-if="brdPassRealTime"
                label="BRD评审通过时间："
              >
                <el-date-picker v-model="form_query.brdPassRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" size="small" @change="setChangeArea" />
              </el-form-item>
              <el-form-item
                v-if="prdPassRealTime"
                label="PRD评审通过时间："
              >
                <el-date-picker v-model="form_query.prdPassRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" size="small" @change="setChangeArea" />
              </el-form-item>
              <el-form-item
                v-if="techInRealTime"
                label="技术准入时间："
              >
                <el-date-picker v-model="form_query.techInRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" size="small" @change="setChangeArea" />
              </el-form-item>
              <el-form-item
                v-if="onlineRealTime"
                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" />
              </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>
          <el-tabs v-model="optionName" 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="requirementId" 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">
          <tasks-list ref="tasks-list" @update="getRequirementById" />
        </section>
      </el-container>
      <!-- 任务 -->
      <!-- 缺陷 -->
      <el-container v-if="activeName === '3'" class="is-vertical">
        <section class="main-section contain">
          <bugTableDialog ref="bugTableDialog" :obj-id="{ requireId: Number(this.$route.query.id) }" />
        </section>
      </el-container>
      <!-- 缺陷 -->
      <!-- 统计 -->
      <el-container v-if="activeName === '4'" class="is-vertical">
        <section class="main-section contain">
          <data-statistics ref="data-statistics" @change="getRequirementById" />
        </section>
      </el-container>
      <!-- 统计 -->
      <!-- 编辑 -->
      <create-requirement
        title="编辑需求"
        :data="form_query"
        :visible="updateVisible"
        @cancel="updateVisible=false"
        @confirm="getRequirementById();updateVisible=false"
      />
      <!-- 编辑 -->
      <!-- 删除 -->
      <el-dialog :visible.sync="deleteVisible" class="public_task" title="删除确认" 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="deleteRequirement()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除 -->
      <openDialog v-if="task_open" ref="task_createdUpdata" :no-jump="true" @change="reloadList" />
      <createdBug v-if="bug_open" ref="createdBug" :required="requirementId" @reloadList="reloadList" />
      <!-- 排期锁定 -->
      <schedule :visible.sync="scheduleVisble" :name="'需求'" :is-schedule-locked="isScheduleLocked" :require-id="requirementId" @updataData="GetRequireScheduleHistory" />
      <!-- 排期锁定 -->
      <drawer
        ref="drawer"
        title="需求成员"
        center
        :display.sync="display"
        width="28%"
        :delete="form_query"
        :types="false"
        :inner="true"
        :mask="false"
        @childValInput="childVal"
        @click.stop
      />
      <el-dialog
        title="状态变更"
        :visible.sync="dialogStatusVisible"
        width="30%"
        class="public_task"
      >
        <div class="blueStripe" />
        <div align="center">
          <el-form ref="form_query" :inline="true" :model="form_query" :rules="rules" label-position="left" label-width="158px">
            <el-form-item v-if="statusName === 'BRD评审通过'" :label="statusName + '时间：'" prop="brdPassRealTime">
              <el-date-picker v-model="form_query.brdPassRealTime" type="date" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-if="statusName === 'PRD评审通过'" :label="statusName + '时间：'" prop="prdPassRealTime">
              <el-date-picker v-model="form_query.prdPassRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-if="statusName === '技术准入'" :label="statusName + '时间：'" prop="techInRealTime">
              <el-date-picker v-model="form_query.techInRealTime" type="date" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-if="statusName === '已上线'" :label="statusName + '时间：'" prop="onlineRealTime">
              <el-date-picker v-model="form_query.onlineRealTime" type="date" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogStatusVisible = false">取 消</el-button>
          <el-button type="primary" @click="setChangeArea">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
const _ = require('lodash')
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
import {
  updateRequirement,
  getRequirementById,
  updateRequirementStatus,
  deleteRequirement,
  showRequirementEnum,
  projectListProject,
  iterationList,
  getCommentList,
  addComment,
  listByRequire,
  requirementHold,
  requirementUnhold,
  configShowRequireStatusEnum,
  scheduleGetRequireScheduleHistory,
  scheduleGetHistoryRequireScheduleById,
  // scheduleGetHistoryScheduleById,
  settingQueryBizRqmtOrntList
} from '@/api/requirement.js'
import { projectGetMemberList } from '@/api/drewer'
import { configShowTaskEnum } from '@/api/taskIndex'
import searchPeople from '@/components/select/searchPeople'
import textArea from '@/components/input/textArea'
import drawer from '@/views/projectManage/Drawer'
import createRequirement from '@/views/projectManage/requirement/list/create.vue'
import openDialog from '@/views/projectManage/dialog_vue'
import image_url from '@/assets/home_images/home_u.png'
import createdBug from '@/views/projectManage/bugList/file/createdBug'
import tasksList from './components/taskList'
import dataStatistics from './components/dataStatistics'
import moment from 'moment'
// import scheduleList from './components/scheduleList'
import bugTableDialog from '@/views/projectManage/bugList/details/bugTableDialog' // 缺陷表格
import schedule from '@/views/projectManage/schedule' // 排期锁定弹窗
import urgent from '@/assets/urgent.png'
import download from '@/views/projectManage/components/export.vue'
import demand from '@/views/projectManage/components/demand.vue'
import record from '@/views/projectManage/components/record.vue'
import timeLine from '@/views/projectManage/components/timeLine.vue'
import ganntViews from './components/ganntViews'
import '@/styles/PublicStyle/index.scss'
export default {
  components: {
    searchPeople,
    textArea,
    drawer,
    createRequirement,
    openDialog,
    createdBug,
    tasksList,
    dataStatistics,
    // scheduleList,
    bugTableDialog,
    schedule,
    download,
    record,
    timeLine,
    demand,
    ganntViews
  },
  filters: {
    ellipsis(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  data() {
    return {
      urgent: urgent,
      showunlock: true,
      show2: true,
      activeTitle: '1', // 默认展示列表视图
      taskShow: 1, // 默认展示仅任务
      taskArray: [{ code: 1, name: '仅任务' }, { code: 2, name: '仅子任务' }, { code: 3, name: '所有任务' }], // 需求下任务展示
      textarea2: '',
      HoldTask: '',
      props: {
        value: 'id',
        label: 'rqmtOrntName',
        children: 'childRqmtOrnts',
        multiple: true
      },
      rules: {
        brdPassRealTime: [{ required: true, message: '请输入BRD评审通过时间', trigger: 'change' }],
        prdPassRealTime: [{ required: true, message: '请输入PRD评审通过时间', trigger: 'change' }],
        techInRealTime: [{ required: true, message: '请输入技术准入时间', trigger: 'change' }],
        onlineRealTime: [{ required: true, message: '请输入实际上线时间', trigger: 'change' }]
      },
      Latest: true,
      statusName: '',
      statusValue: '',
      dialogStatusVisible: false,
      demandDirection: [], // 需求方向option
      brdPassRealTime: false, // BRD评审通过时间
      prdPassRealTime: false, // PRD评审通过时间
      techInRealTime: false, // 技术准入
      onlineRealTime: false, // 实际上线
      optionName: 'first',
      visible: false, // Hold任务
      ScheduId: '', // 排期ID
      BackToTheLatest: false, // 回到最新
      LockState: {}, // 锁定状态
      scheduleVisble: false, // 排期锁定
      activeName: '1', // 顶部tab切换
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      textarea: '', // 评论
      requirementId: Number(this.$route.query.id), // 需求id
      statusList: [], // 状态列表
      priorityList: [], // 优先级列表
      sourceTypeList: [], // 需求来源列表
      appClient: [], // 跟版客户端列表
      taskScheduleEvent: [], // 排期类型列表
      dependList: [{ msg: '否', code: 0 }, { msg: '是', code: 1 }], // 是否跟版
      form_query: { pm: {}, rqmtOrntIds: [] },
      display: false, // 设置成员弹框
      num: 0, // 成员数量
      availableStatusList: [], // 状态
      image_url: image_url, // 成员icon
      updateVisible: false, // 编辑需求弹框
      deleteVisible: false, // 删除需求弹框
      task_open: false, // 新建任务弹框
      bug_open: false, // 新建缺陷弹框
      belongProjectList: [], // 所属项目列表
      iterationList: [], // 所属迭代列表
      commentContent: null, // 评论内容
      comments: [], // 评论列表
      taskScheduleList: [], // 排期数据
      lockHide: false, // 隐藏排期变更记录
      isScheduleLocked: '', // 锁定状态1锁定0未锁定
      SchedulingContent: [], // 排期历史变更记录
      listOrGannt: '列表'
    }
  },
  computed: {
    getStatus() {
      return this.availableStatusList.find(item => item.code === this.form_query.status) || { name: null }
    }
  },
  created() {
    this.showRequirementEnum()
    this.getRequirementById()
    this.getBelongProject()
    this.getIterationList()
    this.getCommentList()
    this.getTaskStatus()
    this.GetRequireScheduleHistory()
    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 GetRequireScheduleHistory() {
      this.scheduleVisble = false
      const res = await scheduleGetRequireScheduleHistory(this.requirementId)
      const res1 = await listByRequire(this.requirementId)
      this.isScheduleLocked = res1.data.isScheduleLocked
      this.SchedulingContent = res.data
      this.BackToTheLatest = false // 回到最新
      this.Latest = true
      this.lockHide = false // 隐藏排期变更记录
      this.showunlock = true
      this.ScheduId = 0
      this.$refs.ScheduleEvent.listByTask(this.requirementId)
      this.$refs.ScheduleEvent.lockingchange()
      this.getRequirementById()
    },
    async clickScheduling(ele) {
      this.showunlock = false
      this.Latest = false
      this.ScheduId = ele.id
      const res = await scheduleGetHistoryRequireScheduleById(ele.id)
      this.taskScheduleList = res.data
      this.BackToTheLatest = true
    },
    async changeSchedule() { // 修改锁定状态
      if (this.isScheduleLocked === 1) {
        const res = await projectGetMemberList({ projectId: this.form_query.belongingProject, requireId: this.requirementId })
        if (res.code === 200) {
          const data = res.data.PM
          data.map(item => {
            if (item.memberInfoResponse.idap === localStorage.getItem('username')) {
              this.scheduleVisble = true
            }
          })
          if (!this.scheduleVisble) {
            this.$message({ message: '没有权限，请联系PM执行解锁！', type: 'error', duration: 2000, offset: 150 })
          }
        }
      } else {
        this.scheduleVisble = true
      }
    },
    // clickBackToTheLatest() {
    //   this.$refs.ScheduleEvent.rowDrop()
    // },
    setChangeArea() {
      this.$refs.form_query.validate((valid) => {
        if (valid) {
          this.changeArea()
        } else {
          this.$message({ message: '还有必填项未填写', type: 'error', duration: 1000, offset: 150 })
        }
      })
    },
    async changeArea(e) { // area修改
      const requirementInfo = _.cloneDeep(this.form_query)
      requirementInfo.rqmtProposer = requirementInfo.rqmtProposer ? requirementInfo.rqmtProposer.join() : null
      if (requirementInfo.dependOnRelease === 1 && requirementInfo.referredClientType === null) {
        this.$message({ message: '跟版客户端不能为空', type: 'error', duration: 1000, offset: 150 })
        return false
      } else if (requirementInfo.dependOnRelease === 0) {
        requirementInfo.referredClientType = null
      }
      if (requirementInfo.referredClientType !== null) {
        requirementInfo.referredClientType = requirementInfo.referredClientType.join()
      }
      requirementInfo.status = this.statusValue
      const res = await updateRequirement(requirementInfo)
      if (res.code === 200) {
        this.dialogStatusVisible = false
        this.getRequirementById()
        this.$message({ message: '修改成功', type: 'success', duration: 1000, offset: 150 })
      }
      this.getRequirementById()
    },
    async getBelongProject() { // 获取所属项目列表
      const res = await projectListProject({ bizId: Number(localStorage.getItem('bizId')) })
      if (res.code === 200) {
        this.belongProjectList = res.data
      }
    },
    async getIterationList() { // 获取所属迭代列表
      const res = await iterationList({
        bizId: Number(localStorage.getItem('bizId')),
        curIndex: 1,
        pageSize: 999
      })
      if (res.code === 200) {
        this.iterationList = res.data.list
      }
      this.iterationList.unshift({ id: -1, name: '无' })
    },
    async showRequirementEnum() { // 获取需求状态列表，优先级列表，需求来源
      const res1 = await configShowRequireStatusEnum(localStorage.getItem('bizId'))
      if (res1.code === 200) {
        this.statusList = []
        this.statusList = res1.data.requirementStatus
      }
      const res = await showRequirementEnum()
      if (res.code === 200) {
        this.priorityList = res.data.priority
        this.sourceTypeList = res.data.sourceType
        this.appClient = res.data.appClient
      }
      const res3 = await settingQueryBizRqmtOrntList(localStorage.getItem('bizId'))
      if (res3.code === 200) { // 需求方向
        this.demandDirection = this.getTreeData(res3.data)
      }
    },
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].childRqmtOrnts.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].childRqmtOrnts = undefined
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].childRqmtOrnts)
        }
      }
      return data
    },
    changeBtn() {
      if (this.HoldTask === 'Hold 需求') {
        this.visible = !this.visible
        this.textarea2 = ''
      }
      if (this.HoldTask === '解除 Hold') {
        this.requirementHold()
      }
    },
    async requirementHold(val) { // 锁定Hold
      if (this.HoldTask === 'Hold 需求') {
        const res = await requirementHold(this.requirementId, { 'remark': val })
        if (res.code === 200) {
          this.getRequirementById()
          this.showRequirementEnum()
          this.$refs.timeLine1.taskGetWorkFlow()
          this.visible = false
          this.$message({ message: '已修改状态为 Hold', type: 'success', duration: 1000, offset: 150 })
        }
      }
      if (this.HoldTask === '解除 Hold') {
        const res = await requirementUnhold(this.requirementId)
        if (res.code === 200) {
          this.getRequirementById()
          this.showRequirementEnum()
          this.$refs.timeLine1.taskGetWorkFlow()
          this.$message({ message: 'Hold 状态已解除', type: 'success', duration: 1000, offset: 150 })
        }
      }
    },
    async getTaskStatus() { // 获取排期类型
      const res = await configShowTaskEnum()
      if (res.code === 200) {
        this.taskScheduleEvent = res.data.taskScheduleEvent || []
      }
    },
    async getRequirementById() { // 获取需求详情
      const res = await getRequirementById({ id: this.$route.query.id })
      if (res.code === 200) {
        this.form_query = res.data
        if (this.form_query.referredClientType !== null) {
          this.form_query.referredClientType = this.form_query.referredClientTypes
        }
        this.availableStatusList = res.data.availableStatusList
        if (this.form_query.rqmtProposer === null || this.form_query.rqmtProposer === '') {
          this.form_query.rqmtProposer = null
        } else {
          this.form_query.rqmtProposer = this.form_query.rqmtProposer.split(',')
        }
      }
      this.availableStatusList.map(item => {
        if (item.name === 'BRD评审通过') {
          if (this.form_query.status >= item.code) {
            this.brdPassRealTime = true
          }
        }
        if (item.name === 'PRD评审通过') {
          if (this.form_query.status >= item.code) {
            this.prdPassRealTime = true
          }
        }
        if (item.name === '技术准入') {
          if (this.form_query.status >= item.code) {
            this.techInRealTime = true
          }
        }
        if (item.name === '已上线') {
          if (this.form_query.status >= item.code) {
            this.onlineRealTime = true
          }
        }
      })
    },
    async getCommentList() { // 获取需求评论
      const res = await getCommentList({ type: 4, joinId: this.$route.query.id })
      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 user = localStorage.getItem('username')
      const res = await addComment({
        commentInfo: { joinId: this.$route.query.id, type: 4, content: this.commentContent },
        user: { ename: user }
      })
      if (res.code === 200) {
        this.getCommentList()
      } else {
        this.$message.warning(res.msg)
      }
    },
    async updateStatus(status) { // 修改状态
      if (status.label === 'PRD评审通过' || status.label === 'BRD评审通过' || status.label === '技术准入' || status.label === '已上线') {
        this.statusName = status.label
        this.statusValue = status.value
        this.dialogStatusVisible = true
        status.label === 'BRD评审通过' ? this.form_query.brdPassRealTime = moment().locale('zh-cn').format('YYYY.MM.DD') : '' // BRD评审通过时间
        status.label === 'PRD评审通过' ? this.form_query.prdPassRealTime = moment().locale('zh-cn').format('YYYY.MM.DD') : '' // PRD评审通过时间
        status.label === '技术准入' ? this.form_query.techInRealTime = moment().locale('zh-cn').format('YYYY.MM.DD') : '' // 技术准入
        status.label === '已上线' ? this.form_query.onlineRealTime = moment().locale('zh-cn').format('YYYY.MM.DD') : '' // 实际上线
        return false
      }
      const res = await updateRequirementStatus({
        id: this.$route.query.id,
        status: status.value,
        modifier: localStorage.getItem('username')
      })
      if (res.code === 200) {
        this.$refs.timeLine1.taskGetWorkFlow()
        this.$refs.record.operationLogTask()
        this.$message({ message: '修改成功', type: 'success', duration: 1000, offset: 150 })
      }
      this.getRequirementById()
    },
    childVal(val) {
      this.num = val
    },
    setChild() { // 设置成员
      this.$refs.drawer.getRoleList()
    },
    async deleteRequirement() { // 删除需求
      const res = await deleteRequirement({
        id: this.$route.query.id,
        modifier: localStorage.getItem('username')
      })
      if (res.code === 200) {
        this.$message({ message: '删除成功', type: 'success', duration: 1000, offset: 150 })
        this.$router.push({ name: '需求', query: {}})
      }
    },
    reated_task() { // 新建任务
      this.task_open = true
      this.$nextTick(() => {
        this.$refs.task_createdUpdata.init(4, this.$route.query.id,
          {
            requirementId: this.requirementId,
            name: `${this.form_query.name}的任务`,
            priority: this.form_query.priority
          }
        )
      })
    },
    created_bug() { // 缺陷创建
      this.bug_open = true
      this.$nextTick(() => {
        this.$refs.createdBug.init(1)
      })
    },
    scheduleHiHide() { // 排期变更显示隐藏
      this.lockHide = !this.lockHide
      this.lockHide === false ? this.BackToTheLatest = false : ''
      this.showunlock = true
    },
    jump(page, id) { // 跳转
      this.$router.push({ name: page, query: { id: id }})
    },
    reloadList() {
      this.GetRequireScheduleHistory()
      this.getRequirementById()
      if (this.$refs['bugTableDialog']) {
        this.$refs['bugTableDialog'].bugGetTableList()
      }
      if (this.$refs['data-statistics']) {
        this.$refs['data-statistics'].getRequireSumData()
      }
      if (this.$refs['tasks-list']) {
        this.$refs['tasks-list'].get_allTask()
      }
    },
    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;
  line-height: 20px;

  .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: 20%;
        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 {
      width: 50%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      padding-left: 15px;
    }
    .PRD-link:hover{
      color:#409EFF;
    }
  }
}
>>>.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;
    }
  }
>>>.el-input--small {
  font-size: 14px;
}
.vss {
  color: #409EFF !important;
   border:1px solid #409EFF !important;
}
.paddingLeft {
  padding-left: 0px;
}
.el-tabs-spacing {
  padding: 20px 30px;
  }
.sign-tabs {
  padding: 0 30px;
}
.el-btn-size {
   margin: 10px 30px;
}
.border-top {
 padding: 0 20px 10px !important;
 >>>.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0;
}
}
</style>