123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758 |
- <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>
|