sh-view 2.8.0 → 2.8.2

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

@@ -1,636 +1,636 @@
-import { computed, reactive, ref, watch } from 'vue'
-import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields, getFieldsRules, turnColumnItemFilters } from './tableMethods'
-
-// 记录自定义参数，传给vxe要过滤掉
-let omitProps = [
-	'dataSourse',
-	'disabled',
-	'customLayout',
-	'columnObj',
-	'globalConfig',
-	'footerCalculate',
-	'tableName',
-	'queryData',
-	'onToolbarBtnAddBefore',
-	'onToolbarBtnDeleteBefore',
-	'onExportMethod',
-	'onPrintMethod'
-]
-const globalConfigDefault = {
-	tableName: '',
-	title: false, // 是否显示 tableName
-	selectType: '', // 是否选择框 空 radio checkbox
-	seq: false, // 是否展示序号列
-	ghost: false, // 是否开启透明
-	search: false, // 表格是否开启查询，默认不开启，根据columns配置字段 search 为 true
-	globalFilter: false, // 表格是否开启全局过滤
-	zoom: false, // 表格是否开启缩放
-	formToggleNum: 4,
-	formToggle: true
-}
-const exportAndPrintDefault = {
-	mode: 'current',
-	original: false,
-	message: true,
-	isHeader: true,
-	isColgroup: true,
-	isFooter: false,
-	isMerge: false,
-	isAllExpand: true,
-	download: true,
-	useStyle: false,
-	columnFilterMethod: columnDefaultFilterMethod
-}
-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: '打印' }
-]
-// 表头默认值
-const columnObjDefault = { minWidth: 120, sortable: true, filter: true }
-// 表头默认列
-const columnsMapDefault = {
-	checkbox: { title: '', type: 'checkbox', width: 60, align: 'center', fixed: 'left', sortable: false, resizable: false, className: 'table-row-checkbox' },
-	radio: { title: '单选', type: 'radio', width: 60, align: 'center', fixed: 'left', sortable: false, resizable: false, className: 'table-row-radio' },
-	seq: { title: '序号', type: 'seq', width: 70, align: 'center', fixed: 'left', sortable: false, resizable: false, className: 'table-row-seq' }
-}
-
-export default function (props, context, proxy, isGrid) {
-	const { $vUtils, $vxePluginNames } = proxy
-	const { emit, slots } = context
-
-	const tableRef = ref()
-	const renderKey = ref(1) // 渲染key值
-	const selectedRowKeys = ref([]) // table选中keys
-	const selectionRows = ref([]) // table选中records
-	const tableColumnsFixed = ref([]) // 表格格式化后表头
-	const tableFilterData = ref(null) // 表格全表搜索数据
-	const tableColumnsFlat = ref([]) // 多层转一维后表头
-	const tableFormItems = ref([]) // 根据表格表头生成表单项配置
-	const tableEditRules = ref({}) // 表格根据表头自动生成验证规则
-	const tableFilterText = ref('') // 全局过滤关键字
-	const tableCurrentRowData = ref(null) // 表格当前高亮行
-	const tableRowDefaultData = ref({}) // 根据表头生成行默认值
-
-	const wrapHeight = computed(() => ([100, '100%', 'auto'].includes(props.height) ? '100%' : 'auto'))
-	const hasTree = computed(() => props.columns.some(_ => _.treeNode))
-	const tableVmConfig = computed(() => ({ size: props.size }))
-	const tableGlobalConfig = computed(() => Object.assign({}, globalConfigDefault, props.globalConfig))
-	const tableTools = computed(() => {
-		let tools = props.globalConfig?.tools || []
-		return toolsList.filter(tool => tools.includes(tool.code))
-	})
-	const tableViewData = computed(() => tableFilterData.value || props.dataSourse)
-	const tablePrevColumns = computed(() => {
-		let prevColumns = []
-		const { seq, selectType } = tableGlobalConfig.value
-		if (selectType) prevColumns.push(columnsMapDefault[selectType])
-		if (seq) prevColumns.push(columnsMapDefault.seq)
-		return prevColumns
-	})
-	const tableColumns = computed(() => {
-		return tablePrevColumns.value.concat(tableColumnsFixed.value)
-	})
-	const tableColumnObjConfig = computed(() => Object.assign({}, columnObjDefault, props.columnObj))
-	const tableColumnConfig = computed(() => Object.assign({ isCurrent: false, isHover: true, resizable: true }, props.columnConfig))
-	const tablePagerConfig = computed(() =>
-		Object.assign({ enabled: Boolean(props.pagerConfig), total: 0, className: 'sh-table-footer', slots: { left: 'pagerLeft', right: 'pagerRight' } }, props.pagerConfig)
-	)
-	const tableCheckboxConfig = computed(() => {
-		return Object.assign({ range: !hasTree.value }, props.checkboxConfig)
-	})
-	const tableTreeConfig = computed(() => {
-		return hasTree.value ? Object.assign({}, props.treeConfig) : null
-	})
-	const tableSeqConfig = computed(() => {
-		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
-				}
-				return seq === -1 ? $rowIndex + 1 : seq
-			}
-		}
-	})
-	const tableExportConfig = computed(() =>
-		Object.assign(
-			{
-				filename: tableGlobalConfig.value.tableName,
-				sheetName: 'sheet1',
-				type: 'xlsx',
-				types: ['xlsx', 'csv', 'pdf', 'html', 'xml', 'txt'],
-				beforeExportMethod: obj => getExportPrintDataByOption(obj, 'export')
-			},
-			exportAndPrintDefault,
-			props.exportConfig
-		)
-	)
-	const tablePrintConfig = computed(() =>
-		Object.assign(
-			{
-				filename: tableGlobalConfig.value.tableName,
-				sheetName: tableGlobalConfig.value.tableName,
-				beforePrintMethod: obj => getExportPrintDataByOption(obj, 'print')
-			},
-			exportAndPrintDefault,
-			props.printConfig
-		)
-	)
-	const tableEditConfig = computed(() =>
-		Object.assign({ enabled: !props.disabled, showStatus: !props.disabled, showUpdateStatus: !props.disabled, showInsertStatus: !props.disabled }, props.editConfig)
-	)
-	const tableQueryConfig = computed(() => {
-		let otherConfig = isGrid ? { transformitem: false, items: tableFormItems.value } : { items: props.columns }
-		return Object.assign(
-			{ data: props.queryData, rules: tableEditRules.value, validConfig: props.validConfig, globalConfig: tableGlobalConfig.value, valid: false, footer: true },
-			otherConfig,
-			tableVmConfig.value
-		)
-	})
-	const tableFilterConfig = computed(() => Object.assign({ clearable: true, type: 'search', placeholder: '全局关键字搜索' }, tableVmConfig.value))
-	const tableSlots = computed(() => {
-		let disSlots = ['head', 'form', 'formLeft', 'formRight', 'toolbar', 'toolbarLeft', 'toolbarRight', 'pagerLeft', 'pagerRight']
-		return Object.keys(slots).filter(key => !disSlots.includes(key))
-	})
-	const tableBindConfig = computed(() => {
-		let defaultProps = { footerMethod: tableFooterMethod, footerSpanMethod: tableFooterSpanMethod }
-		let tableProps = $vUtils.omit(props, (val, key) => {
-			return omitProps.includes(key) || $vUtils.isNone(val)
-		})
-		let shProps = {
-			data: tableViewData.value,
-			stripe: props.stripe && !tableTreeConfig.value,
-			columnConfig: tableColumnConfig.value,
-			checkboxConfig: tableCheckboxConfig.value,
-			treeConfig: tableTreeConfig.value,
-			seqConfig: tableSeqConfig.value,
-			editConfig: tableEditConfig.value,
-			editRules: tableEditRules.value,
-			exportConfig: tableExportConfig.value,
-			printConfig: tablePrintConfig.value
-		}
-		return Object.assign(defaultProps, tableProps, shProps)
-	})
-	const importBindConfig = reactive({
-		modalConfig: { modelValue: false, title: '导入报表', width: '900', showFooter: false, transfer: false },
-		needValidate: true,
-		columns: props.columns,
-		importConfig: props.importConfig,
-		importRules: tableEditRules.value
-	})
-
-	// 获取选中数据
-	const getSelectionData = () => {
-		return selectionRows.value || []
-	}
-	// 获取全部数据
-	// visible为true获取视图数据
-	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)
-		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)
-				if (deleteXid) delete row._XID
-			})
-		})
-		return data
-	}
-	// 表格打印、导出统一导出前渲染数据
-	const getExportPrintDataByOption = (obj = {}, type) => {
-		let { options, content } = obj
-		let { data, columns, mode, original } = options
-		if (!data) {
-			options.data = mode === 'selected' ? getSelectionData() : getFullData({ visible: !original })
-		}
-		return type === 'print' ? content : obj
-	}
-
-	// 默认求底部绑定方法vxe
-	const tableFooterMethod = ({ columns, data }) => {
-		const { footerCalculate } = props
-		let footerData = []
-		let footerCalculateList = footerCalculate.calculate || []
-		footerCalculateList.forEach(key => {
-			footerData.push(tableFooterCompute(columns, data, key, footerCalculate[key]))
-		})
-		return footerData
-	}
-	const tableFooterSpanMethod = ({ $rowIndex, column, $columnIndex, data }) => {
-		let colspan = tablePrevColumns.value.length || 1
-		if (column.type === 'seq') {
-			return { rowspan: 1, colspan: colspan }
-		} else if (column.type === 'checkbox' || column.type === 'radio') {
-			return { rowspan: 1, colspan: 0 }
-		}
-		return { rowspan: 1, colspan: 1 }
-	}
-
-	// -------- 表格
-	// 当前行变化
-	const onCurrentChange = params => {
-		tableCurrentRowData.value = params
-		emit('current-change', params)
-	}
-	// 单选框变化
-	const onRadioChange = params => {
-		selectionRows.value = [params.row]
-		emit('radio-change', selectionRows.value, params)
-	}
-	// 复选框变化
-	const onSelectionChange = params => {
-		let { records } = params
-		if (tableTreeConfig.value && tableTreeConfig.value?.transform) {
-			let keyField = tableTreeConfig.value?.rowField || props.rowConfig.keyField || '_XID'
-			let keyRowChild = '_X_ROW_CHILD'
-			let childRowsKeys = []
-			$vUtils.eachTree(records, row => {
-				if (row[keyRowChild] && row[keyRowChild].length > 0) {
-					row[keyRowChild].forEach(child => {
-						childRowsKeys.push(child[keyField])
-					})
-				}
-			})
-			records = records.filter(row => !childRowsKeys.includes(row[keyField]))
-		}
-		selectionRows.value = records
-		emit('selection-change', selectionRows.value, params)
-	}
-	// 单元格点击事件
-	const onCellClick = params => {
-		emit('cell-click', params)
-	}
-	// 单元格双击事件
-	const onCellDblClick = params => {
-		emit('cell-dblclick', params)
-	}
-	// 单元格双击事件
-	const onHeaderCellClick = params => {
-		emit('header-cell-click', params)
-	}
-	// 排序变化事件
-	const onSortChange = params => {
-		emit('sort-change', params)
-	}
-	// 过滤变化事件
-	const onFilterChange = params => {
-		emit('filter-change', params)
-	}
-	// 当行展开或收起时会触发该事件
-	const onToggleRowExpand = params => {
-		emit('toggle-row-expand', params)
-	}
-	// 当树节点展开或收起时会触发该事件
-	const onToggleTreeExpand = params => {
-		emit('toggle-tree-expand', params)
-	}
-	// 只对 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 配置时有效，单元格被激活编辑时会触发该事件
-	const onEditActived = params => {
-		emit('edit-actived', params)
-	}
-	// 滚动事件
-	const onScroll = params => {
-		emit('scroll', params)
-	}
-	// 如果与工具栏关联，在自定义列按钮被手动点击后会触发该事件
-	const onCustom = params => {
-		emit('custom', params)
-	}
-	// 分页变化触发
-	const onPageChange = params => {
-		selectionRows.value = []
-		emit('page-change', params)
-	}
-
-	// -------- 工具栏
-	// 只对 toolbar.buttons 配置时有效，当左侧按钮被点击时会后触发该事件
-	const onToolbarButtonClick = params => {
-		emit('toolbar-button-click', params)
-	}
-	// 只对 toolbar.tools 配置时有效，当右侧工具被点击时会后触发该事件
-	const onToolbarToolClick = params => {
-		emit('toolbar-tool-click', params)
-	}
-
-	// -------- 搜索
-	// 表单展开全部/收起切换事件
-	const onFormCollapsed = value => {
-		setTimeout(() => {
-			tableRef.value.recalculate(true)
-		})
-	}
-	const onFormSubmit = () => {
-		emit('form-submit', props.queryData)
-	}
-	// 表单重置
-	const onFormReset = params => {
-		emit('form-reset', params)
-	}
-	// 表单项编辑回调
-	const onFormEditClosed = (obj, renderbox, $form) => {
-		emit('form-edit-closed', obj, renderbox, $form)
-	}
-	// 表单校验不通过
-	const onFormSubmitInvalid = obj => {
-		emit('form-submit-invalid', obj)
-	}
-
-	// // vxe组件方法可通过 tableRef 调用
-	// 表格导入方法
-	const setImportData = params => {
-		emit('import-confirm', params)
-	}
-
-	// 初始化生成新表头数据
-	const initTableColumns = (columns = []) => {
-		let rules = getFieldsRules(columns)
-		initEditRules(rules)
-		if (isGrid) {
-			let { columnsArr, columnsFlatArr, formItemsArr } = getTransfarFields(columns, tableColumnObjConfig.value, tableGlobalConfig.value.search)
-			tableColumnsFlat.value = columnsFlatArr
-			tableFormItems.value = formItemsArr
-			tableColumnsFixed.value = $vUtils.clone(columnsArr, true)
-		}
-	}
-	// 初始化验证规则
-	const initEditRules = rules => {
-		if (rules && $vUtils.isPlainObject(rules)) {
-			Object.keys(rules).forEach(key => {
-				if (tableEditRules.value[key]) {
-					tableEditRules.value[key] = Array.from(new Set(tableEditRules.value[key].concat(rules[key])))
-				} else {
-					tableEditRules.value[key] = rules[key]
-				}
-			})
-		}
-	}
-	// 初始化表头配置默认值
-	const initColsDefaultValue = () => {
-		let colsDefaultValue = {}
-		let colsFormulaValue = {}
-		$vUtils.eachTree(props.columns, item => {
-			let columnProps = item.renderProps || item.editRender?.props || item.cellRender?.props || {}
-			if (!$vUtils.isNone(columnProps.defaultValue)) {
-				colsDefaultValue[item.field] = columnProps.defaultValue
-			}
-			if (!$vUtils.isNone(columnProps.formula)) {
-				colsFormulaValue[item.field] = columnProps.formula
-			}
-		})
-		tableRowDefaultData.value = colsDefaultValue
-		if (Array.isArray(props.dataSourse)) {
-			props.dataSourse.forEach(row => {
-				if (Object.keys(colsDefaultValue).length > 0) {
-					Object.keys(colsDefaultValue).forEach(defaultKey => {
-						if ($vUtils.isNone($vUtils.get(row, defaultKey))) {
-							$vUtils.set(row, defaultKey, colsDefaultValue[defaultKey])
-						}
-					})
-				}
-				if (Object.keys(colsFormulaValue).length > 0) {
-					Object.keys(colsFormulaValue).forEach(formulaKey => {
-						let formulaValue = $vUtils.calculate(colsFormulaValue[formulaKey], row)
-						$vUtils.set(row, formulaKey, formulaValue)
-					})
-				}
-			})
-		}
-	}
-
-	// 全局搜索输入框事件
-	const handleTableFilter = obj => {
-		let filterText = tableFilterText.value
-		let filterData = null
-		if (filterText) {
-			let searchFields = []
-			let tableColumnsAll = tableRef.value.getColumns()
-			tableColumnsAll.forEach(col => {
-				let renderObj = col.cellRender || col.editRender || col.itemRender
-				let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
-				if (col.property && renderObj && renderObj.name && !noSearchArr.includes(renderObj.name) && !noSearchArr.includes(col.type)) {
-					searchFields.push({ rkey: col.property, rname: renderObj.name, rprops: Object.assign({}, renderObj.props, col.rprops) })
-				}
-			})
-			filterData = $vUtils.searchTree(props.dataSourse, row => {
-				return searchFields.some(item => {
-					let cellValue = $vUtils.get(row, item.rkey)
-					let { rtext } = $vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, proxy)
-					return $vUtils.trim(rtext).toLowerCase().indexOf(filterText) > -1
-				})
-			})
-		}
-		if (tableFilterData.value === null && !filterText) {
-			return
-		}
-		tableFilterData.value = filterData
-	}
-	// 表格验证方法
-	const validate = (rows = true) => {
-		return tableRef.value.validate(rows)
-	}
-	// 刷新表格视图
-	const refreshRender = () => {
-		renderKey.value++
-	}
-	// 表格工具按钮点击
-	const handleTableTool = ({ code }) => {
-		switch (code) {
-			case 'addRow':
-				handleTableAddRow(null, undefined, true)
-				break
-			case 'deleteRow':
-				handleTableDeleteRow(null, true)
-				break
-			case 'import':
-				handleTableImportBtn()
-				break
-			case 'export':
-				handleTableExportBtn()
-				break
-			case 'print':
-				handleTablePrintBtn()
-				break
-		}
-	}
-	// 表格导出按钮
-	const handleTableExportBtn = options => {
-		if (typeof props.onExportMethod === 'function') {
-			return props.onExportMethod(options)
-		}
-		return tableRef.value.openExport(options)
-	}
-	// 表格导入按钮
-	const handleTableImportBtn = () => {
-		importBindConfig.modalConfig.modelValue = true
-	}
-	// 表格打印按鈕
-	const handleTablePrintBtn = options => {
-		if (typeof props.onPrintMethod === 'function') {
-			return props.onPrintMethod(options)
-		}
-		return tableRef.value.openPrint(options)
-	}
-
-	// 自定义操作列点击事件
-	const handleGoptionClick = async (btnObj, dataObj) => {
-		if (btnObj.code === 'delete' || btnObj.idConfirm) {
-			await proxy.msgconfirm({ content: btnObj.ConfirmContent || `确定${btnObj.content}吗？` })
-		}
-		emit('globaloption', btnObj, dataObj)
-	}
-	// 新增行按钮
-	const handleTableAddRow = async (rows, index = -1, isTool = false) => {
-		let addRows = rows ? $vUtils.clone(rows, true) : tableRowDefaultData.value
-		if (!isTool && typeof props.onToolbarBtnAddBefore === 'function') {
-			addRows = await props.onToolbarBtnAddBefore(addRows)
-		}
-		// 删除主键，以防排序冲突
-		let mainKeyField = props.rowConfig?.keyField || '_XID'
-		if (Array.isArray(addRows)) {
-			addRows.forEach(item => {
-				delete item[mainKeyField]
-			})
-		} else {
-			delete addRows[mainKeyField]
-		}
-		let { row: newRow } = await tableRef.value.insertAt(addRows, index)
-		await tableRef.value.setActiveRow(newRow)
-		if (isTool) emit('toolbaroption', 'add', newRow, tableRef.value)
-	}
-	// 删除行按钮
-	const handleTableDeleteRow = async (rows, isTool = false) => {
-		let deleteRows = rows
-		if (isTool) {
-			let selectedRows = getSelectionData()
-			if (selectedRows.length < 1) {
-				proxy.msgwarning('请选择要删除的行！')
-				return
-			}
-			deleteRows = selectedRows
-			await proxy.msgconfirm({ content: `确定删除吗？` })
-		} else if (typeof props.onToolbarBtnDeleteBefore === 'function') {
-			let result = await props.onToolbarBtnDeleteBefore(deleteRows)
-			if (!result) return
-		}
-		await tableRef.value.remove(deleteRows)
-		if (selectionRows.value && selectionRows.value.length > 0) {
-			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)
-	}
-
-	watch(
-		() => props.columns,
-		value => {
-			initTableColumns(value)
-		},
-		{
-			deep: true,
-			immediate: true
-		}
-	)
-	watch(
-		() => props.dataSourse,
-		value => {
-			initColsDefaultValue()
-			selectionRows.value = []
-		},
-		{
-			immediate: true
-		}
-	)
-	watch(
-		() => props.editRules,
-		value => {
-			initEditRules(value)
-		},
-		{
-			deep: true,
-			immediate: true
-		}
-	)
-
-	return {
-		slots,
-		tableRef,
-		renderKey,
-		wrapHeight,
-		tableGlobalConfig,
-		tablePrevColumns,
-		tableColumns,
-		tableColumnObjConfig,
-		tablePagerConfig,
-		tableQueryConfig,
-		tableFilterText,
-		tableFilterConfig,
-		tableFilterData,
-		tableTools,
-		tableSlots,
-		selectionRows,
-		tableBindConfig,
-		importBindConfig,
-		onCurrentChange,
-		onRadioChange,
-		onSelectionChange,
-		onCellClick,
-		onCellDblClick,
-		onHeaderCellClick,
-		onSortChange,
-		onFilterChange,
-		onToggleRowExpand,
-		onToggleTreeExpand,
-		onEditClosed,
-		onEditActived,
-		onScroll,
-		onCustom,
-		onPageChange,
-		onToolbarButtonClick,
-		onToolbarToolClick,
-		handleGoptionClick,
-		onFormSubmit,
-		onFormReset,
-		onFormCollapsed,
-		onFormEditClosed,
-		handleTableFilter,
-		handleTableTool,
-		setImportData,
-		refreshRender,
-		validate,
-		getSelectionData,
-		getFullData,
-		handleTableAddRow,
-		handleTableDeleteRow,
-		turnColumnItemFilters
-	}
-}
+import { computed, reactive, ref, watch } from 'vue'
+import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields, getFieldsRules, turnColumnItemFilters } from './tableMethods'
+
+// 记录自定义参数，传给vxe要过滤掉
+let omitProps = [
+	'dataSourse',
+	'disabled',
+	'customLayout',
+	'columnObj',
+	'globalConfig',
+	'footerCalculate',
+	'tableName',
+	'queryData',
+	'onToolbarBtnAddBefore',
+	'onToolbarBtnDeleteBefore',
+	'onExportMethod',
+	'onPrintMethod'
+]
+const globalConfigDefault = {
+	tableName: '',
+	title: false, // 是否显示 tableName
+	selectType: '', // 是否选择框 空 radio checkbox
+	seq: false, // 是否展示序号列
+	ghost: false, // 是否开启透明
+	search: false, // 表格是否开启查询，默认不开启，根据columns配置字段 search 为 true
+	globalFilter: false, // 表格是否开启全局过滤
+	zoom: false, // 表格是否开启缩放
+	formToggleNum: 4,
+	formToggle: true
+}
+const exportAndPrintDefault = {
+	mode: 'current',
+	original: false,
+	message: true,
+	isHeader: true,
+	isColgroup: true,
+	isFooter: false,
+	isMerge: false,
+	isAllExpand: true,
+	download: true,
+	useStyle: false,
+	columnFilterMethod: columnDefaultFilterMethod
+}
+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: '打印' }
+]
+// 表头默认值
+const columnObjDefault = { minWidth: 120, sortable: true, filter: true }
+// 表头默认列
+const columnsMapDefault = {
+	checkbox: { title: '', type: 'checkbox', width: 60, align: 'center', fixed: 'left', sortable: false, resizable: false, className: 'table-row-checkbox' },
+	radio: { title: '单选', type: 'radio', width: 60, align: 'center', fixed: 'left', sortable: false, resizable: false, className: 'table-row-radio' },
+	seq: { title: '序号', type: 'seq', width: 70, align: 'center', fixed: 'left', sortable: false, resizable: false, className: 'table-row-seq' }
+}
+
+export default function (props, context, proxy, isGrid) {
+	const { $vUtils, $vxePluginNames } = proxy
+	const { emit, slots } = context
+
+	const tableRef = ref()
+	const renderKey = ref(1) // 渲染key值
+	const selectedRowKeys = ref([]) // table选中keys
+	const selectionRows = ref([]) // table选中records
+	const tableColumnsFixed = ref([]) // 表格格式化后表头
+	const tableFilterData = ref(null) // 表格全表搜索数据
+	const tableColumnsFlat = ref([]) // 多层转一维后表头
+	const tableFormItems = ref([]) // 根据表格表头生成表单项配置
+	const tableEditRules = ref({}) // 表格根据表头自动生成验证规则
+	const tableFilterText = ref('') // 全局过滤关键字
+	const tableCurrentRowData = ref(null) // 表格当前高亮行
+	const tableRowDefaultData = ref({}) // 根据表头生成行默认值
+
+	const wrapHeight = computed(() => ([100, '100%', 'auto'].includes(props.height) ? '100%' : 'auto'))
+	const hasTree = computed(() => props.columns.some(_ => _.treeNode))
+	const tableVmConfig = computed(() => ({ size: props.size }))
+	const tableGlobalConfig = computed(() => Object.assign({}, globalConfigDefault, props.globalConfig))
+	const tableTools = computed(() => {
+		let tools = props.globalConfig?.tools || []
+		return toolsList.filter(tool => tools.includes(tool.code))
+	})
+	const tableViewData = computed(() => tableFilterData.value || props.dataSourse)
+	const tablePrevColumns = computed(() => {
+		let prevColumns = []
+		const { seq, selectType } = tableGlobalConfig.value
+		if (selectType) prevColumns.push(columnsMapDefault[selectType])
+		if (seq) prevColumns.push(columnsMapDefault.seq)
+		return prevColumns
+	})
+	const tableColumns = computed(() => {
+		return tablePrevColumns.value.concat(tableColumnsFixed.value)
+	})
+	const tableColumnObjConfig = computed(() => Object.assign({}, columnObjDefault, props.columnObj))
+	const tableColumnConfig = computed(() => Object.assign({ isCurrent: false, isHover: true, resizable: true }, props.columnConfig))
+	const tablePagerConfig = computed(() =>
+		Object.assign({ enabled: Boolean(props.pagerConfig), total: 0, className: 'sh-table-footer', slots: { left: 'pagerLeft', right: 'pagerRight' } }, props.pagerConfig)
+	)
+	const tableCheckboxConfig = computed(() => {
+		return Object.assign({ range: !hasTree.value }, props.checkboxConfig)
+	})
+	const tableTreeConfig = computed(() => {
+		return hasTree.value ? Object.assign({}, props.treeConfig) : null
+	})
+	const tableSeqConfig = computed(() => {
+		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
+				}
+				return seq === -1 ? $rowIndex + 1 : seq
+			}
+		}
+	})
+	const tableExportConfig = computed(() =>
+		Object.assign(
+			{
+				filename: tableGlobalConfig.value.tableName,
+				sheetName: 'sheet1',
+				type: 'xlsx',
+				types: ['xlsx', 'csv', 'pdf', 'html', 'xml', 'txt'],
+				beforeExportMethod: obj => getExportPrintDataByOption(obj, 'export')
+			},
+			exportAndPrintDefault,
+			props.exportConfig
+		)
+	)
+	const tablePrintConfig = computed(() =>
+		Object.assign(
+			{
+				filename: tableGlobalConfig.value.tableName,
+				sheetName: tableGlobalConfig.value.tableName,
+				beforePrintMethod: obj => getExportPrintDataByOption(obj, 'print')
+			},
+			exportAndPrintDefault,
+			props.printConfig
+		)
+	)
+	const tableEditConfig = computed(() =>
+		Object.assign({ enabled: !props.disabled, showStatus: !props.disabled, showUpdateStatus: !props.disabled, showInsertStatus: !props.disabled }, props.editConfig)
+	)
+	const tableQueryConfig = computed(() => {
+		let otherConfig = isGrid ? { transformitem: false, items: tableFormItems.value } : { items: props.columns }
+		return Object.assign(
+			{ data: props.queryData, rules: tableEditRules.value, validConfig: props.validConfig, globalConfig: tableGlobalConfig.value, valid: false, footer: true },
+			otherConfig,
+			tableVmConfig.value
+		)
+	})
+	const tableFilterConfig = computed(() => Object.assign({ clearable: true, type: 'search', placeholder: '全局关键字搜索' }, tableVmConfig.value))
+	const tableSlots = computed(() => {
+		let disSlots = ['head', 'form', 'formLeft', 'formRight', 'toolbar', 'toolbarLeft', 'toolbarRight', 'pagerLeft', 'pagerRight']
+		return Object.keys(slots).filter(key => !disSlots.includes(key))
+	})
+	const tableBindConfig = computed(() => {
+		let defaultProps = { footerMethod: tableFooterMethod, footerSpanMethod: tableFooterSpanMethod }
+		let tableProps = $vUtils.omit(props, (val, key) => {
+			return omitProps.includes(key) || $vUtils.isNone(val)
+		})
+		let shProps = {
+			data: tableViewData.value,
+			stripe: props.stripe && !tableTreeConfig.value,
+			columnConfig: tableColumnConfig.value,
+			checkboxConfig: tableCheckboxConfig.value,
+			treeConfig: tableTreeConfig.value,
+			seqConfig: tableSeqConfig.value,
+			editConfig: tableEditConfig.value,
+			editRules: tableEditRules.value,
+			exportConfig: tableExportConfig.value,
+			printConfig: tablePrintConfig.value
+		}
+		return Object.assign(defaultProps, tableProps, shProps)
+	})
+	const importBindConfig = reactive({
+		modalConfig: { modelValue: false, title: '导入报表', width: '900', showFooter: false, transfer: false },
+		needValidate: true,
+		columns: props.columns,
+		importConfig: props.importConfig,
+		importRules: tableEditRules.value
+	})
+
+	// 获取选中数据
+	const getSelectionData = () => {
+		return selectionRows.value || []
+	}
+	// 获取全部数据
+	// visible为true获取视图数据
+	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)
+		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)
+				if (deleteXid) delete row._XID
+			})
+		})
+		return data
+	}
+	// 表格打印、导出统一导出前渲染数据
+	const getExportPrintDataByOption = (obj = {}, type) => {
+		let { options, content } = obj
+		let { data, columns, mode, original } = options
+		if (!data) {
+			options.data = mode === 'selected' ? getSelectionData() : getFullData({ visible: !original })
+		}
+		return type === 'print' ? content : obj
+	}
+
+	// 默认求底部绑定方法vxe
+	const tableFooterMethod = ({ columns, data }) => {
+		const { footerCalculate } = props
+		let footerData = []
+		let footerCalculateList = footerCalculate.calculate || []
+		footerCalculateList.forEach(key => {
+			footerData.push(tableFooterCompute(columns, data, key, footerCalculate[key]))
+		})
+		return footerData
+	}
+	const tableFooterSpanMethod = ({ $rowIndex, column, $columnIndex, data }) => {
+		let colspan = tablePrevColumns.value.length || 1
+		if (column.type === 'seq') {
+			return { rowspan: 1, colspan: colspan }
+		} else if (column.type === 'checkbox' || column.type === 'radio') {
+			return { rowspan: 1, colspan: 0 }
+		}
+		return { rowspan: 1, colspan: 1 }
+	}
+
+	// -------- 表格
+	// 当前行变化
+	const onCurrentChange = params => {
+		tableCurrentRowData.value = params
+		emit('current-change', params)
+	}
+	// 单选框变化
+	const onRadioChange = params => {
+		selectionRows.value = [params.row]
+		emit('radio-change', selectionRows.value, params)
+	}
+	// 复选框变化
+	const onSelectionChange = params => {
+		let { records } = params
+		if (tableTreeConfig.value && tableTreeConfig.value?.transform) {
+			let keyField = tableTreeConfig.value?.rowField || props.rowConfig.keyField || '_XID'
+			let keyRowChild = '_X_ROW_CHILD'
+			let childRowsKeys = []
+			$vUtils.eachTree(records, row => {
+				if (row[keyRowChild] && row[keyRowChild].length > 0) {
+					row[keyRowChild].forEach(child => {
+						childRowsKeys.push(child[keyField])
+					})
+				}
+			})
+			records = records.filter(row => !childRowsKeys.includes(row[keyField]))
+		}
+		selectionRows.value = records
+		emit('selection-change', selectionRows.value, params)
+	}
+	// 单元格点击事件
+	const onCellClick = params => {
+		emit('cell-click', params)
+	}
+	// 单元格双击事件
+	const onCellDblClick = params => {
+		emit('cell-dblclick', params)
+	}
+	// 单元格双击事件
+	const onHeaderCellClick = params => {
+		emit('header-cell-click', params)
+	}
+	// 排序变化事件
+	const onSortChange = params => {
+		emit('sort-change', params)
+	}
+	// 过滤变化事件
+	const onFilterChange = params => {
+		emit('filter-change', params)
+	}
+	// 当行展开或收起时会触发该事件
+	const onToggleRowExpand = params => {
+		emit('toggle-row-expand', params)
+	}
+	// 当树节点展开或收起时会触发该事件
+	const onToggleTreeExpand = params => {
+		emit('toggle-tree-expand', params)
+	}
+	// 只对 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 配置时有效，单元格被激活编辑时会触发该事件
+	const onEditActived = params => {
+		emit('edit-actived', params)
+	}
+	// 滚动事件
+	const onScroll = params => {
+		emit('scroll', params)
+	}
+	// 如果与工具栏关联，在自定义列按钮被手动点击后会触发该事件
+	const onCustom = params => {
+		emit('custom', params)
+	}
+	// 分页变化触发
+	const onPageChange = params => {
+		selectionRows.value = []
+		emit('page-change', params)
+	}
+
+	// -------- 工具栏
+	// 只对 toolbar.buttons 配置时有效，当左侧按钮被点击时会后触发该事件
+	const onToolbarButtonClick = params => {
+		emit('toolbar-button-click', params)
+	}
+	// 只对 toolbar.tools 配置时有效，当右侧工具被点击时会后触发该事件
+	const onToolbarToolClick = params => {
+		emit('toolbar-tool-click', params)
+	}
+
+	// -------- 搜索
+	// 表单展开全部/收起切换事件
+	const onFormCollapsed = value => {
+		setTimeout(() => {
+			tableRef.value.recalculate(true)
+		})
+	}
+	const onFormSubmit = () => {
+		emit('form-submit', props.queryData)
+	}
+	// 表单重置
+	const onFormReset = params => {
+		emit('form-reset', params)
+	}
+	// 表单项编辑回调
+	const onFormEditClosed = (obj, renderbox, $form) => {
+		emit('form-edit-closed', obj, renderbox, $form)
+	}
+	// 表单校验不通过
+	const onFormSubmitInvalid = obj => {
+		emit('form-submit-invalid', obj)
+	}
+
+	// // vxe组件方法可通过 tableRef 调用
+	// 表格导入方法
+	const setImportData = params => {
+		emit('import-confirm', params)
+	}
+
+	// 初始化生成新表头数据
+	const initTableColumns = (columns = []) => {
+		let rules = getFieldsRules(columns)
+		initEditRules(rules)
+		if (isGrid) {
+			let { columnsArr, columnsFlatArr, formItemsArr } = getTransfarFields(columns, tableColumnObjConfig.value, tableGlobalConfig.value.search)
+			tableColumnsFlat.value = columnsFlatArr
+			tableFormItems.value = formItemsArr
+			tableColumnsFixed.value = $vUtils.clone(columnsArr, true)
+		}
+	}
+	// 初始化验证规则
+	const initEditRules = rules => {
+		if (rules && $vUtils.isPlainObject(rules)) {
+			Object.keys(rules).forEach(key => {
+				if (tableEditRules.value[key]) {
+					tableEditRules.value[key] = Array.from(new Set(tableEditRules.value[key].concat(rules[key])))
+				} else {
+					tableEditRules.value[key] = rules[key]
+				}
+			})
+		}
+	}
+	// 初始化表头配置默认值
+	const initColsDefaultValue = () => {
+		let colsDefaultValue = {}
+		let colsFormulaValue = {}
+		$vUtils.eachTree(props.columns, item => {
+			let columnProps = item.renderProps || item.editRender?.props || item.cellRender?.props || {}
+			if (!$vUtils.isNone(columnProps.defaultValue)) {
+				colsDefaultValue[item.field] = columnProps.defaultValue
+			}
+			if (!$vUtils.isNone(columnProps.formula)) {
+				colsFormulaValue[item.field] = columnProps.formula
+			}
+		})
+		tableRowDefaultData.value = colsDefaultValue
+		if (Array.isArray(props.dataSourse)) {
+			props.dataSourse.forEach(row => {
+				if (Object.keys(colsDefaultValue).length > 0) {
+					Object.keys(colsDefaultValue).forEach(defaultKey => {
+						if ($vUtils.isNone($vUtils.get(row, defaultKey))) {
+							$vUtils.set(row, defaultKey, colsDefaultValue[defaultKey])
+						}
+					})
+				}
+				if (Object.keys(colsFormulaValue).length > 0) {
+					Object.keys(colsFormulaValue).forEach(formulaKey => {
+						let formulaValue = $vUtils.calculate(colsFormulaValue[formulaKey], row)
+						$vUtils.set(row, formulaKey, formulaValue)
+					})
+				}
+			})
+		}
+	}
+
+	// 全局搜索输入框事件
+	const handleTableFilter = obj => {
+		let filterText = tableFilterText.value
+		let filterData = null
+		if (filterText) {
+			let searchFields = []
+			let tableColumnsAll = tableRef.value.getColumns()
+			tableColumnsAll.forEach(col => {
+				let renderObj = col.cellRender || col.editRender || col.itemRender
+				let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
+				if (col.property && renderObj && renderObj.name && !noSearchArr.includes(renderObj.name) && !noSearchArr.includes(col.type)) {
+					searchFields.push({ rkey: col.property, rname: renderObj.name, rprops: Object.assign({}, renderObj.props, col.rprops) })
+				}
+			})
+			filterData = $vUtils.searchTree(props.dataSourse, row => {
+				return searchFields.some(item => {
+					let cellValue = $vUtils.get(row, item.rkey)
+					let { rtext } = $vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, proxy)
+					return $vUtils.trim(rtext).toLowerCase().indexOf(filterText) > -1
+				})
+			})
+		}
+		if (tableFilterData.value === null && !filterText) {
+			return
+		}
+		tableFilterData.value = filterData
+	}
+	// 表格验证方法
+	const validate = (rows = true) => {
+		return tableRef.value.validate(rows)
+	}
+	// 刷新表格视图
+	const refreshRender = () => {
+		renderKey.value++
+	}
+	// 表格工具按钮点击
+	const handleTableTool = ({ code }) => {
+		switch (code) {
+			case 'addRow':
+				handleTableAddRow(null, undefined, true)
+				break
+			case 'deleteRow':
+				handleTableDeleteRow(null, true)
+				break
+			case 'import':
+				handleTableImportBtn()
+				break
+			case 'export':
+				handleTableExportBtn()
+				break
+			case 'print':
+				handleTablePrintBtn()
+				break
+		}
+	}
+	// 表格导出按钮
+	const handleTableExportBtn = options => {
+		if (typeof props.onExportMethod === 'function') {
+			return props.onExportMethod(options)
+		}
+		return tableRef.value.openExport(options)
+	}
+	// 表格导入按钮
+	const handleTableImportBtn = () => {
+		importBindConfig.modalConfig.modelValue = true
+	}
+	// 表格打印按鈕
+	const handleTablePrintBtn = options => {
+		if (typeof props.onPrintMethod === 'function') {
+			return props.onPrintMethod(options)
+		}
+		return tableRef.value.openPrint(options)
+	}
+
+	// 自定义操作列点击事件
+	const handleGoptionClick = async (btnObj, dataObj) => {
+		if (btnObj.code === 'delete' || btnObj.idConfirm) {
+			await proxy.msgconfirm({ content: btnObj.ConfirmContent || `确定${btnObj.content}吗？` })
+		}
+		emit('globaloption', btnObj, dataObj)
+	}
+	// 新增行按钮
+	const handleTableAddRow = async (rows, index = -1, isTool = false) => {
+		let addRows = rows ? $vUtils.clone(rows, true) : tableRowDefaultData.value
+		if (!isTool && typeof props.onToolbarBtnAddBefore === 'function') {
+			addRows = await props.onToolbarBtnAddBefore(addRows)
+		}
+		// 删除主键，以防排序冲突
+		let mainKeyField = props.rowConfig?.keyField || '_XID'
+		if (Array.isArray(addRows)) {
+			addRows.forEach(item => {
+				delete item[mainKeyField]
+			})
+		} else {
+			delete addRows[mainKeyField]
+		}
+		let { row: newRow } = await tableRef.value.insertAt(addRows, index)
+		await tableRef.value.setActiveRow(newRow)
+		if (isTool) emit('toolbaroption', 'add', newRow, tableRef.value)
+	}
+	// 删除行按钮
+	const handleTableDeleteRow = async (rows, isTool = false) => {
+		let deleteRows = rows
+		if (isTool) {
+			let selectedRows = getSelectionData()
+			if (selectedRows.length < 1) {
+				proxy.msgwarning('请选择要删除的行！')
+				return
+			}
+			deleteRows = selectedRows
+			await proxy.msgconfirm({ content: `确定删除吗？` })
+		} else if (typeof props.onToolbarBtnDeleteBefore === 'function') {
+			let result = await props.onToolbarBtnDeleteBefore(deleteRows)
+			if (!result) return
+		}
+		await tableRef.value.remove(deleteRows)
+		if (selectionRows.value && selectionRows.value.length > 0) {
+			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)
+	}
+
+	watch(
+		() => props.columns,
+		value => {
+			initTableColumns(value)
+		},
+		{
+			deep: true,
+			immediate: true
+		}
+	)
+	watch(
+		() => props.dataSourse,
+		value => {
+			initColsDefaultValue()
+			selectionRows.value = []
+		},
+		{
+			immediate: true
+		}
+	)
+	watch(
+		() => props.editRules,
+		value => {
+			initEditRules(value)
+		},
+		{
+			deep: true,
+			immediate: true
+		}
+	)
+
+	return {
+		slots,
+		tableRef,
+		renderKey,
+		wrapHeight,
+		tableGlobalConfig,
+		tablePrevColumns,
+		tableColumns,
+		tableColumnObjConfig,
+		tablePagerConfig,
+		tableQueryConfig,
+		tableFilterText,
+		tableFilterConfig,
+		tableFilterData,
+		tableTools,
+		tableSlots,
+		selectionRows,
+		tableBindConfig,
+		importBindConfig,
+		onCurrentChange,
+		onRadioChange,
+		onSelectionChange,
+		onCellClick,
+		onCellDblClick,
+		onHeaderCellClick,
+		onSortChange,
+		onFilterChange,
+		onToggleRowExpand,
+		onToggleTreeExpand,
+		onEditClosed,
+		onEditActived,
+		onScroll,
+		onCustom,
+		onPageChange,
+		onToolbarButtonClick,
+		onToolbarToolClick,
+		handleGoptionClick,
+		onFormSubmit,
+		onFormReset,
+		onFormCollapsed,
+		onFormEditClosed,
+		handleTableFilter,
+		handleTableTool,
+		setImportData,
+		refreshRender,
+		validate,
+		getSelectionData,
+		getFullData,
+		handleTableAddRow,
+		handleTableDeleteRow,
+		turnColumnItemFilters
+	}
+}