sh-view 2.8.1 → 2.8.3

package/packages/other/sh-preview/components/sh-excel.vue

@@ -1,163 +1,163 @@
-<script>
-import { defineComponent, computed, getCurrentInstance, ref } from 'vue'
-import dataHook from '../js/data-hook'
-import dataProps from '../js/data-props'
-import ExcelJS from 'exceljs'
-import ExcelTable from '@wolf-table/table'
-import '@wolf-table/table/dist/table.min.css'
-export default defineComponent({
-	name: 'ShExcel',
-	props: dataProps,
-	emits: ['rendered', 'error'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-
-		const wordBooks = ref([])
-
-		let defaultOption = {
-			scrollable: true,
-			resizable: true,
-			selectable: true,
-			editable: false,
-			copyable: true
-		}
-		const excelOptions = computed(() => {
-			return Object.assign({}, defaultOption, props.options)
-		})
-		const tabConfig = computed(() => {
-			return {
-				modelValue: wordBooks.value.length ? wordBooks.value[0].name : '',
-				options: wordBooks.value,
-				labelKey: 'name',
-				labelField: 'name',
-				placement: 'bottom',
-				type: 'card',
-				animated: false
-			}
-		})
-
-		const getWorkBookByBuffer = async buffer => {
-			const wb = new ExcelJS.Workbook()
-			let workbook = await wb.xlsx.load(buffer)
-			let workbookData = []
-			workbook.eachSheet(sheet => {
-				//  构造数据源结构
-				let sheetData = { name: sheet.name, styles: [], cells: [], merges: [] }
-				for (let mergeRange in sheet._merges) {
-					sheetData.merges.push(sheet._merges[mergeRange].shortRange)
-				}
-				//  遍历行
-				sheet.eachRow((row, rowNumber) => {
-					let cellResult = {}
-					//  includeEmpty = false 不包含空白单元格
-					row.eachCell({ includeEmpty: true }, function (cell, colNumber) {
-						let cellText = ''
-						if (cell.value && cell.value.result) {
-							// Excel 单元格有公式
-							cellText = cell.value.result
-						} else if (cell.value && cell.value.richText) {
-							// Excel 单元格是多行文本
-							for (let text in cell.value.richText) {
-								// 多行文本做累加
-								cellText += cell.value.richText[text].text
-							}
-						} else {
-							// Excel 单元格无公式
-							cellText = cell.value
-						}
-						//  解析单元格,包含样式
-						//  单元格存在背景色
-						if (cell.style?.fill?.fgColor?.argb) {
-							let cellBgcolor = cell.style.fill.fgColor.argb.trim().toLowerCase() //去掉前后空格
-							let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cellBgcolor)
-							let rgb = `rgba(${parseInt(argb[2], 16)}, ${parseInt(argb[3], 16)}, ${parseInt(argb[4], 16)})`
-							let percent = (parseInt(argb[1], 16) / 255) * 100
-							cell.style.bgcolor = $vUtils.fade(rgb, percent)
-						}
-						//  字体颜色
-						if (cell.style?.font?.color?.argb) {
-							let cellcolor = cell.style.font.color.argb.trim().toLowerCase() //去掉前后空格
-							let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cellcolor)
-							let rgb = `rgba(${parseInt(argb[2], 16)}, ${parseInt(argb[3], 16)}, ${parseInt(argb[4], 16)})`
-							let percent = (parseInt(argb[1], 16) / 255) * 100
-							cell.style.color = $vUtils.fade(rgb, percent)
-						}
-						//  exceljs 对齐的格式转成能识别的对齐格式
-						if (cell.style?.alignment?.horizontal) {
-							cell.style.align = cell.style.alignment.horizontal
-							cell.style.valign = cell.style.alignment.vertical
-						}
-						//  单元格
-						cellResult = { value: cellText, style: sheetData.styles.length }
-						//  解析单元格,包含样式
-						sheetData.styles.push(cell.style)
-						sheetData.cells.push([rowNumber - 1, colNumber - 1, cellResult])
-					})
-				})
-				workbookData.push(sheetData)
-			})
-			return workbookData
-		}
-
-		const domRender = async (data, container) => {
-			if (!data || typeof data === 'string') {
-				container.innerHTML = data
-				return true
-			}
-			const { width, height } = container.getBoundingClientRect()
-			const buffer = await data.arrayBuffer()
-			const workData = await getWorkBookByBuffer(buffer)
-			wordBooks.value = workData
-			let tables = []
-			setTimeout(() => {
-				workData.forEach((sheet, sheetIndex) => {
-					let refName = `sheet${sheet.name}Ref`
-					sheet.workTable = ExcelTable.create(
-						proxy.$refs[refName][0],
-						() => width,
-						() => (height ? height - 32 : 300),
-						excelOptions.value
-					)
-					sheet.workTable.data(sheet).render()
-				})
-			})
-			return tables
-		}
-
-		const useData = dataHook(props, context, proxy, {
-			domRender
-		})
-
-		return {
-			...useData,
-			tabConfig
-		}
-	}
-})
-</script>
-
-<template>
-	<div ref="rootRef" class="sh-office-excel">
-		<sh-tabs v-bind="tabConfig">
-			<template #tabContent="tabs">
-				<template v-for="(tab, tabIndex) in tabs" :key="tabIndex">
-					<div style="position: relative; width: 100%">
-						<div :ref="`sheet${tab.name}Ref`"></div>
-					</div>
-				</template>
-			</template>
-		</sh-tabs>
-	</div>
-</template>
-
-<style lang="scss">
-.sh-office-excel {
-	position: relative;
-	.wolf-table-scrollbar {
-		&.vertical {
-			opacity: 1 !important;
-		}
-	}
-}
-</style>
+<script>
+import { defineComponent, computed, getCurrentInstance, ref } from 'vue'
+import dataHook from '../js/data-hook'
+import dataProps from '../js/data-props'
+import ExcelJS from 'exceljs'
+import ExcelTable from '@wolf-table/table'
+import '@wolf-table/table/dist/table.min.css'
+export default defineComponent({
+	name: 'ShExcel',
+	props: dataProps,
+	emits: ['rendered', 'error'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+
+		const wordBooks = ref([])
+
+		let defaultOption = {
+			scrollable: true,
+			resizable: true,
+			selectable: true,
+			editable: false,
+			copyable: true
+		}
+		const excelOptions = computed(() => {
+			return Object.assign({}, defaultOption, props.options)
+		})
+		const tabConfig = computed(() => {
+			return {
+				modelValue: wordBooks.value.length ? wordBooks.value[0].name : '',
+				options: wordBooks.value,
+				labelKey: 'name',
+				labelField: 'name',
+				placement: 'bottom',
+				type: 'card',
+				animated: false
+			}
+		})
+
+		const getWorkBookByBuffer = async buffer => {
+			const wb = new ExcelJS.Workbook()
+			let workbook = await wb.xlsx.load(buffer)
+			let workbookData = []
+			workbook.eachSheet(sheet => {
+				//  构造数据源结构
+				let sheetData = { name: sheet.name, styles: [], cells: [], merges: [] }
+				for (let mergeRange in sheet._merges) {
+					sheetData.merges.push(sheet._merges[mergeRange].shortRange)
+				}
+				//  遍历行
+				sheet.eachRow((row, rowNumber) => {
+					let cellResult = {}
+					//  includeEmpty = false 不包含空白单元格
+					row.eachCell({ includeEmpty: true }, function (cell, colNumber) {
+						let cellText = ''
+						if (cell.value && cell.value.result) {
+							// Excel 单元格有公式
+							cellText = cell.value.result
+						} else if (cell.value && cell.value.richText) {
+							// Excel 单元格是多行文本
+							for (let text in cell.value.richText) {
+								// 多行文本做累加
+								cellText += cell.value.richText[text].text
+							}
+						} else {
+							// Excel 单元格无公式
+							cellText = cell.value
+						}
+						//  解析单元格,包含样式
+						//  单元格存在背景色
+						if (cell.style?.fill?.fgColor?.argb) {
+							let cellBgcolor = cell.style.fill.fgColor.argb.trim().toLowerCase() //去掉前后空格
+							let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cellBgcolor)
+							let rgb = `rgba(${parseInt(argb[2], 16)}, ${parseInt(argb[3], 16)}, ${parseInt(argb[4], 16)})`
+							let percent = (parseInt(argb[1], 16) / 255) * 100
+							cell.style.bgcolor = $vUtils.fade(rgb, percent)
+						}
+						//  字体颜色
+						if (cell.style?.font?.color?.argb) {
+							let cellcolor = cell.style.font.color.argb.trim().toLowerCase() //去掉前后空格
+							let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cellcolor)
+							let rgb = `rgba(${parseInt(argb[2], 16)}, ${parseInt(argb[3], 16)}, ${parseInt(argb[4], 16)})`
+							let percent = (parseInt(argb[1], 16) / 255) * 100
+							cell.style.color = $vUtils.fade(rgb, percent)
+						}
+						//  exceljs 对齐的格式转成能识别的对齐格式
+						if (cell.style?.alignment?.horizontal) {
+							cell.style.align = cell.style.alignment.horizontal
+							cell.style.valign = cell.style.alignment.vertical
+						}
+						//  单元格
+						cellResult = { value: cellText, style: sheetData.styles.length }
+						//  解析单元格,包含样式
+						sheetData.styles.push(cell.style)
+						sheetData.cells.push([rowNumber - 1, colNumber - 1, cellResult])
+					})
+				})
+				workbookData.push(sheetData)
+			})
+			return workbookData
+		}
+
+		const domRender = async (data, container) => {
+			if (!data || typeof data === 'string') {
+				container.innerHTML = data
+				return true
+			}
+			const { width, height } = container.getBoundingClientRect()
+			const buffer = await data.arrayBuffer()
+			const workData = await getWorkBookByBuffer(buffer)
+			wordBooks.value = workData
+			let tables = []
+			setTimeout(() => {
+				workData.forEach((sheet, sheetIndex) => {
+					let refName = `sheet${sheet.name}Ref`
+					sheet.workTable = ExcelTable.create(
+						proxy.$refs[refName][0],
+						() => width,
+						() => (height ? height - 32 : 300),
+						excelOptions.value
+					)
+					sheet.workTable.data(sheet).render()
+				})
+			})
+			return tables
+		}
+
+		const useData = dataHook(props, context, proxy, {
+			domRender
+		})
+
+		return {
+			...useData,
+			tabConfig
+		}
+	}
+})
+</script>
+
+<template>
+	<div ref="rootRef" class="sh-office-excel">
+		<sh-tabs v-bind="tabConfig">
+			<template #tabContent="tabs">
+				<template v-for="(tab, tabIndex) in tabs" :key="tabIndex">
+					<div style="position: relative; width: 100%">
+						<div :ref="`sheet${tab.name}Ref`"></div>
+					</div>
+				</template>
+			</template>
+		</sh-tabs>
+	</div>
+</template>
+
+<style lang="scss">
+.sh-office-excel {
+	position: relative;
+	.wolf-table-scrollbar {
+		&.vertical {
+			opacity: 1 !important;
+		}
+	}
+}
+</style>

