流程页面整改

src/views/process/processApproval/index.vue

@@ -3,11 +3,14 @@
     <div class="left-card">
       <div class="top">
         <div class="commons-title title">
-          {{
-            queryData.query.flowName
-              ? queryData.query.flowName + (queryData.query.processType ? typeName[queryData.query.processType] : "（发起）")
-              : keyName[queryData.query.flowKey] + "（审批）"
-          }}
+          <span>
+            {{
+              queryData.query.flowName
+                ? queryData.query.flowName + (queryData.query.processType ? typeName[queryData.query.processType] : "（发起）")
+                : keyName[queryData.query.flowKey] + "（审批）"
+            }}
+          </span>
+          <el-button type="success" size="small" @click="clickRecords()" v-preReClick>审批记录</el-button>
         </div>
         <div class="line"></div>
         <Subscribe :queryData="detailsData.data" v-if="queryData.query.flowKey == 'apply_buy'" ref="makeDom"></Subscribe>
@@ -36,46 +39,6 @@
         </el-form>
       </div>
     </div>
-    <div class="right-card">
-      <el-tabs v-model="activeName" class="demo-tabs">
-        <el-tab-pane label="审批记录" name="first">
-          <ul class="flow-chart">
-            <li
-              v-for="item in recordList"
-              :key="item.id"
-              :class="
-                !queryData.query.flowId
-                  ? ''
-                  : item.status == 2
-                  ? 'flow-orange'
-                  : item.status == 3 && !queryData.query.flowId
-                  ? 'flow-orange'
-                  : item.status == 3 && queryData.query.flowId
-                  ? 'flow-grey'
-                  : ''
-              ">
-              <div class="left-icon">
-                <i class="iconfont icon-iconm_daick"></i>
-                <i class="iconfont icon-icomx_quertj1 right-btm-status"></i>
-              </div>
-              <div class="right-conetnt">
-                <div class="name">{{ item.nodeName }}</div>
-                <div class="remark">
-                  <div class="label">
-                    <span v-if="item.status != 3">办理人：</span>{{ item.processedUser }}<span class="time">{{ item.processedDate }}</span>
-                  </div>
-                  {{ item.remark }}
-                  <div v-for="j in fileObj[item.flowExampleDetailId]" v-if="fileObj[item.flowExampleDetailId]">
-                    <a :href="j.fileUrl" style="color: #409eff; line-height: 30px">{{ j.fileName }}</a>
-                  </div>
-                </div>
-              </div>
-              <div class="line"></div>
-            </li>
-          </ul>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
 
     <el-dialog title="下一处理人" width="400" v-model="dialogVisible">
       <el-form :model="flowForm">
@@ -91,6 +54,50 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+    <el-drawer v-model="drawer" :direction="'rtl'">
+      <div class="right-card">
+        <el-tabs v-model="activeName" class="demo-tabs">
+          <el-tab-pane label="审批记录" name="first">
+            <ul class="flow-chart">
+              <li
+                v-for="(item, index) in recordList"
+                :key="item.id"
+                :class="
+                  !queryData.query.flowId
+                    ? index === 0
+                      ? 'flow-orange'
+                      : 'flow-grey'
+                    : item.status == 2
+                    ? 'flow-orange'
+                    : item.status == 3 && !queryData.query.flowId
+                    ? 'flow-orange'
+                    : item.status == 3 && queryData.query.flowId
+                    ? 'flow-grey'
+                    : ''
+                ">
+                <div class="left-icon">
+                  <i class="iconfont icon-iconm_daick"></i>
+                  <i class="iconfont icon-icomx_quertj1 right-btm-status"></i>
+                </div>
+                <div class="right-conetnt">
+                  <div class="name">{{ item.nodeName }}</div>
+                  <div class="remark">
+                    <div class="label">
+                      <span v-if="item.status != 3">办理人：</span>{{ item.processedUser }}<span class="time">{{ item.processedDate }}</span>
+                    </div>
+                    {{ item.remark }}
+                    <div v-for="j in fileObj[item.flowExampleDetailId]" v-if="fileObj[item.flowExampleDetailId]">
+                      <a :href="j.fileUrl" style="color: #409eff; line-height: 30px">{{ j.fileName }}</a>
+                    </div>
+                  </div>
+                </div>
+                <div class="line"></div>
+              </li>
+            </ul>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -339,6 +346,10 @@ onMounted(() => {
   }
   getRecords(queryData.query.flowId);
 });
