sh-view 1.5.3 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "1.5.3",
+  "version": "1.6.1",
   "description": "基于vxe-table、view-ui-plus二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -17,27 +17,30 @@
     "@codemirror/lang-sql": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@tinymce/tinymce-vue": "^5.0.0",
+    "@vue-office/docx": "^1.2.3",
+    "@vue-office/excel": "^1.2.7",
+    "@vue-office/pdf": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^6.0.1",
-    "core-js": "^3.8.3",
+    "core-js": "^3.32.0",
     "cron-parser": "^4.8.1",
-    "docx-preview": "^0.1.11",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
-    "tinymce": "^5.10.5",
     "sh-tools": "^1.2.0",
+    "tinymce": "^5.10.5",
     "view-ui-plus": "^1.3.14",
     "vue": "^3.3.4",
+    "vue-masonry": "^0.16.0",
     "vue-ripple-directive": "^2.0.1",
     "vue-router": "^4.2.2",
-    "vue-masonry": "^0.16.0",
     "vuex": "^4.1.0",
-    "vxe-table": "^4.5.0-beta.10",
+    "vxe-table": "^4.5.0-beta.16",
     "vxe-table-plugin-export-pdf": "^3.0.4",
     "vxe-table-plugin-export-xlsx": "^3.0.5",
     "xe-clipboard": "^1.10.2",
+    "xe-utils": "^3.5.11",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

package/packages/components/global-components/sh-code-editor/index.vue

