Merge branch 'pern' into http_test

src/api/drewer.js

@@ -0,0 +1,56 @@
+// 项目 任务 需求成员
+import request from '@/utils/request'
+import { TeamManagement } from '@/apiConfig/api'
+
+// 新建团队
+export function projectDeleteMember(data) {
+  return request({
+    url: TeamManagement + `/project/deleteMember`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取角色
+export function projectDetRoleList(data) {
+  return request({
+    url: TeamManagement + `/project/getRoleList`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取成员列表
+export function projectGetMemberList(data) {
+  return request({
+    url: TeamManagement + `/project/getMemberList`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取团队列表
+export function teamQueryTeamAndMemberInfoList(data) {
+  return request({
+    url: TeamManagement + `/team/queryTeamAndMemberInfoList`,
+    method: 'post',
+    data
+  })
+}
+
+// 新增
+export function projectAddMember(data) {
+  return request({
+    url: TeamManagement + `/project/addMember`,
+    method: 'post',
+    data
+  })
+}
+
+// id查询团队
+export function teamQueryTeamInfoExtra(id) {
+  return request({
+    url: TeamManagement + `/team/queryTeamInfoExtra?teamId=` + id,
+    method: 'get'
+  })
+}

src/layout/components/Navbar.vue

@@ -212,7 +212,7 @@ export default {
     }
 
     .right-menu-item {
-      display: inline-block;
+      // display: inline-block;
       padding: 0 8px;
       height: 100%;
       font-size: 18px;

src/views/projectManage/Drawer.vue

@@ -0,0 +1,658 @@
+<template>
+  <div class="drawer" @click.stop>
+    <div :class="maskClass" @click="closeByMask" />
+    <div :style="mainStyle" :class="{'main':types === true , 'max' : types === false , mainClass}">
+      <div class="drawer-head">
+        <span style="font-size:16px; line-height: inherit; color:rgba(51,59,74,1);">{{ title }}</span>
+        <span v-show="closable" class="close-btn" @click="closeByButton">X</span>
+      </div>
+      <div style="margin: 0 20px;">
+        <el-button style="width: 100%; margin-top: 15px;" type="primary" @click="dialogTableVisible = true">添加成员</el-button>
+        <div :class="{'height_one' : types === true , 'height_tow' : types === false }" @scroll.passive="getScroll($event)">
+          <div v-for="(val ,key,i) in MemberList" :key="i">
+            <div class="title">{{ key }}</div>
+            <div v-for="item in val" :key="item.member" class="loop">
+              <span style="display: flex">
+                <el-avatar style="background: #FFF;" class="phoneUrl" :src="item.memberInfoResponse.phoneUrl !== '' ? item.memberInfoResponse.phoneUrl : image_role " />
+                <div style="display: flex; flex-direction: column; margin-left: 10px;">
+                  <span class="titName">{{ item.memberInfoResponse.name }}<span v-if="item.isLeader === 1 ? true : false" class="responsibility">负责人</span></span>
+                  <span class="userName">{{ item.member }}</span>
+                </div>
+              </span>
+              <span :class="[item.canDelete === 1 ? 'colorSty' : 'colorStyTow']" class="el-icon-delete" @click="deletePersonnel(item, 2)" />
+            </div>
+          </div>
+          <div v-if="Gradient" :class="{'Gradient1':types === true , 'Gradient2' : types === false}" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加成员 -->
+    <el-dialog title="添加成员" width="50%" class="dia" :visible.sync="dialogTableVisible" :close-on-click-modal="false" :destroy-on-close="true" @close="roleEnd">
+      <div style="position: absolute; top: 23px; left: 20px;width:4px;height:17px;background:#409EFF;border-radius:1px;" />
+      <el-button-group style="margin-bottom: 10px;">
+        <el-button :class="[btn === false ? 'aa' : 'bb']" size="mini" @click="selectMembers('成员')">成员</el-button>
+        <el-button :class="[btn === true ? 'aa' : 'bb']" size="mini" @click="selectMembers('团队')">团队</el-button>
+      </el-button-group>
+      <el-form :model="form">
+        <div v-if="role">
+          <el-form-item>
+            <el-select v-model="form.role" size="small" style="width: 100%;" placeholder="请选择角色“PM/QA/RD”">
+              <el-option v-for="item in group" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="form.name" size="small" filterable clearable remote placeholder="请输入姓名或邮箱前缀" :remote-method="remoteMethod1" style="width: 100%;">
+              <el-option v-for="item in options1" :key="item.idap" :label="item.name" :value="test2(item, 0)" @click.native="getoptions(item)">
+                <div style="display: flex;justify-content: space-between;">
+                  <el-avatar size="small" style="background: #FFF;" class="phoneUrl">
+                    <img style="margin: 0 auto;" :src="item.phoneUrl === '' ? image_role : item.phoneUrl">
+                  </el-avatar>
+                  <div style="min-width:180px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
+                  <div style="min-width:150px">{{ item.name }}</div>
+                  <div style="min-width:150px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div v-if="!role" class="seleteTow">
+          <el-form-item>
+            <el-select v-model="form.name" size="small" filterable clearable remote placeholder="请输入团队名称" :remote-method="MemberInfoList" style="width: 100%; height: 85px;">
+              <el-option v-for="item in teamOptions" :key="item.teamId" :label="item.teamName" :value="item.teamId" @click.native="getTeamId(item)">
+                <span style="display: flex; height: 100%;line-height: 18px;">
+                  <el-avatar size="small" style="background: #DDDDDD; margin: auto 0;" class="phoneUrl">
+                    <img style="margin: auto; margin-top: 4px; width: 20px; height: 18px;" :src="image_url">
+                  </el-avatar>
+                  <span style="display: flex;font-size: 12px; flex-direction: column;margin-left:10px;">
+                    <span class="teamName">{{ item.teamName }}</span>
+                    <div style="display: flex; flex-direction: row;height: 50%">
+                      <span v-for="(ele, index) in item.members" :key="index">
+                        <div style="margin-right:10px;flex-direction: row;font-size: 12px;color:#BFC6DC;">{{ ele }}</div>
+                      </span>
+                    </div>
+                  </span>
+                </span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div class="bor_solid" @scroll.passive="getScroll($event)">
+        <div v-for="(item, index) in gridData2" :key="index" class="loop">
+          <span style="display: flex; min-width: 200px;">
+            <el-avatar style="background: #FFF; margin-right: 15px;" class="phoneUrl" :src="item.phoneUrl === '' ? image_role : item.phoneUrl" />
+            <div style="display: flex; flex-direction: column">
+              <span class="titName">{{ item.name }} </span>
+              <span class="userName">{{ item.idap }}</span>
+            </div>
+          </span>
+          <span style="color: #409EFF;">{{ item.roleName }}</span>
+          <span class="el-icon-delete colorStyTow" @click="deletePersonnel(item, 1)" />
+        </div>
+        <div v-if="Gradient" class="Gradient" />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogTableVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="createdRole()">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 删除成员 -->
+    <el-dialog title="删除确认" class="dialog_end" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :destroy-on-close="true">
+      <div style="position: absolute; top: 23px; left: 12px;width:4px;height:17px;background:#409EFF;border-radius:1px;" />
+      <div align="center">
+        <span>是否删除项目成员: {{ name }} ?</span>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="deleteRole()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { memberQueryMemberInfoByIDAPorName } from '@/api/taskIndex'
+import { projectDeleteMember, projectDetRoleList, projectGetMemberList, teamQueryTeamAndMemberInfoList, projectAddMember, teamQueryTeamInfoExtra } from '@/api/drewer'
+import image_url from '@/assets/团队.png'
+import image_role from '@/assets/role@2x.png'
+
+export default {
+  props: {
+    delete: {
+      type: Number,
+      default: 0
+    },
+
+    types: {
+      type: Boolean,
+      default: true
+    },
+
+    // 是否打开
+    display: {
+      type: Boolean
+    },
+
+    // 标题
+    title: {
+      type: String,
+      default: '标题'
+    },
+
+    // 是否显示关闭按钮
+    closable: {
+      type: Boolean,
+      default: true
+    },
+
+    // 是否显示遮罩
+    mask: {
+      type: Boolean,
+      default: false
+    },
+
+    // 是否点击遮罩关闭
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+
+    // 宽度
+    width: {
+      type: String,
+      default: '400px'
+    },
+
+    // 是否在父级元素中打开
+    inner: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      image_url: image_url, // 默认团队（头像）
+      image_role: image_role, // 默认成员 （头像）
+      name: '', // 删除成员Name
+      btn: false, // 成员/团队点击样式切换
+      MemberList: {},
+      group: [], // 角色下拉数据
+      gridData2: [], // 临时储存成员
+      dialogVisible: false, // 删除确认dialog
+      dialogTableVisible: false, // 添加成员dialog
+      teamOptions: [], // 搜索团队数据
+      options1: [], // 搜索成员数据
+      test: [],
+      Gradient: true,
+      role: true,
+      TeamMembers: {},
+      form: {
+        role: '',
+        name: ''
+      }
+    }
+  },
+  computed: {
+    maskClass: function() {
+      return {
+        'mask-show': (this.mask && this.display),
+        'mask-hide': !(this.mask && this.display),
+        'inner': this.inner
+      }
+    },
+    mainClass: function() {
+      return {
+        'main-show': this.display,
+        'main-hide': !this.display,
+        'inner': this.inner
+      }
+    },
+    mainStyle: function() {
+      return {
+        width: this.width,
+        right: this.display ? '0' : `-${this.width}`,
+        borderLeft: this.mask ? 'none' : '1px solid #eee'
+      }
+    }
+  },
+  mounted() {
+    if (this.inner) {
+      const box = this.$el.parentNode
+      box.style.position = 'relative'
+    }
+    this.getRoleList()
+  },
+  methods: {
+    open() {
+      this.$emit('update:display', true)
+    },
+    closeByMask() {
+      this.maskClosable && this.$emit('update:display', false)
+    },
+    selectMembers(e) {
+      if (e === '成员') {
+        this.role = true
+        this.btn = false
+      } else {
+        this.role = false
+        this.btn = true
+      }
+    },
+
+    roleEnd() { // 清空添加成员列表
+      this.gridData2 = []
+    },
+
+    createdRole() {
+      const members = []
+      this.gridData2.map(item => {
+        const obj = {}
+        obj.roleId = item.roleId
+        obj.member = item.idap
+        members.push(obj)
+      })
+      const data = { 'members': members } // 人员列表
+      this.title === '项目成员' ? data.projectId = this.delete : ''
+      this.title === '需求成员' ? data.requireId = this.delete : ''
+      this.title === '任务成员' ? data.taskId = this.delete : ''
+      projectAddMember(data).then(res => {
+        this.getRoleList()
+        this.dialogTableVisible = false
+        this.$message({
+          showClose: true,
+          message: res.msg,
+          type: 'success'
+        })
+      })
+    },
+    getTeamId(e) { // 点击项目组， 获取teamId的成员
+      teamQueryTeamInfoExtra(e.teamId).then(res => {
+        const objs = {}
+        const data = res.data.teamLeaderRelateInfoResponseList.concat(res.data.teamMemberRelateInfoResponseList)
+        var obj = {}
+        objs.data = data.reduce(function(item, next) {
+          obj[next.memberIDAP] ? '' : obj[next.memberIDAP] = true && item.push(next)
+          return item
+        }, [])
+        for (const i in objs.data) {
+          objs.data[i].roleId = res.data.teamAttribute[0]
+          objs.data[i].idap = objs.data[i].memberIDAP
+          objs.data[i].name = objs.data[i].memberName
+          objs.data[i].empId = objs.data[i].memberIDAP
+          this.getoptions(objs.data[i])
+        }
+        this.$set(this.form, 'name', '')
+        this.teamOptions = []
+      })
+    },
+
+    getoptions(val) { // 添加角色判断重复人员是否为相同角色
+      this.group.map(item => {
+        this.form.role === item.id ? val.roleName = item.name : ''
+      })
+      if (this.gridData2.length > 0) {
+        const num = this.gridData2.some(item => {
+          if (item.idap === val.idap && item.roleId === this.form.role) {
+            return true
+          }
+        })
+        if (num) {
+          this.$message.warning('该角色已添加过该成员')
+        } else {
+          val.roleId = this.form.role
+          this.gridData2.push(val)
+        }
+      } else {
+        val.roleId = this.form.role
+        this.gridData2.push(val)
+      }
+      this.options1 = []
+      this.$set(this.form, 'name', '')
+    },
+
+    deleteRole() { // 删除确认
+      const data = {}
+      data.roleId = this.TeamMembers.roleId
+      data.member = this.TeamMembers.memberInfoResponse.idap
+      this.title === '项目成员' ? data.projectId = this.delete : ''
+      this.title === '需求成员' ? data.requireId = this.delete : ''
+      this.title === '任务成员' ? data.taskId = this.delete : ''
+      projectDeleteMember(data).then(res => {
+        if (res.code === 200) {
+          this.getRoleList()
+          this.dialogVisible = false
+          this.$message({
+            showClose: true,
+            message: res.msg,
+            type: 'success'
+          })
+        }
+      })
+    },
+
+    deletePersonnel(e, index) { // 删除diolag
+      switch (index) {
+        case 1:
+          this.gridData2 = this.gridData2.filter(item => {
+            return item.empId !== e.empId
+          })
+          break
+        case 2:
+          if (e.canDelete === 1) {
+            return false
+          } else {
+            this.TeamMembers = e
+            this.name = e.memberInfoResponse.name
+            this.dialogVisible = true
+          }
+          break
+      }
+    },
+
+    getScroll(event) { // 滚动条距离底部的距离scrollBottom
+      const scrollBottom = event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight
+      if (scrollBottom < 4) {
+        this.Gradient = false
+      } else {
+        this.Gradient = true
+      }
+    },
+    closeByButton() { // 关闭dialog
+      this.$emit('update:display', false)
+    },
+    remoteMethod1(query) { // 人员查询
+      if (query !== '') {
+        memberQueryMemberInfoByIDAPorName({ memberIDAP: query, needPhoto: true }).then(res => {
+          const obj = {}
+          this.options1 = res.data.reduce((cur, next) => {
+            obj[next.idap] ? '' : obj[next.idap] = true && cur.push(next)
+            return cur
+          }, [])
+        })
+      } else {
+        this.options = []
+      }
+    },
+    test2(item, e) { // 获取团队人员信息
+      if (typeof this.test[item.idap] === 'undefined') {
+        item.role = e
+        this.test[item.idap] = item
+      }
+      return item.idap
+    },
+    MemberInfoList(vel) {
+      teamQueryTeamAndMemberInfoList({ 'teamName': vel }).then(res => { // 按团队搜索
+        this.teamOptions = res.data
+      })
+    },
+    async getRoleList() { // 项目成员list
+      const data = {}
+      this.title === '项目成员' ? data.projectId = this.delete : ''
+      this.title === '需求成员' ? data.requireId = this.delete : ''
+      this.title === '任务成员' ? data.taskId = this.delete : ''
+      const MemberList = projectGetMemberList(data) // 获取抽屉主面板数据
+      const RoleList = projectDetRoleList({}) // 获取角色数据
+      const res1 = await MemberList
+      const res2 = await RoleList
+      this.MemberList = res1.data
+      this.group = res2.data
+      this.$set(this.form, 'role', this.group[0].id) // 添加角色默认值
+      this.$emit('childValInput', res1.total)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer {
+  /* 遮罩 */
+  .mask-show {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    background-color: rgba(0,0,0,.5);
+    opacity: 1;
+    transition: opacity .5s;
+  }
+  .mask-hide {
+    opacity: 0;
+    transition: opacity .5s;
+  }
+
+  /* 滑块 */
+  .main { // 任务
+    position: fixed;
+    z-index: 10;
+    top: 197px;
+    height: 100%;
+    background: #fff;
+    transition: all 0.5s;
+  }
+  .max { // 项目和需求
+    position: fixed;
+    z-index: 10;
+    top: 130px;
+    height: 100%;
+    background: #fff;
+    transition: all 0.5s;
+  }
+
+  .main-show {
+    opacity: 1;
+  }
+  .main-hide {
+    opacity: 0;
+  }
+
+  /* 某个元素内部显示 */
+  .inner {
+    position: fixed;
+  }
+
+  /* 其他样式 */
+  .drawer-head {
+    display: flex;
+    justify-content: space-between;
+    height: 45px;
+    line-height: 45px;
+    padding: 0 15px 0 40%;
+    font-size:14px;
+    border: 1px solid #eee;
+    .close-btn {
+      display: inline-block;
+      cursor: pointer;
+      height: 100%;
+      color: #979797;
+      padding-left: 20px;
+    }
+  }
+
+  .title {
+    width:83px;
+    height:21px;
+    font-size:16px;
+    font-family:PingFangSC-Medium;
+    line-height:22px;
+    color:rgba(51,59,74,1);
+    opacity:1;
+    margin-top:20px;
+  }
+
+  .titName {
+    font-size:14px;
+    font-family:PingFang SC;
+    font-weight:400;
+    line-height:30px;
+    color:rgba(51,59,74,1);
+    opacity:1;
+  }
+
+  .userName {
+    font-size:10px;
+    font-family:PingFang SC;
+    font-weight:400;
+    line-height:14px;
+    color:rgba(51,59,74,1);
+    opacity:0.4;
+  }
+
+  .height_one {
+    height: 62vh;
+    overflow:scroll;
+    overflow-x: hidden;
+  }
+
+  .height_tow {
+    height: 71vh;
+    overflow:scroll;
+    overflow-x: hidden;
+  }
+
+  .Gradient2 {
+    height: 30px;
+    position: absolute;
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(white));
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, white 100%);
+    opacity: 1;
+    left: 0px;
+    right: 0px;
+    bottom: 137px;
+    margin: 0px 31px 0 21px;
+    border-radius: 4px;
+  }
+
+  .Gradient1 {
+    height: 30px;
+    position: absolute;
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(white));
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, white 100%);
+    opacity: 1;
+    left: 0px;
+    right: 0px;
+    bottom: 206px;
+    margin: 0px 31px 0 21px;
+    border-radius: 4px;
+  }
+
+  .Gradient {
+    height: 60px;
+    position: absolute;
+    background: linear-gradient(180deg,rgba(255,255,255,0.25) 0%,rgba(255,255,255,1) 100%);
+    opacity: 1;
+    left: 0px;
+    right: 0px;
+    bottom: 78.5px;
+    margin: 0px 29px;
+    border-radius: 4px;
+  }
+
+  .bor_solid {
+    height:300px;
+    border:1px dashed rgba(191,198,220,1);
+    margin-top: 10px;
+    border-radius:4px;
+    overflow:scroll;
+    overflow-x: hidden;
+  }
+
+  .loop {
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    margin:10px;
+  }
+
+  .fontColor {
+    padding: 0 10px;
+    font-size:10px;
+    font-family:PingFang SC;
+    font-weight:400;
+    line-height:14px;
+    color:rgba(64,158,255,1);
+  }
+
+  .responsibility {
+    height: 15px;
+    background:#dcedff;
+    border-radius:10px;
+  }
+
+  .colorSty {
+    color: #DDDDDD;
+  }
+
+  .colorStyTow {
+    cursor: pointer;
+    color: #333B4A;
+  }
+
+  .phoneUrl {
+    /deep/ img {
+      margin: 0 auto;
+    }
+  }
+
+  .dialog_end {
+    /deep/ .el-dialog__header {
+        padding: 20px 20px 10px 30px;
+      }
+  }
+
+  .dia{
+    /deep/ .el-dialog__header {
+        border-bottom: 1px solid #EEEEEE;
+        padding: 20px 20px 10px 30px;
+      }
+  }
+
+  /deep/ .el-dialog__body {
+    padding: 20px 20px;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+    /deep/ .el-form-item {
+    margin-bottom: 5px;
+    }
+  }
+
+  .aa {
+       background: #409EFF;
+       color: #FFF;
+  }
+
+  .bb {
+    background: #FFF;
+    color: #BFBFBF;
+  }
+
+  .seleteTow {
+    font-size: 12px;
+  }
+
+  .teamName {
+    font-size:14px;
+    font-family:PingFang SC;
+    font-weight:400;
+    line-height:20px;
+    color: #333333;
+    height: 50%;
+  }
+
+  .responsibility {
+    width:30px;
+    height:16px;
+    font-size:12px;
+    font-weight:400;
+    line-height:14px;
+    color:rgba(64,158,255,1);
+    opacity:1;
+    margin-left: 10px;
+    padding: 0 5px;
+  }
+}
+</style>

src/views/projectManage/dialog_vue.vue

@@ -179,7 +179,6 @@ export default {
           this.projectId = url.split('?id=')
           projectList({ id: Number(this.projectId[1]), curIndex: 1, pageSize: 15 }).then(res => {
             this.dialogFormVisible = true
-            console.log(res.data[0].id, 'ddsdssdssdds')
             var that = this
             setTimeout(function() {
               that.task_form = {}
@@ -219,6 +218,10 @@ export default {
                 hash[next.idap] ? '' : hash[next.idap] = true && item.push(next)
                 return item
               }, [])
+              that.options1 = arr_object.reduce(function(item, next) {
+                hash[next.idap] ? '' : hash[next.idap] = true && item.push(next)
+                return item
+              }, [])
             }, 100)
           })
           break
@@ -350,7 +353,7 @@ export default {
           })
         }, 200)
       } else {
-        this.options = []
+        this.options1 = []
       }
     },
     get_source(e) {

src/views/projectManage/projectList/projectViewDetails.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="bgBug" style="background-color:#F2F3F6;display:flex;align-items: center;justify-content: center;">
+  <div class="bgBug" style="background-color:#F2F3F6;display:flex;align-items: center;justify-content: center;" @click="display = false">
     <el-container>
       <el-header
         class="bgborder bgborderButton"
-        style="margin: 1%;height: 60px;display: flex; justify-content: space-between; align-items: center;"
+        style="margin: 15px 1%;height: 60px;display: flex; justify-content: space-between; align-items: center;"
       >
         <span style="display: flex; justify-content: space-between; align-items: center;">
           <el-tooltip :disabled="form_query.name && form_query.name.length > 20 ? false : true" effect="dark" :content="form_query.name" placement="bottom">
@@ -30,6 +30,7 @@
           </el-dropdown>
         </span>
         <span style="float: right;">
+          <span style="vertical-align: bottom; cursor: pointer; color: #6F7C93;" @click.stop="setChild(), display = true"><img style="width: 24px; display: inline-block;" :src="image_url">&nbsp; {{ num }} &nbsp;</span>
           <el-button size="mini" @click="dele_pro()">删除项目</el-button>
           <el-dropdown placement="bottom" style="margin-left: 10px;">
             <el-button size="mini" type="primary">
@@ -567,6 +568,19 @@
     <TestReport v-if="dialogTestReport" ref="TestReport" />
     <DailyReport v-if="dialogDailyReport" ref="DailyReport" />
     <ClientReport v-if="dialogClientReport" ref="ClientReport" />
+    <drawer
+      ref="drawer"
+      title="项目成员"
+      center
+      :display.sync="display"
+      width="28%"
+      :delete="Number(projectId[1])"
+      :types="false"
+      :inner="true"
+      :mask="false"
+      @childValInput="childVal"
+      @click.stop
+    />
   </div>
 </template>
 
@@ -594,6 +608,8 @@ import '@/views/projectManage/projectList/css/index.css'
 import TestReport from '@/views/Platform/presentation/Templates/TestReport' // 提测
 import DailyReport from '@/views/Platform/presentation/Templates/DailyReport' // 日报
 import ClientReport from '@/views/Platform/presentation/Templates/ClientReport' // 准出
+import drawer from '@/views/projectManage/Drawer'
+import image_url from '@/assets/home_images/home_u.png'
 export default {
   components: {
     openDialog,
@@ -601,7 +617,8 @@ export default {
     createdBug,
     TestReport,
     DailyReport,
-    ClientReport
+    ClientReport,
+    drawer
   },
   filters: {
     dateStr(value) {
@@ -658,6 +675,9 @@ export default {
       }
     }
     return {
+      num: '',
+      image_url: image_url,
+      display: false,
       modalShow: false, // 弹窗（新建）
       loading: false,
       dialog_open: false,
@@ -757,6 +777,9 @@ export default {
     this.$store.state.data.bizId = false
   },
   methods: {
+    childVal(val) {
+      this.num = val
+    },
     initRequirementCreateDialog() {
       var url = window.location.href // 获取url中"?"符后的字串
       this.projectId = url.split('?id=')
@@ -880,6 +903,9 @@ export default {
         this.total = res.total
       })
     },
+    setChild() {
+      this.$refs.drawer.getRoleList()
+    },
     click_name(e) {
       this.condition = ''
       this.condition = e

src/views/projectManage/requirement/details/index.vue

@@ -1,248 +1,264 @@
 <template>
-  <el-container style="background-color: #F2F3F6;">
-    <el-header style="margin: 1%;" class="layout_header">
-      <div>
-        <el-tooltip :disabled="requirement.name && requirement.name.length > 19 ? false : true" effect="dark" :content="requirement.name" placement="bottom">
-          <span style="font-size:20px;font-family:MicrosoftYaHei;color:rgba(51,51,51,1);">{{ '需求：' + requirement.name | ellipsis }}</span>
-        </el-tooltip>
-        <el-dropdown
-          placement="bottom"
-          @command="updateRequirementStatus"
-        >
-          <el-button
-            size="mini"
-            class="el-dropdown-link drop_down"
-            style="cursor: pointer;margin-left: 15px;"
+  <div @click="display = false">
+    <el-container style="background-color: #F2F3F6;">
+      <el-header style="margin: 15px 1%;" class="layout_header">
+        <div>
+          <el-tooltip :disabled="requirement.name && requirement.name.length > 19 ? false : true" effect="dark" :content="requirement.name" placement="bottom">
+            <span style="font-size:20px;font-family:MicrosoftYaHei;color:rgba(51,51,51,1);">{{ '需求：' + requirement.name | ellipsis }}</span>
+          </el-tooltip>
+          <el-dropdown
+            placement="bottom"
+            @command="updateRequirementStatus"
           >
-            <span class="el-dropdown-link">{{ getStatusName() }}</span>
-            <i class="el-icon-arrow-down el-icon--right" />
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item
-              v-for="(item,index) in searchInfo.requirementStatus"
-              :key="index"
-              :command="item"
-            >{{ item.msg }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <div style="display: inline-block;float: right">
-          <el-button size="mini" style="margin-left: 10px" @click="deleteRequirement">删除需求</el-button>
-          <el-button type="primary" size="mini" @click="createTask">新建任务</el-button>
-        </div>
-      </div>
-    </el-header>
-    <el-container>
-      <el-aside width="52%" style="margin: 0% 1% 1% 1%;" class="layout_aside">
-        <div style="display:flex;align-items: center;">
-          <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
-          <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">数据统计</div>
+            <el-button
+              size="mini"
+              class="el-dropdown-link drop_down"
+              style="cursor: pointer;margin-left: 15px;"
+            >
+              <span class="el-dropdown-link">{{ getStatusName() }}</span>
+              <i class="el-icon-arrow-down el-icon--right" />
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="(item,index) in searchInfo.requirementStatus"
+                :key="index"
+                :command="item"
+              >{{ item.msg }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <div style="display: inline-block;float: right">
+            <span style="line-height: 45px;vertical-align: bottom; cursor: pointer; color: #6F7C93;" @click.stop="setChild(), display = true"><img style="width: 24px; display: inline-block;" :src="image_url">&nbsp; {{ num }} </span>
+            <el-button size="mini" style="margin-left: 10px" @click="deleteRequirement">删除需求</el-button>
+            <el-button type="primary" size="mini" @click="createTask">新建任务</el-button>
+          </div>
         </div>
-        <div v-loading="loading.task || loading.bug" class="div_statistics" style="margin: 2%">
-          <el-container style="border-bottom: 1px solid #D8D8D8">
-            <el-aside width="30%" style="border-right: 1px solid #d8d8d8">
-              <div style="width:100%;text-align: center;">
-                <div style="font-size: 16px;margin-top: 26px">任务数量</div>
-                <div style="font-size: 72px">{{ statistics.task.totalCount }}</div>
-                <div
-                  style="font-size: 14px;color: rgba(245,108,108,1);margin-bottom: 16px"
-                >{{ '已延期'+statistics.task.delayCount+'个' }}</div>
-              </div>
-            </el-aside>
-            <el-aside width="70%">
-              <requirement-chart
-                :chart-id="'taskCount'"
-                :option="taskOption"
-                style="position: relative;bottom: 30px"
-              />
-            </el-aside>
-          </el-container>
-          <el-container>
-            <el-aside width="30%" style="border-right: 1px solid #d8d8d8">
-              <div style="width:100%;text-align: center;">
-                <div style="font-size: 16px;margin-top: 26px">bug数量</div>
-                <div style="font-size: 72px">{{ statistics.bug.totalCount }}</div>
+      </el-header>
+      <el-container>
+        <el-aside width="52%" style="margin: 0% 1% 1% 1%;" class="layout_aside">
+          <div style="display:flex;align-items: center;">
+            <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
+            <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">数据统计</div>
+          </div>
+          <div v-loading="loading.task || loading.bug" class="div_statistics" style="margin: 2%">
+            <el-container style="border-bottom: 1px solid #D8D8D8">
+              <el-aside width="30%" style="border-right: 1px solid #d8d8d8">
+                <div style="width:100%;text-align: center;">
+                  <div style="font-size: 16px;margin-top: 26px">任务数量</div>
+                  <div style="font-size: 72px">{{ statistics.task.totalCount }}</div>
+                  <div
+                    style="font-size: 14px;color: rgba(245,108,108,1);margin-bottom: 16px"
+                  >{{ '已延期'+statistics.task.delayCount+'个' }}</div>
+                </div>
+              </el-aside>
+              <el-aside width="70%">
+                <requirement-chart
+                  :chart-id="'taskCount'"
+                  :option="taskOption"
+                  style="position: relative;bottom: 30px"
+                />
+              </el-aside>
+            </el-container>
+            <el-container>
+              <el-aside width="30%" style="border-right: 1px solid #d8d8d8">
+                <div style="width:100%;text-align: center;">
+                  <div style="font-size: 16px;margin-top: 26px">bug数量</div>
+                  <div style="font-size: 72px">{{ statistics.bug.totalCount }}</div>
+                  <div
+                    style="font-size: 14px;color: rgba(245,108,108,1);margin-bottom: 16px"
+                  >{{ '以后修复'+statistics.bug.fixInFutureCount+'个' }}</div>
+                </div>
+              </el-aside>
+              <el-aside width="70%">
+                <requirement-chart
+                  :chart-id="'bugCount'"
+                  :option="bugOption"
+                  style="position: relative;bottom: 30px"
+                />
+              </el-aside>
+            </el-container>
+          </div>
+        </el-aside>
+        <el-aside width="45%" style="margin: 0% 1% 1% 0;" class="layout_aside special-button">
+          <div style="display:flex;align-items: center;">
+            <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
+            <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">基础信息</div>
+          </div>
+          <div style="text-align: right;">
+            <el-button
+              type="info"
+              plain
+              size="mini"
+              @click="updateDialogVisible = true"
+            >修改</el-button>
+          </div>
+          <div
+            style="font-size: 14px;color: #666666"
+            class="div_requirment_info"
+          >
+            <el-row>
+              <el-col :span="6">归属的项目:</el-col>
+              <el-col :span="18">
                 <div
-                  style="font-size: 14px;color: rgba(245,108,108,1);margin-bottom: 16px"
-                >{{ '以后修复'+statistics.bug.fixInFutureCount+'个' }}</div>
-              </div>
-            </el-aside>
-            <el-aside width="70%">
-              <requirement-chart
-                :chart-id="'bugCount'"
-                :option="bugOption"
-                style="position: relative;bottom: 30px"
-              />
-            </el-aside>
-          </el-container>
-        </div>
-      </el-aside>
-      <el-aside width="45%" style="margin: 0% 1% 1% 0;" class="layout_aside special-button">
-        <div style="display:flex;align-items: center;">
+                  style="display: inline-block;color: #409EFF;cursor: pointer;"
+                  @click="jumpTaskDetal(requirement.belongingProject)"
+                >{{ requirement.belongingProjectName }}</div>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">业务线:</el-col>
+              <el-col :span="18">{{ requirement.bizName }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">优先级:</el-col>
+              <el-col :span="18">{{ requirement.priorityName }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">需求来源:</el-col>
+              <el-col :span="18">{{ requirement.sourceTypeName }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">PM:</el-col>
+              <el-col :span="18">{{ getPmName() }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">PRD链接:</el-col>
+              <el-col :span="18">
+                <el-link type="primary" :href="requirement.mrdUrl">{{ requirement.mrdUrl }}</el-link>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">是否跟版:</el-col>
+              <el-col :span="18">{{ requirement.dependOnRelease? '是':'否' }}</el-col>
+            </el-row>
+            <el-row v-if="requirement.dependOnRelease">
+              <el-col :span="6">涉及的客户端:</el-col>
+              <el-col :span="18">{{ getAppClientName() }}</el-col>
+            </el-row>
+          </div>
+        </el-aside>
+      </el-container>
+      <el-main id="requirement_details" style="margin: 0 1%;padding: 0" class="layout_main">
+        <div style="display:flex;align-items: center;margin: 2% 0 0 2%;">
           <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
-          <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">基础信息</div>
+          <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">任务</div>
         </div>
-        <div style="text-align: right;">
-          <el-button
-            type="info"
-            plain
-            size="mini"
-            @click="updateDialogVisible = true"
-          >修改</el-button>
-        </div>
-        <div
-          style="font-size: 14px;color: #666666"
-          class="div_requirment_info"
+        <el-radio-group v-model="radio" size="mini" style="float: right;margin: 0 1% 1% 0">
+          <el-radio-button label="列表" />
+          <el-radio-button label="甘特图" />
+        </el-radio-group>
+        <br>
+        <el-table
+          v-if="radio === '列表'"
+          v-loading="loading.table"
+          :data="tableData"
+          style="width: 100%;"
+          highlight-current-row
+          :header-cell-style="{ background: '#6AB4FF', color: '#FFFFFF',textAlign: 'center'}"
+          :cell-style="{'font-size':'14px','font-family':'MicrosoftYaHei'}"
         >
-          <el-row>
-            <el-col :span="6">归属的项目:</el-col>
-            <el-col :span="18">
-              <div
-                style="display: inline-block;color: #409EFF;cursor: pointer;"
-                @click="jumpTaskDetal(requirement.belongingProject)"
-              >{{ requirement.belongingProjectName }}</div>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="6">业务线:</el-col>
-            <el-col :span="18">{{ requirement.bizName }}</el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="6">优先级:</el-col>
-            <el-col :span="18">{{ requirement.priorityName }}</el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="6">需求来源:</el-col>
-            <el-col :span="18">{{ requirement.sourceTypeName }}</el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="6">PM:</el-col>
-            <el-col :span="18">{{ getPmName() }}</el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="6">PRD链接:</el-col>
-            <el-col :span="18">
-              <el-link type="primary" :href="requirement.mrdUrl">{{ requirement.mrdUrl }}</el-link>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="6">是否跟版:</el-col>
-            <el-col :span="18">{{ requirement.dependOnRelease? '是':'否' }}</el-col>
-          </el-row>
-          <el-row v-if="requirement.dependOnRelease">
-            <el-col :span="6">涉及的客户端:</el-col>
-            <el-col :span="18">{{ getAppClientName() }}</el-col>
-          </el-row>
-        </div>
-      </el-aside>
-    </el-container>
-    <el-main id="requirement_details" style="margin: 0 1%;padding: 0" class="layout_main">
-      <div style="display:flex;align-items: center;margin: 2% 0 0 2%;">
-        <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
-        <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">任务</div>
-      </div>
-      <el-radio-group v-model="radio" size="mini" style="float: right;margin: 0 1% 1% 0">
-        <el-radio-button label="列表" />
-        <el-radio-button label="甘特图" />
-      </el-radio-group>
-      <br>
-      <el-table
-        v-if="radio === '列表'"
-        v-loading="loading.table"
-        :data="tableData"
-        style="width: 100%;"
-        highlight-current-row
-        :header-cell-style="{ background: '#6AB4FF', color: '#FFFFFF',textAlign: 'center'}"
-        :cell-style="{'font-size':'14px','font-family':'MicrosoftYaHei'}"
-      >
-        <el-table-column prop="name" label="任务名" min-width="20%" align="center">
-          <template v-slot="scope">
-            <div style="cursor: pointer;" @click="getToTaskDetails(scope.row.id)">{{ scope.row.name }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="beginTime" label="排期" min-width="15%" align="center">
-          <template
-            v-slot="scope"
-          >{{ getSchedule(scope.row) }}</template>
-        </el-table-column>
-        <el-table-column prop="statusString" label="状态" min-width="10%" align="center">
-          <template v-slot="scope">
-            <div style="color: #FF9500">{{ scope.row.statusString }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="stageString" label="任务健康状态" min-width="12%" align="center">
-          <template v-slot="scope">
-            <div class="double-line">{{ scope.row.stageString }}</div>
-            <div class="double-line-tow">{{ scope.row.lateMsg }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="rate" label="任务进展" min-width="15%" align="left">
-          <template v-slot="scope">
-            <el-progress :percentage="Number(scope.row.rate?scope.row.rate.substring(0,4).replace(/%/g,''):0)" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="rdObject" label="开发负责人" min-width="10%" align="center">
-          <template v-slot="scope">{{ scope.row.rdObject?scope.row.rdObject.name:'空' }}</template>
-        </el-table-column>
-        <el-table-column prop="qaObject" label="测试负责人" min-width="10%" align="center">
-          <template v-slot="scope">{{ scope.row.qaObject?scope.row.qaObject.name:'空' }}</template>
-        </el-table-column>
-        <el-table-column prop="rdList" label="开发" min-width="10%" align="center">
-          <template v-slot="scope">{{ getQaOrRdNameList(scope.row.rdList) }}</template>
-        </el-table-column>
-        <el-table-column prop="qaList" label="测试" min-width="10%" align="center">
-          <template v-slot="scope">{{ getQaOrRdNameList(scope.row.qaList) }}</template>
-        </el-table-column>
-      </el-table>
-      <gantt v-if="radio === '甘特图' && ganttTableData" :versions="ganttVersions" :table-data="ganttTableData" :string-type="'任务'" />
-      <div style="margin:0 2%;padding: 2% 0;border-bottom: 1px solid #D8D8D8;font-size: 14px;color: #333333">排期汇总：{{ getScheduleCollect() }}</div>
-      <el-row style="margin: 2%;font-size: 14px;color: #333333">
-        <el-col :span="8">
-          <div v-for="(item,index) in task.preOnlineVersion" :key="index" style="margin-bottom:10px"> <span :style="{visibility: index===0?'visible ':'hidden'}">预期上线版本：</span>{{ item }}</div>
-        </el-col>
+          <el-table-column prop="name" label="任务名" min-width="20%" align="center">
+            <template v-slot="scope">
+              <div style="cursor: pointer;" @click="getToTaskDetails(scope.row.id)">{{ scope.row.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="beginTime" label="排期" min-width="15%" align="center">
+            <template
+              v-slot="scope"
+            >{{ getSchedule(scope.row) }}</template>
+          </el-table-column>
+          <el-table-column prop="statusString" label="状态" min-width="10%" align="center">
+            <template v-slot="scope">
+              <div style="color: #FF9500">{{ scope.row.statusString }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="stageString" label="任务健康状态" min-width="12%" align="center">
+            <template v-slot="scope">
+              <div class="double-line">{{ scope.row.stageString }}</div>
+              <div class="double-line-tow">{{ scope.row.lateMsg }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="rate" label="任务进展" min-width="15%" align="left">
+            <template v-slot="scope">
+              <el-progress :percentage="Number(scope.row.rate?scope.row.rate.substring(0,4).replace(/%/g,''):0)" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="rdObject" label="开发负责人" min-width="10%" align="center">
+            <template v-slot="scope">{{ scope.row.rdObject?scope.row.rdObject.name:'空' }}</template>
+          </el-table-column>
+          <el-table-column prop="qaObject" label="测试负责人" min-width="10%" align="center">
+            <template v-slot="scope">{{ scope.row.qaObject?scope.row.qaObject.name:'空' }}</template>
+          </el-table-column>
+          <el-table-column prop="rdList" label="开发" min-width="10%" align="center">
+            <template v-slot="scope">{{ getQaOrRdNameList(scope.row.rdList) }}</template>
+          </el-table-column>
+          <el-table-column prop="qaList" label="测试" min-width="10%" align="center">
+            <template v-slot="scope">{{ getQaOrRdNameList(scope.row.qaList) }}</template>
+          </el-table-column>
+        </el-table>
+        <gantt v-if="radio === '甘特图' && ganttTableData" :versions="ganttVersions" :table-data="ganttTableData" :string-type="'任务'" />
+        <div style="margin:0 2%;padding: 2% 0;border-bottom: 1px solid #D8D8D8;font-size: 14px;color: #333333">排期汇总：{{ getScheduleCollect() }}</div>
+        <el-row style="margin: 2%;font-size: 14px;color: #333333">
+          <el-col :span="8">
+            <div v-for="(item,index) in task.preOnlineVersion" :key="index" style="margin-bottom:10px"> <span :style="{visibility: index===0?'visible ':'hidden'}">预期上线版本：</span>{{ item }}</div>
+          </el-col>
         <!-- <el-col :span="16">
           <div v-for="(item,index) in task.preOnlineVersion" :key="index" style="margin-bottom:10px"> <span :style="{visibility: index===0?'visible ':'hidden'}">实际上线版本：</span>{{ item }}</div>
         </el-col> -->
-      </el-row>
-    </el-main>
-    <el-main style="margin: 1%;padding: 2% !important;" class="layout_main requirement_details_layout_main">
-      <div style="display:flex;align-items: center;margin-bottom:20px">
-        <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
-        <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">评论</div>
-      </div>
-      <div>
-        <div v-for="(item,index) in comments" :key="index" class="animated bounceInRight">
-          <div
-            style="font-size:14px;color:#333B4A;display: inline-block;"
-          >{{ item.commentInfo.name }}</div>
-          <div
-            style="margin-left:20px;display: inline-block;color: #9B9B9B;font-size:12px"
-          >{{ item.commentInfo.gmtCreater }}</div>
-          <p
-            style="font-size:14px;color:#333B4A;margin-top: 10px;white-space: pre-line;"
-          >{{ item.commentInfo.content }}</p>
-          <br>
+        </el-row>
+      </el-main>
+      <el-main style="margin: 1%;padding: 2% !important;" class="layout_main requirement_details_layout_main">
+        <div style="display:flex;align-items: center;margin-bottom:20px">
+          <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
+          <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">评论</div>
         </div>
-        <el-input
-          v-model="commentContent"
-          type="textarea"
-          placeholder="请输入评论内容"
-          maxlength="300"
-          show-word-limit
-          :autosize="{ minRows: 3, maxRows: 5}"
-          style="margin-bottom: 2%"
-        />
-        <el-button type="primary" size="small" style="float: right" @click="addComment">发表评论</el-button>
-      </div>
-    </el-main>
-    <requirement-update
-      title="编辑需求"
-      :data="requirement"
-      :visible="updateDialogVisible"
-      @cancel="updateDialogVisible=false"
-      @confirm="getRequirementById();updateDialogVisible=false"
-    />
-    <task-create v-if="createTaskDialogVisible" ref="task_createdUpdata" />
-  </el-container>
+        <div>
+          <div v-for="(item,index) in comments" :key="index" class="animated bounceInRight">
+            <div
+              style="font-size:14px;color:#333B4A;display: inline-block;"
+            >{{ item.commentInfo.name }}</div>
+            <div
+              style="margin-left:20px;display: inline-block;color: #9B9B9B;font-size:12px"
+            >{{ item.commentInfo.gmtCreater }}</div>
+            <p
+              style="font-size:14px;color:#333B4A;margin-top: 10px;white-space: pre-line;"
+            >{{ item.commentInfo.content }}</p>
+            <br>
+          </div>
+          <el-input
+            v-model="commentContent"
+            type="textarea"
+            placeholder="请输入评论内容"
+            maxlength="300"
+            show-word-limit
+            :autosize="{ minRows: 3, maxRows: 5}"
+            style="margin-bottom: 2%"
+          />
+          <el-button type="primary" size="small" style="float: right" @click="addComment">发表评论</el-button>
+        </div>
+      </el-main>
+      <requirement-update
+        title="编辑需求"
+        :data="requirement"
+        :visible="updateDialogVisible"
+        @cancel="updateDialogVisible=false"
+        @confirm="getRequirementById();updateDialogVisible=false"
+      />
+      <task-create v-if="createTaskDialogVisible" ref="task_createdUpdata" />
+      <drawer
+        ref="drawer"
+        title="需求成员"
+        center
+        :display.sync="display"
+        width="28%"
+        :delete="Number(id)"
+        :types="false"
+        :inner="true"
+        :mask="false"
+        @childValInput="childVal"
+        @click.stop
+      />
+    </el-container>
+  </div>
 </template>
 
 <script>
@@ -264,13 +280,16 @@ import RequirementUpdate from '@/views/projectManage/requirement/list/create.vue
 import Gantt from '@/views/gantta/gantta'
 import dateUtil from '@/utils/dateUtil.js'
 import TaskCreate from '@/views/projectManage/dialog_vue'
+import drawer from '@/views/projectManage/Drawer'
+import image_url from '@/assets/home_images/home_u.png'
 
 export default {
   components: {
     RequirementChart,
     RequirementUpdate,
     Gantt,
-    TaskCreate
+    TaskCreate,
+    drawer
   },
   filters: {
     ellipsis(value) {
@@ -289,6 +308,9 @@ export default {
   },
   data() {
     return {
+      num: '',
+      image_url: image_url,
+      display: false,
       createTaskDialogVisible: false,
       ganttVersions: {},
       ganttTableData: null,
@@ -495,6 +517,9 @@ export default {
     this.$store.state.data.bizId = false
   },
   methods: {
+    childVal(val) {
+      this.num = val
+    },
     getScheduleCollect() {
       if (this.task && this.task.reqStartTime && this.task.reqEndTime) {
         return this.task.reqStartTime.substring(0, 10).replace(/-/, '年').replace(/-/, '月') + '日' + ' ~ ' + this.task.reqEndTime.substring(0, 10).replace(/-/, '年').replace(/-/, '月') + '日'
@@ -672,6 +697,9 @@ export default {
       }
       return arr
     },
+    setChild() {
+      this.$refs.drawer.getRoleList()
+    },
     getPmName() {
       const names = []
       for (const i in this.requirement.pm) {

src/views/projectManage/taskList/taskViewDetails.vue

@@ -1,12 +1,12 @@
 <template>
-  <div>
+  <div @click="display = false">
     <div class="bgbugTa" style="background-color:#F2F3F6;display:flex;align-items: center;justify-content: center;">
       <el-container>
-        <div v-if="isHeadShow" style="width:98%;margin:1% auto 0 auto;height:53px;background:rgba(255,255,255,1);border-radius:7px;color:#F56C6C;font-size:16px;display: flex;align-items: center;">
+        <div v-if="isHeadShow" style="width:98%;margin: 15px auto 0 auto;height:53px;background:rgba(255,255,255,1);border-radius:4px;color:#F56C6C;font-size:16px;display: flex;align-items: center;">
           <i class="el-icon-warning-outline" style="margin-left: 20px;" />
           <span style="margin-left: 4px;">请将排期事件里的排期填写完整，否则无法判断任务健康状态，健康状态会显示未知。</span>
         </div>
-        <el-header class="bgborder bgborderButton" style=" margin: 1%; min-height:60px;display: flex; justify-content: space-between; align-items: center;">
+        <el-header class="bgborder bgborderButton" style=" margin: 15px 1%; height:60px;display: flex; justify-content: space-between; align-items: center;">
           <div style="float: left;display: flex; justify-content: space-between; align-items: center;">
             <span :style="{ background: bgStyle, color:colorStyle } " class="timeStyle">
               {{ task_form.stageString }}
@@ -32,8 +32,9 @@
             </el-dropdown>
           </div>
           <span style="float: right;">
-            <el-button size="mini" @click="centerDialogVisible_task = true">删除任务</el-button>
-            <el-dropdown trigger="click" placement="bottom" style="margin-left: 10px;">
+            <span style="vertical-align: bottom; cursor: pointer; color: #6F7C93;" @click.stop="setChild(), display = true"><img style="width: 24px; display: inline-block;" :src="image_url">&nbsp; {{ num }} </span>
+            <el-button style="margin: 0 10px;" size="mini" @click="centerDialogVisible_task = true">删除任务</el-button>
+            <el-dropdown trigger="click" placement="bottom">
               <el-button size="mini" type="primary">
                 新建
                 <i class="el-icon-arrow-down el-icon--right" />
@@ -439,6 +440,19 @@
         <bug-details :id="bugId + ''" ref="bugDetails" :init-count="initCount + ''" :type="'drawer'" @close="drawerShow = false" @delete="drawerShow = false;bug_list(codeCache)" @update="bug_list(codeCache)" />
       </div>
     </el-drawer>
+    <drawer
+      ref="drawer"
+      title="任务成员"
+      center
+      :display.sync="display"
+      width="28%"
+      :delete="Number(taskId[1])"
+      :types="true"
+      :inner="true"
+      :mask="false"
+      @childValInput="childVal"
+      @click.stop
+    />
   </div>
 </template>
 
@@ -475,6 +489,9 @@ import createdBug from '@/views/projectManage/bugList/file/createdBug' // bug缺
 import TestReport from '@/views/Platform/presentation/Templates/TestReport' // 提测
 import DailyReport from '@/views/Platform/presentation/Templates/DailyReport' // 日报
 import ClientReport from '@/views/Platform/presentation/Templates/ClientReport' // 准出
+import drawer from '@/views/projectManage/Drawer'
+import image_url from '@/assets/home_images/home_u.png'
+
 export default {
   components: {
     openDialog,
@@ -483,7 +500,8 @@ export default {
     TestReport,
     BugDetails,
     DailyReport,
-    ClientReport
+    ClientReport,
+    drawer
   },
   filters: {
     ellipsis(value) {
@@ -506,8 +524,11 @@ export default {
   },
   data() {
     return {
+      num: '',
+      image_url: image_url,
       stColors: ['#409EFF', '#07BCA4', '#F56C6C', '#07BCA4'],
       codeCache: null,
+      display: false,
       bugId: 0,
       initCount: 0,
       drawerShow: false,
@@ -644,6 +665,9 @@ export default {
     this.$store.state.data.bizId = false
   },
   methods: {
+    childVal(val) {
+      this.num = val
+    },
     modalClose() {
       this.get_list()
     },
@@ -851,6 +875,9 @@ export default {
       }
       return result
     },
+    setChild() {
+      this.$refs.drawer.getRoleList()
+    },
     open_created(e) {
       // 打开弹窗
       this.dialog_open = true
@@ -1427,16 +1454,6 @@ export default {
   padding-left: 10px;
   width: 73px;
 }
-// .btns .el-input__suffix {
-//     // display: none;
-//     visibility: hidden;
-// }
-// .btns :hover {
-//  /deep/ .el-input__suffix {
-//     // display: inline-block;
-//     visibility: inherit;
-//   }
-// }
 .item{
   /deep/ input {
     color: rgb(126, 211, 33);