sh-view 2.8.0 → 2.8.2

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

@@ -1,217 +1,217 @@
-<template>
-	<div ref="tableWrapRef" class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost, 'is--loading': tableBindConfig.loading }" :style="{ height: wrapHeight }">
-		<div v-if="isTopSlot" ref="topSlotRef" v-resize="handleResize" class="sh-table-top"><slot name="top"></slot></div>
-		<div v-if="isFormSlot" ref="formSlotRef" v-resize="handleResize" class="sh-table-form">
-			<slot name="form">
-				<sh-query v-bind="tableQueryConfig" @submit="onFormSubmit" @reset="onFormReset" @collapsed="onFormCollapsed" @edit-closed="onFormEditClosed">
-					<template #footLeft><slot name="formLeft"></slot></template>
-					<template #footRight><slot name="formRight"></slot></template>
-				</sh-query>
-			</slot>
-		</div>
-		<div v-if="isToolbarSlot" ref="toolbarSlotRef" v-resize="handleResize" class="sh-table-toolbar">
-			<slot name="toolbar">
-				<div class="sh-table-toolbar-wrap">
-					<div class="sh-table-toolbar-left">
-						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
-							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
-						</div>
-						<!--ps:全表搜索不支持反转-->
-						<div v-if="tableGlobalConfig.globalFilter" class="sh-table-toolbar-item">
-							<vxe-input v-model="tableFilterText" v-bind="tableFilterConfig" @blur="handleTableFilter" @clear="handleTableFilter" @search-click="handleTableFilter" />
-							<span v-if="tableFilterData">
-								共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
-							</span>
-						</div>
-						<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
-							<slot name="toolbarLeft"></slot>
-						</div>
-					</div>
-					<div class="sh-table-toolbar-right">
-						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
-							<slot name="toolbarRight"></slot>
-						</div>
-						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
-							<div class="sh-table-toolbar-item">
-								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
-							</div>
-						</template>
-					</div>
-				</div>
-			</slot>
-		</div>
-		<div v-if="isHeadSlot" ref="headSlotRef" v-resize="handleResize" class="sh-table-head"><slot name="head"></slot></div>
-		<vxe-table
-			:id="id"
-			ref="tableRef"
-			:key="renderKey"
-			:class="{ 'is--hasfooter': showFooter }"
-			v-bind="tableBindConfig"
-			:height="tableHeight"
-			@current-change="onCurrentChange"
-			@radio-change="onRadioChange"
-			@checkbox-change="onSelectionChange"
-			@checkbox-all="onSelectionChange"
-			@checkbox-range-end="onSelectionChange"
-			@cell-click="onCellClick"
-			@cell-dblclick="onCellDblClick"
-			@header-cell-click="onHeaderCellClick"
-			@sort-change="onSortChange"
-			@filter-change="onFilterChange"
-			@toggle-row-expand="onToggleRowExpand"
-			@toggle-tree-expand="onToggleTreeExpand"
-			@edit-closed="onEditClosed"
-			@edit-actived="onEditActived"
-			@scroll="onScroll"
-			@custom="onCustom"
-			@toolbar-button-click="onToolbarButtonClick"
-			@toolbar-tool-click="onToolbarToolClick"
-			@option-click="handleGoptionClick">
-			<template v-if="customLayout">
-				<slot></slot>
-			</template>
-			<template v-else>
-				<template v-for="(column, columnIndex) in tablePrevColumns" :key="columnIndex">
-					<vxe-column v-bind="column"></vxe-column>
-				</template>
-				<template v-for="(column, columnIndex) in columns" :key="columnIndex">
-					<sh-column :column="column"></sh-column>
-				</template>
-			</template>
-			<template #empty>
-				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
-			</template>
-		</vxe-table>
-		<div v-if="isFootSlot" ref="footSlotRef" v-resize="handleResize" class="sh-table-foot"><slot name="foot"></slot></div>
-		<div v-if="isPagerSlot" ref="pagerSlotRef" v-resize="handleResize" class="sh-table-pager">
-			<vxe-pager ref="pagerSlotRef" v-bind="tablePagerConfig" @page-change="onPageChange">
-				<template #pagerLeft>
-					<div v-if="selectionRows.length" class="sh-table-footer-info">
-						已选择 <strong>{{ selectionRows.length }}</strong> 项
-					</div>
-					<slot name="pagerLeft"></slot>
-				</template>
-				<template #pagerRight>
-					<slot name="pagerRight"></slot>
-				</template>
-			</vxe-pager>
-		</div>
-		<div v-if="isBottomSlot" ref="bottomSlotRef" v-resize="handleResize" class="sh-table-bottom"><slot name="bottom"></slot></div>
-		<!--导入弹窗-->
-		<importModal v-if="importBindConfig.modalConfig.modelValue" v-bind="importBindConfig" @confirm="setImportData"></importModal>
-	</div>
-</template>
-
-<script>
-import { computed, defineComponent, getCurrentInstance, provide, ref, reactive } from 'vue'
-import './css/index.scss'
-
-import props from './js/props'
-import shColumn from './components/sh-column.vue'
-import importModal from './components/importModal.vue'
-import useTable from './js/useTable'
-export default defineComponent({
-	name: 'ShTable',
-	components: {
-		shColumn,
-		importModal
-	},
-	props: {
-		...props
-	},
-	emits: [
-		'current-change',
-		'radio-change',
-		'selection-change',
-		'cell-click',
-		'cell-dblclick',
-		'header-cell-click',
-		'sort-change',
-		'filter-change',
-		'toggle-row-expand',
-		'toggle-tree-expand',
-		'edit-closed',
-		'edit-actived',
-		'scroll',
-		'custom',
-		'page-change',
-		'toolbar-button-click',
-		'toolbar-tool-click',
-
-		'form-submit',
-		'form-reset',
-		'form-edit-closed',
-		'form-submit-invalid',
-		'import-confirm',
-		'globaloption',
-		'toolbaroption'
-	],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { emit, slots } = context
-		const tableWrapRef = ref()
-		const topSlotRef = ref()
-		const formSlotRef = ref()
-		const toolbarSlotRef = ref()
-		const headSlotRef = ref()
-		const footSlotRef = ref()
-		const pagerSlotRef = ref()
-		const bottomSlotRef = ref()
-		const tableHeight = ref(props.height)
-
-		const useTableHooks = useTable(props, context, proxy)
-
-		const isTopSlot = computed(() => Boolean(slots.top))
-		const isFormSlot = computed(() => useTableHooks.tableGlobalConfig.value.search || Boolean(slots.form))
-		const isToolbarSlot = computed(() => {
-			const { title, globalFilter } = useTableHooks.tableGlobalConfig.value
-			return title || globalFilter || slots.toolbar || slots.toolbarLeft || slots.toolbarRight || useTableHooks.tableTools.value.length
-		})
-		const isHeadSlot = computed(() => Boolean(slots.head))
-		const isFootSlot = computed(() => Boolean(slots.foot))
-		const isPagerSlot = computed(() => useTableHooks.tablePagerConfig.value.enabled)
-		const isBottomSlot = computed(() => Boolean(slots.bottom))
-
-		provide(
-			'ShTableInstance',
-			reactive({
-				columnObjConfig: useTableHooks.tableColumnObjConfig,
-				turnColumnItemFilters: useTableHooks.turnColumnItemFilters,
-				slots: useTableHooks.slots
-			})
-		)
-
-		const handleResize = e => {
-			if (useTableHooks.wrapHeight.value === 'auto') return
-			let slotRefs = [topSlotRef, formSlotRef, toolbarSlotRef, headSlotRef, footSlotRef, pagerSlotRef, bottomSlotRef]
-			let otherHeight = 0
-			let parentHeight = tableWrapRef.value?.offsetHeight
-			slotRefs.forEach(slotRef => {
-				otherHeight += slotRef.value?.offsetHeight || 0
-			})
-			tableHeight.value = parentHeight - otherHeight
-		}
-
-		return {
-			...useTableHooks,
-			tableWrapRef,
-			topSlotRef,
-			formSlotRef,
-			toolbarSlotRef,
-			headSlotRef,
-			footSlotRef,
-			pagerSlotRef,
-			bottomSlotRef,
-			tableHeight,
-			isTopSlot,
-			isFormSlot,
-			isToolbarSlot,
-			isHeadSlot,
-			isFootSlot,
-			isPagerSlot,
-			isBottomSlot,
-			handleResize
-		}
-	}
-})
-</script>
+<template>
+	<div ref="tableWrapRef" class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost, 'is--loading': tableBindConfig.loading }" :style="{ height: wrapHeight }">
+		<div v-if="isTopSlot" ref="topSlotRef" v-resize="handleResize" class="sh-table-top"><slot name="top"></slot></div>
+		<div v-if="isFormSlot" ref="formSlotRef" v-resize="handleResize" class="sh-table-form">
+			<slot name="form">
+				<sh-query v-bind="tableQueryConfig" @submit="onFormSubmit" @reset="onFormReset" @collapsed="onFormCollapsed" @edit-closed="onFormEditClosed">
+					<template #footLeft><slot name="formLeft"></slot></template>
+					<template #footRight><slot name="formRight"></slot></template>
+				</sh-query>
+			</slot>
+		</div>
+		<div v-if="isToolbarSlot" ref="toolbarSlotRef" v-resize="handleResize" class="sh-table-toolbar">
+			<slot name="toolbar">
+				<div class="sh-table-toolbar-wrap">
+					<div class="sh-table-toolbar-left">
+						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
+							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
+						</div>
+						<!--ps:全表搜索不支持反转-->
+						<div v-if="tableGlobalConfig.globalFilter" class="sh-table-toolbar-item">
+							<vxe-input v-model="tableFilterText" v-bind="tableFilterConfig" @blur="handleTableFilter" @clear="handleTableFilter" @search-click="handleTableFilter" />
+							<span v-if="tableFilterData">
+								共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
+							</span>
+						</div>
+						<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
+							<slot name="toolbarLeft"></slot>
+						</div>
+					</div>
+					<div class="sh-table-toolbar-right">
+						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
+							<slot name="toolbarRight"></slot>
+						</div>
+						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
+							<div class="sh-table-toolbar-item">
+								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+							</div>
+						</template>
+					</div>
+				</div>
+			</slot>
+		</div>
+		<div v-if="isHeadSlot" ref="headSlotRef" v-resize="handleResize" class="sh-table-head"><slot name="head"></slot></div>
+		<vxe-table
+			:id="id"
+			ref="tableRef"
+			:key="renderKey"
+			:class="{ 'is--hasfooter': showFooter }"
+			v-bind="tableBindConfig"
+			:height="tableHeight"
+			@current-change="onCurrentChange"
+			@radio-change="onRadioChange"
+			@checkbox-change="onSelectionChange"
+			@checkbox-all="onSelectionChange"
+			@checkbox-range-end="onSelectionChange"
+			@cell-click="onCellClick"
+			@cell-dblclick="onCellDblClick"
+			@header-cell-click="onHeaderCellClick"
+			@sort-change="onSortChange"
+			@filter-change="onFilterChange"
+			@toggle-row-expand="onToggleRowExpand"
+			@toggle-tree-expand="onToggleTreeExpand"
+			@edit-closed="onEditClosed"
+			@edit-actived="onEditActived"
+			@scroll="onScroll"
+			@custom="onCustom"
+			@toolbar-button-click="onToolbarButtonClick"
+			@toolbar-tool-click="onToolbarToolClick"
+			@option-click="handleGoptionClick">
+			<template v-if="customLayout">
+				<slot></slot>
+			</template>
+			<template v-else>
+				<template v-for="(column, columnIndex) in tablePrevColumns" :key="columnIndex">
+					<vxe-column v-bind="column"></vxe-column>
+				</template>
+				<template v-for="(column, columnIndex) in columns" :key="columnIndex">
+					<sh-column :column="column"></sh-column>
+				</template>
+			</template>
+			<template #empty>
+				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
+			</template>
+		</vxe-table>
+		<div v-if="isFootSlot" ref="footSlotRef" v-resize="handleResize" class="sh-table-foot"><slot name="foot"></slot></div>
+		<div v-if="isPagerSlot" ref="pagerSlotRef" v-resize="handleResize" class="sh-table-pager">
+			<vxe-pager ref="pagerSlotRef" v-bind="tablePagerConfig" @page-change="onPageChange">
+				<template #pagerLeft>
+					<div v-if="selectionRows.length" class="sh-table-footer-info">
+						已选择 <strong>{{ selectionRows.length }}</strong> 项
+					</div>
+					<slot name="pagerLeft"></slot>
+				</template>
+				<template #pagerRight>
+					<slot name="pagerRight"></slot>
+				</template>
+			</vxe-pager>
+		</div>
+		<div v-if="isBottomSlot" ref="bottomSlotRef" v-resize="handleResize" class="sh-table-bottom"><slot name="bottom"></slot></div>
+		<!--导入弹窗-->
+		<importModal v-if="importBindConfig.modalConfig.modelValue" v-bind="importBindConfig" @confirm="setImportData"></importModal>
+	</div>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance, provide, ref, reactive } from 'vue'
+import './css/index.scss'
+
+import props from './js/props'
+import shColumn from './components/sh-column.vue'
+import importModal from './components/importModal.vue'
+import useTable from './js/useTable'
+export default defineComponent({
+	name: 'ShTable',
+	components: {
+		shColumn,
+		importModal
+	},
+	props: {
+		...props
+	},
+	emits: [
+		'current-change',
+		'radio-change',
+		'selection-change',
+		'cell-click',
+		'cell-dblclick',
+		'header-cell-click',
+		'sort-change',
+		'filter-change',
+		'toggle-row-expand',
+		'toggle-tree-expand',
+		'edit-closed',
+		'edit-actived',
+		'scroll',
+		'custom',
+		'page-change',
+		'toolbar-button-click',
+		'toolbar-tool-click',
+
+		'form-submit',
+		'form-reset',
+		'form-edit-closed',
+		'form-submit-invalid',
+		'import-confirm',
+		'globaloption',
+		'toolbaroption'
+	],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { emit, slots } = context
+		const tableWrapRef = ref()
+		const topSlotRef = ref()
+		const formSlotRef = ref()
+		const toolbarSlotRef = ref()
+		const headSlotRef = ref()
+		const footSlotRef = ref()
+		const pagerSlotRef = ref()
+		const bottomSlotRef = ref()
+		const tableHeight = ref(props.height)
+
+		const useTableHooks = useTable(props, context, proxy)
+
+		const isTopSlot = computed(() => Boolean(slots.top))
+		const isFormSlot = computed(() => useTableHooks.tableGlobalConfig.value.search || Boolean(slots.form))
+		const isToolbarSlot = computed(() => {
+			const { title, globalFilter } = useTableHooks.tableGlobalConfig.value
+			return title || globalFilter || slots.toolbar || slots.toolbarLeft || slots.toolbarRight || useTableHooks.tableTools.value.length
+		})
+		const isHeadSlot = computed(() => Boolean(slots.head))
+		const isFootSlot = computed(() => Boolean(slots.foot))
+		const isPagerSlot = computed(() => useTableHooks.tablePagerConfig.value.enabled)
+		const isBottomSlot = computed(() => Boolean(slots.bottom))
+
+		provide(
+			'ShTableInstance',
+			reactive({
+				columnObjConfig: useTableHooks.tableColumnObjConfig,
+				turnColumnItemFilters: useTableHooks.turnColumnItemFilters,
+				slots: useTableHooks.slots
+			})
+		)
+
+		const handleResize = e => {
+			if (useTableHooks.wrapHeight.value === 'auto') return
+			let slotRefs = [topSlotRef, formSlotRef, toolbarSlotRef, headSlotRef, footSlotRef, pagerSlotRef, bottomSlotRef]
+			let otherHeight = 0
+			let parentHeight = tableWrapRef.value?.offsetHeight
+			slotRefs.forEach(slotRef => {
+				otherHeight += slotRef.value?.offsetHeight || 0
+			})
+			tableHeight.value = parentHeight - otherHeight
+		}
+
+		return {
+			...useTableHooks,
+			tableWrapRef,
+			topSlotRef,
+			formSlotRef,
+			toolbarSlotRef,
+			headSlotRef,
+			footSlotRef,
+			pagerSlotRef,
+			bottomSlotRef,
+			tableHeight,
+			isTopSlot,
+			isFormSlot,
+			isToolbarSlot,
+			isHeadSlot,
+			isFootSlot,
+			isPagerSlot,
+			isBottomSlot,
+			handleResize
+		}
+	}
+})
+</script>