sh-view 1.5.2

package/packages/components/global-components/sh-vxe-table/css/index.scss

@@ -0,0 +1,94 @@
+.sh-vxe-table{
+    position: relative;
+    // 透明表格
+    &.sh-table-ghost{
+        background: transparent;
+        .vxe-pager.is--perfect,
+        .vxe-table--render-default .vxe-table--body-wrapper, .vxe-table--render-default .vxe-table--footer-wrapper,
+        .vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper
+        {
+            background: transparent;
+        }
+    }
+    .sh-table-footer{
+        height: 40px;
+        padding: 5px;
+        &.vxe-pager.is--perfect{
+            border: 1px solid var(--border-color);
+            border-top: none;
+        }
+        .vxe-pager--wrapper{
+            .vxe-pager--left-wrapper{
+                float: left;
+            }
+        }
+        .sh-table-footer-info{
+            color: #838a9d;
+            display: inline-block;
+            vertical-align: top;
+            margin-right: 10px;
+        }
+    }
+    .sh-table-toolbar-wrap{
+        display: flex;
+        flex: 0 0 auto;
+        align-items: flex-end;
+        font-size: 0;
+        .sh-table-toolbar-item{
+            display: inline-block;
+            vertical-align: baseline;
+            font-size: 14px;
+            margin: 5px;
+            & + .sh-table-toolbar-item{
+                margin-left: 0;
+            }
+        }
+        .sh-table-toolbar-left{
+            flex: 1;
+        }
+        .sh-table-toolbar-right{
+        }
+    }
+    .vxe-grid{
+        .vxe-table{
+            &.vxe-table--render-default{
+                .vxe-table--render-wrapper{
+                    .vxe-cell{
+                        .ivu-progress-inner{
+                            vertical-align: baseline;
+                            background-color: var(--border-color);
+                            .ivu-progress-inner-text{
+                                font-size: inherit;
+                                line-height: 1;
+                                vertical-align: baseline;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+    // 关键词搜索高亮样式
+    .sh-keyword-lighten{
+        background-color: var(--theme-weak-color);
+    }
+}
+
+
+.mobile{
+    .sh-vxe-table{
+        .sh-table-footer{
+            height: auto;
+            .vxe-pager--wrapper{
+                .vxe-pager--left-wrapper{
+                    width: 100%;
+                    display: block;
+                    float: none;
+                    margin: 0 0 5px 0;
+                    height: auto;
+                }
+            }
+        }
+    }
+}

package/packages/components/global-components/sh-vxe-table/index.vue

@@ -0,0 +1,350 @@
+<template>
+	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: shVxeTableHeight }">
+		<vxe-grid
+			:id="id"
+			ref="vxeGrid"
+			:key="renderKey"
+			:class="{ 'is--hasfooter': showFooter }"
+			:columns="tableColumns"
+			:data="tableFilterData || dataSourse"
+			:width="width"
+			:height="height"
+			:max-height="maxHeight"
+			:auto-resize="autoResize"
+			:sync-resize="syncResize"
+			:stripe="stripe && !tableTreeConfig"
+			:border="border"
+			:round="round"
+			:size="size"
+			:loading="loading"
+			:align="align"
+			:header-align="headerAlign"
+			:show-header="showHeader"
+			:row-class-name="rowClassName"
+			:cell-class-name="cellClassName"
+			:header-row-class-name="headerRowClassName"
+			:header-cell-class-name="headerCellClassName"
+			:footer-row-class-name="footerRowClassName"
+			:footer-cell-class-name="footerCellClassName"
+			:show-footer="showFooter"
+			:footer-method="footerMethod || tableFooterMethod"
+			:footer-span-method="footerSpanMethod || tableFooterSpanMethod"
+			:merge-cells="mergeCells"
+			:merge-footer-items="mergeFooterItems"
+			:show-overflow="showOverflow"
+			:show-header-overflow="showHeaderOverflow"
+			:show-footer-overflow="showFooterOverflow"
+			:keep-source="keepSource"
+			:empty-text="noDataText"
+			:row-config="rowConfig"
+			:column-config="tableColumnConfig"
+			:checkbox-config="tableCheckboxConfig"
+			:radio-config="radioConfig"
+			:tree-config="tableTreeConfig"
+			:seq-config="seqConfig"
+			:expand-config="expandConfig"
+			:tooltip-config="tooltipConfig"
+			:edit-config="tableEditConfig"
+			:valid-config="validConfig"
+			:edit-rules="tableEditRules"
+			:toolbar-config="toolbarConfig"
+			:pager-config="tablePagerConfig"
+			:keyboard-config="keyboardConfig"
+			:sort-config="sortConfig"
+			:mouse-config="mouseConfig"
+			:custom-config="customConfig"
+			:export-config="tableExportConfig"
+			:print-config="tablePrintConfig"
+			:scroll-x="scrollX"
+			:scroll-y="tableScrollY"
+			@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"
+						ref="vxeGridForm"
+						:size="size"
+						:data="queryData"
+						:items="tableFormItems"
+						:rules="tableEditRules"
+						:valid-config="validConfig"
+						:global-config="tableGlobalConfig"
+						:transformitem="false"
+						@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 && !reverse" class="sh-table-toolbar-item">
+							<vxe-input
+								v-model="tableFilterText"
+								:size="size"
+								clearable
+								type="search"
+								placeholder="全局关键字搜索"
+								@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.addRow" class="sh-table-toolbar-item">
+							<vxe-button v-ripple status="primary" :size="size" @click="handleTableAddRow(null, undefined, true)">新增行</vxe-button>
+						</div>
+						<div v-if="tableGlobalConfig.deleteRow" class="sh-table-toolbar-item">
+							<vxe-button v-ripple status="danger" :size="size" @click="handleTableDeleteRow(null, true)">删除行</vxe-button>
+						</div>
+						<div v-if="tableGlobalConfig.zoom && tableIsHeight" 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-else v-ripple :size="size" icon="vxe-icon-zoom-in" @click="handleTableZoomBtn(false)">退出全屏</vxe-button>
+						</div>
+						<div v-if="tableGlobalConfig.import" class="sh-table-toolbar-item">
+							<vxe-button v-ripple :size="size" status="primary" icon="vxe-icon-upload" @click="handleTableImportBtn">导入</vxe-button>
+						</div>
+						<div v-if="tableGlobalConfig.export" class="sh-table-toolbar-item">
+							<vxe-button v-ripple :size="size" status="success" icon="vxe-icon-download" @click="handleTableExportBtn()">导出</vxe-button>
+						</div>
+						<div v-if="tableGlobalConfig.print" class="sh-table-toolbar-item">
+							<vxe-button v-ripple :size="size" status="warning" icon="vxe-icon-print" @click="handleTablePrintBtn()">打印</vxe-button>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template #pagerLeftSlot>
+				<div class="sh-table-footer-info">
+					<span v-if="selectionRows.length > 0">
+						已选择 <strong>{{ selectionRows.length }}</strong> 项
+					</span>
+				</div>
+				<slot name="pagerLeft"></slot>
+			</template>
+			<template #pagerRightSlot>
+				<slot name="pagerRight"></slot>
+			</template>
+			<template #empty>
+				<sh-empty :no-data-icon="noDataIcon" :no-data-text="noDataText"></sh-empty>
+			</template>
+			<template v-for="slot in tableSlots" #[slot]="scope">
+				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
+				<slot :name="slot" v-bind="scope"></slot>
+			</template>
+		</vxe-grid>
+		<!--导入弹窗-->
+		<importModal v-if="importModal" v-model:visible="importModal" need-validate :columns="tableColumns" :import-rules="tableEditRules" @confirm="setImportData"></importModal>
+	</div>
+</template>
+
+<script>
+import defaultData from './mixin/defaultData'
+import props from './js/props'
+import methods from './js/methods'
+import importModal from './components/importModal'
+export default {
+	name: 'ShTable',
+	components: {
+		importModal
+	},
+	mixins: [defaultData],
+	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'
+	],
+	data() {
+		return {
+			// 渲染key值
+			renderKey: 1,
+			// 全选状态
+			isAllChecked: false,
+			// 半选状态
+			isIndeterminate: false,
+			// table选中keys
+			selectedRowKeys: [],
+			// table选中records
+			selectionRows: [],
+			// table分页器
+			tablePagerConfig: {},
+			// 表格格式化后表头
+			tableColumnsFixed: [],
+			// 表格全表搜索数据
+			tableFilterData: null,
+			// 多层转一维后表头
+			tableColumnsFlat: [],
+			// 根据表格表头生成表单项配置
+			tableFormItems: [],
+			// 表格根据表头自动生成验证规则
+			tableEditRules: {},
+			// 全局过滤关键字
+			tableFilterText: '',
+			// 表格当前高亮行
+			tableCurrentRowData: null,
+			// 导出入弹窗开关
+			importModal: false,
+			// 表格是否全屏显示状态
+			tableIsFullscreen: false,
+			// 根据表头生成行默认值
+			tableRowDefaultData: {}
+		}
+	},
+	computed: {
+		tableReverse() {
+			return this.reverse
+		},
+		tableGlobalConfig() {
+			return Object.assign({}, this.globalConfigDefault, this.globalConfig)
+		},
+		tableColumns() {
+			let defaultColumns = this.columnsConfigDefault.filter(item => this.tableGlobalConfig[item.type])
+			return defaultColumns.concat(this.tableColumnsFixed)
+		},
+		tableColumnConfig() {
+			return Object.assign({}, this.columnConfigDefault, this.columnConfig)
+		},
+		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)
+		},
+		tableIsHeight() {
+			return this.height || this.maxHeight
+		},
+		tableScrollY() {
+			return Object.assign({ enabled: !!this.tableIsHeight, gt: 100, oSize: 0 }, this.scrollY)
+		},
+		tableVitualScroll() {
+			return this.tableScrollY.enabled
+		},
+		tableSlots() {
+			let disSlots = ['form']
+			return Object.keys(this.$slots).filter(key => !disSlots.includes(key))
+		},
+		shVxeTableHeight() {
+			return this.height === '100%' || this.height === 'auto' ? '100%' : 'auto'
+		}
+	},
+	watch: {
+		pagerConfig: {
+			handler(newvalue, oldValue) {
+				this.initPagerConfig()
+			},
+			deep: true,
+			immediate: true
+		},
+		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
+		}
+	},
+	created() {
+		this.initCreated()
+	},
+	mounted() {},
+	methods: {
+		tableRef() {
+			return this.$refs.vxeGrid
+		},
+		tableFormRef() {
+			return this.$refs.vxeGridForm
+		},
+		...methods
+	}
+}
+</script>
+
+<style lang="scss">
+@import './css/index.scss';
+</style>