Skip to content

bdc / bdcdj-web

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

style:弹框组件完成重构

1 parent 1d3c7e3a
Inline Side-by-side
Showing 6 changed files with 281 additions and 152 deletions
1 import Vue from 'vue'
2 import Popup from './index.vue'
3 const PopupBox = Vue.extend(Popup)
4 let popuping = undefined
5
6 PopupBox.prototype.close = function () {
7 // 如果Popup 有引用，则去掉引用
8 if (popuping) {
9 popuping = undefined
10 }
11 // 先将组件隐藏
12 this.isShow = false
13 // 延迟300毫秒，等待Popup关闭动画执行完之后销毁组件
14 setTimeout(() => {
15 // 移除挂载的dom元素
16 if (this.$el && this.$el.parentNode) {
17 this.$el.parentNode.removeChild(this.$el)
18 }
19 }, 300)
20 }
21
22 const Popup1 = (title, editItem, data, formData) => {
23 // 如果组件已渲染，则返回即可
24 if (popuping) {
25 return popuping
26 }
27 data.title = title
28 data.editItem = editItem
29 if (formData) {
30 data.formData = formData
31 }
32 // 通过构造函数初始化组件 相当于 new Vue()
33 let instance = new PopupBox({
34 data
35 }).$mount()
36 document.body.appendChild(instance.$el)
37 Vue.nextTick(() => {
38 instance.isShow = true
39 })
40 // 将组件实例赋值给loading
41 popuping = instance
42 return instance
43 }
44 export default Popup1
1 <template>
2 <transition name="msgbox-fade" v-if="myShow">
3 <div class="ls-mask" v-loading="loading">
4 <div class="ls-mask-window" :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' @loading='loadingFn' :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 formData: undefined,//父组件传递的参数 负责传给子组件
32 btnShow: false,
33 cancel: function () { },
34 confirm: function () { },
35 cancelText: '取消',
36 confirmText: '确认',
37 isSync: false,
38 isShow: false,
39 myShow: false,
40 titleStyle: 'center',
41 width: "75%",
42 height: "auto",
43 contentHeight: "",
44 iconClass: "",
45 key: 0
46 }
47 },
48 props: {
49 loading: { type: Boolean, default: false },
50 },
51 watch: {
52 isShow (newValue) {
53 this.editItem = this.loadViewFn(this.editItem)
54 document.body.appendChild(this.$el);
55 this.myShow = newValue
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 this.loading = true
82 let res = new Promise((resolve, reject) => {
83 this.confirm()
84 resolve(true)
85 })
86 if (res) {
87 this.isShow = false
88 }
89 },
90 loadingFn (e) { //加载状态
91 this.loading = e
92 },
93 loadViewFn (view) {
94 return (r) =>
95 require.ensure([], () =>
96 r(require(`@/views/${view}.vue`))
97 )
98 }
99 },
100 destroyed () {
101 if (this.appendToBody && this.$el && this.$el.parentNode) {
102 this.$el.parentNode.removeChild(this.$el);
103 }
104 }
105 }
106 </script>
107 <style scoped lang="scss" >
108 .ls-mask {
109 width: 100%;
110 height: 100%;
111 z-index: 2000;
112 position: fixed;
113 left: 0;
114 top: 0;
115 background: rgba(0, 0, 0, 0.3);
116
117 }
118
119 .ls-mask-window {
120 background: white;
121 position: relative;
122 left: 50%;
123 top: 50%;
124 min-height: 200px;
125 transform: translate(-50%, -50%);
126 border-radius: 5px;
127 overflow: hidden;
128 }
129
130 .ls-mask-window b {
131 padding-left: 5px;
132 }
133
134 .ls-title {
135 padding: 16px;
136 color: #ffffff;
137 background: linear-gradient(3deg, #409EFF, #a7cbee);
138 }
139
140 .ls-title .svg-icon {
141 font-size: 18px;
142 }
143
144 .mask-content {
145 padding: 20px;
146 width: 100%;
147 min-height: 30%;
148 max-height: 95%;
149 overflow-y: scroll;
150 }
151
152 .ls-mask-footer {
153 height: 50px;
154 display: flex;
155 justify-content: center;
156 width: 100%;
157 position: absolute;
158 border-top: 1px solid $borderColor;
159 bottom: 0;
160 background: #ffffff;
161 border-bottom-left-radius: 5px;
162 border-bottom-right-radius: 5px;
163 overflow: hidden;
164 }
165
166
167 /deep/.closeStyle {
168 position: absolute;
169 top: 13px;
170 right: 26px;
171 font-size: 24px;
172 cursor: pointer;
173 color: #409EFF;
174 }
175
176 /deep/.el-loading-mask {
177 background: none;
178 }
179
180 /deep/.el-button {
181 margin: 8px 10px;
182 width: 75px;
183 }
184 </style>
185
...\ 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 import Popup from '@/components/Popup/index' 1 import Popup from '@/components/Popup/index'
2 import Popup1 from '@/components/Popup1/index'
2 export function popupDialog (title, url, params, width = '75%', height, btnShow = false, callback) { 3 export function popupDialog (title, url, params, width = '75%', height, btnShow = false, callback) {
3 Popup.install(title, url, { 4 // Popup.install
5 Popup1(title, url, {
4 height: height, 6 height: height,
5 width: width, 7 width: width,
6 formData: params, 8 formData: params,
...@@ -13,3 +15,20 @@ export function popupDialog (title, url, params, width = '75%', height, btnShow ...@@ -13,3 +15,20 @@ export function popupDialog (title, url, params, width = '75%', height, btnShow
13 } 15 }
14 }) 16 })
15 } 17 }
18 export function popupDialog1 (title, url, params, width = '75%', height, btnShow = false, callback) {
19 Popup1(title, url, {
20 height: height,
21 width: width,
22 formData: params,
23 btnShow: btnShow,
24 cancel: () => {
25 console.log("取消回调");
26 },
27 confirm: () => {
28 callback
29 }
30 })
31 }
32 export function popupCacel () {
33 Popup1().close()
34 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 <div class="text color_red"> 32 <div class="text color_red">
33 <span>{{ item.syqx }}</span> 33 <span>{{ item.syqx }}</span>
34 </div> 34 </div>
35 <div class="top_line middle_margin"></div> 35 <!-- <div class="top_line middle_margin"></div> -->
36 <div class="text color_iray"> 36 <div class="text color_iray">
37 <span>印刷序列号：{{ item.ysxlh }}</span> 37 <span>印刷序列号：{{ item.ysxlh }}</span>
38 </div> 38 </div>
...@@ -40,54 +40,25 @@ ...@@ -40,54 +40,25 @@
40 <div class="card_padding"> 40 <div class="card_padding">
41 <div class="top_line middle_margin"></div> 41 <div class="top_line middle_margin"></div>
42 <div class="text" v-if="item.ysxlh"> 42 <div class="text" v-if="item.ysxlh">
43 <el-button 43 <el-button class="operation_button" type="text" @click="openInvalidDiglog(item)">再次打印（{{ item.szcs
44 class="operation_button" 44 }})</el-button>
45 type="text" 45 <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button>
46 @click="openInvalidDiglog(item)"
47 >再次打印（{{ item.szcs }})</el-button
48 >
49 <el-button
50 class="operation_button"
51 type="text"
52 @click="openRecordPop(item)"
53 >缮证记录</el-button
54 >
55 </div> 46 </div>
56 <div class="text" v-else> 47 <div class="text" v-else>
57 <el-button 48 <el-button class="operation_button" type="text" @click="openZsylDialog(item, 2)">证书打印（{{ item.szcs
58 class="operation_button" 49 }}）</el-button>
59 type="text" 50 <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button>
60 @click="openZsylDialog(item,2)"
61 >证书打印（{{ item.szcs }}）</el-button
62 >
63 <el-button
64 class="operation_button"
65 type="text"
66 @click="openRecordPop(item)"
67 >缮证记录</el-button
68 >
69 </div> 51 </div>
70 </div> 52 </div>
71 </el-card> 53 </el-card>
72 <el-dialog 54 <el-dialog title="证书作废" :visible.sync="invalidDiglog" width="30%" :modal-append-to-body="false" top="30vh">
73 title="证书作废"
74 :visible.sync="invalidDiglog"
75 width="30%"
76 :modal-append-to-body="false"
77 top="30vh"
78 >
79 <div class="invalid-diglog"> 55 <div class="invalid-diglog">
80 <div class="invalid-title"> 56 <div class="invalid-title">
81 <i class="el-icon-question invalid-icon"></i> 57 <i class="el-icon-question invalid-icon"></i>
82 <div class="invalid-body">您确定作废证书并再次打印？</div> 58 <div class="invalid-body">您确定作废证书并再次打印？</div>
83 </div> 59 </div>
84 <div class="invalid-reson">作废原因：</div> 60 <div class="invalid-reson">作废原因：</div>
85 <el-input 61 <el-input v-model="zfyy" placeholder="请输入作废原因" type="textarea" :rows="4"></el-input>
86 v-model="zfyy"
87 placeholder="请输入作废原因"
88 type="textarea"
89 :rows="4"
90 ></el-input>
91 <div class="dialog-footer"> 62 <div class="dialog-footer">
92 <el-button @click="closeInvalidDiglog()">取 消</el-button> 63 <el-button @click="closeInvalidDiglog()">取 消</el-button>
93 <el-button type="primary" @click="confirmInvalid()">确 定</el-button> 64 <el-button type="primary" @click="confirmInvalid()">确 定</el-button>
...@@ -99,13 +70,13 @@ ...@@ -99,13 +70,13 @@
99 </div> 70 </div>
100 </template> 71 </template>
101 <script> 72 <script>
102 import { getSlsqBdcqzList, invalidCertificate,getSzRecordList } from "@/api/bdcqz.js"; 73 import { getSlsqBdcqzList, invalidCertificate, getSzRecordList } from "@/api/bdcqz.js";
103 import bdcqzPrint from "./zsdy.vue"; 74 import bdcqzPrint from "./zsdy.vue";
104 import { popupDialog } from "@/utils/popup.js"; 75 import { popupDialog } from "@/utils/popup.js";
105 export default { 76 export default {
106 components: { bdcqzPrint }, 77 components: { bdcqzPrint },
107 props: {}, 78 props: {},
108 data() { 79 data () {
109 return { 80 return {
110 dialog: false, 81 dialog: false,
111 tableData: [], 82 tableData: [],
...@@ -116,12 +87,12 @@ export default { ...@@ -116,12 +87,12 @@ export default {
116 bsmSz: "", 87 bsmSz: "",
117 }; 88 };
118 }, 89 },
119 created() { 90 created () {
120 this.list(); 91 this.list();
121 }, 92 },
122 methods: { 93 methods: {
123 //初始化列表 94 //初始化列表
124 list() { 95 list () {
125 var bsmSlsq = this.$route.query.bsmSlsq; 96 var bsmSlsq = this.$route.query.bsmSlsq;
126 getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => { 97 getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
127 if (res.code === 200) { 98 if (res.code === 200) {
...@@ -133,23 +104,16 @@ export default { ...@@ -133,23 +104,16 @@ export default {
133 }); 104 });
134 }, 105 },
135 //打开证书预览弹窗 106 //打开证书预览弹窗
136 openZsylDialog(item, type) { 107 openZsylDialog (item, type) {
137 let that = this; 108 let that = this;
138 if (type == 1) { 109 if (type == 1) {
139 //证书预览 110 //证书预览
140 this.$popup("证书预览", "workflow/components/zsyl", { 111 this.$popup("证书预览", "workflow/components/zsyl", {
141 height: "650px", 112 height: "630px",
142 width: "800px", 113 width: "800px",
143 formData: { 114 formData: {
144 bdcqz: item, 115 bdcqz: item,
145 }, 116 }
146 btnShow: false,
147 cancel: () => {
148 console.log("取消回调");
149 },
150 confirm: () => {
151 console.log("取消回调");
152 },
153 }); 117 });
154 } else { 118 } else {
155 this.$nextTick(() => { 119 this.$nextTick(() => {
...@@ -177,17 +141,17 @@ export default { ...@@ -177,17 +141,17 @@ export default {
177 } 141 }
178 }, 142 },
179 //再次打印 143 //再次打印
180 openInvalidDiglog(item) { 144 openInvalidDiglog (item) {
181 this.bsmSz = item.bsmSz; 145 this.bsmSz = item.bsmSz;
182 this.invalidDiglog = true; 146 this.invalidDiglog = true;
183 }, 147 },
184 closeInvalidDiglog() { 148 closeInvalidDiglog () {
185 this.invalidDiglog = false; 149 this.invalidDiglog = false;
186 this.bsmSz = ""; 150 this.bsmSz = "";
187 this.zfyy = ""; 151 this.zfyy = "";
188 }, 152 },
189 //作废缮证信息 153 //作废缮证信息
190 confirmInvalid() { 154 confirmInvalid () {
191 invalidCertificate({ bsmSz: this.bsmSz, zfyy: this.zfyy }).then((res) => { 155 invalidCertificate({ bsmSz: this.bsmSz, zfyy: this.zfyy }).then((res) => {
192 if (res.code === 200) { 156 if (res.code === 200) {
193 this.list(); 157 this.list();
...@@ -199,8 +163,8 @@ export default { ...@@ -199,8 +163,8 @@ export default {
199 } 163 }
200 }); 164 });
201 }, 165 },
202 openRecordPop(item) { 166 openRecordPop (item) {
203 popupDialog("缮证记录", "workflow/components/szRecord", {bsmBdcqz: item.bsmBdcqz}, '50%') 167 popupDialog("缮证记录", "workflow/components/szRecord", { bsmBdcqz: item.bsmBdcqz }, '50%')
204 } 168 }
205 }, 169 },
206 }; 170 };
......
...@@ -28,100 +28,7 @@ ...@@ -28,100 +28,7 @@
28 </el-form> 28 </el-form>
29 </div> 29 </div>
30 <img :src="previewImage"> 30 <img :src="previewImage">
31 <!-- <div 31
32 class="aaaa"
33 v-if="bdcqz.bdcqzlx == 1"
34 :style="{
35 backgroundImage: 'url(' + require('@/image/bdcqz/bdcqzs2.jpg') + ')',
36 }"
37 >
38 <div class="bdcqzh">
39 <span>{{ bdcqz.sjjc }}</span> <span>{{ bdcqz.djnd }}</span>
40 <span>{{ bdcqz.sxqc }}</span> <span>{{ bdcqz.sxh }}</span>
41 </div>
42 <div class="zsyl-box">
43 <div class="zsyl-left">
44 <div class="qlr">
45 {{ bdcqz.qlr }}
46 </div>
47 <div class="gyqk">
48 {{ bdcqz.gyqk }}
49 </div>
50 <div class="zl">
51 {{ bdcqz.zl }}
52 </div>
53 <div class="bdcdyh">
54 {{ bdcqz.bdcdyh }}
55 </div>
56 <div class="qllx">
57 {{ bdcqz.qllx }}
58 </div>
59 <div class="qlxz">
60 {{ bdcqz.qlxz }}
61 </div>
62 <div class="yt">
63 {{ bdcqz.yt }}
64 </div>
65 <div class="mj">
66 {{ bdcqz.mj }}
67 </div>
68 <div class="syqx">
69 {{ bdcqz.syqx }}
70 </div>
71 <div class="qt">
72 {{ bdcqz.qlqtzk }}
73 </div>
74 </div>
75 <div class="zsyl-right">
76 <div class="fj">{{ bdcqz.fj }}</div>
77 </div>
78 </div>
79 </div>
80 <div
81 class="bdcdjzm"
82 v-else
83 :style="{
84 backgroundImage: 'url(' + require('@/image/bdcqz/bdcdjzm.jpg') + ')',
85 }"
86 >
87 <div class="bdcqzh">
88 <span>{{ bdcqz.sjjc }}</span> <span>{{ bdcqz.djnd }}</span>
89 <span>{{ bdcqz.sxqc }}</span> <span>{{ bdcqz.sxh }}</span>
90 </div>
91 <div class="zmyl-box">
92 <div class="qlr">
93 {{ bdcqz.qlr }}
94 </div>
95 <div class="gyqk">
96 {{ bdcqz.gyqk }}
97 </div>
98 <div class="zl">
99 {{ bdcqz.zl }}
100 </div>
101 <div class="bdcdyh">
102 {{ bdcqz.bdcdyh }}
103 </div>
104 <div class="qllx">
105 {{ bdcqz.qllx }}
106 </div>
107 <div class="qlxz">
108 {{ bdcqz.qlxz }}
109 </div>
110 <div class="yt">
111 {{ bdcqz.yt }}
112 </div>
113 <div class="mj">
114 {{ bdcqz.mj }}
115 </div>
116 <div class="syqx">
117 {{ bdcqz.syqx }}
118 </div>
119 <div class="qt">
120 {{ bdcqz.qlqtzk }}
121 </div>
122 <div class="fj">{{ bdcqz.fj }}</div>
123 </div>
124 </div> -->
125 </div> 32 </div>
126 </dialogBox> 33 </dialogBox>
127 </template> 34 </template>
......