@@ -198,7 +198,7 @@ export default {
 			let result = '',
 				error = null
 			try {
-				if (typeof modelValue === 'object') {
+				if (typeof modelValue === 'object' && value) {
 					result = out ? JSON.parse(value, null, indent) : JSON.stringify(value, null, indent)
 				} else {
 					result = value

package/packages/components/global-components/sh-icon/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Icons from './icons'
+import Icons from './icons.vue'
 export default {
 	name: 'ShIcon',
 	components: { Icons },

package/packages/components/global-components/sh-iv-form/index.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import ivGroupItem from './components/iv-group-item'
+import ivGroupItem from './components/iv-group-item.vue'
 export default {
 	name: 'ShIvForm',
 	components: {

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

@@ -1,15 +1,22 @@
 <template>
 	<div class="sh-preview">
-		<template v-if="previewObj.component">
-			<component :is="previewObj.component" :url="url" :width="width" :height="height" disabled />
-		</template>
-		<iframe v-else :src="(previewObj.base || '') + url + '#scrollbars=0&toolbar=0&statusbar=0'" :width="width" :height="height" frameborder="0"></iframe>
+		<component :is="componentName" v-bind="componentProps" :style="componentStyles" @rendered="onRendered" @error="onError" />
 	</div>
 </template>
 
 <script>
+import ShWord from '@vue-office/docx'
+import '@vue-office/docx/lib/index.css'
+import ShExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import ShPdf from '@vue-office/pdf'
 export default {
 	name: 'ShPreview',
+	components: {
+		ShWord,
+		ShExcel,
+		ShPdf
+	},
 	props: {
 		type: {
 			type: String
@@ -29,26 +36,42 @@ export default {
 			default: '600px'
 		}
 	},
-	data() {
-		return {
-			compTypeObj: [
-				{
-					types: ['word', 'doc', 'docx'],
-					component: 'ShWord'
-				},
-				{
-					types: ['excel', 'xlsx'],
-					component: 'ShSheet'
-				}
-			]
-		}
-	},
+	emits: ['ready', 'error'],
 	computed: {
 		previewType() {
 			return (this.type && this.type.toLowerCase()) || (this.url && this.url.substr(this.url.lastIndexOf('.') + 1).toLowerCase())
 		},
-		previewObj() {
-			return this.compTypeObj.find(item => item.types.includes(this.previewType)) || {}
+		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)
 		}
 	}
 }

package/packages/components/global-components/sh-upload/components/u-list.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import UImg from './u-img'
+import UImg from './u-img.vue'
 export default {
 	name: 'UList',
 	components: {

package/packages/components/global-components/sh-upload/index.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import UList from './components/u-list'
+import UList from './components/u-list.vue'
 export default {
 	name: 'ShUpload',
 	components: {

package/packages/components/global-components/sh-vxe-table/index.vue

@@ -178,7 +178,7 @@
 import defaultData from './mixin/defaultData'
 import props from './js/props'
 import methods from './js/methods'
-import importModal from './components/importModal'
+import importModal from './components/importModal.vue'
 export default {
 	name: 'ShTable',
 	components: {

package/packages/components/global-components/sh-vxe-tree/index.vue

@@ -13,8 +13,8 @@
 </template>
 
 <script>
-import vxeDirectTree from './vxe-direct-tree'
-import vxeSelectTree from './vxe-select-tree'
+import vxeDirectTree from './vxe-direct-tree.vue'
+import vxeSelectTree from './vxe-select-tree.vue'
 import props from './js/props'
 export default {
 	name: 'ShTree',

package/packages/components/global-components/sh-vxe-tree/vxe-direct-tree.vue

@@ -22,7 +22,7 @@
 
 <script>
 import defaultData from './mixin/defaultData'
-import tableTree from './components/table-tree'
+import tableTree from './components/table-tree.vue'
 import treeMethods from './js/treeMethods'
 export default {
 	name: 'ShDirectTree',

package/packages/components/global-components/sh-vxe-tree/vxe-select-tree.vue

@@ -44,7 +44,7 @@
 
 <script>
 import defaultData from './mixin/defaultData'
-import tableTree from './components/table-tree'
+import tableTree from './components/table-tree.vue'
 import treeMethods from './js/treeMethods'
 export default {
 	name: 'ShSelectTree',

package/packages/components/index.js

@@ -1,29 +1,27 @@
 // 全局公共封装组件
-import ShCard from './global-components/sh-card'
-import ShCodeEditor from './global-components/sh-code-editor'
-import ShCorner from './global-components/sh-corner'
-import ShCountTo from './global-components/sh-count-to'
-import ShEmpty from './global-components/sh-empty'
-import ShHeader from './global-components/sh-header'
-import ShIcon from './global-components/sh-icon'
-import ShIvForm from './global-components/sh-iv-form'
-import ShLayout from './global-components/sh-layout'
-import ShLoading from './global-components/sh-loading'
-import ShNoticeBar from './global-components/sh-noticebar'
-import ShPreview from './global-components/sh-preview'
-import ShPullRefresh from './global-components/sh-pull-refresh'
-import ShResult from './global-components/sh-result'
-import ShSheet from './global-components/sh-sheet'
-import ShUpload from './global-components/sh-upload'
-import ShForm from './global-components/sh-vxe-form'
-import ShList from './global-components/sh-vxe-list'
-import ShModal from './global-components/sh-vxe-modal'
-import ShQuery from './global-components/sh-vxe-query'
-import ShTable from './global-components/sh-vxe-table'
-import ShToolbar from './global-components/sh-vxe-toolbar'
-import ShTree from './global-components/sh-vxe-tree'
-import ShWaterFall from './global-components/sh-water-fall'
-import ShWord from './global-components/sh-word'
+import ShCard from './global-components/sh-card/index.vue'
+import ShCodeEditor from './global-components/sh-code-editor/index.vue'
+import ShCorner from './global-components/sh-corner/index.vue'
+import ShCountTo from './global-components/sh-count-to/index.vue'
+import ShEmpty from './global-components/sh-empty/index.vue'
+import ShHeader from './global-components/sh-header/index.vue'
+import ShIcon from './global-components/sh-icon/index.vue'
+import ShIvForm from './global-components/sh-iv-form/index.vue'
+import ShLayout from './global-components/sh-layout/index.vue'
+import ShLoading from './global-components/sh-loading/index.vue'
+import ShNoticeBar from './global-components/sh-noticebar/index.vue'
+import ShPreview from './global-components/sh-preview/index.vue'
+import ShPullRefresh from './global-components/sh-pull-refresh/index.vue'
+import ShResult from './global-components/sh-result/index.vue'
+import ShUpload from './global-components/sh-upload/index.vue'
+import ShForm from './global-components/sh-vxe-form/index.vue'
+import ShList from './global-components/sh-vxe-list/index.vue'
+import ShModal from './global-components/sh-vxe-modal/index.vue'
+import ShQuery from './global-components/sh-vxe-query/index.vue'
+import ShTable from './global-components/sh-vxe-table/index.vue'
+import ShToolbar from './global-components/sh-vxe-toolbar/index.vue'
+import ShTree from './global-components/sh-vxe-tree/index.vue'
+import ShWaterFall from './global-components/sh-water-fall/index.vue'
 
 const components = {
 	ShCard,
@@ -40,7 +38,6 @@ const components = {
 	ShPreview,
 	ShPullRefresh,
 	ShResult,
-	ShSheet,
 	ShUpload,
 	ShForm,
 	ShList,
@@ -49,8 +46,7 @@ const components = {
 	ShTable,
 	ShToolbar,
 	ShTree,
-	ShWaterFall,
-	ShWord
+	ShWaterFall
 }
 
 const index = {

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

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import menuBox from './menu-box'
+import menuBox from './menu-box.vue'
 export default {
 	name: 'MenuCard',
 	components: {

package/packages/vxeTable/index.js

@@ -3,7 +3,7 @@ import './css/index.scss'
 import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
 import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
 import XEClipboard from 'xe-clipboard'
-import { defaultPublicRenders, defaultExtraRenders, defaultFilterRenders, defaultPublicRendersNames } from './render/globalRenders'
+import { defaultPublicRenders, defaultExtraRenders, defaultFilterRenders, defaultPublicRendersNames } from './render/globalRenders.jsx'
 
 let vxeOptions = {
 	zIndex: 599,

package/packages/vxeTable/render/{globalRenders.js → globalRenders.jsx}

@@ -1,32 +1,32 @@
 // 渲染器组件封装
-import vxeRenderInput from './cell/vxe-render-input'
-import vxeRenderTextarea from './cell/vxe-render-textarea'
-import vxeRenderSelect from './cell/vxe-render-select'
-import vxeRenderTree from './cell/vxe-render-tree'
-import vxeRenderTime from './cell/vxe-render-time'
-import vxeRenderProgress from './cell/vxe-render-progress'
-import vxeRenderSwitch from './cell/vxe-render-switch'
-import vxeRenderMoney from './cell/vxe-render-money'
-import vxeRenderCheckbox from './cell/vxe-render-checkbox'
-import vxeRenderCheckgroup from './cell/vxe-render-checkgroup'
-import vxeRenderRadio from './cell/vxe-render-radio'
-import vxeRenderRadiogroup from './cell/vxe-render-radiogroup'
-import vxeRenderTable from './cell/vxe-render-table'
-import vxeRenderImg from './cell/vxe-render-img'
-import vxeRenderHref from './cell/vxe-render-href'
-import vxeRenderUpload from './cell/vxe-render-upload'
-import vxeRenderCode from './cell/vxe-render-code'
-import vxeRenderGoption from './cell/vxe-render-goption'
+import vxeRenderInput from './cell/vxe-render-input.vue'
+import vxeRenderTextarea from './cell/vxe-render-textarea.vue'
+import vxeRenderSelect from './cell/vxe-render-select.vue'
+import vxeRenderTree from './cell/vxe-render-tree.vue'
+import vxeRenderTime from './cell/vxe-render-time.vue'
+import vxeRenderProgress from './cell/vxe-render-progress.vue'
+import vxeRenderSwitch from './cell/vxe-render-switch.vue'
+import vxeRenderMoney from './cell/vxe-render-money.vue'
+import vxeRenderCheckbox from './cell/vxe-render-checkbox.vue'
+import vxeRenderCheckgroup from './cell/vxe-render-checkgroup.vue'
+import vxeRenderRadio from './cell/vxe-render-radio.vue'
+import vxeRenderRadiogroup from './cell/vxe-render-radiogroup.vue'
+import vxeRenderTable from './cell/vxe-render-table.vue'
+import vxeRenderImg from './cell/vxe-render-img.vue'
+import vxeRenderHref from './cell/vxe-render-href.vue'
+import vxeRenderUpload from './cell/vxe-render-upload.vue'
+import vxeRenderCode from './cell/vxe-render-code.vue'
+import vxeRenderGoption from './cell/vxe-render-goption.vue'
 
 // 头部渲染器封装
-import vxeHeaderMoney from './header/vxe-header-money'
+import vxeHeaderMoney from './header/vxe-header-money.vue'
 
 // 底部渲染器封装
-import vxeFooterInput from './footer/vxe-footer-input'
-import vxeFooterMoney from './footer/vxe-footer-money'
+import vxeFooterInput from './footer/vxe-footer-input.vue'
+import vxeFooterMoney from './footer/vxe-footer-money.vue'
 
 // 过滤器组件封装
-import vxeFilterInput from './filters/vxe-filter-input'
+import vxeFilterInput from './filters/vxe-filter-input.vue'
 
 // 系统图片
 import imgPlaceholder from '../../assets/img/square-image.png'

package/packages/components/global-components/sh-sheet/index.vue

@@ -1,173 +0,0 @@
-<template>
-	<div :id="sheetId" ref="shSheet" class="sh-sheet" :style="sheetStyles"></div>
-</template>
-
-<script>
-export default {
-	name: 'ShSheet',
-	props: {
-		option: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: String,
-			default: '100%'
-		},
-		height: {
-			type: String,
-			default: '600'
-		},
-		disabled: {
-			type: Boolean
-		},
-		readonly: {
-			type: Boolean
-		},
-		url: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {}
-	},
-	computed: {
-		sheetId() {
-			return 'ShSheet' + this._.uid
-		},
-		sheetStyles() {
-			return {
-				width: this.width,
-				height: this.height
-			}
-		},
-		sheetOption() {
-			let { disabled, readonly, sheetId } = this
-			let isedit = !disabled && !readonly
-			let defaultOption = {
-				title: this.title,
-				lang: 'zh',
-				// plugins: ['chart'],
-				allowCopy: true, // 允许复制
-				showinfobar: isedit,
-				showtoolbar: isedit, // 工具栏
-				showtoolbarConfig: {}, // 自定义工具栏
-				showstatisticBar: true, // 底部计数栏
-				showstatisticBarConfig: {
-					count: true, // 计数栏
-					view: true, // 打印视图
-					zoom: true // 缩放
-				}, // 自定义计数栏
-				showsheetbar: true, // 底部sheet页
-				showsheetbarConfig: {
-					add: isedit, // 新增sheet
-					menu: true, // sheet管理菜单
-					sheet: true // sheet页显示
-				}, // 自定义底部sheet页
-				enableAddRow: isedit, // 允许添加行
-				enableAddBackTop: true, // 允许回到顶部
-				cellRightClickConfig: {
-					copy: false, // 复制
-					copyAs: false, // 复制为
-					paste: false, // 粘贴
-					insertRow: false, // 插入行
-					insertColumn: false, // 插入列
-					deleteRow: false, // 删除选中行
-					deleteColumn: false, // 删除选中列
-					deleteCell: false, // 删除单元格
-					hideRow: false, // 隐藏选中行和显示选中行
-					hideColumn: false, // 隐藏选中列和显示选中列
-					rowHeight: false, // 行高
-					columnWidth: false, // 列宽
-					clear: false, // 清除内容
-					matrix: false, // 矩阵操作选区
-					sort: false, // 排序选区
-					filter: false, // 筛选选区
-					chart: false, // 图表生成
-					image: false, // 插入图片
-					link: false, // 插入链接
-					data: false, // 数据验证
-					cellFormat: false // 设置单元格格式
-				}, // 自定义单元格右键菜单
-				sheetRightClickConfig: {
-					delete: false, // 删除
-					copy: false, // 复制
-					rename: false, // 重命名
-					color: false, // 更改颜色
-					hide: false, // 隐藏，取消隐藏
-					move: false // 向左移，向右移
-				}, // 自定义sheet页右击菜单
-				sheetFormulaBar: isedit, // 是否显示公式栏
-				defaultFontSize: 14, // 初始化默认字体大小
-				functionButton: false, // 功能按钮
-				data: [],
-				userInfo: ''
-			}
-			return Object.assign(defaultOption, this.option, { container: sheetId })
-		}
-	},
-	watch: {
-		sheetOption: {
-			handler() {
-				this.sheetRender()
-			},
-			deep: true
-		},
-		url: {
-			handler() {
-				this.sheetRender()
-			}
-		}
-	},
-	mounted() {
-		this.sheetRender()
-	},
-	methods: {
-		async sheetRender() {
-			const that = this
-			try {
-				window.luckysheet.destroy() // 先销毁当前容器
-				let sheetOption = that.sheetOption
-				if (that.url) {
-					let contentJson = await that.getFileContent()
-					sheetOption.data = contentJson.sheets
-					sheetOption.title = contentJson.info.name
-					sheetOption.userInfo = contentJson.info.creator
-				}
-				window.luckysheet.create(sheetOption)
-			} catch (e) {
-				that.msgerror(`初始化失败：${e.message}`)
-			}
-		},
-		// 获取文件流
-		async getFileContent() {
-			return new Promise(async (resolve, reject) => {
-				let fileRes = await this.$http.request({
-					methods: 'get',
-					url: this.url,
-					responseType: 'blob'
-				})
-				window.LuckyExcel.transformExcelToLucky(fileRes, (exportJson, luckysheetfile) => {
-					if (exportJson.sheets == null || exportJson.sheets.length === 0) {
-						reject(new Error('读取excel文件内容失败!'))
-					}
-					resolve(exportJson)
-				})
-			})
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-sheet {
-	position: relative;
-}
-</style>

package/packages/components/global-components/sh-word/index.vue

@@ -1,110 +0,0 @@
-<template>
-	<div :ref="wordRef" class="sh-word"></div>
-</template>
-
-<script>
-let docxPreview = require('docx-preview')
-export default {
-	name: 'ShWord',
-	props: {
-		option: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: String,
-			default: '100%'
-		},
-		height: {
-			type: String,
-			default: '600'
-		},
-		disabled: {
-			type: Boolean
-		},
-		readonly: {
-			type: Boolean
-		},
-		url: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {}
-	},
-	computed: {
-		wordRef() {
-			return 'shWord' + this._.uid
-		},
-		wordOption() {
-			let defaultOption = {
-				width: this.width,
-				height: this.height,
-				className: 'sh-word-wrap', //默认和文档样式类的类名/前缀
-				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 //启用额外的日志记录
-			}
-			return Object.assign(defaultOption, this.option)
-		}
-	},
-	watch: {
-		wordOption: {
-			handler() {
-				this.sheetRender()
-			},
-			deep: true
-		},
-		url: {
-			handler() {
-				this.sheetRender()
-			}
-		}
-	},
-	mounted() {
-		this.wordRender()
-	},
-	methods: {
-		async wordRender() {
-			const that = this
-			try {
-				if (that.url) {
-					let content = await that.getFileContent()
-					docxPreview
-						.renderAsync(content, that.$refs[that.wordRef], null, that.wordOption)
-						.then(res => {})
-						.catch(err => {})
-				}
-			} catch (e) {
-				that.msgerror(`初始化失败：${e.message}`)
-			}
-		},
-		// 获取文件流
-		async getFileContent() {
-			return this.$http.request({
-				methods: 'get',
-				url: this.url,
-				responseType: 'blob'
-			})
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped></style>