/** * @Description: 我的任务-模块页面 * @author wx * @date 2022/5/26 */ <template> <div class="my-custom-module" @click="goModule(module)"> <div class="custom-module-title">{{ module.title }}</div> <div class="custom-module-content"> <div class="custom-module-content-item"> <img :src="module.icon" alt=""> </div> <div class="custom-module-content-item custom-module-content-item-total"> {{ module.total }} </div> </div> <div v-if="module.list" class="custom-module-bottom"> <div v-for="item in module.list" :key="item.name" class="custom-module-bottom-item" > <span class="custom-module-bottom-item-name">{{ item.name }}</span><span>{{ item.value }}</span> </div> </div> </div> </template> <script> import Vue from 'vue' import { countOfType } from '@/api/workspace.js' export default { props: { }, data() { return { module: {}, showDelete: false } }, mounted() { this.getCustomModules() }, methods: { getCustomModules() { const params = { assignee: localStorage.getItem('userId') } countOfType(params).then(res => { this.module = { id: 1, title: '任务', icon: '/images/navagations/task-icon.png', total: res.items.todoTask + res.items.unClaimedTask, name: '我的任务', route: 'dee-task-center/workflow/task-center/home', serverName: 'dee-task-center', showMenu: false, list: [ { name: '待办', value: res.items.todoTask }, { name: '待领取', value: res.items.unClaimedTask } ] } }) }, async goModule(module) { if ( module.serverName && !Vue.prototype.$loadModule.hasOwnProperty(module.serverName) ) { await this.$utils.loadMicroModule(module.serverName) this.$router.push({ path: module.route, query: { title: module.name } }) } else { this.$router.push({ path: module.route, query: { title: module.name, showMenu: module.showMenu } }) } this.$store.dispatch('menu/activeModel', { appId: 'todoTask', pageInfo: { path: '/dee-task-center/workflow/task-center/home' } }) this.$store.dispatch('app/toggleSideBar') } } } </script> <style lang="scss"> .my-custom-module { height: 173px; min-width: 179px; background-color: #fff; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; border-radius: 4px; .custom-module-title { color: #6f6f6f; font-size: 24px; font-weight: 500; text-align: left; } .custom-module-content { display: flex; align-items: center; .custom-module-content-item { flex: 1; text-align: right; img { height: 28px; } } .custom-module-content-item-total { color: #329d25; font-size: 38px; font-weight: 500; } } } </style>