Browse Source

PC端 登录后新的HOME页(即MyToDo.vue)

liangyan0105 3 years ago
parent
commit
383f47124b

BIN
src/assets/date01.jpg


BIN
src/assets/user.jpg


+ 6 - 13
src/views/dashboard/IndexOa.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="24">
-      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
-        <a-card title="OA工作台" :bordered="false" >
+      <!-- <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }"> -->
+<!-- 重写PC端 home页,所以注销以下 2021/10/11 -->
+        
+        <!-- <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-avatar :size="64"
-                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-                    />-->
+
                     <a @click.prevent="aClick(item)" >
                       <a-avatar
                         shape="square"
@@ -23,17 +23,10 @@
                     <h4>{{item.name}}</h4>
                   </a-col>
                 </a-row>
-                <!-- <a-upload
-                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-                  list-type="picture-card"
-                  :file-list="fileList"
-                  :disabled="true"
-                >
-                </a-upload>-->
               </a-card>
             </a-col>
           </a-row>
-        </a-card>
+        </a-card> -->
       </a-col>
     </a-row>
     

+ 671 - 112
src/views/dashboard/MyToDo.vue

@@ -1,124 +1,296 @@
 <template>
-  <div class="page-header-index-wide">
-    <a-row :gutter="24">
-      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
-        <a-card title="我的待办" :bordered="false">
-          <a-row :gutter="24">
-            <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
-              <a-table
-                :scroll="scroll"
-                bordered
-                :loading="loading"
-                rowKey="id"
-                :dataSource="data"
-                :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="detail(r)" style="color: blue">申请详情</a>
+  <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" />
-              <span v-if="Boolean(r.isSuspended)" style="cursor: no-drop;color: #999999;" title="流程已被挂起,无法操作!">
-                通过 <a-divider type="vertical" />
-                驳回 <a-divider type="vertical" />
-                委托 <a-divider type="vertical" />
-              </span>
-              <span v-else>
-                <a href="javascript:void(0);" @click="passTask(r)" style="color: green">通过</a>
-                <a-divider type="vertical" />
-                <a href="javascript:void(0);" @click="backTask(r)" style="color: orange">驳回</a>
-                <a-divider type="vertical" />
-                <a href="javascript:void(0);" @click="delegateTask(r)" style="color: #00A0E9">委托</a>
-                <a-divider type="vertical" />
-              </span>
-              <a href="javascript:void(0);" @click="history(r)" style="color: #217dbb">历史</a>
-                  </template>-->
-                  <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 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 { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
-import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
+import { mapGetters } from 'vuex'
+import { getAction } from '@/api/manage'
 export default {
-  name: 'MyToDo',
+  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: 5,
+        pageSize: 3,
         pageSizeOptions: ['10', '20', '30'],
         showTotal: (total, range) => {
           return range[0] + '-' + range[1] + ' 共' + total + '条'
@@ -131,11 +303,16 @@ export default {
   },
   created() {
     this.getDataList()
+    this.getActiveKeyAll()
   },
   computed: {
+    // 系统消息计算
+    msgTotal() {
+      return parseInt(this.msg1Count) + parseInt(this.msg2Count)
+    },
     scroll: function() {
       var width = window.innerWidth
-      //ant-table
+      // ant-table
       let $antTable = window.document.getElementsByClassName('ant-table')
       if ($antTable[0]) {
         width = $antTable[0].clientWidth
@@ -152,30 +329,412 @@ export default {
       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.data = res.result || []
+          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 = 'ascend' == sorter.order ? 'asc' : 'desc'
+        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
       }
       this.ipagination = pagination
       // this.loadData();
     },
-    //去处理按钮
+
+    // 去处理按钮
     toDealWith() {
       this.$router.push({ path: '/activiti/todoManage' })
     }
   }
 }
-</script>
+</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>

+ 181 - 0
src/views/exception/OldMyTodo.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="page-header-index-wide">
+    <a-row :gutter="24">
+      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
+        <a-card title="我的待办" :bordered="false">
+          <a-row :gutter="24">
+            <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
+              <a-table
+                :scroll="scroll"
+                bordered
+                :loading="loading"
+                rowKey="id"
+                :dataSource="data"
+                :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="detail(r)" style="color: blue">申请详情</a>
+              <a-divider type="vertical" />
+              <span v-if="Boolean(r.isSuspended)" style="cursor: no-drop;color: #999999;" title="流程已被挂起,无法操作!">
+                通过 <a-divider type="vertical" />
+                驳回 <a-divider type="vertical" />
+                委托 <a-divider type="vertical" />
+              </span>
+              <span v-else>
+                <a href="javascript:void(0);" @click="passTask(r)" style="color: green">通过</a>
+                <a-divider type="vertical" />
+                <a href="javascript:void(0);" @click="backTask(r)" style="color: orange">驳回</a>
+                <a-divider type="vertical" />
+                <a href="javascript:void(0);" @click="delegateTask(r)" style="color: #00A0E9">委托</a>
+                <a-divider type="vertical" />
+              </span>
+              <a href="javascript:void(0);" @click="history(r)" style="color: #217dbb">历史</a>
+                  </template>-->
+                  <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>
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
+import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
+export default {
+    name: 'MyToDo',
+    data () {
+        return {
+            data: [], // 表单数据
+            total: 0, // 表单数据总数
+            ipagination: {
+                current: 1,
+                pageSize: 5,
+                pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                    return range[0] + '-' + range[1] + ' 共' + total + '条'
+                },
+                showQuickJumper: true,
+                showSizeChanger: true,
+                total: 0
+            }
+        }
+    },
+    created () {
+        this.getDataList()
+    },
+    computed: {
+        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
+        }
+    },
+    methods: {
+        getDataList () {
+            this.loading = true
+            this.postFormAction('/actTask/todoList', {}).then(res => {
+                this.loading = false
+                if (res.success) {
+                    this.data = res.result || []
+                    this.total = this.data.leading
+                }
+            })
+        },
+        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>