|
@@ -0,0 +1,359 @@
|
|
|
+<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 statusList"
|
|
|
+ :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="createVisible = true">新建需求</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click.native="reated_task()">新建任务</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"> {{ num }} </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-item label="所属迭代:">
|
|
|
+ <el-select v-model="form_query.iterationId" placeholder="请选择">
|
|
|
+ <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 v-if="form_query.pm" :value.sync="form_query.pm.idap" @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="需求来源:">
|
|
|
+ {{ form_query.sourceTypeName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="优先级:">
|
|
|
+ <el-select v-model="form_query.priority" size="small" clearable filterable placeholder="请选择" @change="changeArea">
|
|
|
+ <el-option v-for="item in priorityList" :key="item.msg" :label="item.msg" :value="item.code" />
|
|
|
+ </el-select>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <text-area :id="'pro-target'" :value.sync="form_query.target" :empty-text="'点击'" :input-button="'添加评论'" @change="changeArea" />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </el-container>
|
|
|
+ <!-- 概览 -->
|
|
|
+ <!-- 任务 -->
|
|
|
+ <el-container v-show="activeName === '2'" class="is-vertical">
|
|
|
+ <section class="main-section">
|
|
|
+ <tasks-list />
|
|
|
+ </section>
|
|
|
+ </el-container>
|
|
|
+ <!-- 任务 -->
|
|
|
+ <!-- 缺陷 -->
|
|
|
+ <el-container v-show="activeName === '3'" class="is-vertical">
|
|
|
+ <section class="main-section" />
|
|
|
+ </el-container>
|
|
|
+ <!-- 缺陷 -->
|
|
|
+ <!-- 统计 -->
|
|
|
+ <el-container v-show="activeName === '4'" class="is-vertical">
|
|
|
+ <section class="main-section" />
|
|
|
+ </el-container>
|
|
|
+ <!-- 统计 -->
|
|
|
+ <!-- 新建 -->
|
|
|
+ <create-requirement
|
|
|
+ title="新建需求"
|
|
|
+ :visible="createVisible"
|
|
|
+ @cancel="createVisible=false"
|
|
|
+ @confirm="getRequirementById();createVisible=false"
|
|
|
+ />
|
|
|
+ <!-- 新建 -->
|
|
|
+ <!-- 编辑 -->
|
|
|
+ <create-requirement
|
|
|
+ title="编辑需求"
|
|
|
+ :data="form_query"
|
|
|
+ :visible="updateVisible"
|
|
|
+ @cancel="updateVisible=false"
|
|
|
+ @confirm="getRequirementById();updateVisible=false"
|
|
|
+ />
|
|
|
+ <!-- 编辑 -->
|
|
|
+ <!-- 删除 -->
|
|
|
+ <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="deleteRequirement()">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <openDialog v-if="task_open" ref="task_createdUpdata" />
|
|
|
+ <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 {
|
|
|
+ updateRequirement,
|
|
|
+ getRequirementById,
|
|
|
+ updateRequirementStatus,
|
|
|
+ deleteRequirement,
|
|
|
+ showRequirementEnum,
|
|
|
+ projectListProject,
|
|
|
+ iterationList
|
|
|
+} from '@/api/requirement.js'
|
|
|
+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 tasksList from './components/taskList'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ searchPeople,
|
|
|
+ textArea,
|
|
|
+ drawer,
|
|
|
+ createRequirement,
|
|
|
+ openDialog,
|
|
|
+ tasksList
|
|
|
+ },
|
|
|
+ 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: '', // 评论
|
|
|
+ requirementId: Number(this.$route.query.id), // 需求id
|
|
|
+ statusList: [], // 状态列表
|
|
|
+ priorityList: [], // 优先级列表
|
|
|
+ form_query: {},
|
|
|
+ display: false, // 设置成员弹框
|
|
|
+ num: 0, // 成员数量
|
|
|
+ image_url: image_url, // 成员icon
|
|
|
+ createVisible: false, // 新建需求弹框
|
|
|
+ updateVisible: false, // 编辑需求弹框
|
|
|
+ deleteVisible: false, // 删除需求弹框
|
|
|
+ task_open: false, // 新建任务弹框
|
|
|
+ belongProjectList: [], // 所属项目列表
|
|
|
+ iterationList: [] // 所属迭代列表
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getStatus() {
|
|
|
+ return this.statusList.find(item => item.code === this.form_query.status) || { msg: null }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.showRequirementEnum()
|
|
|
+ this.getRequirementById()
|
|
|
+ this.getBelongProject()
|
|
|
+ this.getIterationList()
|
|
|
+ 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)
|
|
|
+ requirementInfo.pm = requirementInfo.pm.idap
|
|
|
+ const res = await updateRequirement(requirementInfo)
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 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 res = await showRequirementEnum()
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.statusList = res.data.requirementStatus
|
|
|
+ this.priorityList = res.data.priority
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getRequirementById() { // 获取需求详情
|
|
|
+ const res = await getRequirementById({ id: this.$route.query.id })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.form_query = res.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async updateStatus(status) { // 修改状态
|
|
|
+ const res = await updateRequirementStatus({
|
|
|
+ id: this.$route.query.id,
|
|
|
+ status: status.code,
|
|
|
+ modifier: localStorage.getItem('username')
|
|
|
+ })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({ message: '状态修改成功', type: 'success', duration: 1000, offset: 150 })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: 'warning', duration: 1000, offset: 150 })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reated_task(e) { // 新建任务
|
|
|
+ this.task_open = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.task_createdUpdata.init(2)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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: 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|