布局稍改

src/views/dashboard/MyToDo.vue

@@ -5,11 +5,11 @@
       <!-- 用户信息 -->
       <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" />
+          <a-tab-pane key="1" tab="我的" class="clearfix">
+            <div class="userImg fl">
+              <img src="../../assets/user.jpg" alt="" />
             </div>
-            <div class="userInfo" style="float:left">
+            <div class="userInfo fr">
               <span class="department">{{ userInfo.realname }}</span>
               <span>账号：{{ userInfo.username }}</span>
               <span class="telphone">Tel：{{ userInfo.telphone }}</span>
@@ -17,11 +17,10 @@
           </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">
+          <a-tab-pane key="1" tab="消息" class="msgBox clearfix">
             <div class="wait fl">
               <span> {{ todoList.length }}</span>
               <p>我的待办</p>
@@ -65,9 +64,9 @@
         <a-tabs default-active-key="1">
           <a-tab-pane key="1" tab="企业公告">
             <div class="contain">
-              <ul>
+              <ul class="clearfix">
                 <li class="fl">
-                  <a href="https://m.thepaper.cn/baijiahao_14855630">
+                  <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>
@@ -76,7 +75,7 @@
                 </li>
 
                 <li class="fl">
-                  <a href="https://baijiahao.baidu.com/s?id=1713375072968520817&wfr=spider&for=pc">
+                  <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>
@@ -85,7 +84,7 @@
                 </li>
 
                 <li class="fl">
-                  <a href="https://news.sina.cn/kx/2021-10-12/detail-iktzscyx9169344.d.html">
+                  <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>
@@ -94,7 +93,7 @@
                 </li>
 
                 <li class="fl">
-                  <a href="https://baijiahao.baidu.com/s?id=1713366904170468936&wfr=spider&for=pc">
+                  <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>
@@ -103,7 +102,7 @@
                 </li>
 
                 <li class="fl">
-                  <a href="https://haokan.baidu.com/v?pd=wisenatural&vid=15789314381003157969">
+                  <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>
@@ -121,7 +120,7 @@
         <a-tabs default-active-key="1">
           <a-tab-pane key="1" tab="我的计划">
             <!-- 数据显示 -->
-            <div class="total">
+            <div class="total clearfix">
               <div class="left fl">
                 <span>上月我的计划：<strong>0</strong>份</span>
                 <span>我的计划：<strong>1</strong>份</span>
@@ -246,8 +245,9 @@
         </a-tabs>
       </a-col>
     </a-row>
+
     <!-- 按钮弹框 -->
-    <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false">
+    <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false" width="100%">
       <component
         :disabled="lcModal.disabled"
         v-if="lcModal.visible"
@@ -450,6 +450,22 @@ a {
 .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;
 }
@@ -508,20 +524,26 @@ a {
 }
 #home {
   .topRow {
+    width: 100%;
     background-color: #f0f2f5;
-    height: 280px;
-    margin-bottom: 30px;
+    // height: 280px;
+    // margin-bottom: 30px;
+    // height: 360px;
     .colItem {
-      height: 280px;
+      // height: 280px;
     }
     .user {
-      padding: 20px;
-      margin-right: 24px;
+      padding: 10px;
       background-color: white;
+      margin-right: 1%;
       .userImg {
-        margin: 0 20px 0 20px;
+        // margin: 0 20px 0 20px;
+        width: 80px;
+        height: 80px;
         img {
           border-radius: 6px;
+          width: 100%;
+          // display: block;
         }
       }
 
@@ -545,7 +567,7 @@ a {
     .messages {
       padding: 20px;
       background-color: white;
-      margin-right: 20px;
+      margin-right: 1%;
       .msgBox {
         padding: 0 20px;
         span {
@@ -564,24 +586,35 @@ a {
     .oaBtn {
       background-color: white;
       padding: 20px;
-      margin-right: 20px;
+      margin-right: 1%;
       .oaButton {
         display: flex;
         flex-flow: row wrap;
         text-align: center;
         .oaItem {
           line-height: 0px;
-          width: 25%;
+          // width: 25%;
+          width: calc((100% - 10px) / 3);
+          justify-content: space-around;
+          flex-direction: column;
+          align-items: center;
           margin-bottom: 4px;
+          margin-right: 1px;
           // 图
           span {
+            margin: 0 aotu;
+            // background-color: red;
             border: transparent;
+
             display: flex;
             align-items: center;
             justify-content: center;
+            position: relative;
             img {
               width: 34px;
               height: 34px;
+              // margin: 0 auto;
+              // width: 100%;
             }
           }
           // 文字
@@ -611,11 +644,11 @@ a {
 
   .news {
     background-color: #f0f2f5;
-    margin-bottom: 30px;
+    margin: 20px 0;
     .notice {
       background-color: white;
       padding: 20px;
-      margin-right: 32px;
+      margin-right: 1.22%;
       .contain {
         ul {
           margin: 0;
@@ -656,9 +689,9 @@ a {
     .plan {
       padding: 20px;
       background-color: white;
-      margin-right: 32px;
+      margin-right: 1.22%;
       .total {
-        height: 160px;
+        // height: 160px;
         // background-color: #e7c1bd;
         border-bottom: 1px dashed #ccc;
         span {
@@ -677,7 +710,7 @@ a {
         }
       }
       .tabsLinks {
-        height: 50px;
+        // height: 50px;
         margin: 30px 0 0 20px;
         // background-color: rgb(138, 191, 226);
         a {

src/views/dashboard/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>