style:popup
Showing
4 changed files
with
27 additions
and
30 deletions
... | @@ -9,6 +9,7 @@ export default { | ... | @@ -9,6 +9,7 @@ export default { |
9 | Vue.component('lbTable', LbTable); | 9 | Vue.component('lbTable', LbTable); |
10 | Vue.component('Theme', Theme); | 10 | Vue.component('Theme', Theme); |
11 | Vue.prototype.$popup = Popup.install; | 11 | Vue.prototype.$popup = Popup.install; |
12 | Vue.prototype.$popupClose = Popup.close; | ||
12 | Vue.prototype.$alertMes = MessageBox.alert; | 13 | Vue.prototype.$alertMes = MessageBox.alert; |
13 | } | 14 | } |
14 | } | 15 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -16,4 +16,11 @@ Popup.install = function (title, editItem, data, formData) { | ... | @@ -16,4 +16,11 @@ Popup.install = function (title, editItem, data, formData) { |
16 | instance.isShow = true | 16 | instance.isShow = true |
17 | }) | 17 | }) |
18 | } | 18 | } |
19 | Popup.close = function () { | ||
20 | let instance = new PopupBox().$mount() | ||
21 | Vue.nextTick(() => { | ||
22 | instance.isShow = false | ||
23 | }) | ||
24 | } | ||
25 | |||
19 | export default Popup | 26 | export default Popup | ... | ... |
1 | <template> | 1 | <template> |
2 | <transition name="dialog-fade" mode="out-in" v-if="isShow"> | 2 | <transition name="dialog-fade" mode="out-in" v-if="isShow"> |
3 | <div class="ls-mask" v-loading="loading"> | 3 | <div class="ls-mask" v-loading="loading"> |
4 | <div class="ls-mask-window" :style="{ 'width': width, 'height': height }"> | 4 | <div class="ls-mask-window" :style="{ 'width': width }"> |
5 | <div class="ls-head"> | 5 | <div class="ls-head"> |
6 | <div class="ls-title" :style="{ 'text-align': titleStyle }"> | 6 | <div class="ls-title" :style="{ 'text-align': titleStyle }"> |
7 | <svg-icon v-if="iconClass != ''" :icon-class='iconClass' /> | 7 | <svg-icon v-if="iconClass != ''" :icon-class='iconClass' /> |
... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
9 | </div> | 9 | </div> |
10 | <svg-icon icon-class='close' class="closeStyle" @click="onCancel" /> | 10 | <svg-icon icon-class='close' class="closeStyle" @click="onCancel" /> |
11 | </div> | 11 | </div> |
12 | <div class="ls-mask-content" ref='contentRef' :style="{ 'height': contentHeight }"> | 12 | <div class="mask-content" ref='contentRef' :style="{ 'height': contentHeight }"> |
13 | <component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' /> | 13 | <component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' /> |
14 | </div> | 14 | </div> |
15 | <div class="ls-mask-footer" v-if='btnShow'> | 15 | <div class="ls-mask-footer" v-if='btnShow'> |
... | @@ -58,13 +58,13 @@ export default { | ... | @@ -58,13 +58,13 @@ export default { |
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 - 200) + 'px' | 61 | this.contentHeight = (this.$refs.contentRef.offsetHeight + 20) + 'px' |
62 | } else { | 62 | } else { |
63 | this.contentHeight = this.height | 63 | this.contentHeight = this.height |
64 | } | 64 | } |
65 | } else { | 65 | } else { |
66 | if (this.height == 'auto') { | 66 | if (this.height == 'auto') { |
67 | this.contentHeight = this.$refs.contentRef.offsetHeight | 67 | this.contentHeight = (this.$refs.contentRef.offsetHeight + 20) + 'px' |
68 | } else { | 68 | } else { |
69 | this.contentHeight = this.height | 69 | this.contentHeight = this.height |
70 | } | 70 | } |
... | @@ -122,7 +122,8 @@ export default { | ... | @@ -122,7 +122,8 @@ export default { |
122 | top: 50%; | 122 | top: 50%; |
123 | min-height: 200px; | 123 | min-height: 200px; |
124 | transform: translate(-50%, -50%); | 124 | transform: translate(-50%, -50%); |
125 | border-radius: 10px; | 125 | border-radius: 5px; |
126 | overflow: hidden; | ||
126 | } | 127 | } |
127 | 128 | ||
128 | .ls-mask-window b { | 129 | .ls-mask-window b { |
... | @@ -133,21 +134,18 @@ export default { | ... | @@ -133,21 +134,18 @@ export default { |
133 | padding: 16px; | 134 | padding: 16px; |
134 | color: #ffffff; | 135 | color: #ffffff; |
135 | background: linear-gradient(3deg, #409EFF, #a7cbee); | 136 | background: linear-gradient(3deg, #409EFF, #a7cbee); |
136 | border-top-left-radius: 5px; | ||
137 | border-top-right-radius: 5px; | ||
138 | overflow: hidden; | ||
139 | } | 137 | } |
140 | 138 | ||
141 | .ls-title .svg-icon { | 139 | .ls-title .svg-icon { |
142 | font-size: 18px; | 140 | font-size: 18px; |
143 | } | 141 | } |
144 | 142 | ||
145 | .ls-mask-content { | 143 | .mask-content { |
146 | padding: 20px; | 144 | padding: 20px; |
147 | width: 100%; | 145 | width: 100%; |
148 | min-height: 30%; | 146 | min-height: 30%; |
149 | max-height: 95%; | 147 | max-height: 95%; |
150 | overflow: scroll; | 148 | overflow-y: scroll; |
151 | } | 149 | } |
152 | 150 | ||
153 | .ls-mask-footer { | 151 | .ls-mask-footer { | ... | ... |
... | @@ -81,7 +81,7 @@ import { | ... | @@ -81,7 +81,7 @@ import { |
81 | getStepFormInfo, | 81 | getStepFormInfo, |
82 | } from "@/api/fqsq.js"; | 82 | } from "@/api/fqsq.js"; |
83 | import { mapGetters } from "vuex" | 83 | import { mapGetters } from "vuex" |
84 | import { deleteFlow,unClaimTask} from "@/api/ywbl.js"; | 84 | import { deleteFlow, unClaimTask } from "@/api/ywbl.js"; |
85 | import ProcessViewer from './components/processViewer.vue' | 85 | import ProcessViewer from './components/processViewer.vue' |
86 | import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"; | 86 | import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"; |
87 | import { getForm } from "./flowform.js"; | 87 | import { getForm } from "./flowform.js"; |
... | @@ -143,7 +143,7 @@ export default { | ... | @@ -143,7 +143,7 @@ export default { |
143 | window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) | 143 | window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) |
144 | window.addEventListener('unload', e => this.unloadHandler(e)) | 144 | window.addEventListener('unload', e => this.unloadHandler(e)) |
145 | }, | 145 | }, |
146 | destroyed() { | 146 | destroyed () { |
147 | window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e)) | 147 | window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e)) |
148 | window.removeEventListener('unload', e => this.unloadHandler(e)) | 148 | window.removeEventListener('unload', e => this.unloadHandler(e)) |
149 | }, | 149 | }, |
... | @@ -151,16 +151,16 @@ export default { | ... | @@ -151,16 +151,16 @@ export default { |
151 | ...mapGetters(["oldDetail", "newDetail"]) | 151 | ...mapGetters(["oldDetail", "newDetail"]) |
152 | }, | 152 | }, |
153 | methods: { | 153 | methods: { |
154 | beforeunloadHandler() { | 154 | beforeunloadHandler () { |
155 | this._beforeUnload_time = new Date().getTime() | 155 | this._beforeUnload_time = new Date().getTime() |
156 | }, | 156 | }, |
157 | unloadHandler(e) { | 157 | unloadHandler (e) { |
158 | thsi.$alert("234234"); | 158 | thsi.$alert("234234"); |
159 | this._gap_time = new Date().getTime() - this._beforeUnload_time | 159 | this._gap_time = new Date().getTime() - this._beforeUnload_time |
160 | //判断是窗口关闭还是刷新 | 160 | //判断是窗口关闭还是刷新 |
161 | if (this._gap_time <= 10) { | 161 | if (this._gap_time <= 10) { |
162 | //取消认领 | 162 | //取消认领 |
163 | unClaimTask(this.bsmSlsq,this.bestepid) | 163 | unClaimTask(this.bsmSlsq, this.bestepid) |
164 | } | 164 | } |
165 | }, | 165 | }, |
166 | changeLoadIndex () { | 166 | changeLoadIndex () { |
... | @@ -287,12 +287,10 @@ export default { | ... | @@ -287,12 +287,10 @@ export default { |
287 | } | 287 | } |
288 | break; | 288 | break; |
289 | case "B4": | 289 | case "B4": |
290 | this.$popup("登记簿详情","registerBook/djbFrame",{ | 290 | this.$popup("登记簿详情", "registerBook/djbFrame", { |
291 | formData: this.currentSelectProps, | 291 | formData: this.currentSelectProps, |
292 | width: "1220px", | 292 | width: "1220px", |
293 | height: "790px", | 293 | height: "790px", |
294 | // cancelText: '取消摆烂', // 右边按钮文本 | ||
295 | // confirmText: '确定点击', //左边按钮文本 | ||
296 | cancel: () => { | 294 | cancel: () => { |
297 | console.log("取消回调"); | 295 | console.log("取消回调"); |
298 | }, | 296 | }, |
... | @@ -302,7 +300,7 @@ export default { | ... | @@ -302,7 +300,7 @@ export default { |
302 | }); | 300 | }); |
303 | break; | 301 | break; |
304 | case "B5": | 302 | case "B5": |
305 | this.$popup( "证书预览","workflow/components/zsyl",{ | 303 | this.$popup("证书预览", "workflow/components/zsyl", { |
306 | height: "600px", | 304 | height: "600px", |
307 | width: "800px", | 305 | width: "800px", |
308 | formData: { | 306 | formData: { |
... | @@ -318,16 +316,9 @@ export default { | ... | @@ -318,16 +316,9 @@ export default { |
318 | }) | 316 | }) |
319 | break; | 317 | break; |
320 | case "B7": | 318 | case "B7": |
321 | this.$popup("证书领取", "workflow/components/zslq",{ | 319 | this.$popup("证书领取", "workflow/components/zslq", { |
322 | height: "700px", | 320 | width: '900px', |
323 | formData: {bsmSlsq:this.$route.query.bsmSlsq}, | 321 | formData: { bsmSlsq: this.$route.query.bsmSlsq }, |
324 | btnShow: true, | ||
325 | cancel: () => { | ||
326 | console.log("取消回调"); | ||
327 | }, | ||
328 | confirm: () => { | ||
329 | this.submitForm(); | ||
330 | }, | ||
331 | }) | 322 | }) |
332 | break; | 323 | break; |
333 | case "back": //退回按钮 | 324 | case "back": //退回按钮 |
... | @@ -381,7 +372,7 @@ export default { | ... | @@ -381,7 +372,7 @@ export default { |
381 | case "signout": | 372 | case "signout": |
382 | window.close(); | 373 | window.close(); |
383 | //取消认领 | 374 | //取消认领 |
384 | unClaimTask(this.bsmSlsq,this.bestepid) | 375 | unClaimTask(this.bsmSlsq, this.bestepid) |
385 | break; | 376 | break; |
386 | case "B9": | 377 | case "B9": |
387 | var formdata = new FormData(); | 378 | var formdata = new FormData(); | ... | ... |
-
Please register or sign in to post a comment