sh-view 2.8.15 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.8.15",
+  "version": "2.9.0",
   "description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
   "main": "packages/index.js",
   "typings": "types/index.d.ts",
@@ -32,7 +32,7 @@
     "jszip": "^3.10.1",
     "lunar-typescript": "^1.6.10",
     "popper.js": "^1.16.1",
-    "sh-tools": "^2.2.10",
+    "sh-tools": "^2.2.12",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-masonry": "^0.16.0",

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

@@ -1,5 +1,5 @@
 import { computed, onBeforeMount, ref, watch } from 'vue'
-import { getFieldRules } from '../../sh-table/js/tableMethods'
+import { formulaReplaceAll, getFieldRules } from '../../sh-table/js/tableMethods'
 
 // 表单默认配置
 const formConfigDefault = {
@@ -35,11 +35,17 @@ export default function (props, context, proxy, isForm) {
 	const formRules = ref({})
 
 	const formBindConfig = computed(() => {
+		let formulaMap = {}
+		$vUtils.eachTree(props.items, column => {
+			let rformula = $vUtils.get(column, 'renderProps.formula')
+			if (rformula) formulaMap[column.field] = rformula
+		})
 		return Object.assign({ size: isForm ? 'medium' : 'small' }, formConfigDefault, props.formConfig, {
 			items: formItems.value,
 			data: props.data,
 			rules: props.valid ? formRules.value : {},
-			validConfig: props.validConfig
+			validConfig: props.validConfig,
+			formulaMap: formulaReplaceAll(formulaMap)
 		})
 	})
 
@@ -63,8 +69,8 @@ export default function (props, context, proxy, isForm) {
 	}
 	// 表单项编辑回调
 	const onFormEditClosed = async params => {
-		emit('edit-closed', params)
 		Object.assign(props.data, params.data)
+		emit('edit-closed', params)
 	}
 	// 表单校验不通过
 	const onFormSubmitInvalid = params => {

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

@@ -240,12 +240,10 @@ export default {
 			return {}
 		}
 	},
-	scrollX: {
-		type: Object
-	},
-	scrollY: {
-		type: Object
-	},
+	scrollX: Object,
+	scrollY: Object,
+	params: Object,
+	footerData: Array,
 
 	// 扩展配置
 	disabled: {

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

@@ -171,3 +171,22 @@ export const getTransfarFields = (oriArr = [], { slots, columnObj, isSearch }) =
 	})
 	return { columnsArr, columnsFlatArr, formItemsArr, rules }
 }
+// 递归替换嵌套依赖公式
+export const formulaReplaceAll = formulaMap => {
+	Object.keys(formulaMap).forEach(key => {
+		let dowhile = true
+		while (dowhile) {
+			let regUKey = formulaMap[key].match(/\$?[a-zA-Z0-9_.]{0,}\{[A-Za-z0-9_.]{1,}\}/gi) || []
+			regUKey = regUKey.filter(item => item.startsWith('${') || item.startsWith('{')).map((key, keyIndex) => key.replace(/\$?{|}/gi, ''))
+			dowhile = !regUKey.every((keyc, indexkey) => {
+				if (formulaMap[keyc]) {
+					formulaMap[key] = formulaMap[key].replace('{' + keyc + '}', '(' + formulaMap[keyc] + ')')
+					return false
+				} else {
+					return true
+				}
+			})
+		}
+	})
+	return formulaMap
+}

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

@@ -1,5 +1,5 @@
 import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue'
