[首页]布局、[ 我的待办、申请、已办] 轮播表 、[oa工作台]

src/assets/less/mytodo.css

@@ -68,19 +68,18 @@ a {
   color: #333;
   font-size: 16px;
 }
-#home .topCard .topColItem {
-  height: 380px;
-}
 #home .topCard .userImg {
   width: 80px;
   height: 80px;
+  line-height: 30px;
+  margin-right: 20px;
 }
 #home .topCard .userImg img {
   border-radius: 6px;
   width: 100%;
 }
 #home .topCard .userInfo span {
-  margin-left: 60px;
+  margin-left: 40px;
   display: block;
   line-height: 26px;
 }
@@ -88,110 +87,82 @@ a {
   font-size: 14px;
   color: #474646;
 }
-#home .topCard .msgBox span {
-  font-size: 38px;
+#home .topCard .msgBox {
+  text-align: center;
+  background-color: rgba(224, 220, 220, 0.4);
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+#home .topCard .msgBox em {
+  margin: 0 10px;
+  font-style: normal;
+  margin-right: 50px;
+}
+#home .topCard .msgBox em span {
+  font-size: 30px;
   color: #fa6b5c;
-  text-shadow: 2px 2px 1px #5e5e5e;
+  font-weight: 700;
 }
-#home .topCard .msgBox p {
+#home .topCard .msgBox em p {
   font-size: 16px;
 }
-#home .oaBtn {
-  background-color: white;
-  padding: 20px;
-  margin-right: 1%;
-}
-#home .oaBtn .oaButton {
-  display: flex;
-  flex-flow: row wrap;
+#home .oaIcon {
   text-align: center;
+  margin-right: 30px;
+  float: left;
 }
-#home .oaBtn .oaButton .oaItem {
-  line-height: 0px;
-  width: calc((100% - 100px) / 3);
-  justify-content: space-around;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 10px;
-  margin-right: 1px;
-}
-#home .oaBtn .oaButton .oaItem span {
-  margin: 0 aotu;
-  border: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-#home .oaBtn .oaButton .oaItem span img {
-  width: 34px;
-  height: 34px;
-}
-#home .oaBtn .oaButton .oaItem p {
-  margin-top: 14px;
-  font-size: 14px;
-  color: #807f7f;
-  font-weight: 400;
-  letter-spacing: 1px;
-}
-#home .news .newsColItem {
-  height: 400px;
+#home .oaIcon h4 {
+  margin-top: 10px;
 }
-#home .news .notice ul {
+.news .notice ul {
   margin: 0;
   padding: 0;
 }
-#home .news .notice ul li {
+.news .notice ul li {
   line-height: 30px;
 }
-#home .news .notice ul li a {
+.news .notice ul li a {
   font-size: 14px;
   color: #444;
 }
-#home .news .notice ul li a .department {
+.news .notice ul li a .department {
   margin-right: 10px;
 }
-#home .news .notice ul li a .createBy {
+.news .notice ul li a .createBy {
   color: #333;
 }
-#home .news .notice ul li a .createTime {
+.news .notice ul li a .createTime {
   color: #a4a4a4;
   margin: 0 4px 0 20px;
 }
-#home .news .notice ul li a:hover {
+.news .notice ul li a:hover {
   color: #1890ff;
 }
-#home .news .plan .total span {
+.news .total span {
   display: block;
   line-height: 40px;
 }
-#home .news .plan .total span strong {
+.news .total span strong {
   color: #fa6b5c;
   text-decoration: underline;
   margin-right: 4px;
 }
-#home .news .link .linkBtn {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
+.news .links /deep/ .ant-card-body {
+  padding: 20px;
 }
-#home .news .link .linkBtn button {
+.news .links button {
   border-radius: 2px;
   border: none;
+  margin-right: 4px;
   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;
 }
-#home .news .link .linkBtn button a {
+.news .links button a {
   color: white;
-  font-size: 12px;
+  font-size: 18px;
+  padding: 10px 14px;
 }
