sh-view 2.1.0 → 2.3.0

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

@@ -1,11 +1,11 @@
 <template>
-	<div ref="splitWrap" v-resize="computeOffset" class="sh-split" :class="{ 'no-select': isMoving }">
+	<div ref="splitRef" v-resize="computeOffset" class="sh-split" :class="{ 'no-select': isMoving }">
 		<sh-loading v-if="loading" loading :content="loadingText" class="layout-loader"></sh-loading>
-		<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
+		<div v-if="isHorizontal" class="sh-split-horizontal">
 			<div :style="{ right: `${anotherOffset}%` }" class="left-pane" :class="paneClasses">
 				<slot name="left" />
 			</div>
-			<div :class="`${prefix}-trigger-con`" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
+			<div class="sh-split-trigger-con" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
 				<slot name="trigger">
 					<trigger mode="vertical" />
 				</slot>
@@ -14,11 +14,11 @@
 				<slot name="right" />
 			</div>
 		</div>
-		<div v-else :class="`${prefix}-vertical`">
+		<div v-else class="sh-split-vertical">
 			<div :style="{ bottom: `${anotherOffset}%` }" class="top-pane" :class="paneClasses">
 				<slot name="top" />
 			</div>
-			<div :class="`${prefix}-trigger-con`" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
+			<div class="sh-split-trigger-con" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
 				<slot name="trigger">
 					<trigger mode="horizontal" />
 				</slot>
@@ -31,8 +31,9 @@
 </template>
 
 <script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, nextTick } from 'vue'
 import trigger from './components/trigger.vue'
