sh-view 1.5.2

package/packages/components/global-components/sh-vxe-table/js/methods.js

@@ -0,0 +1,614 @@
+const vxeEvents = {
+	// -------- 表格
+	// 当前行变化
+	onCurrentChange(params) {
+		this.tableCurrentRowData = params
+		this.$emit('current-change', params)
+	},
+	// 单选框变化
+	onRadioChange(params) {
+		const that = this
+		var { row } = params
+		that.selectionRows = [row]
+		that.$emit('radio-change', that.selectionRows, params)
+	},
+	// 复选框变化
+	onSelectionChange(params) {
+		let { records } = params
+		this.isAllChecked = this.tableRef().isAllCheckboxChecked()
+		this.isIndeterminate = this.tableRef().isAllCheckboxIndeterminate()
+		if (this.tableTreeConfig && this.tableTreeConfig?.transform) {
+			let keyField = this.rowConfig.keyField || '_XID'
+			let childRowsKeys = []
+			this.$vUtils.eachTree(records, row => {
+				if (row._X_ROW_CHILD && row._X_ROW_CHILD.length > 0) {
+					row._X_ROW_CHILD.forEach(child => {
+						childRowsKeys.push(child[keyField])
+					})
+				}
+			})
+			records = records.filter(row => !childRowsKeys.includes(row[keyField]))
+		}
+		this.selectionRows = records
+		this.$emit('selection-change', this.selectionRows, params)
+	},
+	// 单元格点击事件
+	onCellClick(params) {
+		this.$emit('cell-click', params)
+	},
+	// 单元格双击事件
+	onCellDblClick(params) {
+		this.$emit('cell-dblclick', params)
+	},
+	// 单元格双击事件
+	onHeaderCellClick(params) {
+		this.$emit('header-cell-click', params)
+	},
+	// 排序变化事件
+	onSortChange(params) {
+		this.$emit('sort-change', params)
+	},
+	// 过滤变化事件
+	onFilterChange(params) {
+		this.$emit('filter-change', params)
+	},
+	// 当行展开或收起时会触发该事件
+	onToggleRowExpand(params) {
+		this.$emit('toggle-row-expand', params)
+	},
+	// 当树节点展开或收起时会触发该事件
+	onToggleTreeExpand(params) {
+		this.$emit('toggle-tree-expand', params)
+	},
+	// 只对 edit-config 配置时有效，单元格编辑状态下被关闭时会触发该事件
+	async onEditClosed(params) {
+		const that = this
+		let { row, column } = params
+		let { property, model, rname, rprops } = column
+		if ((model.update || model.change) && rname) {
+			let { rvalue, rtext } = that.$vUtils.formatRender(model.value, property, row, rname, rprops, that)
+			that.$vUtils.set(row, column.property, rvalue)
+			model.change = false
+		}
+		that.$emit('edit-closed', params)
+	},
+	// 只对 edit-config 配置时有效，单元格被激活编辑时会触发该事件
+	async onEditActived(params) {
+		this.$emit('edit-actived', params)
+	},
+	// 滚动事件
+	onScroll(params) {
+		this.$emit('scroll', params)
+	},
+	// 如果与工具栏关联，在自定义列按钮被手动点击后会触发该事件
+	onCustom(params) {
+		this.$emit('custom', params)
+	},
+	// 分页变化触发
+	onPageChange(params) {
+		let { currentPage, pageSize } = params
+		this.selectionRows = []
+		this.tablePagerConfig.currentPage = currentPage
+		this.tablePagerConfig.pageSize = pageSize
+		this.$emit('page-change', params)
+	},
+
+	// -------- 工具栏
+	// 只对 toolbar.buttons 配置时有效，当左侧按钮被点击时会后触发该事件
+	onToolbarButtonClick(params) {
+		this.$emit('toolbar-button-click', params)
+	},
+	// 只对 toolbar.tools 配置时有效，当右侧工具被点击时会后触发该事件
+	onToolbarToolClick(params) {
+		this.$emit('toolbar-tool-click', params)
+	}
+}
+
+const vxeFormEvents = {
+	// 表单展开全部/收起切换事件
+	onFormCollapsed(value) {
+		const that = this
+		if (that.tableVitualScroll) {
+			setTimeout(() => {
+				that.tableRef().recalculate(true)
+			}, 200)
+		}
+	},
+	// -------- 搜索
+	onFormSubmit() {
+		this.$emit('form-submit', this.queryData)
+	},
+	// 表单重置
+	onFormReset(params) {
+		this.$emit('form-reset', params)
+	},
+	// 表单项编辑回调
+	onFormEditClosed(obj, renderbox, $form) {
+		this.$emit('form-edit-closed', obj, renderbox, $form)
+	},
+	// 表单校验不通过
+	onFormSubmitInvalid(obj) {
+		this.$emit('form-submit-invalid', obj)
+	}
+}
+
+const vxeMethods = {
+	// // vxe组件方法可通过 this.tableRef() 调用
+	// 表格全选
+	setSelectionAll() {
+		const that = this
+		that.isAllChecked = !that.isAllChecked
+		that.tableRef().setAllCheckboxRow(that.isAllChecked)
+		that.selectionRows = that.tableRef().getCheckboxRecords()
+	},
+	// 表格打印、导出统一过滤列
+	columnDefaultFilterMethod({ column, $columnIndex }) {
+		let field = column.field
+		let renderObj = column.cellRender || column.editRender
+		let renderName = renderObj && renderObj.name
+		let returnValue = true
+		if (!field || ['seq', 'checkbox', 'radio'].includes(column.type)) {
+			returnValue = false
+		} else if (renderName === '$vGlobalOption') {
+			returnValue = false
+		}
+		return returnValue
+	},
+	// 表格打印、导出统一导出前渲染数据
+	getExportPrintDataByOption(obj = {}, type) {
+		let { options, content } = obj
+		let { data, columns, mode } = options
+		if (!data) {
+			if (mode === 'selected') {
+				data = this.getSelectionData()
+			} else {
+				data = this.$vUtils.clone(this.tableRef().getTableData().fullData, true)
+				columns.forEach(col => {
+					let { property, rname, rprops } = col
+					if (rname) {
+						data.forEach(row => {
+							if (!this.$vUtils.isNone(row[property])) {
+								row[property] = this.$vUtils.formatRender(row[property], property, row, rname, rprops, this)
+							}
+						})
+					}
+				})
+			}
+			options.data = data
+		}
+		if (type === 'print') {
+			return content
+		}
+		return obj
+	},
+	// 表格导出-自定义工作簿
+	exportSheetMethod({ options, workbook, worksheet }) {},
+	// 表格导入方法
+	setImportData(params) {
+		this.$emit('import-confirm', params)
+	},
+	// 默认求底部绑定方法vxe
+	tableFooterMethod({ columns, data }) {
+		let that = this
+		let footerData = []
+		let footerCalculateList = that.footerCalculate.calculate || []
+		footerCalculateList.forEach(key => {
+			footerData.push(that.tableFooterCompute(columns, data, key, that.footerCalculate[key]))
+		})
+		return footerData
+	},
+	// 默认求底部计算方法(已改用footer渲染器，其他需要自行计算)
+	tableFooterCompute(columns, data, computeType, typeObj = {}) {
+		let emptyString = ''
+		let computeName = typeObj.name || ''
+		let computeData = typeObj.data || {}
+		let textIndex = 0
+		if (!computeName) {
+			switch (computeType) {
+				case 'subTotal':
+					computeName = '合计'
+					break
+				case 'allTotal':
+					computeName = '总计'
+					break
+				case 'mean':
+					computeName = '平均'
+					break
+				default:
+			}
+		}
+		return columns.map((column, columnIndex) => {
+			let result = null
+			if (column.type === 'seq' || column.type === 'total') {
+				result = computeName
+				textIndex = columnIndex
+			} else {
+				result = computeData[column.property] || emptyString
+				this.$vUtils.set(column, `rfooter.index`, textIndex)
+				this.$vUtils.set(column, `rfooter.${computeName}`, { computeType, result, typeObj })
+			}
+			return result
+		})
+	},
+	tableFooterSpanMethod({ $rowIndex, column, $columnIndex, data }) {
+		let that = this
+		let defaultColumns = that.columnsConfigDefault.filter(item => that.tableGlobalConfig[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 }
+		} else {
+			return { rowspan: 1, colspan: 1 }
+		}
+	}
+}
+
+const shMethods = {
+	// 初始化
+	initCreated() {},
+	// 初始化分页配置
+	initPagerConfig() {
+		if (this.pagerConfig === false || this.reverse) {
+			this.tablePagerConfig = { enabled: false }
+		} else {
+			this.tablePagerConfig = Object.assign({}, this.pagerConfigDefault, this.pagerConfig)
+		}
+	},
+	// 初始化生成新表头数据
+	initTableColumns(columns = []) {
+		let that = this
+		let { columnsArr, columnsFlatArr, formItemsArr, rules } = that.getTransfarColumn(columns)
+		that.tableColumnsFlat = columnsFlatArr
+		that.tableFormItems = formItemsArr
+		that.initEditRules(rules)
+		if (!that.tableReverse) {
+			that.tableColumnsFixed = that.$vUtils.clone(columnsArr, true)
+		} else {
+			that.tableColumnsFixed = that.getReverseColumn(that.columns)
+		}
+	},
+	// 初始化验证规则
+	initEditRules(rules) {
+		const that = this
+		if (rules && that.$vUtils.isPlainObject(rules)) {
+			Object.keys(rules).forEach(key => {
+				if (that.tableEditRules[key]) {
+					that.tableEditRules[key] = Array.from(new Set(that.tableEditRules[key].concat(rules[key])))
+				} else {
+					that.tableEditRules[key] = rules[key]
+				}
+			})
+		}
+	},
+	// 初始化表头配置默认值
+	initColsDefaultValue() {
+		const that = this
+		let colsDefaultValue = {}
+		that.$vUtils.eachTree(that.tableColumnsFlat, item => {
+			let renderObj = item.editRender || item.cellRender || {}
+			let noRenderArr = ['$vGlobalOption']
+			if (!noRenderArr.includes(renderObj.name) && !that.$vUtils.isNone(renderObj.props?.defaultValue)) {
+				that.$vUtils.set(colsDefaultValue, item.field, renderObj.props?.defaultValue)
+			}
+		})
+		that.tableRowDefaultData = colsDefaultValue
+		if (Array.isArray(that.dataSourse) && Object.keys(colsDefaultValue).length > 0) {
+			that.dataSourse.forEach(row => {
+				Object.keys(colsDefaultValue).forEach(field => {
+					if (that.$vUtils.isNone(that.$vUtils.get(row, field))) {
+						that.$vUtils.set(row, field, that.$vUtils.get(colsDefaultValue, field))
+					}
+				})
+			})
+		}
+	},
+	// 反转表格-反转表头及数据
+	getReverseColumn(oriColumns) {
+		const that = this
+		let columns = []
+		let columnsNum = that.reverseConfig.num
+		let keyPrefix = that.reverseConfig.keyPrefix || 'reversePre'
+		let titPrefix = that.reverseConfig.titPrefix || ''
+		let valueRenderObj = that.disabled ? { cellRender: { name: '$vRowCell' } } : { editRender: { name: '$vRowCell' } }
+		if (columnsNum) {
+			for (let i = 1; i <= columnsNum; i++) {
+				columns.push(
+					Object.assign({ field: `${keyPrefix}title${i}`, title: `名称${i}` }, that.columnObjDefault),
+					Object.assign({ field: `${keyPrefix}value${i}`, title: `数值${i}` }, that.columnObjDefault, valueRenderObj)
+				)
+			}
+		} else {
+			columns.push(Object.assign({ field: `${keyPrefix}title`, title: '名称', fixed: 'left' }, that.columnObjDefault))
+			that.dataSourse.forEach((item, index) => {
+				columns.push(Object.assign({ field: `${keyPrefix}value${index + 1}`, title: `${titPrefix}${index + 1}` }, that.columnObjDefault, valueRenderObj))
+			})
+		}
+		return columns
+	},
+	// 反转表格-反转配置生成数据
+	getReverseData(oriData = []) {
+		const that = this
+		let data = []
+		let columnsNum = that.reverseConfig.num
+		let keyPrefix = that.reverseConfig.keyPrefix || 'reversePre'
+		if (columnsNum) {
+			// 将表头平均分组
+			let chunkColumns = that.$vUtils.chunk(that.columns, columnsNum)
+			chunkColumns.forEach((colGroup, colGroupIndex) => {
+				let item = {}
+				colGroup.forEach((column, columnIndex) => {
+					item[`${keyPrefix}title${columnIndex + 1}`] = column.title
+					item[`${keyPrefix}value${columnIndex + 1}`] = oriData[colGroupIndex][column.field] || ''
+					item[`${keyPrefix}value${columnIndex + 1}field`] = column.field || ''
+					column.field ? (item[`${column.field}RenderName`] = column.renderName || '') : ''
+				})
+				data.push(item)
+			})
+		} else {
+			data = that.columns.map(column => {
+				const item = { [`${keyPrefix}title`]: column.title }
+				oriData.forEach((row, index) => {
+					item[`${keyPrefix}value${index + 1}`] = row[column.field] || ''
+					item[`${keyPrefix}value${index + 1}field`] = column.field || ''
+					column.field ? (item[`${column.field}RenderName`] = column.renderName || '') : ''
+				})
+				return item
+			})
+		}
+		return data
+	},
+	// 转换生成新表头数据
+	getTransfarColumn(oriArr = []) {
+		let that = this
+		let columnsFlatArr = []
+		let formItemsArr = []
+		let rules = {}
+		let columnsArr = that.$vUtils.mapTree(oriArr, ori => {
+			let tar = Object.assign({}, that.columnObjDefault, that.columnObj, ori)
+			if (ori.children && ori.children.length > 0) {
+				tar.sortable = false
+				tar.filter = false
+			} else {
+				let renderConfig = {
+					name: ori.renderName || '$vInput',
+					props: Object.assign({}, ori.renderProps || {})
+				}
+				// 首先提取校验配置
+				if (that.isTrue(tar['renderRequire'])) {
+					// 若配置了校验参数则走校验参数，没配置则给默认校验条件
+					if (tar['requireProps'] && Array.isArray(tar['requireProps']) && tar['requireProps'].length > 0) {
+						rules[tar['field']] = tar['requireProps']
+					} else {
+						let dataType = 'string'
+						let arrayType = ['$vCheckgroup', '$vUpload', '$vTable']
+						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && that.isTrue(renderConfig.props.multiple))) {
+							dataType = 'array'
+						}
+						rules[tar['field']] = [{ required: true, message: that.getDefaultMessage(tar['renderName'], tar['title']), type: dataType }]
+					}
+				}
+				// 个性化设置
+				if (tar.renderName === '$vGlobalOption' || ['$vImg', '$vHref', '$vUpload'].includes(tar.renderName)) {
+					tar.filter = false
+					tar.sortable = false
+				}
+				if (tar.renderName === '$vGlobalOption') {
+					tar.resizable = false
+				}
+				if (tar.renderName === '$vMoney' || ['number', 'float', 'integer'].includes(renderConfig.props.type)) {
+					tar.cellType = 'number'
+				}
+				if (tar.renderName === '$vMoney' && renderConfig.props.bill) {
+					tar.filter = false
+					tar.headerClassName = tar.headerClassName ? `${tar.headerClassName} header-bill-cell` : 'header-bill-cell'
+				}
+				// 初始化排序条件
+				if (Number(tar.sortable) === 0 || tar.sortable === 'false') {
+					tar.sortable = false
+				}
+				// 判断单元格是否可编辑
+				if (ori.readonly || ori.slots?.default || (!ori.renderName && !(tar.editRender && tar.editRender.name))) {
+					tar.cellRender = Object.assign({}, renderConfig, tar.cellRender || {})
+				} else {
+					tar.editRender = Object.assign({}, renderConfig, tar.editRender || {})
+				}
+				// 初始化表单查询配置
+				if (that.tableGlobalConfig.search) {
+					let editFixedNames = ['$vImg', '$vHref', '$vUpload']
+					let formItem = Object.assign({}, tar)
+					formItem.itemRender = Object.assign({}, renderConfig, tar.editRender || {}, tar.itemRender || {})
+					delete formItem.cellRender
+					delete formItem.editRender
+					formItem.itemRender.name = formItem.itemRender.name || '$vInput'
+					// 此处修正， 对其不进行默认渲染
+					if (formItem.search && formItem.search !== '0' && !editFixedNames.includes(formItem.itemRender.name)) {
+						formItemsArr.push(formItem)
+					}
+				}
+				// 初始化过滤条件
+				if (tar.filter === true || Number(tar.filter) === 1) {
+					that.turnColumnItemFilters(tar, renderConfig.props)
+				}
+			}
+			columnsFlatArr.push(tar)
+			return tar
+		})
+		return { columnsArr, columnsFlatArr, formItemsArr, rules }
+	},
+	// 转化表头过滤配置
+	turnColumnItemFilters(column, props) {
+		let columnRender = column.cellRender || column.editRender || column.contentRender
+		let columnProps = Object.assign({}, props)
+		columnProps.colRenderName = columnRender.name
+		if (!column.filters) {
+			switch (columnRender.name) {
+				case '$select':
+				case '$vSelect':
+				case '$vCheckgroup':
+				case '$vRadiogroup':
+				case '$vSwitch':
+					column.filters = Array.isArray(columnRender.props && columnRender.props.options) ? columnRender.props.options : false
+					column.filterMultiple = true
+					break
+				case '$vInput':
+					column.filters = [{ value: '', data: '' }]
+					column.filterRender = { name: '$vFilterInput', props: columnProps }
+					break
+				default:
+					column.filters = [{ value: '', data: '' }]
+					column.filterRender = { name: '$vFilterInput', props: columnProps }
+					break
+			}
+		}
+	},
+	// 获取默认验证信息
+	getDefaultMessage(renderType, title) {
+		let message = ''
+		const selectRenders = ['$vSelect', '$vTree', '$vTime', '$vSwitch', '$vCheckbox', '$vCheckgroup', '$vRadio', '$vRadiogroup', '$vUpload']
+		if (selectRenders.includes(renderType)) {
+			message = '请选择' + title
+		} else {
+			message = '请输入' + title
+		}
+		return message
+	},
+	// 判断为true
+	isTrue(value) {
+		return String(value) === '1' || String(value).toLowerCase() === 'true'
+	},
+	// 全局搜索输入框事件
+	handleTableFilter(obj) {
+		const that = this
+		let filterText = that.tableFilterText
+		let filterData = null
+		if (filterText) {
+			let searchFields = []
+			let tableColumnsAll = that.tableRef().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 = that.$vUtils.searchTree(that.dataSourse, row => {
+				return searchFields.some(item => {
+					let cellValue = that.$vUtils.get(row, item.rkey)
+					if (that.$vxePluginNames.expendRenders && that.$vxePluginNames.expendRenders.includes(item.rname)) {
+						let { rtext } = that.$vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, that)
+						return String(rtext).toLowerCase().indexOf(filterText) > -1
+					}
+					return that.$vUtils.trim(cellValue).toLowerCase().indexOf(filterText) > -1
+				})
+			})
+		}
+		if (that.tableFilterData === null && !filterText) {
+			return
+		}
+		that.tableFilterData = filterData
+	},
+	// 获取选中数据
+	getSelectionData() {
+		return this.selectionRows || []
+	},
+	// 表格验证方法
+	validate(rows = true) {
+		return this.tableRef().validate(rows)
+	},
+	// 刷新表格视图
+	refreshRender() {
+		this.renderKey++
+	},
+	// 表格导出按钮
+	handleTableExportBtn(options) {
+		if (typeof this.onExportMethod === 'function') {
+			return this.onExportMethod(options, this)
+		}
+		return this.tableRef().openExport(options)
+	},
+	// 表格导入按钮
+	handleTableImportBtn() {
+		this.importModal = true
+	},
+	// 表格打印按鈕
+	handleTablePrintBtn(options) {
+		if (typeof this.onPrintMethod === 'function') {
+			return this.onPrintMethod(options, this)
+		}
+		return this.tableRef().openPrint(options)
+	},
+	// 表格切换全屏缩放按钮
+	handleTableZoomBtn(val) {
+		this.tableIsFullscreen = val
+		if (val) {
+			this.tableRef().zoom()
+		} else {
+			this.tableRef().revert()
+		}
+	},
+	// 自定义操作列点击事件
+	handleGoptionClick(btnObj, dataObj) {
+		const that = this
+		if (btnObj.code === 'delete' || btnObj.idConfirm) {
+			that.msgconfirm({
+				content: btnObj.ConfirmContent || `确定${btnObj.content}吗？`
+			}).then(() => {
+				that.$emit('globaloption', btnObj, dataObj)
+			})
+		} else {
+			that.$emit('globaloption', btnObj, dataObj)
+		}
+	},
+	// 新增行按钮
+	async handleTableAddRow(rows, index = -1, isTool = false) {
+		const that = this
+		let tableRowDefaultData = Object.assign({}, that.tableRowDefaultData)
+		let addRows = rows ? that.$vUtils.clone(rows, true) : tableRowDefaultData
+		if (!isTool && typeof that.onToolbarBtnAddBefore === 'function') {
+			addRows = await that.onToolbarBtnAddBefore(addRows)
+		}
+		// 删除主键，以防排序冲突
+		let mainKeyField = that.rowConfig?.keyField || '_XID'
+		if (Array.isArray(addRows)) {
+			addRows.forEach(item => {
+				delete item[mainKeyField]
+			})
+		} else {
+			delete addRows[mainKeyField]
+		}
+		let { row: newRow } = await that.tableRef().insertAt(addRows, index)
+		await that.tableRef().setActiveRow(newRow)
+		if (!isTool) that.$emit('toolbaroption', 'add', newRow, that.tableRef())
+	},
+	// 删除行按钮
+	async handleTableDeleteRow(rows, isTool = false) {
+		const that = this
+		let deleteRows = rows
+		if (isTool) {
+			let selectedRows = that.getSelectionData()
+			if (selectedRows.length < 1) {
+				that.msgwarning('请选择要删除的行！')
+				return
+			}
+			deleteRows = selectedRows
+			await that.msgconfirm({ content: `确定删除吗？` })
+		} else if (typeof that.onToolbarBtnDeleteBefore === 'function') {
+			let result = await that.onToolbarBtnDeleteBefore(deleteRows)
+			if (!result) return
+		}
+		await that.tableRef().remove(deleteRows)
+		if (that.selectionRows && that.selectionRows.length > 0) {
+			let keyField = that.rowConfig.keyField || that.$vTableSetup.table.rowConfig.keyField
+			that.selectionRows = that.selectionRows.filter(sr => !deleteRows.find(dr => dr[keyField] === sr[keyField]))
+		}
+		if (!isTool) that.$emit('toolbaroption', 'delete', deleteRows, that.tableRef())
+	}
+}
+
+export default {
+	...vxeEvents,
+	...vxeFormEvents,
+	...vxeMethods,
+	...shMethods
+}