<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:15:39
-->
<template>
<div class="container">
<!-- 顶部内容框 -->
<div class="topButton">
<!-- 左侧业务功能按钮 -->
<ul>
<li @click="operation(item)" v-for="(item, index) in leftButtonList" :key="index">
<svg-icon class="icon" :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
</li>
</ul>
<!-- 右侧流程按钮 -->
<ul>
<li @click="operation(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>
<NoticeBar class="NoticeBar" :noticeList="noticeList" v-if="noticeList.length > 0" />
</div>
<!-- 内容框架 -->
<div class="containerFrame">
<!-- 左侧菜单栏 区分业务-->
<segmentMenu v-if="['A0320099','A0330099' ].includes(slsq.djqxbm)" @getCurrentSelectProps="getCurrentSelectProps" />
<ordinaryMenu v-else @getCurrentSelectProps="getCurrentSelectProps" />
<div class="leftCon">
<!-- 分屏左侧预览 -->
<div v-if="splitScreen" class="splitScreen-con">
<component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" />
</div>
<!-- 表单内容区域 -->
<div class="rightContainer">
<div class="count">
当前流程所在环节:
<span>{{ this.zbhj }}</span>
</div>
<el-tabs v-model="tabName" :before-leave="beforeLeave" @tab-click="handleClick">
<el-tab-pane :label="item.name" :name="item.value" v-for="item in tabList" :key="item.value">
</el-tab-pane>
</el-tabs>
<component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
</div>
</div>
</div>
<!-- 打印模板需要此模块 -->
<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" v-show="false">
<embed id="LODOP_EM" type="application/x-print-lodop" width="820" height="450" pluginspage="install_lodop32.exe" />
</object>
<el-upload class="fileUpdate" action="" :show-file-list="false" multiple :auto-upload="false"
:on-change="handleChange" :before-upload="beforeUpload">
<el-button id="cldr" icon="el-icon-upload" type="primary" v-show="false">上传</el-button>
</el-upload>
</div>
</template>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "./workFrame.scss";
</style>
<script>
import WorkFlow from "./mixin/index"
import publicFlow from "./mixin/public.js"
import { getStepFormInfo, unClaimTask } from "@/api/workFlow.js"
import { getForm } from "./flowform"
import NoticeBar from "@/components/NoticeBar/index"
// import ProcessViewer from "./components/processViewer.vue"
// 引入左侧菜单
import ordinaryMenu from "./components/leftmenu/ordinaryMenu.vue"
// 引入左侧菜单
import segmentMenu from "./components/leftmenu/segmentMenu.vue"
import selectBdc from "@/views/ywbl/ywsq/selectBdc.vue"
export default {
components: {
selectBdc,
NoticeBar,
ordinaryMenu,
segmentMenu
},
mixins: [WorkFlow, publicFlow],
data () {
return {
isDialog: false,
//受理申请标识码
bsmSlsq: this.$route.query.bsmSlsq,
//当前流程所在环节
bestepid: this.$route.query.bestepid,
//当前流程所在环节
zbhj: this.$route.query.zbhj,
//设置那个表单选中
tabName: "",
//设置那个表单选择
currentSelectTab: {},
//表单集合
tabList: [],
//选择加载哪一个组件
componentTag: "",
//设置表单传递数据
currentSelectProps: {},
//材料分屏表单
clxxForm: "",
//材料信息选择卡索引
clxxIndex: "",
//材料信息选项卡对象
clxxTab: {},
ableOperation: false,
//页面监听时间
_beforeUnload_time: ""
}
},
mounted () {
this.$store.dispatch('user/refreshPage', false);
//添加页面监听事件
window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
window.addEventListener("unload", (e) => this.unloadHandler(e));
},
destroyed () {
window.removeEventListener("beforeunload", (e) =>
this.beforeunloadHandler(e)
);
window.removeEventListener("unload", (e) => this.unloadHandler(e));
},
methods: {
/**
* @description: getCurrentSelectProps
* @param {*} val
* @author: renchao
*/
getCurrentSelectProps (val) {
this.currentSelectProps = val
},
/**
* @description: beforeunloadHandler
* @author: renchao
*/
beforeunloadHandler () {
this._beforeUnload_time = new Date().getTime();
},
/**
* @description: unloadHandler
* @param {*} e
* @author: renchao
*/
unloadHandler (e) {
this._gap_time = new Date().getTime() - this._beforeUnload_time;
//判断是窗口关闭还是刷新
if (this._gap_time <= 10) {
//取消认领
unClaimTask(this.bsmSlsq, this.bestepid);
}
},
//申请单元点击事件
/**
* @description: 申请单元点击事件
* @param {*} index
* @author: renchao
*/
stepForm (index) {
getStepFormInfo(this.currentSelectProps).then((res) => {
if (res.code === 200) {
this.fresh++;
//获取单元对应的所有表单信息
this.tabList = res.result;
//默认加载第一个表单信息
let arr = res.result.filter(item => item.defaultForm)
if (arr.length > 0) {
this.tabName = arr[0].value;
} else {
this.tabName = res.result[0].value;
}
this.ableOperation = this.tabList[0].ableOperation
//批量操作无分屏按钮
if (index != null) {
//处理分屏材料信息
let that = this;
this.tabList.forEach(function (item, index) {
if (item.value == "clxx") {
that.clxxIndex = index;
that.clxxForm = getForm(item.value, that.$route.query.sqywbm);
that.clxxTab = item;
}
})
}
}
})
},
/**
* @description: openDialog
* @author: renchao
*/
openDialog () {
this.$store.dispatch('user/refreshPage', false)
let data = JSON.parse(localStorage.getItem('ywbl'))
let title
if (data?.sqywmc) {
title = "申请业务：" + data?.sqywmc
} else {
title = "申请业务：" + data?.djywmc
}
this.$popupDialog(title, "ywbl/ywsq/selectBdc", { 'djywbm': this.$route.query.sqywbm, 'isJump': true, 'sqywInfo': data }, "80%", true)
},
//选项卡切换事件
/**
* @description: 右侧表单选项卡事件
* @param {*} handleClick
* @author: renchao
*/
handleClick(a) {
let p = Object.keys(this.tabList[0]).filter(
(item) => item == "ableOperation"
);
if (p) {
this.ableOperation = this.tabList[a.index].ableOperation;
}
},
}
}
</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>