tabs切换数据准确

src/assets/less/overwrite.css

@@ -55,7 +55,7 @@ img {
   margin-top: 4px;
   color: rgba(52, 123, 152);
 }
-.content .main .todoPage .cardTask {
+.content .main .cardTask {
   width: 100%;
   border-radius: 20px;
   text-align: left;
@@ -63,7 +63,7 @@ img {
   border: none;
   background-color: rgba(247, 224, 212, 0.8);
 }
-.content .main .todoPage .cardTask .pTitle {
+.content .main .cardTask .pTitle {
   width: 100%;
   padding: 8px 0;
   font-size: 18px;
@@ -73,7 +73,7 @@ img {
   border-radius: 10px;
   padding-left: 6px;
 }
-.content .main .todoPage .cardTask .pTitle span {
+.content .main .cardTask .pTitle span {
   display: inline-block;
   width: 28px;
   height: 28px;
@@ -82,59 +82,60 @@ img {
   border-radius: 10px;
   vertical-align: text-bottom;
 }
-.content .main .todoPage .cardTask .pTitle span img {
+.content .main .cardTask .pTitle span img {
   display: block !important;
   border-radius: 10px;
 }
-.content .main .todoPage .cardTask .operation .operationImg {
+.content .main .cardTask .operation .operationImg {
   display: inline-block;
   height: 28px;
   width: 28px;
 }
-.content .main .todoPage .cardTask .operation p {
+.content .main .cardTask .operation p {
   font-size: 16px;
   font-weight: 700;
   color: #092834;
 }
-.content .main .todoPage .cardTask .operation .itemBtn {
+.content .main .cardTask .operation .itemBtn {
   font-weight: 700;
 }
-.content .main .todoPage .operation /deep/ .ant-btn {
+.content .main .operation /deep/ .ant-btn {
   padding: 0;
   line-height: 0;
   border: none !important;
   border-radius: 999em;
-  padding: 24px 20px;
+  padding: 22px 12px;
+  border: 1px solid red;
 }
-.content .main .todoPage /deep/ .ant-card-head {
+.content .main /deep/ .ant-card-head {
   color: #092834;
   font-weight: 700;
   position: relative;
   letter-spacing: 1px;
 }
-.content .main .todoPage /deep/ .ant-tabs-nav-container {
-  margin-top: 10px;
+.content .main /deep/ .ant-tabs-nav-container {
+  padding-bottom: 2px;
   display: flex;
   justify-content: space-around;
 }
-.content .main .todoPage /deep/ .ant-tabs-nav .ant-tabs-tab {
+.content .main /deep/ .ant-tabs-tab {
   padding: 0;
-  margin: 0;
-  padding: 12px 34px;
+  padding: 10px 40px;
   color: #616161;
-  background-color: rgba(228, 224, 224, 0.5);
-  border-radius: 999px;
+  border-radius: 20px;
+  background-color: #f8e4da;
 }
-.content .main .todoPage /deep/ .ant-tabs-nav .ant-tabs-tab-active {
+.content .main /deep/ .ant-tabs-tab-active {
   font-weight: 700;
-  background: #1489b8;
-  background: linear-gradient(0deg, rgba(252, 96, 10, 0.5) 0%, rgba(20, 137, 184, 0.5) 100%);
+  background: #ff9a71;
+  color: #616161;
+  border: none;
 }
-.content .main .todoPage /deep/ .ant-tabs-bar {
+.content .main /deep/ .ant-tabs-bar {
   border: none;
   padding: -10px;
 }
-.content .main .todoPage /deep/ .ant-tabs-ink-bar {
+.content .main /deep/ .ant-tabs-ink-bar {
   height: 0;
 }
 .content .main .todoBody .priorityComm {

src/assets/less/overwrite.less

@@ -47,14 +47,14 @@ img {
     letter-spacing: 1px;
   }
   .main {
-    min-height: 780px; //所有内容设置最小高度
+    //所有内容设置最小高度
+    min-height: 780px;
     //分页头部公共
     /deep/.ant-layout-header {
       padding: 0;
       margin: 0;
       letter-spacing: 1px;
       padding-left: 14px;
-      // padding: 0 24px;
       background-color: transparent;
     }
     .Header {
@@ -74,106 +74,102 @@ img {
       }
     }
 
-    // todoBody 下
-    .todoPage {
-      // text-align: left;
-
-      //每个任务卡
-      .cardTask {
-        // border: 1px dashed #cccc;
+    //每个任务卡
+    .cardTask {
+      width: 100%;
+      border-radius: 20px;
+      text-align: left;
+      margin-bottom: 30px;
+      border: none;
+      background-color: rgba(247, 224, 212, 0.8);
+      // card 标题
+      .pTitle {
         width: 100%;
-        border-radius: 20px;
-        text-align: left;
-        margin-bottom: 30px;
-        border: none;
-        background-color: rgba(247, 224, 212, 0.8);
-        // card 标题
-        .pTitle {
-          width: 100%;
-          padding: 8px 0;
-          font-size: 18px;
-          font-weight: 700;
-          color: #092834;
-          box-shadow: 2px 2px 20px 6px rgba(150, 147, 147, 0.2) inset;
+        padding: 8px 0;
+        font-size: 18px;
+        font-weight: 700;
+        color: #092834;
+        box-shadow: 2px 2px 20px 6px rgba(150, 147, 147, 0.2) inset;
+        border-radius: 10px;
+        padding-left: 6px;
+        // 图 外盒子
+        span {
+          display: inline-block;
+          width: 28px;
+          height: 28px;
+          line-height: 28px;
+          margin-right: 6px;
           border-radius: 10px;
-          padding-left: 6px;
-          // 图 外盒子
-          span {
-            display: inline-block;
-            width: 28px;
-            height: 28px;
-            line-height: 28px;
-            margin-right: 6px;
+          vertical-align: text-bottom;
+          img {
+            display: block !important;
             border-radius: 10px;
-            vertical-align: text-bottom;
-            img {
-              display: block !important;
-              border-radius: 10px;
-            }
-          }
-        }
-        //操作 样式
-        .operation {
-          .operationImg {
-            display: inline-block;
-            height: 28px;
-            width: 28px;
-          }
-          p {
-            font-size: 16px;
-            font-weight: 700;
-            color: #092834;
-          }
-          .itemBtn {
-            font-weight: 700;
           }
         }
       }
-      // 操作按钮样式
-      .operation /deep/.ant-btn {
-        padding: 0;
-        line-height: 0;
-        border: none !important;
-        border-radius: 999em; //胶囊写法
-        padding: 24px 20px;
-      }
-
-      /deep/.ant-card-head {
-        color: #092834;
-        font-weight: 700;
-        position: relative;
-        letter-spacing: 1px;
+      //操作 样式
+      .operation {
+        .operationImg {
+          display: inline-block;
+          height: 28px;
+          width: 28px;
+        }
+        p {
+          font-size: 16px;
+          font-weight: 700;
+          color: #092834;
+        }
+        .itemBtn {
+          font-weight: 700;
+        }
       }
+    }
+    // 操作按钮样式
+    .operation /deep/.ant-btn {
+      padding: 0;
+      line-height: 0;
+      border: none !important;
+      border-radius: 999em;
+      padding: 22px 12px;
+      border: 1px solid red;
+    }
 
-      // 3个tabs ===================================
-      /deep/.ant-tabs-nav-container {
-        margin-top: 10px;
-        display: flex;
-        justify-content: space-around;
-      }
-      /deep/.ant-tabs-nav .ant-tabs-tab {
-        padding: 0;
-        margin: 0;
-        padding: 12px 34px;
-        color: #616161;
-        background-color: rgba(228, 224, 224, 0.5);
-        border-radius: 999px;
-      }
+    /deep/.ant-card-head {
+      color: #092834;
+      font-weight: 700;
+      position: relative;
+      letter-spacing: 1px;
+    }
 
-      /deep/.ant-tabs-nav .ant-tabs-tab-active {
-        font-weight: 700;
-        background: rgb(20, 137, 184);
-        background: linear-gradient(0deg, rgba(252, 96, 10, 0.5) 0%, rgba(20, 137, 184, 0.5) 100%);
-      }
+    // 3个tabs ===================================
+    /deep/.ant-tabs-nav-container {
+      padding-bottom: 2px;
+      display: flex;
+      justify-content: space-around;
+    }
+    /deep/.ant-tabs-tab {
+      padding: 0;
+      padding: 10px 40px;
+      color: #616161;
+      // border: 1px solid rgba(255, 154, 113);
+      border-radius: 20px;
+      background-color: #f8e4da;
+    }
 
-      /deep/.ant-tabs-bar {
-        border: none;
-        padding: -10px;
-      }
+    /deep/.ant-tabs-tab-active {
+      font-weight: 700;
+      background: rgb(255, 154, 113);
+      color: #616161;
+      // box-shadow: rgb(153, 212, 235) 0px 0px 10px inset;
+      border: none;
+    }
+    /deep/.ant-tabs-bar {
+      border: none;
+      padding: -10px;
+    }
 
-      /deep/.ant-tabs-ink-bar {
-        height: 0;
-      }
+    /deep/.ant-tabs-ink-bar {
+      height: 0;
     }
 
     //tabs 内容

src/views/activiti/historicDetail.vue

@@ -1,5 +1,4 @@
-<style lang="less">
-</style>
+<style lang="less"></style>
 <template>
   <div class="search">
     <a-card style="margin-bottom:10px;">
@@ -8,59 +7,69 @@
       </p>
 
       <a-row style="position:relative">
-        <a-table
-          :loading="loading"
-          rowKey="id"
-          :dataSource="data"
-          :pagination="ipagination"
-          ref="table">
+        <a-table :loading="loading" rowKey="id" :dataSource="data" :pagination="ipagination" ref="table">
           <a-table-column title="#" width="50">
-            <template slot-scope="t,r,i" >
-              <span> {{ i+1 }} </span>
+            <template slot-scope="t, r, i">
+              <span> {{ i + 1 }} </span>
             </template>
           </a-table-column>
+
+          <!-- 任务名称 -->
           <a-table-column title="任务名称" dataIndex="name" width="150" align="center">
             <template slot-scope="t">
               <span> {{ t }} </span>
             </template>
           </a-table-column>
+
+          <!-- 处理人 -->
           <a-table-column title="处理人" dataIndex="assignees" width="150" align="center">
             <template slot-scope="t">
               <div v-if="t">
                 <span v-for="item in t">
-                  <span v-if="item.isExecutor" style="color: #00DB00;">{{ item.username }} </span>
-                  <span v-else style="color: #999;">{{ item.username }} </span>
+                  <span v-if="item.isExecutor" style="color: #00DB00;">
+                    {{ item.username }}
+                  </span>
+
+                  <span v-else style="color: #999;">
+                    {{ item.username }}
+                  </span>
                 </span>
               </div>
             </template>
           </a-table-column>
+
           <a-table-column title="审批操作" dataIndex="deleteReason" width="150" align="center">
             <template slot-scope="t">
-              <span v-if="t.toString().indexOf('通过')>-1" style="color: #00DB00">{{ t }}</span>
-              <span v-else-if="t.toString().indexOf('驳回')>-1" style="color: red;">{{ t }}</span>
+              <span v-if="t.toString().indexOf('通过') > -1" style="color: #00DB00">{{ t }}</span>
+              <span v-else-if="t.toString().indexOf('驳回') > -1" style="color: red;">{{ t }}</span>
               <span v-else>{{ t }}</span>
             </template>
           </a-table-column>
+
           <a-table-column title="审批意见" dataIndex="comment" width="150" align="center">
             <template slot-scope="t">
               <span>{{ t }}</span>
             </template>
           </a-table-column>
+
           <a-table-column title="耗时" dataIndex="duration" width="150" align="center">
             <template slot-scope="t">
               <span>{{ millsToTime(t) }}</span>
             </template>
           </a-table-column>
+
           <a-table-column title="创建时间" dataIndex="createTime" width="150" align="center">
             <template slot-scope="t">
               <span>{{ t }}</span>
             </template>
           </a-table-column>
+
           <a-table-column title="完成时间" dataIndex="endTime" width="150" align="center">
             <template slot-scope="t">
               <span>{{ t }}</span>
             </template>
           </a-table-column>
+
           <a-table-column title="状态" dataIndex="endTime" key="aaa" width="150" align="center">
             <template slot-scope="t">
               <span v-if="t" style="color: blue;">已办理</span>
@@ -71,11 +80,13 @@
       </a-row>
     </a-card>
 
+    <!-- 实时流程图 -->
     <a-card>
       <p slot="title">
         <span>实时流程图</span>
       </p>
       <a-row style="position:relative">
+        <!-- 图 -->
         <img :src="imgUrl" />
         <a-spin size="large" fix v-if="loadingImg"></a-spin>
       </a-row>
@@ -115,12 +126,9 @@ export default {
     created () {
         this.init()
     },
-    watch: {
-    },
+    watch: {},
     methods: {
-        loadData () {
-
-        },
+        loadData () {},
         init () {
             this.id = this.procInstId
             this.imgUrl = this.url.getHighlightImg + this.id + '?time=' + new Date()
@@ -140,8 +148,9 @@ export default {
                 }
             })
         },
+
+        // 分页、排序、筛选变化时触发
         handleTableChange (pagination, filters, sorter) {
-            // 分页、排序、筛选变化时触发
             // TODO 筛选
             if (Object.keys(sorter).length > 0) {
                 this.isorter.column = sorter.field
@@ -150,8 +159,6 @@ export default {
             this.ipagination = pagination
             // this.loadData();
         }
-
     }
-
 }
 </script>

src/views/user/Login.vue

@@ -7,7 +7,7 @@
           <!-- 待办 -->
           <span v-if="isshow == '1'">
             <img src="@assets/todo.png" alt="?????" />
-            <div class="info" style="color:white; top:3%; left:24%;">
+            <div class="info" style="color:white; top:3%; left:26%;">
               <span>我的待办</span>
               <a-badge class="numTips" style="backgroundColor:#f94f46;">
                 {{ todoList.length }}
@@ -62,7 +62,7 @@
           :processData="lcModal.processData"
           :isNew="lcModal.isNew"
           @afterSubmit="afterSub"
-          @close=";(lcModal.visible = false), (lcModal.disabled = false)"
+          @close="(lcModal.visible = false), (lcModal.disabled = false)"
         >
         </component>
       </a-modal>

src/views/user/Todo.vue

@@ -9,25 +9,19 @@
       <!-- tabs 部分 -->
       <a-layout-content class="todoBody">
         <a-tabs default-active-key="wait" @change="tabClick" class="todoPage">
-          <!-- 我的申请 -->
+          <!-- 申请 -->
           <a-tab-pane key="apply" tab="申请" class="apply">
-            <div v-for="item in applyList" :key="item.id">
-              <applyTab></applyTab>
-            </div>
+            <applyTab ref="ApplyTab"></applyTab>
           </a-tab-pane>
 
-          <!-- 我的待办 -->
+          <!-- 待办 -->
           <a-tab-pane key="wait" tab="待办" force-render class="wait">
-            <div v-for="item in todoList" :key="item.id">
-              <waitTab></waitTab>
-            </div>
+            <waitTab ref="WaitTab"></waitTab>
           </a-tab-pane>
 
-          <!-- 我的已办 -->
+          <!-- 已办 -->
           <a-tab-pane key="done" tab="已办" class="done">
-            <div v-for="item in doneList" :key="item.id">
-              <doneTab></doneTab>
-            </div>
+            <doneTab ref="DoneTab"></doneTab>
           </a-tab-pane>
         </a-tabs>
       </a-layout-content>
@@ -40,7 +34,7 @@
 </template>
 
 <script>
-import { getAction } from '@/api/manage'
+// import { getAction } from '@/api/manage'
 import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
@@ -140,41 +134,8 @@ export default {
         }
     },
 
-    created () {
-        this.getDataList()
-    },
-    mounted () {
-        this.init()
-    },
     methods: {
-        init () {
-            this.getDataList()
-        },
         loadData () {},
-
-        // 拿到 所有列表（待办、已办）
-        getDataList () {
-            // 待办
-            // eslint-disable-next-line no-unused-expressions
-            getAction(this.url.todoList, {}).then(res => {
-                if (res.success) {
-                    this.todoList = res.result || []
-                    this.total = this.data.leading
-                    console.log('1次 todo.vue 待办列表', this.todoList)
-                }
-            })
-            // 已办
-            this.postFormAction(this.url.doneList, this.searchForm).then(res => {
-                this.loading = false
-                if (res.success) {
-                    this.doneList = res.result || []
-                    console.log('1次 todo.vue 已办列表', this.doneList)
-                } else {
-                    this.$message.error(res.message)
-                }
-            })
-        },
-
         // 初始化表
         forminitial () {
             this.form = {
@@ -191,56 +152,27 @@ export default {
             }
         },
 
-        // tab被点击的回调 原始
+        // 点击tab的回调
         tabClick (key) {
             console.log(key)
             if (key === 'apply') {
-                getAction(this.url.list).then(res => {
-                    if (res.success) {
-                        this.applyList = res.result || []
-                        console.log('申请列表：', this.applyList)
-                    }
-                })
+                if (this.$refs.ApplyTab) {
+                    // 通过点击自己，刷新自己的数据（此处是调用其他页面的方法）
+                    // 各自刷新各自的数据，其他tabs通过点击各自按钮，调用方法刷新列表
+                    this.$refs.ApplyTab.loadData()
+                }
             }
             if (key === 'done') {
-                getAction(this.url.doneList).then(res => {
-                    if (res.success) {
-                        this.doneList = res.result || []
-                        console.log('已办列表：', this.doneList)
-                    }
-                })
+                if (this.$refs.DoneTab) {
+                    this.$refs.DoneTab.getDataList()
+                }
             }
             if (key === 'wait') {
-                getAction(this.url.todoList).then(res => {
-                    if (res.success) {
-                        this.todoList = res.result || []
-                        console.log('申请列表：', this.todoList)
-                    }
-                })
+                if (this.$refs.WaitTab) {
+                    this.$refs.WaitTab.getDataList()
+                }
             }
         }
-    // tab被点击的回调 修改
-    // callback (key) {
-    //     console.log(key)
-    //     if (key === 'apply') {
-    //         getAction(this.url.list).then(res => {
-    //             if (res.success) {
-    //                 this.applyList = res.result || []
-    //                 console.log('1次 todo 申请列表', this.applyList)
-    //             }
-    //         })
-    //     }
-    //     if (key === 'done') {
-    //         var what1 = [{ applyer: '123123132' }]
-    //         this.doneList = what1
-    //         console.log('3次 todo页面 已完成', this.doneList)
-    //     }
-    //     if (key === 'wait') {
-    //         var what2 = [{ applyer: '123123132' }]
-    //         this.todoList = what2
-    //         console.log('3次 todo页面 待办', this.todoList)
-    //     }
-    // }
     }
 }
 </script>
@@ -254,7 +186,6 @@ export default {
   .main {
     padding: 14px;
     /deep/.ant-tabs {
-      // background-color: rgb(12, 120, 153);
       border-top-left-radius: 40px;
       border-top-right-radius: 40px;
     }

src/views/user/tabs/ApplyTab.vue

@@ -231,8 +231,6 @@
       ></component>
     </a-modal>
 
-    <!-- <onl-cgform-auto-modal ref="modal" code="b0bea65bfce141deb0ae3fcb18982d76" /> -->
-
     <!--提交申请表单-->
     <a-modal title="提交申请" v-model="modalVisible" :mask-closable="false" :width="500" :footer="null">
       <div v-if="modalVisible">
@@ -277,9 +275,9 @@
     </a-modal>
 
     <!-- 审批历史 -->
-    <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'80%'" :footer="null">
+    <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'100%'" :footer="null">
       <div v-if="modalLsVisible">
-        <historicDetail :procInstId="procInstId"></historicDetail>
+        <historyModal :procInstId="procInstId"></historyModal>
       </div>
     </a-modal>
 
@@ -299,6 +297,8 @@
 </template>
 
 <script>
+import HistoryModal from '@views/user/tabs/HistoryModal'
+
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
 import { filterObj } from '@/utils/util'
@@ -309,12 +309,12 @@ import JTreeSelect from '@/components/jeecg/JTreeSelect'
 import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
 import historicDetail from '@/views/activiti/historicDetail'
 export default {
-  name: 'ApplyList',
+  name: 'applyTab',
   mixins: [activitiMixin, JeecgListMixin],
   components: {
     JEllipsis,
     JTreeSelect,
-    historicDetail
+    HistoryModal
   },
   data() {
     return {
@@ -376,28 +376,8 @@ export default {
       cancelForm: {}
     }
   },
-  computed: {},
+
   methods: {
-    init() {
-      this.getDataList()
-    },
-    getDataList() {
-      this.loading = true
-      getAction(this.url.todoList, {}).then(res => {
-        if (res.success) {
-          this.todoList = res.result || []
-          // this.total = this.data.leading
-          console.log('2次 waitTab 待办列表', this.todoList)
-        }
-      }),
-        getAction(this.url.doneList).then(res => {
-          if (res.success) {
-            this.doneList = res.result || []
-            console.log('最新已办列表1', this.doneList)
-            console.log('最新已办列表2', res.result)
-          }
-        })
-    },
     //初始化字典 - 流程分类
     initDictConfig() {
       initDictOptions('bpm_process_type').then(res => {
@@ -451,7 +431,7 @@ export default {
 
     //
     loadData(arg) {
-      // console.log('loadData')
+      console.log('我可以自动调用loadData')
       if (!this.url.list) {
         this.$message.error('请设置url.list属性!')
         return
@@ -467,7 +447,6 @@ export default {
         if (res.success) {
           let records = res.result || []
           this.applyList = records
-          // console.log('申请列表', this.applyList)
           // this.ipagination.total = records.length
         }
         if (res.code === 510) {
@@ -714,7 +693,7 @@ export default {
         this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
       }
       this.ipagination = pagination
-      // this.loadData();
+      this.loadData()
     },
 
     // 发起申请   可删

src/views/user/tabs/DoneTab.vue

@@ -34,6 +34,16 @@
                     color: white;"
         >
           {{ item.deleteReason }}
+        </span>
+               <span
+          v-if="item.deleteReason == '发起人撤回-原因未填写'"
+          style="background:rgba(9, 40, 52,.7);
+                    padding:4px 10px;
+                    borderRadius:2px;
+                    letterSpacing:1px;
+                    color: orange;"
+        >
+          {{ item.deleteReason }}
         </span>
       </p>
       <p style="float:right;">发起人：{{ item.applyer }}</p>
@@ -87,11 +97,20 @@
       </div>
     </a-card>
 
-    <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'80%'" :footer="null">
+    <!--审批历史-->
+    <a-modal
+      title="审批历史"
+      v-model="modalLsVisible"
+      :mask-closable="false"
+      :width="'100%'"
+      :footer="null"
+      class="hisModal"
+    >
       <div v-if="modalLsVisible">
-        <component :is="historicDetail" :procInstId="procInstId"></component>
+        <historyModal :procInstId="procInstId"></historyModal>
       </div>
     </a-modal>
+
     <!--流程表单-->
     <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="100%">
       <component
@@ -107,12 +126,15 @@
 </template>
 
 <script>
+import HistoryModal from '@views/user/tabs/HistoryModal'
+
 import { deleteAction, getAction, downFile } from '@/api/manage'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
 export default {
   name: 'DoneTab',
   mixins: [activitiMixin, JeecgListMixin],
+  components: { HistoryModal },
   data() {
     return {
       doneList: [], // 已办列表
@@ -167,20 +189,6 @@ export default {
       this.getDataList()
     },
 
-    // 原始
-    // getDataList() {
-    //   this.loading = true
-    //   this.postFormAction(this.url.doneList, this.searchForm).then(res => {
-    //     this.loading = false
-    //     if (res.success) {
-    //       this.doneList = res.result || []
-    //       console.log(this.doneList)
-    //     } else {
-    //       this.$message.error(res.message)
-    //     }
-    //   })
-    // },
-
     //拿到数据
     getDataList() {
       this.loading = true
@@ -245,14 +253,14 @@ export default {
     // 历史  todo
     history(v) {
       console.log('历史吗？', v)
-      if (!v.procInstId) {
+      if (v.procInstId) {
+        this.procInstId = v.procInstId
+        this.modalLsVisible = true
+        console.log('已办开开心心走到这，拿到该项procInstId:', v.procInstId)
+      } else {
         this.$message.error('流程实例ID不存在')
         return
       }
-      console.log('我想看看你', v.procInstId)
-      this.procInstId = v.procInstId
-      this.modalLsVisible = true
-      alert('需要重新做页面')
     },
 
     // 删除  todo 删太快了
@@ -278,7 +286,7 @@ export default {
         this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
       }
       this.ipagination = pagination
-      this.loadData();
+      this.loadData()
     }
   }
 }

src/views/user/tabs/HistoryModal.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="historyModal main">
+    <a-card class="cardTask" title="流程审批进度历史" v-for="item in hisInfo" :key="item.index">
+      <!-- 序号需要否 -->
+      <!-- <p>序号：{{ index + 1 }}</p> -->
+      <p class="taskName">任务名称：{{ item.name }}</p>
+
+      <p>
+        处理人：
+        <span v-if="item.assignees" style="color:#fc600a">
+          {{ item.assignees[0].username }}
+        </span>
+        <span v-else style="color:#ccc">
+          {{ item.assignees[0].username }}
+        </span>
+      </p>
+
+      <p v-if="item.deleteReason">
+        审批操作：
+        <span v-if="item.deleteReason.toString().indexOf('通过') > -1" style="color:green;">
+          {{ item.deleteReason }}
+        </span>
+        <span v-else-if="item.deleteReason.toString().indexOf('驳回') > -1" style="color:red;fontWeight:700;">
+          {{ item.deleteReason }}
+        </span>
+
+        <span v-else>{{ item.deleteReason }}</span>
+      </p>
+
+      <p v-if="item.comment">审批意见：{{ item.comment }}</p>
+      <p v-if="item.duration">耗时：{{ millsToTime(item.duration) }}</p>
+      <p>创建时间：{{ item.createTime }}</p>
+      <p v-if="item.endTime">完成时间：{{ item.endTime }}</p>
+      <p style="fontWeight:700;">
+        状态：
+        <span v-if="item.endTime" style="color:#505f66;">已办理 </span>
+        <span v-else style="color:#fc600a;fontWeight:700;">待处理 </span>
+      </p>
+    </a-card>
+
+    <a-card class="cardTask" title="实时流程图" >
+      <img :src="imgUrl" />
+      <a-spin size="large" fix v-if="loadingImg"></a-spin>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
+export default {
+    name: 'HistoryModal',
+    mixins: [activitiMixin, JeecgListMixin],
+    props: {
+        procInstId: {
+            type: String,
+            default: '',
+            required: true
+        }
+    },
+    data () {
+        return {
+            url: {
+                // 历史
+                historicFlow: '/actTask/historicFlow/',
+                getHighlightImg: `${this.doMian}/activiti/models/getHighlightImg/`
+            },
+            type: 0,
+            loading: false, // 表单加载状态
+            loadingImg: false,
+            hisInfo: [],
+            id: '',
+            imgUrl: '',
+            backRoute: ''
+        }
+    },
+    created () {
+        this.init()
+    },
+    methods: {
+        loadData () {},
+        init () {
+            this.id = this.procInstId
+            this.imgUrl = this.url.getHighlightImg + this.id + '?time=' + new Date()
+            this.getDataList()
+        },
+
+        //
+        getDataList () {
+            this.loading = true
+            this.getAction(this.url.historicFlow + this.id).then(res => {
+                this.loading = false
+                if (res.success) {
+                    console.log('res.success', res)
+                    this.hisInfo = res.result
+                    console.log('加油', this.hisInfo)
+                    if (!res.result || res.result.length == 0) {
+                        this.$message.info('未找到该记录审批历史数据,历史数据可能已被删除')
+                    }
+                } else {
+                    this.$message.error(res.message)
+                }
+            })
+        },
+
+        // 分页、排序、筛选变化时触发
+        handleTableChange (pagination, filters, sorter) {
+            // TODO 筛选
+            if (Object.keys(sorter).length > 0) {
+                this.isorter.column = sorter.field
+                this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
+            }
+            this.ipagination = pagination
+            // this.loadData();
+        }
+    }
+}
+</script>
+
+<style src="@assets/less/overwrite.less" lang="less" scoped></style>
+<style lang="less">
+@import '~@assets/less/common.less';
+</style>
+<style lang="less" scoped>
+.cardTask {
+  width: 100%;
+  border-radius: 10px;
+  text-align: left;
+  margin-bottom: 20px;
+  border: none;
+  background-color: rgba(247, 224, 212, 0.7);
+  .taskName {
+    font-weight: 700;
+  }
+}
+/deep/.ant-card-head {
+  font-weight: 700;
+  color: white;
+  background-color: rgba(52, 123, 152, 0.7);
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+}
+/deep/.ant-modal-header {
+  background-color: red;
+}
+.ant-modal-header {
+  background-color: blue;
+}
+</style>

src/views/user/tabs/WaitTab.vue

@@ -125,14 +125,17 @@
       </div>
     </a-card>
 
-    <!--审批历史-->
-    <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'80%'" :footer="null">
-      <a-card class="cardTask">
-
-        
-      </a-card>
+    <!--审批历史    style="background:red" -->
+    <a-modal
+      title="审批历史"
+      v-model="modalLsVisible"
+      :mask-closable="false"
+      :width="'100%'"
+      :footer="null"
+      wrapClassName="hisModal"
+    >
       <div v-if="modalLsVisible">
-        <component :is="historicDetail" :procInstId="procInstId"></component>
+        <historyModal :procInstId="procInstId"></historyModal>
       </div>
     </a-modal>
 
@@ -203,6 +206,8 @@
 </template>
 
 <script>
+import HistoryModal from '@views/user/tabs/HistoryModal'
+
 import { deleteAction, getAction, downFile } from '@/api/manage'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
@@ -210,7 +215,7 @@ import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
 export default {
   name: 'WaitTab',
   mixins: [activitiMixin, JeecgListMixin],
-  components: { JSelectUserByDep },
+  components: { JSelectUserByDep, HistoryModal },
   data() {
     return {
       todoList: [], // 待办列表
@@ -278,7 +283,7 @@ export default {
       },
       /*历史*/
       modalLsVisible: false,
-      procInstId: ''
+      procInstId: '' //点击历史的该项
     }
   },
   mounted() {
@@ -307,18 +312,6 @@ export default {
     },
     loadData() {},
 
-    // 拿到 所有列表（待办、已办） 原始
-    // getDataList() {
-    //   // 待办
-    //   getAction(this.url.todoList, {}).then(res => {
-    //     if (res.success) {
-    //       this.todoList = res.result || []
-    //       this.total = this.data.leading
-    //       console.log('待办列表', this.todoList)
-    //     }
-    //   })
-    // },
-
     //发请求拿到 todoList
     getDataList() {
       this.loading = true
@@ -328,14 +321,8 @@ export default {
           // this.total = this.data.leading
           console.log('2次 waitTab 待办列表', this.todoList)
         }
-      }),
-        getAction(this.url.doneList).then(res => {
-          if (res.success) {
-            this.doneList = res.result || []
-            console.log('最新已办列表1', this.doneList)
-            console.log('最新已办列表2', res.result)
-          }
-        })
+      })
+
     },
 
     //分页、排序、筛选变化时触发
@@ -579,13 +566,14 @@ export default {
 
     // 历史
     history(v) {
-      console.log(v)
-      if (!v.procInstId) {
+      if (v.procInstId) {
+        this.procInstId = v.procInstId
+        this.modalLsVisible = true
+        console.log('开开心心走到这，拿到该项procInstId:', v.procInstId)
+      } else {
         this.$message.error('流程实例ID不存在')
         return
       }
-      this.procInstId = v.procInstId
-      this.modalLsVisible = true
     },
 
     //
@@ -661,7 +649,19 @@ export default {
   position: relative;
 
   .midBtn {
-    margin-left: 3.3%;
+    margin-left: 8.3%;
   }
 }
-</style>
+.hisModal {
+  // background-color: red;
+  /deep/.ant-modal {
+    background-color: red;
+  }
+  /deep/.ant-modal-header {
+    background-color: red;
+  }
+  /deep/.ant-modal-body {
+    background-color: blue;
+  }
+}
+</style>