|
|
@@ -1,7 +1,67 @@
|
|
|
<template>
|
|
|
<div class="flex-column-page-wrap pageWrap">
|
|
|
<div style="padding: 10px">
|
|
|
- <el-card class="box-card">
|
|
|
+ <!-- 快捷入口 -->
|
|
|
+ <el-row :gutter="10" style="margin-bottom: 10px">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="left-item-box box">
|
|
|
+ <div class="launch-todo" @click="jumpOtherPage('待审批')">
|
|
|
+ <el-row :gutter="5">
|
|
|
+ <el-col :span="12" class="mt-icon">
|
|
|
+ <img style="width: 45px; height: 45px" src="@/assets/icons/processInfo/lingdang.svg" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="flex flex-v">
|
|
|
+ <div class="mt-title">待审批的</div>
|
|
|
+ <div class="mt-value">{{ countNum }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <div class="right-item-box box">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="app-task" @click="jumpOtherPage('我的申请')">
|
|
|
+ <div class="app-task-icon">
|
|
|
+ <img style="width: 30px; height: 30px" src="@/assets/icons/processInfo/tuiguangzhong.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="app-task-title">我申请的</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="app-task" @click="jumpOtherPage('我收到的')">
|
|
|
+ <div class="app-task-icon">
|
|
|
+ <img style="width: 30px; height: 30px" src="@/assets/icons/processInfo/horn.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="app-task-title">我收到的</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="app-task" @click="jumpOtherPage('认领任务')">
|
|
|
+ <div class="app-task-icon">
|
|
|
+ <img style="width: 30px; height: 30px" src="@/assets/icons/processInfo/lingqu.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="app-task-title">认领任务</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="app-task" @click="jumpOtherPage('已审批')">
|
|
|
+ <div class="app-task-icon">
|
|
|
+ <img style="width: 30px; height: 30px" src="@/assets/icons/processInfo/wanjie.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="app-task-title">已审批的</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 审批列表 -->
|
|
|
+ <el-card class="box-card" shadow="never">
|
|
|
<el-collapse v-model="activeNames" @change="handleChange">
|
|
|
<el-collapse-item v-for="item in startList" :key="item.categoryId" :title="item.categoryName" :name="item.categoryName">
|
|
|
<el-row>
|
|
|
@@ -41,15 +101,18 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup name="flow_modal">
|
|
|
+import router from '@/router'
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
import ItemDrawer from './ItemDrawer.vue'
|
|
|
const input = ref('')
|
|
|
const activeNames = ref(['1'])
|
|
|
import model from '@/api/flow/process'
|
|
|
+import { countTaskApi } from '@/api/flow/processTask'
|
|
|
import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
|
|
|
const startList = ref([])
|
|
|
const drawerVisible = ref(false)
|
|
|
const record = ref({})
|
|
|
+const countNum = ref(0)
|
|
|
const handleChange = val => {
|
|
|
console.log(val)
|
|
|
}
|
|
|
@@ -61,12 +124,31 @@ const listEv = async () => {
|
|
|
activeNames.value = startList.value.map(v => v.categoryName)
|
|
|
}
|
|
|
|
|
|
+// 我的待办数量
|
|
|
+const getCountTask = async () => {
|
|
|
+ const count = await countTaskApi()
|
|
|
+ countNum.value = count
|
|
|
+}
|
|
|
+
|
|
|
+// 跳转页面
|
|
|
+const jumpOtherPage = item => {
|
|
|
+ const obj = {
|
|
|
+ 待审批: '/approve/pending-approval',
|
|
|
+ 我的申请: '/approve/my-application',
|
|
|
+ 我收到的: '/approve/my-received',
|
|
|
+ 认领任务: '/approve/pending-claim',
|
|
|
+ 已审批: '/approve/approved'
|
|
|
+ }
|
|
|
+ router.push(obj[item])
|
|
|
+}
|
|
|
+
|
|
|
const testEv = process => {
|
|
|
record.value = process
|
|
|
drawerVisible.value = true
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
listEv()
|
|
|
+ getCountTask()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
@@ -74,7 +156,11 @@ onMounted(() => {
|
|
|
.pageWrap {
|
|
|
//height: 100%;
|
|
|
//overflow-x: scroll;
|
|
|
- //background: #fff;
|
|
|
+ background: var(--el-bg-color-page);
|
|
|
+ .box {
|
|
|
+ padding: 15px;
|
|
|
+ background: var(--el-bg-color);
|
|
|
+ }
|
|
|
}
|
|
|
.card-in {
|
|
|
height: 100px;
|
|
|
@@ -132,4 +218,41 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.mt-icon {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80px;
|
|
|
+ font-size: 42px;
|
|
|
+}
|
|
|
+.launch-todo {
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f4f3;
|
|
|
+ }
|
|
|
+ .mt-title {
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 10px 0 0;
|
|
|
+ }
|
|
|
+ .mt-value {
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+}
|
|
|
+.app-task {
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 0 15px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f4f3;
|
|
|
+ }
|
|
|
+ &-icon {
|
|
|
+ font-size: 32px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ &-title {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
luoyali
