sh-view 2.5.7 → 2.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.5.7",
+  "version": "2.5.9",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -28,8 +28,7 @@
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
     "popper.js": "^1.16.1",
-    "resize-observer-polyfill": "^1.5.1",
-    "sh-tools": "^2.1.5",
+    "sh-tools": "^2.1.6",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-masonry": "^0.16.0",

package/packages/components/global-components/sh-form/js/useForm.js

@@ -62,9 +62,9 @@ export default function (props, context, proxy, isForm) {
 		emit('reset', params)
 	}
 	// 表单项编辑回调
-	const onFormEditClosed = async (obj, renderbox) => {
-		emit('edit-closed', obj, renderbox)
-		Object.assign(props.data, obj.data)
+	const onFormEditClosed = async params => {
+		emit('edit-closed', params)
+		Object.assign(props.data, params.data)
 	}
 	// 表单校验不通过
 	const onFormSubmitInvalid = params => {
@@ -75,12 +75,12 @@ export default function (props, context, proxy, isForm) {
 		emit('collapse', params)
 	}
 	// 前缀点击事件
-	const onPrefixClick = (params, render) => {
-		emit('prefix-click', params, render)
+	const onPrefixClick = params => {
+		emit('prefix-click', params)
 	}
 	// 后缀点击事件
-	const onSuffixClick = (params, render) => {
-		emit('suffix-click', params, render)
+	const onSuffixClick = params => {
+		emit('suffix-click', params)
 	}
 	// 表单验证方法
 	const validate = callback => {

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

@@ -24,6 +24,10 @@ export default defineComponent({
 			} else {
 				config.editRender = config.editRender || renderObj
 			}
+			if (config.renderName === '$vMoney' && props.column.renderProps.bill) {
+				config.filter = false
+				config.headerClassName += ' header-bill-cell'
+			}
 			if (config.filter === true || Number(config.filter) === 1) {
 				shTable.turnColumnItemFilters(config, renderObj.props)
 			}

package/packages/components/global-components/sh-table/js/props.js

@@ -256,6 +256,7 @@ export default {
 		type: Boolean, // 表格是否可编辑，默认不可编辑
 		default: true
 	},
+	customLayout: Boolean,
 	columnObj: {
 		type: Object,
 		default() {

package/packages/components/global-components/sh-table/js/tableMethods.js

@@ -138,7 +138,7 @@ export const getTransfarFields = (oriArr = [], columnObj, isSearch) => {
 			}
 			if (tar.renderName === '$vMoney' && renderConfig.props.bill) {
 				tar.filter = false
-				tar.headerClassName = tar.headerClassName ? `${tar.headerClassName} header-bill-cell` : 'header-bill-cell'
+				tar.headerClassName += ' header-bill-cell'
 			}
 			// 初始化排序条件
 			if (Number(tar.sortable) === 0 || tar.sortable === 'false') {

package/packages/components/global-components/sh-table/js/useTable.js

@@ -153,7 +153,8 @@ export default function (props, context, proxy, isGrid) {
 	}
 	// 获取全部数据
 	// visible为true获取视图数据
-	const getFullData = ({ visible }) => {
+	const getFullData = params => {
+		const { visible = false, deleteXid = false } = params || {}
 		let data = $vUtils.clone(tableRef.value.getTableData().fullData, true)
 		const columns = tableRef.value.getColumns()
 		let rnameColumns = columns.filter(col => col.rname)
@@ -165,6 +166,7 @@ export default function (props, context, proxy, isGrid) {
 					let { rvalue, rtext } = $vUtils.formatRender(cellValue, property, row, rname, rprops, proxy)
 					$vUtils.set(row, property, visible || ['$vMoney'].includes(rname) ? rtext : rvalue)
 				}
+				if (deleteXid) delete row._XID
 			})
 		})
 		return data
@@ -395,11 +397,11 @@ export default function (props, context, proxy, isGrid) {
 					searchFields.push({ rkey: col.property, rname: renderObj.name, rprops: Object.assign({}, renderObj.props, col.rprops) })
 				}
 			})
-			let fullVisibleData = getFullData({ visible: true })
-			filterData = $vUtils.searchTree(fullVisibleData, row => {
+			filterData = $vUtils.searchTree(props.dataSourse, row => {
 				return searchFields.some(item => {
 					let cellValue = $vUtils.get(row, item.rkey)
-					return $vUtils.trim(cellValue).toLowerCase().indexOf(filterText) > -1
+					let { rtext } = $vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, proxy)
+					return $vUtils.trim(rtext).toLowerCase().indexOf(filterText) > -1
 				})
 			})
 		}
@@ -479,7 +481,7 @@ export default function (props, context, proxy, isGrid) {
 		}
 		let { row: newRow } = await tableRef.value.insertAt(addRows, index)
 		await tableRef.value.setActiveRow(newRow)
-		if (!isTool) emit('toolbaroption', 'add', newRow, tableRef.value)
+		if (isTool) emit('toolbaroption', 'add', newRow, tableRef.value)
 	}
 	// 删除行按钮
 	const handleTableDeleteRow = async (rows, isTool = false) => {
@@ -501,7 +503,7 @@ export default function (props, context, proxy, isGrid) {
 			let keyField = props.rowConfig.keyField || proxy.$vTableSetup.table.rowConfig.keyField
 			selectionRows.value = selectionRows.value.filter(sr => !deleteRows.find(dr => dr[keyField] === sr[keyField]))
 		}
-		if (!isTool) emit('toolbaroption', 'delete', deleteRows, tableRef.value)
+		if (isTool) emit('toolbaroption', 'delete', deleteRows, tableRef.value)
 	}
 
 	watch(

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

@@ -116,11 +116,16 @@
 			@toolbar-button-click="onToolbarButtonClick"
 			@toolbar-tool-click="onToolbarToolClick"
 			@option-click="handleGoptionClick">
-			<template v-for="(column, columnIndex) in tablePrevColumns" :key="columnIndex">
-				<vxe-column v-bind="column"></vxe-column>
+			<template v-if="customLayout">
+				<slot></slot>
 			</template>
-			<template v-for="(column, columnIndex) in columns" :key="columnIndex">
-				<sh-column :column="column"></sh-column>
+			<template v-else>
+				<template v-for="(column, columnIndex) in tablePrevColumns" :key="columnIndex">
+					<vxe-column v-bind="column"></vxe-column>
+				</template>
+				<template v-for="(column, columnIndex) in columns" :key="columnIndex">
+					<sh-column :column="column"></sh-column>
+				</template>
 			</template>
 			<template #empty>
 				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>

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

@@ -169,7 +169,6 @@ export default defineComponent({
 	width: 100%;
 	.toolbar-left {
 		flex: 1;
-		white-space: nowrap;
 		.vxe-radio-button > input:checked + .vxe-radio--label {
 			border-color: var(--vxe-primary-color);
 			background: linear-gradient(-10deg, var(--vxe-primary-color), var(--vxe-primary-lighten-color));

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

@@ -0,0 +1,96 @@
+<template>
+	<div ref="rootRef" class="sh-water-mark">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
+export default defineComponent({
+	name: 'ShWaterMark',
+	props: {
+		content: String,
+		font: {
+			type: String,
+			default: '1.5em Arial'
+		},
+		color: {
+			type: String,
+			default: '#666'
+		},
+		rotate: {
+			type: Number,
+			default: -45
+		},
+		height: {
+			type: Number,
+			default: 150
+		},
+		width: {
+			type: Number,
+			default: 150
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const rootRef = ref()
+		let content = null
+
+		const initWaterMark = () => {
+			if (!rootRef.value) return
+			const parentElement = rootRef.value
+			const watermarkCanvas = document.createElement('canvas')
+			watermarkCanvas.setAttribute('width', `${props.width}`)
+			watermarkCanvas.setAttribute('height', `${props.height}`)
+			const ctx = watermarkCanvas.getContext('2d')
+			ctx.font = `${props.font}`
+			ctx.fillStyle = props.color
+			ctx.textAlign = 'center'
+			ctx.translate(props.width / 2, props.height / 2)
+			ctx.rotate((Math.PI / 180) * props.rotate)
+			ctx.fillText(props.content, 0, 0)
+			const base64Url = watermarkCanvas.toDataURL()
+			if (content) content.remove()
+			content = document.createElement('div')
+			const styles = `position: absolute;
+                        pointer-events: none;
+                        z-index: 9999;
+                        inset: 0;
+                        mix-blend-mode: multiply;
+                        background-repeat:repeat;
+                        background-size: ${props.width}px, ${props.height}px;
+                        background-image:url('${base64Url}');
+                        `
+			content.setAttribute('style', styles)
+			content.classList.add('sh-watermark-box')
+			parentElement.appendChild(content)
+			const observer = new MutationObserver(() => {
+				const wortmarkBox = parentElement.querySelector('.sh-watermark-box')
+				if (!wortmarkBox) {
+					parentElement.appendChild(content)
+				} else if (wortmarkBox.getAttribute('style') !== styles) {
+					wortmarkBox.setAttribute('style', styles)
+				}
+			})
+			observer.observe(parentElement, { attributes: true, subtree: true, childList: true })
+		}
+
+		onMounted(() => {
+			initWaterMark()
+		})
+
+		return {
+			rootRef
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-water-mark {
+	position: relative;
+}
+</style>

package/packages/components/index.js

@@ -31,6 +31,7 @@ import ShToolbar from './global-components/sh-toolbar/index.vue'
 import ShTree from './global-components/sh-tree/index.vue'
 import ShUpload from './global-components/sh-upload/index.vue'
 import ShWaterFall from './global-components/sh-water-fall/index.vue'
+import ShWaterMark from './global-components/sh-water-mark/index.vue'
 import { VxeButton, VxeInput, VxeTextarea, VxeSelect } from 'vxe-table'
 
 const components = {
@@ -66,6 +67,7 @@ const components = {
 	ShTree,
 	ShUpload,
 	ShWaterFall,
+	ShWaterMark,
 
 	ShButton: VxeButton,
 	ShInput: VxeInput,

package/packages/directive/module/resize.js

@@ -1,12 +1,9 @@
-import ResizeObserver from 'resize-observer-polyfill'
-// import { utils } from 'sh-tools'
-// const throttleTime = 200
+import { createResizeEvent, XEResizeObserver } from '../../utils/resize'
 
 export default {
 	beforeMount(el, binding) {
-		// const _callback = utils.throttle(binding.value, throttleTime)
 		const _callback = binding.value
-		el.__observer__ = new ResizeObserver(_callback)
+		el.__observer__ = createResizeEvent(_callback)
 		el.__observer__.observe(el)
 	},
 	unmounted(el, binding) {

package/packages/utils/resize.js

@@ -0,0 +1,70 @@
+import { utils } from 'sh-tools'
+
+let resizeTimeout = null
+const eventStore = []
+const defaultInterval = 500
+
+function eventHandle() {
+	if (eventStore.length) {
+		eventStore.forEach(item => {
+			item.tarList.forEach(observer => {
+				const { target, width, heighe } = observer
+				const clientWidth = target.clientWidth
+				const clientHeight = target.clientHeight
+				const rWidth = clientWidth && width !== clientWidth
+				const rHeight = clientHeight && heighe !== clientHeight
+				if (rWidth || rHeight) {
+					observer.width = clientWidth
+					observer.heighe = clientHeight
+					setTimeout(item.callback)
+				}
+			})
+		})
+		eventListener()
+	}
+}
+
+function eventListener() {
+	clearTimeout(resizeTimeout)
+	resizeTimeout = setTimeout(eventHandle, defaultInterval)
+}
+
+export class XEResizeObserver {
+	// target: Element, width: number, heighe: number
+	tarList = []
+	callback = () => {}
+	constructor(callback) {
+		this.callback = callback
+	}
+	observe(target) {
+		if (target) {
+			const { tarList } = this
+			if (!tarList.some(observer => observer.target === target)) {
+				tarList.push({
+					target,
+					width: target.clientWidth,
+					heighe: target.clientHeight
+				})
+			}
+			if (!eventStore.length) {
+				eventListener()
+			}
+			if (!eventStore.some(item => item === this)) {
+				eventStore.push(this)
+			}
+		}
+	}
+	unobserve(target) {
+		utils.remove(eventStore, item => item.tarList.some(observer => observer.target === target))
+	}
+	disconnect() {
+		utils.remove(eventStore, item => item === this)
+	}
+}
+
+export function createResizeEvent(callback) {
+	if (window.ResizeObserver) {
+		return new window.ResizeObserver(callback)
+	}
+	return new XEResizeObserver(callback)
+}

package/packages/vxeTable/render/globalRenders.jsx

@@ -478,11 +478,8 @@ const filterRenders = {
 		filterMethod({ value, option, cellValue, row, column, $table }) {
 			const { data } = option
 			const { rname, rprops, property } = column
-			if (publicRendersNames.expendRenders.includes(rname)) {
-				let { rtext } = utils.formatRender(cellValue, property, row, rname, rprops, { $vUtils: utils })
-				return String(rtext).toLowerCase().indexOf(data.toLowerCase()) > -1
-			}
-			return String(cellValue).toLowerCase().indexOf(data.toLowerCase()) > -1
+			let { rtext } = utils.formatRender(cellValue, property, row, rname, rprops, { $vUtils: utils })
+			return String(rtext).toLowerCase().indexOf(data.toLowerCase()) > -1
 		}
 	}
 }

package/packages/vxeTable/render/mixin/cell-hooks.js

@@ -34,7 +34,9 @@ export default function (props, context, proxy) {
 	const rsize = computed(() => props.rprops.size || props.rparams.$table?.props?.size || props.rparams.$form?.props?.size)
 	const rform = computed(() => !!props.rparams.$form)
 	const reditmode = computed(() => props.rparams.$table?.props?.editConfig?.mode)
-	const isEditAll = computed(() => !rform.value && reditmode.value === 'all')
+	const isEditAll = computed(() => {
+		return props.rparams.$table?.props?.editConfig?.enabled && reditmode.value === 'all'
+	})
 	const moneyUnitText = computed(() => {
 		let moneyConstant = moneyUnitConstants.find(item => item.value === props.rprops.moneyUnit)
 		return moneyConstant && moneyConstant.label
@@ -46,10 +48,10 @@ export default function (props, context, proxy) {
 		return cnGroups.slice(startIndex, endIndex)
 	})
 	const psButtonConfig = computed(() => {
-		return { disabled: props.rprops.disabled, size: props.rsize, status: 'theme' }
+		return { disabled: props.rprops.disabled, size: props.rsize, status: 'primary' }
 	})
-	const prefixButton = computed(() => props.rprops.prefixType.toLowerCase() === 'button')
-	const suffixButton = computed(() => props.rprops.suffixType.toLowerCase() === 'button')
+	const prefixButton = computed(() => props.rprops.prefixType?.toLowerCase() === 'button')
+	const suffixButton = computed(() => props.rprops.suffixType?.toLowerCase() === 'button')
 
 	// 初始化数据
 	const initData = () => {