package/packages/other/sh-preview/js/data-hook.js

@@ -1,41 +1,41 @@
-import { onMounted, ref, watch } from 'vue'
-
-export default function (props, context, proxy, state) {
-	const rootRef = ref(null)
-	const { $vUtils, $http } = proxy
-	const { emit } = context
-
-	const initData = async () => {
-		if (!props.src) return
-		let container = rootRef.value
-		try {
-			let fileRes = props.src
-			if (typeof props.src === 'string') {
-				fileRes = await fetch(props.src, props.serverConfig)
-				if (fileRes && fileRes.status !== 200) {
-					throw new Error(fileRes)
-				}
-			}
-			await state.domRender(fileRes, container)
-			emit('rendered')
-		} catch (e) {
-			await state.domRender(e.message, container)
-			emit('error', e)
-		}
-	}
-
-	onMounted(() => {
-		initData()
-	})
-
-	watch(
-		() => props.src,
-		() => {
-			initData()
-		}
-	)
-
-	return {
-		rootRef
-	}
-}
+import { onMounted, ref, watch } from 'vue'
+
+export default function (props, context, proxy, state) {
+	const rootRef = ref(null)
+	const { $vUtils, $http } = proxy
+	const { emit } = context
+
+	const initData = async () => {
+		if (!props.src) return
+		let container = rootRef.value
+		try {
+			let fileRes = props.src
+			if (typeof props.src === 'string') {
+				fileRes = await fetch(props.src, props.serverConfig)
+				if (fileRes && fileRes.status !== 200) {
+					throw new Error(fileRes)
+				}
+			}
+			await state.domRender(fileRes, container)
+			emit('rendered')
+		} catch (e) {
+			await state.domRender(e.message, container)
+			emit('error', e)
+		}
+	}
+
+	onMounted(() => {
+		initData()
+	})
+
+	watch(
+		() => props.src,
+		() => {
+			initData()
+		}
+	)
+
+	return {
+		rootRef
+	}
+}

