添加登记簿展示功能

@@ -4,14 +4,22 @@
     <div class="topButton">
       <!-- 左侧业务功能按钮 -->
       <ul>
-        <li @click="operation(index, item)" v-for="(item, index) in leftButtonList" :key="index">
+        <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">
+        <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>
@@ -22,29 +30,52 @@
       <!-- 左侧菜单栏 -->
       <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
         <div v-if="this.isShowdrawer">
-          <div class="title">申请单元列表({{ unitData.length }})
-            <el-button type="text" class="batchDel" @click="handleBatchDel" v-if="unitData.length>1">批量删除</el-button>
+          <div class="title">
+            申请单元列表({{ unitData.length }})
+            <el-button
+              type="text"
+              class="batchDel"
+              @click="handleBatchDel"
+              v-if="unitData.length > 1"
+              >批量删除</el-button
+            >
           </div>
           <el-menu :default-active="activeIndex" @select="unitClick">
-            <el-menu-item v-for="(item, index) in unitData" :index="index.toString()" :key="index">
+            <el-menu-item
+              v-for="(item, index) in unitData"
+              :index="index.toString()"
+              :key="index"
+            >
               <div>
                 <p>{{ item.bdcdyh }}</p>
                 <p class="title-detail">{{ item.zl }}</p>
               </div>
-              <i class="el-icon-delete" v-if="unitData.length>1" @click.stop="handleDel(item)"></i>
+              <i
+                class="el-icon-delete"
+                v-if="unitData.length > 1"
+                @click.stop="handleDel(item)"
+              ></i>
             </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
+          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">
         <!-- 分屏左侧预览 -->
@@ -54,14 +85,28 @@
         <!-- 表单内容区域 -->
         <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
+              :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" />
+          <component
+            :key="fresh"
+            :is="componentTag"
+            v-bind="currentSelectProps"
+          />
         </div>
       </div>
     </div>
-    <fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
+    <fqsqDialog
+      v-model="isDialog"
+      :djywbm="$route.query.sqywbm"
+      :isJump="true"
+      @updateDialog="updateDialog"
+    />
   </div>
 </template>
 
