|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
- <div style="width: 100%;">
|
|
|
+ <div v-loading="loadingOnlineProcess" style="width: 100%;" element-loading-background="rgba(0, 0, 0, 0.7)" element-loading-text="拼命加载中">
|
|
|
<div class="set-background">
|
|
|
<div class="block">
|
|
|
- <el-tabs v-model="activeName">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
<el-tab-pane label="列表" name="first">
|
|
|
<el-form :model="form">
|
|
|
<div class="set-between">
|
|
|
@@ -81,7 +81,54 @@
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="看板" name="second">
|
|
|
- 敬请期待
|
|
|
+ <el-form :model="formKanBan">
|
|
|
+ <div class="set-between-kanban">
|
|
|
+ <!-- <el-form-item label="创建时间" label-width="70px"><el-date-picker v-model="form.createTime" align="left" size="medium" type="datetime" style="width:76%;" placeholder="选择日期" /></el-form-item> -->
|
|
|
+ <el-form-item label="状态" label-width="40px">
|
|
|
+ <el-select v-model="formKanBan.status" size="medium" style="width:70%;" clearable placeholder="状态">
|
|
|
+ <el-option v-for="item in processStatusEnumListKanBan" :key="item.code" :label="item.name" :value="item.code" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分组" label-width="40px"><el-input v-model="formKanBan.group" placeholder="填写分组名称" autocomplete="off" clearable size="medium" style="width:70%;" /></el-form-item>
|
|
|
+ <el-form-item label="标签" label-width="40px"><el-input v-model="formKanBan.tag" placeholder="填写标签名称" autocomplete="off" clearable size="medium" style="width:70%;" /></el-form-item>
|
|
|
+ <el-button type="primary" plain size="medium" style="z-index:999" @click="kanBanQuery(formKanBan)">查询</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="set-scroll">
|
|
|
+ <div class="scroll">
|
|
|
+ <el-divider />
|
|
|
+ <div class="set-label-flex">
|
|
|
+ <div v-for="lable in labelDrag" :key="lable.status" class="for-flex">
|
|
|
+ <div class="label">
|
|
|
+ <p style="margin-bottom:7px">共{{ lable.count }}个</p>
|
|
|
+ <p :class="{ waitColor: [0, 1, 2, 3, 4, 6, 8, 9].indexOf(lable.status) !== -1, 'processColor': [5, 7].indexOf(lable.status) !== -1, 'finishColor': [10, 11, 12].indexOf(lable.status) !== -1 }">{{ lable.statusString }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="line-position">
|
|
|
+ <div v-if="lable.status !== 12" class="line" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
+ <div class="set-flex">
|
|
|
+ <draggable v-for="statusAll in labelDrag" :key="statusAll.status" v-model="statusAll.taskInfos" class="drag" :sort="false" group="statusAll.taskInfos" :move="checkMove" @add="targetRecording(statusAll.status)">
|
|
|
+ <div v-for="item in statusAll.taskInfos" :key="item.id" class="inner-drag">
|
|
|
+ <div class="span-wrap" style="margin-bottom:5px;">
|
|
|
+ <span style="font-weight:500;">ID : </span>
|
|
|
+ <span>{{ item.id }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="span-wrap">
|
|
|
+ <span style="font-weight:500;">名称 : </span>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="tag-wrap">
|
|
|
+ <el-tag v-if="item.tag" type="info" size="small" style="margin-left:10px">{{ item.tag }}</el-tag>
|
|
|
+ <el-tag v-if="item.group" size="small">{{ item.group }}</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
@@ -92,24 +139,35 @@
|
|
|
<script>
|
|
|
import { taskListGet } from '@/api/defectManage'
|
|
|
import { bugGetEnum } from '@/api/defectManage' // 下拉菜单data
|
|
|
-import { deleteTaskData } from '@/api/projectPage.js'
|
|
|
+import { deleteTaskData, listMap, updateTaskList } from '@/api/projectPage.js'
|
|
|
+import draggable from 'vuedraggable'
|
|
|
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ // 调用drag
|
|
|
+ draggable
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ labelDrag: [],
|
|
|
tableData: [],
|
|
|
form: {},
|
|
|
+ formKanBan: {},
|
|
|
dialogVisible: false,
|
|
|
bizJson: localStorage.getItem('key'),
|
|
|
userInformation: localStorage.getItem('username'),
|
|
|
userNames: localStorage.getItem('realname'),
|
|
|
queryCode: {},
|
|
|
+ loadingOnlineProcess: false,
|
|
|
curIndex: 1,
|
|
|
pageSize: 20,
|
|
|
total: 0,
|
|
|
+ pauseTarget: '',
|
|
|
+ pauseFromId: '',
|
|
|
activeName: 'first',
|
|
|
pauseId: '',
|
|
|
- processStatusEnumList: []
|
|
|
+ processStatusEnumList: [],
|
|
|
+ processStatusEnumListKanBan: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -117,8 +175,10 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
async bugListSelectBeforeGet() {
|
|
|
+ this.loadingOnlineProcess = true
|
|
|
await bugGetEnum().then(res => {
|
|
|
this.processStatusEnumList = res.data.processStatusEnumList
|
|
|
+ this.processStatusEnumListKanBan = res.data.processStatusEnumList
|
|
|
})
|
|
|
// 任务list
|
|
|
taskListGet({ bizId: this.bizJson }).then(response => {
|
|
|
@@ -126,6 +186,7 @@ export default {
|
|
|
if (response.data) {
|
|
|
this.total = response.data.length
|
|
|
}
|
|
|
+ this.loadingOnlineProcess = false
|
|
|
// const processStatusEnumMap = this.processStatusEnumList.reduce((a, c) => {
|
|
|
// return {
|
|
|
// ...a,
|
|
|
@@ -164,6 +225,57 @@ export default {
|
|
|
})
|
|
|
this.dialogVisible = false
|
|
|
},
|
|
|
+ // 看板移动更新
|
|
|
+ checkMove(evt) {
|
|
|
+ this.pauseFromId = evt.draggedContext.element.id
|
|
|
+ },
|
|
|
+ targetRecording(e) {
|
|
|
+ this.pauseTarget = e
|
|
|
+ const formTask = { id: this.pauseFromId, status: this.pauseTarget }
|
|
|
+ const userData = { id: '', ename: this.userInformation, name: this.userNames }
|
|
|
+ const objData = { taskInfo: formTask, user: userData }
|
|
|
+ updateTaskList(objData).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.kanBanDrag()
|
|
|
+ this.successFun('operating')
|
|
|
+ } else {
|
|
|
+ this.errorFun(response.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 看板获取
|
|
|
+ kanBanDrag() {
|
|
|
+ this.loadingOnlineProcess = true
|
|
|
+ const initValue = { bizId: this.bizJson }
|
|
|
+ listMap(initValue).then((res) => {
|
|
|
+ this.labelDrag = res.data
|
|
|
+ this.loadingOnlineProcess = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 标签页研发质量
|
|
|
+ handleClick() {
|
|
|
+ if (this.activeName === 'second') {
|
|
|
+ this.kanBanDrag()
|
|
|
+ } else if (this.activeName === 'first') {
|
|
|
+ this.bugListSelectBeforeGet()
|
|
|
+ } else {
|
|
|
+ this.errorFun('获取数据失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 看板查询
|
|
|
+ kanBanQuery(e) {
|
|
|
+ for (const key in e) {
|
|
|
+ if (!e[key]) {
|
|
|
+ delete e[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ e.bizId = this.bizJson
|
|
|
+ this.loadingOnlineProcess = true
|
|
|
+ listMap(e).then((res) => {
|
|
|
+ this.labelDrag = res.data
|
|
|
+ this.loadingOnlineProcess = false
|
|
|
+ })
|
|
|
+ },
|
|
|
handleSizeChange(size) {
|
|
|
this.pageSize = size
|
|
|
},
|
|
|
@@ -219,6 +331,88 @@ export default {
|
|
|
.set-between >>> .el-form-item
|
|
|
display flex
|
|
|
margin-right -35px
|
|
|
+ .set-between-kanban
|
|
|
+ display flex
|
|
|
+ align-items center
|
|
|
+ margin-bottom 20px
|
|
|
+ .set-between-kanban >>> .el-button
|
|
|
+ height 36px
|
|
|
+ .set-between-kanban >>> .el-form-item
|
|
|
+ display flex
|
|
|
+ margin-bottom 0px !important
|
|
|
+ margin-right -35px
|
|
|
.set-locate
|
|
|
margin-top 15px
|
|
|
+ .set-scroll
|
|
|
+ min-width 100%
|
|
|
+ overflow scroll
|
|
|
+ .scroll
|
|
|
+ width 3054px
|
|
|
+ .scroll >>> .el-divider--horizontal
|
|
|
+ margin 0
|
|
|
+ .set-flex
|
|
|
+ display flex
|
|
|
+ justify-content space-between
|
|
|
+ .drag
|
|
|
+ margin-top 20px
|
|
|
+ width 222px
|
|
|
+ border-radius 7px
|
|
|
+ height 57vh
|
|
|
+ background-color #E1E4E6
|
|
|
+ overflow scroll
|
|
|
+ .inner-drag
|
|
|
+ width 89%
|
|
|
+ margin 10px auto 0 auto
|
|
|
+ background-color white
|
|
|
+ border-radius 4px
|
|
|
+ padding 10px
|
|
|
+ .span-wrap
|
|
|
+ white-space pre-wrap
|
|
|
+ word-wrap break-word
|
|
|
+ overflow hidden
|
|
|
+ text-overflow ellipsis
|
|
|
+ display -webkit-box
|
|
|
+ -webkit-line-clamp 2
|
|
|
+ -webkit-box-orient vertical
|
|
|
+ span
|
|
|
+ font-size 13px
|
|
|
+ .tag-wrap
|
|
|
+ margin-top 15px
|
|
|
+ display flex
|
|
|
+ flex-direction row-reverse
|
|
|
+ .inner-drag:last-child
|
|
|
+ width 89%
|
|
|
+ margin 10px auto
|
|
|
+ background-color white
|
|
|
+ border-radius 4px
|
|
|
+ .set-label-flex
|
|
|
+ display flex
|
|
|
+ height 70px
|
|
|
+ justify-content space-between
|
|
|
+ .for-flex
|
|
|
+ display flex
|
|
|
+ justify-content space-between
|
|
|
+ align-items center
|
|
|
+ .label
|
|
|
+ width 222px
|
|
|
+ height 100%
|
|
|
+ padding 13px 0px 0px 35%
|
|
|
+ .label p
|
|
|
+ margin 0
|
|
|
+ .waitColor
|
|
|
+ color #F56C6C
|
|
|
+ .processColor
|
|
|
+ color #FB9616
|
|
|
+ .finishColor
|
|
|
+ color #00C9AE
|
|
|
+ .line-position
|
|
|
+ width 14px
|
|
|
+ height 100%
|
|
|
+ display flex
|
|
|
+ justify-content center
|
|
|
+ align-items center
|
|
|
+ .line
|
|
|
+ width 1px
|
|
|
+ height 80%
|
|
|
+ background-color #dcdfe6
|
|
|
</style>
|
panxiandiao_i