sh-view 2.6.2 → 2.6.3

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

@@ -1,159 +1,160 @@
-<template>
-	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
-		<vxe-grid
-			:id="id"
-			ref="tableRef"
-			:key="renderKey"
-			:class="{ 'is--hasfooter': showFooter }"
-			v-bind="tableBindConfig"
-			:columns="tableColumns"
-			@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"
-			@page-change="onPageChange"
-			@toolbar-button-click="onToolbarButtonClick"
-			@toolbar-tool-click="onToolbarToolClick"
-			@option-click="handleGoptionClick">
-			<template #form>
-				<slot name="head"></slot>
-				<slot name="form">
-					<sh-query v-if="tableGlobalConfig.search" 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>
-			</template>
-			<template #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>
-						<div v-if="tableGlobalConfig.zoom" class="sh-table-toolbar-item">
-							<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">
-							<div class="sh-table-toolbar-item">
-								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
-							</div>
-						</template>
-					</div>
-				</div>
-			</template>
-			<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>
-			<template #empty>
-				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
-			</template>
-			<template v-for="slot in tableSlots" #[slot]="scope">
-				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
-				<slot :name="slot" v-bind="scope"></slot>
-			</template>
-		</vxe-grid>
-		<!--导入弹窗-->
-		<importModal v-if="importBindConfig.modalConfig.modelValue" v-bind="importBindConfig" @confirm="setImportData"></importModal>
-	</div>
-</template>
-
-<script>
-import { defineComponent, getCurrentInstance, ref } from 'vue'
-import './css/index.scss'
-
-import props from './js/props'
-import importModal from './components/importModal.vue'
-import useTable from './js/useTable'
-export default defineComponent({
-	name: 'ShGrid',
-	components: {
-		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 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()
-			}
-		}
-
-		return Object.assign({}, useTableHooks, {
-			tableIsFullscreen,
-			handleTableZoomBtn
-		})
-	}
-})
-</script>
+<template>
+	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
+		<vxe-grid
+			:id="id"
+			ref="tableRef"
+			:key="renderKey"
+			:class="{ 'is--hasfooter': showFooter }"
+			v-bind="tableBindConfig"
+			:columns="tableColumns"
+			@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"
+			@page-change="onPageChange"
+			@toolbar-button-click="onToolbarButtonClick"
+			@toolbar-tool-click="onToolbarToolClick"
+			@option-click="handleGoptionClick">
+			<template #form>
+				<slot name="head"></slot>
+				<slot name="form">
+					<sh-query v-if="tableGlobalConfig.search" 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>
+			</template>
+			<template #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>
+						<div v-if="tableGlobalConfig.zoom" class="sh-table-toolbar-item">
+							<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">
+							<div class="sh-table-toolbar-item">
+								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+							</div>
+						</template>
+					</div>
+				</div>
+			</template>
+			<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>
+			<template #empty>
+				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
+			</template>
+			<template v-for="slot in tableSlots" #[slot]="scope">
+				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
+				<slot :name="slot" v-bind="scope"></slot>
+			</template>
+		</vxe-grid>
+		<!--导入弹窗-->
+		<importModal v-if="importBindConfig.modalConfig.modelValue" v-bind="importBindConfig" @confirm="setImportData"></importModal>
+	</div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance, ref } from 'vue'
+import './css/index.scss'
+
+import props from './js/props'
+import importModal from './components/importModal.vue'
+import useTable from './js/useTable'
+export default defineComponent({
+	name: 'ShGrid',
+	components: {
+		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 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()
+			}
+		}
+
+		return {
+			...useTableHooks,
+			tableIsFullscreen,
+			handleTableZoomBtn
+		}
+	}
+})
+</script>