sh-view 1.5.2

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

@@ -0,0 +1,202 @@
+<template>
+	<div ref="vxeTreeDirect" class="sh-vxe-tree-direct">
+		<div v-if="treeFilterShow && treeServerComplate" class="sh-vxe-tree-direct-input">
+			<vxe-input v-model="filterTextIn" class="w-100" v-bind="filterInputConfigIn" :disabled="disabled"></vxe-input>
+		</div>
+		<div class="sh-vxe-tree-direct-content" :class="{ 'has-filter': treeFilterShow }">
+			<sh-result v-if="queryErrorText" class="sh-vxe-tree-result" type="error" :text="queryErrorText"></sh-result>
+			<table-tree
+				v-else
+				ref="vxeTreeTable"
+				:parent-props="$props"
+				:loading="loading || treeLoading"
+				:size="size"
+				:filter-text="filterTextIn"
+				:global-config="globalConfig"
+				:table-data="treeData"
+				:selected-keys="selectedKeys"
+				@select="treeSelectedChange"></table-tree>
+		</div>
+	</div>
+</template>
+
+<script>
+import defaultData from './mixin/defaultData'
+import tableTree from './components/table-tree'
+import treeMethods from './js/treeMethods'
+export default {
+	name: 'ShDirectTree',
+	components: {
+		tableTree
+	},
+	props: {
+		nodeKey: {
+			type: String,
+			default: '_XID'
+		},
+		selectedKeys: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		valueData: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		format: {
+			type: String
+		},
+		field: {
+			type: String
+		},
+		isLeaf: {
+			type: Boolean
+		},
+		disabled: {
+			type: Boolean
+		},
+		level: {
+			type: Number,
+			default: -1
+		},
+		filterText: {
+			type: String
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelFormat: {
+			type: String,
+			default: ''
+		},
+		labelTitle: {
+			type: String
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		multiple: {
+			type: Boolean,
+			default: true
+		},
+		size: {
+			type: String,
+			default: 'medium' //  medium / small / mini
+		},
+		globalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		treeColumns: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		options: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		serverCache: {
+			// 请求数据是否缓存，不缓存则每次下拉重新加载
+			type: Boolean,
+			default: true
+		},
+		serverConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		serverParams: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		noDataIcon: {
+			type: String
+		},
+		noDataText: {
+			type: String
+		}
+	},
+	emits: ['change', 'blur'],
+	data() {
+		return {
+			...defaultData,
+			treeServerComplate: false,
+			treeLoading: false,
+			treeData: this.options,
+			filterTextIn: '',
+			treeSelectValue: '',
+			treeSelectedData: [],
+			queryConditions: null,
+			queryErrorText: null
+		}
+	},
+	computed: {
+		treeFilterShow() {
+			return this.globalConfig.treeFilter
+		},
+		showConfigIn() {
+			return Object.assign({}, this.showConfigDefault, this.globalConfig.showConfig)
+		},
+		filterInputConfigIn() {
+			return Object.assign({}, this.filterInputConfigDefault, this.globalConfig.filterInputConfig)
+		}
+	},
+	watch: {
+		filterText: {
+			handler(newvalue, oldValue) {
+				this.filterTextIn = newvalue
+			},
+			deep: true,
+			immediate: true
+		},
+		options: {
+			handler(newvalue, oldValue) {
+				this.treeData = newvalue
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {},
+	mounted() {
+		this.initMounted()
+	},
+	beforeUnmount() {},
+	methods: {
+		...treeMethods
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-vxe-tree-direct {
+	position: relative;
+	padding: 0;
+	height: 100%;
+	.sh-vxe-tree-direct-input {
+		padding: 5px;
+		box-sizing: border-box;
+		background-color: var(--body-background);
+	}
+	.sh-vxe-tree-direct-content {
+		height: 100%;
+		&.has-filter {
+			height: calc(100% - 44px);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,291 @@
+<template>
+	<div class="sh-vxe-tree-select">
+		<vxe-pulldown ref="vxeTreeSelect" v-model="pulldownDrop" v-bind="selectConfigIn" :disabled="disabled" :size="size" @hide-panel="vxeTreePullHide">
+			<template #default>
+				<div ref="vxeTreeSelectInputBox" class="sh-vxe-tree-select-input">
+					<vxe-input
+						ref="vxeTreeSelectInput"
+						v-model="treeSelectValue"
+						readonly
+						v-bind="inputConfigIn"
+						:disabled="disabled"
+						:size="size"
+						@focus="vxeTreeSelectFocus"
+						@blur="vxeTreeSelectBlur"
+						@clear="vxeTreeSelectClear"></vxe-input>
+				</div>
+			</template>
+			<template #dropdown>
+				<div class="sh-vxe-tree-select-dropdown">
+					<div v-if="treeFilterShow && treeServerComplate" class="sh-vxe-tree-select-dropdown-input">
+						<vxe-input ref="vxeTreeDropdownFilter" v-model="filterTextIn" class="select-filter-input" v-bind="filterInputConfigIn" :disabled="disabled"></vxe-input>
+					</div>
+					<div class="sh-vxe-tree-select-dropdown-content" :style="selectDropContentStyle">
+						<sh-loading v-if="treeLoading" fix loading></sh-loading>
+						<sh-result v-if="queryErrorText" class="sh-vxe-tree-result" type="error" :text="queryErrorText"></sh-result>
+						<table-tree
+							v-else-if="treeServerComplate"
+							ref="vxeTreeTable"
+							is-select
+							:parent-props="$props"
+							:loading="loading"
+							:size="size"
+							:filter-text="filterTextIn"
+							:global-config="globalConfig"
+							:table-data="treeData"
+							:selected-keys="selectedKeys"
+							@select="treeSelectedChange"></table-tree>
+					</div>
+				</div>
+			</template>
+		</vxe-pulldown>
+	</div>
+</template>
+
+<script>
+import defaultData from './mixin/defaultData'
+import tableTree from './components/table-tree'
+import treeMethods from './js/treeMethods'
+export default {
+	name: 'ShSelectTree',
+	components: {
+		tableTree
+	},
+	props: {
+		valueKeys: {
+			type: Array
+		},
+		valueData: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		format: {
+			type: String
+		},
+		field: {
+			type: String
+		},
+		nodeKey: {
+			type: String,
+			default: '_XID'
+		},
+		selectedKeys: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		isLeaf: {
+			type: Boolean
+		},
+		disabled: {
+			type: Boolean
+		},
+		level: {
+			type: Number,
+			default: -1
+		},
+		split: {
+			type: String,
+			default: '/'
+		},
+		size: {
+			type: String,
+			default: 'medium' //  medium / small / mini
+		},
+		placeholder: {
+			type: String,
+			default: '请选择'
+		},
+		filterText: {
+			type: String
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelFormat: {
+			type: String,
+			default: ''
+		},
+		labelTitle: {
+			type: String
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		multiple: {
+			type: Boolean,
+			default: true
+		},
+		globalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		treeColumns: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		options: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		serverCache: {
+			// 请求数据是否缓存，不缓存则每次下拉重新加载
+			type: Boolean,
+			default: true
+		},
+		serverConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		serverParams: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		noDataIcon: {
+			type: String
+		},
+		noDataText: {
+			type: String
+		}
+	},
+	emits: ['change', 'focus', 'blur'],
+	data() {
+		return {
+			...defaultData,
+			// 树公共属性
+			treeServerComplate: false,
+			treeLoading: false,
+			treeData: this.options,
+			filterTextIn: this.filterText,
+			treeSelectValue: '',
+			treeSelectedData: [],
+			queryConditions: null,
+			queryErrorText: null,
+			// 下拉专属属性
+			pulldownDrop: false,
+			initServer: true,
+			selfClientRect: {}
+		}
+	},
+	computed: {
+		treeFilterShow() {
+			return this.globalConfig.treeFilter
+		},
+		showConfigIn() {
+			return Object.assign({}, this.showConfigDefault, this.globalConfig.showConfig)
+		},
+		selectConfigIn() {
+			return Object.assign({}, this.selectConfigDefault, this.globalConfig.selectConfig)
+		},
+		inputConfigIn() {
+			return Object.assign({}, this.inputConfigDefault, { placeholder: this.placeholder }, this.globalConfig.inputConfig)
+		},
+		filterInputConfigIn() {
+			return Object.assign({}, this.filterInputConfigDefault, this.globalConfig.filterInputConfig)
+		},
+		selectDropContentStyle() {
+			return { width: `${this.selfClientRect.width}px` }
+		}
+	},
+	watch: {
+		selectedKeys: {
+			handler(newvalue, oldValue) {
+				this.initValue(newvalue)
+			},
+			deep: true,
+			immediate: true
+		},
+		options: {
+			handler(newvalue, oldValue) {
+				this.treeData = newvalue
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {},
+	mounted() {
+		this.initMounted()
+	},
+	beforeUnmount() {},
+	methods: {
+		...treeMethods,
+		// 下拉数获取焦点展示下拉
+		async vxeTreeSelectFocus() {
+			this.$emit('focus')
+			this.selectConfigDefault.placement = 'bottom'
+			let windowHeight = window.document.body.clientHeight
+			let selfClientRect = this.$refs.vxeTreeSelectInputBox.getBoundingClientRect()
+			if (selfClientRect) {
+				this.selfClientRect = selfClientRect
+				let { bottom } = selfClientRect
+				let selfOffsetBottom = windowHeight - bottom
+				if (selfOffsetBottom < 265) this.selectConfigDefault.placement = 'top'
+			}
+			this.pulldownDrop = true
+			await this.getServerConfigDataSourse()
+			if (this.$refs.vxeTreeDropdownFilter) this.$refs.vxeTreeDropdownFilter.focus()
+		},
+		// 下拉树失去焦点
+		async vxeTreeSelectBlur() {
+			window.event.stopPropagation()
+		},
+		// 下拉框收起
+		async vxeTreePullHide() {
+			this.filterTextIn = ''
+			this.$emit('blur')
+			this.pulldownDrop = false
+			await this.$refs.vxeTreeSelect.hidePanel()
+		},
+		// 下拉数清除事件
+		async vxeTreeSelectClear({ $event }) {
+			this.treeSelectValue = ''
+			this.$emit('change', [], [], null)
+			this.$emit('blur')
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.sh-vxe-tree-select {
+	width: 100%;
+	display: block;
+	.vxe-pulldown {
+		vertical-align: top;
+		width: 100%;
+	}
+	.sh-vxe-tree-select-input {
+		overflow: hidden;
+	}
+}
+.sh-vxe-tree-select-dropdown {
+	position: relative;
+	.sh-vxe-tree-select-dropdown-input {
+		padding: 5px;
+		box-sizing: border-box;
+		background-color: #eee;
+		.select-filter-input {
+			width: 100%;
+		}
+	}
+	.sh-vxe-tree-select-dropdown-content {
+		height: 230px;
+	}
+}
+</style>

package/packages/components/global-components/sh-water-fall/index.vue

@@ -0,0 +1,87 @@
+<template>
+	<div
+		v-masonry
+		class="sh-waterfall"
+		:transition-duration="duration"
+		:item-selector="selector"
+		:origin-left="originLeft"
+		:origin-top="originTop"
+		:fit-width="fitWidth"
+		:stamp="stamp"
+		:gutter="gutter"
+		:horizontal-order="horizontalOrder">
+		<div v-for="(item, itemindex) in dataSourse" :key="itemindex" v-masonry-tile class="sh-list-item" :class="itemClassName">
+			<slot name="item" :item="item" :index="itemindex"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShWaterFall',
+	components: {},
+	props: {
+		id: {
+			type: String,
+			default: 'containerId'
+		},
+		dataSourse: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		itemClassName: {
+			type: String
+		},
+		duration: {
+			type: String,
+			default: '0.3s'
+		},
+		selector: {
+			type: String,
+			default: '.sh-list-item'
+		},
+		fitWidth: {
+			type: Boolean,
+			default: false
+		},
+		originLeft: {
+			type: Boolean,
+			default: true
+		},
+		originTop: {
+			type: Boolean,
+			default: true
+		},
+		horizontalOrder: {
+			type: Boolean,
+			default: true
+		},
+		stamp: {
+			type: String,
+			default: ''
+		},
+		gutter: {
+			type: [String, Number],
+			default: 10
+		}
+	},
+	data() {
+		return {}
+	},
+	computed: {},
+	watch: {},
+	mounted() {},
+	methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-waterfall {
+	width: 100%;
+	margin: auto;
+	.sh-list-item {
+	}
+}
+</style>

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

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