sh-view 2.8.13 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.8.13",
+  "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,14 +32,15 @@
     "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",
     "vue-router": "^4.2.4",
-    "vxe-table": "^4.5.20",
+    "vxe-table": "^4.5.21",
     "vxe-table-plugin-export-pdf": "^4.0.1",
     "vxe-table-plugin-export-xlsx": "^4.0.1",
+    "vxe-table-plugin-menus": "^4.0.0",
     "xe-clipboard": "^1.10.2"
   },
   "devDependencies": {

package/packages/components/sh-calendar/index.vue

@@ -568,7 +568,7 @@ export default defineComponent({
 				padding-top: 0;
 			}
 			&.is-month {
-				padding: 20px 5px;
+				padding: 10px 5px;
 			}
 		}
 		&-body {

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/css/index.scss

@@ -49,23 +49,26 @@
             margin-right: 10px;
         }
     }
-    .sh-table-toolbar-wrap{
-        display: flex;
-        flex: 0 0 auto;
+    .sh-table-toolbar{
+        & > .vxe-toolbar{
+            padding: 0.6em;
+            .vxe-button{
+                & + .vxe-custom--wrapper{
+                    margin-left: 0.8em;
+                }
+            }
+            .vxe-custom--wrapper{
+                margin-left: 0;
+            }
+        }
         .sh-table-toolbar-item{
             display: inline-block;
             vertical-align: baseline;
-            font-size: 14px;
-            margin: 5px;
+            margin: 0 0.8em;
             & + .sh-table-toolbar-item{
                 margin-left: 0;
             }
         }
-        .sh-table-toolbar-left{
-            flex: 1;
-        }
-        .sh-table-toolbar-right{
-        }
     }
     // 关键词搜索高亮样式
     .sh-keyword-lighten{

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

@@ -1,7 +1,6 @@
 <template>
 	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
 		<vxe-grid
-			:id="id"
 			ref="tableRef"
 			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
@@ -36,38 +35,34 @@
 					</sh-query>
 				</slot>
 			</template>
-			<template #toolbar>
-				<div class="sh-table-toolbar-wrap">
-					<div class="sh-table-toolbar-left">
-						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
-							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
-						</div>
-						<!--ps:全表搜索不支持反转-->
-						<div v-if="tableGlobalConfig.globalFilter" class="sh-table-toolbar-item">
-							<vxe-input v-model="tableFilterText" v-bind="tableFilterConfig" @blur="handleTableFilter" @clear="handleTableFilter" @search-click="handleTableFilter" />
-							<span v-if="tableFilterData">
-								共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
-							</span>
-						</div>
-						<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
-							<slot name="toolbarLeft"></slot>
-						</div>
-					</div>
-					<div class="sh-table-toolbar-right">
-						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
-							<slot name="toolbarRight"></slot>
-						</div>
-						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
-							<div class="sh-table-toolbar-item">
+			<template v-if="isToolbarSlot" #toolbar>
+				<div class="sh-table-toolbar">
+					<vxe-toolbar ref="toolbarRef" v-bind="tableToolbarConfig">
+						<template #buttons>
+							<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
+								<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
+							</div>
+							<!--ps:全表搜索不支持反转-->
+							<div v-if="tableGlobalConfig.globalFilter" class="sh-table-toolbar-item">
+								<vxe-input v-model="tableFilterText" v-bind="tableFilterConfig" @blur="handleTableFilter" @clear="handleTableFilter" @search-click="handleTableFilter" />
+								<span v-if="tableFilterData">
+									共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
+								</span>
+							</div>
+							<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
+								<slot name="toolbarLeft"></slot>
+							</div>
+						</template>
+						<template #tools>
+							<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
+								<slot name="toolbarRight"></slot>
+							</div>
+							<div class="sh-table-toolbar-item" v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
 								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
 							</div>
+							<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<sh-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
 						</template>
-						<div v-if="tableMoneyConfig.enabled" class="sh-table-toolbar-item">单位：<sh-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
-						<div v-if="tableGlobalConfig.zoom" class="sh-table-toolbar-item">
-							<vxe-button v-if="!tableIsFullscreen" v-ripple :size="size" icon="vxe-icon-zoom-out" @click="handleTableZoomBtn(true)">全屏</vxe-button>
-							<vxe-button v-else v-ripple :size="size" icon="vxe-icon-zoom-in" @click="handleTableZoomBtn(false)">退出全屏</vxe-button>
-						</div>
-					</div>
+					</vxe-toolbar>
 				</div>
 			</template>
 			<template #pagerLeft>
@@ -135,22 +130,8 @@ export default defineComponent({
 
 		const useTableHooks = useTable(props, context, proxy, true)
 
-		const tableIsFullscreen = ref(false) // 表格是否全屏显示状态
-
-		// 表格切换全屏缩放按钮
-		const handleTableZoomBtn = val => {
-			tableIsFullscreen.value = val
-			if (val) {
-				useTableHooks.tableRef.value.zoom()
-			} else {
-				useTableHooks.tableRef.value.revert()
-			}
-		}
-
 		return {
-			...useTableHooks,
-			tableIsFullscreen,
-			handleTableZoomBtn
+			...useTableHooks
 		}
 	}
 })

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

@@ -1,7 +1,7 @@
 export default {
 	id: {
 		type: String,
-		default: 'shtable'
+		default: ''
 	},
 	dataSourse: {
 		type: Array,
@@ -240,12 +240,10 @@ export default {
 			return {}
 		}
 	},
-	scrollX: {
-		type: Object
-	},
-	scrollY: {
-		type: Object
-	},
+	scrollX: Object,
+	scrollY: Object,
+	params: Object,
+	footerData: Array,
 
 	// 扩展配置
 	disabled: {
@@ -270,6 +268,12 @@ export default {
 			return {}
 		}
 	},
+	menuConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
 	footerCalculate: {
 		type: Object,
 		default() {

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 } from 'vue'
-import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields } from './tableMethods'
+import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue'
+import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields, formulaReplaceAll } from './tableMethods'
 
 // 记录自定义参数，传给vxe要过滤掉
 let omitProps = [
@@ -39,14 +39,37 @@ const exportAndPrintDefault = {
 	isAllExpand: true,
 	download: true,
 	useStyle: false,
+	isUnit: false,
 	columnFilterMethod: columnDefaultFilterMethod
 }
+const menuConfigDefault = {
+	header: {
+		options: [
+			[
+				{ code: 'HIDDEN_COLUMN', name: '隐藏' },
+				{ code: 'RESET_COLUMN', name: '取消隐藏' },
+				{ code: 'FIXED_LEFT_COLUMN', name: '固定到左侧' },
+				{ code: 'FIXED_RIGHT_COLUMN', name: '固定到右侧' },
+				{ code: 'CLEAR_FIXED_COLUMN', name: '取消固定' }
+			]
+		]
+	},
+	body: {
+		options: [
+			[
+				{ code: 'SORT_ASC', name: '升序', prefixIcon: 'fa fa-sort-alpha-desc' },
+				{ code: 'SORT_DESC', name: '倒序', prefixIcon: 'fa fa-sort-alpha-desc' },
+				{ code: 'CLEAR_SORT', name: '清除排序' }
+			]
+		]
+	}
+}
 const toolsList = [
-	{ status: 'primary', code: 'addRow', content: '新增行' },
-	{ status: 'danger', code: 'deleteRow', content: '删除行' },
-	{ status: 'primary', code: 'import', icon: 'vxe-icon-upload', content: '导入' },
-	{ status: 'success', code: 'export', icon: 'vxe-icon-download', content: '导出' },
-	{ status: 'warning', code: 'print', icon: 'vxe-icon-print', content: '打印' }
+	{ status: 'primary', code: 'addRow', icon: 'vxe-icon-square-plus', title: '新增行', circle: true },
+	{ status: 'danger', code: 'deleteRow', icon: 'vxe-icon-square-minus', title: '删除行', circle: true },
+	{ status: 'primary', code: 'import', icon: 'vxe-icon-upload', title: '导入', circle: true },
+	{ status: 'success', code: 'export', icon: 'vxe-icon-download', title: '导出', circle: true },
+	{ status: 'warning', code: 'print', icon: 'vxe-icon-print', title: '打印', circle: true }
 ]
 // 表头默认值
 const columnObjDefault = { minWidth: 120, sortable: true, filter: true }
@@ -58,10 +81,11 @@ const columnsMapDefault = {
 }
 
 export default function (props, context, proxy, isGrid) {
-	const { $vUtils, $vTableSetup, $vxePluginNames } = proxy
+	const { $vUtils, $vTableSetup, $vxePluginNames, $route } = proxy
 	const { emit, slots } = context
 
 	const tableRef = ref()
+	const toolbarRef = ref()
 	const renderKey = ref(1) // 渲染key值
 	const selectedRowKeys = ref([]) // table选中keys
 	const selectionRows = ref([]) // table选中records
@@ -106,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
 			}
 		}
 	})
