gyyg-components 0.1.12 → 0.1.14

package/src/components/GyygModal/GyygModal.vue

@@ -1,327 +1,333 @@
-/** * 公共模态框组件 author:lijihao Date:2024.11 支持关闭时,el-form表单清空 **/
-<template>
-	<div class="gyyg-modal">
-		<el-dialog
-			:class="dialogClass"
-			v-el-drag-dialog
-            :type="type"
-			:width="width"
-            :custom-class="customClass"
-			:fullscreen="fullscreen"
-			:title="title"
-			:close-on-click-modal="closeOnClickModal"
-			:append-to-body="appendToBody"
-			:visible.sync="visible"
-			:before-close="beforeClose"
-			:show-close="showClose"
-			v-if="visible"
-			@closed="closed"
-			@close="closeMethod"
-			:destroy-on-close="destroyOnClose"
-			:modal="modal"
-		>
-			<div>
-				<slot name="body" class="gyyg-modal-body" />
-			</div>
-
-			<div v-if="footer" slot="footer" class="dialog-footer">
-				<slot name="footer" />
-			</div>
-		</el-dialog>
-	</div>
-</template>
-
-<script>
-import elDragDialog from '@/directive/el-drag-dialog' // 引入拖拽指令
-export default {
-	name: 'GyygModal',
-	directives: { elDragDialog },
-	props: {
-		// 是否嵌套
-		appendToBody: {
-			type: Boolean,
-			default: false,
-		},
-		// 是否可以点击关闭
-		closeOnClickModal: {
-			type: Boolean,
-			default: false,
-		},
-		// 是否显示底部
-		footer: {
-			type: Boolean,
-			default: true,
-		},
-		// title
-		title: {
-			type: String,
-			default: '',
-		},
-        type: {
-            type: [String,Number],
-            default: "",
-        }, // 对话框类型：1.基础表单[gyyg-modal-form] 2.表格[gyyg-modal-table] 3.全屏 [gyyg-modal-fullscreen]
-		// 对话框宽度(默认50%)
-		width: {
-			type: [String,Number],
-			default: '',
-		},
-        //对话框高度(默认90%)
-		height: {
-			type: [String,Number],
-			default: '',
-		},
-		//关闭后销毁
-		destroyOnClose: {
-			type: Boolean,
-			default: true,
-		},
-		// 关闭回调函数
-		beforeClose: Function,
-		//弹框class
-		dialogClass: {
-			type: String,
-			default: '',
-		},
-		// 是否显示叉号
-		showClose: {
-			default: true,
-			type: Boolean,
-		},
-		//是否需要遮罩层
-		modal: {
-			default: true,
-			type: Boolean,
-		},
-	},
-	data() {
-		return {
-			visible: false,
-			fullscreen: false,
-		}
-	},
-    computed: {
-        customClass() {
-        let className = "";
-        switch (this.type) {
-            case "form":
-            className = "gyyg-modal-form";
-            break;
-            case "table":
-            className = "gyyg-modal-table";
-            break;
-            case "fullscreen":
-            className = "gyyg-modal-fullscreen";
-            break;
-        }
-        return className;
-        },
-    },
-    created() {
-        this.type === "fullscreen" && (this.fullscreen = true);
-    },
-	methods: {
-        //弹框打开
-		open() {
-			this.visible = true
-			if (this.height) {
-				this.$nextTick(() => {
-					document.getElementsByClassName('gyyg-modal')[0].getElementsByClassName('el-dialog')[0].style.height = this.height
-				})
-			}
-		},
-		close() {
-			let db = document.getElementsByClassName('el-dialog__body')
-			//表单清空显示
-			if (db && db[0] && db[0].getElementsByClassName('el-form') && db[0].getElementsByClassName('el-form').length > 0) {
-				let arr = Array.prototype.slice.call(db[0].getElementsByClassName('el-form'))
-				arr.forEach(item => {
-					if (item.__vue__) {
-						let obj = item.__vue__.$options.propsData.model
-						for (let key in obj) {
-							if (obj.hasOwnProperty(key)) {
-								if (obj[key] instanceof Array) {
-									obj[key] = []
-								} else if (obj[key] instanceof Object) {
-									obj[key] = {}
-								} else {
-									obj[key] = ''
-								}
-							}
-						}
-					}
-				})
-			}
-			//组件清空显示(组件里必须要加class='subcomponents'，才能找到，清空)
-			if (db && db[0] && db[0].getElementsByClassName('subcomponents') && db[0].getElementsByClassName('subcomponents').length > 0) {
-				let arr = Array.prototype.slice.call(db[0].getElementsByClassName('subcomponents'))
-				arr.forEach(item => {
-					if (item.__vue__) {
-						//组件清空数据的方法
-						if (item.__vue__.clearHandle) {
-							item.__vue__.clearHandle()
-						} else if (item.__vue__.clearInput) {
-							item.__vue__.clearInput()
-						}
-					}
-				})
-			}
-			this.visible = false
-		},
-		closed() {
-			this.close()
-			this.$emit('closed')
-		},
-        //弹框关闭
-		closeMethod() {
-			this.close()
-			this.$emit('close')
-		},
-	},
-}
-</script>
-
-<style lang="less">
-.el-dialog__wrapper {
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .el-dialog {
-      display: flex;
-      flex-direction: column;
-      border-radius: 8px;
-      margin: 0;
-      margin-top: 0 !important;
-      max-height: 95%;
-      .el-dialog__header {
-        text-align: left;
-        background-color: #efefef;
-        height: 48px;
-        line-height: 48px;
-        padding: 0 20px;
-        color: #fff;
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-        font-weight: bold;
-
-        .el-dialog__title {
-          font-size: 16px;
-        }
-
-        .el-dialog__headerbtn {
-          top: 12px;
-        }
-      }
-
-      .el-dialog__body {
-        flex: 1;
-        overflow: auto;
-      }
-
-      .el-dialog__footer {
-        padding: 10px;
-        border: none;
-        background-color: #efefef;
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
-      }
-    }
-
-    .gyyg-modal-form {
-      height: auto;
-
-      .el-dialog__body {
-        padding: 20px 20px 0 20px;
-      }
-
-      .el-dialog__footer {
-        border: none;
-        background-color: #efefef;
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
-      }
-
-      .custom-table {
-        // 取消表格下边线
-        tbody tr:last-child td {
-          border-bottom: none !important;
-        }
-      }
-    }
-
-    .gyyg-modal-table {
-      height: 90vh;
-      margin-top: 5vh !important;
-    }
-
-    .gyyg-modal-fullscreen {
-      height: 100vh;
-      width: 100vw;
-
-      .el-dialog__body {
-        padding: 10px;
-      }
-      .el-dialog__footer {
-        padding: 10px;
-        border: none;
-        background-color: #efefef;
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
-      }
-    }
-}
-
-.gyyg-modal {
-	text-align: left;
-}
-::v-deep .gyyg-modal .el-dialog__wrapper {
-	overflow: hidden;
-	display: flex !important;
-	justify-content: center;
-	align-items: center;
-	.el-dialog {
-		display: flex;
-		flex-direction: column;
-		border-radius: 8px;
-		margin: 0;
-		margin-top: 0 !important;
-		.el-dialog__header {
-			text-align: left;
-			background-color: #efefef;
-			height: 48px;
-			line-height: 48px;
-			padding: 0 20px;
-			color: #fff;
-			border-top-left-radius: 8px;
-			border-top-right-radius: 8px;
-			font-weight: bold;
-
-			.el-dialog__title {
-				font-size: 16px;
-				// font-weight: bold;
-			}
-
-			.el-dialog__headerbtn {
-				top: 12px;
-			}
-		}
-
-		.el-dialog__body {
-			flex: 1;
-			overflow: auto;
-		}
-
-		.el-dialog__footer {
-			flex-shrink: 0;
-			box-sizing: content-box;
-			height: 32px;
-			padding: 10px;
-			border: none;
-			background-color: #efefef;
-			border-bottom-left-radius: 8px;
-			border-bottom-right-radius: 8px;
-		}
-	}
-}
-</style>
+/** * 公共模态框组件 author:lijihao Date:2024.11 支持关闭时,el-form表单清空 **/
+<template>
+	<div class="gyyg-modal">
+		<el-dialog
+			:class="dialogClass"
+			v-el-drag-dialog
+            :type="type"
+			:width="width"
+            :custom-class="customClass"
+			:fullscreen="fullscreen"
+			:title="title"
+			:close-on-click-modal="closeOnClickModal"
+			:append-to-body="appendToBody"
+			:visible.sync="visible"
+			:before-close="beforeClose"
+			:show-close="showClose"
+			v-if="visible"
+			@closed="closed"
+			@close="closeMethod"
+			:destroy-on-close="destroyOnClose"
+			:modal="modal"
+		>
+			<div>
+				<slot name="body" class="gyyg-modal-body" />
+			</div>
+
+			<div v-if="footer" slot="footer" class="dialog-footer">
+				<slot name="footer" />
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import elDragDialog from '@/directive/el-drag-dialog' // 引入拖拽指令
+export default {
+	name: 'GyygModal',
+	directives: { elDragDialog },
+	props: {
+		// 是否嵌套
+		appendToBody: {
+			type: Boolean,
+			default: false,
+		},
+		// 是否可以点击关闭
+		closeOnClickModal: {
+			type: Boolean,
+			default: false,
+		},
+		// 是否显示底部
+		footer: {
+			type: Boolean,
+			default: true,
+		},
+		// title
+		title: {
+			type: String,
+			default: '',
+		},
+        type: {
+            type: [String,Number],
+            default: "",
+        }, // 对话框类型：1.基础表单[gyyg-modal-form] 2.表格[gyyg-modal-table] 3.全屏 [gyyg-modal-fullscreen]
+		// 对话框宽度(默认50%)
+		width: {
+			type: [String,Number],
+			default: '',
+		},
+        //对话框高度(默认90%)
+		height: {
+			type: [String,Number],
+			default: '',
+		},
+		//关闭后销毁
+		destroyOnClose: {
+			type: Boolean,
+			default: true,
+		},
+		// 关闭回调函数
+		beforeClose: Function,
+		//弹框class
+		dialogClass: {
+			type: String,
+			default: '',
+		},
+		// 是否显示叉号
+		showClose: {
+			default: true,
+			type: Boolean,
+		},
+		//是否需要遮罩层
+		modal: {
+			default: true,
+			type: Boolean,
+		},
+	},
+	data() {
+		return {
+			visible: false,
+			fullscreen: false,
+		}
+	},
+    computed: {
+        customClass() {
+        let className = "";
+        switch (this.type) {
+            case "form":
+            className = "gyyg-modal-form";
+            break;
+            case "table":
+            className = "gyyg-modal-table";
+            break;
+            case "fullscreen":
+            className = "gyyg-modal-fullscreen";
+            break;
+        }
+        return className;
+        },
+    },
+    created() {
+        this.type === "fullscreen" && (this.fullscreen = true);
+    },
+	methods: {
+        //弹框打开
+		open() {
+			this.visible = true
+			if (this.height) {
+				this.$nextTick(() => {
+					document.getElementsByClassName('gyyg-modal')[0].getElementsByClassName('el-dialog')[0].style.height = this.height
+				})
+			}
+		},
+		close() {
+			let db = null
+            //子弹框需要加dialogClass，否则父弹框的form也会清空
+            if(this.dialogClass){
+                db=document.getElementsByClassName(this.dialogClass)[0].getElementsByClassName('el-dialog__body')
+            }else{
+                db=document.getElementsByClassName('el-dialog__body')
+            }
+			//表单清空显示
+			if (db && db[0] && db[0].getElementsByClassName('el-form') && db[0].getElementsByClassName('el-form').length > 0) {
+				let arr = Array.prototype.slice.call(db[0].getElementsByClassName('el-form'))
+				arr.forEach(item => {
+					if (item.__vue__) {
+						let obj = item.__vue__.$options.propsData.model
+						for (let key in obj) {
+							if (obj.hasOwnProperty(key)) {
+								if (obj[key] instanceof Array) {
+									obj[key] = []
+								} else if (obj[key] instanceof Object) {
+									obj[key] = {}
+								} else {
+									obj[key] = ''
+								}
+							}
+						}
+					}
+				})
+			}
+			//组件清空显示(组件里必须要加class='subcomponents'，才能找到，清空)
+			if (db && db[0] && db[0].getElementsByClassName('subcomponents') && db[0].getElementsByClassName('subcomponents').length > 0) {
+				let arr = Array.prototype.slice.call(db[0].getElementsByClassName('subcomponents'))
+				arr.forEach(item => {
+					if (item.__vue__) {
+						//组件清空数据的方法
+						if (item.__vue__.clearHandle) {
+							item.__vue__.clearHandle()
+						} else if (item.__vue__.clearInput) {
+							item.__vue__.clearInput()
+						}
+					}
+				})
+			}
+			this.visible = false
+		},
+		closed() {
+			this.close()
+			this.$emit('closed')
+		},
+        //弹框关闭
+		closeMethod() {
+			this.close()
+			this.$emit('close')
+		},
+	},
+}
+</script>
+
+<style lang="less">
+.el-dialog__wrapper {
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .el-dialog {
+      display: flex;
+      flex-direction: column;
+      border-radius: 8px;
+      margin: 0;
+      margin-top: 0 !important;
+      max-height: 95%;
+      .el-dialog__header {
+        text-align: left;
+        background-color: #efefef;
+        height: 48px;
+        line-height: 48px;
+        padding: 0 20px;
+        color: #fff;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        font-weight: bold;
+
+        .el-dialog__title {
+          font-size: 16px;
+        }
+
+        .el-dialog__headerbtn {
+          top: 12px;
+        }
+      }
+
+      .el-dialog__body {
+        flex: 1;
+        overflow: auto;
+      }
+
+      .el-dialog__footer {
+        padding: 10px;
+        border: none;
+        background-color: #efefef;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
+    }
+
+    .gyyg-modal-form {
+      height: auto;
+
+      .el-dialog__body {
+        padding: 20px 20px 0 20px;
+      }
+
+      .el-dialog__footer {
+        border: none;
+        background-color: #efefef;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
+
+      .custom-table {
+        // 取消表格下边线
+        tbody tr:last-child td {
+          border-bottom: none !important;
+        }
+      }
+    }
+
+    .gyyg-modal-table {
+      height: 90vh;
+      margin-top: 5vh !important;
+    }
+
+    .gyyg-modal-fullscreen {
+      height: 100vh;
+      width: 100vw;
+
+      .el-dialog__body {
+        padding: 10px;
+      }
+      .el-dialog__footer {
+        padding: 10px;
+        border: none;
+        background-color: #efefef;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
+    }
+}
+
+.gyyg-modal {
+	text-align: left;
+}
+::v-deep .gyyg-modal .el-dialog__wrapper {
+	overflow: hidden;
+	display: flex !important;
+	justify-content: center;
+	align-items: center;
+	.el-dialog {
+		display: flex;
+		flex-direction: column;
+		border-radius: 8px;
+		margin: 0;
+		margin-top: 0 !important;
+		.el-dialog__header {
+			text-align: left;
+			background-color: #efefef;
+			height: 48px;
+			line-height: 48px;
+			padding: 0 20px;
+			color: #fff;
+			border-top-left-radius: 8px;
+			border-top-right-radius: 8px;
+			font-weight: bold;
+
+			.el-dialog__title {
+				font-size: 16px;
+				// font-weight: bold;
+			}
+
+			.el-dialog__headerbtn {
+				top: 12px;
+			}
+		}
+
+		.el-dialog__body {
+			flex: 1;
+			overflow: auto;
+		}
+
+		.el-dialog__footer {
+			flex-shrink: 0;
+			box-sizing: content-box;
+			height: 32px;
+			padding: 10px;
+			border: none;
+			background-color: #efefef;
+			border-bottom-left-radius: 8px;
+			border-bottom-right-radius: 8px;
+		}
+	}
+}
+</style>