sh-view 2.6.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {

package/packages/components/global-components/sh-form/js/useForm.js

@@ -86,10 +86,6 @@ export default function (props, context, proxy, isForm) {
 	const validate = callback => {
 		return formRef.value.validate(callback)
 	}
-	// 初始化
-	const initCreated = () => {
-		initFormItems()
-	}
 	// 初始化表单字段
 	const initFormData = () => {
 		let initItems = isForm ? props.items : props.items.filter(item => item.search && item.search !== '0')
@@ -193,7 +189,8 @@ export default function (props, context, proxy, isForm) {
 			initFormItems()
 		},
 		{
-			deep: true
+			deep: true,
+			immediate: true
 		}
 	)
 	watch(
@@ -207,9 +204,7 @@ export default function (props, context, proxy, isForm) {
 		}
 	)
 
-	onBeforeMount(() => {
-		initCreated()
-	})
+	onBeforeMount(() => {})
 
 	return {
 		slots,

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

@@ -1,5 +1,5 @@
 <template>
-	<sh-modal :visible="visible" title="导入报表" width="900" :loading="modalLoading" :show-footer="false" :transfer="false" @close="onModalClose">
+	<sh-modal v-bind="modalConfig" :loading="modalLoading" @close="onModalClose">
 		<div class="import-template-top">
 			<transition name="fade">
 				<sh-progress v-if="showProgress" :percent="progressPercent" :stroke-width="2">
@@ -26,23 +26,14 @@
 			</div>
 		</div>
 		<div class="import-template-body">
-			<sh-table
-				ref="shtable"
-				:height="height"
-				:size="size"
-				:columns="tableColumns"
-				:data-sourse="importTableData"
-				:global-config="tableGlobalConfig"
-				:edit-rules="importRules"
-				:pager-config="false"
-				:disabled="false"></sh-table>
+			<sh-table ref="shtable" v-bind="tableConfig"></sh-table>
 		</div>
 		<div class="import-template-foot">
 			<div class="foot-left"></div>
 			<div class="foot-right">
 				<sh-button :size="size" @click="onModalClose">取消</sh-button>
 				<sh-button :size="size" status="primary" @click="handleImportDataBtn('all')">全部导入</sh-button>
-				<sh-button v-if="tableGlobalConfig.checkbox || tableGlobalConfig.radio" :size="size" status="warning" @click="handleImportDataBtn('select')">导入选中</sh-button>
+				<sh-button v-if="tableGlobalConfig.selectType" :size="size" status="warning" @click="handleImportDataBtn('select')">导入选中</sh-button>
 			</div>
 		</div>
 	</sh-modal>
@@ -54,8 +45,11 @@ import ExcelJS from 'exceljs'
 export default defineComponent({
 	name: 'TableImport',
 	props: {
-		visible: {
-			type: Boolean
+		modalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
 		},
 		columns: {
 			type: Array
@@ -102,10 +96,10 @@ export default defineComponent({
 			type: Function
 		}
 	},
-	emits: ['confirm', 'update:visible'],
+	emits: ['confirm', 'cancel'],
 	setup(props, context) {
 		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
+		const { $vUtils, $vTable } = proxy
 		const { emit, slots } = context
 		const shtable = ref()
 
@@ -115,9 +109,18 @@ export default defineComponent({
 		const showProgress = ref(false)
 		const progressPercent = ref(0)
 
-		const tableGlobalConfig = computed(() => Object.assign({ checkbox: false, seq: true, zoom: false, title: true, tableName: '导入预览' }, props.globalConfig))
+		const tableGlobalConfig = computed(() => Object.assign({ seq: true, title: true, tableName: '导入预览' }, props.globalConfig))
 		const tableColumns = computed(() => props.columns.filter(item => !(['seq', 'checkbox', 'radio'].includes(item.type) || item.renderName === '$vGlobalOption')))
-
+		const tableConfig = computed(() => {
+			return {
+				height: props.height,
+				size: props.size,
+				editRules: props.importRules,
+				columns: tableColumns.value,
+				data: importTableData.value,
+				globalConfig: tableGlobalConfig.value
+			}
+		})
 		// 初始化
 		const initCreated = () => {
 			showProgress.value = false
@@ -126,7 +129,8 @@ export default defineComponent({
 		}
 		// 弹窗关闭
 		const onModalClose = () => {
-			emit('update:visible', false)
+			$vUtils.set(props.modalConfig, 'modelValue', false)
+			emit('cancel')
 		}
 		// 确认导入数据按钮
 		const handleImportDataBtn = async (type = 'all') => {
@@ -157,7 +161,7 @@ export default defineComponent({
 			}
 			let defaultOption = {
 				filename: '模板',
-				sheetName: props.globalConfig.filename || '模板',
+				sheetName: props.globalConfig?.filename || '模板',
 				type: 'xlsx',
 				original: false,
 				download: true,
@@ -181,7 +185,7 @@ export default defineComponent({
 		// 选择导入文件按钮
 		const handleImportFileBtn = async () => {
 			try {
-				const { file } = await proxy.$vTable.readFile({
+				const { file } = await $vTable.readFile({
 					types: ['xlsx', 'xls']
 				})
 				if (typeof props.importFileCallback === 'function') {
@@ -315,8 +319,7 @@ export default defineComponent({
 			showProgress,
 			progressPercent,
 			importErrorData,
-			tableColumns,
-			importTableData,
+			tableConfig,
 			tableGlobalConfig,
 			onModalClose,
 			handleDownloadTemplateBtn,

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

@@ -5,59 +5,8 @@
 			ref="tableRef"
 			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
+			v-bind="tableBindConfig"
 			:columns="tableColumns"
-			:data="tableViewData"
-			:width="width"
-			:height="height"
-			:min-height="minHeight"
-			: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="emptyText"
-			: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="scrollY"
 			@current-change="onCurrentChange"
 			@radio-change="onRadioChange"
 			@checkbox-change="onSelectionChange"
@@ -138,14 +87,7 @@
 			</template>
 		</vxe-grid>
 		<!--导入弹窗-->
-		<importModal
-			v-if="importVisible"
-			v-model:visible="importVisible"
-			need-validate
-			:columns="tableColumns"
-			:import-config="importConfig"
-			:import-rules="tableEditRules"
-			@confirm="setImportData"></importModal>
+		<importModal v-if="importBindConfig.modalConfig.modelValue" v-bind="importBindConfig" @confirm="setImportData"></importModal>
 	</div>
 </template>
 

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

@@ -1,6 +1,21 @@
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { columnDefaultFilterMethod, tableFooterCompute, getTransfarFields, getFieldsRules, turnColumnItemFilters } from './tableMethods'
 
+// 记录自定义参数，传给vxe要过滤掉
+let omitProps = [
+	'dataSourse',
+	'disabled',
+	'customLayout',
+	'columnObj',
+	'globalConfig',
+	'footerCalculate',
+	'tableName',
+	'queryData',
+	'onToolbarBtnAddBefore',
+	'onToolbarBtnDeleteBefore',
+	'onExportMethod',
+	'onPrintMethod'
+]
 const globalConfigDefault = {
 	tableName: '',
 	title: false, // 是否显示 tableName
@@ -57,7 +72,6 @@ export default function (props, context, proxy, isGrid) {
 	const tableEditRules = ref({}) // 表格根据表头自动生成验证规则
 	const tableFilterText = ref('') // 全局过滤关键字
 	const tableCurrentRowData = ref(null) // 表格当前高亮行
-	const importVisible = ref(false) // 导出入弹窗开关
 	const tableRowDefaultData = ref({}) // 根据表头生成行默认值
 
 	const wrapHeight = computed(() => ([100, '100%', 'auto'].includes(props.height) ? '100%' : 'auto'))
@@ -146,6 +160,32 @@ export default function (props, context, proxy, isGrid) {
 		let disSlots = ['head', 'form', 'formLeft', 'formRight', 'toolbar', 'toolbarLeft', 'toolbarRight', 'pagerLeft', 'pagerRight']
 		return Object.keys(slots).filter(key => !disSlots.includes(key))
 	})
+	const tableBindConfig = computed(() => {
+		let defaultProps = { footerMethod: tableFooterMethod, footerSpanMethod: tableFooterSpanMethod }
+		let tableProps = $vUtils.omit(props, (val, key) => {
+			return omitProps.includes(key) || $vUtils.isNone(val)
+		})
+		let shProps = {
+			data: tableViewData.value,
+			stripe: props.stripe && !tableTreeConfig.value,
+			columnConfig: tableColumnConfig.value,
+			checkboxConfig: tableCheckboxConfig.value,
+			treeConfig: tableTreeConfig.value,
+			seqConfig: tableSeqConfig.value,
+			editConfig: tableEditConfig.value,
+			editRules: tableEditRules.value,
+			exportConfig: tableExportConfig.value,
+			printConfig: tablePrintConfig.value
+		}
+		return Object.assign(defaultProps, tableProps, shProps)
+	})
+	const importBindConfig = reactive({
+		modalConfig: { modelValue: false, title: '导入报表', width: '900', showFooter: false, transfer: false },
+		needValidate: true,
+		columns: props.columns,
+		importConfig: props.importConfig,
+		importRules: tableEditRules.value
+	})
 
 	// 获取选中数据
 	const getSelectionData = () => {
@@ -447,7 +487,7 @@ export default function (props, context, proxy, isGrid) {
 	}
 	// 表格导入按钮
 	const handleTableImportBtn = () => {
-		importVisible.value = true
+		importBindConfig.modalConfig.modelValue = true
 	}
 	// 表格打印按鈕
 	const handleTablePrintBtn = options => {
@@ -545,27 +585,17 @@ export default function (props, context, proxy, isGrid) {
 		tableGlobalConfig,
 		tablePrevColumns,
 		tableColumns,
-		tableColumnConfig,
 		tableColumnObjConfig,
-		tableCheckboxConfig,
-		tableTreeConfig,
-		tableSeqConfig,
-		tableEditConfig,
-		tableEditRules,
 		tablePagerConfig,
-		tableExportConfig,
-		tablePrintConfig,
 		tableQueryConfig,
 		tableFilterText,
 		tableFilterConfig,
 		tableFilterData,
-		tableViewData,
 		tableTools,
 		tableSlots,
 		selectionRows,
-		importVisible,
-		tableFooterMethod,
-		tableFooterSpanMethod,
+		tableBindConfig,
+		importBindConfig,
 		onCurrentChange,
 		onRadioChange,
 		onSelectionChange,

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

@@ -46,57 +46,8 @@
 			ref="tableRef"
 			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
-			:data="tableViewData"
-			:width="width"
+			v-bind="tableBindConfig"
 			:height="tableHeight"
-			:min-height="minHeight"
-			: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="emptyText"
-			:row-config="rowConfig"
-			:column-config="tableColumnConfig"
-			:checkbox-config="tableCheckboxConfig"
-			:radio-config="radioConfig"
-			:tree-config="tableTreeConfig"
-			:seq-config="tableSeqConfig"
-			:expand-config="expandConfig"
-			:tooltip-config="tooltipConfig"
-			:edit-config="tableEditConfig"
-			:valid-config="validConfig"
-			:edit-rules="tableEditRules"
-			:toolbar-config="toolbarConfig"
-			:keyboard-config="keyboardConfig"
-			:sort-config="sortConfig"
-			:mouse-config="mouseConfig"
-			:custom-config="customConfig"
-			:export-config="tableExportConfig"
-			:print-config="tablePrintConfig"
-			:scroll-x="scrollX"
-			:scroll-y="scrollY"
 			@current-change="onCurrentChange"
 			@radio-change="onRadioChange"
 			@checkbox-change="onSelectionChange"
@@ -147,14 +98,7 @@
 		</div>
 		<div v-if="isBottomSlot" ref="bottomSlotRef" v-resize="handleResize" class="sh-table-bottom"><slot name="bottom"></slot></div>
 		<!--导入弹窗-->
-		<importModal
-			v-if="importVisible"
-			v-model:visible="importVisible"
-			need-validate
-			:columns="columns"
-			:import-config="importConfig"
-			:import-rules="tableEditRules"
-			@confirm="setImportData"></importModal>
+		<importModal v-if="importBindConfig.modalConfig.modelValue" v-bind="importBindConfig" @confirm="setImportData"></importModal>
 	</div>
 </template>