@@ -166,14 +191,23 @@ export default function (props, context, proxy, isGrid) {
 			tableVmConfig.value
 		)
 	})
+	const tableToolbarConfig = computed(() => {
+		return Object.assign({ perfect: true, zoom: tableGlobalConfig.value.zoom, custom: tableGlobalConfig.value.custom }, props.toolbarConfig, tableVmConfig.value)
+	})
+	const tableMenuConfig = computed(() => Object.assign({ enabled: false }, menuConfigDefault, props.menuConfig))
 	const tableFilterConfig = computed(() => Object.assign({ clearable: true, type: 'search', placeholder: '全局关键字搜索' }, tableVmConfig.value))
 	const tableSlots = computed(() => {
 		let disSlots = ['top', 'head', 'foot', 'form', 'toolbar', 'formLeft', 'formRight', 'toolbarLeft', 'toolbarRight', 'pagerLeft', 'pagerRight']
 		return Object.keys(slots).filter(key => !disSlots.includes(key))
 	})
 	const tableBindConfig = computed(() => {
-		let defaultProps = { footerMethod: tableFooterMethod, footerSpanMethod: tableFooterSpanMethod }
+		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,
@@ -186,8 +220,11 @@ export default function (props, context, proxy, isGrid) {
 			exportConfig: tableExportConfig.value,
 			printConfig: tablePrintConfig.value,
 			moneyConfig: tableMoneyConfig.value,
-			moneyUnit: tableMoneyUnit.value
+			moneyUnit: tableMoneyUnit.value,
+			menuConfig: tableMenuConfig.value,
+			formulaMap: formulaReplaceAll(formulaMap)
 		}
+		if (tableMenuConfig.value.enabled) shProps.menuConfig = tableMenuConfig.value
 		return Object.assign(defaultProps, tableProps, shProps)
 	})
 	const importBindConfig = reactive({
@@ -197,6 +234,15 @@ export default function (props, context, proxy, isGrid) {
 		importConfig: props.importConfig,
 		importRules: tableEditRules.value
 	})
+	const isToolbarSlot = computed(() => {
+		const globalFg = tableGlobalConfig.value
+		const toolbarFg = tableToolbarConfig.value
+		const toolsFg = tableTools.value
+		const globalTool = globalFg.title || globalFg.globalFilter
+		const toolbarTool = toolbarFg.import || toolbarFg.export || toolbarFg.print || toolbarFg.refresh || toolbarFg.custom
+		const slotsTool = slots.toolbar || slots.toolbarLeft || slots.toolbarRight
+		return globalTool || toolbarTool || slotsTool || toolsFg.length > 0
+	})
 
 	// 获取选中数据
 	const getSelectionData = () => {
@@ -205,16 +251,23 @@ export default function (props, context, proxy, isGrid) {
 	// 获取全部数据
 	// visible为true获取视图数据
 	const getFullData = params => {
-		const { visible = false, deleteXid = false } = params || {}
-		let data = $vUtils.clone(tableRef.value.getTableData().fullData, true)
+		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)
 		rnameColumns.forEach(col => {
 			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
 			})
 		})
@@ -223,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
 	}
 
