sh-view 1.7.6 → 2.0.1

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

@@ -0,0 +1,351 @@
+<template>
+	<sh-modal :visible="visible" title="导入报表" width="900" :loading="modalLoading" :show-footer="false" :transfer="false" @close="onModalClose">
+		<div class="import-template-top">
+			<transition name="fade">
+				<sh-progress v-if="showProgress" :percent="progressPercent" :stroke-width="2">
+					<template v-if="progressPercent === 100"><span>上传成功</span></template>
+				</sh-progress>
+			</transition>
+		</div>
+		<div class="import-template-head">
+			<sh-button :size="size" @click="handleDownloadTemplateBtn">下载导入模板</sh-button>
+			<sh-button :size="size" status="primary" @click="handleImportFileBtn">选择导入文件</sh-button>
+			<div class="floatright">
+				<sh-poptip v-if="importErrorData.length > 0" trigger="click" title="错误信息" placement="bottom-end">
+					<sh-button :size="size" status="danger">
+						共发现 <strong>{{ importErrorData.length }}</strong> 条不符合规范数据
+					</sh-button>
+					<template #content>
+						<div class="import-template-error-list">
+							<div v-for="(errData, errDataIndex) in importErrorData" :key="errDataIndex" class="error-item">
+								第 <strong class="red">{{ errData.rowIndex }}</strong> 行，错误：<span class="red">{{ errData.errMsg }}</span>
+							</div>
+						</div>
+					</template>
+				</sh-poptip>
+			</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>
+		</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>
+			</div>
+		</div>
+	</sh-modal>
+</template>
+
+<script>
+import excelToJson from '../js/excel_to_json'
+import ExcelJS from 'exceljs'
+export default {
+	name: 'TableImport',
+	props: {
+		visible: {
+			type: Boolean
+		},
+		columns: {
+			type: Array
+		},
+		height: {
+			type: [Number, String],
+			default: 360
+		},
+		needValidate: {
+			type: Boolean
+		},
+		importRules: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		importConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		globalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		size: {
+			type: String,
+			default: 'mini' //  medium / small / mini
+		},
+		importFileCallback: {
+			type: Function
+		},
+		importFileFinished: {
+			type: Function
+		},
+		downloadTemplateCallback: {
+			type: Function
+		},
+		downloadTemplateFinished: {
+			type: Function
+		}
+	},
+	emits: ['confirm', 'update:visible'],
+	data() {
+		return {
+			importTableData: [],
+			importErrorData: [],
+			modalLoading: false,
+			showProgress: false,
+			progressPercent: 0
+		}
+	},
+	computed: {
+		tableGlobalConfig() {
+			return Object.assign({ checkbox: false, seq: true, zoom: false, title: true, tableName: '导入预览' }, this.globalConfig)
+		},
+		tableColumns() {
+			return this.columns.filter(item => !(['seq', 'checkbox', 'radio'].includes(item.type) || item.renderName === '$vGlobalOption'))
+		}
+	},
+	watch: {},
+	created() {
+		this.initCreated()
+	},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		// 初始化
+		initCreated() {
+			this.showProgress = false
+			this.progressPercent = 0
+			this.importTableData = []
+		},
+		// 弹窗关闭
+		onModalClose() {
+			this.$emit('update:visible', false)
+		},
+		// 确认导入数据按钮
+		async handleImportDataBtn(type = 'all') {
+			let importData = type === 'all' ? this.importTableData : this.$refs.shtable.getSelectionData()
+			if (!importData || !Array.isArray(importData) || importData.length < 1) {
+				this.msginfo('未导入数据')
+				return false
+			}
+			if (this.needValidate) {
+				let validateErrMap = await this.handleImportDataValidate(importData)
+				if (validateErrMap) {
+					this.msgerror('导入校验失败，请检查数据')
+					return validateErrMap
+				}
+			}
+			this.$emit('confirm', importData)
+			this.onModalClose()
+		},
+		// 导入数据验证
+		async handleImportDataValidate(rows) {
+			return this.$refs.shtable.validate(rows)
+		},
+		// 下载导入模板按钮
+		handleDownloadTemplateBtn() {
+			const parentTable = this.$refs.shtable.tableRef()
+			if (typeof this.downloadTemplateCallback === 'function') {
+				this.downloadTemplateCallback()
+			}
+			let defaultOption = {
+				filename: '模板',
+				sheetName: this.globalConfig.filename || '模板',
+				type: 'xlsx',
+				original: false,
+				download: true,
+				message: false,
+				useStyle: false,
+				columns: parentTable.getColumns().filter(item => item.type !== 'seq'),
+				data: [],
+				afterExportMethod: options => {
+					this.handleDownloadTemplateFinished(options)
+				}
+			}
+			parentTable.exportData(Object.assign(defaultOption, this.importOption))
+		},
+		// 下载导入模板成功回调
+		handleDownloadTemplateFinished(options) {
+			if (typeof this.downloadTemplateFinished === 'function') {
+				this.downloadTemplateFinished(options)
+			}
+			this.msgsuccess('下载模板完成！')
+		},
+		// 选择导入文件按钮
+		async handleImportFileBtn() {
+			try {
+				const { file } = await this.$vTable.readFile({
+					types: ['xlsx', 'xls']
+				})
+				if (typeof this.importFileCallback === 'function') {
+					this.importFileCallback(file)
+				}
+				let fileRes = await this.readFile(file)
+				let { results, errDatas } = this.dealImportTableData(this.tableColumns, fileRes)
+				this.importTableData = results
+				this.importErrorData = errDatas
+				setTimeout(() => {
+					this.showProgress = false
+				}, 2000)
+				if (typeof this.importFileFinished === 'function') {
+					this.importFileFinished(options)
+				}
+				this.msgsuccess('导入完成！')
+			} catch (e) {
+				this.msgerror(e.message || e)
+			}
+		},
+		// 读取文件
+		async readFile(file) {
+			return new Promise((resolve, reject) => {
+				const reader = new FileReader()
+				reader.readAsArrayBuffer(file)
+				reader.onloadstart = e => {
+					this.modalLoading = true
+					this.showProgress = true
+				}
+				reader.onprogress = e => {
+					this.progressPercent = Math.round((e.loaded / e.total) * 100)
+				}
+				reader.onerror = e => {
+					reject(new Error('文件读取出错'))
+				}
+				reader.onload = e => {
+					this.modalLoading = false
+					const workbook = new ExcelJS.Workbook()
+					const data = e.target.result
+					workbook.xlsx.load(data).then(wb => {
+						const firstSheet = wb.worksheets[0]
+						if (!firstSheet) {
+							reject(new Error('文件读取出错'))
+						}
+						let headerRowCount = 1
+						if (firstSheet.views?.length) {
+							const frozenViews = firstSheet.views.filter(vm => vm.state === 'frozen')
+							if (frozenViews.length) headerRowCount = frozenViews[0].ySplit
+						}
+						const sheetValues = firstSheet.getSheetValues()
+						const dataValues = sheetValues.filter(a => !!a).slice(headerRowCount)
+						resolve(dataValues)
+					})
+				}
+			})
+		},
+		// 根据表格读取数据生成表格数据
+		dealImportTableData(columns, records) {
+			const { $vUtils } = this
+			let fields = this.generateColumnsAll(columns)
+			let errDatas = []
+			let results = records.map((row, rowIndex) => {
+				const item = {}
+				row.forEach((cellValue, cIndex) => {
+					let column = fields[cIndex - 1]
+					const { field, title, renderName, renderProps } = column
+					let fieldValue = cellValue
+					let split = renderProps?.split || ','
+					let valueKey = renderName === '$vTree' ? renderProps?.nodeKey || 'id' : 'value'
+					let labelKey = renderProps?.labelField || 'label'
+					switch (renderName) {
+						case '$vSelect':
+						case '$vSwitch':
+						case '$vCheckgroup':
+						case '$vRadiogroup':
+						case '$vTree':
+							if (cellValue && renderProps.options && Array.isArray(renderProps.options)) {
+								// 如果匹配到选择项则保留，否则删除掉不规范数据
+								// 判断导入值为数据源的key or value 去匹配
+								if (renderProps.multiple || ['$vSelect', '$vCheckgroup', '$vTree'].includes(renderName)) {
+									let oriArray = cellValue ? cellValue.split(split).filter(_ => _ && _ !== 'undefined') : []
+									let values = oriArray.map(orv => {
+										let opt = renderProps.options.find(opt => String(orv) === String(opt[valueKey]) || String(orv) === opt[labelKey])
+										return opt[valueKey]
+									})
+									fieldValue = values.join(split)
+								} else {
+									let opt = renderProps.options.find(opt => String(cellValue) === String(opt[valueKey]) || String(cellValue) === opt[labelKey])
+									fieldValue = opt[valueKey]
+								}
+								if (!fieldValue || fieldValue.includes(undefined)) {
+									errDatas.push({ rowIndex: rowIndex + 1, errMsg: `字段【${title}】不符合数据源规范，已被清空` })
+									fieldValue = ''
+								}
+							}
+							break
+						default:
+							break
+					}
+					$vUtils.set(item, field, fieldValue)
+				})
+				return item
+			})
+			return { results, errDatas }
+		},
+		// 生成全表头
+		generateColumnsAll(columns, resultColumns = []) {
+			columns.forEach((column, index) => {
+				if (column.children && Array.isArray(column.children) && column.children.length) {
+					this.generateColumnsAll(column.children, resultColumns)
+				} else {
+					if (column.field) {
+						resultColumns.push({
+							title: column.title,
+							field: column.field,
+							renderName: column.renderName,
+							renderProps: column.renderProps
+						})
+					}
+				}
+			})
+			return resultColumns
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.import-template-head {
+	+ .import-template-body,
+	+ .import-template-foot {
+		margin-top: 10px;
+	}
+	.floatright {
+		float: right;
+	}
+}
+.import-template-body {
+	+ .import-template-foot,
+	+ .import-template-error {
+		margin-top: 10px;
+	}
+}
+.import-template-foot {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.import-template-error-list {
+	max-height: 300px;
+	overflow: auto;
+	font-size: 13px;
+	.error-item {
+		display: block;
+		margin-bottom: 5px;
+	}
+}
+</style>

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

@@ -1,5 +1,7 @@
 .sh-vxe-table{
     position: relative;
+    width: 100%;
+    overflow: hidden;
     // 透明表格
     &.sh-table-ghost{
         background: transparent;
@@ -14,7 +16,7 @@
         height: 40px;
         padding: 5px;
         &.vxe-pager.is--perfect{
-            border: 1px solid var(--border-color);
+            border: 1px solid var(--vxe-table-border-color);
             border-top: none;
         }
         .vxe-pager--wrapper{
@@ -49,29 +51,9 @@
         .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);
+        background-color: var(--vxe-primary-lighten-color);
     }
 }