任务详情页

src/router/index.js

@@ -153,7 +153,7 @@ export const constantRoutes = [{
     name: '任务详情',
     hidden: true,
     component: () =>
-      import('@/views/projectManage/taskList/taskViewDetails'),
+      import('@/views/projectManage/taskList/taskViewDetail'),
     meta: { title: '任务详情' }
   },
   {

src/views/projectManage/taskList/taskViewDetail.vue

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