@@ -76,25 +121,25 @@ import {
   record,
   getNextLinkInfo,
   completeTask,
-} from "@/api/fqsq.js"
-import { deleteBdcdy } from "@/api/ywbl.js"
-import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"
-import { getForm } from "./flowform.js"
-import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue"
-import { queueDjywmc } from '@/views/ywbl/ywsq/slectBdcdata.js';
+} from "@/api/fqsq.js";
+import { deleteBdcdy } from "@/api/ywbl.js";
+import { getWorkFlowImage } from "@/api/jsydsyqFlow.js";
+import { getForm } from "./flowform.js";
+import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue";
+import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js";
 export default {
   components: {
-    fqsqDialog
+    fqsqDialog,
   },
-  data () {
+  data() {
     return {
       isDialog: false,
       // 流程图
-      imgSrc: '',
+      imgSrc: "",
       // 折叠
       isShowdrawer: true,
       // 默认选中
-      activeIndex: '0',
+      activeIndex: "0",
       //受理申请标识码
       bsmSlsq: this.$route.query.bsmSlsq,
       //当前流程所在环节
@@ -123,62 +168,64 @@ export default {
       clxxIndex: "",
       //材料信息选项卡对象
       clxxTab: {},
-    }
+    };
   },
-  mounted () {
+  mounted() {
     this.loadBdcdylist();
     this.flowInitParam();
   },
   methods: {
     // 更新列表
-    updateDialog () {
+    updateDialog() {
       this.loadBdcdylist();
     },
     // 删除左侧列表
-    handleDel (item) {
-      this.$confirm('确定要删除吗, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        deleteBdcdy({
-          bsmSlsq: this.bsmSlsq,
-          bsmSldyList: item.bsmSldy.split(',')
-        }).then(res => {
-          if (res.code == 200) {
-            this.$message.success("删除成功");
-            this.loadBdcdylist();
-          }else{
-            this.$message.error(res.message)
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        })
+    handleDel(item) {
+      this.$confirm("确定要删除吗, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
+        .then(() => {
+          deleteBdcdy({
+            bsmSlsq: this.bsmSlsq,
+            bsmSldyList: item.bsmSldy.split(","),
+          }).then((res) => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.loadBdcdylist();
+            } else {
+              this.$message.error(res.message);
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
     },
-    handleBatchDel () {
+    handleBatchDel() {
       let that = this;
       this.$popup({
-        title: '批量删除',
-        width: '50%',
+        title: "批量删除",
+        width: "50%",
         btnShow: true,
-        editItem: 'workflow/components/batchDel',
-        height: '600px',
+        editItem: "workflow/components/batchDel",
+        height: "600px",
         formData: {
           bsmSlsq: this.bsmSlsq,
-          dataList: this.unitData
+          dataList: this.unitData,
         },
-        cancel: function () { }, //取消事件的回调
-        confirm: function () { 
+        cancel: function () {}, //取消事件的回调
+        confirm: function () {
           that.loadBdcdylist();
         }, //确认事件的回调
-      })
+      });
     },
     //加载流程初始参数
-    flowInitParam () {
+    flowInitParam() {
       var formdata = new FormData();
       formdata.append("bsmSlsq", this.bsmSlsq);
       formdata.append("bestepid", this.bestepid);
@@ -200,35 +247,32 @@ export default {
           //默认加载第一个选项卡的组件内容
           this.getFromRouter(res.result.form[0].value);
         }
-      })
+      });
     },
     //流程环节操作按钮
-    operation (index, item) {
+    operation(index, item) {
       //按钮 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书
       //操作按钮 登簿：record  转件：transfer  退回：back  退出：signout
       let that = this;
       switch (item.value) {
         case "B0":
           // let type = queueDjywmc(this.$route.query.sqywbm)
-          this.isDialog = true
+          this.isDialog = true;
           break;
         case "B1":
-          getWorkFlowImage(this.bsmSlsq).then(res => {
-            this.imgSrc = URL.createObjectURL(res)
+          getWorkFlowImage(this.bsmSlsq).then((res) => {
+            this.imgSrc = URL.createObjectURL(res);
             this.$popup({
-              title: '流程图',
+              title: "流程图",
               btnShow: true,
-              editItem: 'workflow/components/flowChart',
-              formData: this.imgSrc
-            })
-          })
-          break;
-        case "B5":
-          this.zsylFlag = true;
+              editItem: "workflow/components/flowChart",
+              formData: this.imgSrc,
+            });
+          });
           break;
         case "B2": //材料分屏按钮
           this.splitScreen = this.splitScreen ? false : true;
-          this.$store.dispatch('app/settScreen', this.splitScreen)
+          this.$store.dispatch("app/settScreen", this.splitScreen);
           if (this.splitScreen) {
             //如果当前选项卡为材料信息内容，递减到上一个选项卡内容
             if (this.tabName == this.clxxTab.value) {
@@ -240,9 +284,30 @@ export default {
             this.tabList.splice(this.clxxIndex, 1, this.clxxTab);
           }
           break;
+        case "B4":
+          this.$popup({
+            titleStyle: "left",
+            title: "登记簿详情", // 弹窗标题
+            editItem: "registerBook/djbFrame", // 弹窗内容
+            formData: this.currentSelectProps,
+            width: "1220px",
+            height: "790px",
+            // cancelText: '取消摆烂', // 右边按钮文本
+            // confirmText: '确定点击', //左边按钮文本
+            cancel: () => {
+              console.log("取消回调");
+            },
+            confirm: () => {
+              console.log("确认回调");
+            },
+          });
+          break;
+        case "B5":
+          this.zsylFlag = true;
+          break;
         case "back": //退回按钮
           break;
-        case "transfer": //转件按钮       
+        case "transfer": //转件按钮
           getNextLinkInfo({
             bsmSlsq: this.bsmSlsq,
             bestepid: this.bestepid,
@@ -276,7 +341,7 @@ export default {
       }
     },
     //读取申请单元信息
-    loadBdcdylist () {
+    loadBdcdylist() {
       var formdata = new FormData();
       formdata.append("bsmSlsq", this.bsmSlsq);
       formdata.append("bestepid", this.bestepid);
@@ -285,25 +350,25 @@ export default {
           this.unitData = res.result;
           this.currentSelectProps = res.result[0];
         }
-      })
+      });
     },
     //申请单元点击事件
-    unitClick (index) {
+    unitClick(index) {
       if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
         this.currentSelectProps = this.unitData[index];
         this.fresh += 1;
       }
     },
     //表单选项卡事件
-    tabClick (tab, event) {
+    tabClick(tab, event) {
       this.getFromRouter(tab.name);
     },
     //切换选项卡内容组件
-    getFromRouter (tabname) {
+    getFromRouter(tabname) {
       this.componentTag = getForm(tabname);
     },
     //发送下一个环节
-    send (obj) {
+    send(obj) {
       const h = this.$createElement;
       this.$msgbox({
         title: "您确定转出吗？",
@@ -322,7 +387,7 @@ export default {
             completeTask({
               bsmSlsq: this.bsmSlsq,
               shyj: "this.bestepid",
-              stepform: JSON.stringify(this.tabList)
+              stepform: JSON.stringify(this.tabList),
             }).then((res) => {
               if (res.code === 200) {
                 instance.confirmButtonLoading = false;
@@ -342,10 +407,10 @@ export default {
       }).then((action) => {
         this.$message({
           type: "info",
-          message: "action: " + action
-        })
-      })
-    }
-  }
-}
+          message: "action: " + action,
+        });
+      });
+    },
+  },
+};
 </script>
\ No newline at end of file