gyyg-components 0.1.6

package/src/components/GyygModal/GyygModal.vue

@@ -0,0 +1,327 @@
+/** * 公共模态框组件 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>

package/src/components/GyygTable/GyygTable.js

@@ -0,0 +1,5 @@
+import GyygTable from "./GyygTable.vue";
+
+GyygTable.install = Vue => Vue.component(GyygTable.name, GyygTable); //注册组件
+
+export default GyygTable;

package/src/components/GyygTable/GyygTable.vue

@@ -0,0 +1,78 @@
+/** el-table组件 */
+<template>
+	<el-table class='simpleTableClass' ref="simpleTableRef" :data="data" :row-key="rowKey" :row-style="selectedRowStyle" highlight-current-row element-loading-text="加载中" @selection-change="handleSelectionChange" :height='height' @row-click="clickOne" border style="width: 100%">
+		<slot name="content" />
+	</el-table>
+</template>
+
+<script>
+export default {
+    name:'GyygTable',
+	data() {
+		return {
+            simpleMultipleSelection:this.multipleSelection
+        }
+	},
+	props: {
+		//列表数据
+		data: {
+			type: Array,
+			default: () =>{
+                return []
+            },
+		},
+		//行的唯一标识
+		rowKey: {
+			type: [String,Number],
+			default: 'id',
+		},
+		//选择的行
+		multipleSelection: {
+			type: Array,
+			default: () =>{
+                return []
+            },
+		},
+        // 高度
+        height: {
+            type: [String,Number],
+            default: '100%',
+        },
+        // 点击单行，是否只选中当前行
+        toggleRow: {
+            type: Boolean,
+            default: true,
+        }
+	},
+	methods: {
+		// 列表选中加粗
+		selectedRowStyle({ row }) {
+			const idArr = this.simpleMultipleSelection.map(row => row[this.rowKey])
+			if (idArr.includes(row[this.rowKey])) {
+				return { 'font-weight': '700' }
+			}
+		},
+		// 列表选中的当前行
+		handleSelectionChange(row) {
+			this.simpleMultipleSelection = row
+            this.$emit('update:multipleSelection',this.simpleMultipleSelection)
+		},
+		// 选中单条数据
+		clickOne(row) {
+            if(this.toggleRow){
+                this.$refs.simpleTableRef.clearSelection()
+                this.$refs.simpleTableRef.toggleRowSelection(row)
+            }
+		},
+	},
+}
+</script>
+
+<style>
+.simpleTableClass thead tr th {
+  background-color:#F5F7FA !important;
+}
+.simpleTableClass td.el-table__cell{
+  border-right:none;
+}
+</style>

package/src/directive/el-drag-dialog/drag.js

