sh-view 1.5.2

package/packages/components/global-components/sh-pull-refresh/index.vue

@@ -0,0 +1,290 @@
+<template>
+	<div ref="scroller" class="sh-pull-refresh" :class="classes" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
+		<div class="sh-pull-refresh-container" :style="getStyle">
+			<div class="sh-pull-refresh-container-topbox" :style="getHeightStyle">
+				<div class="sh-pull-refresh-container-topbox-text">
+					<slot v-if="status === 'pulling'" name="pulling">{{ pullingTxt }}</slot>
+					<slot v-if="status === 'loosing'" name="loosing">{{ loosingTxt }}</slot>
+					<slot v-if="status === 'loading'" name="loading">
+						<i class="sh-pull-refresh-container-topbox-icon vxe-icon-refresh roll"></i>
+						{{ loadingTxt }}
+					</slot>
+				</div>
+			</div>
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShPullRefresh',
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		pullingTxt: {
+			type: String,
+			default: '下拉刷新'
+		},
+		loosingTxt: {
+			type: String,
+			default: '释放刷新'
+		},
+		loadingTxt: {
+			type: String,
+			default: '加载中...'
+		},
+		// completeTxt: {
+		//   type: String,
+		//   default: ''
+		// },
+		headHeight: {
+			type: [String, Number],
+			default: 40
+		},
+		pullDistance: {
+			type: [String, Number],
+			default: 40
+		},
+		duration: {
+			type: [String, Number],
+			default: 0.3
+		}
+	},
+	emits: ['change', 'refresh', 'update:modelValue'],
+	data() {
+		return {
+			touch: {
+				startX: 0,
+				startY: 0,
+				moveX: 0,
+				moveY: 0,
+				deltaX: 0,
+				deltaY: 0,
+				offsetX: 0,
+				offsetY: 0,
+				direction: ''
+			},
+			scrollParent: null,
+			isPullRefresh: false,
+			distance: 0,
+			status: 'normal'
+		}
+	},
+	computed: {
+		classes() {
+			const prefixCls = 'pull-refresh'
+			return {
+				[prefixCls]: true
+			}
+		},
+		getPullStatus() {
+			if (this.status === 'pulling') {
+				return !this.slots.pulling ? this.pullingTxt : ''
+			} else if (this.status === 'loosing') {
+				return !this.slots.loosing ? this.loosingTxt : ''
+			} else if (this.status === 'loading') {
+				return !this.slots.loading ? this.loadingTxt : ''
+			} else {
+				return ''
+			}
+		},
+		getStyle() {
+			return {
+				transitionDuration: `${this.duration}s`,
+				transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : ''
+			}
+		},
+		getHeightStyle() {
+			const styles = {}
+			if (this.headHeight !== 40) styles.height = this.pxCheck(this.headHeight)
+			return styles
+		}
+	},
+	watch: {
+		modelValue(val) {
+			if (val) {
+				this.setPullStatus(+this.headHeight, true)
+				this.$nextTick(() => this.$emit('refresh'))
+			} else {
+				this.setPullStatus(0)
+			}
+		}
+	},
+	mounted() {
+		this.initMounted()
+	},
+	methods: {
+		initMounted() {
+			this.scrollParent = this.getScrollParent()
+		},
+		pxCheck(value) {
+			return isNaN(Number(value)) ? String(value) : `${value}px`
+		},
+		timing(distance) {
+			const pullDistance = +(this.pullDistance || this.headHeight)
+			let moveDistance = distance
+			if (distance > pullDistance) {
+				if (distance < pullDistance * 2) {
+					moveDistance = (distance + pullDistance) / 2
+				} else {
+					moveDistance = pullDistance + distance / 4
+				}
+			}
+			return Math.round(moveDistance)
+		},
+		setPullStatus(distance, isLoading) {
+			const pullDistance = +(this.pullDistance || this.headHeight)
+			this.distance = distance
+			if (isLoading) {
+				this.status = 'loading'
+			} else if (distance === 0) {
+				this.status = 'normal'
+			} else if (distance < pullDistance) {
+				this.status = 'pulling'
+			} else {
+				this.status = 'loosing'
+			}
+			this.$emit('change', { status: this.status, distance })
+		},
+		isElement(node) {
+			return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === 1
+		},
+		isVertical() {
+			return this.touch.direction === 'vertical'
+		},
+		isHorizontal() {
+			return this.touch.direction === 'horizontal'
+		},
+		getDirection(x, y) {
+			let MIN_DISTANCE = 10
+			if (x > y && x > MIN_DISTANCE) {
+				return 'horizontal'
+			}
+			if (y > x && y > MIN_DISTANCE) {
+				return 'vertical'
+			}
+			return ''
+		},
+		resetTouch() {
+			this.touch.deltaX = 0
+			this.touch.deltaY = 0
+			this.touch.offsetX = 0
+			this.touch.offsetY = 0
+			this.touch.direction = ''
+		},
+		startTouch(event) {
+			this.resetTouch()
+			this.touch.startX = event.touches[0].clientX
+			this.touch.startY = event.touches[0].clientY
+		},
+		moveTouch(event) {
+			const touch = event.touches[0]
+			this.touch.deltaX = touch.clientX - this.touch.startX
+			this.touch.deltaY = touch.clientY - this.touch.startY
+			this.touch.moveX = touch.clientX
+			this.touch.moveY = touch.clientY
+			this.touch.offsetX = Math.abs(this.touch.deltaX)
+			this.touch.offsetY = Math.abs(this.touch.deltaY)
+			if (!this.touch.direction) {
+				this.touch.direction = this.getDirection(this.touch.offsetX, this.touch.offsetY)
+			}
+		},
+		getScrollParent(el, root = window) {
+			let node = el
+			const overflowScrollReg = /scroll|auto|overlay/i
+			while (node && node !== root && this.isElement(node)) {
+				const { overflowY } = window.getComputedStyle(node)
+				if (overflowScrollReg.test(overflowY)) {
+					return node
+				}
+				node = node.parentNode
+			}
+			return root
+		},
+		getScrollTopRoot() {
+			return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+		},
+		isCanTouch() {
+			return this.status !== 'loading' && this.status !== 'complete'
+		},
+		isScrollTop() {
+			if (this.scrollParent === window) {
+				return this.getScrollTopRoot() === 0
+			} else {
+				return this.scrollParent && this.scrollParent.scrollTop === 0
+			}
+		},
+		touchStart(event) {
+			if (this.isCanTouch()) {
+				if (this.isScrollTop()) {
+					this.startTouch(event)
+					this.isPullRefresh = true
+				} else {
+					this.distance = 0
+					this.isPullRefresh = false
+				}
+			}
+		},
+		touchMove(event) {
+			if (this.isCanTouch()) {
+				this.moveTouch(event)
+				if (this.isVertical() && this.touch.deltaY > 0 && this.isPullRefresh) {
+					event.preventDefault()
+					this.setPullStatus(this.timing(this.touch.deltaY))
+				}
+			}
+		},
+		touchEnd() {
+			const that = this
+			if (that.isPullRefresh && that.isCanTouch() && that.touch.deltaY) {
+				if (that.status === 'loosing') {
+					that.setPullStatus(+that.headHeight, true)
+					that.$emit('update:modelValue', true)
+					that.$nextTick(() => that.$emit('refresh'))
+				} else {
+					that.setPullStatus(0)
+				}
+			}
+			setTimeout(() => {
+				that.resetTouch()
+			}, 0)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-pull-refresh {
+	height: 100%;
+	overflow: hidden;
+	&-container {
+		position: relative;
+		height: 100%;
+		&-topbox {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			height: 40px;
+			transform: translateY(-100%);
+			text-align: center;
+			font-size: 14px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&-icon {
+				margin-right: 4px;
+				width: 16px;
+				height: 16px;
+				padding: 0;
+			}
+			&-text {
+				font-size: var(--font-size-base);
+				color: var(--theme-color);
+			}
+		}
+	}
+}
+</style>

package/packages/components/global-components/sh-result/index.vue

@@ -0,0 +1,88 @@
+<template>
+	<div class="sh-result">
+		<div v-if="isicon || $slots.icon" class="sh-result-icon" :class="resultType">
+			<slot name="icon"><sh-icon :type="resultIcon" :size="iconSize" /></slot>
+		</div>
+		<div v-if="text || $slots.text" v-line-clamp="clamp" class="sh-result-text" :title="text">
+			<slot name="text">{{ text }}</slot>
+		</div>
+		<slot name="default"></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShResult',
+	components: {},
+	props: {
+		type: {
+			type: String,
+			default: ''
+		},
+		isicon: {
+			type: Boolean,
+			default: true
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconSize: {
+			type: Number,
+			default: 40
+		},
+		text: {
+			type: String,
+			default: ''
+		},
+		clamp: {
+			type: Number,
+			default: 2
+		}
+	},
+	computed: {
+		resultType() {
+			let types = ['success', 'error', 'warning', 'info']
+			return types.includes(this.type) ? this.type : 'info'
+		},
+		resultIcon() {
+			let resultIconMap = {
+				success: 'ios-checkmark-circle',
+				error: 'ios-close-circle',
+				warning: 'ios-alert',
+				info: 'ios-information-circle'
+			}
+			return resultIconMap[this.resultType]
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-result {
+	width: 100%;
+	display: block;
+	text-align: center;
+	padding: 10px;
+	.sh-result-icon {
+		box-sizing: border-box;
+		color: var(--theme-color);
+		margin-bottom: 15px;
+		&.sucess {
+			color: var(--success-color);
+		}
+		&.error {
+			color: var(--error-color);
+		}
+		&.warning {
+			color: var(--warning-color);
+		}
+		&.info {
+			color: var(--info-color);
+		}
+	}
+	.sh-result-text {
+		color: var(--text-color);
+	}
+}
+</style>

package/packages/components/global-components/sh-sheet/index.vue

@@ -0,0 +1,173 @@
+<template>
+	<div :id="sheetId" ref="shSheet" class="sh-sheet" :style="sheetStyles"></div>
+</template>
+
+<script>
+export default {
+	name: 'ShSheet',
+	props: {
+		option: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: '600'
+		},
+		disabled: {
+			type: Boolean
+		},
+		readonly: {
+			type: Boolean
+		},
+		url: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {}
+	},
+	computed: {
+		sheetId() {
+			return 'ShSheet' + this._.uid
+		},
+		sheetStyles() {
+			return {
+				width: this.width,
+				height: this.height
+			}
+		},
+		sheetOption() {
+			let { disabled, readonly, sheetId } = this
+			let isedit = !disabled && !readonly
+			let defaultOption = {
+				title: this.title,
+				lang: 'zh',
+				// plugins: ['chart'],
+				allowCopy: true, // 允许复制
+				showinfobar: isedit,
+				showtoolbar: isedit, // 工具栏
+				showtoolbarConfig: {}, // 自定义工具栏
+				showstatisticBar: true, // 底部计数栏
+				showstatisticBarConfig: {
+					count: true, // 计数栏
+					view: true, // 打印视图
+					zoom: true // 缩放
+				}, // 自定义计数栏
+				showsheetbar: true, // 底部sheet页
+				showsheetbarConfig: {
+					add: isedit, // 新增sheet
+					menu: true, // sheet管理菜单
+					sheet: true // sheet页显示
+				}, // 自定义底部sheet页
+				enableAddRow: isedit, // 允许添加行
+				enableAddBackTop: true, // 允许回到顶部
+				cellRightClickConfig: {
+					copy: false, // 复制
+					copyAs: false, // 复制为
+					paste: false, // 粘贴
+					insertRow: false, // 插入行
+					insertColumn: false, // 插入列
+					deleteRow: false, // 删除选中行
+					deleteColumn: false, // 删除选中列
+					deleteCell: false, // 删除单元格
+					hideRow: false, // 隐藏选中行和显示选中行
+					hideColumn: false, // 隐藏选中列和显示选中列
+					rowHeight: false, // 行高
+					columnWidth: false, // 列宽
+					clear: false, // 清除内容
+					matrix: false, // 矩阵操作选区
+					sort: false, // 排序选区
+					filter: false, // 筛选选区
+					chart: false, // 图表生成
+					image: false, // 插入图片
+					link: false, // 插入链接
+					data: false, // 数据验证
+					cellFormat: false // 设置单元格格式
+				}, // 自定义单元格右键菜单
+				sheetRightClickConfig: {
+					delete: false, // 删除
+					copy: false, // 复制
+					rename: false, // 重命名
+					color: false, // 更改颜色
+					hide: false, // 隐藏，取消隐藏
+					move: false // 向左移，向右移
+				}, // 自定义sheet页右击菜单
+				sheetFormulaBar: isedit, // 是否显示公式栏
+				defaultFontSize: 14, // 初始化默认字体大小
+				functionButton: false, // 功能按钮
+				data: [],
+				userInfo: ''
+			}
+			return Object.assign(defaultOption, this.option, { container: sheetId })
+		}
+	},
+	watch: {
+		sheetOption: {
+			handler() {
+				this.sheetRender()
+			},
+			deep: true
+		},
+		url: {
+			handler() {
+				this.sheetRender()
+			}
+		}
+	},
+	mounted() {
+		this.sheetRender()
+	},
+	methods: {
+		async sheetRender() {
+			const that = this
+			try {
+				window.luckysheet.destroy() // 先销毁当前容器
+				let sheetOption = that.sheetOption
+				if (that.url) {
+					let contentJson = await that.getFileContent()
+					sheetOption.data = contentJson.sheets
+					sheetOption.title = contentJson.info.name
+					sheetOption.userInfo = contentJson.info.creator
+				}
+				window.luckysheet.create(sheetOption)
+			} catch (e) {
+				that.msgerror(`初始化失败：${e.message}`)
+			}
+		},
+		// 获取文件流
+		async getFileContent() {
+			return new Promise(async (resolve, reject) => {
+				let fileRes = await this.$http.request({
+					methods: 'get',
+					url: this.url,
+					responseType: 'blob'
+				})
+				window.LuckyExcel.transformExcelToLucky(fileRes, (exportJson, luckysheetfile) => {
+					if (exportJson.sheets == null || exportJson.sheets.length === 0) {
+						reject(new Error('读取excel文件内容失败!'))
+					}
+					resolve(exportJson)
+				})
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-sheet {
+	position: relative;
+}
+</style>

package/packages/components/global-components/sh-upload/components/u-img.vue

@@ -0,0 +1,63 @@
+<template>
+	<img :src="imgsrc" />
+</template>
+
+<script>
+export default {
+	name: 'UImg',
+	props: {
+		src: {
+			type: String
+		},
+		file: {
+			type: Object
+		},
+		baseUrl: {
+			type: String
+		}
+	},
+	data() {
+		return {
+			imgsrc: ''
+		}
+	},
+	watch: {
+		file: {
+			handler: function (val, oldVal) {
+				this.initMounted()
+			},
+			immediate: false,
+			deep: true
+		}
+	},
+	mounted() {
+		this.initMounted()
+	},
+	methods: {
+		// 初始化渲染
+		async initMounted() {
+			if (!this.src) {
+				this.imgsrc = this.file ? await this.getImagePreviewData(this.file) : ''
+			} else {
+				this.imgsrc = this.src.startsWith('http') ? this.src : this.baseUrl || this.$config.baseUrl.pro + this.src
+			}
+		},
+		// 生成预览图片列表
+		async getImagePreviewData(file) {
+			let fileReader = new FileReader()
+			return new Promise((resolve, reject) => {
+				try {
+					fileReader.readAsDataURL(file)
+					fileReader.onload = function (e) {
+						resolve(e.target.result)
+					}
+				} catch (e) {
+					reject(e)
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style scoped></style>

package/packages/components/global-components/sh-upload/components/u-list.vue

@@ -0,0 +1,100 @@
+<template>
+	<template v-if="uploadList.length > 0">
+		<div v-for="(item, index) in uploadList" :key="index" class="sh-upload-list" :style="upStyles" :class="upClass">
+			<div v-if="listType === 'card'" class="list-file-card">
+				<u-img v-if="type === 'img'" :src="item.url" :file="item"></u-img>
+				<div v-else class="file-title">{{ item.name }}</div>
+				<div class="list-file-cover">
+					<sh-icon v-if="preview" type="ios-eye-outline" title="查看文件" size="18" @click="handleFilePreviewView(item)" />
+					<sh-icon v-if="!disabled" type="ios-trash-outline" title="删除文件" size="18" @click="handleFileRemove(item)" />
+				</div>
+			</div>
+			<div v-else class="list-file-item">
+				<div class="file-title">{{ item.name }}</div>
+				<div class="file-action">
+					<span v-if="preview" class="file-action-item"><sh-icon type="ios-eye-outline" title="查看文件" size="18" @click="handleFilePreviewView(item)" /></span>
+					<span v-if="!disabled" class="file-action-item"><sh-icon type="ios-trash-outline" title="删除文件" size="18" @click="handleFileRemove(item)" /></span>
+				</div>
+			</div>
+		</div>
+	</template>
+	<sh-modal v-if="previewModal" v-model="previewModal" title="预览查看" height="100%" readonly @close="handleFilePreviewCancel">
+		<template v-if="type === 'file'">
+			<sh-preview :url="previewFile.url"></sh-preview>
+		</template>
+		<template v-else-if="isFormData && type === 'img'">
+			<u-img :src="previewFile && previewFile.url" :file="previewFile" style="max-width: 100%; margin: auto; display: block"></u-img>
+		</template>
+	</sh-modal>
+</template>
+
+<script>
+import UImg from './u-img'
+export default {
+	name: 'UList',
+	components: {
+		UImg
+	},
+	props: {
+		uploadList: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		type: {
+			type: String,
+			default: 'img' // file  上传图片还是文件
+		},
+		listType: {
+			type: String,
+			default: 'list' // list  附件列表展示类型
+		},
+		isFormData: Boolean,
+		disabled: Boolean,
+		preview: Boolean,
+		upStyles: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		upClass: {
+			type: [Array, Object],
+			default() {
+				return {}
+			}
+		}
+	},
+	emits: ['delete'],
+	data() {
+		return {
+			previewFile: null,
+			previewModal: false
+		}
+	},
+	methods: {
+		// 文件预览
+		handleFilePreviewView(obj) {
+			if (this.isFormData || this.type === 'file') {
+				this.previewFile = obj
+				this.previewModal = true
+			} else {
+				this.$ImagePreview.show({
+					previewList: [obj.url]
+				})
+			}
+		},
+		// 文件预览取消
+		handleFilePreviewCancel() {
+			this.previewModal = false
+		},
+		// 文件删除
+		handleFileRemove(data) {
+			this.$emit('delete', data)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss"></style>