refactor:工作流
Showing
3 changed files
with
1 additions
and
816 deletions
... | @@ -24,20 +24,13 @@ export const constantRoutes = [ | ... | @@ -24,20 +24,13 @@ export const constantRoutes = [ |
24 | ] | 24 | ] |
25 | }, | 25 | }, |
26 | // 业务流程框架 | 26 | // 业务流程框架 |
27 | { | ||
28 | path: '/workFrame', | ||
29 | component: () => import('@/views/workflow/workFrame.vue'), | ||
30 | name: 'workFrame', | ||
31 | hidden: true, | ||
32 | meta: { title: '发起申请' } | ||
33 | }, | ||
34 | // 业务流程框架 | 27 | // 业务流程框架 |
35 | { | 28 | { |
36 | path: '/workFramecs', | 29 | path: '/workFramecs', |
37 | component: () => import('@/views/workflow/workFrame1.vue'), | 30 | component: () => import('@/views/workflow/workFrame1.vue'), |
38 | name: 'workFramecs', | 31 | name: 'workFramecs', |
39 | hidden: true, | 32 | hidden: true, |
40 | meta: { title: '发起申请1' } | 33 | meta: { title: '发起申请' } |
41 | }, | 34 | }, |
42 | // 业务流程只读框架 | 35 | // 业务流程只读框架 |
43 | { | 36 | { |
... | @@ -45,14 +38,6 @@ export const constantRoutes = [ | ... | @@ -45,14 +38,6 @@ export const constantRoutes = [ |
45 | component: () => import('@/views/workflow/workFrameView1.vue'), | 38 | component: () => import('@/views/workflow/workFrameView1.vue'), |
46 | name: 'workFrameViewcs', | 39 | name: 'workFrameViewcs', |
47 | hidden: true, | 40 | hidden: true, |
48 | meta: { title: '发起申请2' } | ||
49 | }, | ||
50 | // 业务流程只读框架 | ||
51 | { | ||
52 | path: '/workFrameView', | ||
53 | component: () => import('@/views/workflow/workFrameView.vue'), | ||
54 | name: 'workFrameView', | ||
55 | hidden: true, | ||
56 | meta: { title: '发起申请' } | 41 | meta: { title: '发起申请' } |
57 | }, | 42 | }, |
58 | { | 43 | { | ... | ... |
src/views/workflow/workFrame.vue
deleted
100644 → 0
1 | <template> | ||
2 | <div class="container"> | ||
3 | <!-- 顶部内容框 --> | ||
4 | <div class="topButton"> | ||
5 | <!-- 左侧业务功能按钮 --> | ||
6 | <ul> | ||
7 | <li @click="operation(item)" v-for="(item, index) in leftButtonList" :key="index"> | ||
8 | <svg-icon class="icon" :icon-class="item.icon" /> | ||
9 | <span class="iconName">{{ item.name }}</span> | ||
10 | </li> | ||
11 | </ul> | ||
12 | <!-- 右侧流程按钮 --> | ||
13 | <ul> | ||
14 | <li @click="operation(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 | <NoticeBar class="NoticeBar" :noticeList="noticeList" /> | ||
20 | </div> | ||
21 | <!-- 内容框架 --> | ||
22 | <div class="containerFrame"> | ||
23 | <!-- 左侧菜单栏 --> | ||
24 | <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }"> | ||
25 | <div class="title" @click="unitClick(-1)" v-if="showBatch">{{ batchButtonName }}</div> | ||
26 | <div v-if="this.isShowdrawer"> | ||
27 | <div class="title"> | ||
28 | 申请单元列表({{ unitData.length }}) | ||
29 | <el-button type="text" class="batchDel" @click="handleBatchDel" v-if="unitData.length > 1">批量删除</el-button> | ||
30 | </div> | ||
31 | <el-menu :default-active="activeIndex" @select="unitClick"> | ||
32 | <el-menu-item v-for="(item, index) in unitData" :index="index.toString()" :key="index"> | ||
33 | <div> | ||
34 | <p>{{ item.bdcdyh }}</p> | ||
35 | <p class="title-detail">{{ item.zl }}</p> | ||
36 | </div> | ||
37 | <i class="el-icon-delete" v-if="unitData.length > 1" @click.stop="handleDel(item)"></i> | ||
38 | </el-menu-item> | ||
39 | </el-menu> | ||
40 | </div> | ||
41 | <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click=" | ||
42 | () => { | ||
43 | this.isShowdrawer = !this.isShowdrawer; | ||
44 | } | ||
45 | "></div> | ||
46 | <div class="map-drawer-expand map-drawer" v-else @click=" | ||
47 | () => { | ||
48 | this.isShowdrawer = !this.isShowdrawer; | ||
49 | } | ||
50 | "></div> | ||
51 | </div> | ||
52 | <div class="leftCon"> | ||
53 | <!-- 分屏左侧预览 --> | ||
54 | <div v-if="splitScreen" class="splitScreen-con"> | ||
55 | <component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" /> | ||
56 | </div> | ||
57 | <!-- 表单内容区域 --> | ||
58 | <div class="rightContainer"> | ||
59 | <el-tabs v-model="tabName" :before-leave="beforeLeave"> | ||
60 | <el-tab-pane :label="item.name" :name="item.value" v-for="item in tabList" :key="item.value"> | ||
61 | </el-tab-pane> | ||
62 | </el-tabs> | ||
63 | <component :key="fresh" :is="componentTag" v-bind="currentSelectProps" /> | ||
64 | </div> | ||
65 | </div> | ||
66 | </div> | ||
67 | <fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" /> | ||
68 | </div> | ||
69 | </template> | ||
70 | |||
71 | <style scoped lang='scss'> | ||
72 | @import "~@/styles/mixin.scss"; | ||
73 | @import "./workFrame.scss"; | ||
74 | </style> | ||
75 | <script> | ||
76 | import { | ||
77 | leftMenu, | ||
78 | stepExpandInfo, | ||
79 | record, | ||
80 | getNextLinkInfo, | ||
81 | completeTask, | ||
82 | getStepFormInfo, | ||
83 | } from "@/api/fqsq.js"; | ||
84 | import { mapGetters } from "vuex" | ||
85 | import NoticeBar from '@/components/NoticeBar/index' | ||
86 | import { deleteFlow, unClaimTask } from "@/api/ywbl.js"; | ||
87 | import ProcessViewer from './components/processViewer.vue' | ||
88 | import { getWorkFlowImage } from "@/api/workflow/jsydsyqFlow.js"; | ||
89 | import { getForm } from "./flowform.js"; | ||
90 | import fqsqDialog from "@/views/ywbl/ywsq/selectBdc.vue"; | ||
91 | import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js"; | ||
92 | export default { | ||
93 | components: { | ||
94 | fqsqDialog, | ||
95 | NoticeBar, | ||
96 | ProcessViewer | ||
97 | }, | ||
98 | data () { | ||
99 | return { | ||
100 | noticeList: [], | ||
101 | isDialog: false, | ||
102 | // 流程图 | ||
103 | // 折叠 | ||
104 | isShowdrawer: true, | ||
105 | // 默认选中 | ||
106 | activeIndex: "0", | ||
107 | //受理申请标识码 | ||
108 | bsmSlsq: this.$route.query.bsmSlsq, | ||
109 | //当前流程所在环节 | ||
110 | bestepid: this.$route.query.bestepid, | ||
111 | //是否展示批量按钮 | ||
112 | showBatch: false, | ||
113 | //批量按钮名称 | ||
114 | batchButtonName: '', | ||
115 | //顶部左侧按钮集合 | ||
116 | leftButtonList: [], | ||
117 | //顶部右侧按钮集合 | ||
118 | rightButtonList: [], | ||
119 | //左侧菜单数据集合 | ||
120 | unitData: [], | ||
121 | //设置那个表单选中 | ||
122 | tabName: "", | ||
123 | //表单集合 | ||
124 | tabList: [], | ||
125 | //选择加载哪一个组件 | ||
126 | componentTag: "", | ||
127 | //设置表单组件是否刷选值 | ||
128 | fresh: 10, | ||
129 | //设置表单传递数据 | ||
130 | currentSelectProps: {}, | ||
131 | //是否开启材料分屏 | ||
132 | splitScreen: false, | ||
133 | //材料分屏表单 | ||
134 | clxxForm: "", | ||
135 | //材料信息选择卡索引 | ||
136 | clxxIndex: "", | ||
137 | //材料信息选项卡对象 | ||
138 | clxxTab: {}, | ||
139 | //页面监听时间 | ||
140 | _beforeUnload_time: "", | ||
141 | }; | ||
142 | }, | ||
143 | mounted () { | ||
144 | this.loadBdcdylist(); | ||
145 | this.flowInitParam(); | ||
146 | //添加页面监听事件 | ||
147 | window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) | ||
148 | window.addEventListener('unload', e => this.unloadHandler(e)) | ||
149 | }, | ||
150 | destroyed () { | ||
151 | window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e)) | ||
152 | window.removeEventListener('unload', e => this.unloadHandler(e)) | ||
153 | }, | ||
154 | methods: { | ||
155 | beforeunloadHandler () { | ||
156 | this._beforeUnload_time = new Date().getTime() | ||
157 | }, | ||
158 | unloadHandler (e) { | ||
159 | thsi.$alert("234234"); | ||
160 | this._gap_time = new Date().getTime() - this._beforeUnload_time | ||
161 | //判断是窗口关闭还是刷新 | ||
162 | if (this._gap_time <= 10) { | ||
163 | //取消认领 | ||
164 | unClaimTask(this.bsmSlsq, this.bestepid) | ||
165 | } | ||
166 | }, | ||
167 | changeLoadIndex () { | ||
168 | this.loadIndex++ | ||
169 | }, | ||
170 | closeDialog () { | ||
171 | this.myValue = false | ||
172 | }, | ||
173 | // 更新列表 | ||
174 | updateDialog () { | ||
175 | this.loadBdcdylist(); | ||
176 | }, | ||
177 | // 删除左侧列表 | ||
178 | handleDel (item) { | ||
179 | this.$confirm("确定要删除吗, 是否继续?", "提示", { | ||
180 | confirmButtonText: "确定", | ||
181 | cancelButtonText: "取消", | ||
182 | type: "warning", | ||
183 | }) | ||
184 | .then(() => { | ||
185 | var formdata = new FormData(); | ||
186 | formdata.append("bsmSldyList", item.bsmSldy.split(",")); | ||
187 | formdata.append("bsmSlsq", this.bsmSlsq); | ||
188 | deleteFlow(formdata).then((res) => { | ||
189 | if (res.code == 200) { | ||
190 | this.$message.success("删除成功"); | ||
191 | this.loadBdcdylist(); | ||
192 | } else { | ||
193 | this.$message.error(res.message); | ||
194 | } | ||
195 | }); | ||
196 | }) | ||
197 | .catch(() => { | ||
198 | this.$message({ | ||
199 | type: "info", | ||
200 | message: "已取消删除", | ||
201 | }); | ||
202 | }); | ||
203 | }, | ||
204 | handleBatchDel () { | ||
205 | let that = this; | ||
206 | this.$popup({ | ||
207 | title: "批量删除", | ||
208 | width: "50%", | ||
209 | btnShow: true, | ||
210 | editItem: "workflow/components/batchDel", | ||
211 | height: "600px", | ||
212 | formData: { | ||
213 | bsmSlsq: this.bsmSlsq, | ||
214 | dataList: this.unitData, | ||
215 | }, | ||
216 | cancel: function () { }, //取消事件的回调 | ||
217 | confirm: function () { | ||
218 | that.loadBdcdylist(); | ||
219 | }, //确认事件的回调 | ||
220 | }); | ||
221 | }, | ||
222 | //加载流程初始参数 | ||
223 | flowInitParam () { | ||
224 | var formdata = new FormData(); | ||
225 | formdata.append("bsmSlsq", this.bsmSlsq); | ||
226 | formdata.append("bestepid", this.bestepid); | ||
227 | stepExpandInfo(formdata).then((res) => { | ||
228 | if (res.code === 200) { | ||
229 | this.leftButtonList = res.result.button; | ||
230 | this.rightButtonList = res.result.operation; | ||
231 | } | ||
232 | }); | ||
233 | }, | ||
234 | //流程环节操作按钮 | ||
235 | operation (item) { | ||
236 | //按钮 B0:选择不动产单元 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6:打印申请书 B7:证书领取 B8:楼盘表 B9:登簿 | ||
237 | //操作按钮 登簿:record 转件:transfer 退回:back 退出:signout | ||
238 | let that = this; | ||
239 | switch (item.value) { | ||
240 | case "B0": | ||
241 | // let type = queueDjywmc(this.$route.query.sqywbm) | ||
242 | this.isDialog = true; | ||
243 | break; | ||
244 | case "B1": | ||
245 | getWorkFlowImage(this.bsmSlsq, this.$route.query.bestepid).then(res => { | ||
246 | let { result } = res | ||
247 | this.$popup("流程图", "workflow/components/processViewer", { | ||
248 | formData: { | ||
249 | xml: result.xml, | ||
250 | finishedInfo: { | ||
251 | finishedTaskSet: result.finishedTaskSet, | ||
252 | unfinishedTaskSet: result.unfinishedTaskSet, | ||
253 | rejectedTaskSet: result.rejectedTaskSet, | ||
254 | finishedSequenceFlowSet: result.finishedSequenceFlowSet | ||
255 | }, | ||
256 | allCommentList: result.historyTaskList | ||
257 | } | ||
258 | }) | ||
259 | }) | ||
260 | break; | ||
261 | case "B2": //材料分屏按钮 | ||
262 | this.splitScreen = this.splitScreen ? false : true; | ||
263 | this.$store.dispatch("app/settScreen", this.splitScreen); | ||
264 | if (this.splitScreen) { | ||
265 | //如果当前选项卡为材料信息内容,递减到上一个选项卡内容 | ||
266 | if (this.tabName == this.clxxTab.value) { | ||
267 | this.tabName = this.tabList[this.clxxIndex - 1].value; | ||
268 | this.getFromRouter(this.tabList[this.clxxIndex - 1].value); | ||
269 | } | ||
270 | //删除材料信息选项卡数据 | ||
271 | this.tabList.splice(this.clxxIndex, 1); | ||
272 | } else { | ||
273 | //新增材料信息选项卡数据 | ||
274 | this.tabList.splice(this.clxxIndex, 0, this.clxxTab); | ||
275 | } | ||
276 | break; | ||
277 | case "B4": | ||
278 | this.$popup("登记簿详情", "registerBook/djbFrame", { | ||
279 | formData: this.currentSelectProps, | ||
280 | width: "1220px", | ||
281 | height: "790px", | ||
282 | cancel: () => { | ||
283 | console.log("取消回调"); | ||
284 | }, | ||
285 | confirm: () => { | ||
286 | console.log("确认回调"); | ||
287 | }, | ||
288 | }); | ||
289 | break; | ||
290 | case "B5": | ||
291 | this.$popup("证书预览", "workflow/components/zsyl", { | ||
292 | height: "850px", | ||
293 | width: "1070px", | ||
294 | formData: { | ||
295 | bsmSlsq: this.bsmSlsq, | ||
296 | entryType: '1' | ||
297 | }, | ||
298 | cancel: () => { | ||
299 | console.log("取消回调"); | ||
300 | }, | ||
301 | confirm: () => { | ||
302 | console.log("确认回调"); | ||
303 | }, | ||
304 | }) | ||
305 | break; | ||
306 | case "B7": | ||
307 | this.$popup("证书领取", "workflow/components/zslq", { | ||
308 | width: '900px', | ||
309 | formData: { bsmSlsq: this.$route.query.bsmSlsq }, | ||
310 | }) | ||
311 | break; | ||
312 | case "back": //退回按钮 | ||
313 | this.$popup({ | ||
314 | title: "退回", | ||
315 | editItem: "workflow/components/th", | ||
316 | height: "400px", | ||
317 | width: '30%', | ||
318 | formData: { | ||
319 | bsmSlsq: this.bsmSlsq, | ||
320 | bestepid: this.bestepid | ||
321 | }, | ||
322 | btnShow: true, | ||
323 | cancel: () => { | ||
324 | console.log("取消回调"); | ||
325 | }, | ||
326 | confirm: () => { | ||
327 | console.log("确认回调"); | ||
328 | }, | ||
329 | }) | ||
330 | break; | ||
331 | case "transfer": //转件按钮 | ||
332 | getNextLinkInfo({ | ||
333 | bsmSlsq: this.bsmSlsq, | ||
334 | bestepid: this.bestepid, | ||
335 | }).then((res) => { | ||
336 | if (res.code === 200) { | ||
337 | if (res.result) { | ||
338 | this.sendToNext(res.result); | ||
339 | } else { | ||
340 | this.sendToEnd(); | ||
341 | } | ||
342 | } | ||
343 | }); | ||
344 | break; | ||
345 | case "stop": //终止按钮 | ||
346 | this.$popup("终止", "workflow/components/stop", { | ||
347 | height: "330px", | ||
348 | width: '30%', | ||
349 | formData: { | ||
350 | bsmSlsq: this.bsmSlsq, | ||
351 | bestepid: this.bestepid, | ||
352 | }, | ||
353 | btnShow: true, | ||
354 | cancel: () => { | ||
355 | console.log("取消回调"); | ||
356 | }, | ||
357 | confirm: () => { | ||
358 | console.log("确认回调"); | ||
359 | }, | ||
360 | }) | ||
361 | break; | ||
362 | case "signout": | ||
363 | window.close(); | ||
364 | //取消认领 | ||
365 | unClaimTask(this.bsmSlsq, this.bestepid) | ||
366 | break; | ||
367 | case "B9": | ||
368 | var formdata = new FormData(); | ||
369 | formdata.append("bsmSlsq", this.bsmSlsq); | ||
370 | formdata.append("bestepid", this.bestepid); | ||
371 | this.$confirm("请确认是否登簿", "提示", { | ||
372 | iconClass: "el-icon-question", //自定义图标样式 | ||
373 | confirmButtonText: "确认", //确认按钮文字更换 | ||
374 | cancelButtonText: "取消", //取消按钮文字更换 | ||
375 | showClose: true, //是否显示右上角关闭按钮 | ||
376 | type: "warning", //提示类型 success/info/warning/error | ||
377 | }).then(function () { | ||
378 | record(formdata).then((res) => { | ||
379 | if (res.code === 200) { | ||
380 | if (res.result.length === 1) { | ||
381 | res.result[0].state ? that.$alert("登簿成功!") : that.$alert(res.result[0].msg);; | ||
382 | } | ||
383 | else { | ||
384 | that.$alert('<div>' + res.result[0].ywh + ',' + res.result[0].msg + '</div>', '登簿明细', { | ||
385 | dangerouslyUseHTMLString: true | ||
386 | }); | ||
387 | } | ||
388 | } else { | ||
389 | that.$alert(res.message); | ||
390 | } | ||
391 | }); | ||
392 | }); | ||
393 | break; | ||
394 | } | ||
395 | }, | ||
396 | //读取申请单元信息 | ||
397 | loadBdcdylist () { | ||
398 | var formdata = new FormData(); | ||
399 | formdata.append("bsmSlsq", this.bsmSlsq); | ||
400 | formdata.append("bestepid", this.bestepid); | ||
401 | leftMenu(formdata).then((res) => { | ||
402 | if (res.code === 200) { | ||
403 | if (res.result) { | ||
404 | this.unitData = res.result; | ||
405 | this.currentSelectProps = res.result[0]; | ||
406 | this.judgeBatchShow(); | ||
407 | if (this.showBatch) { | ||
408 | //满足批量查封/批量抵押按钮出现 即先展示批量表单 | ||
409 | this.unitClick(-1); | ||
410 | } else { | ||
411 | //默认选择单元列表第一个 | ||
412 | this.unitClick(0); | ||
413 | } | ||
414 | } | ||
415 | } | ||
416 | }); | ||
417 | }, | ||
418 | //申请单元点击事件 | ||
419 | unitClick (index) { | ||
420 | if (index >= 0) { | ||
421 | this.currentSelectProps = this.unitData[index]; | ||
422 | this.currentSelectProps.batchOperation = false; | ||
423 | } else { | ||
424 | this.currentSelectProps.batchOperation = true; | ||
425 | } | ||
426 | getStepFormInfo(this.currentSelectProps).then((res) => { | ||
427 | if (res.code === 200) { | ||
428 | this.fresh += 1; | ||
429 | //获取单元对应的所有表单信息 | ||
430 | this.tabList = res.result; | ||
431 | //默认加载第一个表单信息 | ||
432 | this.tabName = res.result[0].value; | ||
433 | //处理分屏材料信息 | ||
434 | let that = this; | ||
435 | this.tabList.forEach(function (item, index) { | ||
436 | if (item.value == "clxx") { | ||
437 | that.clxxIndex = index; | ||
438 | that.clxxForm = getForm(item.value, that.$route.query.sqywbm); | ||
439 | that.clxxTab = item; | ||
440 | } | ||
441 | }); | ||
442 | } | ||
443 | }); | ||
444 | }, | ||
445 | //批量按钮判断 | ||
446 | judgeBatchShow () { | ||
447 | this.showBatch = false; | ||
448 | let qllx = this.$route.query.sqywbm.substring(0, 3); | ||
449 | if (this.unitData.length > 1) { | ||
450 | switch (qllx) { | ||
451 | case 'B39': | ||
452 | this.showBatch = true; | ||
453 | this.batchButtonName = '批量查封'; | ||
454 | break; | ||
455 | case 'A37': | ||
456 | this.showBatch = true; | ||
457 | this.batchButtonName = '批量抵押'; | ||
458 | break; | ||
459 | } | ||
460 | } | ||
461 | }, | ||
462 | //表单选项卡事件 | ||
463 | beforeLeave (activeName, oldActiveName) { | ||
464 | if (activeName && activeName != 0) this.getFromRouter(activeName) | ||
465 | }, | ||
466 | //切换选项卡内容组件 | ||
467 | getFromRouter (tabname) { | ||
468 | console.log(tabname, 'tabnametabname'); | ||
469 | this.componentTag = getForm(tabname, this.$route.query.sqywbm); | ||
470 | }, | ||
471 | //发送下一个环节 | ||
472 | sendToNext (obj) { | ||
473 | const h = this.$createElement; | ||
474 | this.$msgbox({ | ||
475 | title: "您确定转出吗?", | ||
476 | message: h("div", { style: "margin: auto" }, [ | ||
477 | h("span", null, "下个环节名称:"), | ||
478 | h("i", { style: "color: teal" }, obj.taskName), | ||
479 | h("div", null, ""), | ||
480 | h("span", null, "下个环节经办人: "), | ||
481 | h("i", { style: "color: teal" }, obj.usernames.join(",")), | ||
482 | ]), | ||
483 | showCancelButton: true, | ||
484 | beforeClose: (action, instance, done) => { | ||
485 | if (action === "confirm") { | ||
486 | instance.confirmButtonLoading = true; | ||
487 | instance.confirmButtonText = "执行中..."; | ||
488 | completeTask({ | ||
489 | bsmSlsq: this.bsmSlsq, | ||
490 | shyj: "this.bestepid", | ||
491 | stepform: JSON.stringify(this.tabList), | ||
492 | }).then((res) => { | ||
493 | if (res.code === 200) { | ||
494 | instance.confirmButtonLoading = false; | ||
495 | this.$message.success("转件成功"); | ||
496 | setTimeout(() => { | ||
497 | window.opener = null; | ||
498 | window.open("about:blank", "_self"); | ||
499 | window.close(); | ||
500 | this.$emit("input", false); | ||
501 | }, 1000); | ||
502 | } else { | ||
503 | instance.confirmButtonLoading = false; | ||
504 | instance.confirmButtonText = "确定"; | ||
505 | this.$message.error(res.message); | ||
506 | } | ||
507 | }); | ||
508 | } else { | ||
509 | done(); | ||
510 | } | ||
511 | }, | ||
512 | }).then((action) => { | ||
513 | this.$message({ | ||
514 | type: "info", | ||
515 | message: "action: " + action, | ||
516 | }); | ||
517 | }); | ||
518 | }, | ||
519 | sendToEnd () { | ||
520 | const h = this.$createElement; | ||
521 | this.$msgbox({ | ||
522 | title: "您确定转出吗?", | ||
523 | message: "此环节为流程结束环节,转出后流程将结束", | ||
524 | showCancelButton: true, | ||
525 | beforeClose: (action, instance, done) => { | ||
526 | if (action === "confirm") { | ||
527 | instance.confirmButtonLoading = true; | ||
528 | instance.confirmButtonText = "执行中..."; | ||
529 | completeTask({ | ||
530 | bsmSlsq: this.bsmSlsq, | ||
531 | shyj: "this.bestepid", | ||
532 | stepform: JSON.stringify(this.tabList), | ||
533 | }).then((res) => { | ||
534 | if (res.code === 200) { | ||
535 | instance.confirmButtonLoading = false; | ||
536 | this.$message.success("转件成功"); | ||
537 | setTimeout(() => { | ||
538 | window.opener = null; | ||
539 | window.open("about:blank", "_self"); | ||
540 | window.close(); | ||
541 | this.$emit("input", false); | ||
542 | }, 1000); | ||
543 | } else { | ||
544 | instance.confirmButtonLoading = false; | ||
545 | instance.confirmButtonText = "确定"; | ||
546 | this.$message.error(res.message); | ||
547 | } | ||
548 | }); | ||
549 | } else { | ||
550 | done(); | ||
551 | } | ||
552 | }, | ||
553 | }).then((action) => { | ||
554 | this.$message({ | ||
555 | type: "info", | ||
556 | message: "action: " + action, | ||
557 | }); | ||
558 | }); | ||
559 | } | ||
560 | }, | ||
561 | }; | ||
562 | </script> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/views/workflow/workFrameView.vue
deleted
100644 → 0
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 | <div> | ||
29 | <p>{{ item.bdcdyh }}</p> | ||
30 | <p class="title-detail">{{ item.zl }}</p> | ||
31 | </div> | ||
32 | </el-menu-item> | ||
33 | </el-menu> | ||
34 | </div> | ||
35 | <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click=" | ||
36 | () => { | ||
37 | this.isShowdrawer = !this.isShowdrawer; | ||
38 | } | ||
39 | "></div> | ||
40 | <div class="map-drawer-expand map-drawer" v-else @click=" | ||
41 | () => { | ||
42 | this.isShowdrawer = !this.isShowdrawer; | ||
43 | } | ||
44 | "></div> | ||
45 | </div> | ||
46 | <div class="leftCon"> | ||
47 | <!-- 分屏左侧预览 --> | ||
48 | <div v-if="splitScreen" class="splitScreen-con"> | ||
49 | <component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" /> | ||
50 | </div> | ||
51 | <!-- 表单内容区域 --> | ||
52 | <div class="rightContainer"> | ||
53 | <el-tabs v-model="tabName" @tab-click="tabClick"> | ||
54 | <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index"> | ||
55 | </el-tab-pane> | ||
56 | </el-tabs> | ||
57 | <component :key="fresh" :is="componentTag" v-bind="currentSelectProps" /> | ||
58 | </div> | ||
59 | </div> | ||
60 | </div> | ||
61 | </div> | ||
62 | </template> | ||
63 | |||
64 | <style scoped lang='scss'> | ||
65 | @import "~@/styles/mixin.scss"; | ||
66 | @import "./workFrame.scss"; | ||
67 | </style> | ||
68 | |||
69 | <script> | ||
70 | import { | ||
71 | leftMenu, | ||
72 | stepExpandInfo, | ||
73 | record, | ||
74 | getNextLinkInfo, | ||
75 | completeTask, | ||
76 | getStepFormInfo | ||
77 | } from "@/api/fqsq.js" | ||
78 | import { getWorkFlowImage } from "@/api/workflow/jsydsyqFlow.js" | ||
79 | import { getForm } from "./flowform.js" | ||
80 | export default { | ||
81 | data () { | ||
82 | return { | ||
83 | // 流程图 | ||
84 | imgSrc: '', | ||
85 | // 折叠 | ||
86 | isShowdrawer: true, | ||
87 | // 默认选中 | ||
88 | activeIndex: '0', | ||
89 | //受理申请标识码 | ||
90 | bsmSlsq: this.$route.query.bsmSlsq, | ||
91 | //当前流程所在环节 | ||
92 | bestepid: this.$route.query.bestepid, | ||
93 | //顶部左侧按钮集合 | ||
94 | leftButtonList: [], | ||
95 | //顶部右侧按钮集合 | ||
96 | rightButtonList: [], | ||
97 | //左侧菜单数据集合 | ||
98 | unitData: [], | ||
99 | //设置那个表单选中 | ||
100 | tabName: "", | ||
101 | //表单集合 | ||
102 | tabList: [], | ||
103 | //选择加载哪一个组件 | ||
104 | componentTag: "", | ||
105 | //设置表单组件是否刷选值 | ||
106 | fresh: 10, | ||
107 | //设置表单传递数据 | ||
108 | currentSelectProps: {}, | ||
109 | //是否开启材料分屏 | ||
110 | splitScreen: false, | ||
111 | //材料分屏表单 | ||
112 | clxxForm: "", | ||
113 | //材料信息选择卡索引 | ||
114 | clxxIndex: "", | ||
115 | //材料信息选项卡对象 | ||
116 | clxxTab: {}, | ||
117 | } | ||
118 | }, | ||
119 | mounted () { | ||
120 | this.loadBdcdylist(); | ||
121 | this.flowInitParam(); | ||
122 | }, | ||
123 | methods: { | ||
124 | //加载流程初始参数 | ||
125 | flowInitParam () { | ||
126 | var formdata = new FormData(); | ||
127 | formdata.append("bsmSlsq", this.bsmSlsq); | ||
128 | formdata.append("bestepid", this.bestepid); | ||
129 | formdata.append("type", "READ_ONLY"); | ||
130 | stepExpandInfo(formdata).then((res) => { | ||
131 | if (res.code === 200) { | ||
132 | this.leftButtonList = res.result.button; | ||
133 | this.rightButtonList = res.result.operation; | ||
134 | // this.tabList = res.result.form; | ||
135 | // //默认选择第一个选项卡内容 | ||
136 | // this.tabName = res.result.form[0].value; | ||
137 | // let that = this; | ||
138 | // this.tabList.forEach(function (item, index) { | ||
139 | // if (item.value == "clxx") { | ||
140 | // that.clxxIndex = index; | ||
141 | // that.clxxForm = getForm(item.value); | ||
142 | // that.clxxTab = item; | ||
143 | // } | ||
144 | // }); | ||
145 | // //默认加载第一个选项卡的组件内容 | ||
146 | // this.getFromRouter(res.result.form[0].value); | ||
147 | } | ||
148 | }) | ||
149 | }, | ||
150 | //流程环节操作按钮 | ||
151 | operation (index, item) { | ||
152 | //按钮 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6:打印申请书 | ||
153 | //操作按钮 登簿:record 转件:transfer 退回:back 退出:signout | ||
154 | let that = this; | ||
155 | switch (item.value) { | ||
156 | case "B1": | ||
157 | getWorkFlowImage(this.bsmSlsq).then(res => { | ||
158 | this.imgSrc = URL.createObjectURL(res) | ||
159 | this.$popup({ | ||
160 | title: '流程图', | ||
161 | editItem: 'workflow/components/flowChart', | ||
162 | formData: this.imgSrc | ||
163 | }) | ||
164 | }) | ||
165 | break; | ||
166 | case "B5": | ||
167 | this.zsylFlag = true; | ||
168 | break; | ||
169 | case "B2": //材料分屏按钮 | ||
170 | this.splitScreen = this.splitScreen ? false : true; | ||
171 | this.$store.dispatch('app/settScreen', this.splitScreen) | ||
172 | if (this.splitScreen) { | ||
173 | //如果当前选项卡为材料信息内容,递减到上一个选项卡内容 | ||
174 | if (this.tabName == this.clxxTab.value) { | ||
175 | this.tabName = this.tabList[this.clxxIndex - 1].value; | ||
176 | this.getFromRouter(this.tabList[this.clxxIndex - 1].value); | ||
177 | } | ||
178 | this.tabList.splice(this.clxxIndex, 1); | ||
179 | } else { | ||
180 | this.tabList.splice(this.clxxIndex, 1, this.clxxTab); | ||
181 | } | ||
182 | break; | ||
183 | case "signout": | ||
184 | window.close(); | ||
185 | break; | ||
186 | } | ||
187 | }, | ||
188 | //读取申请单元信息 | ||
189 | loadBdcdylist () { | ||
190 | var formdata = new FormData(); | ||
191 | formdata.append("bsmSlsq", this.bsmSlsq); | ||
192 | formdata.append("bestepid", this.bestepid); | ||
193 | leftMenu(formdata).then((res) => { | ||
194 | if (res.code === 200) { | ||
195 | this.unitData = res.result; | ||
196 | this.currentSelectProps = res.result[0]; | ||
197 | this.unitClick(0); | ||
198 | } | ||
199 | }) | ||
200 | }, | ||
201 | //申请单元点击事件 | ||
202 | unitClick (index) { | ||
203 | this.currentSelectProps = this.unitData[index]; | ||
204 | this.currentSelectProps.type = 'ONLY_READ'; | ||
205 | getStepFormInfo(this.currentSelectProps).then((res) => { | ||
206 | if (res.code === 200) { | ||
207 | this.fresh += 1; | ||
208 | //获取单元对应的所有表单信息 | ||
209 | this.tabList = res.result; | ||
210 | //默认加载第一个表单信息 | ||
211 | this.tabName = res.result[0].value; | ||
212 | //处理分屏材料信息 | ||
213 | // let that = this; | ||
214 | // this.tabList.forEach(function (item, index) { | ||
215 | // if (item.value == "clxx") { | ||
216 | // that.clxxIndex = index; | ||
217 | // that.clxxForm = getForm(item.value, that.$route.query.sqywbm); | ||
218 | // that.clxxTab = item; | ||
219 | // } | ||
220 | // }); | ||
221 | } | ||
222 | }); | ||
223 | // if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) { | ||
224 | // this.currentSelectProps = this.unitData[index]; | ||
225 | // this.fresh += 1; | ||
226 | // } | ||
227 | }, | ||
228 | //表单选项卡事件 | ||
229 | tabClick (tab, event) { | ||
230 | this.getFromRouter(tab.name); | ||
231 | }, | ||
232 | //切换选项卡内容组件 | ||
233 | getFromRouter (tabname) { | ||
234 | this.componentTag = getForm(tabname); | ||
235 | }, | ||
236 | } | ||
237 | } | ||
238 | </script> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or sign in to post a comment