-export default {
+export default defineComponent({
 	name: 'ShSplit',
 	components: {
 		trigger
@@ -75,119 +76,124 @@ export default {
 		}
 	},
 	emits: ['update:modelValue', 'move-start', 'moveing', 'move-end'],
-	data() {
-		return {
-			offset: 0,
-			oldOffset: 0,
-			isMoving: false,
-			computedMin: 0,
-			computedMax: 0,
-			currentValue: this.modelValue
-		}
-	},
-	computed: {
-		prefix() {
-			return 'sh-split'
-		},
-		paneClasses() {
-			return [
-				`${this.prefix}-pane`,
-				{
-					[`${this.prefix}-pane-moving`]: this.isMoving
-				}
-			]
-		},
-		isHorizontal() {
-			return this.mode === 'horizontal'
-		},
-		anotherOffset() {
-			return 100 - this.offset
-		},
-		valueIsPx() {
-			return typeof this.modelValue === 'string'
-		},
-		offsetSize() {
-			return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
+	setup(props, context) {
+		const vm = getCurrentInstance()
+		const { $vUtils } = vm.proxy
+		const { emit, slots } = context
+
+		const splitRef = ref()
+		const offset = ref(0)
+		const initOffset = ref(0)
+		const oldOffset = ref(0)
+		const isMoving = ref(false)
+		const computedMin = ref(0)
+		const computedMax = ref(0)
+		const currentValue = ref(props.modelValue)
+
+		const paneClasses = computed(() => {
+			return {
+				'sh-split-pane': true,
+				'sh-split-pane-moving': props.isMoving
+			}
+		})
+		const isHorizontal = computed(() => {
+			return props.mode === 'horizontal'
+		})
+		const anotherOffset = computed(() => {
+			return 100 - offset.value
+		})
+		const valueIsPx = computed(() => {
+			return typeof props.modelValue === 'string'
+		})
+		const offsetSize = computed(() => {
+			return isHorizontal.value ? 'offsetWidth' : 'offsetHeight'
+		})
+
+		const px2percent = (numerator, denominator) => {
+			return parseFloat(numerator) / parseFloat(denominator)
 		}
-	},
-	watch: {
-		modelValue(val) {
-			this.resetOffset(val)
+		const getComputedThresholdValue = type => {
+			let size = splitRef.value[offsetSize.value]
+			if (valueIsPx.value) return typeof props[type] === 'string' ? props[type] : size * props[type]
+			else return typeof props[type] === 'string' ? px2percent(props[type], size) : props[type]
 		}
-	},
-	created() {},
-	mounted() {
-		this.computeOffset()
-	},
-	beforeUnmount() {},
-	methods: {
-		px2percent(numerator, denominator) {
-			return parseFloat(numerator) / parseFloat(denominator)
-		},
-		getComputedThresholdValue(type) {
-			let size = this.$refs.splitWrap[this.offsetSize]
-			if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type]
-			else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type]
-		},
-		getMin(value1, value2) {
-			if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
+		const getMin = (value1, value2) => {
+			if (valueIsPx.value) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
 			else return Math.min(value1, value2)
-		},
-		getMax(value1, value2) {
-			if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
+		}
+		const getMax = (value1, value2) => {
+			if (valueIsPx.value) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
 			else return Math.max(value1, value2)
-		},
-		getAnotherOffset(value) {
+		}
+		const getAnotherOffset = value => {
 			let res = 0
-			if (this.valueIsPx) res = `${this.$refs.splitWrap[this.offsetSize] - parseFloat(value)}px`
+			if (valueIsPx.value) res = `${splitRef.value[offsetSize.value] - parseFloat(value)}px`
 			else res = 1 - value
 			return res
-		},
-		handleMove(e) {
-			let pageOffset = this.isHorizontal ? e.pageX : e.pageY
-			let offset = pageOffset - this.initOffset
-			let outerWidth = this.$refs.splitWrap[this.offsetSize]
-			let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth)
-			let anotherValue = this.getAnotherOffset(value)
-			if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin)
-			if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax))
-			e.atMin = this.currentValue === this.computedMin
-			e.atMax = this.valueIsPx ? this.getAnotherOffset(this.currentValue) === this.computedMax : this.getAnotherOffset(this.currentValue).toFixed(5) === this.computedMax.toFixed(5)
-			this.emitValue(value)
-			this.$emit('moveing', e)
-		},
-		handleUp() {
-			this.isMoving = false
-			this.$vUtils.offListener(document, 'mousemove', this.handleMove)
-			this.$vUtils.offListener(document, 'mouseup', this.handleUp)
-			this.$emit('move-end')
-		},
-		handleMousedown(e) {
-			this.initOffset = this.isHorizontal ? e.pageX : e.pageY
-			this.oldOffset = this.currentValue
-			this.isMoving = true
-			this.$vUtils.onListener(document, 'mousemove', this.handleMove)
-			this.$vUtils.onListener(document, 'mouseup', this.handleUp)
-			this.$emit('move-start')
-		},
-		computeOffset() {
-			this.computedMin = this.getComputedThresholdValue('min')
-			this.computedMax = this.getComputedThresholdValue('max')
-			this.offset = ((this.valueIsPx ? this.px2percent(this.currentValue, this.$refs.splitWrap[this.offsetSize]) : this.currentValue) * 10000) / 100
-			return this.$nextTick()
-		},
-		resetOffset(val) {
-			if (val !== this.currentValue) {
-				this.currentValue = val
-				this.computeOffset()
+		}
+		const handleMove = e => {
+			let pageOffset = isHorizontal.value ? e.pageX : e.pageY
+			let offset = pageOffset - initOffset.value
+			let outerWidth = splitRef.value[offsetSize.value]
+			let value = valueIsPx.value ? `${parseFloat(oldOffset.value) + offset}px` : px2percent(outerWidth * oldOffset.value + offset, outerWidth)
+			let anotherValue = getAnotherOffset(value)
+			if (parseFloat(value) <= parseFloat(computedMin.value)) value = getMax(value, computedMin.value)
+			if (parseFloat(anotherValue) <= parseFloat(computedMax.value)) value = getAnotherOffset(getMax(anotherValue, computedMax.value))
+			e.atMin = currentValue.value === computedMin.value
+			e.atMax = valueIsPx.value ? getAnotherOffset(currentValue.value) === computedMax.value : getAnotherOffset(currentValue.value).toFixed(5) === computedMax.value.toFixed(5)
+			emitValue(value)
+			emit('moveing', e)
+		}
+		const handleUp = () => {
+			isMoving.value = false
+			$vUtils.offListener(document, 'mousemove', handleMove)
+			$vUtils.offListener(document, 'mouseup', handleUp)
+			emit('move-end')
+		}
+		const handleMousedown = e => {
+			initOffset.value = isHorizontal.value ? e.pageX : e.pageY
+			oldOffset.value = currentValue.value
+			isMoving.value = true
+			$vUtils.onListener(document, 'mousemove', handleMove)
+			$vUtils.onListener(document, 'mouseup', handleUp)
+			emit('move-start')
+		}
+		const computeOffset = () => {
+			computedMin.value = getComputedThresholdValue('min')
+			computedMax.value = getComputedThresholdValue('max')
+			offset.value = ((valueIsPx.value ? px2percent(currentValue.value, splitRef.value[offsetSize.value]) : currentValue.value) * 10000) / 100
+			// return nextTick()
+		}
+		const resetOffset = val => {
+			if (val !== currentValue.value) {
+				currentValue.value = val
+				computeOffset()
 			}
-		},
-		emitValue(value) {
-			this.resetOffset(value)
-			this.$emit('update:modelValue', value)
+		}
+		const emitValue = value => {
+			resetOffset(value)
+			emit('update:modelValue', value)
+		}
+
+		watch(
+			() => props.modelValue,
+			val => {
+				resetOffset(val)
+			}
+		)
+
+		return {
+			splitRef,
+			isMoving,
+			isHorizontal,
+			anotherOffset,
+			paneClasses,
+			offset,
+			computeOffset,
+			handleMousedown
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss">

package/packages/components/global-components/sh-table/components/importModal.vue

@@ -49,9 +49,9 @@
 </template>
 
 <script>
-import excelToJson from '../js/excel_to_json'
+import { defineComponent, computed, getCurrentInstance, ref, onBeforeMount } from 'vue'
 import ExcelJS from 'exceljs'
-export default {
+export default defineComponent({
 	name: 'TableImport',
 	props: {
 		visible: {
@@ -103,70 +103,61 @@ export default {
 		}
 	},
 	emits: ['confirm', 'update:visible'],
-	data() {
-		return {
-			importTableData: [],
-			importErrorData: [],
-			modalLoading: false,
-			showProgress: false,
-			progressPercent: 0
-		}
-	},
-	computed: {
-		tableGlobalConfig() {
-			return Object.assign({ checkbox: false, seq: true, zoom: false, title: true, tableName: '导入预览' }, this.globalConfig)
-		},
-		tableColumns() {
-			return this.columns.filter(item => !(['seq', 'checkbox', 'radio'].includes(item.type) || item.renderName === '$vGlobalOption'))
-		}
-	},
-	watch: {},
-	created() {
-		this.initCreated()
-	},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const shtable = ref()
+
+		const importTableData = ref([])
+		const importErrorData = ref([])
+		const modalLoading = ref(false)
+		const showProgress = ref(false)
+		const progressPercent = ref(0)
+
+		const tableGlobalConfig = computed(() => Object.assign({ checkbox: false, seq: true, zoom: false, title: true, tableName: '导入预览' }, props.globalConfig))
+		const tableColumns = computed(() => props.columns.filter(item => !(['seq', 'checkbox', 'radio'].includes(item.type) || item.renderName === '$vGlobalOption')))
+
 		// 初始化
-		initCreated() {
-			this.showProgress = false
-			this.progressPercent = 0
-			this.importTableData = []
-		},
+		const initCreated = () => {
+			showProgress.value = false
+			progressPercent.value = 0
+			importTableData.value = []
+		}
 		// 弹窗关闭
-		onModalClose() {
-			this.$emit('update:visible', false)
-		},
+		const onModalClose = () => {
+			emit('update:visible', false)
+		}
 		// 确认导入数据按钮
-		async handleImportDataBtn(type = 'all') {
-			let importData = type === 'all' ? this.importTableData : this.$refs.shtable.getSelectionData()
+		const handleImportDataBtn = async (type = 'all') => {
+			let importData = type === 'all' ? importTableData.value : shtable.value.getSelectionData()
 			if (!importData || !Array.isArray(importData) || importData.length < 1) {
-				this.msginfo('未导入数据')
+				proxy.msginfo('未导入数据')
 				return false
 			}
-			if (this.needValidate) {
-				let validateErrMap = await this.handleImportDataValidate(importData)
+			if (props.needValidate) {
+				let validateErrMap = await handleImportDataValidate(importData)
 				if (validateErrMap) {
-					this.msgerror('导入校验失败，请检查数据')
+					proxy.msgerror('导入校验失败，请检查数据')
 					return validateErrMap
 				}
 			}
-			this.$emit('confirm', importData)
-			this.onModalClose()
-		},
+			emit('confirm', importData)
+			onModalClose()
+		}
 		// 导入数据验证
-		async handleImportDataValidate(rows) {
-			return this.$refs.shtable.validate(rows)
-		},
+		const handleImportDataValidate = async rows => {
+			return shtable.value.validate(rows)
+		}
 		// 下载导入模板按钮
-		handleDownloadTemplateBtn() {
-			const parentTable = this.$refs.shtable.tableRef()
-			if (typeof this.downloadTemplateCallback === 'function') {
-				this.downloadTemplateCallback()
+		const handleDownloadTemplateBtn = () => {
+			const parentTable = shtable.value.tableRef.value
+			if (typeof props.downloadTemplateCallback === 'function') {
+				props.downloadTemplateCallback()
 			}
 			let defaultOption = {
 				filename: '模板',
-				sheetName: this.globalConfig.filename || '模板',
+				sheetName: props.globalConfig.filename || '模板',
 				type: 'xlsx',
 				original: false,
 				download: true,
@@ -175,59 +166,59 @@ export default {
 				columns: parentTable.getColumns().filter(item => item.type !== 'seq'),
 				data: [],
 				afterExportMethod: options => {
-					this.handleDownloadTemplateFinished(options)
+					handleDownloadTemplateFinished(options)
 				}
 			}
-			parentTable.exportData(Object.assign(defaultOption, this.importOption))
-		},
+			parentTable.exportData(Object.assign(defaultOption, props.importConfig))
+		}
 		// 下载导入模板成功回调
-		handleDownloadTemplateFinished(options) {
-			if (typeof this.downloadTemplateFinished === 'function') {
-				this.downloadTemplateFinished(options)
+		const handleDownloadTemplateFinished = options => {
+			if (typeof props.downloadTemplateFinished === 'function') {
+				props.downloadTemplateFinished(options)
 			}
-			this.msgsuccess('下载模板完成！')
-		},
+			proxy.msgsuccess('下载模板完成！')
+		}
 		// 选择导入文件按钮
-		async handleImportFileBtn() {
+		const handleImportFileBtn = async () => {
 			try {
-				const { file } = await this.$vTable.readFile({
+				const { file } = await proxy.$vTable.readFile({
 					types: ['xlsx', 'xls']
 				})
-				if (typeof this.importFileCallback === 'function') {
-					this.importFileCallback(file)
+				if (typeof props.importFileCallback === 'function') {
+					props.importFileCallback(file)
 				}
-				let fileRes = await this.readFile(file)
-				let { results, errDatas } = this.dealImportTableData(this.tableColumns, fileRes)
-				this.importTableData = results
-				this.importErrorData = errDatas
+				let fileRes = await readFile(file)
+				let { results, errDatas } = dealImportTableData(tableColumns.value, fileRes)
+				importTableData.value = results
+				importErrorData.value = errDatas
 				setTimeout(() => {
-					this.showProgress = false
+					showProgress.value = false
 				}, 2000)
-				if (typeof this.importFileFinished === 'function') {
-					this.importFileFinished(options)
+				if (typeof props.importFileFinished === 'function') {
+					props.importFileFinished(options)
 				}
-				this.msgsuccess('导入完成！')
+				proxy.msgsuccess('导入完成！')
 			} catch (e) {
-				this.msgerror(e.message || e)
+				proxy.msgerror(e.message || e)
 			}
-		},
+		}
 		// 读取文件
-		async readFile(file) {
+		const readFile = async file => {
 			return new Promise((resolve, reject) => {
 				const reader = new FileReader()
 				reader.readAsArrayBuffer(file)
 				reader.onloadstart = e => {
-					this.modalLoading = true
-					this.showProgress = true
+					modalLoading.value = true
+					showProgress.value = true
 				}
 				reader.onprogress = e => {
-					this.progressPercent = Math.round((e.loaded / e.total) * 100)
+					progressPercent.value = Math.round((e.loaded / e.total) * 100)
 				}
 				reader.onerror = e => {
 					reject(new Error('文件读取出错'))
 				}
 				reader.onload = e => {
-					this.modalLoading = false
+					modalLoading.value = false
 					const workbook = new ExcelJS.Workbook()
 					const data = e.target.result
 					workbook.xlsx.load(data).then(wb => {
@@ -246,11 +237,10 @@ export default {
 					})
 				}
 			})
-		},
+		}
 		// 根据表格读取数据生成表格数据
-		dealImportTableData(columns, records) {
-			const { $vUtils } = this
-			let fields = this.generateColumnsAll(columns)
+		const dealImportTableData = (columns, records) => {
+			let fields = generateColumnsAll(columns)
 			let errDatas = []
 			let results = records.map((row, rowIndex) => {
 				const item = {}
@@ -295,12 +285,12 @@ export default {
 				return item
 			})
 			return { results, errDatas }
-		},
+		}
 		// 生成全表头
-		generateColumnsAll(columns, resultColumns = []) {
+		const generateColumnsAll = (columns, resultColumns = []) => {
 			columns.forEach((column, index) => {
 				if (column.children && Array.isArray(column.children) && column.children.length) {
-					this.generateColumnsAll(column.children, resultColumns)
+					generateColumnsAll(column.children, resultColumns)
 				} else {
 					if (column.field) {
 						resultColumns.push({
@@ -314,8 +304,27 @@ export default {
 			})
 			return resultColumns
 		}
+
+		onBeforeMount(() => {
+			initCreated()
+		})
+
+		return {
+			shtable,
+			modalLoading,
+			showProgress,
+			progressPercent,
+			importErrorData,
+			tableColumns,
+			importTableData,
+			tableGlobalConfig,
+			onModalClose,
+			handleDownloadTemplateBtn,
+			handleImportFileBtn,
+			handleImportDataBtn
+		}
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped>

package/packages/components/global-components/sh-table/components/sh-column.vue

@@ -0,0 +1,62 @@
+<template>
+	<vxe-colgroup v-if="isGroup" v-bind="groupConfig">
+		<template v-for="(child, childIndex) in column.children" :key="childIndex">
+			<sh-column :column="child" />
+		</template>
+	</vxe-colgroup>
+	<vxe-column v-else v-bind="columnConfig">
+		<template v-if="column.slots">{{ renderSlots }}</template>
+	</vxe-column>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'
+import { turnColumnItemFilters } from '../js/tableMethods'
+export default defineComponent({
+	name: 'ShColumn',
+	props: {
+		column: {
+			type: Object
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const shTable = inject('ShTableInstance')
+
+		const isGroup = computed(() => {
+			return proxy.hasChildren(props.column)
+		})
+		const columnConfig = computed(() => {
+			let renderObj = { name: props.column.renderName, props: props.column.renderProps }
+			let config = Object.assign({}, shTable.columnObjConfig.value, props.column)
+			if (props.column.readonly) {
+				config.cellRender = config.cellRender || renderObj
+			} else {
+				config.editRender = config.editRender || renderObj
+			}
+			if (config.filter === true || Number(config.filter) === 1) {
+				shTable.turnColumnItemFilters(config, renderObj.props)
+			}
+			return $vUtils.omit(config, ['renderName', 'renderProps', 'renderRequire', 'requireProps'])
+		})
+		const groupConfig = computed(() => {
+			return $vUtils.omit(columnConfig.value, ['children', 'cellRender', 'editRender'])
+		})
+		const renderSlots = () => {
+			return Object.keys(column.slots).map(slotKey => {
+				return shTable.slots[slotKey]
+			})
+		}
+
+		return {
+			isGroup,
+			columnConfig,
+			groupConfig,
+			renderSlots
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss"></style>