+const drawer = ref(false);
+const clickRecords = () => {
+  drawer.value = true;
+};
 </script>
 <style lang="scss" scoped>
 .processApproval {
@@ -347,8 +358,7 @@ onMounted(() => {
   height: calc(100vh - 120px);
   .left-card {
     border-radius: 4px;
-    width: calc(100% - 400px - 10px);
-    margin-right: 10px;
+    width: 100%;
     display: flex;
     flex-direction: column;
     .top {
@@ -371,124 +381,127 @@ onMounted(() => {
       overflow-x: hidden;
     }
   }
-  .right-card {
-    background: #fff;
-    border-radius: 4px;
-    padding: 0 20px 20px;
-    width: 400px;
-    box-sizing: border-box;
-    .flow-chart {
-      overflow-y: auto;
-      overflow-x: hidden;
-      height: calc(100vh - 200px);
-      padding: 0;
+}
+.right-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 0 20px 20px;
+  width: 100%;
+  box-sizing: border-box;
+  .flow-chart {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100vh - 200px);
+    padding: 0;
+    margin: 0;
+    li {
       margin: 0;
-      li {
-        margin: 0;
-        padding: 0 0 20px;
-        list-style: none;
-        display: flex;
-        justify-content: space-between;
-        position: relative;
-        .right-conetnt {
-          flex: 1;
-          .name {
-            font-size: 12px;
-            color: #39c55a;
-            margin-bottom: 10px;
-            span {
-              color: #999;
-            }
-          }
-          .time {
-            float: right;
+      padding: 0 0 20px;
+      list-style: none;
+      display: flex;
+      justify-content: space-between;
+      position: relative;
+      .right-conetnt {
+        flex: 1;
+        .name {
+          font-size: 12px;
+          color: #39c55a;
+          margin-bottom: 10px;
+          span {
+            color: #999;
           }
-          .remark {
-            padding: 10px;
-            color: #666666;
-            font-size: 12px;
-            background: #f1f1f1;
-            border-radius: 2px;
-            .label {
-              color: #999;
-              margin-bottom: 10px;
-            }
+        }
+        .time {
+          float: right;
+        }
+        .remark {
+          padding: 10px;
+          color: #666666;
+          font-size: 12px;
+          background: #f1f1f1;
+          border-radius: 2px;
+          .label {
+            color: #999;
+            margin-bottom: 10px;
           }
         }
-        .left-icon {
-          width: 40px;
-          height: 40px;
-          text-align: center;
-          line-height: 40px;
-          background: #0084ff;
+      }
+      .left-icon {
+        width: 40px;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+        background: #0084ff;
+        border-radius: 10px;
+        color: #fff;
+        font-size: 20px;
+        position: relative;
+        margin-right: 27px;
+        z-index: 2;
+        .right-btm-status {
+          position: absolute;
+          bottom: 0px;
+          right: -10px;
+          height: 20px;
+          width: 20px;
+          line-height: 16px;
           border-radius: 10px;
-          color: #fff;
-          font-size: 20px;
-          position: relative;
-          margin-right: 27px;
-          z-index: 2;
-          .right-btm-status {
-            position: absolute;
-            bottom: 0px;
-            right: -10px;
-            height: 20px;
-            width: 20px;
-            line-height: 16px;
-            border-radius: 10px;
-            background: #39c55a;
-            border: 2px solid #fff;
-            font-size: 12px;
-            box-sizing: border-box;
-          }
+          background: #39c55a;
+          border: 2px solid #fff;
+          font-size: 12px;
+          box-sizing: border-box;
         }
       }
-      li::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 20px;
-        width: 2px;
-        height: 100%;
-        background: #ddd;
-        z-index: 1;
+    }
+    li::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 20px;
+      width: 2px;
+      height: 100%;
+      background: #ddd;
+      z-index: 1;
+    }
+    li:last-child::before {
+      display: none;
+    }
+    .flow-orange {
+      .right-btm-status {
+        background: #ff9a00 !important;
       }
-      li:last-child::before {
-        display: none;
+      .name {
+        color: #ff9a00 !important;
       }
-      .flow-orange {
-        .right-btm-status {
-          background: #ff9a00 !important;
-        }
-        .name {
-          color: #ff9a00 !important;
-        }
-        .left-icon {
-          background: #ff9a00 !important;
-        }
+      .left-icon {
+        background: #ff9a00 !important;
       }
-      .flow-grey {
-        .right-btm-status {
-          background: #999 !important;
-        }
-        .name {
-          color: #999 !important;
-        }
-        .left-icon {
-          background: #999 !important;
-        }
+    }
+    .flow-grey {
+      .right-btm-status {
+        background: #999 !important;
       }
-      .flow-red {
-        .right-btm-status {
-          background: #ff4d4f !important;
-        }
-        .name {
-          color: #ff4d4f !important;
-        }
-        .left-icon {
-          background: #ff4d4f !important;
-        }
+      .name {
+        color: #999 !important;
+      }
+      .left-icon {
+        background: #999 !important;
+      }
+    }
+    .flow-red {
+      .right-btm-status {
+        background: #ff4d4f !important;
+      }
+      .name {
+        color: #ff4d4f !important;
+      }
+      .left-icon {
+        background: #ff4d4f !important;
       }
     }
   }
 }
+::v-deep(.el-drawer) {
+  width: 400px !important;
+}
 </style>