添加登记簿展示功能

田浩浩
Showing 1 changed file with 157 additions and 92 deletions
src/views/workflow/workFrame.vue
--- a/src/views/workflow/workFrame.vue
View file @fe5fc1f
+++ b/src/views/workflow/workFrame.vue
View file @fe5fc1f
@@ -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 }})
+          <div class="title">
-            <el-button type="text" class="batchDel" @click="handleBatchDel" v-if="unitData.length>1">批量删除</el-button>
+            申请单元列表({{ 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="
+        <div
-          () => {
+          class="map-drawer-click map-drawer"
-            this.isShowdrawer = !this.isShowdrawer;
+          v-if="!isShowdrawer"
-          }
+          @click="
-        "></div>
+            () => {
-        <div class="map-drawer-expand map-drawer" v-else @click="
+              this.isShowdrawer = !this.isShowdrawer;
-          () => {
+            }
-            this.isShowdrawer = !this.isShowdrawer;
+          "
-          }
+        ></div>
-        "></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"
+} from "@/api/fqsq.js";
-import { deleteBdcdy } from "@/api/ywbl.js"
+import { deleteBdcdy } from "@/api/ywbl.js";
-import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"
+import { getWorkFlowImage } from "@/api/jsydsyqFlow.js";
-import { getForm } from "./flowform.js"
+import { getForm } from "./flowform.js";
-import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue"
+import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue";
-import { queueDjywmc } from '@/views/ywbl/ywsq/slectBdcdata.js';
+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) {
+    handleDel(item) {
-      this.$confirm('确定要删除吗, 是否继续?', '提示', {
+      this.$confirm("确定要删除吗, 是否继续?", "提示", {
-        confirmButtonText: '确定',
+        confirmButtonText: "确定",
-        cancelButtonText: '取消',
+        cancelButtonText: "取消",
-        type: 'warning'
+        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: '已取消删除'
-        })
      })
+        .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: '批量删除',
+        title: "批量删除",
-        width: '50%',
+        width: "50%",
        btnShow: true,
-        editItem: 'workflow/components/batchDel',
+        editItem: "workflow/components/batchDel",
-        height: '600px',
+        height: "600px",
        formData: {
          bsmSlsq: this.bsmSlsq,
-          dataList: this.unitData
+          dataList: this.unitData,
        },
-        cancel: function () { }, //取消事件的回调
+        cancel: function () {}, //取消事件的回调
-        confirm: 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 => {
+          getWorkFlowImage(this.bsmSlsq).then((res) => {
-            this.imgSrc = URL.createObjectURL(res)
+            this.imgSrc = URL.createObjectURL(res);
            this.$popup({
-              title: '流程图',
+              title: "流程图",
              btnShow: true,
-              editItem: 'workflow/components/flowChart',
+              editItem: "workflow/components/flowChart",
-              formData: this.imgSrc
+              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)
+          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