显示当前流程

@@ -12,7 +12,8 @@
         <li
           @click="operation(item)"
           v-for="(item, index) in leftButtonList"
-          :key="index">
+          :key="index"
+        >
           <svg-icon class="icon" :icon-class="item.icon" />
           <span class="iconName">{{ item.name }}</span>
         </li>
@@ -21,7 +22,8 @@
         <li
           @click="operation(item)"
           v-for="(item, index) in rightButtonList"
-          :key="index">
+          :key="index"
+        >
           <svg-icon class="icon" :icon-class="item.icon" />
           <span class="iconName">{{ item.name }}</span>
         </li>
@@ -43,18 +45,25 @@
         </div>
         <!-- 表单内容区域 -->
         <div class="rightContainer">
+          <div class="count">
+            当前流程所在环节:
+            <span>{{ this.zbhj }}</span>
+          </div>
           <el-tabs v-model="tabName" :before-leave="beforeLeave">
             <el-tab-pane
               :label="item.name"
               :name="item.value"
               v-for="item in tabList"
-              :key="item.value">
+              :key="item.value"
+            >
             </el-tab-pane>
           </el-tabs>
+
           <component
             :key="fresh"
             :is="componentTag"
-            v-bind="currentSelectProps" />
+            v-bind="currentSelectProps"
+          />
         </div>
       </div>
     </div>
@@ -63,26 +72,26 @@
   </div>
 </template>
 <style scoped lang="scss">
-  @import "~@/styles/mixin.scss";
-  @import "./workFrame.scss";
+@import "~@/styles/mixin.scss";
+@import "./workFrame.scss";
 </style>
 <script>
-  import WorkFlow from "./mixin/index";
-  import { getForm } from "./flowform";
-  import { getStepFormInfo } from "@/api/workFlow.js";
-  import NoticeBar from "@/components/NoticeBar/index";
-  // import ProcessViewer from "./components/processViewer.vue";
+import WorkFlow from "./mixin/index";
+import { getForm } from "./flowform";
+import { getStepFormInfo } from "@/api/workFlow.js";
+import NoticeBar from "@/components/NoticeBar/index";
+// import ProcessViewer from "./components/processViewer.vue";
 
-  import ordinaryMenu from "./components/leftmenu/ordinaryMenu.vue";
-  import qllxDailog from "./djbBook/components/qllxDailog";
-  import selectBdc from "@/views/ywbl/ywsq/selectBdc.vue";
-  import { loadTreeData, getNode } from "./components/leftmenu/djbFrameData.js";
-  // 登记簿数据信息
-  import { addRepairRecord } from "@/api/djbRepair.js";
-  // 获取权利类型数组
+import ordinaryMenu from "./components/leftmenu/ordinaryMenu.vue";
+import qllxDailog from "./djbBook/components/qllxDailog";
+import selectBdc from "@/views/ywbl/ywsq/selectBdc.vue";
+import { loadTreeData, getNode } from "./components/leftmenu/djbFrameData.js";
+// 登记簿数据信息
+import { addRepairRecord } from "@/api/djbRepair.js";
+// 获取权利类型数组
 
