<template> <div id="home"> <!-- 第一行 --> <a-row type="flex" class="topRow"> <!-- 用户信息 --> <a-col :span="4" :order="1" class="user colItem"> <a-tabs default-active-key="1"> <a-tab-pane key="1" tab="我的" class="clearfix"> <div class="userImg fl"> <img src="../../assets/user.jpg" alt="" /> </div> <div class="userInfo fr"> <span class="department">{{ userInfo.realname }}</span> <span>账号:{{ userInfo.username }}</span> <span class="telphone">Tel:{{ userInfo.telphone }}</span> </div> </a-tab-pane> </a-tabs> </a-col> <!-- 消息 --> <a-col :span="4" :order="2" class="messages colItem"> <a-tabs default-active-key="1"> <a-tab-pane key="1" tab="消息" class="msgBox clearfix"> <div class="wait fl"> <span> {{ todoList.length }}</span> <p>我的待办</p> </div> <div class="sysMsg fr"> <span>{{ msgTotal }}</span> <p>系统消息</p> </div> </a-tab-pane> </a-tabs> </a-col> <!-- OA工作台按钮 --> <a-col :span="8" :order="3" class="oaBtn colItem"> <a-tabs default-active-key="1"> <a-tab-pane key="1" tab="OA工作台"> <div class="oaButton"> <a class="oaItem" v-for="(item, index) in activeKeyAll" :key="index.id" @click.prevent="aClick(item)"> <span> <img :src="item.iconAddress" /> </span> <p>{{ item.name }}</p> </a> </div> </a-tab-pane> </a-tabs> </a-col> <!-- 日历 --> <a-col :span="7" :order="4" class="date colItem"> <div> <a-calendar :fullscreen="false" /> </div> </a-col> </a-row> <a-row class="oaTable" :guatter="24"> </a-row> <!-- 新闻类 --> <a-row type="flex" class="news"> <!-- 企业公告 --> <a-col :span="9" :order="1" class="notice"> <a-tabs default-active-key="1"> <a-tab-pane key="1" tab="企业公告"> <div class="contain"> <ul class="clearfix"> <li class="fl"> <a href="https://m.thepaper.cn/baijiahao_14855630" class="clearfix"> <span class="department fl">[人事]</span> <span class="info fl">王健林称万达高管全部换乘红旗汽车</span> <span class="time fr">2021-10-11</span> <span class="person fr">王健林</span> </a> </li> <li class="fl"> <a href="https://baijiahao.baidu.com/s?id=1713375072968520817&wfr=spider&for=pc" class="clearfix"> <span class="department fl">[运动]</span> <span class="info fl">德国成为首支晋级卡塔尔世界杯球队</span> <span class="time fr">2021-10-12</span> <span class="person fr">卡塔尔</span> </a> </li> <li class="fl"> <a href="https://news.sina.cn/kx/2021-10-12/detail-iktzscyx9169344.d.html" class="clearfix"> <span class="department fl">[财务]</span> <span class="info fl">浙江女子围观宰鸭后确诊鹦鹉热</span> <span class="time fr">2021-10-11</span> <span class="person fr">鹦鹉</span> </a> </li> <li class="fl"> <a href="https://baijiahao.baidu.com/s?id=1713366904170468936&wfr=spider&for=pc" class="clearfix"> <span class="department fl">[人事]</span> <span class="info fl">李铁:有没有自己的球迷是巨大区别</span> <span class="time fr">2021-10-11</span> <span class="person fr">李铁</span> </a> </li> <li class="fl"> <a href="https://haokan.baidu.com/v?pd=wisenatural&vid=15789314381003157969" class="clearfix"> <span class="department fl">[人事]</span> <span class="info fl">今年为什么会出现南旱北涝</span> <span class="time fr">2021-10-11</span> <span class="person fr">某某</span> </a> </li> </ul> </div> </a-tab-pane> </a-tabs> </a-col> <!-- 我的计划 --> <a-col :span="7" :order="2" class="plan"> <a-tabs default-active-key="1"> <a-tab-pane key="1" tab="我的计划"> <!-- 数据显示 --> <div class="total clearfix"> <div class="left fl"> <span>上月我的计划:<strong>0</strong>份</span> <span>我的计划:<strong>1</strong>份</span> <span>已阅计划:<strong>1</strong>份</span> </div> <div class="right fr"> <span>上月他人计划:<strong>0</strong>份</span> <span>他人计划:<strong>2</strong>份</span> <span>已回计划:<strong>0</strong>份</span> </div> </div> <div class="tabsLinks"> <a href="">我的计划</a> <a-divider type="vertical" /> <a href="">计划管理</a> <a-divider type="vertical" /> <a href="">计划模块</a> </div> </a-tab-pane> </a-tabs> </a-col> <!-- 友情链接 --> <a-col :span="7" :order="3" class="link"> <a-tabs default-active-key="1"> <a-tab-pane key="1" tab="友情链接"> <div class="linkBtn"> <button><a href="https://www.yonyou.com/">用友</a></button> <button><a href="https://hc.yonyou.com/product.php?id=5">U8</a></button> <button><a href="http://www.dakabg.com/">哒咔办公</a></button> <button><a href="https://www.dingtalk.com/?lwfrom=2017120202091367000000111&source=1001">钉钉</a></button> <button><a href="https://www.11467.com/qiye/38026153.htm">品医</a></button> <button><a href="https://www.antgroup.com/">蚂蚁集团</a></button> </div> </a-tab-pane> </a-tabs> </a-col> </a-row> <!-- 我的待办表 --> <a-row :gutter="24" class="todoTable"> <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }" class="tableInfo"> <a-tabs default-active-key="1"> <a-tab-pane key="1" tab="我的待办"> <a-table :scroll="scroll" bordered :loading="loading" rowKey="id" :dataSource="todoList" :pagination="ipagination" @change="handleTableChange" ref="table" size="small" > <a-table-column title="#" :width="50"> <template slot-scope="t, r, i"> <span>{{ i + 1 }}</span> </template> </a-table-column> <a-table-column title="任务名称" data-index="name" :width="150" align="center"> <template slot-scope="t"> <span>{{ t }}</span> </template> </a-table-column> <a-table-column title="所属流程" data-index="processName" :width="150" align="center"> <template slot-scope="t"> <span>{{ t }}</span> </template> </a-table-column> <a-table-column title="委托代办人" data-index="owner" align="center" :width="150"> <template slot-scope="t"> <span>{{ t }}</span> </template> </a-table-column> <a-table-column title="流程发起人" data-index="applyer" :width="150" align="center"> <template slot-scope="t"> <span>{{ t }}</span> </template> </a-table-column> <a-table-column title="优先级" data-index="priority" :width="110" align="center" key="so" :sorter="(a, b) => a.priority - b.priority" > <template slot-scope="t"> <span v-if="t == 0" style="color: green;">普通</span> <span v-else-if="t == 1" style="color: orange;">重要</span> <span v-else-if="t == 2" style="color: red;">紧急</span> <span v-else style="color: #999;">无</span> </template> </a-table-column> <a-table-column title="状态" data-index="isSuspended" :width="100" align="center" key="z" :sorter="(a, b) => (Boolean(a.isSuspended) ? 0 : 1 - Boolean(b.isSuspended) ? 0 : 1)" > <template slot-scope="t"> <span v-if="!Boolean(t)" style="color: green;">已激活</span> <span v-if="Boolean(t)" style="color: orange;">已挂起</span> </template> </a-table-column> <a-table-column title="创建时间" data-index="createTime" :width="200" align="center"> <template slot-scope="t"> <span>{{ t }}</span> </template> </a-table-column> <a-table-column title="操作" data-index align="center" :width="100"> <template slot-scope="t, r, i"> <a href="javascript:void(0);" @click="toDealWith()" style="color: blue">去处理</a> </template> </a-table-column> </a-table> </a-tab-pane> </a-tabs> </a-col> </a-row> <!-- 按钮弹框 --> <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false" width="100%"> <component :disabled="lcModal.disabled" v-if="lcModal.visible" :is="lcModal.formComponent" :processData="lcModal.processData" :isNew="lcModal.isNew" @afterSubmit="afterSub" @close=";(lcModal.visible = false), (lcModal.disabled = false)" > </component> </a-modal> </div> </template> <script> import { mapGetters } from 'vuex' import { getAction } from '@/api/manage' export default { name: 'Home', data() { return { userInfo: this.$store.getters.userInfo, todoList: [], activeKeyAll: [], msg1Count: '0', msg2Count: '0', url: { listCementByUser: '/sys/annountCement/listByUser' }, //按钮弹框 lcModal: { title: '', visible: false, disabled: false, formComponent: null, isNew: false }, // data: [], // 表单数据 total: 0, // 表单数据总数 ipagination: { current: 1, pageSize: 3, pageSizeOptions: ['10', '20', '30'], showTotal: (total, range) => { return range[0] + '-' + range[1] + ' 共' + total + '条' }, showQuickJumper: true, showSizeChanger: true, total: 0 } } }, created() { this.getDataList() this.getActiveKeyAll() }, computed: { // 系统消息计算 msgTotal() { return parseInt(this.msg1Count) + parseInt(this.msg2Count) }, scroll: function() { var width = window.innerWidth // ant-table let $antTable = window.document.getElementsByClassName('ant-table') if ($antTable[0]) { width = $antTable[0].clientWidth } console.log('$antTable', $antTable) return { // x:'max-content', x: 1160, y: window.innerHeight / 2 } }, innerHeight: function() { var innerHeight = window.innerHeight return innerHeight } }, mounted() { this.loadData() }, methods: { loadData() { try { // 获取系统消息 getAction(this.url.listCementByUser) .then(res => { if (res.success) { this.msg1Count = res.result.anntMsgTotal this.msg2Count = res.result.sysMsgTotal console.log(this.msg2Count) } }) .catch(error => { console.log('系统消息通知异常', error) // 这行打印permissionName is undefined this.stopTimer = true console.log('清理timer') }) } catch (err) { this.stopTimer = true console.log('通知异常', err) } }, ...mapGetters(['nickname', 'avatar']), // 代办数据 getDataList() { this.loading = true this.postFormAction('/actTask/todoList', {}).then(res => { this.loading = false if (res.success) { this.todoList = res.result || [] console.log('首页 我的待办数字:', this.todoList.length) this.total = this.data.leading console.log(this.data) } }) }, // 获取 OA 按钮 getActiveKeyAll() { this.postFormAction('/activiti_process/listData', { status: 1, roles: true }).then(res => { this.activeKeyAll = [] if (res.success) { var result = res.result || [] if (result.length > 0) { this.activeKeyAll = result // this.activeKeyAll.push.apply(this.activeKeyAll,result); // console.log(this.activeKeyAll) console.log('OA 4个按钮被渲染') } } }) }, //OA图标点击事件 aClick(v) { //点击的该项按钮 console.log(v) // this.$refs.modal.add("1") if (!v.routeName) { this.$message.warning('该流程信息未配置表单,请联系开发人员!') return } if (v.routeName.indexOf('外部表单') != -1) { alert('调用其他项目页面') } else if (v.routeName.indexOf('自定义') != -1) { this.lcModal.disabled = false let com = { component: () => import(`@/views/activiti/form/demoForm2`) } this.lcModal.formComponent = com.component this.lcModal.title = '发起流程:' + v.name this.lcModal.isNew = true this.lcModal.processData = v this.lcModal.visible = true } else { this.lcModal.disabled = false this.lcModal.formComponent = this.getFormComponent(v.routeName).component this.lcModal.title = '发起流程:' + v.name this.lcModal.isNew = true this.lcModal.processData = v this.lcModal.visible = true } console.log('发起', v) // this.getDataList() }, //提交后 afterSub(formData) { this.lcModal.visible = false }, // 分页、排序、筛选变化时触发 handleTableChange(pagination, filters, sorter) { if (Object.keys(sorter).length > 0) { this.isorter.column = sorter.field this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc' } this.ipagination = pagination // this.loadData(); }, // 去处理按钮 toDealWith() { this.$router.push({ path: '/activiti/todoManage' }) } } } </script> <style lang="less" scoped> ul { list-style: none; } a { text-decoration: none; } .fl { float: left; } .fr { float: right; } /*清除浮动*/ .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; overflow: hidden; } .clearfix { *zoom: 1; } /deep/ .ant-row-flex { background-color: white; } // 年月选择消失 /deep/ .ant-fullcalendar-header { display: none; } // 线消息 /deep/ .ant-fullcalendar { border-top: none; } /deep/ .ant-fullcalendar-calendar-body { border-radius: 8px; background-size: cover; background-position: center; opacity: 0.8; -webkit-font-smoothing: antialiased; } /deep/ .ant-fullcalendar-calendar-body { padding: 0; } /deep/ .ant-fullcalendar { font-weight: 700; } /deep/ .ant-fullcalendar-column-header { padding-top: 10px; } /deep/ .ant-fullcalendar table { height: 237px; } /deep/ .ant-card-head { padding: 0; } /deep/ .ant-card-head-title { padding: 0; } /deep/ .ant-tabs-nav .ant-tabs-tab-active { font-size: 16px; } /deep/ .ant-tabs-ink-bar { height: 4px; padding: 0 4px; } /deep/ .ant-tabs-bar { margin-bottom: 30px; } #home { .topRow { width: 100%; background-color: #f0f2f5; .user { padding: 10px; background-color: white; margin-right: 1%; .userImg { width: 80px; height: 80px; img { border-radius: 6px; width: 100%; } } // 用户信息 .userInfo { font-size: 14px; background-color: white; // 用户 span { display: block; line-height: 32px; } .department { font-size: 14px; color: rgb(71, 70, 70); } } } // 消息 .messages { padding: 20px; background-color: white; margin-right: 1%; .msgBox { padding: 0 20px; span { font-size: 38px; color: #fa6b5c; text-shadow: 2px 2px 1px rgb(94, 94, 94); } p { margin-top: 10px; font-size: 16px; } } } // 工作台按钮 .oaBtn { background-color: white; padding: 20px; margin-right: 1%; .oaButton { display: flex; flex-flow: row wrap; text-align: center; .oaItem { line-height: 0px; // width: 25%; width: calc((100% - 100px) / 3); justify-content: space-around; flex-direction: column; align-items: center; margin-bottom: 10px; margin-right: 1px; // 图 span { margin: 0 aotu; border: transparent; display: flex; align-items: center; justify-content: center; position: relative; img { width: 34px; height: 34px; } } // 文字 p { margin-top: 14px; font-size: 14px; color: rgb(128, 127, 127); font-weight: 400; letter-spacing: 1px; } } } } .date { padding: 20px; background-color: white; } // 右分割线 /deep/ .ant-divider { height: 240px; width: 2px; background-color: #eaeaea; float: right; } } .news { background-color: #f0f2f5; margin: 20px 0; .notice { background-color: white; padding: 20px; margin-right: 1.22%; .contain { ul { margin: 0; padding: 0; padding-left: 20px; width: 100%; li { width: 100%; display: inline-block; // background-color: #fa6b5c; line-height: 40px; a { font-size: 14px; color: #444; .department { margin-right: 12px; } .info { // margin-right:12px; } .person { color: #333; } .time { color: rgb(164, 164, 164); margin: 0 12px 0 20px; } } a:hover { color: #1890ff; } } } } } // 我的计划 .plan { padding: 20px; background-color: white; margin-right: 1.22%; .total { // height: 160px; // background-color: #e7c1bd; border-bottom: 1px dashed #ccc; span { display: block; line-height: 40px; strong { text-decoration: underline; margin-right: 6px; } } .left { margin: 0 0 0 30px; } .right { margin: 0 30px 0 0; } } .tabsLinks { // height: 50px; margin: 30px 0 0 20px; // background-color: rgb(138, 191, 226); a { color: rgb(23, 119, 184); margin: 0 6px; } a:hover { color: #fa6b5c; } /deep/ .ant-divider, .ant-divider-vertical { width: 2px; background-color: rgb(200, 200, 200); } } } // 友情链接 .link { padding: 20px; background-color: white; .linkBtn { padding: 10px 30px; display: flex; flex-flow: row wrap; text-align: center; button { width: calc((100% - 2px) / 4); border-radius: 4px; border: none; display: flex; margin: 10px 8px; justify-content: space-around; align-items: center; background-color: rgba(102, 155, 188, 0.8); letter-spacing: 1px; padding: 6px 10px; a { color: white; font-size: 12px; } } button:hover { background-color: #003049; color: white; box-shadow: 1px 1px 3px #333; } } } } .todoTable { background-color: #f0f2f5; padding: 20px; .tableInfo { background-color: white; } } } </style>