sh-view 2.8.1 → 2.8.2

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

@@ -1,363 +1,363 @@
-<template>
-	<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">
-					<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" 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.selectType" :size="size" status="warning" @click="handleImportDataBtn('select')">导入选中</sh-button>
-			</div>
-		</div>
-	</sh-modal>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, onBeforeMount } from 'vue'
-import * as ExcelJS from 'exceljs'
-export default defineComponent({
-	name: 'TableImport',
-	props: {
-		modalConfig: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		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', 'cancel'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils, $vTable } = proxy
-		const { emit, slots } = context
-		const shtable = ref()
-
-		const importTableData = ref([])
-		const importErrorData = ref([])
-		const modalLoading = ref(false)
-		const showProgress = ref(false)
-		const progressPercent = ref(0)
-
-		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
-			progressPercent.value = 0
-			importTableData.value = []
-		}
-		// 弹窗关闭
-		const onModalClose = () => {
-			$vUtils.set(props.modalConfig, 'modelValue', false)
-			emit('cancel')
-		}
-		// 确认导入数据按钮
-		const handleImportDataBtn = async (type = 'all') => {
-			let importData = type === 'all' ? importTableData.value : shtable.value.getSelectionData()
-			if (!importData || !Array.isArray(importData) || importData.length < 1) {
-				proxy.msginfo('未导入数据')
-				return false
-			}
-			if (props.needValidate) {
-				let validateErrMap = await handleImportDataValidate(importData)
-				if (validateErrMap) {
-					proxy.msgerror('导入校验失败，请检查数据')
-					return validateErrMap
-				}
-			}
-			emit('confirm', importData)
-			onModalClose()
-		}
-		// 导入数据验证
-		const handleImportDataValidate = async rows => {
-			return shtable.value.validate(rows)
-		}
-		// 下载导入模板按钮
-		const handleDownloadTemplateBtn = () => {
-			const parentTable = shtable.value.tableRef.value
-			if (typeof props.downloadTemplateCallback === 'function') {
-				props.downloadTemplateCallback()
-			}
-			let defaultOption = {
-				filename: '模板',
-				sheetName: props.globalConfig?.filename || '模板',
-				type: 'xlsx',
-				original: false,
-				download: true,
-				message: false,
-				useStyle: false,
-				columns: parentTable.getColumns().filter(item => item.type !== 'seq'),
-				data: [],
-				afterExportMethod: options => {
-					handleDownloadTemplateFinished(options)
-				}
-			}
-			parentTable.exportData(Object.assign(defaultOption, props.importConfig))
-		}
-		// 下载导入模板成功回调
-		const handleDownloadTemplateFinished = options => {
-			if (typeof props.downloadTemplateFinished === 'function') {
-				props.downloadTemplateFinished(options)
-			}
-			proxy.msgsuccess('下载模板完成！')
-		}
-		// 选择导入文件按钮
-		const handleImportFileBtn = async () => {
-			try {
-				const { file } = await $vTable.readFile({
-					types: ['xlsx', 'xls']
-				})
-				if (typeof props.importFileCallback === 'function') {
-					props.importFileCallback(file)
-				}
-				let fileRes = await readFile(file)
-				let { results, errDatas } = dealImportTableData(tableColumns.value, fileRes)
-				importTableData.value = results
-				importErrorData.value = errDatas
-				setTimeout(() => {
-					showProgress.value = false
-				}, 2000)
-				if (typeof props.importFileFinished === 'function') {
-					props.importFileFinished(options)
-				}
-				proxy.msgsuccess('导入完成！')
-			} catch (e) {
-				proxy.msgerror(e.message || e)
-			}
-		}
-		// 读取文件
-		const readFile = async file => {
-			return new Promise((resolve, reject) => {
-				const reader = new FileReader()
-				reader.readAsArrayBuffer(file)
-				reader.onloadstart = e => {
-					modalLoading.value = true
-					showProgress.value = true
-				}
-				reader.onprogress = e => {
-					progressPercent.value = Math.round((e.loaded / e.total) * 100)
-				}
-				reader.onerror = e => {
-					reject(new Error('文件读取出错'))
-				}
-				reader.onload = e => {
-					modalLoading.value = 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)
-					})
-				}
-			})
-		}
-		// 根据表格读取数据生成表格数据
-		const dealImportTableData = (columns, records) => {
-			let fields = 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 }
-		}
-		// 生成全表头
-		const generateColumnsAll = (columns, resultColumns = []) => {
-			columns.forEach((column, index) => {
-				if (column.children && Array.isArray(column.children) && column.children.length) {
-					generateColumnsAll(column.children, resultColumns)
-				} else {
-					if (column.field) {
-						resultColumns.push({
-							title: column.title,
-							field: column.field,
-							renderName: column.renderName,
-							renderProps: column.renderProps
-						})
-					}
-				}
-			})
-			return resultColumns
-		}
-
-		onBeforeMount(() => {
-			initCreated()
-		})
-
-		return {
-			shtable,
-			modalLoading,
-			showProgress,
-			progressPercent,
-			importErrorData,
-			tableConfig,
-			tableGlobalConfig,
-			onModalClose,
-			handleDownloadTemplateBtn,
-			handleImportFileBtn,
-			handleImportDataBtn
-		}
-	}
-})
-</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>
+<template>
+	<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">
+					<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" 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.selectType" :size="size" status="warning" @click="handleImportDataBtn('select')">导入选中</sh-button>
+			</div>
+		</div>
+	</sh-modal>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, onBeforeMount } from 'vue'
+import * as ExcelJS from 'exceljs'
+export default defineComponent({
+	name: 'TableImport',
+	props: {
+		modalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		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', 'cancel'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils, $vTable } = proxy
+		const { emit, slots } = context
+		const shtable = ref()
+
+		const importTableData = ref([])
+		const importErrorData = ref([])
+		const modalLoading = ref(false)
+		const showProgress = ref(false)
+		const progressPercent = ref(0)
+
+		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
+			progressPercent.value = 0
+			importTableData.value = []
+		}
+		// 弹窗关闭
+		const onModalClose = () => {
+			$vUtils.set(props.modalConfig, 'modelValue', false)
+			emit('cancel')
+		}
+		// 确认导入数据按钮
+		const handleImportDataBtn = async (type = 'all') => {
+			let importData = type === 'all' ? importTableData.value : shtable.value.getSelectionData()
+			if (!importData || !Array.isArray(importData) || importData.length < 1) {
+				proxy.msginfo('未导入数据')
+				return false
+			}
+			if (props.needValidate) {
+				let validateErrMap = await handleImportDataValidate(importData)
+				if (validateErrMap) {
+					proxy.msgerror('导入校验失败，请检查数据')
+					return validateErrMap
+				}
+			}
+			emit('confirm', importData)
+			onModalClose()
+		}
+		// 导入数据验证
+		const handleImportDataValidate = async rows => {
+			return shtable.value.validate(rows)
+		}
+		// 下载导入模板按钮
+		const handleDownloadTemplateBtn = () => {
+			const parentTable = shtable.value.tableRef.value
+			if (typeof props.downloadTemplateCallback === 'function') {
+				props.downloadTemplateCallback()
+			}
+			let defaultOption = {
+				filename: '模板',
+				sheetName: props.globalConfig?.filename || '模板',
+				type: 'xlsx',
+				original: false,
+				download: true,
+				message: false,
+				useStyle: false,
+				columns: parentTable.getColumns().filter(item => item.type !== 'seq'),
+				data: [],
+				afterExportMethod: options => {
+					handleDownloadTemplateFinished(options)
+				}
+			}
+			parentTable.exportData(Object.assign(defaultOption, props.importConfig))
+		}
+		// 下载导入模板成功回调
+		const handleDownloadTemplateFinished = options => {
+			if (typeof props.downloadTemplateFinished === 'function') {
+				props.downloadTemplateFinished(options)
+			}
+			proxy.msgsuccess('下载模板完成！')
+		}
+		// 选择导入文件按钮
+		const handleImportFileBtn = async () => {
+			try {
+				const { file } = await $vTable.readFile({
+					types: ['xlsx', 'xls']
+				})
+				if (typeof props.importFileCallback === 'function') {
+					props.importFileCallback(file)
+				}
+				let fileRes = await readFile(file)
+				let { results, errDatas } = dealImportTableData(tableColumns.value, fileRes)
+				importTableData.value = results
+				importErrorData.value = errDatas
+				setTimeout(() => {
+					showProgress.value = false
+				}, 2000)
+				if (typeof props.importFileFinished === 'function') {
+					props.importFileFinished(options)
+				}
+				proxy.msgsuccess('导入完成！')
+			} catch (e) {
+				proxy.msgerror(e.message || e)
+			}
+		}
+		// 读取文件
+		const readFile = async file => {
+			return new Promise((resolve, reject) => {
+				const reader = new FileReader()
+				reader.readAsArrayBuffer(file)
+				reader.onloadstart = e => {
+					modalLoading.value = true
+					showProgress.value = true
+				}
+				reader.onprogress = e => {
+					progressPercent.value = Math.round((e.loaded / e.total) * 100)
+				}
+				reader.onerror = e => {
+					reject(new Error('文件读取出错'))
+				}
+				reader.onload = e => {
+					modalLoading.value = 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)
+					})
+				}
+			})
+		}
+		// 根据表格读取数据生成表格数据
+		const dealImportTableData = (columns, records) => {
+			let fields = 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 }
+		}
+		// 生成全表头
+		const generateColumnsAll = (columns, resultColumns = []) => {
+			columns.forEach((column, index) => {
+				if (column.children && Array.isArray(column.children) && column.children.length) {
+					generateColumnsAll(column.children, resultColumns)
+				} else {
+					if (column.field) {
+						resultColumns.push({
+							title: column.title,
+							field: column.field,
+							renderName: column.renderName,
+							renderProps: column.renderProps
+						})
+					}
+				}
+			})
+			return resultColumns
+		}
+
+		onBeforeMount(() => {
+			initCreated()
+		})
+
+		return {
+			shtable,
+			modalLoading,
+			showProgress,
+			progressPercent,
+			importErrorData,
+			tableConfig,
+			tableGlobalConfig,
+			onModalClose,
+			handleDownloadTemplateBtn,
+			handleImportFileBtn,
+			handleImportDataBtn
+		}
+	}
+})
+</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>