@@ -235,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
 	}
@@ -330,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 配置时有效，单元格被激活编辑时会触发该事件
@@ -479,6 +528,7 @@ export default function (props, context, proxy, isGrid) {
 				handleTablePrintBtn()
 				break
 		}
+		emit('toolbar-btn-click', code)
 	}
 	// 表格导出按钮
 	const handleTableExportBtn = options => {
@@ -498,6 +548,17 @@ export default function (props, context, proxy, isGrid) {
 		}
 		return tableRef.value.openPrint(options)
 	}
+	// 关联toolbar
+	const connectToolbar = () => {
+		nextTick(() => {
+			// 将表格和工具栏进行关联
+			const $table = tableRef.value
+			const $toolbar = toolbarRef.value
+			if ($table && $toolbar) {
+				$table.connect($toolbar)
+			}
+		})
+	}
 
 	// 自定义操作列点击事件
 	const handleGoptionClick = async (btnObj, dataObj) => {
@@ -554,9 +615,7 @@ export default function (props, context, proxy, isGrid) {
 		value => {
 			initTableColumns()
 		},
-		{
-			deep: true
-		}
+		{ deep: true }
 	)
 	watch(
 		() => props.dataSourse,
@@ -564,24 +623,27 @@ export default function (props, context, proxy, isGrid) {
 			updateSelection([])
 			updateExpended()
 		},
-		{
-			immediate: true
-		}
+		{ immediate: true }
 	)
 	watch(
 		() => props.editRules,
 		value => {
 			initEditRules(value)
 		},
-		{
-			deep: true,
-			immediate: true
-		}
+		{ deep: true, immediate: true }
+	)
+	watch(
+		() => isToolbarSlot.value,
+		() => {
+			connectToolbar()
+		},
+		{ deep: true, immediate: true }
 	)
 
 	return {
 		slots,
 		tableRef,
+		toolbarRef,
 		renderKey,
 		wrapHeight,
 		tableGlobalConfig,
@@ -590,11 +652,13 @@ export default function (props, context, proxy, isGrid) {
 		tableColumnObjConfig,
 		tablePagerConfig,
 		tableQueryConfig,
+		tableToolbarConfig,
 		tableFilterText,
 		tableFilterConfig,
 		tableFilterData,
 		tableTools,
 		tableSlots,
+		isToolbarSlot,
 		selectionRows,
 		tableBindConfig,
 		importBindConfig,

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

@@ -11,8 +11,8 @@
 		</div>
 		<div v-if="isToolbarSlot" ref="toolbarSlotRef" v-resize="handleResize" class="sh-table-toolbar">
 			<slot name="toolbar">
-				<div class="sh-table-toolbar-wrap">
-					<div class="sh-table-toolbar-left">
+				<vxe-toolbar ref="toolbarRef" v-bind="tableToolbarConfig">
+					<template #buttons>
 						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
 							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
 						</div>
@@ -26,24 +26,21 @@
 						<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
 							<slot name="toolbarLeft"></slot>
 						</div>
-					</div>
-					<div class="sh-table-toolbar-right">
+					</template>
+					<template #tools>
 						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
 							<slot name="toolbarRight"></slot>
 						</div>
-						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
-							<div class="sh-table-toolbar-item">
-								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
-							</div>
-						</template>
+						<div class="sh-table-toolbar-item" v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
+							<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+						</div>
 						<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<sh-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
-					</div>
-				</div>
+					</template>
+				</vxe-toolbar>
 			</slot>
 		</div>
 		<div v-if="isHeadSlot" ref="headSlotRef" v-resize="handleResize" class="sh-table-head"><slot name="head"></slot></div>
 		<vxe-table
-			:id="id"
 			ref="tableRef"
 			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
@@ -93,7 +90,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, getCurrentInstance, provide, ref, reactive } from 'vue'
+import { computed, defineComponent, getCurrentInstance, ref, watch, nextTick } from 'vue'
 import './css/index.scss'
 
 import props from './js/props'
@@ -125,6 +122,7 @@ export default defineComponent({
 		'page-change',
 		'toolbar-button-click',
 		'toolbar-tool-click',
+		'toolbar-btn-click',
 
 		'form-submit',
 		'form-reset',
@@ -145,16 +143,13 @@ export default defineComponent({
 		const footSlotRef = ref()
 		const pagerSlotRef = ref()
 		const bottomSlotRef = ref()
+
 		const tableHeight = ref(props.height)
 
 		const useTableHooks = useTable(props, context, proxy)
 
 		const isTopSlot = computed(() => Boolean(slots.top))
 		const isFormSlot = computed(() => useTableHooks.tableGlobalConfig.value.search || Boolean(slots.form))
-		const isToolbarSlot = computed(() => {
-			const { title, globalFilter } = useTableHooks.tableGlobalConfig.value
-			return title || globalFilter || slots.toolbar || slots.toolbarLeft || slots.toolbarRight || useTableHooks.tableTools.value.length
-		})
 		const isHeadSlot = computed(() => Boolean(slots.head))
 		const isFootSlot = computed(() => Boolean(slots.foot))
 		const isPagerSlot = computed(() => useTableHooks.tablePagerConfig.value.enabled)
@@ -184,7 +179,6 @@ export default defineComponent({
 			tableHeight,
 			isTopSlot,
 			isFormSlot,
-			isToolbarSlot,
 			isHeadSlot,
 			isFootSlot,
 			isPagerSlot,

package/packages/components/sh-tabs/index.vue

@@ -9,10 +9,10 @@
 				<div ref="navScrollRef" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
 					<div ref="navRef" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
 						<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
-							<div v-ripple v-bind="getTabItemBind(tab, tabIndex)" @click="handleChange(tab)">
+							<div v-bind="getTabItemBind(tab, tabIndex)" @click="handleChange(tab)">
 								<slot name="tabItem" v-bind="{ ...tab, isActive: tab[labelKey] === activeKey }">
 									<div v-if="tab.icon" class="sh-tab-icon"><sh-icon :type="tab.icon"></sh-icon></div>
-									<div class="sh-tab-label">{{ tab[labelField] }}</div>
+									<div v-if="tab[labelField]" class="sh-tab-label">{{ tab[labelField] }}</div>
 									<div v-if="getTabIsClosable(tab)" class="sh-tab-close" @click.stop="handleClose(tab)"><sh-icon type="ios-close"></sh-icon></div>
 								</slot>
 							</div>
@@ -445,7 +445,10 @@ export default defineComponent({
 				.sh-tab-icon {
 					display: inline-flex;
 					align-items: center;
-					padding: 0 0.2em 0 0.7em;
+					padding: 0 0.5em;
+					& + .sh-tab-label {
+						padding-left: 0;
+					}
 				}
 				.sh-tab-label {
 					flex: 1;

package/packages/components/sh-tree/css/index.scss

@@ -34,7 +34,7 @@
 }
 
 .sh-tree-select-dropdown {
-    height: 230px
+    height: 230px;
 }
 
 .sh-vxe-tree-table{

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

@@ -94,7 +94,7 @@ export default defineComponent({
 			return ''
 		})
 		const selectConfigIn = computed(() => {
-			return Object.assign({ transfer: true, popupClassName: 'sh-tree-select-dropdown' }, props.globalConfig?.selectConfig, checkConfig.value)
+			return Object.assign({ transfer: true }, props.globalConfig?.selectConfig, checkConfig.value)
 		})
 		const selectInputConfigIn = computed(() => {
 			return Object.assign({ clearable: true, controls: false, transfer: false, suffixIcon: 'vxe-icon-caret-down', placeholder: props.placeholder }, props.globalConfig?.inputConfig)

package/packages/vxeTable/css/index.scss

@@ -162,9 +162,6 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
         .vxe-cell-href-a{
             text-decoration: underline;
         }
-        .vxe-cell--sort{
-            font-size: .9em;
-        }
     }
 }
 

package/packages/vxeTable/index.js

@@ -2,7 +2,9 @@ import VXETable from 'vxe-table'
 import './css/index.scss'
 import VXETablePluginExportXLSX from './plugins/export'
 import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
+import VXETablePluginMenus from 'vxe-table-plugin-menus'
 import { jsPDF } from 'jspdf'
+import ExcelJS from 'exceljs'
 import XEClipboard from 'xe-clipboard'
 import ShValidators from 'sh-tools/packages/utils/validate'
 import { utils } from 'sh-tools'
@@ -143,6 +145,11 @@ let vxeOptions = {
 		autoHidden: false,
 		enabled: true
 	},
+	toolbar: {
+		custom: {
+			immediate: false
+		}
+	},
 	form: {},
 	modal: {
 		lockView: true,
@@ -190,7 +197,10 @@ let vxePdfOptions = {
 	jsPDF,
 	fonts: [{ fontName: 'SourceHanSansNormal' }]
 }
-let vxeXlsxOptions = {}
+let vxeXlsxOptions = {
+	ExcelJS
+}
+let vxeMenuOptions = {}
 Object.keys(ShValidators).forEach(key => {
 	VXETable.validators.add(key, {
 		itemValidatorMethod({ itemValue }) {
@@ -207,13 +217,15 @@ VXETable.renderer.mixin(extraRenders)
 VXETable.renderer.mixin(filterRenders)
 
 const index = {
-	install(Vue, { vxeOption = {}, vxePdfOption = {}, vxeXlsxOption }) {
+	install(Vue, { vxeOption, vxePdfOption, vxeXlsxOption, vxeMenuOption }) {
 		let setupOption = utils.merge(vxeOptions, vxeOption)
 		let xlsxSetUpOption = utils.merge(vxeXlsxOptions, vxeXlsxOption)
 		let pdfSetUpOption = utils.merge(vxePdfOptions, vxePdfOption)
+		let menuSetUpOption = utils.merge(vxeMenuOptions, vxeMenuOption)
 		VXETable.setup(setupOption)
 		VXETable.use(VXETablePluginExportXLSX, xlsxSetUpOption)
 		VXETable.use(VXETablePluginExportPDF, pdfSetUpOption)
+		VXETable.use(VXETablePluginMenus, menuSetUpOption)
 		Vue.use(VXETable)
 		Vue.config.globalProperties.$vTable = VXETable
 		Vue.config.globalProperties.$vTableSetup = setupOption

package/packages/vxeTable/plugins/export.js

@@ -1,10 +1,10 @@
 import XEUtils from 'xe-utils'
-import ExcelJS from 'exceljs'
 
-let vxetable = null
+let globalVxetable = null
+let globalExcelJS = null
 
 const defaultHeaderBackgroundColor = '80c1ff'
-const defaultCellFontColor = '606266'
+const defaultCellFontColor = '333333'
 const defaultCellBorderStyle = 'thin'
 const defaultCellBorderColor = 'e7f1ff'
 
@@ -96,12 +96,15 @@ function getDefaultBorderStyle() {
 
 function exportXLSX(params) {
 	const msgKey = 'xlsx'
-	const { modal, t } = vxetable
+	const { modal, t } = globalVxetable
 	const { $table, options, columns, colgroups, datas } = params
 	const { props, reactData } = $table
+	const { computeColumnOpts } = $table.getComputeMaps()
 	const { headerAlign: allHeaderAlign, align: allAlign, footerAlign: allFooterAlign } = props
 	const { rowHeight } = reactData
 	const { message, sheetName, isHeader, isFooter, isMerge, isColgroup, original, useStyle, sheetMethod } = options
+	const columnOpts = computeColumnOpts.value
+	const _isCustomColumn = options._isCustomColumn
 	const showMsg = message !== false
 	const mergeCells = $table.getMergeCells()
 	const colList = []
@@ -110,10 +113,8 @@ function exportXLSX(params) {
 	const sheetMerges = []
 	let beforeRowCount = 0
 	let headerRowCount = 0
-	const colHead = {}
 	columns.forEach(column => {
-		const { id, field, renderWidth, headerExportMethod } = column
-		colHead[id] = headerExportMethod ? headerExportMethod({ column, $table }) : original ? field : column.getTitle()
+		const { id, renderWidth } = column
 		sheetCols.push({
 			key: id,
 			width: XEUtils.ceil(renderWidth / 8, 1)
@@ -129,10 +130,11 @@ function exportXLSX(params) {
 					groupHead[column.id] = null
 				})
 				cols.forEach(column => {
-					const { _colSpan, _rowSpan, headerExportMethod } = column
+					const { _colSpan, _rowSpan } = column
 					const validColumn = getValidColumn(column)
 					const columnIndex = columns.indexOf(validColumn)
-					groupHead[validColumn.id] = headerExportMethod ? headerExportMethod({ column, $table }) : original ? validColumn.field : column.getTitle()
+					const headExportMethod = column.headerExportMethod || columnOpts.headerExportMethod
+					groupHead[validColumn.id] = headExportMethod ? headExportMethod({ column, options, $table }) : original ? validColumn.field : column.getTitle()
 					if (_colSpan > 1 || _rowSpan > 1) {
 						sheetMerges.push({
 							s: { r: rIndex, c: columnIndex },
@@ -143,13 +145,19 @@ function exportXLSX(params) {
 				colList.push(groupHead)
 			})
 		} else {
+			const colHead = {}
+			columns.forEach(column => {
+				const { id, field } = column
+				const headExportMethod = column.headerExportMethod || columnOpts.headerExportMethod
+				colHead[id] = headExportMethod ? headExportMethod({ column, options, $table }) : original ? field : column.getTitle()
+			})
 			colList.push(colHead)
 		}
 		headerRowCount = colList.length
 		beforeRowCount += headerRowCount
 	}
 	// 处理合并
-	if (isMerge) {
+	if (isMerge && !_isCustomColumn) {
 		mergeCells.forEach(mergeItem => {
 			const { row: mergeRowIndex, rowspan: mergeRowspan, col: mergeColIndex, colspan: mergeColspan } = mergeItem
 			sheetMerges.push({
@@ -172,7 +180,7 @@ function exportXLSX(params) {
 		const footers = getFooterData(options, footerData)
 		const mergeFooterItems = $table.getMergeFooterItems()
 		// 处理合并
-		if (isMerge) {
+		if (isMerge && !_isCustomColumn) {
 			mergeFooterItems.forEach(mergeItem => {
 				const { row: mergeRowIndex, rowspan: mergeRowspan, col: mergeColIndex, colspan: mergeColspan } = mergeItem
 				sheetMerges.push({
@@ -190,7 +198,7 @@ function exportXLSX(params) {
 		})
 	}
 	const exportMethod = () => {
-		const workbook = new ExcelJS.Workbook()
+		const workbook = new (globalExcelJS || window.ExcelJS).Workbook()
 		const sheet = workbook.addWorksheet(sheetName, { views: [{ state: 'frozen', xSplit: 0, ySplit: headerRowCount }] })
 		workbook.creator = 'vxe-table'
 		sheet.columns = sheetCols
@@ -271,7 +279,8 @@ function exportXLSX(params) {
 				})
 			})
 		}
-		if (useStyle && sheetMethod) {
+		// 自定义处理
+		if (sheetMethod) {
 			sheetMethod({ options: options, workbook, worksheet: sheet, columns, colgroups, datas, $table })
 		}
 		sheetMerges.forEach(({ s, e }) => {
@@ -296,7 +305,7 @@ function exportXLSX(params) {
 }
 
 function downloadFile(params, blob, options) {
-	const { modal, t } = vxetable
+	const { modal, t } = globalVxetable
 	const { message, filename, type } = options
 	const showMsg = message !== false
 	if (window.Blob) {
@@ -323,7 +332,7 @@ function checkImportData(tableFields, fields) {
 }
 
 function importError(params) {
-	const { modal, t } = vxetable
+	const { modal, t } = globalVxetable
 	const { $table, options } = params
 	const { internalData } = $table
 	const { _importReject } = internalData
@@ -337,7 +346,7 @@ function importError(params) {
 }
 
 function importXLSX(params) {
-	const { modal, t } = vxetable
+	const { modal, t } = globalVxetable
 	const { $table, columns, options, file } = params
 	const { internalData } = $table
 	const { _importResolve } = internalData
@@ -354,7 +363,7 @@ function importXLSX(params) {
 				tableFields.push(field)
 			}
 		})
-		const workbook = new ExcelJS.Workbook()
+		const workbook = new (globalExcelJS || window.ExcelJS).Workbook()
 		const readerTarget = evnt.target
 		if (readerTarget) {
 			workbook.xlsx.load(readerTarget.result).then(wb => {
@@ -421,22 +430,26 @@ function handleExportEvent(params) {
 }
 
 /**
- * 基于 vxe-table 表格的增强插件，支持导出 xlsx 格式
+ * 基于 vxe-table 表格的扩展插件，支持导出 xlsx 格式
  */
 export const VXETablePluginExportXLSX = {
-	install(vxetablecore) {
-		const { setup, interceptor } = vxetablecore
+	install(vxetable, options) {
+		// 检查版本
+		if (!/^(4)\./.test(vxetable.version)) {
+			console.error('[vxe-table-plugin-export-pdf] Version vxe-table 4.x is required')
+		}
 
-		vxetable = vxetablecore
+		globalVxetable = vxetable
+		globalExcelJS = options ? options.ExcelJS : null
 
-		setup({
+		vxetable.config({
 			export: {
 				types: {
 					xlsx: 0
 				}
 			}
 		})
-		interceptor.mixin({
+		vxetable.interceptor.mixin({
 			'event.import': handleImportEvent,
 			'event.export': handleExportEvent
 		})

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/cell/vxe-render-tree.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 					$vUtils.set(props.rdata, fromKey, fromvalue)
 				})
 			}
-			useCell.setRenderValue(rvalue, true)
+			useCell.setRenderValue(rvalue)
 		}
 
 		return {

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 {