|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="bg-project" @click="display = false">
|
|
|
+ <div class="bg-project">
|
|
|
<el-container>
|
|
|
<el-header class="main-header">
|
|
|
<div class="top-page-title">
|
|
|
@@ -49,16 +49,16 @@
|
|
|
<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 :inline="true" :model="form_query" class="demo-form-all" 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 class="block">
|
|
|
+ <el-slider v-model="form_query.process" show-input @change="changeArea" />
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</section>
|
|
|
- <section class="main-section">
|
|
|
+ <section class="main-section main-desc">
|
|
|
<div class="el-main-title">
|
|
|
<div class="title-left-icon" />
|
|
|
<div class="title-left-name">描述</div>
|
|
|
@@ -67,6 +67,64 @@
|
|
|
<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">子任务<i class="el-icon-circle-plus child-add" @click="addChild()" /></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div id="create-children" class="children-task">
|
|
|
+ <div class="children-list">
|
|
|
+ <div v-for="(item,index) in childrenList" :id="'child'+index" :key="'child' + index" class="children-item">
|
|
|
+ <el-select v-model="item.status" placeholder="请选择" size="medium" class="child-status" :class="'status'+ item.status">
|
|
|
+ <el-option
|
|
|
+ v-for="val in allStatus"
|
|
|
+ :key="val.code"
|
|
|
+ :label="val.msg"
|
|
|
+ :value="val.code"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <div class="input-name">
|
|
|
+ <span v-if="!item.edit">{{ item.name }}</span>
|
|
|
+ <el-input v-if="item.edit" v-model="item.name" placeholder="请输入任务名称（必填）" size="medium" clearable="" />
|
|
|
+ <div v-if="item.edit" class="footer">
|
|
|
+ <el-button size="mini" @click="cancelChild(index)">取消</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="confirmChild(index,item.name)">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="child-endTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="item.endTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ value-format="yyyy.MM.dd"
|
|
|
+ size="medium"
|
|
|
+ :class="[item.endTime?'all':'icon']"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="select-people">
|
|
|
+ <select-people :value.sync="item.owner" />
|
|
|
+ </div>
|
|
|
+ <div class="child-control">
|
|
|
+ <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ width="100"
|
|
|
+ trigger="click"
|
|
|
+ popper-class="popper-control"
|
|
|
+ >
|
|
|
+ <div class="edit-cancel">
|
|
|
+ <p @click="editChild(index,item)">编辑</p>
|
|
|
+ <p @click="cancelChild(index)">删除</p>
|
|
|
+ </div>
|
|
|
+ <div slot="reference"><i class="el-icon-more" /></div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
</el-container>
|
|
|
<!-- 概览 -->
|
|
|
<task-dialog v-if="showTaskDialog" :show.sync="showTaskDialog" :task-id="taskObj.id" :status-name="taskObj.statusString" @getList="taskGet" />
|
|
|
@@ -83,10 +141,12 @@ import {
|
|
|
} from '@/api/taskIndex'
|
|
|
import searchPeople from '@/components/select/searchPeople'
|
|
|
import textArea from '@/components/input/textArea'
|
|
|
+import selectPeople from '@/components/select/selectPeople'
|
|
|
import taskDialog from '@/views/projectManage/taskList/dialog/taskDialog' // 任务状态修改（已上线/已提测/已准出）
|
|
|
export default {
|
|
|
components: {
|
|
|
searchPeople,
|
|
|
+ selectPeople,
|
|
|
textArea,
|
|
|
taskDialog
|
|
|
},
|
|
|
@@ -97,7 +157,8 @@ export default {
|
|
|
userNames: localStorage.getItem('realname'),
|
|
|
showTaskDialog: false, // 状态弹窗
|
|
|
taskId: Number(this.$route.query.id), // 任务id
|
|
|
- allStatus: [] // 任务所有状态
|
|
|
+ allStatus: [], // 任务所有状态
|
|
|
+ childrenList: [] // 子任务列表
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -115,6 +176,9 @@ export default {
|
|
|
this.$store.state.data.bizId = false
|
|
|
},
|
|
|
methods: {
|
|
|
+ inputProcess(val) { // 校验数字
|
|
|
+ this.formData.process = val.replace(/[^\d\.\d]/g, '')
|
|
|
+ },
|
|
|
async changeArea(e) { // area修改
|
|
|
const taskInfoDO = _.cloneDeep(this.form_query)
|
|
|
const user = {
|
|
|
@@ -177,6 +241,36 @@ export default {
|
|
|
this.$message({ message: '删除成功', type: 'success', duration: 1000, offset: 150 })
|
|
|
this.$router.push({ name: '任务', query: {}})
|
|
|
}
|
|
|
+ },
|
|
|
+ addChild() { // 添加子任务
|
|
|
+ this.childrenList.push({
|
|
|
+ name: null,
|
|
|
+ bizId: localStorage.getItem('bizId'),
|
|
|
+ endTime: null,
|
|
|
+ owner: '',
|
|
|
+ status: 0,
|
|
|
+ edit: true
|
|
|
+ })
|
|
|
+ this.scroll(`child` + (this.childrenList.length - 1))
|
|
|
+ },
|
|
|
+ scroll(id) { // 视图滚动
|
|
|
+ this.$nextTick(() => {
|
|
|
+ document.getElementById(id).scrollIntoView({ block: 'start', behavior: 'smooth' })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancelChild(index) { // 取消添加子任务
|
|
|
+ this.childrenList.splice(index, 1)
|
|
|
+ },
|
|
|
+ confirmChild(index, name) { // 确认添加子任务
|
|
|
+ const value = name && name.replace(/\s*/, '')
|
|
|
+ if (value === null || value === '') {
|
|
|
+ this.$message({ message: '请输入任务名称', type: 'error', duration: 1000, offset: 150 })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.childrenList[index].edit = false
|
|
|
+ },
|
|
|
+ editChild(index, item) { // 编辑子任务
|
|
|
+ item.edit = true
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -236,12 +330,155 @@ export default {
|
|
|
.demo-form-inline {
|
|
|
.el-form-item {
|
|
|
width: 33%;
|
|
|
- margin-right: 0;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .demo-form-all {
|
|
|
+ .el-form-item {
|
|
|
+ width: 33%;
|
|
|
+ margin-right: 0;
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ width: calc(100% - 100px)
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner{
|
|
|
+ border: 1px solid rgba(220,223,230,1)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.form-progress {
|
|
|
- width: 200px;
|
|
|
- padding-top: 12px;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .child-add {
|
|
|
+ color:#409EFF;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .children-task {
|
|
|
+ padding: 0 65px;
|
|
|
+ min-height: 20vh;
|
|
|
+ .children-list {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .children-item {
|
|
|
+ display: flex;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ .child-status {
|
|
|
+ width: 64px;
|
|
|
+ padding-top: 5px;
|
|
|
+ >>> input{
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ >>> i {
|
|
|
+ position: relative;
|
|
|
+ height: 20px;
|
|
|
+ width: 15px;
|
|
|
+ top: 2px;
|
|
|
+ left: 2px;
|
|
|
+ font-size: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input-name {
|
|
|
+ width: calc(70% - 64px);
|
|
|
+ padding-left: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ span {
|
|
|
+ padding-top: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .footer{
|
|
|
+ margin-top: 10px;
|
|
|
+ align-self: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .child-endTime {
|
|
|
+ width: 20%;
|
|
|
+ height: 36px;
|
|
|
+ padding-left: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ >>>i {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 30px;
|
|
|
+ >>>input{
|
|
|
+ padding-left: 0;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .all {
|
|
|
+ width: 100%;
|
|
|
+ >>>input{
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ border: 1px solid #F5F5F5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-people {
|
|
|
+ height: 36px;
|
|
|
+ width: 5%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .child-control {
|
|
|
+ height: 36px;
|
|
|
+ width: 5%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #666666;
|
|
|
+ i {
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .edit-cancel {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 60px;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ p:hover {
|
|
|
+ color: #409EFF
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.edit-cancel {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 60px;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ p:hover {
|
|
|
+ color: #409EFF
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.popper-control {
|
|
|
+ min-width: 100px !important;
|
|
|
}
|
|
|
</style>
|
wangziqian