[委托] modal 基本完成

src/assets/less/overwrite.css

@@ -17,6 +17,7 @@ i {
 img {
   width: 100%;
   display: inline-block;
+  vertical-align: text-bottom;
 }
 /*清除浮动*/
 .clearfix:before,
@@ -30,15 +31,15 @@ img {
 .content {
   width: 100%;
   height: 100%;
-  background-color: rgba(247, 224, 212, 0.4);
+  background-color: #e7e9eb;
 }
 .content .footer {
-  background-color: #fcf3ee;
   text-align: center;
   color: #5c6468;
 }
 .content .main {
   min-height: 780px;
+  background-color: #f2f2f6;
 }
 .content .main /deep/ .ant-layout-header {
   padding: 0;
@@ -56,11 +57,12 @@ img {
 }
 .content .main .cardTask {
   width: 100%;
-  border-radius: 20px;
+  border-radius: 14px;
   text-align: left;
   margin-bottom: 30px;
   border: none;
-  background-color: rgba(247, 224, 212, 0.8);
+  background-color: white;
+  border: 1px solid rgba(70, 130, 180, 0.1);
 }
 .content .main .cardTask .pTitle {
   width: 100%;
@@ -68,9 +70,8 @@ img {
   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;
+  padding-left: 10px;
 }
 .content .main .cardTask .pTitle span {
   display: inline-block;
@@ -83,24 +84,23 @@ img {
 }
 .content .main .cardTask .pTitle span img {
   display: block !important;
-  border-radius: 10px;
 }
 .content .main .cardTask .operation .operationImg {
   display: inline-block;
   height: 28px;
   width: 28px;
+  vertical-align: text-bottom;
 }
 .content .main .cardTask .operation p {
   font-size: 16px;
   color: #092834;
+  font-weight: 700;
 }
 .content .main .operation /deep/ .ant-btn {
-  padding: 0;
-  line-height: 0;
-  border: none !important;
   border-radius: 999em;
-  padding: 18px 10px;
-  border: 1px solid red;
+  border: 1px solid #f2f2f6;
+  margin-bottom: 30px;
+  margin-right: 20px;
 }
 .content .main /deep/ .ant-card-head {
   color: #092834;
@@ -113,13 +113,15 @@ img {
   text-align: center;
 }
 .content .main /deep/ .ant-tabs-tab {
+  letter-spacing: 2px;
   padding: 0;
   margin: 0;
-  margin-right: 68px;
+  font-size: 16px;
+  margin-right: 52px;
   padding: 10px 17px;
   color: #616161;
   border-radius: 20px;
-  background-color: #f8e4da;
+  background-color: white;
 }
 .content .main /deep/ .ant-tabs-tab:last-child {
   margin-right: 0;
@@ -127,7 +129,7 @@ img {
 .content .main /deep/ .ant-tabs-tab-active {
   font-weight: 700;
   color: white;
-  background: rgba(252, 96, 10, 0.8);
+  background: #4169e1;
   border: none;
 }
 .content .main /deep/ .ant-tabs-bar {

src/assets/less/overwrite.less

@@ -20,6 +20,7 @@ i {
 img {
   width: 100%;
   display: inline-block;
+  vertical-align: text-bottom;
 }
 
 /*清除浮动*/
@@ -37,16 +38,17 @@ img {
 .content {
   width: 100%;
   height: 100%;
-  background-color: rgba(247, 224, 212, 0.4);
+  background-color: #e7e9eb;
 
   .footer {
-    background-color: #fcf3ee;
     text-align: center;
     color: #5c6468;
   }
   .main {
     //所有内容设置最小高度
     min-height: 780px;
+    background-color: #f2f2f6;
+
     //分页头部公共
     /deep/.ant-layout-header {
       padding: 0;
@@ -55,6 +57,7 @@ img {
       padding-left: 14px;
       background-color: transparent;
     }
+
     .Header {
       span {
         font-size: 20px;
@@ -68,11 +71,12 @@ img {
     //每个任务卡
     .cardTask {
       width: 100%;
-      border-radius: 20px;
+      border-radius: 14px;
       text-align: left;
       margin-bottom: 30px;
       border: none;
-      background-color: rgba(247, 224, 212, 0.8);
+      background-color: white;
+      border: 1px solid rgba(70, 130, 180, 0.1);
       // card 标题
       .pTitle {
         width: 100%;
@@ -80,9 +84,8 @@ img {
         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;
+        padding-left: 10px;
         // 图 外盒子
         span {
           display: inline-block;
@@ -92,9 +95,9 @@ img {
           margin-right: 6px;
           border-radius: 10px;
           vertical-align: text-bottom;
+
           img {
             display: block !important;
-            border-radius: 10px;
           }
         }
       }
@@ -104,21 +107,25 @@ img {
           display: inline-block;
           height: 28px;
           width: 28px;
+          vertical-align: text-bottom;
         }
         p {
           font-size: 16px;
           color: #092834;
+          font-weight: 700;
         }
       }
     }
-    // 操作按钮样式
+    // 操作 按钮样式
     .operation /deep/.ant-btn {
-      padding: 0;
-      line-height: 0;
-      border: none !important;
+      // padding: 0;
+      // line-height: 0;
+      // border: none !important;
       border-radius: 999em;
-      padding: 18px 10px;
-      border: 1px solid red;
+      // padding: 18px 10px;
+      border: 1px solid #f2f2f6;
+      margin-bottom: 30px;
+      margin-right: 20px;
     }
 
     /deep/.ant-card-head {
@@ -134,13 +141,15 @@ img {
       text-align: center;
     }
     /deep/.ant-tabs-tab {
+      letter-spacing: 2px;
       padding: 0;
       margin: 0;
-      margin-right: 68px;
+      font-size: 16px;
+      margin-right: 52px;
       padding: 10px 17px;
       color: #616161;
       border-radius: 20px;
-      background-color: #f8e4da;
+      background-color: white;
     }
     //最后一个子元素不要有距离
     /deep/.ant-tabs-tab:last-child {
@@ -149,7 +158,7 @@ img {
     /deep/.ant-tabs-tab-active {
       font-weight: 700;
       color: white;
-      background: rgba(252, 96, 10, 0.8);
+      background: #4169e1;
       border: none;
     }
     /deep/.ant-tabs-bar {
@@ -189,3 +198,5 @@ img {
     margin-top: 120px;
   }
 }
+
+

src/views/user/Login.vue

@@ -4,25 +4,11 @@
       <!-- 待办 头部  -->
       <a-layout-header class="todoBox">
         <div class="left fl clearfix">
-          <!-- 待办 -->
-          <span v-if="isshow == '1'">
-            <img src="@assets/todo.png" alt="?????" />
-            <div class="info" style="color:white; top:3%; left:26%;">
-              <span>我的待办</span>
-              <a-badge class="numTips" style="backgroundColor:#f94f46;">
-                {{ todoList.length }}
-              </a-badge>
-            </div>
-          </span>
-          <!-- 无 待办 -->
-          <span v-if="isshow == '2'">
-            <img src="@assets/nothing.png" alt="?????" />
-            <div class="info" style="top:2%; left:33%;">
-              <span style="color:white;">暂无待办</span>
-              <a-badge class="numTips" style="color:#ffcf2d;backgroundColor:#ffcf2d;">
-                {{ todoList.length }}
-              </a-badge>
-            </div>
+          <span
+            >我的待办
+            <a-badge class="numTips" style="backgroundColor:#f94f46;">
+              {{ todoList.length }}
+            </a-badge>
           </span>
         </div>
 
@@ -35,14 +21,9 @@
       </a-layout-header>
 
       <!-- OA工作台 -->
-      <a-card title="OA工作台" :bordered="false" style="width: 100%; background:#F7E0D4;">
+      <a-card title="OA工作台" :bordered="false" style="width: 100%;    background-color: #f2f2f6;">
         <div class="oa">
-          <a
-            class="oaItem"
-            v-for="(item, index) in activeKeyAll"
-            :key="index.id"
-            @click.prevent="aClick(item)"
-          >
+          <a class="oaItem" v-for="(item, index) in activeKeyAll" :key="index.id" @click.prevent="aClick(item)">
             <span>
               <img :src="item.iconAddress" />
             </span>
@@ -68,7 +49,7 @@
     </div>
 
     <!-- 底部 -->
-    <a-layout-footer class="footer" style="background:#f7e0d4;">
+    <a-layout-footer class="footer">
       上海萃颠信息科技有限公司出品
     </a-layout-footer>
   </div>
@@ -249,9 +230,7 @@ export default {
 .content {
   width: 100%;
   height: 100%;
-  background-color: rgba(#f7e0d4);
   .main {
-    background-color: rgba(247, 224, 212);
     //头部 蓝盒子
     .todoBox {
       padding: 18px;
@@ -266,28 +245,29 @@ export default {
       .left {
         height: 100%;
         width: 190px;
-        //黑板内信息
-        .info {
-          position: absolute;
-          span {
-            font-weight: 700;
-            position: relative;
-            letter-spacing: 1px;
+        padding: 20px;
+        // 我的待办
+        span {
+          font-weight: 700;
+          position: relative;
+          letter-spacing: 1px;
+          font-size: 18px;
+          color: #092834;
+          display: block;
+          margin-top: 30px;
+          // 待办 数量
+          .numTips {
+            position: absolute;
+            right: 52px;
+            top: -56px;
+            padding: 3px 8px;
+            text-align: center;
+            line-height: 20px;
+            border-radius: 50%;
+            color: white !important;
             font-size: 16px;
           }
         }
-        // 待办 数量
-        .numTips {
-          position: absolute;
-          top: -10px;
-          left: 0px;
-          padding: 3px 8px;
-          text-align: center;
-          line-height: 20px;
-          border-radius: 50%;
-          color: white !important;
-          font-size: 16px;
-        }
       }
 
       // 按钮
@@ -329,7 +309,8 @@ export default {
         color: #092834;
         border-radius: 10px;
         margin-bottom: 70px;
-        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
+        background-color: white;
+        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 
         // 图
         span {

src/views/user/Todo.vue

@@ -185,11 +185,7 @@ export default {
 <style lang="less" scoped>
 .content {
   .main {
-    padding: 30px 15px 15px 15px ;
-    /deep/.ant-tabs {
-      // border-top-left-radius: 40px;
-      // border-top-right-radius: 40px;
-    }
+    padding: 30px 15px 15px 15px;
   }
 }
 </style>

src/views/user/tabs/ApplyTab.vue

@@ -9,17 +9,27 @@
       <a-card class="cardTask" v-for="item in applyList" :key="item.id">
         <p class="pTitle">
           <span>
-            <img src="@assets/look.gif" />
+            <img src="@assets/title.png" />
           </span>
           <i>
             {{ item.processName }}
           </i>
         </p>
 
-        <p>当前审批环节：{{ item.currTaskName }}</p>
-        <p>创建时间：{{ item.createTime }}</p>
+        <p v-if="item.currTaskName">
+          当前审批环节：
+          <span style="color:black;">
+            {{ item.currTaskName }}
+          </span>
+        </p>
+        <p>
+          创建时间：
+          <span style="color:black;">
+            {{ item.createTime }}
+          </span>
+        </p>
 
-        <!-- 申请状态 -->
+        <!-- 状态 -->
         <p>
           状态：
           <span v-if="item.status == 0" class="statusComm" style="background:rgb(9, 40, 52,.1);">
@@ -39,7 +49,7 @@
           </span>
         </p>
 
-        <!-- 申请结果 -->
+        <!-- 结果 -->
         <p style="float:left;">
           结果：
 
@@ -47,7 +57,7 @@
             未提交
           </span>
 
-          <span class="resultComm" v-else-if="item.result == 1" style="background:rgb(252, 96, 10,.8);">
+          <span class="resultComm" v-else-if="item.result == 1" style="background:rgb(252, 96, 10,.7);">
             处理中
           </span>
 
@@ -60,20 +70,22 @@
           </span>
         </p>
 
-        <p style="float:right;">发起人：{{ item.createBy }}</p>
+        <p style="float:right;">
+          发起人：
+          <span style="color:black;">
+            {{ item.createBy }}
+          </span>
+        </p>
 
-        <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
+        <a-divider style="background:rgba(70, 130, 180,.2);"></a-divider>
 
         <!-- 操作 -->
         <div class="operation">
           <p>
-            <span class="operationImg">
-              <img src="@assets/down.png" />
-            </span>
+            <span class="operationImg"><img src="@assets/set.png"/></span>
             操作
           </p>
 
-          <!--  -->
           <div class="btns">
             <!-- 结果 0 -->
             <span v-if="item.status == 0">
@@ -96,15 +108,11 @@
                 编辑
               </a-button>
 
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="remove(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);
-                      color:#4e73b9;"
-              >
-                删除
-              </a-button>
+              <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
+                <a-button class="itemBtn" ghost style="box-shadow: 8px 8px 8px rgba(128, 128, 128,.7);color:#4e73b9;">
+                  删除
+                </a-button>
+              </a-popconfirm>
             </span>
 
             <!-- 处理中   渲染的按钮 -->
@@ -145,8 +153,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:rgb(80, 95, 102);"
               >
                 重新申请
               </a-button>
@@ -154,8 +161,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:#4e73b9;"
               >
                 编辑
               </a-button>
@@ -164,21 +170,16 @@
                 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:gray;"
               >
                 审批历史
               </a-button>
 
-              <a-button
-                class="itemBtn"
-                ghost
-                @click="remove(item)"
-                style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
-                      color:red;"
-              >
-                删除
-              </a-button>
+              <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
+                <a-button class="itemBtn" ghost style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:red;">
+                  删除
+                </a-button>
+              </a-popconfirm>
             </span>
           </div>
         </div>
@@ -305,6 +306,7 @@
 
 <script>
 import HistoryModal from '@views/user/tabs/HistoryModal'
+import { defineComponent } from 'vue'
 
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
@@ -323,6 +325,7 @@ export default {
     JTreeSelect,
     HistoryModal
   },
+
   data() {
     return {
       applyList: [], // 申请列表
@@ -454,7 +457,7 @@ export default {
         if (res.success) {
           let records = res.result || []
           this.applyList = records
-          // this.ipagination.total = records.length
+          this.ipagination.total = records.length
         }
         if (res.code === 510) {
           this.$message.warning(res.message)
@@ -463,6 +466,21 @@ export default {
       })
     },
 
+    //分页、排序、筛选变化时触发
+    handleTableChange(pagination, filters, sorter) {
+      //TODO 筛选
+      console.log('走这没  分页啊')
+      console.log(Object)
+      if (Object.keys(sorter).length > 0) {
+        console.log(Object)
+        console.log(Object.key)
+        this.isorter.column = sorter.field
+        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
+      }
+      this.ipagination = pagination
+      this.loadData()
+    },
+
     // 选择参数
     getQueryParams() {
       var param = Object.assign({}, this.queryParam, this.isorter)
@@ -492,44 +510,44 @@ export default {
     },
 
     // 状态
-    getStatus(status) {
-      let text = '未知',
-        color = ''
-      if (status == 0) {
-        text = '草稿'
-        color = 'default'
-      } else if (status == 1) {
-        text = '处理中'
-        color = 'orange'
-      } else if (status == 2) {
-        text = '已结束'
-        color = 'blue'
-      } else if (status == 3) {
-        text = '已撤回'
-        color = 'magenta'
-      }
-      return { text: text, color: color }
-    },
-
-    // 结果
-    getResult(result) {
-      let text = '未知',
-        color = ''
-      if (result == 0) {
-        text = '未提交'
-        color = 'default'
-      } else if (result == 1) {
-        text = '处理中'
-        color = 'orange'
-      } else if (result == 2) {
-        text = '已通过'
-        color = 'green'
-      } else if (result == 3) {
-        text = '已驳回'
-        color = 'red'
-      }
-      return { text: text, color: color }
-    },
+    // getStatus(status) {
+    //   let text = '未知',
+    //     color = ''
+    //   if (status == 0) {
+    //     text = '草稿'
+    //     color = 'default'
+    //   } else if (status == 1) {
+    //     text = '处理中'
+    //     color = 'orange'
+    //   } else if (status == 2) {
+    //     text = '已结束'
+    //     color = 'blue'
+    //   } else if (status == 3) {
+    //     text = '已撤回'
+    //     color = 'magenta'
+    //   }
+    //   return { text: text, color: color }
+    // },
+
+    // // 结果
+    // getResult(result) {
+    //   let text = '未知',
+    //     color = ''
+    //   if (result == 0) {
+    //     text = '未提交'
+    //     color = 'default'
+    //   } else if (result == 1) {
+    //     text = '处理中'
+    //     color = 'orange'
+    //   } else if (result == 2) {
+    //     text = '已通过'
+    //     color = 'green'
+    //   } else if (result == 3) {
+    //     text = '已驳回'
+    //     color = 'red'
+    //   }
+    //   return { text: text, color: color }
+    // },
 
     // 申请
     apply(v) {
@@ -691,18 +709,6 @@ export default {
       this.edit(v, true)
     },
 
-    // 分页
-    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()
-    },
-
     // 发起申请   可删
     addApply() {
       this.getProcessList()

src/views/user/tabs/DoneTab.vue

@@ -9,14 +9,24 @@
       <a-card class="cardTask" v-for="item in doneList" :key="item.id">
         <p class="pTitle">
           <span>
-            <img src="@assets/look.gif" />
+            <img src="@assets/title.png" />
           </span>
           <i>
             {{ item.processName }}
           </i>
         </p>
-        <p>任务名称：{{ item.name }}</p>
-        <p>创建时间：{{ item.createTime }}</p>
+        <p>
+          任务名称：
+          <span style="color:black;">
+            {{ item.name }}
+          </span>
+        </p>
+        <p>
+          创建时间：
+          <span style="color:black;">
+            {{ item.createTime }}
+          </span>
+        </p>
 
         <!-- 审批操作 -->
         <p style="float:left;">
@@ -39,17 +49,19 @@
             {{ item.deleteReason }}
           </span>
         </p>
-        <p style="float:right;">发起人：{{ item.applyer }}</p>
+        <p style="float:right;">
+          发起人：
+          <span style="color:black;">
+            {{ item.applyer }}
+          </span>
+        </p>
 
-        <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
+        <a-divider style="background:rgba(70, 130, 180,.2);"></a-divider>
 
         <!-- 操作 -->
         <div class="operation">
           <p>
-            <span class="operationImg">
-              <img src="@assets/down.png" />
-            </span>
-
+            <span class="operationImg"><img src="@assets/set.png"/></span>
             操作
           </p>
 
@@ -58,8 +70,7 @@
               class="itemBtn"
               ghost
               @click="detail(item)"
-              style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
-                      color:#4e73b9;"
+              style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#4e73b9;"
             >
               表单数据
             </a-button>
@@ -68,20 +79,16 @@
               class="itemBtn"
               ghost
               @click="history(item)"
-              style="color:gray;
-                             box-shadow: 8px 8px 8px rgba(128, 128, 128,.7)"
+              style="color:gray;box-shadow: 8px 8px 8px rgba(128, 128, 128,.7)"
             >
               审批历史
             </a-button>
 
-            <a-popconfirm title="确定删除吗?" placement="left">
+            <a-popconfirm title="确定删除吗?" placement="left" @confirm="() => remove(item)">
               <a-button
                 class="itemBtn"
                 ghost
-                @click="remove(item)"
-                style="color:gray;
-                               box-shadow: 7px 7px 7px rgba(128, 128, 128,.7);
-                               color:red;"
+                style="color:gray;box-shadow: 7px 7px 7px rgba(128, 128, 128,.7);color:red;"
               >
                 删除
               </a-button>

src/views/user/tabs/HistoryModal.vue

@@ -1,47 +1,76 @@
 <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>序号：{{ index + 1 }}</p> -->
+    <div class="cardTask" v-for="item in hisInfo" :key="item.index">
+      <p class="infoTitle">流程审批进度历史</p>
+      <div class="cardInfo">
+        <p class="taskName">
+          任务名称：
+          <span style="color:black;">
+            {{ item.name }}
+          </span>
+        </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>
+          处理人：
+          <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>
+        <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>
+          <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>
+        <p v-if="item.comment">
+          审批意见：
+          <span style="color:black;">
+            {{ item.comment }}
+          </span>
+        </p>
+        <p v-if="item.duration">
+          耗时：
+          <span style="color:black;">
+            {{ millsToTime(item.duration) }}
+          </span>
+        </p>
+        <p>
+          创建时间：
+          <span style="color:black;">
+            {{ item.createTime }}
+          </span>
+        </p>
+        <p v-if="item.endTime">
+          完成时间：
+          <span style="color:black;">
+            {{ item.endTime }}
+          </span>
+        </p>
+        <p>
+          状态：
+          <span v-if="item.endTime" style="color:#505f66;">已办理 </span>
+          <span v-else style="color:#fc600a;fontWeight:700;">待处理 </span>
+        </p>
+      </div>
+    </div>
 
-    <a-card class="cardTask" title="实时流程图" >
+    <div class="cardTask" v-for="item in hisInfo" :key="item.index">
+      <p class="infoTitle">实时流程图</p>
       <img :src="imgUrl" />
       <a-spin size="large" fix v-if="loadingImg"></a-spin>
-    </a-card>
+    </div>
   </div>
 </template>
 
@@ -111,7 +140,7 @@ export default {
                 this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
             }
             this.ipagination = pagination
-            // this.loadData();
+            this.loadData()
         }
     }
 }
@@ -127,23 +156,29 @@ export default {
   border-radius: 10px;
   text-align: left;
   margin-bottom: 20px;
-  border: none;
-  background-color: rgba(247, 224, 212, 0.7);
-  .taskName {
+  background-color: #e7e9eb;
+
+  .infoTitle {
+    background-color: rgba(70, 130, 180, 0.7);
+    padding: 10px 0 10px 10px;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
     font-weight: 700;
+    color: white;
+    font-size: 16px;
+    letter-spacing: 1px;
+  }
+  .cardInfo {
+    padding: 0 0 10px 20px;
+    .taskName {
+      font-weight: 700;
+    }
+  }
+
+  //改变后台传来的图片大小
+  ::v-deep img {
+    max-width: 100%;
+    margin-bottom: 30px;
   }
-}
-/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/SelectModal.vue

@@ -0,0 +1,395 @@
+<template>
+  <!-- -----------------------------------
+    此页面是 点击 “选择用户的 modal 弹框”
+    及 传参
+  ---------------------------------------->
+  <a-modal
+    :width="modalWidth"
+    :visible="visible"
+    :title="title"
+    @ok="handleSubmit"
+    @cancel="close"
+    cancelText="关闭"
+    style="margin-top: -70px"
+    wrapClassName="ant-modal-cust-warp"
+  >
+    <!-- 树形控件 -->
+    <div class="tree">
+      <a-card :bordered="true" title="请选择分支">
+        <!--组织机构-->
+        <a-directory-tree
+          selectable
+          :selectedKeys="selectedDepIds"
+          :checkStrictly="true"
+          :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
+          :treeData="departTree"
+          :expandAction="false"
+          :expandedKeys.sync="expandedKeys"
+          @select="onDepSelect"
+        />
+      </a-card>
+    </div>
+
+    <!-- 搜索 -->
+    <div class="line" style="margin:30px 0; padding:13px 0 0 10px;border:1px solid #e8e8e8;">
+      用户账号:
+      <a-input-search
+        :style="{ width: '150px', marginBottom: '15px' }"
+        placeholder="请输入账号"
+        v-model="queryParam.username"
+        @search="onSearch"
+      >
+      </a-input-search>
+
+      <!-- 重置按钮内 -->
+      <a-button @click="searchReset(1)" style="margin-left: 30px" icon="redo">重置</a-button>
+    </div>
+
+    <!--用户列表-->
+    <div class="cardList">
+      <div
+        class="cardTask"
+        v-for="(item, index) in dataSource"
+        :key="item.id"
+        style="marginBottom:10px;"
+        :class="{ on: index % 2 == 0, off: index % 2 != 0 }"
+      >
+        <a-checkbox @change="select(item)" class="" />
+
+        <span v-if="item.username" class="">
+          用户账号：<span class="black">{{ item.username }}</span>
+        </span>
+        <span v-if="item.realname" class="fr">
+          用户姓名：<span class="black">{{ item.realname }}</span>
+        </span>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { filterObj } from '@/utils/util'
+import { queryDepartTreeList, getUserList, queryUserByDepId } from '@/api/api'
+
+export default {
+    name: 'SelectModal',
+    components: {},
+    data () {
+        return {
+            queryParam: {
+                username: ''
+            },
+            columns: [
+                {
+                    title: '用户账号',
+                    align: 'center',
+                    dataIndex: 'username'
+                },
+                {
+                    title: '用户姓名',
+                    align: 'center',
+                    dataIndex: 'realname'
+                },
+                {
+                    title: '性别',
+                    align: 'center',
+                    dataIndex: 'sex',
+                    customRender: function (text) {
+                        if (text === 1) {
+                            return '男'
+                        } else if (text === 2) {
+                            return '女'
+                        } else {
+                            return text
+                        }
+                    }
+                },
+                {
+                    title: '手机',
+                    align: 'center',
+                    dataIndex: 'phone'
+                },
+                {
+                    title: '部门',
+                    align: 'center',
+                    dataIndex: 'orgCode'
+                }
+            ],
+            scrollTrigger: {},
+            dataSource: [],
+            selectedRowKeys: [],
+            selectUserRows: [],
+            selectUserIds: [],
+            title: '根据部门选择用户',
+            ipagination: {
+                current: 1,
+                pageSize: 1000,
+                pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                    return range[0] + '-' + range[1] + ' 共' + total + '条'
+                },
+                showQuickJumper: true,
+                showSizeChanger: true,
+                total: 0
+            },
+            isorter: {
+                column: 'createTime',
+                order: 'desc'
+            },
+            selectedDepIds: [],
+            departTree: [],
+            visible: false,
+            form: this.$form.createForm(this),
+            loading: false,
+            expandedKeys: []
+        }
+    },
+    props: ['modalWidth', 'multi', 'userIds', 'customReturnField'],
+    computed: {
+    // 计算属性的 getter
+        getType: function () {
+            return this.multi == true ? 'checkbox' : 'radio'
+        }
+    },
+    watch: {
+        userIds: {
+            immediate: true,
+            handler () {
+                this.initUserNames()
+            }
+        }
+    },
+    created () {
+    // 该方法触发屏幕自适应
+        this.resetScreenSize()
+        this.loadData()
+    },
+    methods: {
+        select (item) {
+            console.log(item)
+            this.selectUserRows = []
+            this.selectUserRows.push(item)
+            this.selectUserIds = []
+            this.selectUserIds = item.username
+        },
+        initUserNames () {
+            if (this.userIds) {
+                // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
+                let values = this.userIds.split(',') + ','
+                var param = {
+                    // username: values,
+                    pageNo: 1,
+                    pageSize: values.length
+                }
+                param[this.customReturnField] = values
+                console.log('回显用户参数', param)
+                getUserList(param).then(res => {
+                    if (res.success) {
+                        let selectedRowKeys = []
+                        let realNames = []
+                        res.result.records.forEach(user => {
+                            realNames.push(user['realname'])
+                            selectedRowKeys.push(user['id'])
+                        })
+                        this.selectedRowKeys = selectedRowKeys
+                        console.log('回显用户', selectedRowKeys)
+                        this.$emit('initComp', realNames.join(','))
+                    }
+                })
+            } else {
+                // JSelectUserByDep组件bug issues/I16634
+                this.$emit('initComp', '')
+            }
+        },
+        async loadData (arg) {
+            if (arg === 1) {
+                this.ipagination.current = 1
+            }
+            if (this.selectedDepIds && this.selectedDepIds.length > 0) {
+                await this.initQueryUserByDepId(this.selectedDepIds)
+            } else {
+                this.loading = true
+                let params = this.getQueryParams() // 查询条件
+                if (params.username) params.username = `*${params.username}*`
+                await getUserList(params)
+                    .then(res => {
+                        if (res.success) {
+                            this.dataSource = res.result.records
+                            console.log(this.dataSource)
+                            console.log('这才是table内容')
+                            this.ipagination.total = res.result.total
+                        }
+                    })
+                    .finally(() => {
+                        this.loading = false
+                    })
+            }
+        },
+        // 触发屏幕自适应
+        resetScreenSize () {
+            let screenWidth = document.body.clientWidth
+            if (screenWidth < 500) {
+                this.scrollTrigger = { x: 800 }
+            } else {
+                this.scrollTrigger = {}
+            }
+        },
+        showModal () {
+            this.visible = true
+            this.queryDepartTree()
+            this.initUserNames()
+            this.loadData()
+            this.form.resetFields()
+        },
+        getQueryParams () {
+            let param = Object.assign({}, this.queryParam, this.isorter)
+            param.field = this.getQueryField()
+            param.pageNo = this.ipagination.current
+            param.pageSize = this.ipagination.pageSize
+            return filterObj(param)
+        },
+        getQueryField () {
+            let str = 'id,'
+            for (let a = 0; a < this.columns.length; a++) {
+                str += ',' + this.columns[a].dataIndex
+            }
+            return str
+        },
+        searchReset (num) {
+            let that = this
+            if (num !== 0) {
+                that.queryParam = {}
+                that.loadData(1)
+            }
+            that.selectedRowKeys = []
+            that.selectUserIds = []
+            that.selectedDepIds = []
+        },
+        close () {
+            this.searchReset(0)
+            this.visible = false
+        },
+        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()
+        },
+        handleSubmit () {
+            let that = this
+            // this.getSelectUserRows()
+            that.$emit('ok', that.selectUserRows, that.selectUserIds)
+            that.searchReset(0)
+            that.close()
+        },
+        // 获取选择用户信息
+        getSelectUserRows (rowId) {
+            let dataSource = this.dataSource
+            let userIds = ''
+            this.selectUserRows = []
+            for (let i = 0, len = dataSource.length; i < len; i++) {
+                if (this.selectedRowKeys.includes(dataSource[i].id)) {
+                    this.selectUserRows.push(dataSource[i])
+                    // userIds = userIds + "," + dataSource[i].username
+                    userIds = userIds + ',' + dataSource[i][this.customReturnField]
+                }
+            }
+            this.selectUserIds = userIds.substring(1)
+        },
+        // 点击树节点,筛选出对应的用户
+        onDepSelect (selectedDepIds) {
+            if (selectedDepIds[0] != null) {
+                this.initQueryUserByDepId(selectedDepIds) // 调用方法根据选选择的id查询用户信息
+                if (this.selectedDepIds[0] !== selectedDepIds[0]) {
+                    this.selectedDepIds = [selectedDepIds[0]]
+                }
+            }
+        },
+        onSelectChange (selectedRowKeys, selectionRows) {
+            this.selectedRowKeys = selectedRowKeys
+            this.selectionRows = selectionRows
+        },
+        onSearch () {
+            this.loadData(1)
+        },
+        // 根据选择的id来查询用户信息
+        initQueryUserByDepId (selectedDepIds) {
+            this.loading = true
+            let params = this.getQueryParams() // 查询条件
+            let username = params.username || ''
+            return queryUserByDepId({ id: selectedDepIds.toString(), username: username })
+                .then(res => {
+                    if (res.success) {
+                        this.dataSource = res.result
+                        this.ipagination.total = res.result.length
+                    }
+                })
+                .finally(() => {
+                    this.loading = false
+                })
+        },
+        queryDepartTree () {
+            queryDepartTreeList().then(res => {
+                if (res.success) {
+                    this.departTree = res.result
+                    // console.log('我想看到这')
+                    // 默认展开父节点
+                    this.expandedKeys = this.departTree.map(item => item.id)
+                }
+            })
+        },
+        modalFormOk () {
+            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>
+.ant-table-tbody .ant-table-row td {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+#components-layout-demo-custom-trigger .trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.tree {
+  background-color: pink;
+}
+/deep/.ant-modal-cust-warp {
+  background-color: red;
+}
+.black {
+  color: black;
+}
+.on {
+  background: #F0F8FF;
+  border-radius: 10px;
+}
+.off {
+  background: rgba(210, 180, 140, 0.1);
+  border-radius: 10px;
+  border: none;
+}
+
+.cardTask {
+  padding: 0;
+  margin: 20px;
+  // padding: 8px 0 0 10px 10px;
+  span {
+    display: inline-block;
+  }
+}
+</style>

src/views/user/tabs/SelectPerson.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- -----------------------------------
+    此页面是 选择委托人 及 选择框的大结构
+
+    及 传参
+  ---------------------------------------->
+  <div class="selectPerson">
+    <a-input-search v-model="userNames" placeholder="请先选择用户" disabled @search="onSearchDepUser">
+      <a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
+    </a-input-search>
+
+    <!-- 引入 SelectModal 组件 -->
+    <select-modal
+      ref="selectModal"
+      :customReturnField="customReturnField"
+      :modal-width="modalWidth"
+      :multi="multi"
+      @ok="selectOK"
+      :user-ids="value"
+      @initComp="initComp"
+    />
+  </div>
+</template>
+
+<script>
+// 引入 SelectModal 组件
+import SelectModal from '@views/user/tabs/SelectModal'
+
+export default {
+    name: 'SelectPerson',
+    components: { SelectModal },
+    props: {
+        modalWidth: {
+            type: Number,
+            default: 1250,
+            required: false
+        },
+        value: {
+            type: String,
+            required: false
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        multi: {
+            type: Boolean,
+            default: true,
+            required: false
+        },
+        // 自定义返回字段，默认返回 username
+        customReturnField: {
+            type: String,
+            default: 'username'
+        }
+    },
+    data () {
+        return {
+            userIds: '',
+            userNames: ''
+        }
+    },
+    mounted () {
+        this.userIds = this.value
+    },
+    watch: {
+        value (val) {
+            this.userIds = val
+        }
+    },
+    model: {
+        prop: 'value',
+        event: 'change'
+    },
+    methods: {
+        initComp (userNames) {
+            this.userNames = userNames
+        },
+        onSearchDepUser () {
+            this.$refs.selectModal.showModal()
+        },
+        selectOK (rows, idstr) {
+            console.log('当前选中用户', rows)
+            console.log('当前选中用户ID', idstr)
+            if (!rows) {
+                this.userNames = ''
+                this.userIds = ''
+            } else {
+                let temp = ''
+                for (let item of rows) {
+                    temp += ',' + item.realname
+                }
+                this.userNames = temp.substring(1)
+                this.userIds = idstr
+            }
+            this.$emit('change', this.userIds)
+        }
+    }
+}
+</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/tabs/WaitTab.vue

@@ -1,22 +1,29 @@
 <template>
-  <div>
+  <div class="WaitTab">
     <!-- 无待办显示 -->
-    <div class="waitTab_null"  v-if="todoList.length == 0">
+    <div class="waitTab_null" v-if="todoList.length == 0">
       <a-empty />
     </div>
 
     <!-- 待办列表 -->
-    <div class="waitTab" >
+    <div class="waitTabList">
       <a-card class="cardTask" v-for="item in todoList" :key="item.id">
         <p class="pTitle">
           <span>
-            <img src="@assets/look.gif" />
+            <img src="@assets/title.png" />
           </span>
           {{ item.processName }}
         </p>
 
-        <p>任务名称：{{ item.name }}</p>
-        <p>创建时间：{{ item.createTime }}</p>
+        <p>
+          任务名称：
+          <span style="color:black;">
+            {{ item.name }}
+          </span>
+        </p>
+        <p>
+          创建时间： <span style="color:black;">{{ item.createTime }}</span>
+        </p>
 
         <!-- 优先级 -->
         <p>
@@ -39,7 +46,7 @@
         <!-- 状态 -->
         <p style="float:left;marginBottom:30px;">
           状态：
-          <span v-if="item.isSuspended == false" style="background:rgba(252, 96, 10,.8)" class="resultComm">
+          <span v-if="item.isSuspended == false" style="background:rgba(252, 96, 10,.7)" class="resultComm">
             已激活
           </span>
           <span v-if="item.isSuspended == true" style="background:rgba(20, 137, 184,.8)" class="resultComm">
@@ -49,21 +56,26 @@
         </p>
 
         <!-- 发起人 -->
-        <p style="float:right;marginBottom:30px;">发起人：{{ item.applyer }}</p>
+        <p style="float:right;marginBottom:30px;">
+          发起人：
+          <span style="color:black;">
+            {{ item.applyer }}
+          </span>
+        </p>
 
-        <a-divider style="background:rgba(128, 128, 128,.1);"></a-divider>
+        <a-divider style="background:rgba(70, 130, 180,.2);"></a-divider>
 
         <!-- 操作 -->
         <div class="operation">
           <p>
-            <span class="operationImg"><img src="@assets/down.png"/></span>
+            <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>
 
@@ -75,44 +87,42 @@
             >
               <a-button class="itemBtn" disabled>通过</a-button>
               <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">
+              <i class="itemBtn mid">
                 <a-button
                   ghost
                   @click="passTask(item)"
-                  style="box-shadow: 8px 8px 8px rgba(128, 128, 128);
-                        color:#4e73b9;"
+                  style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#4e73b9;"
                 >
                   通过
                 </a-button>
               </i>
-              <i class="itemBtn">
+              <i class="itemBtn mid">
                 <a-button
                   ghost
                   @click="backTask(item)"
-                  style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.7);color:#ea472c;"
+                  style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.8);color:#ea472c;"
                 >
                   驳回
                 </a-button>
               </i>
-              <i class="itemBtn">
+              <i class="itemBtn mid">
                 <a-button
                   ghost
                   @click="delegateTask(item)"
-                  style="color:gray;box-shadow: 6px 6px 6px rgba(128, 128, 128,.7);color:orange;"
+                  style="box-shadow:6px 6px 6px rgba(128, 128, 128,.7);color:orange;marginRight:0;"
                 >
                   委托
                 </a-button>
               </i>
             </span>
 
-            <!-- position:absolute;right:0;marginRight:0; -->
             <i class="itemBtn">
-              <a-button ghost @click="history(item)" style="color:gray;box-shadow: 4px 4px 4px rgba(128, 128, 128,.7);">
+              <a-button ghost @click="history(item)" style="color:gray;box-shadow: 4px 4px 4px rgba(128, 128, 128);">
                 历史
               </a-button>
             </i>
@@ -154,6 +164,7 @@
             <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">{{
@@ -161,9 +172,13 @@
                 }}</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">
@@ -187,8 +202,11 @@
               </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>
+              <!-- <JSelectUserByDep v-model="form.userId" :multi="false"></JSelectUserByDep> -->
+
+              <selectPerson v-model="form.userId" :multi="false"></selectPerson>
             </a-form-item>
 
             <a-form-item label="消息通知">
@@ -198,6 +216,8 @@
             </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>
@@ -209,15 +229,16 @@
 
 <script>
 import HistoryModal from '@views/user/tabs/HistoryModal'
+import SelectPerson from '@views/user/tabs/SelectPerson'
 
-import { deleteAction, getAction, downFile } from '@/api/manage'
+import { deleteAction, getAction, down01File } from '@/api/manage'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
 import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
 export default {
   name: 'WaitTab',
   mixins: [activitiMixin, JeecgListMixin],
-  components: { JSelectUserByDep, HistoryModal },
+  components: { JSelectUserByDep, HistoryModal, SelectPerson },
   data() {
     return {
       todoList: [], // 待办列表
@@ -648,7 +669,7 @@ export default {
 .btns {
   .itemBtn {
     display: inline-block;
-    margin-right: 4px;
+    padding: 0 12px;
     font-weight: 700 !important;
   }
 }