Skip to content

bdc / bdcdj-web

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

style:工作流

1 parent e9c9b431
Inline Side-by-side
Showing 25 changed files with 14 additions and 637 deletions
...@@ -29,7 +29,7 @@ export const constantRoutes = [ ...@@ -29,7 +29,7 @@ export const constantRoutes = [
29 // 业务流程框架 29 // 业务流程框架
30 { 30 {
31 path: '/workFrame', 31 path: '/workFrame',
32 component: () => import('@/views/ywbl/fqsq/workFrame.vue'), 32 component: () => import('@/views/workflow/workFrame.vue'),
33 name: 'workFrame', 33 name: 'workFrame',
34 hidden: true, 34 hidden: true,
35 meta: { title: '发起申请' } 35 meta: { title: '发起申请' }
......
1 //流程环节操作按钮 1 //流程环节操作按钮
2 export function getForm(tabName) { 2 export function getForm (tabName) {
3 let form; 3 let form;
4 switch (tabName) { 4 switch (tabName) {
5 case "slxx": 5 case "slxx":
6 form = require("@/views/ywbl/fqsq/components/slxx.vue"); 6 form = require("@/views/workflow/components/slxx.vue");
7 break; 7 break;
8 case "slxxCfdj": 8 case "slxxCfdj":
9 form = require("@/views/ywbl/fqsq/components/slxxCfdj.vue"); 9 form = require("@/views/workflow/components/slxxCfdj.vue");
10 break; 10 break;
11 case "clxx": 11 case "clxx":
12 form = require("@/views/ywbl/fqsq/components/clxx.vue"); 12 form = require("@/views/workflow/components/clxx.vue");
13 break; 13 break;
14 case "spyj": 14 case "spyj":
15 form = require("@/views/ywbl/fqsq/components/spyj.vue"); 15 form = require("@/views/workflow/components/spyj.vue");
16 break; 16 break;
17 case "zdjbxx": 17 case "zdjbxx":
18 form = require("@/views/zhcx/djbcx/components/zdxx.vue"); 18 form = require("@/views/zhcx/djbcx/components/zdxx.vue");
...@@ -21,10 +21,10 @@ export function getForm(tabName) { ...@@ -21,10 +21,10 @@ export function getForm(tabName) {
21 form = require("@/views/zhcx/djbcx/components/jsydsyq.vue"); 21 form = require("@/views/zhcx/djbcx/components/jsydsyq.vue");
22 break; 22 break;
23 case "szxx": 23 case "szxx":
24 form = require("@/views/ywbl/fqsq/components/szxx.vue"); 24 form = require("@/views/workflow/components/szxx.vue");
25 break; 25 break;
26 case "fzxx": 26 case "fzxx":
27 form = require("@/views/ywbl/fqsq/components/fzxx.vue"); 27 form = require("@/views/workflow/components/fzxx.vue");
28 break; 28 break;
29 } 29 }
30 30
......
...@@ -122,13 +122,13 @@ ...@@ -122,13 +122,13 @@
122 } 122 }
123 123
124 .map-drawer-expand { 124 .map-drawer-expand {
125 background: url("../../../image/right.png"); 125 background: url("../../image/right.png");
126 background-size: cover; 126 background-size: cover;
127 right: 0%; 127 right: 0%;
128 } 128 }
129 129
130 .map-drawer-click { 130 .map-drawer-click {
131 background: url("../../../image/left.png"); 131 background: url("../../image/left.png");
132 background-size: cover; 132 background-size: cover;
133 left: 0%; 133 left: 0%;
134 } 134 }
......
...@@ -74,9 +74,9 @@ import { ...@@ -74,9 +74,9 @@ import {
74 record, 74 record,
75 getNextLinkInfo, 75 getNextLinkInfo,
76 completeTask, 76 completeTask,
77 } from "@/api/fqsq.js"; 77 } from "@/api/fqsq.js"
78 import { getWorkFlowImage } from "@/api/jsydsyqFlow.js" 78 import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"
79 import { getForm } from "./flowform.js"; 79 import { getForm } from "./flowform.js"
80 export default { 80 export default {
81 data () { 81 data () {
82 return { 82 return {
...@@ -115,7 +115,7 @@ export default { ...@@ -115,7 +115,7 @@ export default {
115 clxxIndex: "", 115 clxxIndex: "",
116 //材料信息选项卡对象 116 //材料信息选项卡对象
117 clxxTab: {}, 117 clxxTab: {},
118 }; 118 }
119 }, 119 },
120 mounted () { 120 mounted () {
121 this.loadBdcdylist(); 121 this.loadBdcdylist();
...@@ -145,7 +145,7 @@ export default { ...@@ -145,7 +145,7 @@ export default {
145 //默认加载第一个选项卡的组件内容 145 //默认加载第一个选项卡的组件内容
146 this.getFromRouter(res.result.form[0].value); 146 this.getFromRouter(res.result.form[0].value);
147 } 147 }
148 }); 148 })
149 }, 149 },
150 //流程环节操作按钮 150 //流程环节操作按钮
151 operation (index, item) { 151 operation (index, item) {
...@@ -185,7 +185,6 @@ export default { ...@@ -185,7 +185,6 @@ export default {
185 this.send(res.result); 185 this.send(res.result);
186 } 186 }
187 }); 187 });
188 // this.$alert(res.result);
189 break; 188 break;
190 case "tc": 189 case "tc":
191 window.close(); 190 window.close();
...@@ -194,7 +193,6 @@ export default { ...@@ -194,7 +193,6 @@ export default {
194 var formdata = new FormData(); 193 var formdata = new FormData();
195 formdata.append("bsmSlsq", this.bsmSlsq); 194 formdata.append("bsmSlsq", this.bsmSlsq);
196 formdata.append("bestepid", this.bestepid); 195 formdata.append("bestepid", this.bestepid);
197 // comMsg;
198 this.$confirm("请确认是否登簿", "提示", { 196 this.$confirm("请确认是否登簿", "提示", {
199 iconClass: "el-icon-question", //自定义图标样式 197 iconClass: "el-icon-question", //自定义图标样式
200 confirmButtonText: "确认", //确认按钮文字更换 198 confirmButtonText: "确认", //确认按钮文字更换
......
1 //流程环节操作按钮
2 export function getForm(tabName) {
3 let form;
4 switch (tabName) {
5 case "slxx":
6 form = require("@/views/ywbl/fqsq/components/slxx.vue");
7 break;
8 case "slxxCfdj":
9 form = require("@/views/ywbl/fqsq/components/slxxCfdj.vue");
10 break;
11 case "clxx":
12 form = require("@/views/ywbl/fqsq/components/clxx.vue");
13 break;
14 case "spyj":
15 form = require("@/views/ywbl/fqsq/components/spyj.vue");
16 break;
17 case "zdjbxx":
18 form = require("@/views/zhcx/djbcx/components/zdxx.vue");
19 break;
20 case "qlxx":
21 form = require("@/views/zhcx/djbcx/components/jsydsyq.vue");
22 break;
23 case "szxx":
24 form = require("@/views/ywbl/fqsq/components/szxx.vue");
25 break;
26 case "fzxx":
27 form = require("@/views/ywbl/fqsq/components/fzxx.vue");
28 break;
29 }
30
31 return (r) => require.ensure([], () => r(form));
32 }
33
1 <template>
2 <div class="fqsq">
3 <div class="fqsq-header">
4 <ul>
5 <li @click="operation(index, item)" v-for="(item, index) in headerleftList" :key="index">
6 <svg-icon :icon-class="item.icon" />
7 <span class="iconName">{{ item.name }}</span>
8 </li>
9 </ul>
10 <ul>
11 <li @click="operation(index, item)" v-for="(item, index) in headerRightList" :key="index">
12 <svg-icon class="icon" :icon-class="item.icon" />
13 <span class="iconName">{{ item.name }}</span>
14 </li>
15 </ul>
16 </div>
17 <div class="tabsList">
18 <div class="tabsList-left">
19 <div class="map-drawer-click" v-if="!isShowdrawer" @click="
20 () => {
21 this.isShowdrawer = !this.isShowdrawer;
22 }
23 "></div>
24 <div class="map-drawer-expand" v-else @click="
25 () => {
26 this.isShowdrawer = !this.isShowdrawer;
27 }
28 "></div>
29 <ul v-if="this.isShowdrawer">
30 <p class="title">申请单元列表({{ unitData.length }})</p>
31 <div v-for="(item, index) in unitData" :key="index">
32 <li @click="unitClick(item)">
33 <p>{{ item.bdcdyh }}</p>
34 <p>{{ item.zl }}</p>
35 </li>
36 <div class="xian"></div>
37 </div>
38 </ul>
39 </div>
40 <div class="tabsList-right">
41 <div class="fenpin" v-show="issplitScreen">
42 <p class="splitScreen tabsList-title">材料信息</p>
43 <div class="splitScreen"></div>
44 </div>
45 <div style="width: 100%">
46 <el-tabs v-model="activeName" @tab-click="activeClick">
47 <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
48 </el-tab-pane>
49 </el-tabs>
50 <div class="splitScreen-con">
51 <component ref="slxx" v-if="activeName == 'slsq'" :is="editItem" :flag="flag" :fetch='fetch' :key="key" />
52 <component :is="editItem" v-else :key="key" />
53 </div>
54 </div>
55 </div>
56 </div>
57 <zc ref="zcDialogRef" v-model="zcDialog" :queryForm="queryForm" />
58 <thDialog ref="thdialogRef" v-model="thflag" :bsmBusiness="bsmBusiness" :queryForm="queryForm" />
59 <zslqDialog ref="zslqDialog" v-model="zslqDialog" />
60 <!-- <zsylDialog v-model="zsylFlag" /> -->
61 </div>
62 </template>
63 <script>
64 import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
65 import comMsg from "@/views/components/comMsg.vue";
66 import zc from "./components/zc.vue";
67 import thDialog from "./components/th.vue";
68 // import zsylDialog from "./components/zsyl";
69 import zslqDialog from "./components/zslq";
70 export default {
71 /**注册组件*/
72 components: { zc, thDialog, zsylDialog, comMsg, zslqDialog },
73 data () {
74 return {
75 activeIndex: '0',
76 zsylFlag: false,
77 zcDialog: false,
78 thflag: false,
79 zslqDialog: false,
80 queryForm: {
81 bsmSlsq: "",
82 bestepid: "",
83 bsmBusiness: ""
84 },
85 isShowdrawer: true,
86 key: 0,
87 flag: false,
88 headerleftList: [],
89 headerRightList: [],
90 activeName: "slxx",
91 tabList1: [],
92 tabList: [],
93 editItem: "",
94 issplitScreen: false,
95 unitData: [],
96 bsmBusiness: "",
97 fetch: false
98 };
99 },
100 watch: {
101 activeName: {
102 handler (newName, oldName) {
103 if (newName === "qlxx") {
104 this.editItem = this.loadViewSlsq();
105 } else {
106 console.log(newName, 'newNamenewNamenewName');
107 this.editItem = this.loadView(newName);
108 }
109 },
110 immediate: true,
111 },
112 },
113 mounted () {
114 if (this.$route.query.bsmSlsq) {
115 this.expandInfo(this.$route.query.bsmSlsq, this.$route.query.bestepid);
116 this.queryForm.bsmSlsq = this.$route.query.bsmSlsq;
117 this.queryForm.bestepid = this.$route.query.bestepid;
118 this.queryForm.bsmBusiness = this.$route.query.bsmBusiness;
119 this.list();
120 }
121 },
122 methods: {
123 // 获取左侧列表
124 list () {
125 let that = this;
126 var formdata = new FormData();
127 formdata.append("bsmSlsq", that.queryForm.bsmSlsq);
128 formdata.append("bestepid", that.queryForm.bestepid);
129 formdata.append("bsmBusiness", that.queryForm.bsmBusiness);
130 leftMenu(formdata).then((res) => {
131 if (res.code === 200) {
132 this.unitData = res.result ? res.result : [];
133 setTimeout(() => {
134 that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy);
135 this.bsmBusiness = that.unitData?.[0]?.bsmBusiness;
136 }, 300);
137 }
138 });
139 },
140 //获取环节扩展信息
141 expandInfo (bsmSlsq, bestepid) {
142 let that = this;
143 var formdata = new FormData();
144 formdata.append("bsmSlsq", bsmSlsq);
145 formdata.append("bestepid", bestepid);
146 stepExpandInfo(formdata).then((res) => {
147 if (res.code === 200) {
148 this.tabList1 = [...res.result.form];
149 this.tabList = res.result.form;
150 this.activeName = res.result.form[0].value;
151 this.headerleftList = res.result.button;
152 this.headerRightList = res.result.operation;
153 }
154 });
155 },
156 activeClick (tab, event) {
157 if (tab.name == "slxx") {
158 this.list();
159 }
160 },
161 // 左侧列表点击调用接口
162 unitClick (item) {
163 console.log(item, 'unitClickunitClickunitClick');
164 this.bsmBusiness = item.bsmBusiness
165 var activeTabName = this.activeName
166 if (activeTabName == 'slxx') {
167 //受理信息页面接口调取
168 this.$nextTick(() => {
169 this.$refs.slxx[0].list(item.bsmSldy)
170 })
171 } else if (activeTabName == 'spyj') {
172 //审批页面接口调取
173 this.$nextTick(() => {
174 this.$refs.spyj[0].list(this.bsmBusiness, this.queryForm.bestepid)
175 })
176 }
177 },
178 operation (index, item) {
179 let that = this;
180 switch (item.value) {
181 case "zsyl":
182 this.zsylFlag = true;
183 break;
184 case "clfp":
185 this.key++;
186 this.issplitScreen = !this.issplitScreen;
187 this.flag = !this.flag;
188 if (this.issplitScreen) {
189 this.tabList.splice(1, 1);
190 } else {
191 this.tabList = [...this.tabList1];
192 }
193 break;
194 case "th":
195 this.thflag = true;
196 this.$nextTick(() => {
197 this.$refs.thdialogRef.tablelistFn();
198 });
199 break;
200 case "zc":
201 this.zcDialog = true;
202 this.$refs.zcDialogRef.tablelistFn();
203 break;
204 case "tc":
205 window.close();
206 break;
207 case "zslq":
208 this.zslqDialog = true;
209 this.$refs.zslqDialog.tablelistFn();
210 break;
211 case "db":
212 var formdata = new FormData();
213 formdata.append("bsmSlsq", this.$route.query.bsmSlsq);
214 formdata.append("bestepid", this.$route.query.bestepid);
215 // comMsg;
216 this.$confirm("请确认是否登簿", "提示", {
217 iconClass: "el-icon-question", //自定义图标样式
218 confirmButtonText: "确认", //确认按钮文字更换
219 cancelButtonText: "取消", //取消按钮文字更换
220 showClose: true, //是否显示右上角关闭按钮
221 type: "warning", //提示类型 success/info/warning/error
222 })
223 .then(function () {
224 record(formdata).then((res) => {
225 if (res.code === 200 || res.code === 2002) {
226 that.$alert(res.message);
227 }
228 });
229 });
230 break;
231 }
232 },
233 loadView (view) {
234 return (r) =>
235 require.ensure([], () => r(require(`./components/${view}.vue`)));
236 },
237 loadViewSlsq () {
238 return (r) =>
239 require.ensure([], () =>
240 r(require("@/views/zhcx/djbcx/components/jsydsyq.vue"))
241 );
242 },
243 },
244 };
245 </script>
246 <style scoped lang='scss'>
247 @import "~@/styles/mixin.scss";
248
249 /deep/.svg-icon {
250 width: 2.5em;
251 height: 2.5em;
252 }
253
254 /deep/.el-tabs__nav-wrap {
255 padding: 5px 0 0 15px;
256 }
257
258 /deep/.el-tabs__nav-wrap::after {
259 height: 1px;
260 }
261
262 .iconName {
263 line-height: 24px;
264 font-size: 12px;
265 }
266
267 /deep/.el-tabs__header {
268 margin: 0 !important;
269 }
270
271 .splitScreen-con {
272 padding: 0 15px;
273 box-sizing: border-box;
274 height: calc(100% - 350px);
275 }
276
277 .fqsq {
278 width: 100%;
279 height: 100%;
280 padding: 0;
281 box-sizing: border-box;
282 background-color: #ffffff;
283 overflow: hidden;
284
285 .splitScreen {
286 min-width: 50%;
287 }
288
289
290 &-header {
291 @include flex;
292 width: 100%;
293 height: 80px;
294 background-color: #3498db;
295 color: #ffffff;
296 justify-content: space-between;
297 padding-left: 15px;
298 position: sticky;
299 top: 0;
300 z-index: 100;
301
302 ul {
303 @include flex;
304
305 li {
306 @include flex-center;
307 cursor: pointer;
308 flex-direction: column;
309 margin-right: 15px;
310 box-sizing: border-box;
311 width: 70px;
312 margin: 0 5px;
313 }
314
315 li:hover {
316 border: 1px solid #ffffff;
317 border-radius: 5px;
318
319 .svg-icon {
320 //color: $light-blue ;
321 }
322 }
323 }
324 }
325
326 /deep/.el-menu-item.is-active {
327 background-color: #e7f4fe;
328 }
329
330 .map-drawer-expand {
331 width: 20px;
332 height: 77px;
333 background: url("../../../image/right.png");
334 background-size: cover;
335 position: absolute;
336 right: 0%;
337 top: 30%;
338 z-index: 99;
339 cursor: pointer;
340 }
341
342 .map-drawer-click {
343 width: 20px;
344 height: 77px;
345 background: url("../../../image/left.png");
346 background-size: cover;
347 position: absolute;
348 left: 0%;
349 top: 30%;
350 z-index: 999;
351 cursor: pointer;
352 }
353
354 .hide {
355 display: none;
356 }
357
358 .tabsList {
359 width: 100%;
360 position: sticky;
361 top: 80px;
362 background-color: #ffffff;
363 z-index: 100;
364 @include flex;
365
366 .tabsList-left {
367 border-right: 1px solid #ebeef5;
368 position: relative;
369 box-sizing: border-box;
370
371 ul {
372 position: relative;
373
374 .xian {
375 background: #f2f2f2;
376 padding: 2px;
377 }
378
379 .title {
380 padding: 20px;
381 text-align: center;
382 }
383
384 li {
385 padding: 10px;
386 font-size: 14px;
387 color: #606266;
388 line-height: 20px;
389 }
390
391 li:hover {
392 color: #0f93f6;
393 cursor: pointer;
394 }
395 }
396 }
397
398 .tabsList-right {
399 .fenpin {
400 min-width: 50%;
401 border-right: 1px solid #ebeef5;
402 }
403
404 background-color: #ffffff;
405 width: 100%;
406 height: 100%;
407 z-index: 100;
408 @include flex;
409 }
410 }
411
412 .tabsList-title {
413 display: block;
414 line-height: 59px;
415 }
416
417 /deep/.el-tabs {
418 width: 100%;
419 }
420 }
421 </style>
...\ No newline at end of file ...\ No newline at end of file
1 .containerFrame {
2 height: 100%;
3 width: 100%;
4 position: sticky;
5 top: 80px;
6 border: 1px solid #ebeef5;
7 z-index: 100;
8 @include flex;
9 }
10
11 .leftmenu {
12 width: 0;
13 transition: all 0.3s;
14 border-right: 1px solid #ebeef5;
15 position: relative;
16 box-sizing: border-box;
17 padding-right: 5px;
18
19 .title {
20 line-height: 36px;
21 text-align: center;
22 }
23
24 .title-detail {
25 display: flex;
26 flex-wrap: wrap;
27 width: 100%;
28 }
29
30 ul {
31 position: relative;
32
33 .xian {
34 background: #f2f2f2;
35 padding: 2px;
36 }
37
38 .title {
39 padding: 5px;
40 text-align: center;
41 }
42
43 li {
44 padding: 5px;
45 font-size: 14px;
46 line-height: 20px;
47 cursor: pointer;
48 }
49
50 li:hover {
51 color: #0f93f6;
52 cursor: pointer;
53 }
54 }
55 }
56
57 .animation-map-drawer {
58 width: 260px;
59 }
60
61 /deep/.el-menu-item {
62 padding-left: 5px !important;
63 }
64
65 /deep/.el-tabs__header {
66 margin-bottom: 0 !important;
67 }
68
69 /deep/.el-menu-item.is-active {
70 background-color: #e7f4fe;
71 }
72
73 .leftCon {
74 flex: 1;
75 width: calc(100% - 260px);
76 display: flex;
77 }
78
79 .splitScreen-con {
80 flex: 1;
81 width: 0;
82 }
83
84 .rightContainer {
85 flex: 1;
86 width: 0;
87 height: calc(100vh - 80px);
88 }
89
90 /deep/.el-tabs {
91 box-sizing: border-box;
92 padding: 0 5px;
93 width: 100%;
94 }
95
96 .svg-icon {
97 width: 2.5em;
98 height: 2.5em;
99 }
100
101 .iconName {
102 line-height: 24px;
103 font-size: 12px;
104 }
105
106 .container {
107 width: 100%;
108 height: 100%;
109 padding: 0;
110 box-sizing: border-box;
111 background-color: #ffffff;
112 overflow: hidden;
113 }
114
115 .map-drawer {
116 width: 20px;
117 height: 79px;
118 position: absolute;
119 top: 30%;
120 z-index: 99;
121 cursor: pointer;
122 }
123
124 .map-drawer-expand {
125 background: url("../../../image/right.png");
126 background-size: cover;
127 right: 0%;
128 }
129
130 .map-drawer-click {
131 background: url("../../../image/left.png");
132 background-size: cover;
133 left: 0%;
134 }
135
136
137 .topButton {
138 @include flex;
139 width: 100%;
140 height: 80px;
141 background-color: #3498db;
142 color: #ffffff;
143 justify-content: space-between;
144 padding-left: 15px;
145 position: sticky;
146 top: 0;
147 z-index: 100;
148
149 ul {
150 @include flex;
151
152 li {
153 @include flex-center;
154 cursor: pointer;
155 flex-direction: column;
156 margin-right: 15px;
157 box-sizing: border-box;
158 width: 70px;
159 margin: 0 5px;
160 }
161
162 li:hover {
163 border: 1px solid #ffffff;
164 border-radius: 5px;
165 }
166 }
167 }
...\ No newline at end of file ...\ No newline at end of file