子任务详情页

src/router/index.js

@@ -153,6 +153,14 @@ export const constantRoutes = [{
       import('@/views/projectManage/taskList/taskViewDetail'),
     meta: { title: '任务详情' }
   },
+  {
+    path: 'childDetail',
+    name: '子任务详情',
+    hidden: true,
+    component: () =>
+      import('@/views/projectManage/taskList/childrenTask/childDetail'),
+    meta: { title: '子任务详情' }
+  },
   {
     path: '/Platform/projectManage/version',
     name: '版本',

src/views/projectManage/taskList/childrenTask/childDetail.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="bg-project" @click="display = false">
+    <el-container>
+      <el-header class="main-header">
+        <div class="top-page-title">
+          <div class="header-title">
+            <el-tooltip class="item" effect="dark" :content="form_query.name" placement="bottom">
+              <span class="title-name">SUBTASK-{{ form_query.id }}{{ form_query.name }}</span>
+            </el-tooltip>
+          </div>
+          <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-control">
+          <el-button size="small" style="margin-left: auto">删除</el-button>
+        </div>
+      </el-header>
+      <!-- 概览 -->
+      <el-container 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="所属父任务：" class="module" />
+              <el-form-item label="业务线：" class="module" />
+              <el-form-item label="负责人：">
+                <search-people :value.sync="form_query.owner" @change="changeArea" />
+              </el-form-item>
+            </el-form>
+            <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="right" label-width="100px">
+              <el-form-item label="开始日期：" />
+              <el-form-item label="结束日期：" />
+              <el-form-item label="其他参与人：">
+                <search-people :value.sync="form_query.other" @change="changeArea" />
+              </el-form-item>
+            </el-form>
+            <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="right" label-width="100px">
+              <el-form-item label="任务进度：">
+                <div class="form-progress">
+                  <el-progress :percentage="Number(form_query.rate && form_query.rate.substring(0,4)) || 0" color="#409eff" />
+                </div>
+              </el-form-item>
+            </el-form>
+          </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>
+      </el-container>
+      <!-- 概览 -->
+      <task-dialog v-if="showTaskDialog" :show.sync="showTaskDialog" :task-id="taskObj.id" :status-name="taskObj.statusString" @getList="taskGet" />
+    </el-container>
+  </div>
+</template>
+<script>
+const _ = require('lodash')
+import {
+  taskGet,
+  configShowTaskEnum,
+  tasktaskDelete,
+  taskUpdate
+} from '@/api/taskIndex'
+import searchPeople from '@/components/select/searchPeople'
+import textArea from '@/components/input/textArea'
+import taskDialog from '@/views/projectManage/taskList/dialog/taskDialog' // 任务状态修改（已上线/已提测/已准出）
+export default {
+  components: {
+    searchPeople,
+    textArea,
+    taskDialog
+  },
+  data() {
+    return {
+      form_query: {}, // 详细信息
+      userInformation: localStorage.getItem('username'),
+      userNames: localStorage.getItem('realname'),
+      showTaskDialog: false, // 状态弹窗
+      taskId: Number(this.$route.query.id), // 任务id
+      allStatus: [] // 任务所有状态
+    }
+  },
+  computed: {
+    getStatus() {
+      return this.allStatus.find(item => item.code === this.form_query.status) || { msg: null }
+    }
+  },
+  created() {
+    this.$store.state.data.status = true
+    this.$store.state.data.bizId = true
+    this.getTaskStatus()
+  },
+  destroyed() {
+    this.$store.state.data.status = false
+    this.$store.state.data.bizId = false
+  },
+  methods: {
+    async changeArea(e) { // area修改
+      const taskInfoDO = _.cloneDeep(this.form_query)
+      const user = {
+        name: localStorage.getItem('username'),
+        ename: localStorage.getItem('realname'),
+        id: ''
+      }
+      const res = await taskUpdate({ taskInfoDO, user })
+      if (res.code === 200) {
+        this.$message({ message: '修改成功', type: 'success', duration: 1000, offset: 150 })
+      }
+      this.taskGet()
+    },
+    async getTaskStatus() { // 获取任务状态列表，跟版客户端列表
+      const res = await configShowTaskEnum()
+      if (res.code === 200) {
+        this.allStatus = res.data.taskStatus
+        this.taskScheduleEvent = res.data.taskScheduleEvent || []
+        this.appClient = res.data.appClient.map(item => {
+          return {
+            ...item,
+            code: `${item.code}`
+          }
+        })
+      }
+    },
+    async taskGet() { // 获取任务详情
+      const res = await taskGet(this.$route.query.id)
+      if (res.code === 200) {
+        this.form_query = res.data
+      }
+    },
+    async updateStatus(e) { // 状态改变
+      if (e.value === 2 || e.value === 4 || e.value === 5) {
+        this.taskObj = this.form_query
+        this.allStatus.map(item => {
+          item.code === e.value ? this.taskObj.statusString = e.label : ''
+        })
+        this.showTaskDialog = true
+        this.taskObj.status = e.value
+        return
+      } else {
+        const user = {
+          name: localStorage.getItem('username'),
+          ename: localStorage.getItem('realname'),
+          id: ''
+        }
+        const taskInfoDO = this.form_query
+        taskInfoDO.status = e.value
+        const resTask = await taskUpdate({ taskInfoDO, user })
+        if (resTask.code === 200) {
+          this.$message({ message: '修改成功', type: 'success', offset: 150 })
+        }
+      }
+    },
+    async taskDelete() { // 删除任务
+      const user = { name: this.userNames, ename: this.userInformation, id: '' }
+      const res = await tasktaskDelete(user, this.taskId)
+      if (res.code === 200) {
+        this.$message({ message: '删除成功', type: 'success', duration: 1000, offset: 150 })
+        this.$router.push({ name: '任务', query: {}})
+      }
+    }
+  }
+}
+</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;
+}
+.contain {
+  height: calc(100vh - 140px);
+  overflow: scroll;
+}
+.main-section {
+  @include main-section;
+  .require-plan {
+    display: flex;
+    align-items: center;
+    span {
+      margin-left: 20px;
+      color: #E6A23C;
+      font-size: 12px;
+    }
+  }
+  .detail-info {
+    padding: 0 34px 20px 34px;
+    /deep/.el-input__inner{
+      border: 1px solid rgba(220,223,230,0)
+    }
+    /deep/.el-input__inner:hover{
+      border: 1px solid rgba(220,223,230,1)
+    }
+    /deep/.is-focus .el-input__inner {
+      border: 1px solid #409EFF;
+    }
+    /deep/.el-select{
+      .el-input__suffix-inner {
+        visibility: hidden;
+      }
+    }
+    /deep/.el-select:hover{
+      .el-input__suffix-inner {
+        visibility: visible;
+      }
+    }
+  }
+  .demo-form-inline {
+		.el-form-item {
+			width: 33%;
+			margin-right: 0;
+		}
+	}
+	.form-progress {
+		width: 200px;
+		padding-top: 12px;
+	}
+}
+</style>