|
|
@@ -1,66 +1,97 @@
|
|
|
<template>
|
|
|
- <div class="main">
|
|
|
- <a-layout-header style="background:none;padding:0;">
|
|
|
- <a-icon type="left" @click="$router.go(-1)" style="fontSize:24px;color:#595959;" />
|
|
|
- <span
|
|
|
- style="fontSize:20px;fontWeight:700;text-align:center;marginLeft:124px;color:rgb(43, 41, 41);"
|
|
|
- >待办事项</span
|
|
|
- >
|
|
|
- </a-layout-header>
|
|
|
-
|
|
|
- <!-- tabs 部分 -->
|
|
|
- <a-layout-content>
|
|
|
- <a-tabs default-active-key="wait" @change="callback" style="text-align: center;" className="todoTabs">
|
|
|
- <!-- 我的申请 -->
|
|
|
- <a-tab-pane key="apply" tab="我的申请">
|
|
|
- <div v-for="item in applyList" :key="item.id">
|
|
|
- <a-card style="width: 100%;border-radius:20px;text-align:left;marginBottom:30px;border:none;">
|
|
|
- <p>所属流程：{{ item.processName }}</p>
|
|
|
- <p>标题：{{ item.title }}</p>
|
|
|
- <p>状态：{{ item.status }}</p>
|
|
|
- <p>结果：{{ item.result }}</p>
|
|
|
-
|
|
|
- <a-divider></a-divider>
|
|
|
-
|
|
|
- <p>创建时间：{{ item.createTime }}</p>
|
|
|
- <p>发起人：{{ item.createBy }}</p>
|
|
|
- </a-card>
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
-
|
|
|
- <!-- 我的待办 -->
|
|
|
- <a-tab-pane key="wait" tab="我的待办" force-render>
|
|
|
- <div v-for="item in todoList" :key="item.id">
|
|
|
- <a-card style="width: 100%;border-radius:20px;text-align:left;marginBottom:30px;border:none;">
|
|
|
- <p>所属流程：{{ item.processName }}</p>
|
|
|
- <p>任务名称：{{ item.name }}</p>
|
|
|
- <p>优先级：{{ item.priority }}</p>
|
|
|
-
|
|
|
- <a-divider></a-divider>
|
|
|
- <p>创建时间：{{ item.createTime }}</p>
|
|
|
- <p>发起人：{{ item.applyer }}</p>
|
|
|
- </a-card>
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
- <!-- 我的已办 -->
|
|
|
- <a-tab-pane key="done" tab="我的已办">
|
|
|
- <div v-for="item in doneList" :key="item.id">
|
|
|
- <a-card style="width: 100%;border-radius:20px;text-align:left;marginBottom:30px;border:none;">
|
|
|
- <p>任务名称：{{ item.name }}</p>
|
|
|
- <p>所属流程：{{ item.processName }}</p>
|
|
|
- <p>创建时间：{{ item.createTime }}</p>
|
|
|
-
|
|
|
- <a-divider></a-divider>
|
|
|
-
|
|
|
- <p>发起人：{{ item.applyer }}</p>
|
|
|
- <p>审批操作：{{ item.deleteReason }}</p>
|
|
|
- </a-card>
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
- </a-layout-content>
|
|
|
-
|
|
|
- <a-layout-footer style="text-align: center;color:rgba(0,0,0,.45)">
|
|
|
+ <div class="content">
|
|
|
+ <div class="main">
|
|
|
+ <a-layout-header style="padding:0;color:white;background:#347b98;">
|
|
|
+ <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>
|
|
|
+ </a-layout-header>
|
|
|
+
|
|
|
+ <!-- tabs 部分 -->
|
|
|
+
|
|
|
+ <a-layout-content>
|
|
|
+ <a-tabs default-active-key="wait" @change="callback" style="text-align: center;" className="todoTabs">
|
|
|
+ <!-- 我的申请 -->
|
|
|
+ <a-tab-pane key="apply" tab="我的申请">
|
|
|
+ <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);"
|
|
|
+ >
|
|
|
+ <p style="fontSize:16px;fontWeight:700;color092834;">
|
|
|
+ <a-icon type="highlight" class="cardIcon" />所属流程：{{ item.processName }}
|
|
|
+ </p>
|
|
|
+ <p>标题：{{ item.title }}</p>
|
|
|
+ <p>创建时间：{{ item.createTime }}</p>
|
|
|
+ <p>状态：{{ item.status }}</p>
|
|
|
+
|
|
|
+ <a-divider class="dividerBgcO"></a-divider>
|
|
|
+ <p style="float:left;">
|
|
|
+ 结果：
|
|
|
+ <span style="background:#fc600a;padding:4px 10px;borderRadius:6px;color:white;">{{
|
|
|
+ item.result
|
|
|
+ }}</span>
|
|
|
+ </p>
|
|
|
+ <p style="float:right;">发起人：{{ item.createBy }}</p>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+
|
|
|
+ <!-- 我的待办 -->
|
|
|
+ <a-tab-pane key="wait" tab="我的待办" force-render>
|
|
|
+ <div v-for="item in todoList" :key="item.id">
|
|
|
+ <a-card
|
|
|
+ style="width: 100%;borderRadius:20px;text-align:left;marginBottom:20px;border:none;color:#092834;
|
|
|
+ background-color:rgba(247, 224, 212,.8);
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <p style="fontSize:16px;fontWeight:700;color:#092834;">
|
|
|
+ <a-icon type="bell" class="cardIcon" />
|
|
|
+ 所属流程：{{ item.processName }}
|
|
|
+ </p>
|
|
|
+ <p>任务名称：{{ item.name }}</p>
|
|
|
+ <p>创建时间：{{ item.createTime }}</p>
|
|
|
+
|
|
|
+ <a-divider class="dividerBgcO"></a-divider>
|
|
|
+
|
|
|
+ <p style="float:left;">
|
|
|
+ 优先级：
|
|
|
+ <span style="background:#fc600a;padding:4px 10px;borderRadius:6px;color:white;">{{
|
|
|
+ item.priority
|
|
|
+ }}</span>
|
|
|
+ </p>
|
|
|
+ <p style="float:right;">发起人：{{ item.applyer }}</p>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+
|
|
|
+ <!-- 我的已办 -->
|
|
|
+ <a-tab-pane key="done" tab="我的已办">
|
|
|
+ <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);"
|
|
|
+ >
|
|
|
+ <p style="fontSize:16px;fontWeight:700;color:092834;">
|
|
|
+ <a-icon type="check" class="cardIcon" />
|
|
|
+ 任务名称：{{ item.name }}
|
|
|
+ </p>
|
|
|
+ <p>所属流程：{{ item.processName }}</p>
|
|
|
+ <p>创建时间：{{ item.createTime }}</p>
|
|
|
+
|
|
|
+ <a-divider class="dividerBgcO"></a-divider>
|
|
|
+
|
|
|
+ <p style="float:left;">
|
|
|
+ 审批操作：<span style="background:#fc600a;padding:4px 4px;borderRadius:6px;color:white;">{{
|
|
|
+ item.deleteReason
|
|
|
+ }}</span>
|
|
|
+ </p>
|
|
|
+ <p style="float:right;">发起人：{{ item.applyer }}</p>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </a-layout-content>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-layout-footer class="footer">
|
|
|
上海萃颠信息科技有限公司出品
|
|
|
</a-layout-footer>
|
|
|
</div>
|
|
|
@@ -73,14 +104,14 @@ export default {
|
|
|
components: {},
|
|
|
data () {
|
|
|
return {
|
|
|
+ todoList: [], // 待办列表
|
|
|
+ applyList: [], // 申请列表
|
|
|
+ doneList: [], // 已办列表
|
|
|
url: {
|
|
|
todoList: '/actTask/todoList', // 待办
|
|
|
list: '/actBusiness/listData', // 申请
|
|
|
doneList: '/actTask/doneList' // 已办
|
|
|
- },
|
|
|
- todoList: [], // 待办列表
|
|
|
- applyList: [], // 我的申请列表
|
|
|
- doneList: [] // 已办列表
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
|
@@ -94,42 +125,44 @@ export default {
|
|
|
callback (key) {
|
|
|
console.log(key)
|
|
|
if (key === 'apply') {
|
|
|
- console.log('拿到我的申请列表')
|
|
|
getAction(this.url.list).then(res => {
|
|
|
if (res.success) {
|
|
|
this.applyList = res.result || []
|
|
|
- console.log('我的申请列表', this.applyList)
|
|
|
+ console.log('申请列表', this.applyList)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
if (key === 'done') {
|
|
|
- console.log('拿到我的已办列表')
|
|
|
getAction(this.url.doneList).then(res => {
|
|
|
if (res.success) {
|
|
|
this.doneList = res.result || []
|
|
|
+ console.log('已办列表', this.doneList)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- // 拿到todoList
|
|
|
+ // 拿到 todoList
|
|
|
getDataList () {
|
|
|
- this.postFormAction(this.url.todoList, {}).then(res => {
|
|
|
+ getAction(this.url.todoList, {}).then(res => {
|
|
|
if (res.success) {
|
|
|
this.todoList = res.result || []
|
|
|
- console.log('todo页面打印出data结果是：', this.todoList)
|
|
|
+ console.log('待办列表', this.todoList)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
<style src="@assets/less/overwrite.less" lang="less" scoped></style>
|
|
|
<style lang="less" scoped>
|
|
|
-.main {
|
|
|
+.content {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- padding: 10px;
|
|
|
- background: rgba(202, 205, 209, 0.2);
|
|
|
+ background-color: rgba(247, 224, 212, 0.4);
|
|
|
+}
|
|
|
+.main {
|
|
|
+ padding: 14px;
|
|
|
}
|
|
|
// 单个事项卡片 最后一行
|
|
|
.dividerDown {
|
|
|
@@ -166,4 +199,10 @@ export default {
|
|
|
background-color: rgb(200, 245, 221);
|
|
|
color: rgb(22, 139, 85);
|
|
|
}
|
|
|
+.contain {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ min-height: 100%;
|
|
|
+ padding: 14px;
|
|
|
+}
|
|
|
</style>
|
liangyan0105