<!-- * @Description: * @Autor: renchao * @LastEditTime: 2023-06-09 16:55:31 --> <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 }} {{ item.value }}</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"> <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> </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 WorkFlow from "./mixin/index" import publicFlow from "./mixin/public.js" import { getStepFormInfo } from "@/api/fqsq.js" import { getForm } from "./flowform" import NoticeBar from "@/components/NoticeBar/index"; // 引入左侧菜单 import ordinaryMenu from "./components/leftmenu/ordinaryMenu.vue" // 引入左侧菜单 import segmentMenu from "./components/leftmenu/segmentMenu.vue" export default { mixins: [WorkFlow, publicFlow], components: { NoticeBar, ordinaryMenu, segmentMenu }, data () { return { // 流程图 imgSrc: "", // 折叠 isShowdrawer: true, // 默认选中 activeIndex: "0", //受理申请标识码 bsmSlsq: this.$route.query.bsmSlsq, //当前流程所在环节 bestepid: this.$route.query.bestepid, // 判断类型 type: "READ_ONLY", //设置那个表单选中 tabName: "", //表单集合 tabList: [], //选择加载哪一个组件 componentTag: "", //设置表单组件是否刷选值 fresh: 10, //设置表单传递数据 currentSelectProps: {}, //是否开启材料分屏 splitScreen: false, //材料分屏表单 clxxForm: "", //材料信息选择卡索引 clxxIndex: "", //材料信息选项卡对象 clxxTab: {}, }; }, methods: { getCurrentSelectProps (val) { this.currentSelectProps = val }, //申请单元点击事件 stepForm (index) { this.currentSelectProps.type = "READ_ONLY" getStepFormInfo(this.currentSelectProps).then((res) => { if (res.code === 200) { this.fresh++; //获取单元对应的所有表单信息 this.tabList = res.result; //默认加载第一个表单信息 this.tabName = res.result[0].value; //批量操作无分屏按钮 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; } }) } } }) }, } } </script>