【审批历史列表】完成、按钮颜色跟PC端统一

src/assets/less/overwrite.css

@@ -96,10 +96,18 @@ img {
   color: #092834;
   font-weight: 700;
 }
-.content .main .operation /deep/ .ant-btn {
+.content .main .cardTask .operation /deep/ .ant-btn {
   border-radius: 999em;
-  border: 1px solid #f2f2f6;
-  margin-right: 20px;
+  border: none;
+  padding: 0 10px;
+  border: 1px solid rgba(106, 105, 105, 0.1);
+  margin-right: 2px;
+}
+.content .main .cardTask /deep/ .ant-divider {
+  color: #e7e9eb !important;
+}
+.content .main .cardTask /deep/ .ant-divider-horizontal {
+  margin-bottom: 16px;
 }
 .content .main /deep/ .ant-card-head {
   color: #092834;
@@ -149,12 +157,26 @@ img {
 }
 .content .main .todoBody .resultComm {
   padding: 4px 10px;
-  color: white;
+  color: black;
   letter-spacing: 1px;
 }
+.content .main .todoBody .doneDeleteReason {
+  padding: 4px 10px;
+  border-radius: 2px;
+  letter-spacing: 1px;
+  color: black;
+}
+.content .main .todoBody .comment {
+  color: black;
+  background: rgba(128, 128, 128, 0.5);
+  padding: 4px 10px;
+}
 .content /deep/ .ant-empty-image {
   margin-top: 120px;
 }
 .content /deep/ .ant-modal-footer {
   display: none;
 }
+.content /deep/ .ant-card-body {
+  padding: 16px 16px 20px 16px;
+}

src/assets/less/overwrite.less

@@ -114,13 +114,22 @@ img {
           color: #092834;
           font-weight: 700;
         }
+        // 操作 按钮样式
+        /deep/.ant-btn {
+          border-radius: 999em;
+          border: none;
+          padding: 0 10px;
+          border: 1px solid rgba(106, 105, 105,.1);
+          margin-right: 2px;
+        }
+      }
+      /deep/.ant-divider {
+        color: #e7e9eb !important;
+
+      }
+      /deep/.ant-divider-horizontal {
+        margin-bottom: 16px;
       }
-    }
-    // 操作 按钮样式
-    .operation /deep/.ant-btn {
-      border-radius: 999em;
-      border: 1px solid #f2f2f6;
-      margin-right: 20px;
     }
 
     /deep/.ant-card-head {
@@ -130,7 +139,7 @@ img {
       letter-spacing: 1px;
     }
 
-    // 3个tabs ===================================
+    // 3个tabs ===========================
     /deep/.ant-tabs-nav-container {
       padding: 1px 4px 2px 4px;
       text-align: center;
@@ -156,6 +165,7 @@ img {
       background: rgba(26, 133, 229, 0.9);
       border: none;
     }
+
     /deep/.ant-tabs-bar {
       border: none;
     }
@@ -163,8 +173,7 @@ img {
     /deep/.ant-tabs-ink-bar {
       height: 0;
     }
-
-    //tabs 内容
+    //状态、结果等
     .todoBody {
       //优先级
       .priorityComm {
@@ -182,9 +191,22 @@ img {
       // 结果
       .resultComm {
         padding: 4px 10px;
-        color: white;
+        color: black;
         letter-spacing: 1px;
       }
+      // 审批操作(驳回原因)
+      .doneDeleteReason {
+        padding: 4px 10px;
+        border-radius: 2px;
+        letter-spacing: 1px;
+        color: black;
+      }
+      //审核意见
+      .comment {
+        color: black;
+        background: rgba(128, 128, 128, 0.5);
+        padding: 4px 10px;
+      }
     }
   }
 
@@ -192,7 +214,13 @@ img {
   /deep/.ant-empty-image {
     margin-top: 120px;
   }
+
+  // 去掉modal的确定
   /deep/.ant-modal-footer {
     display: none;
   }
+  // 每个任务
+  /deep/.ant-card-body {
+    padding: 16px 16px 20px 16px;
+  }
 }

src/views/activiti/doneManage.vue

@@ -77,6 +77,7 @@
               <span> {{t}} </span>
             </template>
           </a-table-column>
+          
           <a-table-column title="审批意见" dataIndex="comment"  :width="100" align="center">
             <template slot-scope="t">
               <j-ellipsis :value="t" :length="6"/>

src/views/user/Login.vue

@@ -23,7 +23,7 @@
       <!-- OA工作台 -->
       <a-card
         title="OA工作台"
-        :bordered="true"
+        :bordered="false"
         style="margin:10px; borderRadius: 8px;paddingTop:20px;"
       >
         <div class="oa">

src/views/user/tabs/ApplyTab.vue

@@ -30,9 +30,9 @@
         </p>
 
         <!-- 状态 -->
-        <p>
+        <p class="fl">
           状态：
-          <span v-if="item.status == 0" class="statusComm" style="background:rgb(9, 40, 52,.1);">
+          <span v-if="item.status == 0" class="statusComm" style="background:rgb(9, 40, 52,.2);">
             草稿
           </span>
 
@@ -44,48 +44,36 @@
             已结束
           </span>
 
-          <span v-if="item.status == 3" class="statusComm" style="background:rgb(9, 40, 52,.1);">
+          <span v-if="item.status == 3" class="statusComm" style="background:rgb(9, 40, 52,.2);">
             已撤回
           </span>
         </p>
 
         <!-- 结果 -->
-        <p style="float:left;">
+        <p class="fr">
           结果：
 
-          <span class="resultComm" v-if="item.result == 0" style="background:rgba(52, 123, 152,.7);">
+          <span class="resultComm" v-if="item.result == 0" style="background:rgba(52, 123, 152,.5);">
             未提交
           </span>
 
-          <span class="resultComm" v-else-if="item.result == 1" style="background:rgb(252, 96, 10,.7);">
+          <span class="resultComm" v-else-if="item.result == 1" style="background:rgb(252, 96, 10,.5);">
             处理中
           </span>
 
-          <span class="resultComm" v-else-if="item.result == 2" style="background:rgb(9, 40, 52,.8);">
+          <span class="resultComm" v-else-if="item.result == 2" style="background:rgb(9, 40, 52,.5);">
             通过
           </span>
 
-          <span class="resultComm" v-else-if="item.result == 3" style="background:rgba(9, 40, 52,.7);">
+          <span class="resultComm" v-else-if="item.result == 3" style="background:rgba(9, 40, 52,.5);">
             驳回
           </span>
         </p>
 
-        <!-- <p style="float:right;">
-          发起人：
-          <span style="color:black;">
-            {{ item.createBy }}
-          </span>
-        </p> -->
-
-        <a-divider style="background:rgba(70, 130, 180,.2);"></a-divider>
+        <a-divider></a-divider>
 
         <!-- 操作 -->
         <div class="operation">
-          <!-- <p>
-            <span class="operationImg"><img src="@assets/set.png"/></span>
-            操作
-          </p> -->
-
           <div class="btns">
             <!-- 结果 0 -->
             <span v-if="item.status == 0">
@@ -93,8 +81,7 @@
                 class="itemBtn"
                 ghost
                 @click="apply(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);
-                      color:red;"
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.9);color:#00A0E9;"
               >
                 提交申请
               </a-button>
@@ -102,8 +89,7 @@
                 class="itemBtn"
                 ghost
                 @click="edit(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);
-                      color:orange;"
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:orange;"
               >
                 编辑
               </a-button>
@@ -121,8 +107,7 @@
                 class="itemBtn"
                 ghost
                 @click="cancel(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);
-                      color:red;"
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#8000ff;"
               >
                 撤回
               </a-button>
@@ -130,7 +115,8 @@
                 class="itemBtn"
                 ghost
                 @click="history(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4e73b9;">
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:blue;"
+              >
                 查看进度
               </a-button>
 
@@ -138,7 +124,8 @@
                 class="itemBtn"
                 ghost
                 @click="detail(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4e73b9;">
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#999;"
+              >
                 表单数据
               </a-button>
             </span>
@@ -149,7 +136,7 @@
                 class="itemBtn"
                 ghost
                 @click="apply(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:rgb(80, 95, 102);"
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#00A0E9;"
               >
                 重新申请
               </a-button>
@@ -157,7 +144,7 @@
                 class="itemBtn"
                 ghost
                 @click="edit(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#4e73b9;"
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#000000;"
               >
                 编辑
               </a-button>
@@ -166,7 +153,7 @@
                 class="itemBtn"
                 ghost
                 @click="history(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:gray;"
+                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:blue;"
               >
                 审批历史
               </a-button>
@@ -719,11 +706,4 @@ export default {
 <style lang="less">
 @import '~@assets/less/common.less';
 </style>
-<style lang="less" scoped>
-//申请 不同情况按钮排布
-.apply .btns .ingBtns,
-.apply .btns .overBtns {
-  display: flex;
-  justify-content: space-between;
-}
-</style>
+<style lang="less" scoped></style>

src/views/user/tabs/DoneTab.vue

@@ -21,36 +21,50 @@
             {{ item.name }}
           </span>
         </p>
-        <p>
-          创建时间：
-          <span style="color:black;">
-            {{ item.createTime }}
-          </span>
-        </p>
 
         <!-- 审批操作 -->
-        <!-- <p style="float:left;">
+        <p>
           审批操作：
-          <span v-if="item.deleteReason == '审批通过'" 
-          class="doneDeleteReason" 
-          style="background:rgba(68, 141, 118);">
-            {{ item.deleteReason }}</span>
-
           <span
-            v-if="item.deleteReason == '发起人撤回 - 原因未填写'"
+            v-if="item.deleteReason == '审批驳回'"
             class="doneDeleteReason"
-            style="background:rgba(235, 77, 50,.7);">
+            style="background:rgba(52, 123, 152,.6);"
+          >
+            {{ item.deleteReason }}</span
+          >
+          <span
+            v-else-if="item.deleteReason == '审批通过'"
+            class="doneDeleteReason"
+            style="background:rgba(68, 141, 118,.6);"
+          >
             {{ item.deleteReason }}
           </span>
-          
-          <span 
-            v-if="item.deleteReason" 
-            class="doneDeleteReason" 
-            style="background:rgba(52, 123, 152,.9);">
+          <span
+            v-else-if="item.deleteReason == '发起人撤回 - 原因未填写'"
+            class="doneDeleteReason"
+            style="background:rgba(47, 144, 231,.6);"
+          >
+            {{ item.deleteReason }}
+          </span>
+
+          <span v-else class="doneDeleteReason" style="background:rgba(52, 123, 152,.6);">
             {{ item.deleteReason }}
           </span>
-        </p> -->
-        <p style="flooat:left;">审批操作：{{ item.deleteReason }}</p>
+        </p>
+
+        <p>
+          审批意见：
+          <span class="comment">
+            {{ item.comment }}
+          </span>
+        </p>
+        <p class="fl">
+          创建时间：
+          <span style="color:black;">
+            {{ item.createTime }}
+          </span>
+        </p>
+
         <p style="float:right;">
           发起人：
           <span style="color:black;">
@@ -62,11 +76,6 @@
 
         <!-- 操作 -->
         <div class="operation">
-          <!-- <p>
-            <span class="operationImg"><img src="@assets/set.png"/></span>
-            操作
-          </p> -->
-
           <div class="btns">
             <a-button
               class="itemBtn"
@@ -300,15 +309,4 @@ export default {
 @import '~@assets/less/common.less';
 </style>
 <style lang="less" scoped>
-//已办 操作按钮
-.done .btns {
-  display: flex;
-  justify-content: space-between;
-}
-.doneDeleteReason {
-  padding: 4px 10px;
-  border-radius: 2px;
-  letter-spacing: 1px;
-  color: white;
-}
 </style>

src/views/user/tabs/HistoryModal.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="historyModal main">
-    <!-- 序号需要否 -->
-    <!-- <p>序号：{{ index + 1 }}</p> -->
-    <div class="cardTask" v-for="item in hisInfo" :key="item.index">
-      <p class="infoTitle">流程审批进度历史</p>
+    <p class="hisProgress">流程审批进度历史</p>
+    <div class="cardTask" v-for="(item, index) in hisInfo" :key="item.index">
       <div class="cardInfo">
+        <p class="progressNum">进度 {{ index + 1 }}</p>
         <p class="taskName">
           任务名称：
           <span style="color:black;">
@@ -14,7 +13,7 @@
 
         <p>
           处理人：
-          <span v-if="item.assignees" style="color:#fc600a">
+          <span v-if="item.assignees" style="color:#00DB00">
             {{ item.assignees[0].username }}
           </span>
           <span v-else style="color:#ccc">
@@ -60,13 +59,14 @@
         </p>
         <p>
           状态：
-          <span v-if="item.endTime" style="color:#505f66;">已办理 </span>
-          <span v-else style="color:#fc600a;fontWeight:700;">待处理 </span>
+          <span v-if="item.endTime" style="color:blue;">已办理 </span>
+          <span v-else style="color:#999999;fontWeight:700;">待处理 </span>
         </p>
       </div>
     </div>
 
-    <div class="cardTask" v-for="item in hisInfo" :key="item.index">
+    <!-- 流程图 -->
+    <div class="cardTask">
       <p class="infoTitle">实时流程图</p>
       <img :src="imgUrl" />
       <a-spin size="large" fix v-if="loadingImg"></a-spin>
@@ -78,71 +78,71 @@
 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
-        }
+  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()
     },
-    data () {
-        return {
-            url: {
-                // 历史
-                historicFlow: '/actTask/historicFlow/',
-                getHighlightImg: `${this.doMian}/activiti/models/getHighlightImg/`
-            },
-            type: 0,
-            loading: false, // 表单加载状态
-            loadingImg: false,
-            hisInfo: [],
-            id: '',
-            imgUrl: '',
-            backRoute: ''
+
+    //
+    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)
         }
+      })
     },
