sh-view 2.1.0 → 2.2.0

package/packages/components/global-components/sh-table/{index.vue → grid.vue}

@@ -2,11 +2,11 @@
 	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
 		<vxe-grid
 			:id="id"
-			ref="vxeGrid"
+			ref="tableRef"
 			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
 			:columns="tableColumns"
-			:data="tableFilterData || dataSourse"
+			:data="tableViewData"
 			:width="width"
 			:height="height"
 			:min-height="minHeight"
@@ -100,16 +100,16 @@
 								共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
 							</span>
 						</div>
-						<div v-if="$slots.toolbarLeft" class="sh-table-toolbar-item">
+						<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">
+						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
 							<slot name="toolbarRight"></slot>
 						</div>
 						<div v-if="tableGlobalConfig.zoom" class="sh-table-toolbar-item">
-							<vxe-button v-if="!tableIsFullscreen" v-ripple icon="vxe-icon-zoom-out" @click="handleTableZoomBtn(true)">全屏</vxe-button>
+							<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>
 						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
@@ -139,8 +139,8 @@
 		</vxe-grid>
 		<!--导入弹窗-->
 		<importModal
-			v-if="importModal"
-			v-model:visible="importModal"
+			v-if="importVisible"
+			v-model:visible="importVisible"
 			need-validate
 			:columns="tableColumns"
 			:import-config="importConfig"
@@ -150,23 +150,17 @@
 </template>
 
 <script>
-import defaultData from './mixin/defaultData'
+import { defineComponent, getCurrentInstance, ref } from 'vue'
+import './css/index.scss'
+
 import props from './js/props'
-import methods from './js/methods'
 import importModal from './components/importModal.vue'
-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: '打印' }
-]
-export default {
-	name: 'ShTable',
+import useTable from './js/useTable'
+export default defineComponent({
+	name: 'ShGrid',
 	components: {
 		importModal
 	},
-	mixins: [defaultData],
 	props: {
 		...props
 	},
@@ -197,133 +191,28 @@ export default {
 		'globaloption',
 		'toolbaroption'
 	],
-	data() {
-		return {
-			// 渲染key值
-			renderKey: 1,
-			// 全选状态
-			isAllChecked: false,
-			// 半选状态
-			isIndeterminate: false,
-			// table选中keys
-			selectedRowKeys: [],
-			// table选中records
-			selectionRows: [],
-			// 表格格式化后表头
-			tableColumnsFixed: [],
-			// 表格全表搜索数据
-			tableFilterData: null,
-			// 多层转一维后表头
-			tableColumnsFlat: [],
-			// 根据表格表头生成表单项配置
-			tableFormItems: [],
-			// 表格根据表头自动生成验证规则
-			tableEditRules: {},
-			// 全局过滤关键字
-			tableFilterText: '',
-			// 表格当前高亮行
-			tableCurrentRowData: null,
-			// 导出入弹窗开关
-			importModal: false,
-			// 表格是否全屏显示状态
-			tableIsFullscreen: false,
-			// 根据表头生成行默认值
-			tableRowDefaultData: {}
-		}
-	},
-	computed: {
-		wrapHeight() {
-			return [100, '100%', 'auto'].includes(this.height) ? '100%' : 'auto'
-		},
-		tableVmConfig() {
-			return { size: this.size }
-		},
-		tableGlobalConfig() {
-			return Object.assign({}, this.globalConfigDefault, this.globalConfig)
-		},
-		tableTools() {
-			let tools = this.globalConfig?.tools || []
-			return toolsList.filter(tool => tools.includes(tool.code))
-		},
-		tableColumns() {
-			let defaultColumns = this.columnsConfigDefault.filter(item => this.tableGlobalConfig[item.type])
-			return defaultColumns.concat(this.tableColumnsFixed)
-		},
-		tableColumnConfig() {
-			return Object.assign({ isCurrent: false, isHover: true, resizable: true }, this.columnConfig)
-		},
-		tablePagerConfig() {
-			return Object.assign({ enabled: this.pagerConfig, total: 0, className: 'sh-table-footer', slots: { left: 'pagerLeft', right: 'pagerRight' } }, this.pagerConfig)
-		},
-		tableCheckboxConfig() {
-			let hasTree = this.columns.some(_ => _.treeNode)
-			return Object.assign({ range: !hasTree }, this.checkboxConfig)
-		},
-		tableTreeConfig() {
-			let hasTree = this.columns.some(_ => _.treeNode)
-			return hasTree ? Object.assign({}, this.treeConfig) : null
-		},
-		tableExportConfig() {
-			return Object.assign({ filename: this.tableGlobalConfig.tableName, sheetName: 'sheet1' }, this.exportConfigDefault, this.exportConfig)
-		},
-		tablePrintConfig() {
-			return Object.assign({ filename: this.tableGlobalConfig.tableName, sheetName: this.tableGlobalConfig.tableName }, this.printConfigDefault, this.printConfig)
-		},
-		tableEditConfig() {
-			return Object.assign({ enabled: !this.disabled, showStatus: !this.disabled, showUpdateStatus: !this.disabled, showInsertStatus: !this.disabled }, this.editConfig)
-		},
-		tableQueryConfig() {
-			// 高级查询
-			return Object.assign(
-				{ data: this.queryData, items: this.tableFormItems, rules: this.tableEditRules, validConfig: this.validConfig, globalConfig: this.tableGlobalConfig, transformitem: false },
-				this.tableVmConfig
-			)
-		},
-		tableFilterConfig() {
-			// 模糊搜索
-			return Object.assign({ size: this.size, clearable: true, type: 'search', placeholder: '全局关键字搜索' }, this.tableVmConfig)
-		},
-		tableSlots() {
-			let disSlots = ['head', 'form', 'formLeft', 'formRight', 'toolbar', 'toolbarLeft', 'toolbarRight', 'pagerLeft', 'pagerRight']
-			return Object.keys(this.$slots).filter(key => !disSlots.includes(key))
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+
+		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()
+			}
 		}
-	},
-	watch: {
-		columns: {
-			handler(newvalue, oldValue) {
-				this.initTableColumns(newvalue)
-			},
-			deep: true,
-			immediate: true
-		},
-		dataSourse: {
-			handler(newvalue, oldValue) {
-				this.initColsDefaultValue()
-				this.selectionRows = []
-			},
-			immediate: true
-		},
-		editRules: {
-			handler(newvalue, oldValue) {
-				this.initEditRules(newvalue)
-			},
-			deep: true,
-			immediate: true
+
+		return {
+			...useTableHooks,
+			tableIsFullscreen,
+			handleTableZoomBtn
 		}
-	},
-	created() {
-		this.initCreated()
-	},
-	mounted() {},
-	methods: {
-		tableRef() {
-			return this.$refs.vxeGrid
-		},
-		...methods
 	}
-}
+})
 </script>
