sh-view 2.7.7 → 2.7.9

package/packages/{components/other-components → other}/sh-menu/index.vue

@@ -41,6 +41,9 @@ export default defineComponent({
 		collapsed: {
 			type: Boolean
 		},
+		defaultIcon: {
+			type: Boolean
+		},
 		options: {
 			type: Array,
 			default() {

package/packages/{components/other-components → other}/sh-menu/menu-item-content.vue

@@ -31,9 +31,9 @@ export default defineComponent({
 		const itemRef = ref()
 
 		const defaultIcon = computed(() => {
-			if (!props.menuLevel || props.menuLevel < 1) return 'md-folder'
-			else if (props.menuLevel === 1) return 'md-bookmark'
-			else return ''
+			if (MenuInstance.props.defaultIcon && (!props.menuLevel || props.menuLevel < 1)) return 'md-folder'
+			else if (MenuInstance.props.defaultIcon && props.menuLevel === 1) return 'md-bookmark'
+			return ''
 		})
 		const iconType = computed(() => {
 			return props.menuItem.meta?.icon || props.menuItem.icon || defaultIcon.value

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

@@ -0,0 +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>

package/packages/{components/other-components → other}/sh-preview/index.vue

@@ -1,80 +1,92 @@
-<template>
-	<div class="sh-preview">
-		<component :is="componentName" v-bind="componentProps" :style="componentStyles" @rendered="onRendered" @error="onError" />
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, defineAsyncComponent } from 'vue'
-export default defineComponent({
-	name: 'ShPreview',
-	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 defineAsyncComponent(() => import('./components/sh-word.vue'))
-			} else if (['excel', 'xlsx'].includes(previewType.value)) {
-				// return defineAsyncComponent(() => import('./components/sh-excel.vue'))
-			}
-			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>
+<template>
+	<div class="sh-preview">
+		<component :is="componentName" v-bind="componentProps" :style="componentStyles" @rendered="onRendered" @error="onError" />
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, defineAsyncComponent } from 'vue'
+export default defineComponent({
+	name: 'ShPreview',
+	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(() => {
+			if (props.type) {
+				return props.type.toLowerCase()
+			} else if (props.url) {
+				return props.url.substr(props.url.lastIndexOf('.') + 1).toLowerCase()
+			}
+			return ''
+		})
+		const componentName = computed(() => {
+			if (!props.url || !previewType.value) {
+				return 'div'
+			} else if (['word', 'doc', 'docx'].includes(previewType.value)) {
+				return defineAsyncComponent(() => import('./components/sh-word.vue'))
+			} else if (['excel', 'xlsx'].includes(previewType.value)) {
+				return defineAsyncComponent(() => import('./components/sh-excel.vue'))
+			}
+			return 'iframe'
+		})
+		const componentProps = computed(() => {
+			let srcPrefix = props.base || ''
+			let srcProps = {
+				src: srcPrefix + props.url,
+				frameborder: 0
+			}
+			if (componentName.value === 'iframe') {
+				srcProps.src += '#scrollbars=0&toolbar=0&statusbar=0'
+			}
+			return srcProps
+		})
+		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/vxeTable/css/index.scss

@@ -231,7 +231,7 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
     }
     &.form-render {
         display: inline-flex;
-        align-items: center;
+        align-items: stretch;
         width: 100%;
         vertical-align: middle;
         .prefix, .suffix{
@@ -259,7 +259,6 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
         min-width: 30px;
         cursor: pointer;
         user-select: none;
-        font-size: 20px;
         border: 1px solid var(--vxe-input-border-color);
         border-radius: var(--vxe-border-radius);
         &.before{

package/packages/vxeTable/index.js

@@ -6,7 +6,7 @@ import XEClipboard from 'xe-clipboard'
 import { publicRenders, extraRenders, filterRenders, publicRendersNames } from './render/globalRenders.jsx'
 
 let vxeOptions = {
-	zIndex: 599,
+	zIndex: 1500,
 	version: 0,
 	input: {
 		controls: false,

package/packages/vxeTable/render/cell/vxe-render-tree.vue

@@ -1,63 +1,70 @@
-<template>
-	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
-		<template v-if="redit || isEditAll">
-			<span v-if="rprops.prefixText && rform" class="prefix">
-				<vxe-button v-if="prefixButton" v-bind="psButtonConfig" @click="vxeInputPrefixClick">{{ rprops.prefixText }}</vxe-button>
-				<span v-else @click="vxeInputPrefixClick">{{ rprops.prefixText }}</span>
-			</span>
-			<sh-tree v-model="renderValue" v-bind="rprops" :field="rkey" :value-data="rdata" :size="rsize" is-select @change="vxeTreeCallback"></sh-tree>
-			<span v-if="rprops.suffixText && rform" class="suffix">
-				<vxe-button v-if="suffixButton" v-bind="psButtonConfig" @click="vxeInputSuffixClick">{{ rprops.suffixText }}</vxe-button>
-				<span v-else @click="vxeInputSuffixClick">{{ rprops.suffixText }}</span>
-			</span>
-		</template>
-		<template v-else>
-			<span v-html="renderText"></span>
-		</template>
-	</span>
-</template>
-
-<script>
-import { defineComponent, getCurrentInstance } from 'vue'
-import cellProps from '../mixin/cell-props'
-import cellHooks from '../mixin/cell-hooks'
-export default defineComponent({
-	name: 'VxeRenderTree',
-	props: cellProps,
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const useCell = cellHooks(props, context, proxy)
-
-		// 输入框回调
-		const vxeTreeCallback = (selectedKeys, selectedRows) => {
-			let { valueKeys, multiple } = props.rprops
-			if (!multiple) {
-				selectedKeys = selectedKeys[0] || ''
-			}
-			if (valueKeys && selectedRows && selectedRows.length > 0) {
-				let prefixKey = props.rkey.endsWith('Id') ? String(props.rkey).replace('Id', '') : props.rkey
-				let valueks = Array.isArray(valueKeys) ? valueKeys : valueKeys.split(',')
-				valueks.forEach(key => {
-					let keySplits = key.split('=')
-					let fromDefaultKey = String(keySplits[0]).replace(/@/gi, '').toLowerCase()
-					let fromKey = keySplits[1] || String(keySplits[0]).replace(/@/gi, prefixKey)
-					let fromvalue = null
-					if (multiple) {
-						fromvalue = selectedRows.map(item => $vUtils.get(item, fromKey) || $vUtils.get(item, fromDefaultKey))
-					} else {
-						fromvalue = $vUtils.get(selectedRows[0], fromKey) || $vUtils.get(selectedRows[0], fromDefaultKey)
-					}
-					$vUtils.set(props.rdata, fromKey, fromvalue)
-				})
-			}
-			useCell.setRenderValue(selectedKeys, true)
-		}
-
-		return {
-			...useCell,
-			vxeTreeCallback
-		}
-	}
-})
-</script>
+<template>
+	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
+		<template v-if="redit || isEditAll">
+			<span v-if="rprops.prefixText && rform" class="prefix">
+				<vxe-button v-if="prefixButton" v-bind="psButtonConfig" @click="vxeInputPrefixClick">{{ rprops.prefixText }}</vxe-button>
+				<span v-else @click="vxeInputPrefixClick">{{ rprops.prefixText }}</span>
+			</span>
+			<sh-tree v-model="renderValue" v-bind="rprops" :field="rkey" :value-data="rdata" :size="rsize" is-select @change="vxeTreeCallback"></sh-tree>
+			<span v-if="rprops.suffixText && rform" class="suffix">
+				<vxe-button v-if="suffixButton" v-bind="psButtonConfig" @click="vxeInputSuffixClick">{{ rprops.suffixText }}</vxe-button>
+				<span v-else @click="vxeInputSuffixClick">{{ rprops.suffixText }}</span>
+			</span>
+		</template>
+		<template v-else>
+			<span v-html="renderText"></span>
+		</template>
+	</span>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderTree',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const useCell = cellHooks(props, context, proxy)
+
+		// 输入框回调
+		const vxeTreeCallback = (selectedKeys, selectedRows) => {
+			let { valueKeys, multiple } = props.rprops
+			let rvalue = selectedKeys
+			if (!multiple) {
+				rvalue = selectedKeys[0] || ''
+			}
+			if (valueKeys && selectedRows && selectedRows.length > 0) {
+				let prefixKey = props.rkey
+				let endStrs = ['Id', '_id']
+				endStrs.forEach(end => {
+					if (props.rkey.endsWith(end)) {
+						prefixKey = props.rkey.replace(end, '')
+					}
+				})
+				let valueks = Array.isArray(valueKeys) ? valueKeys : valueKeys.split(',')
+				valueks.forEach(key => {
+					let keySplits = key.split('=')
+					let fromDefaultKey = String(keySplits[0]).replace(/@/gi, '').toLowerCase()
+					let fromKey = keySplits[1] || String(keySplits[0]).replace(/@/gi, prefixKey)
+					let fromvalue = null
+					if (multiple) {
+						fromvalue = selectedRows.map(item => $vUtils.get(item, fromKey) || $vUtils.get(item, fromDefaultKey))
+					} else {
+						fromvalue = $vUtils.get(selectedRows[0], fromKey) || $vUtils.get(selectedRows[0], fromDefaultKey)
+					}
+					$vUtils.set(props.rdata, fromKey, fromvalue)
+				})
+			}
+			useCell.setRenderValue(rvalue, true)
+		}
+
+		return {
+			...useCell,
+			vxeTreeCallback
+		}
+	}
+})
+</script>