Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
d84f2062 by 任超
Options

style:申请单元列表

2 parents 81c221ec a0dbcf25
Inline Side-by-side
Showing 5 changed files with 231 additions and 16 deletions
...@@ -56,20 +56,13 @@ export default { ...@@ -56,20 +56,13 @@ export default {
56 mounted () { 56 mounted () {
57 // 计算滚动条高度 57 // 计算滚动条高度
58 setTimeout(() => { 58 setTimeout(() => {
59 if (this.btnShow) { 59 if (this.btnShow) { //判断按钮的显影来决定是否需要计算高度
60 if (this.height == 'auto') { 60 if (this.height == 'auto') {
61 this.contentHeight = (this.$refs.contentRef.offsetHeight - 115) + 'px' 61 this.contentHeight = (this.$refs.contentRef.offsetHeight - 100) + 'px'
62 } else {
63 this.contentHeight = (parseInt(this.height) - parseInt('115px')) + 'px';
64 } 62 }
65 } else { 63 } else {
66 if (this.height == 'auto') { 64 this.contentHeight = (parseInt(this.height) - parseInt('100px')) + 'px';
67 this.contentHeight = this.$refs.contentRef.offsetHeight + 'px'
68 } else {
69 this.contentHeight = this.height
70 }
71 } 65 }
72
73 }, 500) 66 }, 500)
74 }, 67 },
75 methods: { 68 methods: {
...@@ -132,7 +125,7 @@ export default { ...@@ -132,7 +125,7 @@ export default {
132 .ls-title { 125 .ls-title {
133 padding: 16px; 126 padding: 16px;
134 color: #ffffff; 127 color: #ffffff;
135 background: linear-gradient(-2deg, #409EFF, transparent) 128 <<<<<<< HEAD background: linear-gradient(-2deg, #409EFF, transparent)=======background: linear-gradient(3deg, #409EFF, transparent) >>>>>>> a0dbcf251b229577437bdc0f84385af37f76a7ac
136 } 129 }
137 130
138 .ls-title .svg-icon { 131 .ls-title .svg-icon {
...@@ -146,7 +139,7 @@ export default { ...@@ -146,7 +139,7 @@ export default {
146 } 139 }
147 140
148 .ls-mask-footer { 141 .ls-mask-footer {
149 height: 65px; 142 height: 50px;
150 display: flex; 143 display: flex;
151 justify-content: center; 144 justify-content: center;
152 width: 100%; 145 width: 100%;
...@@ -164,7 +157,7 @@ export default { ...@@ -164,7 +157,7 @@ export default {
164 right: 12px; 157 right: 12px;
165 font-size: 20px; 158 font-size: 20px;
166 cursor: pointer; 159 cursor: pointer;
167 color: #ffffff; 160 color: #409EFF;
168 } 161 }
169 162
170 /deep/.el-loading-mask { 163 /deep/.el-loading-mask {
...@@ -172,7 +165,7 @@ export default { ...@@ -172,7 +165,7 @@ export default {
172 } 165 }
173 166
174 /deep/.el-button { 167 /deep/.el-button {
175 margin: 15px 10px; 168 margin: 8px 10px;
176 width: 75px; 169 width: 75px;
177 } 170 }
178 </style> 171 </style>
......
...@@ -33,6 +33,14 @@ export const constantRoutes = [ ...@@ -33,6 +33,14 @@ export const constantRoutes = [
33 name: 'workFrame', 33 name: 'workFrame',
34 hidden: true, 34 hidden: true,
35 meta: { title: '发起申请' } 35 meta: { title: '发起申请' }
36 },
37 // 业务流程只读框架
38 {
39 path: '/workFrameView',
40 component: () => import('@/views/workflow/workFrameView.vue'),
41 name: 'workFrameView',
42 hidden: true,
43 meta: { title: '发起申请' }
36 } 44 }
37 ] 45 ]
38 46
......
1 <template>
2 <div class="container">
3 <!-- 顶部内容框 -->
4 <div class="topButton">
5 <!-- 左侧业务功能按钮 -->
6 <ul>
7 <li @click="operation(index, item)" v-for="(item, index) in leftButtonList" :key="index">
8 <svg-icon :icon-class="item.icon" />
9 <span class="iconName">{{ item.name }}</span>
10 </li>
11 </ul>
12 <!-- 右侧流程按钮 -->
13 <ul>
14 <li @click="operation(index, item)" v-for="(item, index) in rightButtonList" :key="index">
15 <svg-icon class="icon" :icon-class="item.icon" />
16 <span class="iconName">{{ item.name }}</span>
17 </li>
18 </ul>
19 </div>
20 <!-- 内容框架 -->
21 <div class="containerFrame">
22 <!-- 左侧菜单栏 -->
23 <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
24 <div v-if="this.isShowdrawer">
25 <div class="title">申请单元列表({{ unitData.length }})</div>
26 <el-menu :default-active="activeIndex" @select="unitClick">
27 <el-menu-item v-for="(item, index) in unitData" :index="index.toString()" :key="index">
28 <p>{{ item.bdcdyh }}</p>
29 <p class="title-detail">{{ item.zl }}</p>
30 </el-menu-item>
31 </el-menu>
32 </div>
33 <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
34 () => {
35 this.isShowdrawer = !this.isShowdrawer;
36 }
37 "></div>
38 <div class="map-drawer-expand map-drawer" v-else @click="
39 () => {
40 this.isShowdrawer = !this.isShowdrawer;
41 }
42 "></div>
43 </div>
44 <div class="leftCon">
45 <!-- 分屏左侧预览 -->
46 <div v-if="splitScreen" class="splitScreen-con">
47 <component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" />
48 </div>
49 <!-- 表单内容区域 -->
50 <div class="rightContainer">
51 <el-tabs v-model="tabName" @tab-click="tabClick">
52 <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
53 </el-tab-pane>
54 </el-tabs>
55 <component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
56 </div>
57 </div>
58 </div>
59 </div>
60 </template>
61
62 <style scoped lang='scss'>
63 @import "~@/styles/mixin.scss";
64 @import "./workFrame.scss";
65 </style>
66
67 <script>
68 import {
69 leftMenu,
70 stepExpandInfo,
71 record,
72 getNextLinkInfo,
73 completeTask,
74 } from "@/api/fqsq.js"
75 import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"
76 import { getForm } from "./flowform.js"
77 export default {
78 data () {
79 return {
80 // 流程图
81 imgSrc: '',
82 // 折叠
83 isShowdrawer: true,
84 // 默认选中
85 activeIndex: '0',
86 //受理申请标识码
87 bsmSlsq: this.$route.query.bsmSlsq,
88 //当前流程所在环节
89 bestepid: this.$route.query.bestepid,
90 //顶部左侧按钮集合
91 leftButtonList: [],
92 //顶部右侧按钮集合
93 rightButtonList: [],
94 //左侧菜单数据集合
95 unitData: [],
96 //设置那个表单选中
97 tabName: "",
98 //表单集合
99 tabList: [],
100 //选择加载哪一个组件
101 componentTag: "",
102 //设置表单组件是否刷选值
103 fresh: 10,
104 //设置表单传递数据
105 currentSelectProps: {},
106 //是否开启材料分屏
107 splitScreen: false,
108 //材料分屏表单
109 clxxForm: "",
110 //材料信息选择卡索引
111 clxxIndex: "",
112 //材料信息选项卡对象
113 clxxTab: {},
114 }
115 },
116 mounted () {
117 this.loadBdcdylist();
118 this.flowInitParam();
119 },
120 methods: {
121 //加载流程初始参数
122 flowInitParam () {
123 var formdata = new FormData();
124 formdata.append("bsmSlsq", this.bsmSlsq);
125 formdata.append("bestepid", this.bestepid);
126 formdata.append("type", "READ_ONLY");
127 stepExpandInfo(formdata).then((res) => {
128 if (res.code === 200) {
129 this.leftButtonList = res.result.button;
130 this.rightButtonList = res.result.operation;
131 this.tabList = res.result.form;
132 //默认选择第一个选项卡内容
133 this.tabName = res.result.form[0].value;
134 let that = this;
135 this.tabList.forEach(function (item, index) {
136 if (item.value == "clxx") {
137 that.clxxIndex = index;
138 that.clxxForm = getForm(item.value);
139 that.clxxTab = item;
140 }
141 });
142 //默认加载第一个选项卡的组件内容
143 this.getFromRouter(res.result.form[0].value);
144 }
145 })
146 },
147 //流程环节操作按钮
148 operation (index, item) {
149 //按钮 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书
150 //操作按钮 登簿：record 转件：transfer 退回：back 退出：signout
151 let that = this;
152 switch (item.value) {
153 case "B1":
154 getWorkFlowImage(this.bsmSlsq).then(res => {
155 this.imgSrc = URL.createObjectURL(res)
156 this.$popup({
157 title: '流程图',
158 editItem: 'workflow/components/flowChart',
159 formData: this.imgSrc
160 })
161 })
162 break;
163 case "B5":
164 this.zsylFlag = true;
165 break;
166 case "B2": //材料分屏按钮
167 this.splitScreen = this.splitScreen ? false : true;
168 this.$store.dispatch('app/settScreen', this.splitScreen)
169 if (this.splitScreen) {
170 //如果当前选项卡为材料信息内容，递减到上一个选项卡内容
171 if (this.tabName == this.clxxTab.value) {
172 this.tabName = this.tabList[this.clxxIndex - 1].value;
173 this.getFromRouter(this.tabList[this.clxxIndex - 1].value);
174 }
175 this.tabList.splice(this.clxxIndex, 1);
176 } else {
177 this.tabList.splice(this.clxxIndex, 1, this.clxxTab);
178 }
179 break;
180 case "signout":
181 window.close();
182 break;
183 }
184 },
185 //读取申请单元信息
186 loadBdcdylist () {
187 var formdata = new FormData();
188 formdata.append("bsmSlsq", this.bsmSlsq);
189 formdata.append("bestepid", this.bestepid);
190 leftMenu(formdata).then((res) => {
191 if (res.code === 200) {
192 this.unitData = res.result;
193 this.currentSelectProps = res.result[0];
194 }
195 })
196 },
197 //申请单元点击事件
198 unitClick (index) {
199 if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
200 this.currentSelectProps = this.unitData[index];
201 this.fresh += 1;
202 }
203 },
204 //表单选项卡事件
205 tabClick (tab, event) {
206 this.getFromRouter(tab.name);
207 },
208 //切换选项卡内容组件
209 getFromRouter (tabname) {
210 this.componentTag = getForm(tabname);
211 },
212 }
213 }
214 </script>
...\ No newline at end of file ...\ No newline at end of file
...@@ -131,7 +131,7 @@ export default { ...@@ -131,7 +131,7 @@ export default {
131 this.fetchData() 131 this.fetchData()
132 }, 132 },
133 ywhClick (item) { 133 ywhClick (item) {
134 const { href } = this.$router.resolve('/workFrame?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1'); 134 const { href } = this.$router.resolve('/workFrameView?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
135 window.open(href, '_blank'); 135 window.open(href, '_blank');
136 } 136 }
137 } 137 }
......
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
116 console.log(name, sort); 116 console.log(name, sort);
117 }, 117 },
118 openDialog (item) { 118 openDialog (item) {
119 const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + item.bsmBusiness + '&viewtype=3') 119 const { href } = this.$router.resolve('/workFrameView?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + item.bsmBusiness + '&viewtype=3')
120 window.open(href, '_blank'); 120 window.open(href, '_blank');
121 } 121 }
122 } 122 }
......