-import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields } from './tableMethods'
+import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields, formulaReplaceAll } from './tableMethods'
 
 // 记录自定义参数，传给vxe要过滤掉
 let omitProps = [
@@ -39,6 +39,7 @@ const exportAndPrintDefault = {
 	isAllExpand: true,
 	download: true,
 	useStyle: false,
+	isUnit: false,
 	columnFilterMethod: columnDefaultFilterMethod
 }
 const menuConfigDefault = {
@@ -129,18 +130,19 @@ export default function (props, context, proxy, isGrid) {
 		return hasTree.value ? Object.assign({}, props.treeConfig) : null
 	})
 	const tableSeqConfig = computed(() => {
+		const pagerConfig = tablePagerConfig.value
+		const pageStart = (+pagerConfig.pageSize || 50) * ((+pagerConfig.currentPage || 1) - 1)
 		return {
-			seqMethod: ({ $table, seq, $seq, $$seq, $rowIndex }) => {
-				const tablePage = tablePagerConfig.value.enabled
-				if ($$seq) {
-					return $$seq
-				} else if (tablePage) {
-					const pageStart = (+tablePagerConfig.value.pageSize || 50) * ((+tablePagerConfig.value.currentPage || 1) - 1)
-					return hasTree.value && $seq ? Number(pageStart) + Number($seq) + '.' + seq : Number(pageStart) + Number(seq)
-				} else if (hasTree.value) {
-					return $seq ? $seq + '.' + seq : seq
+			seqMethod: ({ $table, seq, $rowIndex }) => {
+				if (pagerConfig && pagerConfig.enabled) {
+					if (String(seq).includes('.')) {
+						const seqIndex = seq.indexOf('.')
+						const seqStart = seq.substr(0, seqIndex)
+						return $vUtils.add(pageStart, seqStart) + seq.substr(seqIndex)
+					}
+					return $vUtils.add(pageStart, seq)
 				}
-				return seq === -1 ? $rowIndex + 1 : seq
+				return seq
 			}
 		}
 	})
@@ -201,6 +203,11 @@ export default function (props, context, proxy, isGrid) {
 	const tableBindConfig = computed(() => {
 		let defaultProps = { id: `sh-table-${$route.fullPath}`, footerMethod: tableFooterMethod, footerSpanMethod: tableFooterSpanMethod }
 		let tableProps = $vUtils.omit(props, (val, key) => omitProps.includes(key) || $vUtils.isNone(val))
+		let formulaMap = {}
+		$vUtils.eachTree(props.columns, column => {
+			let rformula = $vUtils.get(column, 'renderProps.formula')
+			if (rformula) formulaMap[column.field] = rformula
+		})
 		let shProps = {
 			data: tableViewData.value,
 			stripe: props.stripe && !tableTreeConfig.value,
@@ -214,7 +221,8 @@ export default function (props, context, proxy, isGrid) {
 			printConfig: tablePrintConfig.value,
 			moneyConfig: tableMoneyConfig.value,
 			moneyUnit: tableMoneyUnit.value,
-			menuConfig: tableMenuConfig.value
+			menuConfig: tableMenuConfig.value,
+			formulaMap: formulaReplaceAll(formulaMap)
 		}
 		if (tableMenuConfig.value.enabled) shProps.menuConfig = tableMenuConfig.value
 		return Object.assign(defaultProps, tableProps, shProps)
@@ -243,8 +251,8 @@ export default function (props, context, proxy, isGrid) {
 	// 获取全部数据
 	// visible为true获取视图数据
 	const getFullData = params => {
-		const { visible = false, deleteXid = false } = params || {}
-		let fullData = tableRef.value.internalData.afterFullData
+		const { visible = false, deleteXid = false, datas = null } = params || {}
+		let fullData = datas || tableRef.value.internalData.afterFullData
 		let data = $vUtils.clone(fullData, true)
 		const columns = tableRef.value.getColumns()
 		let rnameColumns = columns.filter(col => col.rname)
@@ -252,8 +260,14 @@ export default function (props, context, proxy, isGrid) {
 			let { property, rname, rprops } = col
 			data.forEach(row => {
 				let cellValue = $vUtils.get(row, property)
-				let { rvalue, rtext } = $vUtils.formatRender(cellValue, property, row, rname, rprops, proxy)
-				$vUtils.set(row, property, visible ? rtext : rvalue)
+				let { rvalue, rtext } = $vUtils.formatRender(cellValue, property, row, rname, { ...rprops, commafy: false }, proxy)
+				if (rprops.bill && rprops.bill !== '0') {
+					$vUtils.set(row, property, rvalue)
+				} else if (visible) {
+					$vUtils.set(row, property, rtext)
+				} else {
+					$vUtils.set(row, property, rvalue)
+				}
 				if (deleteXid) delete row._XID
 			})
 		})
@@ -262,10 +276,18 @@ export default function (props, context, proxy, isGrid) {
 	// 表格打印、导出统一导出前渲染数据
 	const getExportPrintDataByOption = (obj = {}, type) => {
 		let { options, content } = obj
-		let { data, columns, mode, original } = options
-		if (!data) {
-			options.data = mode === 'selected' ? getSelectionData() : getFullData({ visible: !original })
-		}
+		let { data, columns, mode, original, isUnit } = options
+		let exportDatas = data
+		$vUtils.eachTree(columns, col => {
+			const { rname, rprops } = col
+			if (rname === '$vMoney' && isUnit && rprops.moneyOption?.label && !col.headerExportMethod && !original) {
+				col.headerExportMethod = () => {
+					return `${col.title}(${rprops.moneyOption.label})`
+				}
+			}
+		})
+		if (mode === 'selected') exportDatas = getSelectionData()
+		options.data = getFullData({ deleteXid: true, visible: !original, datas: exportDatas })
 		return type === 'print' ? content : obj
 	}
 
@@ -274,8 +296,9 @@ export default function (props, context, proxy, isGrid) {
 		const { footerCalculate } = props
 		let footerData = []
 		let footerCalculateList = footerCalculate.calculate || []
+		let fullData = getFullData({ deleteXid: true, datas: data })
 		footerCalculateList.forEach(computeType => {
-			footerData.push(tableFooterCompute(columns, data, computeType, footerCalculate[computeType]))
+			footerData.push(tableFooterCompute(columns, fullData, computeType, footerCalculate[computeType]))
 		})
 		return footerData
 	}
@@ -369,19 +392,6 @@ export default function (props, context, proxy, isGrid) {
 	}
 	// 只对 edit-config 配置时有效，单元格编辑状态下被关闭时会触发该事件
 	const onEditClosed = params => {
-		// 此操作火狐浏览器（bug(vxe):编辑后不触发渲染器的blur问题）
-		const userAgent = navigator.userAgent
-		if (userAgent.indexOf('Firefox') !== -1) {
-			let { row, column } = params
-			let editModel = $vUtils.get(column, 'params.__RowEditModelValue')
-			if (editModel !== undefined) {
-				if (['$vMoney'].includes(column.rname) && !$vUtils.isNone(editModel)) editModel = $vUtils.multiply(editModel, column.rprops.moneyUnit || 1)
-				let { rvalue, rtext } = $vUtils.formatRender(editModel, column.property, row, column.rname, column.rprops, proxy, true)
-				editModel = rvalue
-				$vUtils.set(row, column.property, editModel)
-				delete column.params.__RowEditModelValue
-			}
-		}
 		emit('edit-closed', params)
 	}
 	// 只对 edit-config 配置时有效，单元格被激活编辑时会触发该事件

package/packages/vxeTable/render/cell/vxe-render-input.vue

@@ -6,7 +6,7 @@
 				<span v-else @click="vxeInputPrefixClick">{{ rprops.prefixText }}</span>
 			</span>
 			<span v-else-if="controlButton" class="control-btn before" @click="vxeControlClick(false)">-</span>
-			<vxe-input v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback"></vxe-input>
+			<vxe-input v-model="renderValue" v-bind="rprops" :size="rsize" :immediate="false" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback"></vxe-input>
 			<span v-if="rprops.suffixText && rform" class="suffix">
 				<vxe-button v-if="suffixButton" v-bind="psButtonConfig" @click="vxeInputSuffixClick">{{ rprops.suffixText }}</vxe-button>
 				<span v-else @click="vxeInputSuffixClick">{{ rprops.suffixText }}</span>

package/packages/vxeTable/render/cell/vxe-render-money.vue

@@ -1,7 +1,7 @@
 <template>
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform, 'td-all': rprops.bill }">
 		<template v-if="redit || isEditAll">
-			<vxe-input v-model="renderValue" type="number" v-bind="rprops" :size="rsize" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback" />
+			<vxe-input v-model="renderValue" type="number" v-bind="rprops" :size="rsize" :immediate="false" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback" />
 		</template>
 		<template v-else-if="rprops.bill">
 			<template v-for="(bil, bilindex) in billGroups" :key="bilindex">

package/packages/vxeTable/render/globalRenders.jsx

@@ -39,7 +39,7 @@ let defaultPublicProps = {
 
 // 渲染器个性化默认配置
 let defaultProps = {
-	$vInput: { type: 'text', placeholder: '请输入', transfer: true, digits: 2, prefixType: 'text', suffixType: 'text', immediate: false },
+	$vInput: { type: 'text', placeholder: '请输入', transfer: true, digits: 2, prefixType: 'text', suffixType: 'text' },
 	$vTextArea: { placeholder: '请输入', rows: 2, transfer: true, resize: 'none', showWordCount: true },
 	$vSelect: { placeholder: '请选择', filterable: true, transfer: true, showType: 'text', tagColor: 'default', split: ',', options: [] },
 	$vTree: { placeholder: '请选择', transfer: true, split: ',', nodeKey: 'id', labelField: 'label' },
@@ -73,12 +73,13 @@ const getFixedProp = (renderOpts, params) => {
 		}
 	})
 	const contextAttrs = $grid?.context?.attrs || $table?.context?.attrs || {}
-	if (['$vMoney'].includes(name) && contextAttrs.moneyConfig?.enabled && contextAttrs.moneyUnit && !rturnProps.bill && rturnProps.bill !== '0') {
+	if (['$vMoney'].includes(name) && contextAttrs.moneyConfig?.enabled && contextAttrs.moneyUnit) {
 		let moneyOption = contextAttrs.moneyConfig?.options.find(item => item.value === contextAttrs.moneyUnit)
 		rturnProps.moneyUnit = contextAttrs.moneyUnit
 		rturnProps.moneyOption = moneyOption
 		if (moneyOption && moneyOption.digits) rturnProps.digits = moneyOption.digits
 	}
+	rturnProps.formulaMap = contextAttrs.formulaMap
 	if (column) {
 		column.rname = name
 		column.rprops = rturnProps

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

@@ -27,7 +27,6 @@ export default function (props, context, proxy) {
 	// 初始化数据
 	const initData = () => {
 		let keyValue = $vUtils.get(props.rdata, props.rkey)
-		if (keyValue && $vUtils.isEqual(keyValue, renderValue.value)) return
 		formatValueFun(keyValue)
 	}
 
@@ -48,12 +47,7 @@ export default function (props, context, proxy) {
 		}
 	}
 	// 输入框变化
-	const vxeInputChange = async ({ value, $event }) => {
-		// 此操作火狐浏览器（bug(vxe):编辑后不触发渲染器的blur问题）触发edit-closed，故在edit-close重新赋值
-		if (!rform.value) {
-			$vUtils.set(props.rparams.column, 'params.__RowEditModelValue', value)
-		}
-	}
+	const vxeInputChange = async ({ value, $event }) => {}
 	// 输入框变化回调
 	const vxeChangeCallBack = async ({ value, $event }) => {
 		setRenderValue(value)
@@ -81,26 +75,28 @@ export default function (props, context, proxy) {
 			let { rvalue, rtext } = formatValueFun(cellValue, true)
 			cellValue = rvalue
 		}
+		$vUtils.set(props.rdata, props.rkey, cellValue)
 		if (rform.value) {
 			let { $form } = props.rparams
 			$form.context.emit('edit-closed', props.rparams)
 		}
-		$vUtils.set(props.rdata, props.rkey, cellValue)
 	}
 	// 格式化值formatValue
 	const formatValueFun = (value, editable) => {
 		if (props.rparams.type === 'footer') {
 			const { items, itemIndex } = props.rparams
-			const { moneyUnit, digits } = props.rprops
+			const { moneyUnit, digits, type, commafy } = props.rprops
 			let footerText = items[itemIndex]
 			if (props.rname === '$vMoney') footerText = $vUtils.truncate($vUtils.divide(items[itemIndex], moneyUnit), digits)
-			if (props.rprops.commafy) footerText = $vUtils.commafy(footerText, { digits })
+			else if (['integer'].includes(type)) footerText = $vUtils.toInteger(footerText)
+			else if (['number', 'float'].includes(type)) footerText = $vUtils.truncate(footerText, digits)
+			if (commafy) footerText = $vUtils.commafy(footerText, { digits })
 			renderValue.value = items[itemIndex]
 			renderText.value = footerText
 			return
 		}
 		const { rvalue, rtext } = $vUtils.formatRender(value, props.rkey, props.rdata, props.rname, props.rprops, proxy, editable)
-		if (['$vMoney'].includes(props.rname)) {
+		if (props.rname === '$vMoney' && !props.rprops.bill && props.rprops.bill !== '0') {
 			renderValue.value = rtext
 		} else {
 			renderValue.value = rvalue
@@ -125,12 +121,19 @@ export default function (props, context, proxy) {
 
 	watch(
 		() => props.rdata,
-		() => initData(),
+		() => {
+			let keyValue = $vUtils.get(props.rdata, props.rkey)
+			let keyFormula = $vUtils.get(props.rprops, 'formula')
+			if (keyValue && $vUtils.isEqual(keyValue, renderValue.value) && !keyFormula) return
+			initData()
+		},
 		{ deep: true, immediate: true }
 	)
 	watch(
 		() => props.rprops,
-		() => initData()
+		() => {
+			initData()
+		}
 	)
 
 	return {