Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
1c56475d by 田浩浩
Options

修改相关流程功能

1 parent 511f79cf
Inline Side-by-side
Showing 4 changed files with 245 additions and 94 deletions
...@@ -96,3 +96,12 @@ export function stepExpandInfo (data) { ...@@ -96,3 +96,12 @@ export function stepExpandInfo (data) {
96 data 96 data
97 }) 97 })
98 } 98 }
99
100 // 登簿接口
101 export function record (data) {
102 return request({
103 url: '/business/workFlow/record',
104 method: 'post',
105 data
106 })
107 }
......
1 <template>
2 <div class="model">
3 <div class="mask">123</div>
4 <div class="model-dialog">
5 <div class="model-header">
6 <span>提示</span>
7 <a href="javascript:;" class="icon-close"></a>
8 </div>
9 <div class="model-body">
10 <div class="body">这是条消息</div>
11 </div>
12 <div class="model-footer">
13 <button class="btn">确认</button>
14 </div>
15 </div>
16 </div>
17 </template>
18
19
20 <style scoped lang='scss'>
21 //css部分
22 .mask {
23 position: fixed; //这里用固定定位，后面设置动画时才不受影响
24 top: 0;
25 height: 100%;
26 width: 100%;
27 background-color: rgba(167, 165, 165, 0.486);
28 opacity: 0.5;
29 z-index: 9;
30 }
31 .model-dialog {
32 position: absolute;
33 //让弹框居中显示
34 top: 50%;
35 left: 50%;
36 transform: translate(-50%, -50%);
37 background-color: #fff;
38 border-radius: 12px;
39 width: 600px;
40 height: 300px;
41 border: 1px solid #f5f5f5;
42 overflow: hidden;
43 z-index: 10; //这里注意层级要比mask大，覆盖它
44 }
45 .model-header {
46 position: relative;
47 height: 50px;
48 padding-left: 10px;
49 padding-top: 10px;
50 font-size: 20px;
51 line-height: 50px;
52 background-color: #f5f5f5;
53 border-bottom: 1px solid rgb(177, 176, 176);
54 }
55 .model-body {
56 height: 150px;
57 line-height: 150px;
58 font-size: 28px;
59 text-align: center;
60 background-color: #fff;
61 }
62 .model-footer {
63 background-color: #f5f5f5;
64 height: 100px;
65 text-align: center;
66 line-height: 100px;
67 }
68 .btn {
69 width: 180px;
70 height: 40px;
71 border-radius: 8px;
72 background-color: rgb(180, 103, 103);
73 color: #fff;
74 font-size: 18px;
75 border: none;
76 }
77 .icon-close {
78 position: absolute; //如果不加绝对布局，图表显示不出来
79 background-color: pink;
80 right: 15px;
81 top: 16px;
82 width: 30px;
83 height: 30px;
84 z-index: 10;
85 //background: url("../assets/icon-close.png") no-repeat;
86 background-size: contain;
87 }
88 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -166,7 +166,7 @@ export default { ...@@ -166,7 +166,7 @@ export default {
166 text-align: center; 166 text-align: center;
167 font-size: 24px; 167 font-size: 24px;
168 display: block; 168 display: block;
169 margin-bottom: 10px; 169 margin: 30px 0;
170 } 170 }
171 171
172 /deep/.el-form-item { 172 /deep/.el-form-item {
......
1 <template> 1 <template>
2 <div class='fqsq'> 2 <div class="fqsq">
3 <div class="fqsq-header"> 3 <div class="fqsq-header">
4 <ul> 4 <ul>
5 <li @click="operation(index, item)" v-for="(item, index) in headerleftList" :key="index"> 5 <li
6 @click="operation(index, item)"
7 v-for="(item, index) in headerleftList"
8 :key="index"
9 >
6 <svg-icon :icon-class="item.icon" /> 10 <svg-icon :icon-class="item.icon" />
7 <span class="iconName">{{ item.name }}</span> 11 <span class="iconName">{{ item.name }}</span>
8 </li> 12 </li>
9 </ul> 13 </ul>
10 <ul> 14 <ul>
11 <li @click="operation(index, item)" v-for="(item, index) in headerRightList" :key="index"> 15 <li
16 @click="operation(index, item)"
17 v-for="(item, index) in headerRightList"
18 :key="index"
19 >
12 <svg-icon class="icon" :icon-class="item.icon" /> 20 <svg-icon class="icon" :icon-class="item.icon" />
13 <span class="iconName">{{ item.name }}</span> 21 <span class="iconName">{{ item.name }}</span>
14 </li> 22 </li>
...@@ -16,20 +24,30 @@ ...@@ -16,20 +24,30 @@
16 </div> 24 </div>
17 <div class="tabsList"> 25 <div class="tabsList">
18 <div class="tabsList-left"> 26 <div class="tabsList-left">
19 <div class="map-drawer-click" v-if='!isShowdrawer' @click="() => { 27 <div
28 class="map-drawer-click"
29 v-if="!isShowdrawer"
30 @click="
31 () => {
20 this.isShowdrawer = !this.isShowdrawer; 32 this.isShowdrawer = !this.isShowdrawer;
21 }"> 33 }
22 </div> 34 "
23 <div class="map-drawer-expand" v-else @click="() => { 35 ></div>
36 <div
37 class="map-drawer-expand"
38 v-else
39 @click="
40 () => {
24 this.isShowdrawer = !this.isShowdrawer; 41 this.isShowdrawer = !this.isShowdrawer;
25 }"> 42 }
26 </div> 43 "
27 <ul v-if='this.isShowdrawer'> 44 ></div>
28 <p class="title">受理单元列表({{unitData.length}})</p> 45 <ul v-if="this.isShowdrawer">
29 <div v-for='(item,index) in unitData' :key='index'> 46 <p class="title">申请单元列表({{ unitData.length }})</p>
30 <li @click='unitClick(item)'> 47 <div v-for="(item, index) in unitData" :key="index">
31 <p>{{item.bdcdyh}}</p> 48 <li @click="unitClick(item)">
32 <p>{{item.zl}}</p> 49 <p>{{ item.bdcdyh }}</p>
50 <p>{{ item.zl }}</p>
33 </li> 51 </li>
34 <div class="xian"></div> 52 <div class="xian"></div>
35 </div> 53 </div>
...@@ -40,31 +58,54 @@ ...@@ -40,31 +58,54 @@
40 <p class="splitScreen tabsList-title">材料信息</p> 58 <p class="splitScreen tabsList-title">材料信息</p>
41 <div class="splitScreen"></div> 59 <div class="splitScreen"></div>
42 </div> 60 </div>
43 <el-tabs v-model="activeName" @tab-click='activeClick'> 61 <el-tabs v-model="activeName" @tab-click="activeClick">
44 <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index"> 62 <el-tab-pane
63 :label="item.name"
64 :name="item.value"
65 v-for="(item, index) in tabList"
66 :key="index"
67 >
45 <div class="splitScreen-con"> 68 <div class="splitScreen-con">
46 <component ref='slxx' v-if='index == 0' :is="editItem" :flag="flag" :key="key" /> 69 <component
47 <component ref='clxx' :is="editItem" v-else-if="index == 1" :key="key" /> 70 ref="slxx"
71 v-if="index == 0"
72 :is="editItem"
73 :flag="flag"
74 :key="key"
75 />
76 <component
77 ref="clxx"
78 :is="editItem"
79 v-else-if="index == 1"
80 :key="key"
81 />
48 <component :is="editItem" v-else :key="key" /> 82 <component :is="editItem" v-else :key="key" />
49 </div> 83 </div>
50 </el-tab-pane> 84 </el-tab-pane>
51 </el-tabs> 85 </el-tabs>
52 </div> 86 </div>
53 </div> 87 </div>
54 <zc ref="zcDialogRef" v-model="zcDialog" :queryForm='queryForm' /> 88 <zc ref="zcDialogRef" v-model="zcDialog" :queryForm="queryForm" />
55 <thDialog ref='thdialogRef' v-model="thflag" :taskId='taskId' :bsmBusiness='bsmBusiness' :queryForm='queryForm' /> 89 <thDialog
56 <zsylDialog v-model='zsylFlag' /> 90 ref="thdialogRef"
91 v-model="thflag"
92 :taskId="taskId"
93 :bsmBusiness="bsmBusiness"
94 :queryForm="queryForm"
95 />
96 <zsylDialog v-model="zsylFlag" />
57 </div> 97 </div>
58 </template> 98 </template>
59 <script> 99 <script>
60 import { leftMenu, stepExpandInfo } from "@/api/fqsq.js" 100 import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
61 import zc from "./components/zc.vue" 101 import comMsg from "@/views/components/comMsg.vue";
62 import thDialog from "./components/th.vue" 102 import zc from "./components/zc.vue";
63 import zsylDialog from './components/zsyl' 103 import thDialog from "./components/th.vue";
104 import zsylDialog from "./components/zsyl";
64 export default { 105 export default {
65 /**注册组件*/ 106 /**注册组件*/
66 components: { zc, thDialog, zsylDialog }, 107 components: { zc, thDialog, zsylDialog, comMsg },
67 data () { 108 data() {
68 return { 109 return {
69 zsylFlag: false, 110 zsylFlag: false,
70 zcDialog: false, 111 zcDialog: false,
...@@ -78,10 +119,10 @@ export default { ...@@ -78,10 +119,10 @@ export default {
78 flag: false, 119 flag: false,
79 headerleftList: [], 120 headerleftList: [],
80 headerRightList: [], 121 headerRightList: [],
81 activeName: 'slxx', 122 activeName: "slxx",
82 tabList1: [], 123 tabList1: [],
83 tabList: [], 124 tabList: [],
84 editItem: '', 125 editItem: "",
85 issplitScreen: false, 126 issplitScreen: false,
86 unitData: [], 127 unitData: [],
87 taskId: "", 128 taskId: "",
...@@ -91,98 +132,113 @@ export default { ...@@ -91,98 +132,113 @@ export default {
91 }, 132 },
92 watch: { 133 watch: {
93 activeName: { 134 activeName: {
94 handler (newName, oldName) { 135 handler(newName, oldName) {
95 this.editItem = this.loadView(newName) 136 this.editItem = this.loadView(newName);
137 },
138 immediate: true,
96 }, 139 },
97 immediate: true
98 }
99 }, 140 },
100 mounted () { 141 mounted() {
101 if (this.$route.query.bsmSlsq) { 142 if (this.$route.query.bsmSlsq) {
102 this.expandInfo(this.$route.query.bsmSlsq, this.$route.query.bestepid); 143 this.expandInfo(this.$route.query.bsmSlsq, this.$route.query.bestepid);
103 this.list(this.$route.query.bsmSlsq) 144 this.list(this.$route.query.bsmSlsq);
104 this.queryForm.bsmSlsq = this.$route.query.bsmSlsq 145 this.queryForm.bsmSlsq = this.$route.query.bsmSlsq;
105 this.queryForm.bestepid = this.$route.query.bestepid 146 this.queryForm.bestepid = this.$route.query.bestepid;
106 } 147 }
107 }, 148 },
108 methods: { 149 methods: {
109 // 获取左侧列表 150 // 获取左侧列表
110 list (id) { 151 list(id) {
111 let that = this 152 let that = this;
112 that.id = id 153 that.id = id;
113 var formdata = new FormData(); 154 var formdata = new FormData();
114 formdata.append("bsmSlsq", id); 155 formdata.append("bsmSlsq", id);
115 leftMenu(formdata).then(res => { 156 leftMenu(formdata).then((res) => {
116 console.log(res, 'eeeeeeeeeeee'); 157 console.log(res, "eeeeeeeeeeee");
117 if (res.code === 200) { 158 if (res.code === 200) {
118 this.unitData = res.result ? res.result : [] 159 this.unitData = res.result ? res.result : [];
119 setTimeout(() => { 160 setTimeout(() => {
120 that.$refs?.slxx[0].list(that.unitData && that.unitData[0].bsmSldy) 161 that.$refs?.slxx[0].list(that.unitData && that.unitData[0].bsmSldy);
121 this.taskId = that.unitData[0].taskId 162 this.taskId = that.unitData[0].taskId;
122 this.bsmBusiness = that.unitData[0].bsmBusiness 163 this.bsmBusiness = that.unitData[0].bsmBusiness;
123 }, 300); 164 }, 300);
124 } 165 }
125 }) 166 });
126 }, 167 },
127 //获取环节扩展信息 168 //获取环节扩展信息
128 expandInfo (bsmSlsq, bestepid) { 169 expandInfo(bsmSlsq, bestepid) {
129 let that = this 170 let that = this;
130 var formdata = new FormData(); 171 var formdata = new FormData();
131 formdata.append("bsmSlsq", bsmSlsq); 172 formdata.append("bsmSlsq", bsmSlsq);
132 formdata.append("bestepid", bestepid); 173 formdata.append("bestepid", bestepid);
133 stepExpandInfo(formdata).then(res => { 174 stepExpandInfo(formdata).then((res) => {
134 if (res.code === 200) { 175 if (res.code === 200) {
135 this.tabList1 = [...res.result.form] 176 this.tabList1 = [...res.result.form];
136 this.tabList = res.result.form; 177 this.tabList = res.result.form;
137 this.headerleftList = res.result.button; 178 this.headerleftList = res.result.button;
138 this.headerRightList = res.result.operation; 179 this.headerRightList = res.result.operation;
139 } 180 }
140 }) 181 });
141 }, 182 },
142 activeClick (tab, event) { 183 activeClick(tab, event) {
143 if (tab.name == 'slxx') { 184 if (tab.name == "slxx") {
144 this.list(this.id) 185 this.list(this.id);
145 } 186 }
146 }, 187 },
147 // 左侧列表点击调用接口 188 // 左侧列表点击调用接口
148 unitClick (item) { 189 unitClick(item) {
149 this.taskId = item.taskId 190 this.taskId = item.taskId;
150 this.bsmBusiness = item.bsmBusiness 191 this.bsmBusiness = item.bsmBusiness;
151 this.$nextTick(() => { 192 this.$nextTick(() => {
152 this.$refs.slxx[0].list(item.bsmSldy) 193 this.$refs.slxx[0].list(item.bsmSldy);
153 }) 194 });
154 }, 195 },
155 operation (index, item) { 196 operation(index, item) {
156 if (item.value == 'zsyl') { 197 switch (item.value) {
157 this.zsylFlag = true 198 case "zsyl":
158 199 this.zsylFlag = true;
159 } else if (item.value == 'clfp') { 200 break;
160 this.key++ 201 case "clfp":
161 this.issplitScreen = !this.issplitScreen 202 this.key++;
162 this.flag = !this.flag 203 this.issplitScreen = !this.issplitScreen;
204 this.flag = !this.flag;
163 if (this.issplitScreen) { 205 if (this.issplitScreen) {
164 this.tabList.splice(1, 1) 206 this.tabList.splice(1, 1);
165 } else { 207 } else {
166 this.tabList = [...this.tabList1] 208 this.tabList = [...this.tabList1];
167 } 209 }
168 } else if (item.value == 'th') { 210 break;
169 this.thflag = true 211 case "th":
212 this.thflag = true;
170 this.$nextTick(() => { 213 this.$nextTick(() => {
171 this.$refs.thdialogRef.tablelistFn() 214 this.$refs.thdialogRef.tablelistFn();
172 }) 215 });
216 break;
217 case "zc":
218 this.zcDialog = true;
219 this.$refs.zcDialogRef.tablelistFn();
220 break;
221 case "tc":
222 window.close();
223 break;
224 case "db":
225 // comMsg;
226 var formdata = new FormData();
227 formdata.append("bsmSlsq", this.$route.query.bsmSlsq);
228 formdata.append("bestepid", this.$route.query.bestepid);
229 record(formdata).then((res) => {
230 if (res.code === 200) {
173 } 231 }
174 else if (item.value == 'zc') { 232 });
175 this.zcDialog = true 233 break;
176 this.$refs.zcDialogRef.tablelistFn()
177 } else if (item.value === 'tc') {
178 window.close()
179 } 234 }
180 }, 235 },
181 loadView (view) { 236 loadView(view) {
182 return r => require.ensure([], () => r(require(`./components/${view}.vue`))) 237 return (r) =>
238 require.ensure([], () => r(require(`./components/${view}.vue`)));
183 }, 239 },
184 }, 240 },
185 } 241 };
186 </script> 242 </script>
187 <style scoped lang='scss'> 243 <style scoped lang='scss'>
188 @import "~@/styles/mixin.scss"; 244 @import "~@/styles/mixin.scss";
...@@ -222,7 +278,6 @@ export default { ...@@ -222,7 +278,6 @@ export default {
222 background-color: #ffffff; 278 background-color: #ffffff;
223 overflow: hidden; 279 overflow: hidden;
224 280
225
226 .splitScreen { 281 .splitScreen {
227 min-width: 50%; 282 min-width: 50%;
228 } 283 }
...@@ -231,7 +286,7 @@ export default { ...@@ -231,7 +286,7 @@ export default {
231 @include flex; 286 @include flex;
232 width: 100%; 287 width: 100%;
233 height: 80px; 288 height: 80px;
234 background-color: #3498DB; 289 background-color: #3498db;
235 color: #ffffff; 290 color: #ffffff;
236 justify-content: space-between; 291 justify-content: space-between;
237 padding-left: 15px; 292 padding-left: 15px;
...@@ -257,7 +312,6 @@ export default { ...@@ -257,7 +312,6 @@ export default {
257 border-radius: 5px; 312 border-radius: 5px;
258 //color: $light-blue ; 313 //color: $light-blue ;
259 314
260
261 .svg-icon { 315 .svg-icon {
262 //color: $light-blue ; 316 //color: $light-blue ;
263 } 317 }
...@@ -268,7 +322,7 @@ export default { ...@@ -268,7 +322,7 @@ export default {
268 .map-drawer-expand { 322 .map-drawer-expand {
269 width: 20px; 323 width: 20px;
270 height: 77px; 324 height: 77px;
271 background: url('../../../image/right.png'); 325 background: url("../../../image/right.png");
272 background-size: cover; 326 background-size: cover;
273 position: absolute; 327 position: absolute;
274 right: 0%; 328 right: 0%;
...@@ -280,7 +334,7 @@ export default { ...@@ -280,7 +334,7 @@ export default {
280 .map-drawer-click { 334 .map-drawer-click {
281 width: 20px; 335 width: 20px;
282 height: 77px; 336 height: 77px;
283 background: url('../../../image/left.png'); 337 background: url("../../../image/left.png");
284 background-size: cover; 338 background-size: cover;
285 position: absolute; 339 position: absolute;
286 left: 0%; 340 left: 0%;
...@@ -302,7 +356,7 @@ export default { ...@@ -302,7 +356,7 @@ export default {
302 @include flex; 356 @include flex;
303 357
304 .tabsList-left { 358 .tabsList-left {
305 border-right: 1px solid #EBEEF5; 359 border-right: 1px solid #ebeef5;
306 position: relative; 360 position: relative;
307 width: 250px; 361 width: 250px;
308 box-sizing: border-box; 362 box-sizing: border-box;
...@@ -311,7 +365,7 @@ export default { ...@@ -311,7 +365,7 @@ export default {
311 position: relative; 365 position: relative;
312 366
313 .xian { 367 .xian {
314 background: #F2F2F2; 368 background: #f2f2f2;
315 padding: 2px; 369 padding: 2px;
316 } 370 }
317 371
...@@ -328,8 +382,8 @@ export default { ...@@ -328,8 +382,8 @@ export default {
328 } 382 }
329 383
330 li:hover { 384 li:hover {
331 color: #0F93F6; 385 color: #0f93f6;
332 cursor: pointer 386 cursor: pointer;
333 } 387 }
334 } 388 }
335 } 389 }
...@@ -337,7 +391,7 @@ export default { ...@@ -337,7 +391,7 @@ export default {
337 .tabsList-right { 391 .tabsList-right {
338 .fenpin { 392 .fenpin {
339 min-width: 50%; 393 min-width: 50%;
340 border-right: 1px solid #EBEEF5; 394 border-right: 1px solid #ebeef5;
341 } 395 }
342 396
343 background-color: #ffffff; 397 background-color: #ffffff;
......