@@ -0,0 +1,64 @@
+export default {
+  bind(el, binding, vnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cssText += ';cursor:move;'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const getStyle = (function() {
+      if (window.document.currentStyle) {
+        return (dom, attr) => dom.currentStyle[attr]
+      } else {
+        return (dom, attr) => getComputedStyle(dom, false)[attr]
+      }
+    })()
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      // 获取到的值带px 正则匹配替换
+      let styL = getStyle(dragDom, 'left')
+      let styT = getStyle(dragDom, 'top')
+
+      if (styL.includes('%')) {
+        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+      } else {
+        styL = +styL.replace(/\px/g, '')
+        styT = +styT.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        let left = e.clientX - disX
+        let top = e.clientY - disY
+
+        // 边界处理
+        // if (-(left) > minDragDomLeft) {
+        //   left = -minDragDomLeft
+        // } else if (left > maxDragDomLeft) {
+        //   left = maxDragDomLeft
+        // }
+
+        // if (-(top) > minDragDomTop) {
+        //   top = -minDragDomTop
+        // } else if (top > maxDragDomTop) {
+        //   top = maxDragDomTop
+        // }
+
+        // 移动当前元素
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+
+        // emit onDrag event
+        vnode.child.$emit('dragDialog')
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

package/src/directive/el-drag-dialog/index.js

@@ -0,0 +1,13 @@
+import drag from "./drag";
+
+const install = function (Vue) {
+  Vue.directive("el-drag-dialog", drag);
+};
+
+if (window.Vue) {
+  window["el-drag-dialog"] = drag;
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install;
+export default drag;

package/src/directive/feeInput.js

@@ -0,0 +1,48 @@
+// input金额指令(数字，且保留两位小数,blur自动增加.00)
+import Vue from 'vue'
+
+Vue.directive('feeInput', {
+  bind(el, binding, vnode) {
+    const input = el.getElementsByTagName('input')[0]
+    input.addEventListener('compositionstart', () => {
+      vnode.inputLocking = true
+    })
+    input.addEventListener('compositionend', () => {
+      vnode.inputLocking = false
+      input.dispatchEvent(new Event('input'))
+    })
+    input.addEventListener('input', () => {
+      if (vnode.inputLocking) {
+        return
+      }
+      const oldValue = input.value
+      let newValue = input.value
+      newValue = newValue.replace(/[^\d.]/g, '')
+      newValue = newValue.replace(/^\./g, '')
+      newValue = newValue.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
+      newValue = newValue.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
+      if (newValue) {
+        const arr = newValue.split('.')
+        newValue = Number(arr[0]) + (arr[1] === undefined ? '' : '.' + arr[1]) // 去掉开头多余的0
+      }
+      // 判断是否需要更新，避免进入死循环
+      if (newValue !== oldValue) {
+        input.value = newValue
+        input.dispatchEvent(new Event('input')) // 通知v-model更新
+      }
+    })
+    // input 事件无法处理小数点后面全是零的情况 因为无法确定用户输入的0是否真的应该清除，如3.02。放在blur中去处理
+    input.addEventListener('blur', () => {
+      const oldValue = input.value
+      let newValue = input.value
+      if (newValue) {
+        newValue = Number(newValue).toFixed(2)
+      }
+      // 判断是否需要更新，避免进入死循环
+      if (newValue !== oldValue) {
+        input.value = newValue
+        input.dispatchEvent(new Event('input')) // 通知v-model更新
+      }
+    })
+  }
+})

package/src/directive/numberInput.js

@@ -0,0 +1,32 @@
+// 数量指令(数字)
+import Vue from 'vue'
+
+Vue.directive('numberInput', {
+  bind(el, binding, vnode) {
+    const input = el.getElementsByTagName('input')[0]
+    input.addEventListener('compositionstart', () => {
+      vnode.inputLocking = true
+    })
+    input.addEventListener('compositionend', () => {
+      vnode.inputLocking = false
+      input.dispatchEvent(new Event('input'))
+    })
+    input.addEventListener('input', () => {
+      if (vnode.inputLocking) {
+        return
+      }
+      const oldValue = input.value
+      let newValue = input.value
+      newValue = newValue.replace(/[^\d]/g,'').replace(/^00*(\d)([0-9]*)/g,'$1$2')
+      if (newValue) {
+        const arr = newValue.split('.')
+        newValue = Number(arr[0]) + (arr[1] === undefined ? '' : '.' + arr[1]) // 去掉开头多余的0
+      }
+      // 判断是否需要更新，避免进入死循环
+      if (newValue !== oldValue) {
+        input.value = newValue
+        input.dispatchEvent(new Event('input')) // 通知v-model更新
+      }
+    })
+  }
+})

package/src/icons/SvgIcon.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+import { isExternal } from '@/utils/common.js'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>

package/src/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from './SvgIcon.vue'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)

package/src/icons/svg/down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678944914954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3728" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M726.62 470.62L545.94 651.31c-18.72 18.72-49.16 18.72-67.88 0L297.38 470.62c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L512 594.75l169.38-169.38c12.5-12.5 32.75-12.5 45.25 0 6.25 6.25 9.38 14.44 9.38 22.62s-3.13 16.39-9.39 22.63zM523.31 606.38v-0.31 0.31z" fill="#409EFF" p-id="3729"></path><path d="M128 512c0-211.74 172.26-384 384-384s384 172.26 384 384-172.26 384-384 384-384-172.26-384-384m-64 0c0 247.42 200.58 448 448 448s448-200.58 448-448S759.42 64 512 64 64 264.58 64 512z" fill="#409EFF" p-id="3730"></path></svg>

package/src/icons/svg/up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678945148529" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4763" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M297.38 553.38l180.69-180.69c18.72-18.72 49.16-18.72 67.88 0l180.69 180.69c12.5 12.5 12.5 32.75 0 45.25s-32.75 12.5-45.25 0L512 429.25 342.62 598.62c-12.5 12.5-32.75 12.5-45.25 0-6.25-6.25-9.38-14.44-9.38-22.62s3.13-16.38 9.39-22.62z m203.31-135.76v0.31-0.31z" fill="#409EFF" p-id="4764"></path><path d="M896 512c0 211.74-172.26 384-384 384S128 723.74 128 512s172.26-384 384-384 384 172.26 384 384m64 0c0-247.42-200.58-448-448-448S64 264.58 64 512s200.58 448 448 448 448-200.58 448-448z" fill="#409EFF" p-id="4765"></path></svg>

package/src/icons/svgo.yml

@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'