-
-<style lang="scss">
-@import './css/index.scss';
-</style>

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

@@ -0,0 +1,175 @@
+import { utils } from 'sh-tools'
+const $vUtils = utils
+
+// 判断为true
+const isTrue = value => {
+	return String(value) === '1' || String(value).toLowerCase() === 'true'
+}
+// 获取默认验证信息
+const 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
+}
+
+// 表格打印、导出统一过滤列
+export const 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
+}
+
+// 默认求底部计算方法(已改用footer渲染器，其他需要自行计算)
+export const 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
+			$vUtils.set(column, `rfooter.index`, textIndex)
+			$vUtils.set(column, `rfooter.${computeName}`, { computeType, result, typeObj })
+		}
+		return result
+	})
+}
+// 转化表头过滤配置
+export const 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
+		}
+	}
+}
+// 转换表头校验规则
+export const getFieldsRules = columns => {
+	let rules = {}
+	$vUtils.eachTree(columns, column => {
+		// 首先提取校验配置
+		if (isTrue(column['renderRequire'])) {
+			// 若配置了校验参数则走校验参数，没配置则给默认校验条件
+			if (column['requireProps'] && Array.isArray(column['requireProps']) && column['requireProps'].length > 0) {
+				rules[column['field']] = column['requireProps']
+			} else {
+				let dataType = 'string'
+				let arrayType = ['$vCheckgroup', '$vUpload', '$vTable']
+				if (arrayType.includes(column['renderName']) || ((column['renderName'] === '$vSelect' || column['renderName'] === '$vTree') && isTrue(column.renderProps?.multiple))) {
+					dataType = 'array'
+				}
+				rules[column['field']] = [{ required: true, message: getDefaultMessage(column['renderName'], column['title']), type: dataType }]
+			}
+		}
+	})
+	return rules
+}
+// 转换生成新表头数据
+export const getTransfarFields = (oriArr = [], columnObj, isSearch) => {
+	let columnsFlatArr = []
+	let formItemsArr = []
+	let columnsArr = $vUtils.mapTree(oriArr, ori => {
+		let tar = Object.assign({}, 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 (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 (isSearch) {
+				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) {
+				turnColumnItemFilters(tar, renderConfig.props)
+			}
+		}
+		columnsFlatArr.push(tar)
+		return tar
+	})
+	return { columnsArr, columnsFlatArr, formItemsArr }
+}