sh-view 2.1.0 → 2.3.0

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

@@ -0,0 +1,182 @@
+<script>
+import { defineComponent, computed, getCurrentInstance } from 'vue'
+import dataHook from '../js/data-hook'
+import dataProps from '../js/data-hook'
+import Spreadsheet from 'x-data-spreadsheet'
+import ExcelJS from 'exceljs'
+export default defineComponent({
+	name: 'ShOfficeDocx',
+	props: dataProps,
+	emits: ['rendered', 'error'],
+	setup(props, { emit }) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+
+		let defaultOption = {
+			mode: 'read',
+			showToolbar: false
+		}
+
+		const excelOptions = computed(() => {
+			return Object.assign({}, defaultOption, props.options)
+		})
+
+		const domRender = async (data, container) => {
+			if (!data) {
+				container.innerHTML = ''
+				return Promise.resolve()
+			}
+			const wb = new ExcelJS.Workbook()
+			// 微软的 Excel ColorIndex 一个索引数字对应一个颜色
+			let workbook = await wb.xlsx.load(data)
+			let workbookData = []
+			workbook.eachSheet(sheet => {
+				// 构造x-data-spreadsheet 的 sheet 数据源结构
+				let sheetData = { name: sheet.name, styles: [], rows: {}, merges: [] }
+				// 收集合并单元格信息
+				let mergeAddressData = []
+				for (let mergeRange in sheet._merges) {
+					sheetData.merges.push(sheet._merges[mergeRange].shortRange)
+					let mergeAddress = {}
+					// 合并单元格起始地址
+					mergeAddress.startAddress = sheet._merges[mergeRange].tl
+					// 合并单元格终止地址
+					mergeAddress.endAddress = sheet._merges[mergeRange].br
+					// Y轴方向跨度
+					mergeAddress.YRange = sheet._merges[mergeRange].model.bottom - sheet._merges[mergeRange].model.top
+					// X轴方向跨度
+					mergeAddress.XRange = sheet._merges[mergeRange].model.right - sheet._merges[mergeRange].model.left
+					mergeAddressData.push(mergeAddress)
+				}
+				sheetData.cols = {}
+				for (let i = 0; i < sheet.columns.length; i++) {
+					sheetData.cols[i.toString()] = {}
+					if (sheet.columns[i].width) {
+						// 不知道为什么从 exceljs 读取的宽度显示到 x-data-spreadsheet 特别小, 这里乘以8
+						sheetData.cols[i.toString()].width = sheet.columns[i].width * 8
+					} else {
+						// 默认列宽
+						sheetData.cols[i.toString()].width = 100
+					}
+				}
+
+				// 遍历行
+				sheet.eachRow((row, rowIndex) => {
+					sheetData.rows[(rowIndex - 1).toString()] = { cells: {} }
+					//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
+						}
+						//解析单元格,包含样式
+						//*********************单元格存在背景色******************************
+						// 单元格存在背景色
+						let backGroundColor = null
+						if (cell.style.fill && cell.style.fill.fgColor && cell.style.fill.fgColor.argb) {
+							// 8位字符颜色先转rgb再转16进制颜色
+							backGroundColor = (val => {
+								val = val.trim().toLowerCase() //去掉前后空格
+								let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(val)
+								let rgb = `rgba(${parseInt(argb[2], 16)}, ${parseInt(argb[3], 16)}, ${parseInt(argb[4], 16)})`
+								let percent = (parseInt(argb[1], 16) / 255) * 100
+								return $vUtils.fade(rgb, percent)
+							})(cell.style.fill.fgColor.argb)
+						}
+
+						if (backGroundColor) {
+							cell.style.bgcolor = backGroundColor
+						}
+						//*************************************************************************** */
+
+						//*********************字体存在背景色******************************
+						// 字体颜色
+						let fontColor = null
+						if (cell.style.font && cell.style.font.color && cell.style.font.color.argb) {
+							// 8位字符颜色先转rgb再转16进制颜色
+							fontColor = (val => {
+								val = val.trim().toLowerCase() //去掉前后空格
+								let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(val)
+								let rgb = `rgba(${parseInt(argb[2], 16)}, ${parseInt(argb[3], 16)}, ${parseInt(argb[4], 16)})`
+								let percent = (parseInt(argb[1], 16) / 255) * 100
+								return $vUtils.fade(rgb, percent)
+							})(cell.style.font.color.argb)
+						}
+						if (fontColor) {
+							cell.style.color = fontColor
+						}
+
+						// exceljs 对齐的格式转成 x-date-spreedsheet 能识别的对齐格式
+						if (cell.style.alignment && cell.style.alignment.horizontal) {
+							cell.style.align = cell.style.alignment.horizontal
+							cell.style.valign = cell.style.alignment.vertical
+						}
+
+						//处理合并单元格
+						let mergeAddress = _.find(mergeAddressData, function (o) {
+							return o.startAddress === cell._address
+						})
+						if (mergeAddress) {
+							// 遍历的单元格属于合并单元格
+							if (cell.master.address !== mergeAddress.startAddress) {
+								// 不是合并单元格中的第一个单元格不需要计入数据源
+								return
+							}
+							// 说明是合并单元格区域的起始单元格
+							sheetData.rows[(rowIndex - 1).toString()].cells[(colNumber - 1).toString()] = { text: cellText, style: 0, merge: [mergeAddress.YRange, mergeAddress.XRange] }
+							sheetData.styles.push(cell.style)
+							//对应的style存放序号
+							sheetData.rows[(rowIndex - 1).toString()].cells[(colNumber - 1).toString()].style = sheetData.styles.length - 1
+						} else {
+							// 非合并单元格
+							sheetData.rows[(rowIndex - 1).toString()].cells[(colNumber - 1).toString()] = { text: cellText, style: 0 }
+							//解析单元格,包含样式
+							sheetData.styles.push(cell.style)
+							//对应的style存放序号
+							sheetData.rows[(rowIndex - 1).toString()].cells[(colNumber - 1).toString()].style = sheetData.styles.length - 1
+						}
+					})
+				})
+				workbookData.push(sheetData)
+			})
+			return new Spreadsheet(rootRef.value, excelOptions).loadData(workbookData)
+		}
+
+		const useData = dataHook(props, context, {
+			domRender
+		})
+
+		return {
+			...useData
+		}
+	}
+})
+</script>
+
+<template>
+	<div ref="rootRef" class="sh-office-docx"></div>
+</template>
+
+<style lang="less">
+@media screen and (max-width: 800px) {
+	.sh-office-docx {
+		.docx-wrapper {
+			padding: 10px;
+			> section.docx {
+				padding: 10px !important;
+				width: 100% !important;
+			}
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,73 @@
+<script>
+import { defineComponent, computed } from 'vue'
+import dataHook from '../js/data-hook'
+import dataProps from '../js/data-hook'
+import { renderAsync } from 'docx-preview'
+export default defineComponent({
+	name: 'ShOfficeDocx',
+	props: dataProps,
+	emits: ['rendered', 'error'],
+	setup(props, context) {
+		let defaultOption = {
+			inWrapper: true, //启用围绕文档内容呈现包装器
+			ignoreWidth: true, //禁用页面的渲染宽度
+			ignoreHeight: false, //禁用页面的渲染高度
+			ignoreFonts: false, //禁用字体渲染
+			breakPages: true, //在分页符上启用分页
+			ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
+			experimental: false, //启用实验功能（制表符停止计算）
+			trimXmlDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明
+			useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
+			useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
+			showChanges: false, //启用文档更改的实验渲染（插入/删除）
+			debug: false //启用额外的日志记录
+		}
+
+		const docxOptions = computed(() => {
+			return Object.assign({}, defaultOption, props.options)
+		})
+
+		const domRender = (data, container) => {
+			if (!data) {
+				container.innerHTML = ''
+				return Promise.resolve()
+			}
+			let blob
+			if (data instanceof Blob) {
+				blob = data
+			} else if (data instanceof Response) {
+				blob = data.blob()
+			} else if (data instanceof ArrayBuffer) {
+				blob = new Blob([data])
+			}
+			return renderAsync(blob, container, null, docxOptions.value)
+		}
+
+		const useData = dataHook(props, context, {
+			domRender
+		})
+
+		return {
+			...useData
+		}
+	}
+})
+</script>
+
+<template>
+	<div ref="rootRef" class="sh-office-docx"></div>
+</template>
+
+<style lang="less">
+@media screen and (max-width: 800px) {
+	.sh-office-docx {
+		.docx-wrapper {
+			padding: 10px;
+			> section.docx {
+				padding: 10px !important;
+				width: 100% !important;
+			}
+		}
+	}
+}
+</style>

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

@@ -1,85 +1,86 @@
-<template>
-	<div class="sh-preview">
-		<component :is="componentName" v-bind="componentProps" :style="componentStyles" @rendered="onRendered" @error="onError" />
-	</div>
-</template>
-
-<script>
-import * as ShWord from '@vue-office/docx'
-import '@vue-office/docx/lib/index.css'
-import * as ShExcel from '@vue-office/excel'
-import '@vue-office/excel/lib/index.css'
-import * as ShPdf from '@vue-office/pdf'
-export default {
-	name: 'ShPreview',
-	components: {
-		ShWord,
-		ShExcel,
-		ShPdf
-	},
-	props: {
-		type: {
-			type: String
-		},
-		base: {
-			type: String
-		},
-		url: {
-			type: String
-		},
-		width: {
-			type: String,
-			default: '100%'
-		},
-		height: {
-			type: String,
-			default: '600px'
-		}
-	},
-	emits: ['ready', 'error'],
-	computed: {
-		previewType() {
-			return (this.type && this.type.toLowerCase()) || (this.url && this.url.substr(this.url.lastIndexOf('.') + 1).toLowerCase())
-		},
-		componentName() {
-			if (['word', 'doc', 'docx'].includes(this.previewType)) {
-				return 'sh-word'
-			} else if (['excel', 'xlsx'].includes(this.previewType)) {
-				return 'sh-excel'
-			} else if (['pdf'].includes(this.previewType)) {
-				return 'sh-pdf'
-			}
-			return 'iframe'
-		},
-		componentProps() {
-			let srcPrefix = this.base || ''
-			let srcSuffix = this.componentName === 'iframe' ? '#scrollbars=0&toolbar=0&statusbar=0' : ''
-			return {
-				src: srcPrefix + this.url + srcSuffix,
-				frameborder: 0
-			}
-		},
-		componentStyles() {
-			return {
-				width: this.width,
-				height: this.height
-			}
-		}
-	},
-	methods: {
-		onRendered(data) {
-			this.$emit('ready', data)
-		},
-		onError(data) {
-			this.$emit('error', data)
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-preview {
-	position: relative;
-	overflow: auto;
-}
-</style>
+<template>
+	<div class="sh-preview">
+		<component :is="componentName" v-bind="componentProps" :style="componentStyles" @rendered="onRendered" @error="onError" />
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+import ShWord from './components/sh-word.vue'
+import ShExcel from './components/sh-excel.vue'
+export default defineComponent({
+	name: 'ShPreview',
+	components: {
+		ShWord,
+		ShExcel
+	},
+	props: {
+		type: {
+			type: String
+		},
+		base: {
+			type: String
+		},
+		url: {
+			type: String
+		},
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: '600px'
+		}
+	},
+	emits: ['ready', 'error'],
+	setup(props, context) {
+		const { emit, slots } = context
+		const previewType = computed(() => (props.type && props.type.toLowerCase()) || (props.url && props.url.substr(props.url.lastIndexOf('.') + 1).toLowerCase()))
+		const componentName = computed(() => {
+			if (['word', 'doc', 'docx'].includes(previewType.value)) {
+				return 'sh-word'
+			} else if (['excel', 'xlsx'].includes(previewType.value)) {
+				return 'sh-excel'
+			}
+			return 'iframe'
+		})
+		const componentProps = computed(() => {
+			let srcPrefix = props.base || ''
+			let srcSuffix = componentName.value === 'iframe' ? '#scrollbars=0&toolbar=0&statusbar=0' : ''
+			return {
+				src: srcPrefix + props.url + srcSuffix,
+				frameborder: 0
+			}
+		})
+		const componentStyles = computed(() => {
+			return {
+				width: props.width,
+				height: props.height
+			}
+		})
+
+		const onRendered = data => {
+			emit('ready', data)
+		}
+		const onError = data => {
+			emit('error', data)
+		}
+
+		return {
+			componentName,
+			componentProps,
+			componentStyles,
+			onRendered,
+			onError
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-preview {
+	position: relative;
+	overflow: auto;
+}
+</style>

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

@@ -0,0 +1,37 @@
+import { onMounted, ref, watch } from 'vue'
+
+export default function (props, context, state) {
+	const rootRef = ref(null)
+	const { emit } = context
+
+	const initData = async () => {
+		if (!props.src) return
+		let container = rootRef.value
+		try {
+			let fileRes = src
+			if (typeof src === 'string') {
+				fileRes = fetch(src, props.serverConfig)
+			}
+			await state.domRender(fileRes, container)
+			emit('rendered')
+		} catch (e) {
+			await state.domRender('', container)
+			emit('error', e)
+		}
+	}
+
+	onMounted(() => {
+		initData()
+	})
+
+	watch(
+		() => props.src,
+		() => {
+			initData()
+		}
+	)
+
+	return {
+		rootRef
+	}
+}

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

@@ -0,0 +1,11 @@
+export default {
+	src: [String, ArrayBuffer, Blob],
+	options: {
+		type: Object,
+		default: () => ({})
+	},
+	serverConfig: {
+		type: Object,
+		default: () => ({})
+	}
+}

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

@@ -8,7 +8,8 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, onActivated } from 'vue'
+export default defineComponent({
 	name: 'SystemTip',
 	props: {
 		name: {
@@ -16,21 +17,18 @@ export default {
 			default: ''
 		}
 	},
-	data() {
-		return {
-			nowdate: new Date()
-		}
-	},
-	computed: {
-		headerDate() {
-			let hours = this.nowdate.getHours()
-			let month = this.nowdate.getMonth() + 1
-			let day = this.nowdate.getDate()
-			let week = this.nowdate.getDay()
-			return { date: this.nowdate, hours, month, day, week }
-		},
-		headerWeek() {
-			let { week } = this.headerDate
+	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:
@@ -56,9 +54,9 @@ export default {
 					break
 			}
 			return tw
-		},
-		headerTitle() {
-			let { hours } = this.headerDate
+		})
+		const headerTitle = computed(() => {
+			let { hours } = headerDate.value
 			let title = ''
 			let desc = ''
 			switch (true) {
@@ -99,13 +97,19 @@ export default {
 					desc = '睡前请把窗户打开,让"幸福"进来,睡前请把"心情"打开,让"快乐"入驻,睡前请把"思想"放飞,让甜蜜入梦!今晚祝你好梦成真,幸福一生!晚安!'
 					break
 			}
-			return { title: `Hi! <span class="primary">${this.name}</span>  ${title}`, desc }
+			return { title: `Hi! <span class="primary">${props.name}</span>  ${title}`, desc }
+		})
+
+		onActivated(() => {
+			nowdate = new Date()
+		})
+
+		return {
+			headerWeek,
+			headerTitle
 		}
-	},
-	activated() {
-		this.nowdate = new Date()
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped></style>

package/packages/css/index.js

@@ -1,4 +1,4 @@
-import '../assets/css/theme.scss'
-import '../assets/css/loader.scss'
-import '../assets/css/main.scss'
-import '../assets/css/animated.scss'
+import './theme.scss'
+import './loader.scss'
+import './main.scss'
+import './animated.scss'

package/packages/directive/module/prevent-click.js

@@ -3,7 +3,7 @@ import { utils } from 'sh-tools'
 let preventClass = 'sh-prevent--disabled'
 
 export default {
-	inserted(el, binding) {
+	mounted(el, binding) {
 		el.addEventListener('click', () => {
 			if (!el.disabled) {
 				el.disabled = true