-#home .news .link .linkBtn button:hover {
+.news .links button:hover {
   background-color: #003049;
   color: white;
   box-shadow: 1px 1px 3px #333;

src/assets/less/mytodo.less

@@ -85,11 +85,13 @@ a {
   .topCard {
     // 等高设置
     .topColItem {
-      height: 380px;
+      // height: 380px;
     }
     .userImg {
       width: 80px;
       height: 80px;
+      line-height: 30px;
+      margin-right: 20px;
       img {
         border-radius: 6px;
         width: 100%;
@@ -97,7 +99,7 @@ a {
     }
     .userInfo {
       span {
-        margin-left: 60px;
+        margin-left: 40px;
         display: block;
         line-height: 26px;
         .department {
@@ -106,133 +108,102 @@ a {
         }
       }
     }
+
     // 消息
     .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;
-        // 图
+      background-color: rgba(224, 220, 220, 0.4);
+      border-top-right-radius: 20px;
+      border-bottom-right-radius: 20px;
+      em {
+        margin: 0 10px;
+        font-style: normal;
+        margin-right: 50px;
         span {
-          margin: 0 aotu;
-          border: transparent;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          position: relative;
-          img {
-            width: 34px;
-            height: 34px;
-          }
+          font-size: 30px;
+          color: #fa6b5c;
+          font-weight: 700;
         }
-        // 文字
         p {
-          margin-top: 14px;
-          font-size: 14px;
-          color: rgb(128, 127, 127);
-          font-weight: 400;
-          letter-spacing: 1px;
+          font-size: 16px;
         }
       }
     }
   }
-  // 公告
-  .news {
-    .newsColItem {
-      height: 400px;
+
+  // OA工作台
+  .oaIcon {
+    text-align: center;
+    margin-right: 30px;
+    float: left;
+    h4 {
+      margin-top: 10px;
     }
-    .notice {
-      ul {
-        margin: 0;
-        padding: 0;
-        li {
-          line-height: 30px;
-          a {
-            font-size: 14px;
-            color: #444;
-            .department {
-              margin-right: 10px;
-            }
-            .createBy {
-              color: #333;
-            }
-            .createTime {
-              color: rgb(164, 164, 164);
-              margin: 0 4px 0 20px;
-            }
+  }
+}
+
+// 公告
+.news {
+  .notice {
+    ul {
+      margin: 0;
+      padding: 0;
+      li {
+        line-height: 30px;
+        a {
+          font-size: 14px;
+          color: #444;
+          .department {
+            margin-right: 10px;
+          }
+          .createBy {
+            color: #333;
           }
-          a:hover {
-            color: #1890ff;
+          .createTime {
+            color: rgb(164, 164, 164);
+            margin: 0 4px 0 20px;
           }
         }
+        a:hover {
+          color: #1890ff;
+        }
       }
     }
-    // 我的计划
-    .plan {
-      .total {
-        span {
-          display: block;
-          line-height: 40px;
-          strong {
-            color: #fa6b5c;
-            text-decoration: underline;
-            margin-right: 4px;
-          }
-        }
+  }
+  // 我的计划
+  .total {
+    span {
+      display: block;
+      line-height: 40px;
+      strong {
+        color: #fa6b5c;
+        text-decoration: underline;
+        margin-right: 4px;
       }
     }
-    // 友情链接
-    .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;
-        }
+  }
+
+  // 友情链接
+  .links {
+    /deep/ .ant-card-body {
+      padding: 20px;
+    }
+    button {
+      border-radius: 2px;
+      border: none;
+      margin-right: 4px;
+      background-color: rgba(102, 155, 188, 0.7);
+      margin-bottom: 10px;
+      a {
+        color: white;
+        font-size: 18px;
+        padding: 10px 14px;
       }
     }
+    button:hover {
+      background-color: #003049;
+      color: white;
+      box-shadow: 1px 1px 3px #333;
+    }
   }
 }

src/views/activiti/doneManage.vue

@@ -28,7 +28,8 @@
       </div>
 
       <a-row>
-        <a-table :scroll="scroll+150" bordered
+        <!--:scroll="scroll+150"  -->
+        <a-table :scroll="scroll" bordered
           :loading="loading"
           rowKey="id"
           :dataSource="data"

src/views/dashboard/MyToDo.vue

@@ -1,38 +1,54 @@
 <template>
   <div id="home">
-    <!-- 第一行 -->
+    <!-- 我的  OA工作台  日历  -->
     <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-col :xs="24" :sm="24" :md="24" :lg="24" :style="{ marginBottom: '8px' }">
+        <a-row :gutter="24">
+          <!-- 大 -->
+          <a-col :xs="24" :sm="24" :md="24" :lg="12" :style="{ marginBottom: '8px' }">
+            <a-card title="我的" style="width: 100%;height:200px;" :style="{ marginBottom: '8px' }" class="clearfix">
+              <a-row :gutter="24">
+                <!--  -->
+                <a-col :xs="24" :sm="24" :md="12" :lg="12" style="">
+                  <div class="userImg fl">
+                    <img src="../../assets/user.jpg" width="50px" />
+                  </div>
+                  <div class="userInfo ">
+                    <span class="department">{{ userInfo.realname }}</span>
+                    <span>账号：{{ userInfo.username }}</span>
+                    <span class="telphone">Tel：{{ userInfo.telphone }}</span>
+                  </div>
+                </a-col>
+                <!--  -->
+                <a-col :xs="24" :sm="24" :md="12" :lg="12" class="msgBox  clearfix">
+                  <div >
+                    <em class="fl" >
+                      <span> {{ todoList.length }}</span>
+                      <p>我的待办</p>
+                    </em>
+                    <em class="fl">
+                      <span>{{ msgTotal }}</span>
+                      <p>系统消息</p></em>
+                  </div>
+                </a-col>
+              </a-row>
+
+              <!-- <a-divider type="vertical" style="height:110px;width:1px;margin:0 20px;" class="fl" /> -->
             </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>
+
+            <!-- 下 -->
+            <a-card title="OA工作台" style="width:100%;height:172px;">
+              <div v-for="(item, index) in activeKeyAll" :key="index">
+                <a @click.prevent="aClick(item)" class="oaIcon">
+                  <a-avatar shape="square" :size="30" :src="item.iconAddress" />
+                  <h4>{{ item.name }}</h4>
+                </a>
               </div>
             </a-card>
           </a-col>
 
           <!-- 日历 -->
-          <a-col :xs="24" :sm="24" :md="24" :lg="10">
+          <a-col :xs="24" :sm="24" :md="24" :lg="12" style="paddingLeft:0;">
             <a-card title="日历" :bordered="false" class="fullCard">
               <template #extra>
                 <a href="javascript:void(0);" @click="openCalTab">更多</a>
@@ -46,59 +62,31 @@
       </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">
+      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '8px' }">
+        <a-row :gutter="24">
+          <!-- 企业公告 -->
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" :style="{ marginBottom: '8px', paddingRight: 0 }">
+            <a-card title="企业公告" :bordered="false" class="notice" style=" height: 400px;">
               <template #extra>
                 <a href="javascript:void(0);" @click="openEnterAnn">更多</a>
               </template>
 
-              <!-- DataV 轮播表-->
               <div class="dataV">
                 <dv-scroll-board
                   class="board"
-                  :rowNum="10"
                   :config="config"
                   style="width:100%;height:300px;color:#333;paddinLeft:40px;"
                   @click="getMethod"
                 />
               </div>
-              <!-- DataV -->
             </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">
+
+          <!-- 我的计划    友情链接 -->
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="6" :style="{ marginBottom: '8px', paddingRight: 0 }">
+            <a-card title="我的计划" style="width:100%;height:196px;marginBottom:8px">
               <div class="total clearfix">
                 <div class="left fl">
                   <span>上月我的计划：<strong>0</strong>份</span>
@@ -110,112 +98,28 @@
                 </div>
               </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">
+            <a-card title="友情链接" style="width:100%;height:196px;" class="links">
               <template #extra><a href="javascript:void(0);" @click="openMyLinks">更多</a></template>
-
-              <div class="linkBtn">
-                <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
-                <button><a href="http://www.dakabg.com/" target="_blank">哒咔办公</a></button>
-                <button>
-                  <a href="https://www.dingtalk.com/" target="_blank">钉钉</a>
-                </button>
-                <button><a href="https://www.11467.com" target="_blank">品医</a></button>
-                <button><a href="https://www.antgroup.com/" target="_blank">蚂蚁集团</a></button>
-              </div>
+              <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
+              <button><a href="http://www.dakabg.com/" target="_blank">哒咔办公</a></button>
+              <button>
+                <a href="https://www.dingtalk.com/" target="_blank">钉钉</a>
+              </button>
+              <button><a href="https://www.11467.com" target="_blank">品医</a></button>
+              <button><a href="https://www.antgroup.com/" target="_blank">蚂蚁集团</a></button>
+              <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
+              <button>
+                <a href="https://www.dingtalk.com/" target="_blank">钉钉</a>
+              </button>
             </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 :xs="24" :sm="24" :md="24" :lg="24" :xl="10" :style="{ marginBottom: '8px', paddingRight: 0 }">
+            <MyoaTabs />
+          </a-col>
+        </a-row>
       </a-col>
     </a-row>
 
@@ -233,12 +137,13 @@
       </component>
     </a-modal>
 
-    <!-- 公告详情 弹框  组件-->
+    <!-- 企业公告详情 弹框-->
     <detAnn-modal ref="DetAnnModal" @ok="modalFormOk" :fatherData="annDetail"></detAnn-modal>
   </div>
 </template>
 
 <script>
+import MyoaTabs from '@views/dashboard/MyoaTabs.vue'
 import DetAnnModal from '@views/oa/enter-ann/add/detAnnModal.vue'
 import { mapGetters } from 'vuex'
 import { getAction } from '@/api/manage'
@@ -255,11 +160,12 @@ import '@fullcalendar/daygrid/main.css'
 import JEditor from '../../components/jeecg/JEditor.vue'
 import '@/assets/less/dataVTable.less' // 修改首页 DataV 轮播图样式
 export default {
-  name: 'Home',
+  name: 'Mytodo',
   components: {
     FullCalendar, //日历
     JEditor, //富文本
-    DetAnnModal //公告详情弹框
+    DetAnnModal, //公告详情弹框
+    MyoaTabs //我的待办、已办、申请 tabs
   },
   data() {
     return {
@@ -415,7 +321,7 @@ export default {
           this.config = {
             oddRowBGC: 'white',
             evenRowBGC: 'white',
-            columnWidth: [10, 100, 460, 200, 300],
+            columnWidth: [10, 100, 460, 200, 400],
             align: ['center'],
             rowNum: 6,
             waitTime: 2000,
@@ -424,10 +330,11 @@ export default {
         }
       })
     },
+
     //轮播图 点击事件
     getMethod(item) {
-      // =the data presentation is a bit sluggish 
-      // this.$refs.DetAnnModal.annVisible = true
+      // =the data presentation is a bit sluggish
+      this.$refs.DetAnnModal.annVisible = true
       // console.log('轮播自带的数据', item)
       this.$nextTick(() => {
         enterpriseEQueryById({ id: item.row[0] }).then(res => {
@@ -439,6 +346,7 @@ export default {
         })
       })
     },
+
     //查询日程数据
     getScheduleData() {
       this.$nextTick(() => {

src/views/dashboard/MyoaTabs.vue

@@ -0,0 +1,202 @@
+<template>
+  <div id="MyoaTbas">
+    <a-tabs default-active-key="1" @change="callback" style="background:white;height:400px;padding:8px;">
+      <a-tab-pane key="1" tab="我的待办" style="margin:10px;">
+        <div class="dataV">
+          <dv-scroll-board
+            class="board"
+            :config="todoConfig"
+            style="width:100%;height:300px;color:#333;"
+            @click="todoClick"
+          />
+        </div>
+      </a-tab-pane>
+
+      <a-tab-pane key="2" tab="我的申请" force-render>
+        <div class="dataV">
+          <dv-scroll-board
+            class="board"
+            :config="applyConfig"
+            style="width:100%;height:300px;color:#333;"
+            @click="applyClick"
+          />
+        </div>
+      </a-tab-pane>
+
+      <a-tab-pane key="3" tab="我的已办">
+        <div class="dataV">
+          <dv-scroll-board
+            class="board"
+            :config="doneConfig"
+            style="width:100%;height:300px;color:#333;"
+            @click="doneClick"
+          />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+export default {
+    name: 'MyoaTabs',
+    data () {
+        return {
+            header: ['列1', '列2', '列3'],
+            todoConfig: {},
+            applyConfig: {},
+            doneConfig: {},
+            todoList: {},
+            url: {
+                list: '/actBusiness/listData',
+                doneList: '/actTask/doneList'
+            }
+        }
+    },
+    created () {
+        this.getTodoList()
+        this.getApplyList()
+        this.getDoneList()
+    },
+    methods: {
+    // 待办tbas
+        getTodoList () {
+            this.postFormAction('/actTask/todoList', {}).then(res => {
+                if (res.success) {
+                    console.log('待办列表-->', res.result)
+                    this.todoList = res.result
+                    let scrollData = [] // 轮播表数据
+
+                    this.todoList.map(item => {
+                        var priorityCode = ''
+                        if (item.priority == '0') {
+                            priorityCode = '<span style="color:green;">普通</span>'
+                        }
+                        if (item.priority == '1') {
+                            priorityCode = '<span style="color:orange;">重要</span>'
+                        }
+                        if (item.priority == '2') {
+                            priorityCode = '<span style="color:red;">紧急</span>'
+                        }
+                        var list = [item.id, item.name, item.processName, item.applyer, priorityCode, item.createTime]
+                        scrollData.push(list)
+                    })
+                    this.todoConfig = {
+                        oddRowBGC: 'white',
+                        evenRowBGC: 'rgba(233, 236, 239,.3)',
+                        columnWidth: [150, 200, 200, 200, 200, 300],
+                        align: ['center'],
+                        rowNum: 6,
+                        waitTime: 9000,
+                        data: scrollData // 双向绑定(轮播表数据 绑定到配置的 data数据中)
+                    }
+                }
+            })
+        },
+
+        // 申请tbas
+        getApplyList () {
+            getAction(this.url.list, {}).then(res => {
+                if (res.success) {
+                    console.log('申请列表-->', res.result)
+                    this.applyList = res.result
+                    let scrollData = [] // 轮播表数据
+
+                    this.applyList.map(item => {
+                        var resultCode = ''
+                        if (item.result == '0') {
+                            resultCode = '<span style="color:#37a2da;">未提交</span>'
+                        }
+                        if (item.result == '1') {
+                            resultCode = '<span style="color:orange;">处理中</span>'
+                        }
+                        if (item.result == '2') {
+                            resultCode = '<span style="color:green;">通过</span>'
+                        }
+                        if (item.result == '3') {
+                            resultCode = '<span style="color:red;">驳回</span>'
+                        }
+
+                        var list = [item.id, item.title, item.processName, item.currTaskName, resultCode, item.applyTime]
+                        scrollData.push(list)
+                    })
+                    this.applyConfig = {
+                        oddRowBGC: 'white',
+                        evenRowBGC: 'rgba(233, 236, 239,.3)',
+                        columnWidth: [150, 200, 200, 200, 150, 300],
+                        align: ['center'],
+                        rowNum: 6,
+                        waitTime: 2000,
+                        data: scrollData
+                    }
+                }
+            })
+        },
+
+        // 已办tbas
+        getDoneList () {
+            getAction(this.url.doneList, {}).then(res => {
+                if (res.success) {
+                    console.log('已办列表-->', res.result)
+                    this.doneList = res.result
+                    let scrollData = [] // 轮播表数据
+                    this.doneList.map(item => {
+                        var list = [item.id, item.name, item.processName, item.applyer, item.deleteReason, item.createTime]
+                        scrollData.push(list)
+                    })
+                    this.doneConfig = {
+                        oddRowBGC: 'white',
+                        evenRowBGC: 'rgba(233, 236, 239,.3)',
+                        columnWidth: [150, 200, 200, 200, 150, 300],
+                        align: ['center'],
+                        rowNum: 6,
+                        waitTime: 2000,
+                        data: scrollData
+                    }
+                }
+            })
+        },
+
+        // 轮播图 点击事件
+        todoClick (item) {
+            console.log(item)
+            this.$router.push('/activiti/todoManage')
+        },
+        applyClick (item) {
+            this.$router.push('/activiti/applyList')
+        },
+        doneClick (item) {
+            this.$router.push('/activiti/doneManage')
+        },
+        // 我的待办 tabs
+        callback (key) {
+            console.log(key)
+            if (key == '1') {
+                this.getTodoList()
+            }
+            if (key == '2') {
+                this.getApplyList()
+            }
+            if (key == '3') {
+                this.getDoneList()
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+// 单独创建页面写样式  如下
+@import '~@assets/less/mytodo.less';
+@import '~@assets/less/common.less';
+
+/deep/ .ant-tabs-nav .ant-tabs-tab {
+  color: #ccc;
+}
+/deep/ .ant-tabs-tab-active {
+  color: #1890ff !important;
+  font-size: 16px;
+}
+
+</style>

src/views/oa/enter-ann/add/detAnnModal.vue

@@ -41,8 +41,6 @@
 export default {
     data () {
         return {
-            // myValue: '', // 富文本内容
-            // annDetail: {}, // 公告弹框详情 （父组件）
             annVisible: false // 公告详情关闭
         }
     },