-  import { getBdcqljqtsx } from "@/api/djbDetail.js";
-  export default {
+import { getBdcqljqtsx } from "@/api/djbDetail.js";
+export default {
   components: {
     selectBdc,
     NoticeBar,
@@ -90,11 +99,13 @@
     qllxDailog,
   },
   mixins: [WorkFlow],
-    data () {
+  data() {
     return {
       bsmSlsq: this.$route.query.bsmSlsq,
       //当前流程所在环节
       bestepid: this.$route.query.bestepid,
+      //当前流程所在环节
+      zbhj: this.$route.query.zbhj,
       //设置那个表单选中
       tabName: "",
       isEdit: true,
@@ -114,17 +125,17 @@
       _beforeUnload_time: "",
       treedata: {},
       tabdata: [],
-        bsmRepair:"",
+      bsmRepair: "",
       defaultNode: {},
       clxxForm: "",
       //材料信息选择卡索引
       clxxIndex: "",
       //材料信息选项卡对象
       clxxTab: {},
-        ableOperation:false
+      ableOperation: false,
     };
   },
-    mounted () {
+  mounted() {
     // this.getleftMenubl()
   },
 
@@ -134,17 +145,17 @@
      * @param {*} qllx
      * @author: renchao
      */
-      stepForm (qllx) {
+    stepForm(qllx) {
       this.oneSelectProps.qllx = qllx;
       if (this.$refs.Menu.supplementarylist.length) {
         getStepFormInfo(this.oneSelectProps).then((res) => {
           this.$nextTick(function () {
             this.tabList = res.result;
             this.tabName = this.tabList[0].value;
-                this.ableOperation=this.tabList[0].ableOperation
+            this.ableOperation = this.tabList[0].ableOperation;
             this.getFromRouter(this.tabName);
 
-               if(this.tabList.length!=8){
+            if (this.tabList.length != 8) {
               let that = this;
               this.tabList.forEach(function (item, index) {
                 if (item.value == "clxx") {
@@ -152,7 +163,7 @@
                   that.clxxForm = getForm(item.value, that.$route.query.sqywbm);
                   that.clxxTab = item;
                 }
-              })
+              });
             }
           });
         });
@@ -164,8 +175,8 @@
      * @param {*} val
      * @author: renchao
      */
-      getCurrentSelectProps (val) {
-       this.bsmRepair= val.bsmRepair
+    getCurrentSelectProps(val) {
+      this.bsmRepair = val.bsmRepair;
       if (val.bdcdyid) {
         this.oneSelectProps = val;
       }
@@ -185,7 +196,7 @@
      * @description: 获取渲染登记簿列表
      * @author: renchao
      */
-      getdjblist () {
+    getdjblist() {
       getBdcqljqtsx({
         bdcdyid: this.currentSelectProps.bdcdyid,
         bdcdyh: this.currentSelectProps.bdcdyh,
@@ -219,7 +230,7 @@
      * @param {*} activeName
      * @author: renchao
      */
-      beforeLeave (activeName) {
+    beforeLeave(activeName) {
       if (activeName && activeName != 0) this.getFromRouter(activeName);
     },
     //切换选项卡内容组件
@@ -228,7 +239,7 @@
      * @param {*} tabname
      * @author: renchao
      */
-      getFromRouter (tabname) {
+    getFromRouter(tabname) {
       this.componentTag = getForm(tabname);
     },
     // closefp () {
@@ -245,7 +256,7 @@
      * @param {*} del
      * @author: renchao
      */
-      addRepairRecord (row, del) {
+    addRepairRecord(row, del) {
       let from = {
         bsmQlxx: "",
         bsmSlsq: this.bsmSlsq,
@@ -282,7 +293,7 @@
         })
         .catch((res) => {
           console.log("错", res);
-          })
+        });
     },
     // openDialog () {
     //   this.$store.dispatch('user/refreshPage', false)
@@ -296,7 +307,22 @@
 
     //   this.$popupDialog(title, "ywbl/ywsq/selectBdc", { 'djywbm': this.$route.query.sqywbm, 'isJump': true, 'sqywInfo': data }, "80%", true)
     // }
-    }
-  };
+  },
+};
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.rightContainer {
+  position: relative;
+}
+.count {
+  font-size: 14px;
+  position: absolute;
+  right: 25px;
+  top: 12px;
+  height: 30px;
+  span {
+    font-weight: 600;
+    color: #3498db;
+  }
+}
+</style>

@@ -35,6 +35,10 @@
         </div>
         <!-- 表单内容区域 -->
         <div class="rightContainer">
+            <div class="count">
+            当前流程所在环节:
+            <span>{{ this.zbhj }}</span>
+          </div>
           <el-tabs v-model="tabName" :before-leave="beforeLeave">
             <el-tab-pane :label="item.name" :name="item.value" v-for="item in tabList" :key="item.value">
             </el-tab-pane>
@@ -84,6 +88,8 @@
         bsmSlsq: this.$route.query.bsmSlsq,
         //当前流程所在环节
         bestepid: this.$route.query.bestepid,
+        //当前流程所在环节
+        zbhj: this.$route.query.zbhj,
         //设置那个表单选中
         tabName: "",
         //设置那个表单选择
@@ -201,4 +207,19 @@
     }
   }
 </script>
-
+<style scoped lang="scss">
+.rightContainer {
+  position: relative;
+}
+.count {
+  font-size: 14px;
+  position: absolute;
+  right: 25px;
+  top: 12px;
+  height: 30px;
+  span {
+    font-weight: 600;
+    color: #3498db;
+  }
+}
+</style>