添加workFrame只读vue文件

@@ -33,6 +33,14 @@ export const constantRoutes = [
     name: 'workFrame',
     name: 'workFrame',
     hidden: true,
     hidden: true,
     meta: { title: '发起申请' }
     meta: { title: '发起申请' }
+  },
+  // 业务流程只读框架
+  {
+    path: '/workFrameView',
+    component: () => import('@/views/workflow/workFrameView.vue'),
+    name: 'workFrameView',
+    hidden: true,
+    meta: { title: '发起申请' }
   }
   }
 ]
 ]
 
 

+<template>
+  <div class="container">
+    <!-- 顶部内容框 -->
+    <div class="topButton">
+      <!-- 左侧业务功能按钮 -->
+      <ul>
+        <li @click="operation(index, item)" v-for="(item, index) in leftButtonList" :key="index">
+          <svg-icon :icon-class="item.icon" />
+          <span class="iconName">{{ item.name }}</span>
+        </li>
+      </ul>
+      <!-- 右侧流程按钮 -->
+      <ul>
+        <li @click="operation(index, item)" v-for="(item, index) in rightButtonList" :key="index">
+          <svg-icon class="icon" :icon-class="item.icon" />
+          <span class="iconName">{{ item.name }}</span>
+        </li>
+      </ul>
+    </div>
+    <!-- 内容框架 -->
+    <div class="containerFrame">
+      <!-- 左侧菜单栏 -->
+      <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
+        <div v-if="this.isShowdrawer">
+          <div class="title">申请单元列表({{ unitData.length }})</div>
+          <el-menu :default-active="activeIndex" @select="unitClick">
+            <el-menu-item v-for="(item, index) in unitData" :index="index.toString()" :key="index">
+              <p>{{ item.bdcdyh }}</p>
+              <p class="title-detail">{{ item.zl }}</p>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
+          () => {
+            this.isShowdrawer = !this.isShowdrawer;
+          }
+        "></div>
+        <div class="map-drawer-expand map-drawer" v-else @click="
+          () => {
+            this.isShowdrawer = !this.isShowdrawer;
+          }
+        "></div>
+      </div>
+      <div class="leftCon">
+        <!-- 分屏左侧预览 -->
+        <div v-if="splitScreen" class="splitScreen-con">
+          <component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" />
+        </div>
+        <!-- 表单内容区域 -->
+        <div class="rightContainer">
+          <el-tabs v-model="tabName" @tab-click="tabClick">
+            <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
+            </el-tab-pane>
+          </el-tabs>
+          <component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang='scss'>
+@import "~@/styles/mixin.scss";
+@import "./workFrame.scss";
+</style>
+
+<script>
+import {
+  leftMenu,
+  stepExpandInfo,
+  record,
+  getNextLinkInfo,
+  completeTask,
+} from "@/api/fqsq.js"
+import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"
+import { getForm } from "./flowform.js"
+export default {
+  data () {
+    return {
+      // 流程图
+      imgSrc: '',
+      // 折叠
+      isShowdrawer: true,
+      // 默认选中
+      activeIndex: '0',
+      //受理申请标识码
+      bsmSlsq: this.$route.query.bsmSlsq,
+      //当前流程所在环节
+      bestepid: this.$route.query.bestepid,
+      //顶部左侧按钮集合
+      leftButtonList: [],
+      //顶部右侧按钮集合
+      rightButtonList: [],
+      //左侧菜单数据集合
+      unitData: [],
+      //设置那个表单选中
+      tabName: "",
+      //表单集合
+      tabList: [],
+      //选择加载哪一个组件
+      componentTag: "",
+      //设置表单组件是否刷选值
+      fresh: 10,
+      //设置表单传递数据
+      currentSelectProps: {},
+      //是否开启材料分屏
+      splitScreen: false,
+      //材料分屏表单
+      clxxForm: "",
+      //材料信息选择卡索引
+      clxxIndex: "",
+      //材料信息选项卡对象
+      clxxTab: {},
+    }
+  },
+  mounted () {
+    this.loadBdcdylist();
+    this.flowInitParam();
+  },
+  methods: {
+    //加载流程初始参数
+    flowInitParam () {
+      var formdata = new FormData();
+      formdata.append("bsmSlsq", this.bsmSlsq);
+      formdata.append("bestepid", this.bestepid);
+      formdata.append("type", "READ_ONLY");
+      stepExpandInfo(formdata).then((res) => {
+        if (res.code === 200) {
+          this.leftButtonList = res.result.button;
+          this.rightButtonList = res.result.operation;
+          this.tabList = res.result.form;
+          //默认选择第一个选项卡内容
+          this.tabName = res.result.form[0].value;
+          let that = this;
+          this.tabList.forEach(function (item, index) {
+            if (item.value == "clxx") {
+              that.clxxIndex = index;
+              that.clxxForm = getForm(item.value);
+              that.clxxTab = item;
+            }
+          });
+          //默认加载第一个选项卡的组件内容
+          this.getFromRouter(res.result.form[0].value);
+        }
+      })
+    },
+    //流程环节操作按钮
+    operation (index, item) {
+      //按钮 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书
+      //操作按钮 登簿：record  转件：transfer  退回：back  退出：signout
+      let that = this;
+      switch (item.value) {
+        case "B1":
+          getWorkFlowImage(this.bsmSlsq).then(res => {
+            this.imgSrc = URL.createObjectURL(res)
+            this.$popup({
+              title: '流程图',
+              editItem: 'workflow/components/flowChart',
+              formData: this.imgSrc
+            })
+          })
+          break;
+        case "B5":
+          this.zsylFlag = true;
+          break;
+        case "B2": //材料分屏按钮
+          this.splitScreen = this.splitScreen ? false : true;
+          this.$store.dispatch('app/settScreen', this.splitScreen)
+          if (this.splitScreen) {
+            //如果当前选项卡为材料信息内容，递减到上一个选项卡内容
+            if (this.tabName == this.clxxTab.value) {
+              this.tabName = this.tabList[this.clxxIndex - 1].value;
+              this.getFromRouter(this.tabList[this.clxxIndex - 1].value);
+            }
+            this.tabList.splice(this.clxxIndex, 1);
+          } else {
+            this.tabList.splice(this.clxxIndex, 1, this.clxxTab);
+          }
+          break;
+        case "signout":
+          window.close();
+          break;
+      }
+    },
+    //读取申请单元信息
+    loadBdcdylist () {
+      var formdata = new FormData();
+      formdata.append("bsmSlsq", this.bsmSlsq);
+      formdata.append("bestepid", this.bestepid);
+      leftMenu(formdata).then((res) => {
+        if (res.code === 200) {
+          this.unitData = res.result;
+          this.currentSelectProps = res.result[0];
+        }
+      })
+    },
+    //申请单元点击事件
+    unitClick (index) {
+      if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
+        this.currentSelectProps = this.unitData[index];
+        this.fresh += 1;
+      }
+    },
+    //表单选项卡事件
+    tabClick (tab, event) {
+      this.getFromRouter(tab.name);
+    },
+    //切换选项卡内容组件
+    getFromRouter (tabname) {
+      this.componentTag = getForm(tabname);
+    },
+  }
+}
+</script>
\ No newline at end of file

@@ -131,7 +131,7 @@ export default {
       this.fetchData()
       this.fetchData()
     },
     },
     ywhClick (item) {
     ywhClick (item) {
-      const { href } = this.$router.resolve('/workFrame?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
+      const { href } = this.$router.resolve('/workFrameView?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
       window.open(href, '_blank');
       window.open(href, '_blank');
     }
     }
   }
   }

@@ -116,7 +116,7 @@ export default {
       console.log(name, sort);
       console.log(name, sort);
     },
     },
     openDialog (item) {
     openDialog (item) {
-      const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + item.bsmBusiness  + '&viewtype=3')
+      const { href } = this.$router.resolve('/workFrameView?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + item.bsmBusiness  + '&viewtype=3')
       window.open(href, '_blank');
       window.open(href, '_blank');
     }
     }
   }
   }