package/packages/other/sh-preview/js/data-props.js

@@ -1,15 +1,15 @@
-export default {
-	src: [String, ArrayBuffer, Blob],
-	options: {
-		type: Object,
-		default() {
-			return {}
-		}
-	},
-	serverConfig: {
-		type: Object,
-		default() {
-			return {}
-		}
-	}
-}
+export default {
+	src: [String, ArrayBuffer, Blob],
+	options: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	serverConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	}
+}

package/packages/other/sh-system-tip/index.vue

@@ -1,115 +1,115 @@
-<template>
-	<sh-header size="large">
-		<template #title>
-			<div v-html="headerTitle.title"></div>
-		</template>
-		<div>{{ headerTitle.desc }}</div>
-	</sh-header>
-</template>
-
-<script>
-import { defineComponent, computed, onActivated } from 'vue'
-export default defineComponent({
-	name: 'SystemTip',
-	props: {
-		name: {
-			type: String,
-			default: ''
-		}
-	},
-	setup(props, context) {
-		let nowdate = new Date()
-
-		const headerDate = computed(() => {
-			let hours = nowdate.getHours()
-			let month = nowdate.getMonth() + 1
-			let day = nowdate.getDate()
-			let week = nowdate.getDay()
-			return { date: nowdate, hours, month, day, week }
-		})
-		const headerWeek = computed(() => {
-			let { week } = headerDate.value
-			let tw = ''
-			switch (week) {
-				case 0:
-					tw = '星期天'
-					break
-				case 1:
-					tw = '星期一'
-					break
-				case 2:
-					tw = '星期二'
-					break
-				case 3:
-					tw = '星期三'
-					break
-				case 4:
-					tw = '星期四'
-					break
-				case 5:
-					tw = '星期五'
-					break
-				case 6:
-					tw = '星期六'
-					break
-			}
-			return tw
-		})
-		const headerTitle = computed(() => {
-			let { hours } = headerDate.value
-			let title = ''
-			let desc = ''
-			switch (true) {
-				case hours === 0 || (hours >= 23 && hours <= 24):
-					title = '午夜啦,早点休息喔'
-					desc = '思念不因劳累而改变,问候不因疲惫而变懒,祝福不因休息而变缓,关怀随星星眨眼,牵挂在深夜依然,轻轻道声:祝你晚安!'
-					break
-				case hours >= 1 && hours <= 4:
-					title = '凌晨啦,注意身体喔'
-					desc = '时间不早啦,记得早点休息,保证睡眠质量!'
-					break
-				case hours >= 5 && hours <= 6:
-					title = '清晨啦,准备迎接新的一天吧'
-					desc = '睁开眼,缓一缓,快起床,伸懒腰;笑一笑,美好的一天又开始了.早安,祝你今天好心情,工作顺利,生活甜美!'
-					break
-				case hours >= 7 && hours <= 8:
-					title = '早上好,记得吃早餐喔'
-					desc = '一日之计在于晨,愿我这阳光初露时的小小问候能将快乐带给你,愿你用快乐开启,用微笑结束这美好的一天.'
-					break
-				case hours >= 9 && hours <= 10:
-					title = '上午好,时刻保持好心情呀'
-					desc = '上午好,一束阳光照在身,祝你天天都开心,财神家中去,梦想变成真,今天中大奖,明天去上任.'
-					break
-				case hours >= 11 && hours <= 12:
-					title = '中午好,午餐时间到啦'
-					desc = '中午好,到了吃午餐的时间了,吃完午餐记得午睡一小会,保证下午可以有良好的精神状态.'
-					break
-				case hours >= 13 && hours <= 16:
-					title = '下午好,别太辛苦了'
-					desc = '送各位一杯下午茶:已祝福为叶,叮咛做花,热情为水,包容当杯,喝出你一天好心情和一生的幸福,下午愉快!'
-					break
-				case hours >= 17 && hours <= 18:
-					title = '傍晚啦,看看窗外的风景吧'
-					desc = '工作是做不完的,身体可是累的垮的!看看外面的天空吧!'
-					break
-				case hours >= 19 && hours <= 22:
-					title = '晚上好,准备好进入梦乡啦'
-					desc = '睡前请把窗户打开,让"幸福"进来,睡前请把"心情"打开,让"快乐"入驻,睡前请把"思想"放飞,让甜蜜入梦!今晚祝你好梦成真,幸福一生!晚安!'
-					break
-			}
-			return { title: `Hi! <span class="primary">${props.name}</span>  ${title}`, desc }
-		})
-
-		onActivated(() => {
-			nowdate = new Date()
-		})
-
-		return {
-			headerWeek,
-			headerTitle
-		}
-	}
-})
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+	<sh-header size="large">
+		<template #title>
+			<div v-html="headerTitle.title"></div>
+		</template>
+		<div>{{ headerTitle.desc }}</div>
+	</sh-header>
+</template>
+
+<script>
+import { defineComponent, computed, onActivated } from 'vue'
+export default defineComponent({
+	name: 'SystemTip',
+	props: {
+		name: {
+			type: String,
+			default: ''
+		}
+	},
+	setup(props, context) {
+		let nowdate = new Date()
+
+		const headerDate = computed(() => {
+			let hours = nowdate.getHours()
+			let month = nowdate.getMonth() + 1
+			let day = nowdate.getDate()
+			let week = nowdate.getDay()
+			return { date: nowdate, hours, month, day, week }
+		})
+		const headerWeek = computed(() => {
+			let { week } = headerDate.value
+			let tw = ''
+			switch (week) {
+				case 0:
+					tw = '星期天'
+					break
+				case 1:
+					tw = '星期一'
+					break
+				case 2:
+					tw = '星期二'
+					break
+				case 3:
+					tw = '星期三'
+					break
+				case 4:
+					tw = '星期四'
+					break
+				case 5:
+					tw = '星期五'
+					break
+				case 6:
+					tw = '星期六'
+					break
+			}
+			return tw
+		})
+		const headerTitle = computed(() => {
+			let { hours } = headerDate.value
+			let title = ''
+			let desc = ''
+			switch (true) {
+				case hours === 0 || (hours >= 23 && hours <= 24):
+					title = '午夜啦,早点休息喔'
+					desc = '思念不因劳累而改变,问候不因疲惫而变懒,祝福不因休息而变缓,关怀随星星眨眼,牵挂在深夜依然,轻轻道声:祝你晚安!'
+					break
+				case hours >= 1 && hours <= 4:
+					title = '凌晨啦,注意身体喔'
+					desc = '时间不早啦,记得早点休息,保证睡眠质量!'
+					break
+				case hours >= 5 && hours <= 6:
+					title = '清晨啦,准备迎接新的一天吧'
+					desc = '睁开眼,缓一缓,快起床,伸懒腰;笑一笑,美好的一天又开始了.早安,祝你今天好心情,工作顺利,生活甜美!'
+					break
+				case hours >= 7 && hours <= 8:
+					title = '早上好,记得吃早餐喔'
+					desc = '一日之计在于晨,愿我这阳光初露时的小小问候能将快乐带给你,愿你用快乐开启,用微笑结束这美好的一天.'
+					break
+				case hours >= 9 && hours <= 10:
+					title = '上午好,时刻保持好心情呀'
+					desc = '上午好,一束阳光照在身,祝你天天都开心,财神家中去,梦想变成真,今天中大奖,明天去上任.'
+					break
+				case hours >= 11 && hours <= 12:
+					title = '中午好,午餐时间到啦'
+					desc = '中午好,到了吃午餐的时间了,吃完午餐记得午睡一小会,保证下午可以有良好的精神状态.'
+					break
+				case hours >= 13 && hours <= 16:
+					title = '下午好,别太辛苦了'
+					desc = '送各位一杯下午茶:已祝福为叶,叮咛做花,热情为水,包容当杯,喝出你一天好心情和一生的幸福,下午愉快!'
+					break
+				case hours >= 17 && hours <= 18:
+					title = '傍晚啦,看看窗外的风景吧'
+					desc = '工作是做不完的,身体可是累的垮的!看看外面的天空吧!'
+					break
+				case hours >= 19 && hours <= 22:
+					title = '晚上好,准备好进入梦乡啦'
+					desc = '睡前请把窗户打开,让"幸福"进来,睡前请把"心情"打开,让"快乐"入驻,睡前请把"思想"放飞,让甜蜜入梦!今晚祝你好梦成真,幸福一生!晚安!'
+					break
+			}
+			return { title: `Hi! <span class="primary">${props.name}</span>  ${title}`, desc }
+		})
+
+		onActivated(() => {
+			nowdate = new Date()
+		})
+
+		return {
+			headerWeek,
+			headerTitle
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped></style>