lxc Mac
5 years ago
3 changed files with 339 additions and 6 deletions
-
2package.json
-
324src/views/xm/core/xmTask/XmTaskAgileKanban.vue
-
19src/views/xm/core/xmTask/XmTaskMng.vue
@ -0,0 +1,324 @@ |
|||||
|
<template> |
||||
|
<section class="menu-box"> |
||||
|
<!-- <div class="itxst"> |
||||
|
<div class="col"> |
||||
|
<div class="title">A列</div> |
||||
|
<draggable v-model="arr1" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd"> |
||||
|
<transition-group> |
||||
|
<div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div> |
||||
|
</transition-group> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
<div class="col"> |
||||
|
<div class="title">B列</div> |
||||
|
<draggable v-model="arr2" group="site" animation="100" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd"> |
||||
|
<transition-group> |
||||
|
<div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div> |
||||
|
</transition-group> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
<div class="col"> |
||||
|
<div class="title">C列</div> |
||||
|
<draggable v-model="arr3" group="c" animation="100" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd"> |
||||
|
<transition-group> |
||||
|
<div class="item" v-for="item in arr3" :key="item.id">{{item.name}}</div> |
||||
|
</transition-group> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
<div class="row head-row"> |
||||
|
<div class="item">故事({{ menus.length }})</div> |
||||
|
<template v-for="(type, tt) in taskType"> |
||||
|
<div class="item status" :key="tt">{{type.label}} ({{ type.number }})</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
<div class="menu-body"> |
||||
|
<div class="row menu—row" v-for="(menu, index) in menus" :key="index"> |
||||
|
<div class="item item-menu"> |
||||
|
<span> |
||||
|
{{menu.sortLevel}} |
||||
|
<!-- <el-dropdown @command="handleCommand" v-if=" isTaskCenter!='1' && isMy!='1'"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
<el-button size="mini" circle><i class="el-icon-plus"></i></el-button> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item :command="{type:'showMenu',data:menu}">+由故事创建子任务(推荐)</el-dropdown-item> |
||||
|
<el-dropdown-item :command="{type:'showSubAdd',data:menu}">+子任务</el-dropdown-item> |
||||
|
<el-dropdown-item :command="{type:'showTaskTemplate',data:menu}">+从模板批量导入子任务</el-dropdown-item> |
||||
|
<el-dropdown-item :command="{type:'handleDel',data:menu}" icon="el-icon-delete">删除</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> --> |
||||
|
<el-tag v-if="menu.level<='2'" type="info">轻微</el-tag> |
||||
|
<el-tag v-else-if="menu.level=='3'" type="warning">一般</el-tag> |
||||
|
<el-tag v-else-if="menu.level=='4'" type="danger">紧急</el-tag> |
||||
|
<el-tag v-else type="danger">特急</el-tag> |
||||
|
<span v-for="(item ,index) in [formatExeUsernames(menu)]" :key="index"> |
||||
|
|
||||
|
<el-tooltip :content="item.exeUsernames" ><el-link :type="item.type" @click.stop="showExecusers(menu)">{{item.showMsg}}</el-link></el-tooltip> |
||||
|
|
||||
|
</span> |
||||
|
<el-tooltip content="进度"><el-link style="border-radius:30px;" :type="menu.rate>=100?'success':'warning'" @click="drawerVisible=true"> {{ (menu.rate!=null?menu.rate:0)+'%'}} </el-link></el-tooltip> |
||||
|
<el-tooltip content="预算金额、工时"><el-tag type="info">{{parseFloat(menu.budgetCost/10000).toFixed(2)}}万,{{menu.budgetWorkload}}人时</el-tag></el-tooltip> |
||||
|
<el-link type="primary" @click.stop="showDrawer(menu)">{{menu.name}}</el-link> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="item status" v-for="(type, tt) in taskType" :key="tt"> |
||||
|
<draggable |
||||
|
v-model="tasks[menu.menuId][tt]" |
||||
|
:name="menu.menuId" |
||||
|
@start="onStart" @end="onEnd" :move="onMove" |
||||
|
:options="{group: menu.menuId}" |
||||
|
class="draggable" |
||||
|
animation="300" |
||||
|
scroll |
||||
|
> |
||||
|
<transition-group class="transition-group" :data-menu-id="menu.menuId" :data-task-state="type.status"> |
||||
|
<template |
||||
|
v-if="tasks && tasks[menu.menuId][tt].length" |
||||
|
> |
||||
|
<div |
||||
|
:data-menu-id="menu.menuId" |
||||
|
:data-task-id="task.id" |
||||
|
:data-task-state="task.taskState" |
||||
|
class="task" |
||||
|
v-for="(task, t) in tasks[menu.menuId][tt]" |
||||
|
:key="t" |
||||
|
> |
||||
|
<span> |
||||
|
{{task.sortLevel}} |
||||
|
<!-- <el-dropdown @command="handleCommand" v-if=" isTaskCenter!='1' && isMy!='1'"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
<el-button size="mini" circle><i class="el-icon-plus"></i></el-button> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item :command="{type:'showMenu',data:task}">+由故事创建子任务(推荐)</el-dropdown-item> |
||||
|
<el-dropdown-item :command="{type:'showSubAdd',data:task}">+子任务</el-dropdown-item> |
||||
|
<el-dropdown-item :command="{type:'showTaskTemplate',data:task}">+从模板批量导入子任务</el-dropdown-item> |
||||
|
<el-dropdown-item :command="{type:'handleDel',data:task}" icon="el-icon-delete">删除</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> --> |
||||
|
<el-tag v-if="task.level<='2'" type="info">轻微</el-tag> |
||||
|
<el-tag v-else-if="task.level=='3'" type="warning">一般</el-tag> |
||||
|
<el-tag v-else-if="task.level=='4'" type="danger">紧急</el-tag> |
||||
|
<el-tag v-else type="danger">特急</el-tag> |
||||
|
<span v-for="(item ,index) in [formatExeUsernames(task)]" :key="index"> |
||||
|
|
||||
|
<el-tooltip :content="item.exeUsernames" ><el-link :type="item.type" @click.stop="showExecusers(task)">{{item.showMsg}}</el-link></el-tooltip> |
||||
|
|
||||
|
</span> |
||||
|
<el-tooltip content="进度"><el-link style="border-radius:30px;" :type="task.rate>=100?'success':'warning'" @click="drawerVisible=true"> {{ (task.rate!=null?task.rate:0)+'%'}} </el-link></el-tooltip> |
||||
|
<el-tooltip content="预算金额、工时"><el-tag type="info">{{parseFloat(task.budgetCost/10000).toFixed(2)}}万,{{task.budgetWorkload}}人时</el-tag></el-tooltip> |
||||
|
<el-link type="primary" @click.stop="showDrawer(task)">{{task.name}}</el-link> |
||||
|
</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</transition-group> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import draggable from "vuedraggable"; |
||||
|
import { editXmTask } from '@/api/xm/core/xmTask'; |
||||
|
|
||||
|
export default { |
||||
|
name: "XmTaskAgileKanban", |
||||
|
props: ["xmTasks"], |
||||
|
data() { |
||||
|
return { |
||||
|
taskType: [ |
||||
|
{ label: "待领取", status: 0, number: 0 }, |
||||
|
{ label: "已领取执行中", status: 1, number: 0 }, |
||||
|
{ label: "已完工", status: 2, number: 0 }, |
||||
|
{ label: "已结算", status: 3, number: 0 }, |
||||
|
], |
||||
|
tasks: {}, |
||||
|
drag: false, |
||||
|
arr1: [ |
||||
|
{ id: 1, name: 'www.itxst.com' }, |
||||
|
{ id: 2, name: 'www.jd.com' }, |
||||
|
{ id: 3, name: 'www.baidu.com' }, |
||||
|
{ id: 4, name: 'www.taobao.com' } |
||||
|
], |
||||
|
arr2: [ |
||||
|
{ id: 1, name: 'www.google.com' }, |
||||
|
{ id: 2, name: 'www.msn.com' }, |
||||
|
{ id: 3, name: 'www.ebay.com' }, |
||||
|
{ id: 4, name: 'www.yahoo.com' } |
||||
|
], |
||||
|
arr3: [ |
||||
|
{ id: 1, name: 'item 1' }, |
||||
|
{ id: 2, name: 'item 2' }, |
||||
|
{ id: 3, name: 'item 3' }, |
||||
|
{ id: 4, name: 'item 4' } |
||||
|
] |
||||
|
}; |
||||
|
}, |
||||
|
components: { draggable }, |
||||
|
watch: { |
||||
|
tasks: { |
||||
|
handler(val, oldVal) { |
||||
|
console.log('tasks--val==', val); |
||||
|
console.log('tasks--oldVal==', oldVal); |
||||
|
}, |
||||
|
deep: true, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
menus() { |
||||
|
let xmTasks = JSON.parse(JSON.stringify(this.xmTasks || [])); |
||||
|
console.log('--xmTasks==', xmTasks); |
||||
|
|
||||
|
let menus = [], menuIds = {}, tasks = {}; |
||||
|
this.taskType.map(d => { |
||||
|
d.number = 0; |
||||
|
return d; |
||||
|
}) |
||||
|
xmTasks.forEach((d, i) => { |
||||
|
if (!menus.length || !menuIds[d.menuId]) { |
||||
|
menus.push(d); |
||||
|
menuIds[d.menuId] = true; |
||||
|
} else { |
||||
|
console.log('i==', i); |
||||
|
} |
||||
|
if (!tasks[d.menuId]) { |
||||
|
tasks[d.menuId] = [[], [], [], []]; |
||||
|
} |
||||
|
tasks[d.menuId][parseInt(d.taskState)].push(d); |
||||
|
this.taskType[parseInt(d.taskState)].number += 1; |
||||
|
}); |
||||
|
this.tasks = tasks; |
||||
|
console.log('this.tasks==', this.tasks); |
||||
|
return menus; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
onStart(e) { |
||||
|
console.log('onStart--e==', e); |
||||
|
this.drag = true; |
||||
|
}, |
||||
|
onEnd(e) { |
||||
|
console.log('onEnd--e==', e); |
||||
|
this.drag = false; |
||||
|
// targetEl：拖拽的任务数据; toEl拖拽后的位置. |
||||
|
let targetEl = { ...e.item.dataset }; |
||||
|
let toEl = { ...e.to.dataset }; |
||||
|
console.log('onEnd--targetEl==', targetEl, toEl); |
||||
|
if (targetEl.menuId === toEl.menuId && targetEl.taskState !== toEl.taskState) { |
||||
|
let task = this.xmTasks.find(d => d.id === targetEl.taskId); |
||||
|
console.log('onEnd--task==', task); |
||||
|
const params = { ...task, taskState: toEl.taskState }; |
||||
|
editXmTask(params).then(res => { |
||||
|
console.log('onEnd--editXmTask--res==', res); |
||||
|
this.$emit('submit'); |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
formatExeUsernames(row){ |
||||
|
var exeUsernames=row.exeUsernames; |
||||
|
var respons={ |
||||
|
type:'info', |
||||
|
executorUsername:row.executorUsername, |
||||
|
showMsg:'', |
||||
|
exeUsernames:exeUsernames, |
||||
|
executorUserid:row.executorUserid, |
||||
|
} |
||||
|
if(!row.executorUserid && exeUsernames){ |
||||
|
var exeStatuss=exeUsernames.split(",") |
||||
|
respons.showMsg=exeStatuss.length+"人候选中" |
||||
|
return respons; |
||||
|
}else if(!row.executorUserid && !exeUsernames){ |
||||
|
respons.showMsg="候选中" |
||||
|
return respons; |
||||
|
} |
||||
|
if(row.executorUserid && exeUsernames && exeUsernames.length>0){ |
||||
|
var exeStatuss=exeUsernames.split(",").filter(i=>{ |
||||
|
return i.indexOf(row.executorUsername)>=0 |
||||
|
}) |
||||
|
if(exeStatuss.length<=0){ |
||||
|
respons.showMsg="去设置" |
||||
|
return respons; |
||||
|
} |
||||
|
respons.showMsg=exeStatuss.join(",") |
||||
|
if(respons.showMsg.indexOf('验收不过')>=0){ |
||||
|
respons.type="danger" |
||||
|
}else if(respons.showMsg.indexOf('已验收')>=0){ |
||||
|
respons.type="success" |
||||
|
} |
||||
|
}else{ |
||||
|
respons.showMsg="去设置" |
||||
|
} |
||||
|
return respons |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang='scss' scoped> |
||||
|
.menu-box { |
||||
|
width: 100%; |
||||
|
overflow: scroll; |
||||
|
} |
||||
|
.row { |
||||
|
width: 2000px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
overflow: scroll !important; |
||||
|
border-top: 1px solid #ccc; |
||||
|
.item { |
||||
|
width: 200px; |
||||
|
padding: 10px; |
||||
|
border-left: 1px solid #ccc; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
&.status { |
||||
|
width: 450px; |
||||
|
} |
||||
|
&:last-child { |
||||
|
border-right: 1px solid #ccc; |
||||
|
} |
||||
|
} |
||||
|
&:last-child { |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
} |
||||
|
&.head-row { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
background: #efefef; |
||||
|
color: #303030; |
||||
|
} |
||||
|
&.menu—row { |
||||
|
background: #f6f6f6; |
||||
|
.item-menu { |
||||
|
background: #ffffff; |
||||
|
} |
||||
|
.task { |
||||
|
width: 200px; |
||||
|
height: 100px; |
||||
|
margin: 10px 0 0 10px; |
||||
|
// padding: 10px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
border-radius: 3px; |
||||
|
// box-shadow: 0 2px 12px 0 rgb(48 48 48 / 5%), 0 2px 4px 0 rgb(48 48 48 / 10%); |
||||
|
|
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.draggable { |
||||
|
min-height: 100px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.transition-group { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
min-height: 100px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue