sh-view 2.7.8 → 2.8.0

package/packages/{components/other-components → other}/sh-cron-modal/tabs/cron-week-box.vue

@@ -1,126 +1,126 @@
-<template>
-	<div class="sh-cron-config-list">
-		<vxe-radio-group v-model="type">
-			<div class="item">
-				<vxe-radio :label="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</vxe-radio>
-				<span class="tip-info">日和周只能设置其中之一</span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
-				<span> 从 </span>
-				<vxe-select v-model="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
-				<span> 至 </span>
-				<vxe-select v-model="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
-				<span> 从 </span>
-				<vxe-select v-model="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" />
-				<span> 至 </span>
-				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</vxe-radio>
-				<div class="list">
-					<vxe-checkbox-group v-model="valueList">
-						<template v-for="i in specifyRange" :key="i">
-							<vxe-checkbox :label="i" v-bind="typeSpecifyAttrs">{{ i }}</vxe-checkbox>
-						</template>
-					</vxe-checkbox-group>
-				</div>
-			</div>
-		</vxe-radio-group>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, watch } from 'vue'
-import cronProps from '../mixin/cron-props'
-emits: cronEmits,
-import cronHooks from '../mixin/cron-hooks'
-import cronEmits from '../mixin/cron-emits'
-const WEEK_MAP_EN = {
-	1: 'SUN',
-	2: 'MON',
-	3: 'TUE',
-	4: 'WED',
-	5: 'THU',
-	6: 'FRI',
-	7: 'SAT'
-}
-const WEEK_MAP_CN = {
-	1: '周日',
-	2: '周一',
-	3: '周二',
-	4: '周三',
-	5: '周四',
-	6: '周五',
-	7: '周六'
-}
-export default defineComponent({
-	name: 'CronWeekBox',
-	props: {
-		...cronProps,
-		day: {
-			type: String,
-			default: '*'
-		}
-	},
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const useCron = cronHooks(props, context, proxy, {
-			defaultValue: '*',
-			minValue: 1,
-			maxValue: 7,
-			valueRange: { start: 1, end: 7 },
-			valueLoop: { start: 2, interval: 1 }
-		})
-
-		const disabledChoice = computed(() => {
-			return (props.day && props.day !== '?') || props.disabled
-		})
-		const weekOptions = computed(() => {
-			let options = []
-			for (let weekKey of Object.keys(WEEK_MAP_CN)) {
-				let weekName = WEEK_MAP_CN[weekKey]
-				options.push({
-					value: Number.parseInt(weekKey),
-					label: weekName
-				})
-			}
-			return options
-		})
-		const typeRangeSelectAttrs = computed(() => {
-			return {
-				class: ['cron-item-input'],
-				disabled: useCron.typeRangeAttrs.value.disabled
-			}
-		})
-		const typeLoopSelectAttrs = computed(() => {
-			return {
-				class: ['cron-item-input'],
-				disabled: useCron.typeLoopAttrs.value.disabled
-			}
-		})
-
-		watch(
-			() => props.day,
-			() => {
-				useCron.updateValue(disabledChoice.value ? '?' : useCron.computeValue.value)
-			}
-		)
-
-		return {
-			...useCron,
-			weekOptions,
-			typeRangeSelectAttrs,
-			typeLoopSelectAttrs
-		}
-	}
-})
-</script>
-
-<style scoped></style>
+<template>
+	<div class="sh-cron-config-list">
+		<vxe-radio-group v-model="type">
+			<div class="item">
+				<vxe-radio :label="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</vxe-radio>
+				<span class="tip-info">日和周只能设置其中之一</span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
+				<span> 从 </span>
+				<vxe-select v-model="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
+				<span> 至 </span>
+				<vxe-select v-model="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
+				<span> 从 </span>
+				<vxe-select v-model="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" />
+				<span> 至 </span>
+				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</vxe-radio>
+				<div class="list">
+					<vxe-checkbox-group v-model="valueList">
+						<template v-for="i in specifyRange" :key="i">
+							<vxe-checkbox :label="i" v-bind="typeSpecifyAttrs">{{ i }}</vxe-checkbox>
+						</template>
+					</vxe-checkbox-group>
+				</div>
+			</div>
+		</vxe-radio-group>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, watch } from 'vue'
+import cronProps from '../mixin/cron-props'
+import cronHooks from '../mixin/cron-hooks'
+import cronEmits from '../mixin/cron-emits'
+const WEEK_MAP_EN = {
+	1: 'SUN',
+	2: 'MON',
+	3: 'TUE',
+	4: 'WED',
+	5: 'THU',
+	6: 'FRI',
+	7: 'SAT'
+}
+const WEEK_MAP_CN = {
+	1: '周日',
+	2: '周一',
+	3: '周二',
+	4: '周三',
+	5: '周四',
+	6: '周五',
+	7: '周六'
+}
+export default defineComponent({
+	name: 'CronWeekBox',
+	props: {
+		...cronProps,
+		day: {
+			type: String,
+			default: '*'
+		}
+	},
+	emits: cronEmits,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const useCron = cronHooks(props, context, proxy, {
+			defaultValue: '*',
+			minValue: 1,
+			maxValue: 7,
+			valueRange: { start: 1, end: 7 },
+			valueLoop: { start: 2, interval: 1 }
+		})
+
+		const disabledChoice = computed(() => {
+			return (props.day && props.day !== '?') || props.disabled
+		})
+		const weekOptions = computed(() => {
+			let options = []
+			for (let weekKey of Object.keys(WEEK_MAP_CN)) {
+				let weekName = WEEK_MAP_CN[weekKey]
+				options.push({
+					value: Number.parseInt(weekKey),
+					label: weekName
+				})
+			}
+			return options
+		})
+		const typeRangeSelectAttrs = computed(() => {
+			return {
+				class: ['cron-item-input'],
+				disabled: useCron.typeRangeAttrs.value.disabled
+			}
+		})
+		const typeLoopSelectAttrs = computed(() => {
+			return {
+				class: ['cron-item-input'],
+				disabled: useCron.typeLoopAttrs.value.disabled
+			}
+		})
+
+		watch(
+			() => props.day,
+			() => {
+				useCron.updateValue(disabledChoice.value ? '?' : useCron.computeValue.value)
+			}
+		)
+
+		return {
+			...useCron,
+			weekOptions,
+			typeRangeSelectAttrs,
+			typeLoopSelectAttrs
+		}
+	}
+})
+</script>
+
+<style scoped></style>

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,89 +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(() => {
-			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 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

@@ -192,13 +192,37 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
 }
 
 // 渲染器
-.vxe-filter--wrap{
-    padding: 8px;
-    box-sizing: border-box;
-    .vxe-filter--input{
+.vxe-filter{
+    &--wrap{
+        padding: 8px;
+        box-sizing: border-box;
     }
-    .vxe-filter--footer{
-        margin-top: 8px;
+    &--input{
+    }
+    &--list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        &-head{
+
+        }
+        &-body{
+            overflow: auto;
+            height: 120px;
+        }
+        &-item{
+            padding: 2px 0;
+            display: block;
+        }
+    }
+    &--top{
+        position: relative;
+        margin-bottom: 5px;
+    }
+    &--body{
+    }
+    &--footer{
+        margin-top: 5px;
         padding: 5px 0 2px;
         .vxe-button{
             margin-left: 0;
@@ -231,7 +255,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 +283,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{