-    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()
-        }
+    // 分页、排序、筛选变化时触发
+    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>
 
@@ -151,25 +151,38 @@ export default {
 @import '~@assets/less/common.less';
 </style>
 <style lang="less" scoped>
+.hisProgress {
+  background-color: rgba(26, 133, 229, 0.5);
+  color: black;
+  padding: 10px 0 10px 10px;
+  font-weight: 700;
+  font-size: 16px;
+  letter-spacing: 1px;
+  margin: 0;
+}
 .cardTask {
   width: 100%;
-  border-radius: 10px;
   text-align: left;
-  margin-bottom: 20px;
-  background-color: #e7e9eb;
-
+  margin-bottom: 10px;
+  background-color: white;
+  border: 1px solid #e8e8e8;
+  .progressNum {
+    background-color: rgba(26, 133, 229, 0.1);
+    font-weight: 700;
+    color: black;
+  }
+  //流程图标题
   .infoTitle {
-    background-color: rgba(70, 130, 180, 0.7);
+    background-color: rgba(26, 133, 229, 0.5);
     padding: 10px 0 10px 10px;
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
     font-weight: 700;
-    color: white;
+    color: black;
     font-size: 16px;
     letter-spacing: 1px;
   }
+
   .cardInfo {
-    padding: 0 0 10px 20px;
+    padding: 10px;
     .taskName {
       font-weight: 700;
     }
@@ -181,4 +194,9 @@ export default {
     margin-bottom: 30px;
   }
 }
+
+p {
+  margin-bottom: 2px;
+}
+
 </style>

src/views/user/tabs/SelectModal.vue

@@ -43,10 +43,11 @@
       <div class="userHead">
         请勾选用户
       </div>
+
       <!-- 用户 按钮 -->
       <div class="submit fr">
-        <button @click="close" class="ant-btn" style="marginRight:10px;">取消</button>
-        <button @click="handleSubmit" class="ant-btn" style="margin:10px 10px 0 0 ;">确定</button>
+        <button @click="close" class="ant-btn userBtn cancel">取消</button>
+        <button @click="handleSubmit" class="ant-btn userBtn">确定</button>
       </div>
 
       <!--用户列表-->
@@ -394,9 +395,13 @@ export default {
 }
 // 搜索
 .line {
-  margin: 30px 0;
-  padding: 20px 0 0 10px;
+  background-color: rgba(210, 180, 140, 0.2);
+  margin-top: 30px;
+  padding: 10px 0 0 10px;
   border-radius: 4px;
+  /deep/.ant-input {
+    border: none;
+  }
   .search {
     margin: 0 5px 0 20px;
     border: none;
@@ -430,6 +435,21 @@ export default {
     color: #000000d9;
     margin-bottom: 10px;
   }
+
+  //提交委托用户按钮
+  .userBtn {
+    background-color: #1890ff;
+    color: white;
+    border: none;
+    letter-spacing: 3px;
+    margin: 10px 10px 0 0;
+  }
+  //取消按钮
+  .cancel {
+    background-color: #fff;
+    color: #595959;
+    border: 1px solid #ccc;
+  }
   .cardList {
     //每个任务
     .cardTask {

src/views/user/tabs/WaitTab.vue

@@ -21,21 +21,18 @@
             {{ item.name }}
           </span>
         </p>
-        <p>
-          创建时间： <span style="color:black;">{{ item.createTime }}</span>
-        </p>
 
         <!-- 优先级 -->
         <p>
           优先级：
-          <span class="priorityComm" v-if="item.priority == 0" style="background:rgba(252, 96, 10,.6);color:#092834;">
+          <span class="priorityComm" v-if="item.priority == 0" style="background:rgba(252, 96, 10,.2);color:black;">
             普通
           </span>
-          <span class="priorityComm" v-else-if="item.priority == 1" style="background:rgba(255, 0, 0,.6);color:white;">
+          <span class="priorityComm" v-else-if="item.priority == 1" style="background:rgba(255, 0, 0,.2);color:black;">
             重要
           </span>
 
-          <span class="priorityComm" v-else-if="item.priority == 2" style="background:rgba(255, 0, 0,.8);color:white;">
+          <span class="priorityComm" v-else-if="item.priority == 2" style="background:rgba(255, 0, 0,.2);color:black;">
             紧急
           </span>
           <span class="priorityComm" v-else style="background:#999;">
@@ -44,7 +41,7 @@
         </p>
 
         <!-- 状态 -->
-        <p style="float:left;marginBottom:30px;">
+        <p>
           状态：
           <span v-if="item.isSuspended == false" style="background:rgba(252, 96, 10,.6)" class="resultComm">
             已激活
@@ -55,77 +52,59 @@
           {{ item.status }}
         </p>
 
+        <p style="float:left;">
+          创建时间：
+          <span style="color:black;">{{ item.createTime }}</span>
+        </p>
         <!-- 发起人 -->
-        <p style="float:right;marginBottom:30px;">
+        <p style="float:right;marginBottom:20px;">
           发起人：
           <span style="color:black;">
             {{ item.applyer }}
           </span>
         </p>
 
-        <a-divider style="background:rgba(70, 130, 180,.2);"></a-divider>
+        <a-divider></a-divider>
 
         <!-- 操作 -->
         <div class="operation">
-          <!-- <p>
-            <span class="operationImg"><img src="@assets/set.png"/></span>
-            操作
-          </p> -->
-          <div class="btns">
-            <i class="itemBtn">
-              <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#4e73b9;">
-                申请详情
-              </a-button>
-            </i>
-
-            <!-- 挂起 状态 按钮不可用 -->
-            <span
-              v-if="item.isSuspended == true"
-              style="cursor: no-drop;color: #999999;"
-              title="流程已被挂起，无法操作！"
+          <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:blue;">
+            申请详情
+          </a-button>
+
+          <!-- 挂起 按钮不可用 -->
+          <span v-if="item.isSuspended == true" style="cursor: no-drop;color:#999999;" title="流程已被挂起，无法操作！">
+            <a-button disabled>通过</a-button>
+            <a-button disabled>驳回</a-button>
+            <a-button disabled>委托</a-button>
+          </span>
+
+          <!-- 激活 状态 -->
+          <span v-else>
+            <a-button ghost @click="passTask(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:green;">
+              通过
+            </a-button>
+
+            <a-button
+              ghost
+              @click="backTask(item)"
+              style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.8);color:orange;"
             >
-              <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>
-              <i class="itemBtn mid">
-                <a-button
-                  ghost
-                  @click="passTask(item)"
-                  style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#4e73b9;"
-                >
-                  通过
-                </a-button>
-              </i>
-              <i class="itemBtn mid">
-                <a-button
-                  ghost
-                  @click="backTask(item)"
-                  style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.8);color:#ea472c;"
-                >
-                  驳回
-                </a-button>
-              </i>
-              <i class="itemBtn mid">
-                <a-button
-                  ghost
-                  @click="delegateTask(item)"
-                  style="box-shadow:6px 6px 6px rgba(128, 128, 128,.7);color:orange;marginRight:0;"
-                >
-                  委托
-                </a-button>
-              </i>
-            </span>
-
-            <i class="itemBtn">
-              <a-button ghost @click="history(item)" style="color:gray;box-shadow: 4px 4px 4px rgba(128, 128, 128);">
-                历史
-              </a-button>
-            </i>
-          </div>
+              驳回
+            </a-button>
+
+            <a-button
+              ghost
+              @click="delegateTask(item)"
+              style="box-shadow:6px 6px 6px rgba(128, 128, 128,.7);color:gray;marginRight:0;"
+            >
+              委托
+            </a-button>
+          </span>
+
+          <a-button ghost @click="history(item)" style="color:#217dbb;box-shadow: 4px 4px 4px rgba(128, 128, 128);">
+            历史
+          </a-button>
         </div>
       </a-card>
 
@@ -662,14 +641,4 @@ export default {
 <style lang="less">
 @import '~@assets/less/common.less';
 </style>
-<style lang="less" scoped>
-.btns {
-  // 两行按钮样式
-  .itemBtn {
-    display: inline-block;
-    padding: 0 12px;
-    font-weight: 700 !important;
-    margin-bottom: 30px;
-  }
-}
-</style>
+<style lang="less" scoped></style>