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

<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="我的">
            <div class="userImg" style="float:left">
              <img src="../../assets/user.jpg" alt="" width="100px" />
            </div>
            <div class="userInfo" style="float:left">
              <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">
            <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 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>
                <li class="fl">
                  <a href="https://m.thepaper.cn/baijiahao_14855630">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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">
              <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">
      <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', 'userInfo']),

    // 代办数据
    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;
}
/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-color: orange;
  background: url('../../assets/date01.jpg');
  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 {
  // background-color: red;
  padding: 0;
}
/deep/ .ant-card-body {
  // background-color: blue;
  padding: 0;
}
/deep/ .ant-tabs-nav .ant-tabs-tab-active {
  color: #fa6b5c;
  font-size: 16px;
}
/deep/ .ant-tabs-ink-bar {
  height: 4px;
  background: #fa6b5c;
  padding: 0 4px;
}
/deep/ .ant-tabs-bar {
  margin-bottom: 30px;
}
#home {
  .topRow {
    background-color: #f0f2f5;
    height: 280px;
    margin-bottom: 30px;
    .colItem {
      height: 280px;
    }
    .user {
      padding: 20px;
      margin-right: 24px;
      background-color: white;
      .userImg {
        margin: 0 20px 0 20px;
        img {
          border-radius: 6px;
        }
      }

      // 用户信息
      .userInfo {
        font-size: 14px;
        background-color: white;
        // 用户
        span {
          display: block;
          line-height: 40px;
        }
        .department {
          font-size: 14px;
          color: rgb(71, 70, 70);
        }
      }
    }

    // 消息
    .messages {
      padding: 20px;
      background-color: white;
      margin-right: 20px;
      .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: 20px;
      .oaButton {
        display: flex;
        flex-flow: row wrap;
        text-align: center;
        .oaItem {
          line-height: 0px;
          width: 25%;
          margin-bottom: 4px;
          // 图
          span {
            border: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            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-bottom: 30px;
    .notice {
      background-color: white;
      padding: 20px;
      margin-right: 32px;
      .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: 32px;
      .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>