|
|
@@ -1,37 +1,27 @@
|
|
|
<template>
|
|
|
<div class="content">
|
|
|
<div class="main">
|
|
|
- <a-layout-header class="todoHeader">
|
|
|
+ <a-layout-header class="Header">
|
|
|
<a-icon type="left" @click="$router.go(-1)" style="fontSize:24px;color:white;marginLeft:2%;" />
|
|
|
- <span
|
|
|
- style="fontSize:20px;
|
|
|
- fontWeight:700;
|
|
|
- marginLeft:34%;
|
|
|
- marginTop:4px;
|
|
|
- color:white;"
|
|
|
- >
|
|
|
- 待办事项
|
|
|
- </span>
|
|
|
+ <span>我的事项</span>
|
|
|
</a-layout-header>
|
|
|
|
|
|
<!-- tabs 部分 -->
|
|
|
- <a-layout-content>
|
|
|
- <a-tabs default-active-key="wait" @change="callback" style="text-align: center;" className="todoTabs">
|
|
|
+ <a-layout-content class="todoBody">
|
|
|
+ <a-tabs default-active-key="wait" @change="callback" class="todoPage">
|
|
|
<!-- 我的申请 -->
|
|
|
- <a-tab-pane key="apply" tab="我的申请" class="apply">
|
|
|
+ <a-tab-pane key="apply" tab="申请" class="apply">
|
|
|
<div v-for="item in applyList" :key="item.id">
|
|
|
- <a-card
|
|
|
- style="width: 100%;
|
|
|
- border-radius:20px;
|
|
|
- text-align:left;
|
|
|
- marginBottom:20px;
|
|
|
- border:none;
|
|
|
- background-color:rgba(247, 224, 212,.8);"
|
|
|
- >
|
|
|
+ <a-card class="cardTask">
|
|
|
<p class="pTitle">
|
|
|
- <img src="@assets/look.gif" width="30px;"/>
|
|
|
- {{ item.processName }}
|
|
|
+ <span>
|
|
|
+ <img src="@assets/look.gif" />
|
|
|
+ </span>
|
|
|
+ <i>
|
|
|
+ {{ item.processName }}
|
|
|
+ </i>
|
|
|
</p>
|
|
|
+
|
|
|
<p>当前审批环节：{{ item.currTaskName }}</p>
|
|
|
<p>创建时间：{{ item.createTime }}</p>
|
|
|
|
|
|
@@ -79,30 +69,108 @@
|
|
|
<p style="float:right;">发起人：{{ item.createBy }}</p>
|
|
|
|
|
|
<a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
|
|
|
+
|
|
|
+ <!-- 操作 -->
|
|
|
+ <div class="operation">
|
|
|
+ <p>
|
|
|
+ <span class="operationImg">
|
|
|
+ <img src="@assets/down.png" />
|
|
|
+ </span>
|
|
|
+ 操作
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
+ <div class="btns">
|
|
|
+ <!-- 处理中 渲染的按钮 -->
|
|
|
+ <span v-if="item.status == 1" class="ingBtns">
|
|
|
+ <a-button
|
|
|
+ class="itemBtn"
|
|
|
+ ghost
|
|
|
+ @click="cancel(item)"
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);
|
|
|
+ color:red;"
|
|
|
+ >
|
|
|
+ 撤回
|
|
|
+ </a-button>
|
|
|
+ <a-button
|
|
|
+ class="itemBtn"
|
|
|
+ ghost
|
|
|
+ @click="detail(item)"
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);
|
|
|
+ color:orange;"
|
|
|
+ >
|
|
|
+ 进度
|
|
|
+ </a-button>
|
|
|
+
|
|
|
+ <a-button
|
|
|
+ class="itemBtn"
|
|
|
+ ghost
|
|
|
+ @click="detail(item)"
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);
|
|
|
+ color:#4e73b9;"
|
|
|
+ >
|
|
|
+ 详情
|
|
|
+ </a-button>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <!-- 驳回 状态 渲染的按钮 -->
|
|
|
+ <span v-if="item.status == 2 || item.status == 3" class="overBtns">
|
|
|
+ <a-button
|
|
|
+ class="itemBtn"
|
|
|
+ ghost
|
|
|
+ @click="detail(item)"
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
|
|
|
+ color:rgb(80, 95, 102);"
|
|
|
+ >
|
|
|
+ 重新申请
|
|
|
+ </a-button>
|
|
|
+ <a-button
|
|
|
+ class="itemBtn"
|
|
|
+ ghost
|
|
|
+ @click="detail(item)"
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
|
|
|
+ color:#4e73b9;"
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+ </a-button>
|
|
|
+
|
|
|
+ <a-button
|
|
|
+ class="itemBtn"
|
|
|
+ ghost
|
|
|
+ @click="detail(item)"
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
|
|
|
+ color:gray;"
|
|
|
+ >
|
|
|
+ 历史
|
|
|
+ </a-button>
|
|
|
+
|
|
|
+ <a-button
|
|
|
+ class="itemBtn"
|
|
|
+ ghost
|
|
|
+ @click="detail(item)"
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
|
|
|
+ color:red;"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </a-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-card>
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
|
|
|
<!-- 我的待办 -->
|
|
|
- <a-tab-pane key="wait" tab="我的待办" force-render class="wait">
|
|
|
+ <a-tab-pane key="wait" tab="待办" force-render class="wait">
|
|
|
<div v-for="item in todoList" :key="item.id">
|
|
|
- <a-card
|
|
|
- style="width: 100%;
|
|
|
- borderRadius:20px;
|
|
|
- text-align:left;
|
|
|
- marginBottom:20px;
|
|
|
- border:none;
|
|
|
- background-color:rgba(247, 224, 212,.8);"
|
|
|
- >
|
|
|
+ <a-card class="cardTask">
|
|
|
<p class="pTitle">
|
|
|
- <img
|
|
|
- src="@assets/look.gif"
|
|
|
- width="30px;"
|
|
|
-
|
|
|
- style="marginRight:4px; borderRadius:8px;"
|
|
|
- />
|
|
|
+ <span>
|
|
|
+ <img src="@assets/look.gif" />
|
|
|
+ </span>
|
|
|
{{ item.processName }}
|
|
|
</p>
|
|
|
+
|
|
|
<p>任务名称：{{ item.name }}</p>
|
|
|
<p>创建时间：{{ item.createTime }}</p>
|
|
|
|
|
|
@@ -162,10 +230,13 @@
|
|
|
|
|
|
<a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
|
|
|
|
|
|
- <!-- 操作按钮 -->
|
|
|
+ <!-- 操作 -->
|
|
|
<div class="operation">
|
|
|
- <p style="fontSize:16px;fontWeight:700;color:#092834;">
|
|
|
- <img src="@assets/down.png" width="26px;" style="marginRight:4px;" />
|
|
|
+ <p>
|
|
|
+ <span class="operationImg">
|
|
|
+ <img src="@assets/down.png" />
|
|
|
+ </span>
|
|
|
+
|
|
|
操作
|
|
|
</p>
|
|
|
|
|
|
@@ -174,7 +245,7 @@
|
|
|
class="itemBtn"
|
|
|
ghost
|
|
|
@click="detail(item)"
|
|
|
- style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
|
|
|
color:#4e73b9;"
|
|
|
>
|
|
|
详情
|
|
|
@@ -194,17 +265,17 @@
|
|
|
<!-- 激活 状态 -->
|
|
|
<span v-else>
|
|
|
<a-button
|
|
|
- class="itemBtn mid"
|
|
|
+ class="itemBtn midBtn"
|
|
|
ghost
|
|
|
@click="passTask(item)"
|
|
|
- style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
|
|
|
color:#4e73b9;"
|
|
|
>
|
|
|
通过
|
|
|
</a-button>
|
|
|
|
|
|
<a-button
|
|
|
- class="itemBtn mid"
|
|
|
+ class="itemBtn midBtn"
|
|
|
ghost
|
|
|
@click="backTask(item)"
|
|
|
style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.7);color:#ea472c;"
|
|
|
@@ -213,7 +284,7 @@
|
|
|
</a-button>
|
|
|
|
|
|
<a-button
|
|
|
- class="itemBtn mid"
|
|
|
+ class="itemBtn midBtn"
|
|
|
ghost
|
|
|
@click="delegateTask(item)"
|
|
|
style="color:gray;box-shadow: 6px 6px 6px rgba(128, 128, 128,.7);color:orange;"
|
|
|
@@ -227,7 +298,7 @@
|
|
|
ghost
|
|
|
@click="history(item)"
|
|
|
style="color:gray;
|
|
|
- box-shadow: 4px 4px 4px rgba(128, 128, 128,.9);
|
|
|
+ box-shadow: 4px 4px 4px rgba(128, 128, 128,.7);
|
|
|
position:absolute;
|
|
|
right:0;
|
|
|
marginRight:0;"
|
|
|
@@ -334,19 +405,16 @@
|
|
|
</a-tab-pane>
|
|
|
|
|
|
<!-- 我的已办 -->
|
|
|
- <a-tab-pane key="done" tab="我的已办" class="done">
|
|
|
+ <a-tab-pane key="done" tab="已办" class="done">
|
|
|
<div v-for="item in doneList" :key="item.id">
|
|
|
- <a-card
|
|
|
- style="width: 100%;
|
|
|
- border-radius:20px;
|
|
|
- text-align:left;
|
|
|
- marginBottom:20px;
|
|
|
- border:none;
|
|
|
- background-color:rgba(247, 224, 212,.8);"
|
|
|
- >
|
|
|
+ <a-card class="cardTask">
|
|
|
<p class="pTitle">
|
|
|
- <img src="@assets/look.gif" width="30px;" style="marginRight:4px;borderRadius:8px;" />
|
|
|
- {{ item.processName }}
|
|
|
+ <span>
|
|
|
+ <img src="@assets/look.gif" />
|
|
|
+ </span>
|
|
|
+ <i>
|
|
|
+ {{ item.processName }}
|
|
|
+ </i>
|
|
|
</p>
|
|
|
<p>任务名称：{{ item.name }}</p>
|
|
|
<p>创建时间：{{ item.createTime }}</p>
|
|
|
@@ -366,11 +434,11 @@
|
|
|
>
|
|
|
<span
|
|
|
v-if="item.deleteReason == '审批驳回'"
|
|
|
- style="background:rgba(234, 71, 44,.5);
|
|
|
+ style="background:rgba(9, 40, 52,.7);
|
|
|
padding:4px 10px;
|
|
|
borderRadius:2px;
|
|
|
letterSpacing:1px;
|
|
|
- color: #092834;"
|
|
|
+ color: white;"
|
|
|
>
|
|
|
{{ item.deleteReason }}
|
|
|
</span>
|
|
|
@@ -379,10 +447,13 @@
|
|
|
|
|
|
<a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
|
|
|
|
|
|
- <!-- 操作按钮 -->
|
|
|
+ <!-- 操作 -->
|
|
|
<div class="operation">
|
|
|
- <p style="fontSize:16px;fontWeight:700;color:#092834;">
|
|
|
- <img src="@assets/down.png" width="26px;" alt="???? " style="marginRight:4px;" />
|
|
|
+ <p>
|
|
|
+ <span class="operationImg">
|
|
|
+ <img src="@assets/down.png" />
|
|
|
+ </span>
|
|
|
+
|
|
|
操作
|
|
|
</p>
|
|
|
|
|
|
@@ -391,10 +462,10 @@
|
|
|
class="itemBtn"
|
|
|
ghost
|
|
|
@click="detail(item)"
|
|
|
- style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);
|
|
|
+ style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
|
|
|
color:#4e73b9;"
|
|
|
>
|
|
|
- 表单数据
|
|
|
+ 详情
|
|
|
</a-button>
|
|
|
|
|
|
<a-button
|
|
|
@@ -404,7 +475,7 @@
|
|
|
style="color:gray;
|
|
|
box-shadow: 8px 8px 8px rgba(128, 128, 128,.7)"
|
|
|
>
|
|
|
- 审批历史
|
|
|
+ 历史
|
|
|
</a-button>
|
|
|
|
|
|
<a-popconfirm title="确定删除吗?" placement="left">
|
|
|
@@ -439,6 +510,7 @@ import { deleteAction, getAction, downFile } from '@/api/manage'
|
|
|
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
|
|
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
|
|
|
+import DictItemListVue from '../system/DictItemList.vue'
|
|
|
|
|
|
export default {
|
|
|
name: 'Todo',
|
|
|
@@ -487,6 +559,7 @@ export default {
|
|
|
// // 表单验证规则
|
|
|
// },
|
|
|
|
|
|
+
|
|
|
submitLoading: false, // 添加或编辑提交状态
|
|
|
data: [], // 表单数据
|
|
|
total: 0, // 表单数据总数
|
|
|
@@ -516,7 +589,9 @@ export default {
|
|
|
getNode: '/activiti_process/getNode/',
|
|
|
getBackList: '/actTask/getBackList/',
|
|
|
passAll: '/actTask/passAll/',
|
|
|
- backAll: '/actTask/backAll/'
|
|
|
+ backAll: '/actTask/backAll/',
|
|
|
+ // 我的申请
|
|
|
+ cancelApply: '/actBusiness/cancel'
|
|
|
},
|
|
|
|
|
|
todoList: [], // 待办列表
|
|
|
@@ -524,7 +599,9 @@ export default {
|
|
|
doneList: [], // 已办列表
|
|
|
|
|
|
modalTaskVisible: false,
|
|
|
- procInstId: ''
|
|
|
+ procInstId: '',
|
|
|
+
|
|
|
+ modalCancelVisible: false
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -562,6 +639,8 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+
|
|
|
+
|
|
|
// 初始化表
|
|
|
forminitial() {
|
|
|
this.form = {
|
|
|
@@ -852,7 +931,7 @@ export default {
|
|
|
this.modalLsVisible = true
|
|
|
},
|
|
|
|
|
|
- // 我的已办 methods 问题
|
|
|
+ // 已办 methods 问题
|
|
|
remove(item) {
|
|
|
console.log('点击这项是：', item)
|
|
|
this.postFormAction(this.url.deleteHistoricTask, item.id).then(res => {
|
|
|
@@ -926,95 +1005,72 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ // 申请 方法
|
|
|
+ // 撤回
|
|
|
+ cancel(item) {
|
|
|
+ console.log('走到这没', item.id)
|
|
|
+ console.log('222', item.procInstId)
|
|
|
+ this.cancelForm.id = item.id
|
|
|
+ this.cancelForm.procInstId = DictItemListVue.procInstId
|
|
|
+ this.modalCancelVisible = true
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
+
|
|
|
<style src="@assets/less/overwrite.less" lang="less" scoped></style>
|
|
|
<style lang="less">
|
|
|
@import '~@assets/less/common.less';
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
.content {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: rgba(247, 224, 212, 0.4);
|
|
|
-}
|
|
|
-.todoHeader {
|
|
|
- padding: 0;
|
|
|
- color: white;
|
|
|
- background-color: #347b98;
|
|
|
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
|
- margin-bottom: 20px;
|
|
|
- letter-spacing: 1px;
|
|
|
-}
|
|
|
-.main {
|
|
|
- padding: 14px;
|
|
|
-}
|
|
|
-//撤销状态
|
|
|
-.state .cancel {
|
|
|
- background-color: rgba(161, 160, 156, 0.2);
|
|
|
- color: rgb(114, 110, 110);
|
|
|
-}
|
|
|
-//已通过 状态
|
|
|
-.state .pass {
|
|
|
- background-color: rgb(200, 245, 221);
|
|
|
- color: rgb(22, 139, 85);
|
|
|
-}
|
|
|
+ .main {
|
|
|
+ padding: 14px;
|
|
|
+
|
|
|
+ //tabs 内容
|
|
|
+ .todoBody {
|
|
|
+ //优先级
|
|
|
+ .priorityComm {
|
|
|
+ padding: 4px 10px;
|
|
|
+ color: #092834;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+ // 状态
|
|
|
+ .statusComm {
|
|
|
+ padding: 4px 6px;
|
|
|
+ color: #092834;
|
|
|
+ }
|
|
|
|
|
|
-//优先级 公共样式 small
|
|
|
-.priorityComm {
|
|
|
- padding: 4px 10px;
|
|
|
- color: #092834;
|
|
|
- letter-spacing: 1px;
|
|
|
-}
|
|
|
+ // 结果
|
|
|
+ .resultComm {
|
|
|
+ padding: 4px 10px;
|
|
|
+ color: white;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+ // 操作 ===============================
|
|
|
+ .wait .btns {
|
|
|
+ position: relative;
|
|
|
|
|
|
-// 状态 公共样式 small
|
|
|
-.statusComm {
|
|
|
- padding: 4px 6px;
|
|
|
- color: #092834;
|
|
|
-}
|
|
|
+ .midBtn {
|
|
|
+ margin-left: 3.3%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-// 结果 公共样式 big
|
|
|
-.resultComm {
|
|
|
- padding: 4px 10px;
|
|
|
- color: white;
|
|
|
- letter-spacing: 1px;
|
|
|
-}
|
|
|
-// ----------------------------------
|
|
|
-//待办 操作按钮
|
|
|
-.wait .btns {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.wait .operation /deep/.ant-btn {
|
|
|
- padding: 0;
|
|
|
- line-height: 0;
|
|
|
- border: 1px solid rgba(128, 128, 128, 0.1);
|
|
|
- border-radius: 18px;
|
|
|
- padding: 26px 14px;
|
|
|
-}
|
|
|
-.mid {
|
|
|
- margin-left: 6%;
|
|
|
-}
|
|
|
-.itemBtn {
|
|
|
- font-weight: 700;
|
|
|
-}
|
|
|
+ //已办 操作按钮
|
|
|
+ .done .btns {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
|
|
|
-.done .btns {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-// ----------------------------------
|
|
|
-//已办 操作按钮
|
|
|
-.done .btns .itemBtn {
|
|
|
- margin-right: 20%;
|
|
|
- padding: 0;
|
|
|
- line-height: 0;
|
|
|
- border-radius: 18px;
|
|
|
- padding: 26px 14px;
|
|
|
- border: 1px solid rgba(128, 128, 128, 0.1);
|
|
|
-}
|
|
|
-.done .itemBtn:nth-last-child(1) {
|
|
|
- margin-right: 0;
|
|
|
+ //申请 不同情况按钮排布
|
|
|
+ .apply .btns .ingBtns,
|
|
|
+ .apply .btns .overBtns {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
liangyan0105
