Commit faaecadc authored by jingnan's avatar jingnan 👀

待办任务下增加批量签审

parent d7ae783e
...@@ -56,3 +56,8 @@ export function batOperationCheck(params) { ...@@ -56,3 +56,8 @@ export function batOperationCheck(params) {
export function batOperation(params) { export function batOperation(params) {
return post('/workflow/template/batOperation', params) return post('/workflow/template/batOperation', params)
} }
// 获取所有待办
export function getMyTodoList() {
return get('indexTask/task/todo')
}
<template>
<div class="CommonTabHeader">
<el-tabs
v-model="tabName"
@tab-click="changeTab"
>
<el-tab-pane
v-for="(item, $i) in tabList"
:key="$i"
:name="item.title"
>
<span slot="label"><img class="common-header-pane-img" :src="item.icon">{{ item.title }}</span>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: 'CommonTabHeader',
props: {
tabList: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
tabName: this.tabList[0].title
}
},
methods: {
changeTab(item) {
this.$emit('changActiveName', item.name)
}
}
}
</script>
<style lang="scss" scoped>
.CommonTabHeader {
background-color: #fff;
padding-left: 10px;
.el-tabs__header {
margin: 0;
}
.common-header-pane-img {
width: 15px;
height: 15px;
background-size: cover;
vertical-align: sub;
margin-right: 5px;
}
}
</style>
<style lang="scss">
.CommonTabHeader {
.el-tabs__header {
margin: 0;
}
.el-tabs__active-bar {
height: 3px;
background-color: #3281DE;
}
}
</style>
/**
* @Description:任务列表
* @author wx
* @date 2022/04/19
*/
<template> <template>
<div class="task-list-page"> <div class="TaskCenter">
<right-to-left :default-percent="defaultPercent"> <commonTabHeader :tab-list="tabList" :active-name="activeName" @changActiveName="changActiveName" />
<div slot="left" class="tree-left left-box"> <div class="task-center-content">
<my-task ref="myTask" @getTaskDetail="getTaskDetail" /> <singleSignOff v-if="activeName === '单个签审'" />
</div> <bulkSigning v-if="activeName === '批量签审'" />
</div>
<div slot="right" class="right-box">
<task-detail v-if="id && processInstanceId" :id="id" :process-instance-id="processInstanceId" @reload="reload" />
<div v-else class="noData-wrap">
<img src="/images/common/nodata.png" alt>
<span>暂无数据</span>
</div>
</div>
</right-to-left>
</div> </div>
</template> </template>
<script> <script>
import commonTabHeader from '@/localComponents/commonTabHeader'
import MyTask from './components/my-task' import singleSignOff from '../singleSigning/index.vue'
import TaskDetail from '@/business-components/tabCom/task-detail' import bulkSigning from '../myPlanTask/index'
// import InitiatedProcess from '../initiatedProcess/index'
export default { export default {
// eslint-disable-next-line vue/name-property-casing
name: 'My_taskPage',
components: { components: {
MyTask, commonTabHeader,
TaskDetail singleSignOff,
bulkSigning
// InitiatedProcess
}, },
data() { data() {
return { return {
defaultPercent: 22, tabList: [
id: '', {
processInstanceId: '' title: '单个签审',
icon: '/images/common/edit.png'
},
{
title: '批量签审',
icon: '/images/common/batchEdit.png'
}
],
activeName: '批量签审'
} }
}, },
computed: {
},
watch: {
},
async mounted() {
},
destroyed() {
},
methods: { methods: {
getTaskDetail(data) { changActiveName(activeName) {
this.id = data && data.id ? data.id : '' this.activeName = activeName
this.processInstanceId = data && data.processInstanceId ? data.processInstanceId : ''
},
reload() {
if (this.$route.path === '/dee-task-center/workflow/task-center/home') {
this.$refs.myTask.getTasks(1)
} else {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push({
path: '/task-center/index'
})
}
} }
} }
} }
</script> </script>
<style lang='scss'> <style lang="scss" scoped>
.task-list-page{ .TaskCenter {
height: 100%; height: 100%;
box-sizing: border-box; .task-center-content {
.border-box-style{ height: calc(100% - 45px);
padding:0; margin-top: 5px;
.task-detail-page{
margin:0;
.dee-panel{
padding:0;
width: 100%;
height: 100%;
}
}
}
.noData-wrap{
margin-top: 26%;
text-align: center;
img{
display: block;
width: 190px;
height: 132px;
margin: auto;
}
}
.flex-s{
display: flex;
justify-content: space-between;
}
.fb{
font-weight: bold;
}
.right-box{
height: 100%;
}
.splitter-pane-resizer.vertical {
opacity: 1;
background-color: #F1F4F5;
width: 6px;
border-left: 0;
border-right: 0;
}
.left-box{
font-size: 14px;
.model-icon{
width: 16px;
height: 16px;
border: none;
margin-right: 10px;
}
}
.tree-left{
height:100%;
box-sizing: border-box;
position: relative;
.menu-tree{
.is-current{
background: #EEF3F9;
}
}
.tree-container{
height: calc(100% - 58px);
overflow: scroll;
.el-tree-node__content{
height: 38px;
}
}
.tree-select{
width: 100%;
padding:0px;
.el-input{
border:none;
}
}
.serarch-title{
height: 58px;
line-height: 58px;
padding-left: 10px;
display: flex;
font-size: 16px;
cursor: pointer;
img{
display: block;
width: 30px;
height: 30px;
margin: auto 9px auto 0;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
&:hover{
.tree-btn-box{
display: block
}
}
}
.tree-btn-box{
width: 66px;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
display: none;
.btn-item img{
padding: 4px;
width: 16px;
height: 16px;
}
}
}
.application-list{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
margin-left: 8px;
.content-box{
cursor: pointer;
height: 120px;;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #D9D9D9;
.app-icon{
width: 40px;
}
}
.oparation-box{
padding:0 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 50px;
text-align: center;
line-height: 50px;
background:rgba(0,0,0,0.04);
position: relative;
.edit-btn-box{
cursor: pointer;
position: absolute;
right: 40px;
top: 6px;
img{
width: 22px;
}
}
}
.add-btn-s{
font-size: 30px;
color: #2A75CE;
}
}
}
.img-sel-box{
width: 20px;
height: 20px;
padding-left: 10px;
img{
width: 20px;
height: 20px;
} }
} }
</style> </style>
/**
* @Description:任务列表
* @author wx
* @date 2022/04/19
*/
<template>
<div class="task-list-page">
<right-to-left :default-percent="defaultPercent">
<div slot="left" class="tree-left left-box">
<module-task-list ref="moduleTaskList" @goModuleTaskDetail="goModuleTaskDetail" />
</div>
<div slot="right" class="right-box">
<!-- <module-task-detail v-if="selectData && selectData.subType" :select-data="selectData" /> -->
<module-task-detail :select-data="selectData" />
</div>
</right-to-left>
</div>
</template>
<script>
import ModuleTaskList from './moduleTaskList'
import ModuleTaskDetail from './taskList'
export default {
components: {
ModuleTaskList,
ModuleTaskDetail
},
data() {
return {
defaultPercent: 22,
selectData: null
}
},
computed: {
},
watch: {
},
created() {
this.$bus.$on('reloadModuleList', (hasFlag) => {
this.$refs.moduleTaskList.loadData(hasFlag)
})
},
destroyed() {
},
methods: {
goModuleTaskDetail(data) {
this.selectData = data
}
}
}
</script>
<style lang='scss'>
.task-list-page{
height: 100%;
box-sizing: border-box;
.border-box-style{
padding:0;
.task-detail-page{
margin:0;
.dee-panel{
padding:0;
width: 100%;
height: 100%;
}
}
}
.noData-wrap{
margin-top: 26%;
text-align: center;
img{
display: block;
width: 190px;
height: 132px;
margin: auto;
}
}
.flex-s{
display: flex;
justify-content: space-between;
}
.fb{
font-weight: bold;
}
.right-box{
height: 100%;
}
.splitter-pane-resizer.vertical {
opacity: 1;
background-color: #F1F4F5;
width: 6px;
border-left: 0;
border-right: 0;
}
.left-box{
font-size: 14px;
.model-icon{
width: 16px;
height: 16px;
border: none;
margin-right: 10px;
}
}
.tree-left{
height:100%;
box-sizing: border-box;
position: relative;
.menu-tree{
.is-current{
background: #EEF3F9;
}
}
.tree-container{
height: calc(100% - 58px);
overflow: scroll;
.el-tree-node__content{
height: 38px;
}
}
.tree-select{
width: 100%;
padding:0px;
.el-input{
border:none;
}
}
.serarch-title{
height: 58px;
line-height: 58px;
padding-left: 10px;
display: flex;
font-size: 16px;
cursor: pointer;
img{
display: block;
width: 30px;
height: 30px;
margin: auto 9px auto 0;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
&:hover{
.tree-btn-box{
display: block
}
}
}
.tree-btn-box{
width: 66px;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
display: none;
.btn-item img{
padding: 4px;
width: 16px;
height: 16px;
}
}
}
.application-list{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
margin-left: 8px;
.content-box{
cursor: pointer;
height: 120px;;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #D9D9D9;
.app-icon{
width: 40px;
}
}
.oparation-box{
padding:0 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 50px;
text-align: center;
line-height: 50px;
background:rgba(0,0,0,0.04);
position: relative;
.edit-btn-box{
cursor: pointer;
position: absolute;
right: 40px;
top: 6px;
img{
width: 22px;
}
}
}
.add-btn-s{
font-size: 30px;
color: #2A75CE;
}
}
}
.img-sel-box{
width: 20px;
height: 20px;
padding-left: 10px;
img{
width: 20px;
height: 20px;
}
}
</style>
<template>
<div class="module-task-list">
<div class="task-header">
<div class="refresh">
<i class="el-icon-refresh" style="margin-right:10px" title="刷新" @click="loadData(true)" />
</div>
</div>
<el-scrollbar class="task-content">
<div v-for="(item, index) in taskList" :key="index" :class="['task-item', {'active-item': clickTask && clickTask.taskType === item.taskType }]" @click="goInfo(item)">
<div class="task-item-label">
<div class="ti-label">
<div class="flex-start">
<span v-if="item.taskType" class="task-status" :style="{color: '#2A75CE'}">【{{ item.taskType }}</span>
<!-- <span class="task-name">{{ item.taskType }}</span> -->
</div>
<div class="task-item-num">
{{ item.taskCount }}
</div>
</div>
</div>
</div>
</el-scrollbar>
</div>
</template>
<script>
import { getMyTodoList } from '@/api/workflow/taskCenter'
export default {
name: 'ModuleTaskList',
data() {
return {
taskList: [],
clickTask: null
}
},
created() {
},
mounted() {
this.loadData()
},
methods: {
loadData(hasFlag) {
getMyTodoList().then(res => {
const that = this
that.taskList = res.items || []
if (!hasFlag) {
this.goInfo(that.taskList.length ? that.taskList[0] : null)
}
})
},
goInfo(item) {
this.clickTask = item
this.$emit('goModuleTaskDetail', item)
}
}
}
</script>
<style lang="scss" >
.module-task-list {
height: 100%;
background-color: #ffffff;
padding: 10px;
box-sizing: border-box;
// border: 1px solid #D9D9D9;
position: relative;
.task-header{
height: 30px;
}
.refresh{
position: absolute;
right: 9px;
top: 20px;
z-index: 10;
span{
font-size:12px;
color: #999999;
cursor: pointer;
}
i{
cursor: pointer;
font-weight: 400;
color: #999999;
}
i:hover {
color: rgb(42, 117, 206);
}
}
.el-icon-refresh{
margin-left:16px;
color: #999999;
}
.task-content {
// padding-bottom: 10px;
font-size: 12px;
color: #212121;
overflow: hidden;
height: calc(100% - 30px);
width: 100%;
box-sizing: border-box;
.active-item{
background: #DEEDF4!important;
}
.task-item {
cursor: pointer;
height: 90px;
box-sizing: border-box;
background: #FBFDFF;
border-radius: 2px;
border: 1px solid rgba(200, 212, 220, 0.88);
border-left: 3px solid #76B0D7;
margin-bottom: 12px;
padding: 20px 22px 0 18px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&:hover {
background-color: rgba(245,247,250,1);
}
.task-item-num {
text-align: right;
margin-top: 6px;
font-weight: 900;
font-size: 14px;
color:rgb(42, 117, 206);
}
.title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-right: 10px;
}
.due-text{
color: red;
margin-left: 10px;
}
.ti-label {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
img {
height: 18px;
width: 16px;
margin-right: 8px;
}
.task-status{
font-size: 14px;
}
.task-name{
font-weight: 900;
font-size: 14px;
}
}
.task-item-info {
width: 100%;
overflow: hidden;
.task-left {
width: calc(100% - 156px);
display: inline-flex;
justify-content: flex-start;
align-items: baseline;
color: #626262;
font-size:12px;
}
.theme {
box-flex: 1;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: calc(100% - 100px);
}
.state {
color: #363636;
padding: 0px 6px;
}
.state.cancel {
color: #fe2929;
}
}
}
}
.mt20{
display: inline-block;
margin-top: 20px;
}
.more-bar {
margin: 10px auto;
text-align: center;
font-size: 12px;
color: #999;
}
.more {
margin: auto;
margin-top: 20px;
color: #2f90e2;
height: 26px;
line-height: 26px;
padding: 0 20px;
background: rgba(231, 242, 255, 1);
border-radius: 13px;
display: inline-block;
cursor: pointer;
}
}
</style>
<template>
<div class="MyPlanTaskPage">
<div v-if="loadComponents" class="TaskComponentView" :class="{'height_class':heightClass}">
<compnent :is="tabPosition" :sub-type="subType" :def-state="state" />
</div>
</div>
</template>
<script>
export default {
components: {
},
props: {
selectData: {
type: Object,
default: () => null
}
},
data() {
return {
tabPosition: '',
subType: '计划',
state: '',
loadComponents: true,
heightClass: false
}
},
watch: {
selectData(newVal, oldVal) {
if (oldVal) {
if (newVal.state !== oldVal.state || newVal.subType !== oldVal.subType) {
this.loadComponents = false
this.subType = newVal.subType
this.state = newVal.state
this.tabPosition = this.getComponentName()
this.$nextTick(() => {
this.loadComponents = true
})
}
} else if (newVal) {
this.subType = newVal.subType
this.state = newVal.state
this.tabPosition = this.getComponentName()
}
}
},
created() {
// this.tabPosition = this.getComponentName()
},
mounted() {
// const radioHeight = document.getElementsByClassName('task_list')[0].offsetHeight
// if (radioHeight > 40) {
// this.heightClass = true
// }
},
methods: {
getComponentName() {
// const { subType } = this.$route.query
const subType = this.subType
let componentName = ''
const childCompsObj = this.childComps.find(eve => eve.subType === subType)
if (childCompsObj) {
componentName = childCompsObj.compName
}
return componentName
},
onTabChange(compName) {
this.loadComponents = false
// 通过路由跳转,实现参数同步反映在URL上,页面按钮切换导致查询参数不正确
const item = this.childComps.find(c => c.compName === compName)
this.subType = item.subType
this.state = ''
this.$nextTick(() => {
this.loadComponents = true
})
}
}
}
</script>
<style lang="scss">
.MyPlanTaskPage {
// padding: 10px 0;
box-sizing: border-box;
height: 100%;
overflow: hidden;
.height_class {
height: calc(100% - 56px) !important;
}
.el-radio-button .el-radio-button__inner {
padding-left: 10px;
padding-right: 10px;
}
.TaskComponentView {
height: calc(100% - 40px);
box-sizing: border-box;
overflow: hidden;
}
.TodoListTable{
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
.el-pagination{
text-align: right;
}
.TodoListView .splitter-pane:first-child {
padding-bottom: 0 !important;
}
.TodoListView .splitter-pane.splitter-paneR {
padding-top: 10px !important;
}
.splitter-pane-resizer{
&.horizontal{
opacity: 1;
background-color: transparent;
border: 0;
text-align: center;
&::after{
content: "";
display: inline-block;
width: 35px;
height: 2px;
border: 1px solid #8f9192;
border-left: 0;
border-right: 0;
z-index: 5;
}
&:hover{
&::after{
border-color:#3b5485;
}
}
}
}
}
</style>
/**
* @Description:任务列表
* @author wx
* @date 2022/04/19
*/
<template>
<div class="task-list-page">
<right-to-left :default-percent="defaultPercent">
<div slot="left" class="tree-left left-box">
<my-task ref="myTask" @getTaskDetail="getTaskDetail" />
</div>
<div slot="right" class="right-box">
<task-detail v-if="id && processInstanceId" :id="id" :process-instance-id="processInstanceId" @reload="reload" />
<div v-else class="noData-wrap">
<img src="/images/common/nodata.png" alt>
<span>暂无数据</span>
</div>
</div>
</right-to-left>
</div>
</template>
<script>
import MyTask from './components/my-task'
import TaskDetail from '@/business-components/tabCom/task-detail'
export default {
components: {
MyTask,
TaskDetail
},
data() {
return {
defaultPercent: 22,
id: '',
processInstanceId: ''
}
},
computed: {
},
watch: {
},
async mounted() {
},
destroyed() {
},
methods: {
getTaskDetail(data) {
this.id = data && data.id ? data.id : ''
this.processInstanceId = data && data.processInstanceId ? data.processInstanceId : ''
},
reload() {
if (this.$route.path === '/dee-task-center/workflow/task-center/home') {
this.$refs.myTask.getTasks(1)
} else {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push({
path: '/task-center/index'
})
}
}
}
}
</script>
<style lang='scss'>
.task-list-page{
height: 100%;
box-sizing: border-box;
.border-box-style{
padding:0;
.task-detail-page{
margin:0;
.dee-panel{
padding:0;
width: 100%;
height: 100%;
}
}
}
.noData-wrap{
margin-top: 26%;
text-align: center;
img{
display: block;
width: 190px;
height: 132px;
margin: auto;
}
}
.flex-s{
display: flex;
justify-content: space-between;
}
.fb{
font-weight: bold;
}
.right-box{
height: 100%;
}
.splitter-pane-resizer.vertical {
opacity: 1;
background-color: #F1F4F5;
width: 6px;
border-left: 0;
border-right: 0;
}
.left-box{
font-size: 14px;
.model-icon{
width: 16px;
height: 16px;
border: none;
margin-right: 10px;
}
}
.tree-left{
height:100%;
box-sizing: border-box;
position: relative;
.menu-tree{
.is-current{
background: #EEF3F9;
}
}
.tree-container{
height: calc(100% - 58px);
overflow: scroll;
.el-tree-node__content{
height: 38px;
}
}
.tree-select{
width: 100%;
padding:0px;
.el-input{
border:none;
}
}
.serarch-title{
height: 58px;
line-height: 58px;
padding-left: 10px;
display: flex;
font-size: 16px;
cursor: pointer;
img{
display: block;
width: 30px;
height: 30px;
margin: auto 9px auto 0;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
&:hover{
.tree-btn-box{
display: block
}
}
}
.tree-btn-box{
width: 66px;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
display: none;
.btn-item img{
padding: 4px;
width: 16px;
height: 16px;
}
}
}
.application-list{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
margin-left: 8px;
.content-box{
cursor: pointer;
height: 120px;;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #D9D9D9;
.app-icon{
width: 40px;
}
}
.oparation-box{
padding:0 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 50px;
text-align: center;
line-height: 50px;
background:rgba(0,0,0,0.04);
position: relative;
.edit-btn-box{
cursor: pointer;
position: absolute;
right: 40px;
top: 6px;
img{
width: 22px;
}
}
}
.add-btn-s{
font-size: 30px;
color: #2A75CE;
}
}
}
.img-sel-box{
width: 20px;
height: 20px;
padding-left: 10px;
img{
width: 20px;
height: 20px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment