sh-view 2.0.8 → 2.2.0

package/packages/components/other-components/sh-menu-card/index.vue

@@ -2,7 +2,7 @@
 	<sh-row :gutter="10">
 		<template v-for="(menuitem, menuindex) in resetRenderList(list)" :key="menuindex">
 			<sh-col v-bind="colsConfig">
-				<sh-card :icon="menuitem.icon" size="small" :title="menuitem.meta.title" :icon-size="18" :color="getMenuColor(menuindex)" :padding="8" class="menuCard">
+				<sh-card :icon="menuitem.icon" size="small" :title="menuitem?.meta?.title" :icon-size="18" :color="getMenuColor(menuindex)" :padding="8" class="menuCard">
 					<div :ref="`cardBtnsWrap${menuindex}`" class="cardBtnsWrap">
 						<template v-for="cardBtn in menuitem.buttons" :key="cardBtn.value">
 							<template v-if="menuitem.children && menuitem.children.length > 0">
@@ -11,19 +11,18 @@
 									transfer
 									:title="cardBtn.name"
 									:width="poptipWidth"
+									:height="poptipHeight"
 									:placement="cardBtn.placement"
-									@on-popper-show="handleFocusBtn(cardBtn, menuindex)"
-									@on-popper-hide="handleBlurBtn(cardBtn, menuindex)">
+									@popper-show="handleFocusBtn(cardBtn, menuindex)"
+									@popper-hide="handleBlurBtn(cardBtn, menuindex)">
 									<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
 										<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
 										<span>{{ cardBtn.name }}</span>
 										<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
 									</div>
 									<template #content>
-										<div class="cardPoptipContent">
-											<menuBox v-if="cardActive.startsWith('menus')" :menu="menuitem" first></menuBox>
-											<sh-empty v-else></sh-empty>
-										</div>
+										<menuBox v-if="cardActive.startsWith('menus')" :menu="menuitem" first></menuBox>
+										<sh-empty v-else></sh-empty>
 									</template>
 								</sh-poptip>
 							</template>
@@ -43,8 +42,9 @@
 </template>
 
 <script>
+import { defineComponent, computed, provide, getCurrentInstance, ref, onMounted } from 'vue'
 import menuBox from './menu-box.vue'
-export default {
+export default defineComponent({
 	name: 'MenuCard',
 	components: {
 		menuBox
@@ -83,32 +83,34 @@ export default {
 					{ name: '已办事项', value: 'untodo', icon: 'ios-calendar', placement: 'bottom-end' }
 				]
 			}
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelFormat: {
+			type: Function
 		}
 	},
-	data() {
-		return {
-			poptipWidth: 320,
-			cardActive: ''
-		}
-	},
-	computed: {
-		colsConfig() {
-			return {
-				xs: { span: 24 },
-				sm: { span: 24 },
-				md: { span: 12 },
-				lg: { span: 8 },
-				xl: { span: 8 },
-				xxl: { span: 6 }
-			}
-		}
-	},
-	methods: {
+	emits: ['select'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const poptipWidth = 320
+		const poptipHeight = 300
+		const cardActive = ref('')
+
+		const colsConfig = computed(() => {
+			return { xs: { span: 24 }, sm: { span: 24 }, md: { span: 12 }, lg: { span: 8 }, xl: { span: 8 }, xxl: { span: 6 } }
+		})
+
 		// 重新生成卡片列表
-		resetRenderList(list) {
-			return this.$vUtils.mapTree(list, item => {
+		const resetRenderList = list => {
+			return $vUtils.mapTree(list, item => {
 				return {
-					buttons: this.cardBtns.map(btn => {
+					buttons: props.cardBtns.map(btn => {
 						return {
 							visible: false,
 							placement: 'bottom-start',
@@ -118,62 +120,82 @@ export default {
 					...item
 				}
 			})
-		},
+		}
 		// 动态角标配置
-		btnCornerConfig(cardBtn, menuitem, menuindex) {
+		const btnCornerConfig = (cardBtn, menuitem, menuindex) => {
 			return {
-				title: this.getBudgeNum(menuitem, cardBtn),
+				title: getBudgeNum(menuitem, cardBtn),
 				dark: true,
 				width: '30',
 				height: '30',
-				color: this.getMenuColor(menuindex)
+				color: getMenuColor(menuindex)
 			}
-		},
-		getMenuColor(menuindex, active) {
-			return this.getCardStyle(menuindex, true)[active ? 'color' : 'backgroundColor']
-		},
-		getCardStyle(index, active) {
-			let themeLength = this.menuColors.length
-			let backgroundColor = this.menuColors[index % themeLength][active ? 'active' : 'default']
+		}
+		const getMenuColor = (menuindex, active) => {
+			return getCardStyle(menuindex, true)[active ? 'color' : 'backgroundColor']
+		}
+		const getCardStyle = (index, active) => {
+			let themeLength = props.menuColors.length
+			let backgroundColor = props.menuColors[index % themeLength][active ? 'active' : 'default']
 			let color = active ? '#fff' : ''
 			return { backgroundColor, color }
-		},
-		getBudgeNum(menu, card) {
+		}
+		const getBudgeNum = (menu, card) => {
 			switch (card.value) {
 				case 'menus':
-					return this.$vUtils.toTreeArray(menu.children || []).length
+					return $vUtils.toTreeArray(menu.children || []).length
 				default:
 					return ''
 			}
-		},
-		handleCardBtn($event, cardBtn, menu, menuIndex) {
+		}
+		const handleCardBtn = ($event, cardBtn, menu, menuIndex) => {
 			if (!menu.children || menu.children.length < 1) {
 				cardBtn.visible = false
-				return this.routerTo(menu)
+				onMenuSelect(menu)
+				return
 			}
 			let windowWidth = window.document.body.clientWidth
 			let selfOffsetRight = windowWidth - $event.pageX
-			cardBtn.placement = selfOffsetRight < this.poptipWidth ? 'bottom-end' : 'bottom-start'
+			cardBtn.placement = selfOffsetRight < poptipWidth ? 'bottom-end' : 'bottom-start'
 			cardBtn.visible = true
-		},
-		handleFocusBtn(card, index) {
-			this.cardActive = card.value + index
-		},
-		handleBlurBtn(card, index) {
-			if (this.cardActive === card.value + index) this.cardActive = ''
+		}
+		const handleFocusBtn = (card, index) => {
+			cardActive.value = card.value + index
+		}
+		const handleBlurBtn = (card, index) => {
+			if (cardActive.value === card.value + index) cardActive.value = ''
+		}
+		const onMenuSelect = menu => {
+			emit('select', menu)
+		}
+
+		provide('MenuCardInstance', {
+			...props,
+			onMenuSelect
+		})
+
+		return {
+			cardActive,
+			poptipWidth,
+			poptipHeight,
+			colsConfig,
+			resetRenderList,
+			btnCornerConfig,
+			getMenuColor,
+			getCardStyle,
+			getBudgeNum,
+			handleFocusBtn,
+			handleBlurBtn,
+			handleCardBtn
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss">
 .menuCard {
 	margin-bottom: 10px;
 }
-.cardPoptipContent {
-	max-height: 400px;
-	overflow: auto;
-}
 .cardBtnsWrap {
 	position: relative;
 	display: flex;

package/packages/components/other-components/sh-menu-card/menu-box.vue

@@ -1,68 +1,87 @@
-<template>
-	<div class="menuBoxWrap" :class="{ first }">
-		<template v-if="menus.length > 0">
-			<div v-if="first" class="menuBoxFilter">
-				<vxe-input v-model="filterText" size="mini" class="w-100" clearable placeholder="请输入关键词" prefix-icon="vxe-icon-search"></vxe-input>
-			</div>
-			<template v-for="(item, itemindex) in menuBoxList" :key="itemindex">
-				<a class="menuBoxTitle" @click="routerTo(item)">{{ formatTitle(item) }}</a>
-				<menuBox v-if="hasChildren(item)" :menu="item"></menuBox>
-			</template>
-		</template>
-		<sh-empty v-else></sh-empty>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'MenuBox',
-	props: {
-		menu: {
-			type: [Object, Array],
-			default() {
-				return {}
-			}
-		},
-		first: {
-			type: Boolean
-		}
-	},
-	data() {
-		return {
-			filterText: '',
-			filterData: null,
-			filterChangeDebounce: this.$vUtils.debounce(this.handleMenuFilter, 500)
-		}
-	},
-	computed: {
-		menus() {
-			return Array.isArray(this.menu) ? this.menu : this.menu?.children || []
-		},
-		menuBoxList() {
-			return this.filterData || this.menus
-		}
-	},
-	watch: {
-		filterText: {
-			handler(newvalue, oldValue) {
-				this.filterChangeDebounce(newvalue)
-			}
-		}
-	},
-	methods: {
-		// 全局搜索过滤事件
-		handleMenuFilter(text) {
-			const that = this
-			let filterText = that.$vUtils.toValueString(text).trim().toLowerCase()
-			let filterData = null
-			if (filterText) {
-				filterData = that.$vUtils.searchTree(that.menus, menu => this.formatTitle(menu).indexOf(filterText) > -1)
-			}
-			if (that.filterData === null && !filterText) {
-				return
-			}
-			that.filterData = filterData
-		}
-	}
-}
-</script>
+<template>
+	<div class="menuBoxWrap" :class="{ first }">
+		<template v-if="menusList.length > 0">
+			<div v-if="first" class="menuBoxFilter">
+				<vxe-input v-model="filterText" size="mini" class="w-100" clearable placeholder="请输入关键词" prefix-icon="vxe-icon-search"></vxe-input>
+			</div>
+			<template v-for="(item, itemindex) in menuBoxList" :key="itemindex">
+				<a class="menuBoxTitle" @click="handleMenuClick(item)">{{ getItemTitle(item) }}</a>
+				<menuBox v-if="hasChildren(item)" :menu="item"></menuBox>
+			</template>
+		</template>
+		<sh-empty v-else></sh-empty>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, watch, ref, inject } from 'vue'
+export default defineComponent({
+	name: 'MenuBox',
+	props: {
+		menu: {
+			type: [Object, Array],
+			default() {
+				return {}
+			}
+		},
+		first: {
+			type: Boolean
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const MenuCardInstance = inject('MenuCardInstance')
+
+		const filterText = ref('')
+		const filterData = ref(null)
+
+		const menusList = computed(() => {
+			return Array.isArray(props.menu) ? props.menu : props.menu?.children || []
+		})
+		const menuBoxList = computed(() => {
+			return filterData.value || menusList.value
+		})
+
+		const hasChildren = menu => {
+			return menu && menu.children && Array.isArray(menu.children) && menu.children.length > 0
+		}
+		const getItemTitle = menu => {
+			const { labelField, labelFormat } = MenuCardInstance
+			return labelFormat ? labelFormat(menu) : $vUtils.get(menu, labelField) || ''
+		}
+		const handleMenuClick = item => {
+			MenuCardInstance.onMenuSelect(item)
+		}
+		// 全局搜索过滤事件
+		const handleMenuFilter = text => {
+			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
+			let searchData = null
+			if (filterText) {
+				searchData = $vUtils.searchTree(menusList.value, menu => getItemTitle(menu).indexOf(filterText) > -1)
+			}
+			if (filterData.value === null && !filterText) return
+			filterData.value = searchData
+		}
+
+		const filterChangeDebounce = $vUtils.debounce(handleMenuFilter, 500)
+
+		watch(
+			() => filterText.value,
+			nv => {
+				filterChangeDebounce(nv)
+			}
+		)
+
+		return {
+			menusList,
+			filterText,
+			menuBoxList,
+			getItemTitle,
+			hasChildren,
+			handleMenuClick
+		}
+	}
+})
+</script>

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>