sh-view 2.1.0 → 2.3.0

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

@@ -0,0 +1,592 @@
+import { computed, ref, watch } from 'vue'
+import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields, getFieldsRules, turnColumnItemFilters } from './tableMethods'
+
+const globalConfigDefault = {
+	tableName: '',
+	title: false, // 是否显示 tableName
+	checkbox: true, // 是否展示复选框
+	radio: false, // 是否展示单选框
+	seq: true, // 是否展示序号列
+	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 columnsConfigDefault = [
+	{ title: '', type: 'checkbox', width: 60, align: 'center', fixed: 'left', sortable: false, resizable: false, className: 'table-row-checkbox' },
+	{ title: '单选', type: 'radio', width: 60, align: 'center', fixed: 'left', sortable: false, resizable: false, className: 'table-row-radio' },
+	{ 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 importVisible = ref(false) // 导出入弹窗开关
+	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 tableColumns = computed(() => {
+		let defaultColumns = columnsConfigDefault.filter(item => tableGlobalConfig.value[item.type])
+		return defaultColumns.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 getSelectionData = () => {
+		return selectionRows.value || []
+	}
+	// 获取全部数据
+	const getFullData = () => {
+		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)
+				if (!$vUtils.isNone(cellValue)) {
+					let { rvalue, rtext } = $vUtils.formatRender(cellValue, property, row, rname, rprops, proxy)
+					$vUtils.set(row, property, rtext)
+				}
+			})
+		})
+		return data
+	}
+	// 表格打印、导出统一导出前渲染数据
+	const getExportPrintDataByOption = (obj = {}, type) => {
+		let { options, content } = obj
+		let { data, columns, mode } = options
+		if (!data) {
+			options.data = mode === 'selected' ? getSelectionData() : getFullData()
+		}
+		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 defaultColumns = columnsConfigDefault.filter(item => tableGlobalConfig.value[item.type])
+		let colspan = defaultColumns.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问题）待后续修复,目前没有啥好办法
+		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)
+					if ($vxePluginNames.expendRenders && $vxePluginNames.expendRenders.includes(item.rname)) {
+						let { rtext } = $vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, proxy)
+						return String(rtext).toLowerCase().indexOf(filterText) > -1
+					}
+					return $vUtils.trim(cellValue).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 = () => {
+		importVisible.value = 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,
+		tableColumns,
+		tableColumnConfig,
+		tableColumnObjConfig,
+		tableCheckboxConfig,
+		tableTreeConfig,
+		tableSeqConfig,
+		tableEditConfig,
+		tableEditRules,
+		tablePagerConfig,
+		tableExportConfig,
+		tablePrintConfig,
+		tableQueryConfig,
+		tableFilterText,
+		tableFilterConfig,
+		tableFilterData,
+		tableViewData,
+		tableTools,
+		tableSlots,
+		selectionRows,
+		importVisible,
+		columnsConfigDefault,
+		tableFooterMethod,
+		tableFooterSpanMethod,
+		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
+	}
+}