Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
05285b16 by renchao@pashanhoo.com
Options

style:业务申请提示弹框

1 parent ff0c5ac9
Inline Side-by-side
Showing 23 changed files with 328 additions and 61 deletions
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
21 </transition> 21 </transition>
22 </template> 22 </template>
23 <script> 23 <script>
24 import Popup1 from './index' 24 import Popup1 from './index'
25 export default { 25 export default {
26 name: 'index', 26 name: 'index',
27 data () { 27 data () {
28 return { 28 return {
...@@ -98,13 +98,13 @@ export default { ...@@ -98,13 +98,13 @@ export default {
98 this.$el.parentNode.removeChild(this.$el); 98 this.$el.parentNode.removeChild(this.$el);
99 } 99 }
100 } 100 }
101 } 101 }
102 </script> 102 </script>
103 <style scoped lang="scss" > 103 <style scoped lang="scss" >
104 @import "~@/styles/mixin.scss"; 104 @import "~@/styles/mixin.scss";
105 @import "~@/styles/dialogBox.scss"; 105 @import "~@/styles/dialogBox.scss";
106 106
107 .ls-mask { 107 .ls-mask {
108 width: 100%; 108 width: 100%;
109 height: 100%; 109 height: 100%;
110 z-index: 500; 110 z-index: 500;
...@@ -112,10 +112,9 @@ export default { ...@@ -112,10 +112,9 @@ export default {
112 left: 0; 112 left: 0;
113 top: 0; 113 top: 0;
114 background: rgba(0, 0, 0, 0.3); 114 background: rgba(0, 0, 0, 0.3);
115 }
115 116
116 } 117 .ls-mask-window {
117
118 .ls-mask-window {
119 background: white; 118 background: white;
120 position: relative; 119 position: relative;
121 left: 50%; 120 left: 50%;
...@@ -124,32 +123,32 @@ export default { ...@@ -124,32 +123,32 @@ export default {
124 transform: translate(-50%, -50%); 123 transform: translate(-50%, -50%);
125 border-radius: 5px; 124 border-radius: 5px;
126 overflow: hidden; 125 overflow: hidden;
127 } 126 }
128 127
129 .ls-mask-window b { 128 .ls-mask-window b {
130 padding-left: 5px; 129 padding-left: 5px;
131 } 130 }
132 131
133 .ls-title { 132 .ls-title {
134 padding: 16px; 133 padding: 16px;
135 color: #ffffff; 134 color: #ffffff;
136 background: linear-gradient(3deg, #409EFF, #a7cbee); 135 background: linear-gradient(3deg, #409eff, #a7cbee);
137 font-size: 16px; 136 font-size: 16px;
138 } 137 }
139 138
140 .ls-title .svg-icon { 139 .ls-title .svg-icon {
141 font-size: 18px; 140 font-size: 18px;
142 } 141 }
143 142
144 .mask-content { 143 .mask-content {
145 padding: 20px; 144 padding: 20px;
146 width: 100%; 145 width: 100%;
147 min-height: 30%; 146 min-height: 30%;
148 max-height: 90vh; 147 max-height: 90vh;
149 overflow-y: scroll; 148 overflow-y: scroll;
150 } 149 }
151 150
152 .ls-mask-footer { 151 .ls-mask-footer {
153 height: 50px; 152 height: 50px;
154 display: flex; 153 display: flex;
155 justify-content: center; 154 justify-content: center;
...@@ -161,30 +160,29 @@ export default { ...@@ -161,30 +160,29 @@ export default {
161 border-bottom-left-radius: 5px; 160 border-bottom-left-radius: 5px;
162 border-bottom-right-radius: 5px; 161 border-bottom-right-radius: 5px;
163 overflow: hidden; 162 overflow: hidden;
164 } 163 }
165
166 164
167 /deep/.closeStyle { 165 /deep/.closeStyle {
168 position: absolute; 166 position: absolute;
169 top: 13px; 167 top: 13px;
170 right: 26px; 168 right: 26px;
171 font-size: 24px; 169 font-size: 24px;
172 cursor: pointer; 170 cursor: pointer;
173 color: #409EFF; 171 color: #409eff;
174 } 172 }
175 173
176 /deep/.el-loading-mask { 174 /deep/.el-loading-mask {
177 background: none; 175 background: none;
178 } 176 }
179 177
180 .dialog-fade-enter-active, 178 .dialog-fade-enter-active,
181 .dialog-fade-leave-active { 179 .dialog-fade-leave-active {
182 transition: opacity 0.3s; 180 transition: opacity 0.3s;
183 } 181 }
184 182
185 .dialog-fade-enter, 183 .dialog-fade-enter,
186 .dialog-fade-leave-to { 184 .dialog-fade-leave-to {
187 opacity: 0; 185 opacity: 0;
188 } 186 }
189 </style> 187 </style>
190 188
...\ No newline at end of file ...\ No newline at end of file
......
1 /*
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-06-14 15:05:38
5 */
6 import Vue from 'vue'
7 import Popup from './index.vue'
8 const PopupBox = Vue.extend(Popup)
9 let popuping = undefined
10
11 PopupBox.prototype.close = function () {
12 // 如果Popup 有引用，则去掉引用
13 if (popuping) {
14 popuping = undefined
15 }
16 // 先将组件隐藏
17 this.isShow = false
18 // 延迟300毫秒，等待Popup关闭动画执行完之后销毁组件
19 setTimeout(() => {
20 // 移除挂载的dom元素
21 if (this.$el && this.$el.parentNode) {
22 this.$el.parentNode.removeChild(this.$el)
23 }
24 }, 300)
25 }
26
27 const Popup1 = (title, editItem, data, formData) => {
28 // 如果组件已渲染，则返回即可
29 if (popuping) {
30 return popuping
31 }
32 data.title = title
33 data.editItem = editItem
34 if (formData) {
35 data.formData = formData
36 }
37 // 通过构造函数初始化组件 相当于 new Vue()
38 let instance = new PopupBox({
39 data
40 }).$mount()
41 document.body.appendChild(instance.$el)
42 Vue.nextTick(() => {
43 instance.isShow = true
44 // 将组件实例赋值给loading
45 popuping = instance
46 })
47 return instance
48 }
49 export default Popup1
1 <template>
2 <transition name="msgbox-fade">
3 <div class="ls-mask" v-if="myShow">
4 <div class="ls-mask-window" :class="isMain ? 'mainCenter' : 'contentCenter'" :style="{ 'width': width }">
5 <div class="ls-head">
6 <div class="ls-title" :style="{ 'text-align': titleStyle }">
7 <svg-icon v-if="iconClass != ''" :icon-class='iconClass' />
8 <b>{{ title }}</b>
9 </div>
10 <svg-icon icon-class='close' class="closeStyle" @click="onCancel" />
11 </div>
12 <div class="mask-content" ref='contentRef' :style="{ 'height': contentHeight }">
13 <component :is="editItem" ref='childRef' :key="key" :formData='formData' />
14 </div>
15 <div class="ls-mask-footer" v-if='btnShow'>
16 <el-button type="primary" @click="onConfirm">{{ confirmText }}</el-button>
17 <el-button @click="onCancel">{{ cancelText }}</el-button>
18 </div>
19 </div>
20 </div>
21 </transition>
22 </template>
23 <script>
24 import Popup1 from './index'
25 export default {
26 name: 'index',
27 data () {
28 return {
29 title: '标题',
30 editItem: "",
31 isMain: false,
32 formData: undefined,//父组件传递的参数 负责传给子组件
33 btnShow: false,
34 cancel: function () { },
35 confirm: function () { },
36 cancelText: '取消',
37 confirmText: '确认',
38 isSync: false,
39 isShow: false,
40 myShow: false,
41 titleStyle: 'center',
42 width: "75%",
43 height: "auto",
44 contentHeight: "",
45 iconClass: "",
46 key: 0
47 }
48 },
49 watch: {
50 isShow (newValue) {
51 this.$nextTick(() => {
52 this.editItem = this.loadViewFn(this.editItem)
53 document.body.appendChild(this.$el);
54 this.myShow = newValue
55 })
56 }
57 },
58 mounted () {
59 // 计算滚动条高度
60 setTimeout(() => {
61 if (this.btnShow) {
62 if (this.height == 'auto') {
63 this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px'
64 } else {
65 this.contentHeight = this.height
66 }
67 } else {
68 if (this.height == 'auto') {
69 this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px'
70 } else {
71 this.contentHeight = this.height
72 }
73 }
74 }, 300)
75 },
76 methods: {
77 onCancel () {
78 Popup1().close()
79 },
80 onConfirm () {
81 let res = new Promise((resolve, reject) => {
82 this.confirm()
83 resolve(true)
84 })
85 if (res) {
86 this.isShow = false
87 }
88 },
89 loadViewFn (view) {
90 return (r) =>
91 require.ensure([], () =>
92 r(require(`@/views/${view}.vue`))
93 )
94 }
95 },
96 destroyed () {
97 if (this.appendToBody && this.$el && this.$el.parentNode) {
98 this.$el.parentNode.removeChild(this.$el);
99 }
100 }
101 }
102 </script>
103 <style scoped lang="scss" >
104 @import "~@/styles/mixin.scss";
105 @import "~@/styles/dialogBox.scss";
106
107 .ls-mask {
108 width: 100%;
109 height: 100%;
110 z-index: 500;
111 position: fixed;
112 left: 0;
113 top: 0;
114 background: rgba(0, 0, 0, 0.3);
115 }
116
117 .ls-mask-window {
118 background: white;
119 position: relative;
120 left: 50%;
121 top: 50%;
122 min-height: 200px;
123 transform: translate(-50%, -50%);
124 border-radius: 5px;
125 overflow: hidden;
126 }
127
128 .ls-mask-window b {
129 padding-left: 5px;
130 }
131
132 .ls-title {
133 padding: 16px;
134 color: #ffffff;
135 background: linear-gradient(3deg, #409eff, #a7cbee);
136 font-size: 16px;
137 }
138
139 .ls-title .svg-icon {
140 font-size: 18px;
141 }
142
143 .mask-content {
144 padding: 20px;
145 width: 100%;
146 min-height: 30%;
147 max-height: 90vh;
148 overflow-y: scroll;
149 }
150
151 .ls-mask-footer {
152 height: 50px;
153 display: flex;
154 justify-content: center;
155 width: 100%;
156 position: absolute;
157 border-top: 1px solid $borderColor;
158 bottom: 0;
159 background: #ffffff;
160 border-bottom-left-radius: 5px;
161 border-bottom-right-radius: 5px;
162 overflow: hidden;
163 }
164
165 /deep/.closeStyle {
166 position: absolute;
167 top: 13px;
168 right: 26px;
169 font-size: 24px;
170 cursor: pointer;
171 color: #409eff;
172 }
173
174 /deep/.el-loading-mask {
175 background: none;
176 }
177
178 .dialog-fade-enter-active,
179 .dialog-fade-leave-active {
180 transition: opacity 0.3s;
181 }
182
183 .dialog-fade-enter,
184 .dialog-fade-leave-to {
185 opacity: 0;
186 }
187 </style>
188
...\ No newline at end of file ...\ No newline at end of file
1 弹窗封装
2 2.用法以及参数：
3 this.$popup('提示','ywbl/dbx/aa',{
4 width: '75%', // 初始化75% 不需要改的话 可以直接不要
5 formData: this.formData, // 父组件传给子组件的参数
6 cancel: function () {}, //取消事件的回调 没有按钮可以不需要
7 confirm: function () {} //确认事件的回调 没有按钮可以不需要
8 })
9
10 5.后续有修改请添加在此处文档说明作用
...\ No newline at end of file ...\ No newline at end of file
1 /* 1 /*
2 * @Description: 弹框组件的封装 2 * @Description: 弹框组件的封装
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-04-11 09:31:14 4 * @LastEditTime: 2023-07-07 09:21:10
5 */ 5 */
6 import Popup from '@/components/Popup/index' 6 import ywPopup from '@/components/ywPopup/index'
7 import Popup1 from '@/components/Popup1/index' 7 import Popup1 from '@/components/Popup1/index'
8 export function popupDialog (title, url, params, width = '75%', isMain, height, btnShow = false, callback, cancel) { 8 export function popupDialog (title, url, params, width = '75%', isMain, height, btnShow = false, callback, cancel) {
9 // Popup.install 9 // Popup.install
...@@ -18,10 +18,32 @@ export function popupDialog (title, url, params, width = '75%', isMain, height, ...@@ -18,10 +18,32 @@ export function popupDialog (title, url, params, width = '75%', isMain, height,
18 }, 18 },
19 confirm: () => { 19 confirm: () => {
20 callback() 20 callback()
21 } 21 },
22 popupDialog: popupDialog // 将 popupDialog 方法传递给弹框组件
23 })
24 }
25
26 export function ywPopupDialog (title, url, params, width = '75%', isMain, height, btnShow = false, callback, cancel) {
27 // Popup.install
28 ywPopup(title, url, {
29 height: height,
30 width: width,
31 formData: params,
32 btnShow: btnShow,
33 isMain: isMain,
34 cancel: () => {
35 cancel()
36 },
37 confirm: () => {
38 callback()
39 },
40 popupDialog: popupDialog // 将 popupDialog 方法传递给弹框组件
22 }) 41 })
23 } 42 }
24 43
25 export function popupCacel () { 44 export function popupCacel () {
26 Popup1().close() 45 Popup1().close()
27 } 46 }
47 export function ywPopupCacel () {
48 ywPopupDialog().close()
49 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -72,8 +72,8 @@ ...@@ -72,8 +72,8 @@
72 <el-input v-model="ruleForm.cfdjList[0].cfwh" :disabled="$route.query.viewtype || isJfOperation"></el-input> 72 <el-input v-model="ruleForm.cfdjList[0].cfwh" :disabled="$route.query.viewtype || isJfOperation"></el-input>
73 </el-form-item> 73 </el-form-item>
74 </el-col> 74 </el-col>
75 <!-- 批量查封状态有多种查封类型，不予展示 --> 75 <!-- 批量查封状态有多种查封类型，不予展示 -->
76 <!-- <el-col :span="8"> 76 <!-- <el-col :span="8">
77 <el-form-item :class="flag ? 'marginBot0' : ''" label="查封类型：" prop="cfdj.cflxmc"> 77 <el-form-item :class="flag ? 'marginBot0' : ''" label="查封类型：" prop="cfdj.cflxmc">
78 <el-input v-model="ruleForm.cfdjList[0].cflxmc" disabled></el-input> 78 <el-input v-model="ruleForm.cfdjList[0].cflxmc" disabled></el-input>
79 </el-form-item> 79 </el-form-item>
......
...@@ -193,17 +193,17 @@ ...@@ -193,17 +193,17 @@
193 }, 193 },
194 ywhClick (item) { 194 ywhClick (item) {
195 //有任务权限 195 //有任务权限
196 if(item.sjlx=="3"){ 196 if (item.sjlx == "3") {
197 const { href } = this.$router.resolve( 197 const { href } = this.$router.resolve(
198 "/djbworkFrameview?bsmSlsq=" + 198 "/djbworkFrameview?bsmSlsq=" +
199 item.bsmSlsq + 199 item.bsmSlsq +
200 "&bestepid=" + 200 "&bestepid=" +
201 item.bestepid+ 201 item.bestepid +
202 "&isEdit=" + 202 "&isEdit=" +
203 true 203 true
204 ); 204 );
205 window.open(href, `urlname${item.bsmSlsq}`); 205 window.open(href, `urlname${item.bsmSlsq}`);
206 }else{ 206 } else {
207 const { href } = this.$router.resolve( 207 const { href } = this.$router.resolve(
208 "/workFrameView?bsmSlsq=" + 208 "/workFrameView?bsmSlsq=" +
209 item.bsmSlsq + 209 item.bsmSlsq +
......
...@@ -138,9 +138,9 @@ ...@@ -138,9 +138,9 @@
138 this.$popupCacel() 138 this.$popupCacel()
139 139
140 } else { 140 } else {
141 this.$message.error(res.message); 141 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
142 } 142 }
143 }); 143 })
144 } else { 144 } else {
145 choiceBdcdy({ 145 choiceBdcdy({
146 bsmSlsq: this.$route.query.bsmSlsq, 146 bsmSlsq: this.$route.query.bsmSlsq,
......
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
119 } 119 }
120 this.$popupCacel() 120 this.$popupCacel()
121 } else { 121 } else {
122 this.$message.error(res.message); 122 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
123 } 123 }
124 }) 124 })
125 }, 125 },
......
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
241 } 241 }
242 this.$popupCacel() 242 this.$popupCacel()
243 } else { 243 } else {
244 this.$message.error(res.message); 244 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
245 } 245 }
246 }) 246 })
247 } else { 247 } else {
...@@ -258,7 +258,7 @@ ...@@ -258,7 +258,7 @@
258 store.dispatch('user/refreshPage', true); 258 store.dispatch('user/refreshPage', true);
259 this.$popupCacel() 259 this.$popupCacel()
260 } else { 260 } else {
261 this.$message.error(res.message); 261 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
262 } 262 }
263 }) 263 })
264 } 264 }
......
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
108 } 108 }
109 this.$popupCacel() 109 this.$popupCacel()
110 } else { 110 } else {
111 this.$message.error(res.message); 111 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
112 } 112 }
113 }) 113 })
114 }, 114 },
......
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
105 } 105 }
106 this.$popupCacel() 106 this.$popupCacel()
107 } else { 107 } else {
108 this.$message.error(res.message); 108 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
109 } 109 }
110 }) 110 })
111 }, 111 },
......
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
133 } 133 }
134 this.$popupCacel() 134 this.$popupCacel()
135 } else { 135 } else {
136 this.$message.error(res.message) 136 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
137 } 137 }
138 }) 138 })
139 }, 139 },
......
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
161 } 161 }
162 this.$popupCacel() 162 this.$popupCacel()
163 } else { 163 } else {
164 this.$message.error(res.message); 164 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
165 } 165 }
166 }) 166 })
167 }, 167 },
......
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
110 } 110 }
111 this.$popupCacel() 111 this.$popupCacel()
112 } else { 112 } else {
113 this.$message.error(res.message); 113 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
114 } 114 }
115 }) 115 })
116 }, 116 },
......
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
110 } 110 }
111 this.$popupCacel() 111 this.$popupCacel()
112 } else { 112 } else {
113 this.$message.error(res.message); 113 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
114 } 114 }
115 }) 115 })
116 }, 116 },
......
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
118 } 118 }
119 this.$popupCacel() 119 this.$popupCacel()
120 } else { 120 } else {
121 this.$message.error(res.message); 121 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
122 } 122 }
123 }) 123 })
124 }, 124 },
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-06-16 09:37:51 4 * @LastEditTime: 2023-07-07 09:27:48
5 --> 5 -->
6 <template> 6 <template>
7 <div class="from-clues"> 7 <div class="from-clues">
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
246 } 246 }
247 this.$popupCacel() 247 this.$popupCacel()
248 } else { 248 } else {
249 this.$message.error(res.message) 249 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
250 } 250 }
251 }) 251 })
252 }, 252 },
......
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
50 import jump from "./mixin/jump"; 50 import jump from "./mixin/jump";
51 import store from '@/store/index.js' 51 import store from '@/store/index.js'
52 import table from "@/utils/mixin/table"; 52 import table from "@/utils/mixin/table";
53 import { popupDialog, popupCacel } from "@/utils/popup.js"; 53 import { ywPopupDialog } from "@/utils/popup.js";
54 import { startBusinessFlow, selectZdjbxx } from "@/api/ywbl.js"; 54 import { startBusinessFlow, selectZdjbxx } from "@/api/ywbl.js";
55 import { datas, sendThis } from "../javascript/selectQjzdjbxx.js"; 55 import { datas, sendThis } from "../javascript/selectQjzdjbxx.js";
56 import { defaultParameters } from "../javascript/publicDefaultPar.js"; 56 import { defaultParameters } from "../javascript/publicDefaultPar.js";
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
116 } 116 }
117 this.$popupCacel() 117 this.$popupCacel()
118 } else { 118 } else {
119 popupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true) 119 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
120 } 120 }
121 }) 121 })
122 }, 122 },
......
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
118 } 118 }
119 this.$popupCacel() 119 this.$popupCacel()
120 } else { 120 } else {
121 this.$message.error(res.message); 121 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
122 } 122 }
123 }) 123 })
124 }, 124 },
......
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
110 this.$popupCacel() 110 this.$popupCacel()
111 } 111 }
112 } else { 112 } else {
113 this.$message.error(res.message); 113 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
114 } 114 }
115 }) 115 })
116 }, 116 },
......
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
110 } 110 }
111 this.$popupCacel() 111 this.$popupCacel()
112 } else { 112 } else {
113 this.$message.error(res.message); 113 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
114 } 114 }
115 }) 115 })
116 }, 116 },
......
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
111 } 111 }
112 this.$popupCacel() 112 this.$popupCacel()
113 } else { 113 } else {
114 this.$message.error(res.message); 114 ywPopupDialog("状态", "components/ywdialog", { message: res.message, result: res.result }, '36%', true)
115 } 115 }
116 }) 116 })
117 }, 117 },
......