“我的已办” 操作功能添加+样式

src/assets/less/overwrite.css

@@ -9,6 +9,19 @@
 }
 a {
   color: #858282;
+}
+.pTitle img {
+  background-color: red;
+  display: inline-block;
+  margin-right: 4px;
+  border-radius: 8px;
+  margin: 0 0 5px 3px;
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
 }
  /deep/ .ant-tabs-nav {
   color: #616161;
@@ -37,9 +50,10 @@ a {
   color: #1489b8;
 }
 .dividerBgcB {
-  background-color: rgba(71, 168, 206);
+  background-color: #29b1ea;
   font-size: 20px;
   margin-right: 10px;
+  background-color: tr;
 }
 .cardIcon {
   font-size: 18px;
@@ -61,3 +75,12 @@ a {
   margin: 0;
   padding: 0 24px;
 }
+.pTitle {
+  height: 38px;
+  line-height: 38px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #092834;
+  box-shadow: 2px 2px 10px 6px rgba(49, 48, 48, 0.1) inset;
+  border-radius: 10px;
+}

src/assets/less/overwrite.less

@@ -16,6 +16,21 @@ a {
   color: rgb(133, 130, 130);
 }
 
+.pTitle img {
+  background-color: red;
+  display: inline-block;
+  margin-right:4px;
+  border-radius:8px;
+  margin: 0 0 5px 3px;
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
 /deep/.ant-tabs-nav {
   color: #616161;
 }
@@ -48,9 +63,10 @@ a {
 }
 //竖分隔
 .dividerBgcB {
-  background-color: rgba(71, 168, 206);
+  background-color: #29b1ea;
   font-size: 20px;
   margin-right: 10px;
+  background-color: tr;
 }
 
 //card 的小图
@@ -75,4 +91,13 @@ a {
   margin: 0;
   padding: 0 24px;
 }
-
+// 每个 card 任务的标题
+.pTitle {
+  height: 38px;
+  line-height: 38px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #092834;
+  box-shadow: 2px 2px 10px 6px rgba(49, 48, 48, 0.1) inset;
+  border-radius: 10px;
+}

src/utils/request.js

@@ -18,12 +18,13 @@ const service = axios.create({
     timeout: 9000 // 请求超时时间
 })
 
-const err = (error) => {
+const err = error => {
     if (error.response) {
         let data = error.response.data
         const token = Vue.ls.get(ACCESS_TOKEN)
         console.log('------异常响应------', token)
         console.log('------异常响应------', error.response.status)
+        console.log('????', error.response.status)
         switch (error.response.status) {
         case 403:
             notification.error({ message: '系统提示', description: '拒绝访问', duration: 4 })
@@ -79,26 +80,29 @@ const err = (error) => {
 }
 
 // 请求拦截器
-service.interceptors.request.use(config => {
-    const token = Vue.ls.get(ACCESS_TOKEN)
-    if (token) {
-        config.headers[ 'X-Access-Token' ] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
-    }
-    if (config.method == 'get') {
-        if (config.url.indexOf('sys/dict/getDictItems') < 0) {
-            config.params = {
-                _t: Date.parse(new Date()) / 1000,
-                ...config.params
+service.interceptors.request.use(
+    config => {
+        const token = Vue.ls.get(ACCESS_TOKEN)
+        if (token) {
+            config.headers['X-Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+        }
+        if (config.method == 'get') {
+            if (config.url.indexOf('sys/dict/getDictItems') < 0) {
+                config.params = {
+                    _t: Date.parse(new Date()) / 1000,
+                    ...config.params
+                }
             }
         }
+        return config
+    },
+    error => {
+        return Promise.reject(error)
     }
-    return config
-}, (error) => {
-    return Promise.reject(error)
-})
+)
 
 // response interceptor
-service.interceptors.response.use((response) => {
+service.interceptors.response.use(response => {
     return response.data
 }, err)
 
@@ -109,7 +113,4 @@ const installer = {
     }
 }
 
-export {
-    installer as VueAxios,
-    service as axios
-}
+export { installer as VueAxios, service as axios }

src/views/activiti/applyList.vue

@@ -9,6 +9,8 @@
               <a-input placeholder="请输入搜索关键词" v-model="queryParam.title"></a-input>
             </a-form-item>
           </a-col>
+
+          <!-- 状态 -->
           <a-col :md="6" :sm="8">
             <a-form-item label="状态">
               <a-select v-model="queryParam.status" placeholder="请选择" :allowClear="true">
@@ -19,6 +21,8 @@
               </a-select>
             </a-form-item>
           </a-col>
+
+          <!-- 结果 -->
           <a-col :md="6" :sm="8">
             <a-form-item label="结果">
               <a-select v-model="queryParam.result" placeholder="请选择" :allowClear="true">
@@ -29,6 +33,8 @@
               </a-select>
             </a-form-item>
           </a-col>
+
+          <!-- 创建时间 -->
           <a-col :md="6" :sm="10">
             <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-range-picker
@@ -42,6 +48,7 @@
             </a-form-item>
           </a-col>
 
+          <!-- 按钮 -->
           <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
             <a-col :md="6" :sm="12">
               <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
@@ -50,6 +57,8 @@
               >
             </a-col>
           </span>
+
+          <!-- 发起申请 -->
           <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
             <a-col :md="12" :sm="12">
               <a-button
@@ -62,6 +71,7 @@
               >
             </a-col>
           </span>
+
         </a-row>
       </a-form>
     </div>
@@ -172,6 +182,7 @@
       </a-table-column>
     </a-table>
     <!-- table区域-end -->
+
     <!--流程申请选择-->
     <a-drawer
       title="选择流程"
@@ -211,6 +222,7 @@
         </a-collapse>
       </div>
     </a-drawer>
+
     <!--流程表单-->
     <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="100%">
       <component
@@ -223,6 +235,7 @@
         @close=";(lcModa.visible = false), (lcModa.disabled = false)"
       ></component>
     </a-modal>
+
     <!-- <onl-cgform-auto-modal ref="modal" code="b0bea65bfce141deb0ae3fcb18982d76" /> -->
     <!--提交申请表单-->
     <a-modal title="提交申请" v-model="modalVisible" :mask-closable="false" :width="500" :footer="null">
@@ -235,12 +248,8 @@
             mode="multiple"
             :allowClear="true"
           >
-            <a-select-option 
-              v-for="(item, i) in assigneeList" 
-              :key="i" 
-              :value="item.username">
-
-              {{item.realname}}
+            <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">
+              {{ item.realname }}
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -268,11 +277,15 @@
         </div>
       </div>
     </a-modal>
+
+    <!-- 审批历史 -->
     <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'80%'" :footer="null">
       <div v-if="modalLsVisible">
         <historicDetail :procInstId="procInstId"></historicDetail>
       </div>
     </a-modal>
+
+    <!-- 确认撤回 -->
     <a-modal title="确认撤回" v-model="modalCancelVisible" :mask-closable="false" :width="500">
       <a-form ref="delForm" v-model="cancelForm" :label-width="70" v-if="modalCancelVisible">
         <a-form-item label="撤回原因" prop="reason">
@@ -284,6 +297,7 @@
         <a-button type="primary" :disabled="submitLoading" @click="handelSubmitCancel">提交</a-button>
       </div>
     </a-modal>
+
   </a-card>
 </template>
 
@@ -331,7 +345,6 @@ export default {
         }
       ],
 
-
       columns: [
         {
           dataIndex: 'name',
@@ -361,10 +374,10 @@ export default {
           scopedSlots: { customRender: 'action' }
         }
       ],
+
       description: '我的申请',
       dictOptions: [],
 
-      // 
       url: {
         list: '/actBusiness/listData',
         getProcessDataList: '/activiti_process/listData',
@@ -484,7 +497,7 @@ export default {
       }
       var params = this.getQueryParams() //查询条件
       this.loading = true
-      
+
       getAction(this.url.list, params).then(res => {
         if (res.success) {
           let records = res.result || []

src/views/activiti/form/demoForm2.vue

@@ -154,7 +154,7 @@ export default {
             //      await this.getDataListByName(element);
             //   });
             // }
-            console.log(dynamicKeyValueList)
+            // console.log('?????', dynamicKeyValueList)
             if (dynamicKeyValueList.length > 0) {
                 // 获取数据字典数据源
                 postAction('/sys/dict/getDictItems/getDictList', dynamicKeyValueList).then(dictData => {
@@ -250,12 +250,13 @@ export default {
                     formData.tableName = r.tableName
                     this.data = formData
                     console.log('表单回显数据', this.data)
-                    console.log(this.data)
+                    // console.log(this.data)
                     this.$refs.KFB.setData(this.data)
-                    // this.$nextTick(() => {
-                    //   this.$refs.KFB.form.setFieldsValue(pick(this.data, 'name'))
-
-                    // })
+                    this.$nextTick(() => {
+                        this.$refs.KFB.form.setFieldsValue(pick(this.data, 'name'))
+                        console.log(this.data)
+                        console.log('where')
+                    })
                     this.btndisabled = false
                 } else {
                     this.$message.error(res.message)

src/views/activiti/historicDetail.vue

@@ -7,55 +7,57 @@
         <span>流程审批进度历史</span>
       </p>
       <a-row style="position:relative">
-        <a-table :loading="loading" rowKey="id"
-                 :dataSource="data"
-                 :pagination="ipagination"
-                  ref="table">
-          <a-table-column title="#"  width="50">
+        <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>
+              <span> {{ i+1 }} </span>
             </template>
           </a-table-column>
-          <a-table-column title="任务名称" dataIndex="name"  width="150" align="center">
+          <a-table-column title="任务名称" dataIndex="name" width="150" align="center">
             <template slot-scope="t">
-              <span> {{t}} </span>
+              <span> {{ t }} </span>
             </template>
           </a-table-column>
-          <a-table-column title="处理人" dataIndex="assignees"  width="150" align="center">
+          <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">
+          <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-else>{{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">
+          <a-table-column title="审批意见" dataIndex="comment" width="150" align="center">
             <template slot-scope="t">
-              <span>{{t}}</span>
+              <span>{{ t }}</span>
             </template>
           </a-table-column>
-          <a-table-column title="耗时" dataIndex="duration"  width="150" align="center">
+          <a-table-column title="耗时" dataIndex="duration" width="150" align="center">
             <template slot-scope="t">
-              <span>{{millsToTime(t)}}</span>
+              <span>{{ millsToTime(t) }}</span>
             </template>
           </a-table-column>
-          <a-table-column title="创建时间" dataIndex="createTime"  width="150" align="center">
+          <a-table-column title="创建时间" dataIndex="createTime" width="150" align="center">
             <template slot-scope="t">
-              <span>{{t}}</span>
+              <span>{{ t }}</span>
             </template>
           </a-table-column>
-          <a-table-column title="完成时间" dataIndex="endTime"  width="150" align="center">
+          <a-table-column title="完成时间" dataIndex="endTime" width="150" align="center">
             <template slot-scope="t">
-              <span>{{t}}</span>
+              <span>{{ t }}</span>
             </template>
           </a-table-column>
           <a-table-column title="状态" dataIndex="endTime" key="aaa" width="150" align="center">
@@ -83,71 +85,71 @@
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
 export default {
-  name: "historic_detail",
-  mixins:[activitiMixin,JeecgListMixin],
-  props: {
+    name: 'HistoricDetail',
+    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,
-      data: [],
-      id: "",
-      imgUrl: "",
-      backRoute: ""
-    };
-  },
-  created() {
-    this.init();
-  },
-  watch: {
-  },
-  methods: {
-    loadData(){
-
-    },
-    init() {
-      this.id = this.procInstId;
-      this.imgUrl =this.url.getHighlightImg + this.id + "?time=" + new Date();
-      this.getDataList();
+        procInstId: {
+            type: String,
+            default: '',
+            required: true
+        }
     },
-    getDataList() {
-      this.loading = true;
-      this.getAction(this.url.historicFlow+this.id).then(res => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result;
-          if (!res.result || res.result.length == 0) {
-            this.$message.info( "未找到该记录审批历史数据,历史数据可能已被删除");
-          }
-        }else {
-          this.$message.error( res.message);
+    data () {
+        return {
+            url: {
+                historicFlow: '/actTask/historicFlow/',
+                getHighlightImg: `${this.doMian}/activiti/models/getHighlightImg/`
+            },
+            type: 0,
+            loading: false, // 表单加载状态
+            loadingImg: false,
+            data: [],
+            id: '',
+            imgUrl: '',
+            backRoute: ''
         }
-      });
     },
-    handleTableChange(pagination, filters, sorter) {
-      //分页、排序、筛选变化时触发
-      //TODO 筛选
-      if (Object.keys(sorter).length > 0) {
-        this.isorter.column = sorter.field;
-        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
-      }
-      this.ipagination = pagination;
-      // this.loadData();
+    created () {
+        this.init()
     },
+    watch: {
+    },
+    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) {
+                    this.data = res.result
+                    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>
+}
+</script>

src/views/user/Login.vue

@@ -3,13 +3,21 @@
     <div class="main">
       <!-- 待办 头部  -->
       <a-layout-header class="todoBox">
-        <span style="fontSize:16px;color:#092834;">我的待办</span>
-        <a-badge class="numTips">{{ data.length }}</a-badge>
-        <!-- 右边 -->
-        <a href="#" @click.stop.prevent="todo()" class="more">
-          <a-icon type="bell" class="bellStyle" />
-          <a-divider type="vertical" class="dividerBgcB" />更多</a
-        >
+        <div class="left fl">
+          <img src="@assets/todoImg.png" alt="?????" />
+          <div class="info">
+            <span style="fontSize:16px;color:#092834;">我的待办</span>
+            <a-badge class="numTips">{{ todoList.length }}</a-badge>
+          </div>
+        </div>
+
+        <div class="right fr">
+          <!-- 右边 -->
+          <a href="#" @click.stop.prevent="todo()" class="more">
+            <img src="@assets/more.png" alt="?????" />
+            <a-divider type="vertical" class="dividerBgcB" />更多
+          </a>
+        </div>
       </a-layout-header>
 
       <!-- OA工作台 -->
@@ -65,10 +73,11 @@ export default {
   components: {},
   data() {
     return {
-      data: [],
+      todoList: [],
       activeKeyAll: [],
       url: {
-        todoList: '/actTask/todoList'
+        todoList: '/actTask/todoList',
+        doneList: '/actTask/doneList'
       },
       //按钮弹框
       lcModal: {
@@ -86,13 +95,19 @@ export default {
     // 进入页面自动登录
     this.autoLogin()
       .then(res => {
-        this.getDataList() // 待办数量
+        this.getDataList() // 所有列表（待办、已办）
       })
       .then(res => {
         this.getActiveKeyAll() // OA 4个按钮
       })
   },
+  // mounted() {
+  //   this.init()
+  // },
   methods: {
+    // init() {
+    //   this.getDataList()
+    // },
     // 映射store/user.js 中 actions的方法
     ...mapActions(['Login']),
 
@@ -123,12 +138,23 @@ export default {
 
     // 拿到 消息数量
     getDataList() {
+      //待办列表
       this.postFormAction(this.url.todoList, {}).then(res => {
         if (res.success) {
-          this.data = res.result || []
-          console.log('消息数量：', this.data.length)
+          this.todoList = res.result || []
+          console.log('登录页待办数量：', this.todoList.length)
         }
-      })
+      }),
+        // 已办列表
+        this.postFormAction(this.url.doneList, this.searchForm).then(res => {
+          this.loading = false
+          if (res.success) {
+            this.doneList = res.result || []
+            console.log('登录页渲染已办列表', this.doneList.length)
+          } else {
+            this.$message.error(res.message)
+          }
+        })
     },
     // 获取 OA 按钮
     getActiveKeyAll() {
@@ -187,44 +213,68 @@ export default {
   height: 100%;
   background-color: rgba(#f7e0d4);
 }
-// 待办
+.main {
+  min-height: 750px;
+}
+//上面蓝盒子
 .todoBox {
-  padding-top: 30px;
+  padding: 18px;
   height: 180px;
   width: 100%;
   background-color: #347b98;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.1), 0 6px 20px 1px rgba(0, 0, 0, 0.19);
   margin-bottom: 20px;
 }
 .todoBox span {
-  color: #092834;
   font-weight: 700;
   position: relative;
   letter-spacing: 1px;
 }
+// 待办小黑板
+.left {
+  position: relative;
+  height: 100%;
+  // padding: 8px;
+  box-shadow: 1px 1px 6px rgba(166, 196, 207, 0.1);
+}
+// 黑板图片
+.left img {
+  width: 100%;
+  height: 100%;
+}
+//黑板内信息
+.left .info {
+  position: absolute;
+  top: 32%;
+  left: 20%;
+}
+
 // 待办 数量
 .numTips {
   position: absolute;
-  top: -10px;
+  top: -14px;
   left: 0px;
-  background-color: #fc600a;
-  padding: 4px 6px;
+  padding: 3px 8px;
+  text-align: center;
+  line-height: 20px;
+  background-color: red;
   border-radius: 50%;
   color: white !important;
+  font-size: 16px;
 }
 
 // 更多
 .more {
   height: 46px;
   line-height: 46px;
-  margin-top: 20px;
-  padding: 0 30px;
+  margin: 40px 8px 0 0;
+  padding: 0 10px;
   color: #474b4d;
   background-color: rgba(#f7e0d4);
   border-radius: 4px;
   float: right;
   letter-spacing: 2px;
-  // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 }
 
 // OA 工作台

src/views/user/Todo.vue

@@ -18,7 +18,7 @@
       <a-layout-content>
         <a-tabs default-active-key="wait" @change="callback" style="text-align: center;" className="todoTabs">
           <!-- 我的申请 -->
-          <a-tab-pane key="apply" tab="我的申请">
+          <a-tab-pane key="apply" tab="我的申请" class="apply">
             <div v-for="item in applyList" :key="item.id">
               <a-card
                 style="width: 100%;
@@ -28,8 +28,8 @@
                 border:none;
                 background-color:rgba(247, 224, 212,.8);"
               >
-                <p style="fontSize:16px;fontWeight:700;color:#092834;">
-                  <a-icon type="highlight" class="cardIcon" />
+                <p class="pTitle">
+                  <img src="@assets/look.gif" width="30px;"/>
                   {{ item.processName }}
                 </p>
                 <p>当前审批环节：{{ item.currTaskName }}</p>
@@ -78,13 +78,13 @@
 
                 <p style="float:right;">发起人：{{ item.createBy }}</p>
 
-                <a-divider class="dividerBgcO"></a-divider>
+                <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
               </a-card>
             </div>
           </a-tab-pane>
 
           <!-- 我的待办 -->
-          <a-tab-pane key="wait" tab="我的待办" force-render>
+          <a-tab-pane key="wait" tab="我的待办" force-render class="wait">
             <div v-for="item in todoList" :key="item.id">
               <a-card
                 style="width: 100%;
@@ -94,13 +94,18 @@
                 border:none;
                 background-color:rgba(247, 224, 212,.8);"
               >
-                <p style="fontSize:16px;fontWeight:700;color:#092834;">
-                  <!-- <a-icon type="bell" class="cardIcon" /> -->
-                  <img src="@assets/look.png" width="30px;" alt="????" />
+                <p class="pTitle">
+                  <img
+                    src="@assets/look.gif"
+                    width="30px;"
+                     
+                    style="marginRight:4px;      borderRadius:8px;"
+                  />
                   {{ item.processName }}
                 </p>
                 <p>任务名称：{{ item.name }}</p>
                 <p>创建时间：{{ item.createTime }}</p>
+
                 <!-- 优先级 -->
                 <p>
                   优先级：
@@ -155,12 +160,12 @@
                 <!-- 发起人 -->
                 <p style="float:right;marginBottom:30px;">发起人：{{ item.applyer }}</p>
 
-                <a-divider dashed style="background:#ccc;"></a-divider>
+                <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
 
                 <!-- 操作按钮 -->
                 <div class="operation">
                   <p style="fontSize:16px;fontWeight:700;color:#092834;">
-                    <img src="@assets/down.png" width="30px;" alt="???? " />
+                    <img src="@assets/down.png" width="26px;"   style="marginRight:4px;" />
                     操作
                   </p>
 
@@ -175,7 +180,7 @@
                       详情
                     </a-button>
 
-                    <!-- 挂起状态 按钮不可以 -->
+                    <!-- 挂起 状态 按钮不可用 -->
                     <span
                       v-if="item.isSuspended == true"
                       style="cursor: no-drop;color: #999999;"
@@ -186,12 +191,12 @@
                       <a-button class="itemBtn" disabled>历史</a-button>
                     </span>
 
-                    <!-- 激活状态 -->
+                    <!-- 激活 状态 -->
                     <span v-else>
                       <a-button
                         class="itemBtn mid"
                         ghost
-                        @click="passTask(item.id)"
+                        @click="passTask(item)"
                         style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);
                         color:#4e73b9;"
                       >
@@ -201,7 +206,7 @@
                       <a-button
                         class="itemBtn mid"
                         ghost
-                        @click="backTask(item.id)"
+                        @click="backTask(item)"
                         style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.7);color:#ea472c;"
                       >
                         驳回
@@ -210,7 +215,7 @@
                       <a-button
                         class="itemBtn mid"
                         ghost
-                        @click="delegateTask(item.id)"
+                        @click="delegateTask(item)"
                         style="color:gray;box-shadow: 6px 6px 6px rgba(128, 128, 128,.7);color:orange;"
                       >
                         委托
@@ -220,8 +225,12 @@
                     <a-button
                       class="itemBtn"
                       ghost
-                      @click="history(item.id)"
-                      style="color:gray;box-shadow: 4px 4px 4px rgba(128, 128, 128,.9);color#f2c617;position:absolute;right:0;marginRight:0;"
+                      @click="history(item)"
+                      style="color:gray;
+                             box-shadow: 4px 4px 4px rgba(128, 128, 128,.9);
+                             position:absolute;
+                             right:0;
+                             marginRight:0;"
                     >
                       历史
                     </a-button>
@@ -258,7 +267,8 @@
               <!-- 审批操作 -->
               <a-modal :title="modalTaskTitle" v-model="modalTaskVisible" :mask-closable="false" :width="500">
                 <div v-if="modalTaskVisible">
-                  <a-form ref="form" :model="form" :label-width="85" :rules="formValidate">
+                  <!-- 下面删除 :rules="formValidate" -->
+                  <a-form ref="form" :model="form" :label-width="85">
                     <a-form-item label="审批意见" prop="reason">
                       <a-input type="textarea" v-model="form.comment" :rows="4" />
                     </a-form-item>
@@ -324,7 +334,7 @@
           </a-tab-pane>
 
           <!-- 我的已办 -->
-          <a-tab-pane key="done" tab="我的已办">
+          <a-tab-pane key="done" tab="我的已办" class="done">
             <div v-for="item in doneList" :key="item.id">
               <a-card
                 style="width: 100%;
@@ -334,28 +344,83 @@
                 border:none;
                 background-color:rgba(247, 224, 212,.8);"
               >
-                <p style="fontSize:16px;fontWeight:700;color:#092834;">
-                  <a-icon type="check" class="cardIcon" />
-                  任务名称：{{ item.name }}
+                <p class="pTitle">
+                  <img src="@assets/look.gif" width="30px;" style="marginRight:4px;borderRadius:8px;" />
+                  {{ item.processName }}
                 </p>
-                <p>所属流程：{{ item.processName }}</p>
+                <p>任务名称：{{ item.name }}</p>
                 <p>创建时间：{{ item.createTime }}</p>
 
-                <a-divider class="dividerBgcO"></a-divider>
-
+                <!-- 审批操作 -->
                 <p style="float:left;">
                   审批操作：
                   <span
+                    v-if="item.deleteReason == '审批通过'"
                     style="background:rgba(20, 137, 184,.3);
                     padding:4px 10px;
                     borderRadius:2px;
                     letterSpacing:1px;
                     color: #092834;"
+                  >
+                    {{ item.deleteReason }}</span
+                  >
+                  <span
+                    v-if="item.deleteReason == '审批驳回'"
+                    style="background:rgba(234, 71, 44,.5);
+                    padding:4px 10px;
+                    borderRadius:2px;
+                    letterSpacing:1px;
+                    color: #092834;"
                   >
                     {{ item.deleteReason }}
                   </span>
                 </p>
                 <p style="float:right;">发起人：{{ item.applyer }}</p>
+
+                <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
+
+                <!-- 操作按钮 -->
+                <div class="operation">
+                  <p style="fontSize:16px;fontWeight:700;color:#092834;">
+                    <img src="@assets/down.png" width="26px;" alt="???? " style="marginRight:4px;" />
+                    操作
+                  </p>
+
+                  <div class="btns">
+                    <a-button
+                      class="itemBtn"
+                      ghost
+                      @click="detail(item)"
+                      style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);
+                      color:#4e73b9;"
+                    >
+                      表单数据
+                    </a-button>
+
+                    <a-button
+                      class="itemBtn"
+                      ghost
+                      @click="Donehistory(item)"
+                      style="color:gray;
+                             box-shadow: 8px 8px 8px rgba(128, 128, 128,.7)"
+                    >
+                      审批历史
+                    </a-button>
+
+                    <a-popconfirm title="确定删除吗?" placement="left">
+                      <a-button
+                        class="itemBtn"
+                        ghost
+                        @click="remove(item)"
+                        style="color:gray;
+                               box-shadow: 7px 7px 7px rgba(128, 128, 128,.7);
+                               color:red;"
+                      >
+                        删除
+                      </a-button>
+                    </a-popconfirm>
+                  </div>
+                </div>
               </a-card>
             </div>
           </a-tab-pane>
@@ -381,27 +446,31 @@ export default {
   components: { JSelectUserByDep },
   data() {
     return {
-      todoList: [], // 待办列表
-      applyList: [], // 申请列表
-      doneList: [], // 已办列表
-      url: {
-        todoList: '/actTask/todoList', // 待办
-        list: '/actBusiness/listData', // 申请
-        doneList: '/actTask/doneList' // 已办
-      },
-      /*历史*/
+      openSearch: true,
+      openTip: true,
+      loading: true, // 表单加载状态
       modalLsVisible: false,
-      modalTaskTitle: '',
-      modalTaskVisible: false,
-      submitLoading: false, // 添加或编辑提交状态
-      procInstId: '',
-      lcModal: {
-        title: '',
-        disabled: false,
-        visible: false,
-        formComponent: null,
-        isNew: false
+      userLoading: false, //已办
+      backLoading: false,
+      selectCount: 0, // 多选计数
+      selectList: [], // 多选数据
+      assigneeList: [],
+      backList: [
+        {
+          key: '-1',
+          name: '发起人'
+        }
+      ],
+      error: '',
+      showAssign: false,
+      searchForm: {
+        // 搜索框对应data对象
+        name: ''
       },
+
+      modalTaskTitle: '',
+      modalTitle: '', // 添加或编辑标题
+
       form: {
         id: '',
         userId: '',
@@ -414,29 +483,85 @@ export default {
         sendSms: false,
         sendEmail: false
       },
-      formValidate: {
-        // 表单验证规则
-      },
-      error: '',
-      showAssign: false,
-      assigneeList: [],
+      // formValidate: {
+      //   // 表单验证规则
+      // },
+
+      submitLoading: false, // 添加或编辑提交状态
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+      dictPriority: [],
       isGateway: false,
-      backLoading: false,
-      backList: [
-        {
-          key: '-1',
-          name: '发起人'
-        }
-      ]
+      lcModal: {
+        title: '',
+        disabled: false,
+        visible: false,
+        formComponent: null,
+        isNew: false
+      },
+
+      url: {
+        todoList: '/actTask/todoList', // 待办
+
+        doneList: '/actTask/doneList', // 已办
+        deleteHistoricTask: '/actTask/deleteHistoric/', //已办接口
+        list: '/actBusiness/listData', // 申请
+
+        deleteHistoricTask: '/actTask/deleteHistoric/', //已办接口
+        pass: '/actTask/pass',
+        back: '/actTask/back',
+        backToTask: '/actTask/backToTask',
+        delegate: '/actTask/delegate',
+        getNextNode: '/activiti_process/getNextNode',
+        getNode: '/activiti_process/getNode/',
+        getBackList: '/actTask/getBackList/',
+        passAll: '/actTask/passAll/',
+        backAll: '/actTask/backAll/'
+      },
+
+      todoList: [], // 待办列表
+      applyList: [], // 申请列表
+      doneList: [], // 已办列表
+
+      modalTaskVisible: false,
+      procInstId: ''
     }
   },
-  computed: {},
 
   created() {
     this.getDataList()
   },
-
+  mounted() {
+    this.init()
+  },
   methods: {
+    init() {
+      this.getDataList()
+    },
+    loadData() {},
+
+    // 拿到 所有列表（待办、已办）
+    getDataList() {
+      // 待办
+      getAction(this.url.todoList, {}).then(res => {
+        if (res.success) {
+          this.todoList = res.result || []
+          this.total = this.data.leading
+          console.log('待办列表', this.todoList)
+        }
+      }),
+        // 已办
+        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)
+          }
+        })
+    },
+
     // 初始化表
     forminitial() {
       this.form = {
@@ -453,10 +578,6 @@ export default {
       }
     },
 
-    init() {
-      this.getDataList()
-    },
-    loadData() {},
     // 切换tabs值
     callback(key) {
       console.log(key)
@@ -464,7 +585,7 @@ export default {
         getAction(this.url.list).then(res => {
           if (res.success) {
             this.applyList = res.result || []
-            console.log('申请列表', this.applyList)
+            console.log('我的申请', this.applyList)
           }
         })
       }
@@ -472,22 +593,12 @@ export default {
         getAction(this.url.doneList).then(res => {
           if (res.success) {
             this.doneList = res.result || []
-            console.log('已办列表', this.doneList)
+            console.log('我的已办', this.doneList)
           }
         })
       }
     },
-    // 拿到 todoList
-    getDataList() {
-      getAction(this.url.todoList, {}).then(res => {
-        if (res.success) {
-          this.todoList = res.result || []
-          console.log('待办列表', this.todoList)
-        }
-      })
-    },
 
-    // -------------------------------------
     handleSearch() {
       this.getDataList()
     },
@@ -504,7 +615,6 @@ export default {
       this.$refs.table.selectAll(false)
     },
 
-    // -------------------------------------
     // 提交
     handelSubmit() {
       console.log('提交')
@@ -577,10 +687,10 @@ export default {
         })
       }
     },
-    // -------------------------------------
-    // 申请详情
+
+    // 详情
     detail(item) {
-      console.log('该id所有信息', item.routeName)
+      console.log('详情吗？', item)
       if (!item.routeName) {
         this.$message.warning('该流程信息未配置表单，请联系开发人员！')
         return
@@ -609,7 +719,7 @@ export default {
       }
     },
 
-    // 审批通过
+    // 通过
     passTask(v) {
       console.log('我在哪是啥', v)
       this.forminitial()
@@ -650,8 +760,9 @@ export default {
       )
     },
 
-    // 驳回任务
+    // 审批驳回
     changeBackTask(v) {
+      console.log('驳回吗？', v)
       if (v == '-1') {
         return
       }
@@ -672,8 +783,9 @@ export default {
       })
     },
 
-    // 审批驳回
+    // 操作 驳回
     backTask(v) {
+      console.log('驳回吗？', v)
       this.forminitial()
       this.modalTaskTitle = '审批驳回'
       this.form.id = v.id
@@ -704,6 +816,7 @@ export default {
 
     // 委托他人代办
     delegateTask(v) {
+      console.log('委托吗？', v)
       this.forminitial()
       this.modalTaskTitle = '委托他人代办'
       this.form.id = v.id
@@ -713,15 +826,46 @@ export default {
       this.modalTaskVisible = true
     },
 
-    // 历史
+    //待办 历史
     history(v) {
+      console.log('历史吗？', v)
       if (!v.procInstId) {
         this.$message.error('流程实例ID不存在')
         return
       }
+      console.log(v.procInstId)
       this.procInstId = v.procInstId
       this.modalLsVisible = true
     },
+    // ------------------------------------
+    // 审批 历史（已办）
+    Donehistory(item) {
+      console.log('已办审批历史吗？', item)
+      if (!item.procInstId) {
+        console.log('item.procInstId')
+        this.procInstId = item.procInstId
+        this.modalLsVisible = true
+        this.$message.error('流程实例ID不存在')
+        return
+      }
+      this.procInstId = item.procInstId
+      this.modalLsVisible = true
+    },
+
+    // 我的已办 methods   问题
+    remove(item) {
+      console.log('点击这项是：', item)
+      this.postFormAction(this.url.deleteHistoricTask, item.id).then(res => {
+        console.log(res)
+        if (res.success) {
+          console.log('要删除的这项id是：', item.id)
+          this.$message.success('操作成功')
+          this.getDataList()
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
 
     //通过所有
     passAll() {
@@ -755,6 +899,7 @@ export default {
 
     // 驳回所有
     backAll() {
+      console.log('111')
       if (this.selectCount <= 0) {
         this.$message.warning('您还未选择要驳回的数据')
         return
@@ -837,14 +982,15 @@ export default {
   color: white;
   letter-spacing: 1px;
 }
-.btns {
-  // background-color: rgba(235, 186, 26, 0.4);
+// ----------------------------------
+//待办 操作按钮
+.wait .btns {
   position: relative;
 }
-.operation /deep/.ant-btn {
+.wait .operation /deep/.ant-btn {
   padding: 0;
   line-height: 0;
-  border: 1px dashed rgba(128, 128, 128, 0.1);
+  border: 1px solid rgba(128, 128, 128, 0.1);
   border-radius: 18px;
   padding: 26px 14px;
 }
@@ -854,4 +1000,21 @@ export default {
 .itemBtn {
   font-weight: 700;
 }
+
+.done .btns {
+  display: flex;
+}
+// ----------------------------------
+//已办 操作按钮
+.done .btns .itemBtn {
+  margin-right: 20%;
+  padding: 0;
+  line-height: 0;
+  border-radius: 18px;
+  padding: 26px 14px;
+  border: 1px solid rgba(128, 128, 128, 0.1);
+}
+.done .itemBtn:nth-last-child(1) {
+  margin-right: 0;
+}
 </style>

src/views/user/todoNav/Apply.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="apply">
+    <!-- <a-tab-pane key="apply" tab="我的申请">
+      <div v-for="item in applyList" :key="item.id"> -->
+
+    <a-card
+      style="width: 100%;
+                border-radius:20px;
+                text-align:left;
+                marginBottom:20px;
+                border:none;
+                background-color:rgba(247, 224, 212,.8);">
+      <p style="fontSize:16px;fontWeight:700;color:#092834;">
+        <a-icon type="highlight" class="cardIcon" />
+        {{ item.processName }}
+      </p>
+      <p>当前审批环节：{{ item.currTaskName }}</p>
+      <p>创建时间：{{ item.createTime }}</p>
+
+      <!-- 申请状态 -->
+      <p>
+        状态：
+        <span
+          v-if="item.status == 0"
+          class="statusComm"
+          style="background:rgb(9, 40, 52,.1);">
+          草稿
+        </span>
+
+        <span
+          v-if="item.status == 1"
+          class="statusComm"
+          style="background:rgb(252, 96, 10,.2);">
+          处理中
+        </span>
+
+        <span
+          v-if="item.status == 2"
+          class="statusComm"
+          style="background:rgb(9, 40, 52,.2);">
+          已结束
+        </span>
+
+        <span
+          v-if="item.status == 3"
+          class="statusComm"
+          style="background:rgb(9, 40, 52,.1);">
+          已撤回
+        </span>
+      </p>
+
+      <!-- 申请结果 -->
+      <p style="float:left;">
+        结果：
+
+        <span class="resultComm" v-if="item.result == 0" style="background:rgba(52, 123, 152,.7);">
+          未提交
+        </span>
+
+        <span class="resultComm" v-else-if="item.result == 1" style="background:rgb(252, 96, 10,.8);">
+          处理中
+        </span>
+
+        <span class="resultComm" v-else-if="item.result == 2" style="background:rgb(9, 40, 52,.8);">
+          通过
+        </span>
+
+        <span class="resultComm" v-else-if="item.result == 3" style="background:rgba(9, 40, 52,.7);">
+          驳回
+        </span>
+      </p>
+
+      <p style="float:right;">发起人：{{ item.createBy }}</p>
+
+      <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
+    </a-card>
+    <!-- </div>
+    </a-tab-pane> -->
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style src="@assets/less/overwrite.less" lang="less" scoped></style>
+<style lang="less">
+@import '~@assets/less/common.less';
+</style>
+<style lang="less" scoped></style>

src/views/user/todoNav/Done.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="done">
+    <!-- <a-tab-pane key="done" tab="我的已办">
+      <div v-for="item in doneList" :key="item.id"> -->
+        <a-card
+          style="width: 100%;
+                border-radius:20px;
+                text-align:left;
+                marginBottom:20px;
+                border:none;
+                background-color:rgba(247, 224, 212,.8);"
+        >
+          <p style="fontSize:16px;fontWeight:700;color:#092834;">
+            <img
+              src="@assets/look.png"
+              width="30px;"
+              alt="????"
+              style="background: rgb(34,193,195);
+                           background: linear-gradient(0deg, rgba(34,193,195,1) 0%,
+                           rgba(253,187,45,1) 100%);borderRadius:6px;"
+            />
+            {{ item.processName }}
+          </p>
+          <p>任务名称：{{ item.name }}</p>
+          <p>创建时间：{{ item.createTime }}</p>
+
+          <!-- 审批操作 -->
+          <p style="float:left;">
+            审批操作：
+            <span
+              style="background:rgba(20, 137, 184,.3);
+                    padding:4px 10px;
+                    borderRadius:2px;
+                    letterSpacing:1px;
+                    color: #092834;"
+            >
+              {{ item.deleteReason }}
+            </span>
+          </p>
+          <p style="float:right;">发起人：{{ item.applyer }}</p>
+
+          <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
+
+          <!-- 操作按钮 -->
+          <div class="operation">
+            <p style="fontSize:16px;fontWeight:700;color:#092834;">
+              <img src="@assets/down.png" width="30px;" alt="???? " />
+              操作
+            </p>
+
+            <div class="btns">
+              <a-button
+                class="itemBtn"
+                ghost
+                @click="detail(item)"
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);
+                      color:#4e73b9;"
+              >
+                表单数据
+              </a-button>
+
+              <a-button
+                class="itemBtn"
+                ghost
+                @click="Donehistory(item.id)"
+                style="color:gray;box-shadow: 4px 4px 4px rgba(128, 128, 128,.9);color#f2c617;position:absolute;right:0;marginRight:0;"
+              >
+                审批历史
+              </a-button>
+
+              <a-popconfirm title="确定删除吗?">
+                <a-button
+                  class="itemBtn mid"
+                  ghost
+                  @click="remove(item.id)"
+                  style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.7);color:red;"
+                >
+                  删除
+                </a-button>
+              </a-popconfirm>
+            </div>
+          </div>
+        </a-card>
+      <!-- </div>
+    </a-tab-pane> -->
+  </div>
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style src="@assets/less/overwrite.less" lang="less" scoped></style>
+<style lang="less">
+@import '~@assets/less/common.less';
+</style>
+<style lang="less" scoped></style>

src/views/user/todoNav/Wait.vue

@@ -0,0 +1,240 @@
+<template>
+  <div id="wait">
+    <!-- <a-tab-pane key="wait" tab="我的待办" force-render>
+      <div v-for="item in todoList" :key="item.id"> -->
+        <a-card
+          style="width: 100%;
+                borderRadius:20px;
+                text-align:left;
+                marginBottom:20px;
+                border:none;
+                background-color:rgba(247, 224, 212,.8);"
+        >
+          <p style="fontSize:16px;fontWeight:700;color:#092834;">
+            <img src="@assets/look.png" width="30px;" alt="????" />
+            {{ item.processName }}
+          </p>
+          <p>任务名称：{{ item.name }}</p>
+          <p>创建时间：{{ item.createTime }}</p>
+          <!-- 优先级 -->
+          <p>
+            优先级：
+            <span
+              class="priorityComm"
+              v-if="item.priority == 0"
+              style="background:rgba(252, 96, 10,.4);
+                    padding:2px 6px;
+                    borderRadius:2px;
+                    color:#092834;"
+            >
+              普通
+            </span>
+            <span
+              class="priorityComm"
+              v-else-if="item.priority == 1"
+              style="background:#FC600A;
+                    padding:4px 10px;
+                    borderRadius:6px;
+                    color:white;"
+            >
+              重要
+            </span>
+
+            <span
+              class="priorityComm"
+              v-else-if="item.priority == 2"
+              style="background:red;
+                    padding:4px 10px;
+                    borderRadius:6px;
+                    color:white;"
+            >
+              紧急
+            </span>
+            <span class="priorityComm" v-else style="background:#999;">
+              无
+            </span>
+          </p>
+
+          <!-- 状态 -->
+          <p style="float:left;marginBottom:30px;">
+            状态：
+            <span v-if="item.isSuspended == false" style="background:rgba(252, 96, 10,.8);" class="resultComm">
+              已激活
+            </span>
+            <span v-if="item.isSuspended == true" style="background:rgba(20, 137, 184,.8);" class="resultComm">
+              已挂起
+            </span>
+            {{ item.status }}
+          </p>
+
+          <!-- 发起人 -->
+          <p style="float:right;marginBottom:30px;">发起人：{{ item.applyer }}</p>
+
+          <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
+
+          <!-- 操作按钮 -->
+          <div class="operation">
+            <p style="fontSize:16px;fontWeight:700;color:#092834;">
+              <img src="@assets/down.png" width="30px;" alt="???? " />
+              操作
+            </p>
+
+            <div class="btns">
+              <a-button
+                class="itemBtn"
+                ghost
+                @click="detail(item)"
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);
+                      color:#4e73b9;"
+              >
+                详情
+              </a-button>
+
+              <!-- 挂起状态 按钮不可以 -->
+              <span
+                v-if="item.isSuspended == true"
+                style="cursor: no-drop;color: #999999;"
+                title="流程已被挂起，无法操作！"
+              >
+                <a-button class="itemBtn" disabled>通过</a-button>
+                <a-button class="itemBtn" disabled>驳回</a-button>
+                <a-button class="itemBtn" disabled>历史</a-button>
+              </span>
+
+              <!-- 激活状态 -->
+              <span v-else>
+                <a-button
+                  class="itemBtn mid"
+                  ghost
+                  @click="passTask(item.id)"
+                  style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);
+                        color:#4e73b9;"
+                >
+                  通过
+                </a-button>
+
+                <a-button
+                  class="itemBtn mid"
+                  ghost
+                  @click="backTask(item.id)"
+                  style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.7);color:#ea472c;"
+                >
+                  驳回
+                </a-button>
+
+                <a-button
+                  class="itemBtn mid"
+                  ghost
+                  @click="delegateTask(item.id)"
+                  style="color:gray;box-shadow: 6px 6px 6px rgba(128, 128, 128,.7);color:orange;"
+                >
+                  委托
+                </a-button>
+              </span>
+
+              <a-button
+                class="itemBtn"
+                ghost
+                @click="history(item.id)"
+                style="color:gray;box-shadow: 4px 4px 4px rgba(128, 128, 128,.9);color#f2c617;position:absolute;right:0;marginRight:0;"
+              >
+                历史
+              </a-button>
+            </div>
+          </div>
+        </a-card>
+
+        <!-- 审批历史 -->
+        <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'80%'" :footer="null">
+          <div v-if="modalLsVisible">
+            <component :is="historicDetail" :procInstId="procInstId"></component>
+          </div>
+        </a-modal>
+
+        <!--流程表单-->
+        <a-modal :title="lcModal.title" v-model="lcModal.visible" :footer="null" :maskClosable="false" width="100%">
+          <component
+            :disabled="lcModal.disabled"
+            v-if="lcModal.visible"
+            :is="lcModal.formComponent"
+            :processData="lcModal.processData"
+            :isNew="lcModal.isNew"
+            @close=";(lcModal.visible = false), (lcModal.disabled = false)"
+            @getDataList="getDataList"
+          ></component>
+        </a-modal>
+
+        <!-- 审批操作 -->
+        <a-modal :title="modalTaskTitle" v-model="modalTaskVisible" :mask-closable="false" :width="500">
+          <div v-if="modalTaskVisible">
+            <a-form ref="form" :model="form" :label-width="85" :rules="formValidate">
+              <a-form-item label="审批意见" prop="reason">
+                <a-input type="textarea" v-model="form.comment" :rows="4" />
+              </a-form-item>
+              <a-form-item label="下一审批人" prop="assignees" v-show="showAssign" :error="error">
+                <a-select
+                  v-model="form.assignees"
+                  placeholder="请选择"
+                  allowClear
+                  mode="multiple"
+                  :loading="userLoading"
+                >
+                  <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{
+                    item.realname
+                  }}</a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-form-item label="下一审批人" v-show="isGateway">
+                <span>分支网关处暂不支持自定义选择下一审批人，将发送给下一节点所有人</span>
+              </a-form-item>
+              <div v-show="form.type == 1">
+                <a-form-item label="驳回至">
+                  <a-select v-model="form.backTaskKey" :loading="backLoading" @change="changeBackTask">
+                    <a-select-option v-for="(item, i) in backList" :key="i" :value="item.key">{{
+                      item.name
+                    }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+                <a-form-item label="指定原节点审批人" prop="assignees" v-show="form.backTaskKey != -1" :error="error">
+                  <a-select
+                    v-model="form.assignees"
+                    placeholder="请选择"
+                    allowClear
+                    mode="multiple"
+                    :loading="userLoading"
+                  >
+                    <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.id">{{
+                      item.username
+                    }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </div>
+              <a-form-item label="选择委托人" prop="userId" :error="error" v-show="form.type == 2">
+                <JSelectUserByDep v-model="form.userId" :multi="false"></JSelectUserByDep>
+              </a-form-item>
+              <a-form-item label="消息通知">
+                <a-checkbox v-model="form.sendMessage">站内消息通知</a-checkbox>
+                <a-checkbox v-model="form.sendSms" disabled>短信通知</a-checkbox>
+                <a-checkbox v-model="form.sendEmail" disabled>邮件通知</a-checkbox>
+              </a-form-item>
+            </a-form>
+          </div>
+          <div slot="footer">
+            <a-button type="text" @click="modalTaskVisible = false">取消</a-button>
+            <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
+          </div>
+        </a-modal>
+      <!-- </div>
+    </a-tab-pane> -->
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style src="@assets/less/overwrite.less" lang="less" scoped></style>
+<style lang="less">
+@import '~@assets/less/common.less';
+</style>
+<style lang="less" scoped></style>