|
|
@@ -3,63 +3,78 @@
|
|
|
<el-container>
|
|
|
<el-main style="padding: 0;" class="public_main Layout_space_between">
|
|
|
<div class="boxShadow">
|
|
|
- <div style="margin:10px;" class="Layout_space_between">
|
|
|
- <div class="Layout_flex_start" style="margin-left: 10px;">
|
|
|
- <el-checkbox v-model="checkedLeft" style="margin-right: 10px;" />
|
|
|
- <div class="titNameX">未规划的需求</div>
|
|
|
+ <div style="margin: 0 10px;" class="Layout_space_between">
|
|
|
+ <div class="Layout_flex_start">
|
|
|
+ <el-checkbox v-model="checkAllLeft" :indeterminate="isIndeterminateLeft" class="titNameX" style="margin: 10px; line-height: 32px;" @change="handleCheckAllChange1" />未规划的需求
|
|
|
</div>
|
|
|
- <el-input v-model="value1" style="width:30%;" clearable size="small" placeholder="搜索需求名称或ID" />
|
|
|
+ <el-input v-model="value1" style="width:30%;" clearable size="small" placeholder="搜索需求名称或ID" @input="search(value1)" />
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<el-container>
|
|
|
- <el-main class="scroll" style="max-height: calc(100vh - 370px);">
|
|
|
- <div v-for="(item, index) in tableData" :key="index" class="Layout_space_between" style="margin: 10px 0;" @click="checkedOne(checkOne.name)">
|
|
|
- <el-checkbox v-model="item.checked" @change="getCheck(item)" />
|
|
|
- <div class="priority">P0</div>
|
|
|
- <div class="Requirement">我是一个需求</div>
|
|
|
- <div class="RequirementId">REQUIERMENT-{{ item.id }}</div>
|
|
|
- <div class="RequirementName">朱晓菲</div>
|
|
|
+ <el-main class="scroll" style="height: calc(100vh - 370px);">
|
|
|
+ <el-checkbox-group v-if="citiesLeft.length>0" v-model="checkedCitiesLeft" @change="handleCheckedCitiesChange1">
|
|
|
+ <el-checkbox v-for="item in citiesLeft" :key="item.id" :label="item" class="Layout_flex_start" style="margin: 10px 0;">
|
|
|
+ <span class="priority">{{ item.priorityName }}</span>
|
|
|
+ <span class="Requirement">{{ item.name | ellipsis }}</span>
|
|
|
+ <span class="RequirementId">{{ item.requirementDisplayId }}</span>
|
|
|
+ <span class="RequirementName">{{ item.pm.name }}</span>
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <div v-else style="text-align: center; height: 100%">
|
|
|
+ <div class="imgCenter">
|
|
|
+ <img class="imagePng" src="@/assets/空白页@2x.png" alt="">
|
|
|
+ <div class="TipsName">当前没有未规划的需求</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-main>
|
|
|
<el-footer style="text-align: center;">
|
|
|
- <div class="solt">加载更多 </div>
|
|
|
+ <div v-if="citiesLeft.length > 15" class="solt" @click="LoadMore">加载更多 </div>
|
|
|
</el-footer>
|
|
|
</el-container>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<div class="rectangle">
|
|
|
- <svg-icon icon-class="右箭头" />
|
|
|
- <svg-icon v-if="checkedLeft.length > 0" icon-class="右箭头1" />
|
|
|
+ <svg-icon v-if="leftArray.length === 0" icon-class="右箭头" />
|
|
|
+ <svg-icon v-if="leftArray.length > 0" icon-class="右箭头1" @click="torightLeft(1)" />
|
|
|
+ </div>
|
|
|
+ <div class="rectangle">
|
|
|
+ <svg-icon v-if="rightArray.length === 0" icon-class="左箭头" />
|
|
|
+ <svg-icon v-if="rightArray.length > 0" icon-class="左箭头1" @click="torightLeft(2)" />
|
|
|
</div>
|
|
|
- <div class="rectangle">d</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="boxShadow">
|
|
|
- <div class="Layout_flex_start" style="margin-left: 20px;">
|
|
|
- <el-checkbox v-model="checkedRight" :indeterminate="isIndeterminate" @change="handleCheckAllChange" />
|
|
|
- <div class="titNameX" style="margin: 10px; line-height: 32px;">迭代</div>
|
|
|
+ <div class="Layout_flex_start" style="margin-left: 10px;">
|
|
|
+ <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="titNameX" style="margin: 10px; line-height: 32px;" @change="handleCheckAllChange" />迭代
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<el-container>
|
|
|
- <el-main class="scroll" style="max-height: calc(100vh - 370px);">
|
|
|
- <div v-for="(item, index) in RequirementSet" :key="index" class="Layout_space_between" style="margin: 10px 0;">
|
|
|
- <el-checkbox v-model="item.index" @change="cheRight(item, item.index)" />
|
|
|
- <div class="priority">{{ item.priorityName }}</div>
|
|
|
- <div class="Requirement">{{ item.name }}</div>
|
|
|
- <div class="RequirementId">{{ item.requirementDisplayId }}</div>
|
|
|
- <div v-for="(val, num) in item.pm" :key="num" class="RequirementName">{{ val.name }}</div>
|
|
|
+ <el-main class="scroll" style="height: calc(100vh - 370px);">
|
|
|
+ <el-checkbox-group v-if="cities.length>0" v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
|
+ <el-checkbox v-for="item in cities" :key="item.id" :label="item" class="Layout_flex_start" style="margin: 10px 0;">
|
|
|
+ <span class="priority">{{ item.priorityName }}</span>
|
|
|
+ <span class="Requirement">{{ item.name | ellipsis }}</span>
|
|
|
+ <span class="RequirementId">{{ item.requirementDisplayId }}</span>
|
|
|
+ <span class="RequirementName">{{ item.pm.name }}</span>
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <div v-else style="text-align: center; height: 100%">
|
|
|
+ <div class="imgCenter">
|
|
|
+ <img class="imagePng" src="@/assets/空白页@2x.png" alt="">
|
|
|
+ <div class="TipsName">当前迭代没有任何需求</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-main>
|
|
|
<el-footer style="text-align: center;">
|
|
|
- <div class="solt">加载更多 </div>
|
|
|
+ <div v-if="cities.length > 15" class="solt" @click="LoadMore">加载更多 </div>
|
|
|
</el-footer>
|
|
|
</el-container>
|
|
|
</div>
|
|
|
</el-main>
|
|
|
<el-footer class="public_footer">
|
|
|
<el-button @click="OnClose">取 消</el-button>
|
|
|
- <el-button type="primary" @click="OnClose">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="addRequired()">确 定</el-button>
|
|
|
</el-footer>
|
|
|
</el-container>
|
|
|
|
|
|
@@ -68,26 +83,39 @@
|
|
|
|
|
|
<script>
|
|
|
import '@/styles/PublicStyle/index.scss'
|
|
|
-import { iterationRequire } from '@/api/iteration.js'
|
|
|
+import { iterationRequire, iterationUpdateBelongingIteration, requirementQueryRequirementInfoList } from '@/api/iteration.js'
|
|
|
export default {
|
|
|
name: 'TemplateDialog',
|
|
|
+ filters: {
|
|
|
+ ellipsis(value) {
|
|
|
+ if (!value) return ''
|
|
|
+ if (value.length > 10) {
|
|
|
+ return value.slice(0, 10) + '...'
|
|
|
+ }
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ },
|
|
|
props: {
|
|
|
show: { type: Boolean, default: false },
|
|
|
iterationId: { type: String, default: null }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- checkedRight: ['测试迭代1'],
|
|
|
+ checkAll: false,
|
|
|
+ checkAllLeft: false,
|
|
|
+ cities: [],
|
|
|
+ citiesLeft: [],
|
|
|
+ isIndeterminate: true,
|
|
|
+ isIndeterminateLeft: true,
|
|
|
checkedCities: [],
|
|
|
+ checkedCitiesLeft: [],
|
|
|
checkedLeft: '',
|
|
|
- tableData: [],
|
|
|
visibleplanning: this.show,
|
|
|
- isIndeterminate: false,
|
|
|
value1: '',
|
|
|
- RequirementSet: [],
|
|
|
- arr: [],
|
|
|
- value: [],
|
|
|
- checkStatusList: ''
|
|
|
+ leftArray: [],
|
|
|
+ rightArray: [],
|
|
|
+ reqRight: [],
|
|
|
+ size: 50
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -102,35 +130,109 @@ export default {
|
|
|
this.getRequirement()
|
|
|
},
|
|
|
methods: {
|
|
|
- handleCheckAllChange(val) {
|
|
|
- // this.checkedCities = this.RequirementSet
|
|
|
- // this.isIndeterminate = false
|
|
|
+ getRequirement() { // 获取需求
|
|
|
+ this.leftArray = []
|
|
|
+ this.rightArray = []
|
|
|
+ iterationRequire({ id: Number(this.iterationId), curIndex: 1, pageSize: 50 }).then(res => {
|
|
|
+ this.citiesLeft = res.data.left.list // 无归属需求
|
|
|
+ this.cities = res.data.right.list // 迭代下需求
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCheckAllChange(val) { // 迭代下需求全选
|
|
|
+ this.checkAllLeft = false
|
|
|
+ this.checkedCitiesLeft = []
|
|
|
+ this.checkedCities = val ? this.cities : []
|
|
|
+ this.rightArray = this.checkedCities
|
|
|
+ this.isIndeterminate = false
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCheckedCitiesChange(value) { // 迭代下需求单选
|
|
|
+ this.checkedCitiesLeft = []
|
|
|
+ this.rightArray = value
|
|
|
+ const checkedCount = value.length
|
|
|
+ this.checkAll = checkedCount === this.cities.length
|
|
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
|
|
|
},
|
|
|
- checkedOne: function(value) {
|
|
|
- // 同显示，判断是否存在的同时，获取其索引（如果存在的话）
|
|
|
- const idIndex = this.checkStatusList.indexOf(value)
|
|
|
- if (idIndex >= 0) {
|
|
|
- // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
|
|
|
- this.checkStatusList.splice(idIndex, 1)
|
|
|
- } else {
|
|
|
- // 选中该checkbox
|
|
|
- this.checkStatusList.push(value)
|
|
|
+
|
|
|
+ handleCheckAllChange1(val) { // 无归属需求全选
|
|
|
+ this.checkAll = false
|
|
|
+ this.checkedCities = []
|
|
|
+ this.checkedCitiesLeft = val ? this.citiesLeft : []
|
|
|
+ this.leftArray = this.checkedCitiesLeft
|
|
|
+ this.isIndeterminateLeft = false
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCheckedCitiesChange1(value) { // 无归属需求单选
|
|
|
+ this.checkedCities = []
|
|
|
+ this.leftArray = value
|
|
|
+ const checkedCount = value.length
|
|
|
+ this.checkAllLeft = checkedCount === this.citiesLeft.length
|
|
|
+ this.isIndeterminateLeft = checkedCount > 0 && checkedCount < this.citiesLeft.length
|
|
|
+ },
|
|
|
+
|
|
|
+ torightLeft(e) { // 添加删除需求
|
|
|
+ if (e === 1) {
|
|
|
+ this.cities = this.leftArray.concat(this.cities)
|
|
|
+ this.leftArray.map(val => {
|
|
|
+ this.citiesLeft = this.citiesLeft.filter(item => {
|
|
|
+ return item.id !== val.id
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.reqRight = this.leftArray
|
|
|
}
|
|
|
+ if (e === 2) {
|
|
|
+ this.citiesLeft = this.rightArray.concat(this.citiesLeft)
|
|
|
+ this.rightArray.map(val => {
|
|
|
+ this.cities = this.cities.filter(item => {
|
|
|
+ return item.id !== val.id
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.reqRight = this.rightArray
|
|
|
+ }
|
|
|
+ this.leftArray = []
|
|
|
+ this.rightArray = []
|
|
|
+ this.checkedCitiesLeft = []
|
|
|
+ this.checkedCities = []
|
|
|
},
|
|
|
- getRequirement() {
|
|
|
- iterationRequire({ id: Number(this.iterationId), curIndex: 1, pageSize: 50 }).then(res => {
|
|
|
- this.tableData = res.data.left.list
|
|
|
- this.RequirementSet = res.data.right.list
|
|
|
+ addRequired() { // 保存迭代下需求
|
|
|
+ const requirementIds = []
|
|
|
+ const requiredArr = []
|
|
|
+ this.cities.map(item => {
|
|
|
+ requirementIds.push(item.id)
|
|
|
+ })
|
|
|
+ this.reqRight.map(item => {
|
|
|
+ requiredArr.push(item.id)
|
|
|
+ })
|
|
|
+ const data = [
|
|
|
+ { id: -1, requirementIds: requiredArr.toString() },
|
|
|
+ { id: Number(this.iterationId), name: '测试', requirementIds: requirementIds.toString() }
|
|
|
+ ]
|
|
|
+ iterationUpdateBelongingIteration(data).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$emit('update:show', false)
|
|
|
+ this.$message({ showClose: true, message: '保存成功', type: res.msg })
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
- cheRight(e, ele) {
|
|
|
- console.log(e, ele, 'dd')
|
|
|
+
|
|
|
+ LoadMore() { // 加载更多
|
|
|
+ requirementQueryRequirementInfoList({ name: '', curIndex: 1, pageSize: this.size + 50, iterationId: -1, bizId: '' }).then(res => {
|
|
|
+ this.citiesLeft = res.data.list
|
|
|
+ this.size = this.size + 50
|
|
|
+ })
|
|
|
},
|
|
|
- getCheck(e) {
|
|
|
- console.log(e)
|
|
|
+
|
|
|
+ search(value) { // 需求查询
|
|
|
+ requirementQueryRequirementInfoList({ name: value, curIndex: 1, pageSize: this.size + 50, iterationId: -1, bizId: '' }).then(res => {
|
|
|
+ this.citiesLeft = res.data.list
|
|
|
+ })
|
|
|
},
|
|
|
- OnClose() {
|
|
|
+
|
|
|
+ OnClose() { // 关闭弹窗
|
|
|
+ this.size = 50
|
|
|
this.$emit('update:show', false)
|
|
|
+ this.$emit('iteratioFilter')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -155,8 +257,16 @@ export default {
|
|
|
color: #333B4A;
|
|
|
}
|
|
|
|
|
|
- .el-table td {
|
|
|
- border-bottom: none;
|
|
|
+ /deep/ .el-checkbox__label {
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: 10px;
|
|
|
+ line-height: 19px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+ width: -webkit-fill-available;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.el-divider--horizontal {
|
|
|
@@ -175,13 +285,15 @@ export default {
|
|
|
}
|
|
|
|
|
|
.solt {
|
|
|
- font-size:12px;
|
|
|
- font-family:MicrosoftYaHei;
|
|
|
- line-height:14px;
|
|
|
- color:rgba(153,153,153,1);
|
|
|
- opacity:1;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #999999;
|
|
|
+ opacity: 1;
|
|
|
cursor: pointer;
|
|
|
- margin-top: 8%;
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.rectangle {
|
|
|
@@ -197,14 +309,14 @@ export default {
|
|
|
}
|
|
|
|
|
|
.titNameX {
|
|
|
- width:84px;
|
|
|
+ width:13px;
|
|
|
font-size:14px;
|
|
|
font-family:PingFangSC-Medium;
|
|
|
color:rgba(74,74,74,1);
|
|
|
opacity:1;
|
|
|
}
|
|
|
|
|
|
- .priority {
|
|
|
+ .Layout_space_between .priority {
|
|
|
width:40px;
|
|
|
background:rgba(245,108,108,1);
|
|
|
opacity:1;
|
|
|
@@ -214,6 +326,7 @@ export default {
|
|
|
line-height:17px;
|
|
|
color:rgba(255,255,255,1);
|
|
|
text-align: center;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
|
|
|
.Requirement {
|
|
|
@@ -242,5 +355,25 @@ export default {
|
|
|
color:rgba(102,102,102,1);
|
|
|
opacity:1;
|
|
|
}
|
|
|
+
|
|
|
+ .imgCenter {
|
|
|
+ position: relative;
|
|
|
+ top: 50%; /*偏移*/
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .imagePng {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .TipsName {
|
|
|
+ font-size:12px;
|
|
|
+ font-family:MicrosoftYaHei;
|
|
|
+ line-height:14px;
|
|
|
+ color:rgba(191,198,220,1);
|
|
|
+ opacity:1;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
</style>
|
qinzhipeng_v
