cd-work-flow-web/src/views/dashboard/MyToDo.vue

<template>
  <div id="home">
    <!-- 第一行 -->
    <a-row :gutter="24" class="topCard">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :style="{ marginBottom: '10px' }">
        <a-row :gutter="20">
          <!-- 用户信息 -->
          <a-col :xs="24" :sm="12" :md="12" :lg="7" :style="{ marginBottom: '10px' }">
            <a-card title="我的" :bordered="false" class="clearfix topColItem">
              <div class="userImg fl" style="marginLeft:50px;">
                <img src="../../assets/user.jpg" alt="" width="50px" />
              </div>
              <div class="userInfo fl">
                <span class="department">{{ userInfo.realname }}</span>
                <span>账号：{{ userInfo.username }}</span>
                <span class="telphone">Tel：{{ userInfo.telphone }}</span>
              </div>
            </a-card>
          </a-col>
          <!-- 消息 -->
          <a-col :xs="24" :sm="12" :md="12" :lg="7" :style="{ marginBottom: '10px' }">
            <a-card title="消息" :bordered="false" class="msgBox clearfix topColItem">
              <div class="fl" style="marginLeft:50px;">
                <span> {{ todoList.length }}</span>
                <p>我的待办</p>
              </div>
              <div class="fl" style="marginLeft:50px;">
                <span>{{ msgTotal }}</span>
                <p>系统消息</p>
              </div>
            </a-card>
          </a-col>

          <!-- 日历 -->
          <a-col :xs="24" :sm="24" :md="24" :lg="10">
            <a-card title="日历" :bordered="false">
              <div>
                <a-calendar :fullscreen="false" />
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- OA 工作台 -->
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '20px' }">
        <a-card title="OA工作台" :bordered="false">
          <a-row :gutter="24">
            <!-- 按钮图标 -->
            <a-col :sm="24" :md="12" :xl="2" v-for="(item, index) in activeKeyAll" :key="index">
              <a-card size="small" :bordered="false">
                <a-row :gutter="24">
                  <a-col :sm="24" :md="24" :xl="24" style="margin-bottom:24px;text-align:center">
                    <a @click.prevent="aClick(item)">
                      <a-avatar shape="square" :size="64" :src="item.iconAddress" />
                    </a>
                  </a-col>

                  <!-- 按钮文字 -->
                  <a-col :sm="24" :md="24" :xl="24" style="margin-bottom:24px;text-align:center">
                    <h4>{{ item.name }}</h4>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 公告类 -->
    <a-row :gutter="24" class="news">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '10px' }">
        <a-row :gutter="20">
          <!-- 企业公告 -->
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="10" :style="{ marginBottom: '10px' }">
            <a-card title="企业公告" :bordered="false" class="notice newsColItem">
              <ul class="clearfix">
                <li>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
            </a-card>
          </a-col>
          <!-- 我的计划 -->
          <a-col :xs="24" :sm="14" :md="12" :lg="12" :xl="7" :style="{ marginBottom: '10px' }">
            <a-card title="我的计划" :bordered="false" class="plan newsColItem">
              <!-- 数据统计 -->
              <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-card>
          </a-col>
          <!-- 友情链接 -->
          <a-col :xs="24" :sm="10" :md="12" :lg="12" :xl="7">
            <a-card title="友情链接" :bordered="false" class="link newsColItem">
              <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-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 我的待办-->
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '20px' }">
        <a-card title="我的待办" :bordered="false">
          <a-row :gutter="24">
            <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '10px' }">
              <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" align="center">
                  <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-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 按钮弹框 -->
    <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false" width="90%">
      <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 li {
  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-fullcalendar-header {
  display: none;
}
// 线消息huode
/deep/ .ant-fullcalendar {
  border-top: none;
}

/deep/ .ant-fullcalendar-calendar-body {
  padding: 0;
}

/deep/ .ant-card-head-title {
  text-shadow: 1px 1px 2px rgb(170, 169, 169);
  color: #1890ff;
}

#home {
  // 第一行
  .topCard {
    .topColItem {
      height: 360px;
    }
    .userImg {
      width: 80px;
      height: 80px;
      img {
        border-radius: 6px;
        width: 100%;
      }
    }
    .userInfo {
      span {
        margin-left: 60px;
        display: block;
        line-height: 26px;
        .department {
          font-size: 14px;
          color: rgb(71, 70, 70);
        }
      }
    }
    // 消息
    .msgBox {
      span {
        font-size: 38px;
        color: #fa6b5c;
        text-shadow: 2px 2px 1px rgb(94, 94, 94);
      }
      p {
        font-size: 16px;
      }
    }
  }

  // OA工作台
  .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;
        }
      }
    }
  }

  // 公告
  .news {
    .newsColItem {
      height: 300px;
    }
    .notice {
      ul {
        margin: 0;
        padding: 0;
        li {
          line-height: 30px;
          a {
            font-size: 14px;
            color: #444;
            .department {
              margin-right: 10px;
            }
            .person {
              color: #333;
            }
            .time {
              color: rgb(164, 164, 164);
              margin: 0 4px 0 10px;
            }
          }
          a:hover {
            color: #1890ff;
          }
        }
      }
    }
    // 我的计划
    .plan {
      .total {
        border-bottom: 1px dashed #ccc;
        span {
          display: block;
          line-height: 40px;
          strong {
            color: #fa6b5c;
            text-decoration: underline;
            margin-right: 4px;
          }
        }
      }
      .tabsLinks {
        margin-top: 20px;
        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 {
      .linkBtn {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        button {
          border-radius: 2px;
          border: none;
          background-color: rgba(102, 155, 188, 0.7);
          width: calc((100% - 60px) / 2);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 10px;
          padding: 10px 0;
          letter-spacing: 1px;
          a {
            color: white;
            font-size: 12px;
          }
        }
        button:hover {
          background-color: #003049;
          color: white;
          box-shadow: 1px 1px 3px #333;
        }
      }
    }
  }
}
</style>