sh-view 1.5.2

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

@@ -0,0 +1,286 @@
+<template>
+	<vxe-form
+		ref="queryForm"
+		:key="renderKey"
+		class="sh-query"
+		:class="formCollapsed ? 'sh-query-collapsed-open' : 'sh-query-collapsed-close'"
+		v-bind="queryFormConfig"
+		:items="formItems"
+		:data="data"
+		:rules="rules"
+		:valid-config="validConfig"
+		@submit="onFormSubmit"
+		@reset="onFormReset"
+		@edit-closed="onFormEditClosed">
+		<div class="sh-query-buttons">
+			<div class="sh-query-buttons-left"><slot name="footLeft"></slot></div>
+			<div class="sh-query-buttons-right">
+				<slot name="footRight"></slot>
+				<vxe-button v-ripple type="submit" status="theme" :size="size" icon="vxe-icon-search">查询</vxe-button>
+				<vxe-button v-ripple type="reset" :size="size" icon="vxe-icon-repeat">重置</vxe-button>
+				<vxe-button v-if="formToggleBtnShow" v-ripple :size="size" :icon="formCollapsed ? 'vxe-icon-caret-up' : 'vxe-icon-caret-down'" @click="formBtnCollapsed(!formCollapsed)">
+					{{ formCollapsed ? '收起' : '展开全部' }}
+				</vxe-button>
+			</div>
+		</div>
+	</vxe-form>
+</template>
+
+<script>
+export default {
+	name: 'ShQuery',
+	props: {
+		data: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		size: {
+			type: String,
+			default: 'small' //  medium / small / mini
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		items: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		rules: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		validConfig: {
+			type: Object,
+			default() {
+				return {
+					autoPos: true,
+					showMessage: true
+				}
+			}
+		},
+		formConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		globalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		transformitem: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ['submit', 'reset', 'edit-closed', 'submit-invalid', 'collapsed'],
+	data() {
+		return {
+			// 渲染key值
+			renderKey: 1,
+			// 表单展开状态
+			formCollapsed: false,
+			// 是否渲染表单展开全部按钮
+			formToggleBtnShow: false,
+			// 表单初始项
+			formOriginItems: [],
+			// 表单渲染项
+			formItems: [],
+			// 表格高级搜索默认配置
+			formConfigDefault: {
+				titleWidth: 100,
+				titleAlign: 'right',
+				titleColon: true,
+				titleAsterisk: true,
+				titleOverflow: true,
+				align: 'left',
+				span: 6,
+				loading: false,
+				customLayout: false,
+				preventSubmit: false,
+				size: this.size
+			}
+		}
+	},
+	computed: {
+		queryFormConfig() {
+			let mobileTurnConfig = this.mobile ? { span: '24' } : {}
+			return Object.assign({}, this.formConfigDefault, this.formConfig, mobileTurnConfig)
+		}
+	},
+	watch: {
+		data: {
+			handler(newvalue, oldValue) {
+				this.initFormData()
+			},
+			immediate: true
+		},
+		items: {
+			handler(newvalue, oldValue) {
+				this.initFormItems()
+			},
+			deep: true,
+			immediate: false
+		}
+	},
+	created() {
+		this.initCreated()
+	},
+	methods: {
+		queryFormRef() {
+			return this.$refs.queryForm
+		},
+		// 初始化
+		initCreated() {
+			this.initFormItems()
+		},
+		// 初始化表单字段
+		initFormData() {
+			const that = this
+			let formItems = that.items.filter(item => item.search && item.search !== '0')
+			that.$vUtils.eachTree(formItems, item => {
+				let renderProps = item.renderProps || item.itemRender?.props || {}
+				if (!that.$vUtils.has(that.data, item.field)) {
+					that.$vUtils.set(that.data, item.field, renderProps.defaultValue || null)
+				}
+			})
+		},
+		// 初始化搜索表单
+		initFormItems() {
+			const that = this
+			let formItemsArr = [] // 表单项
+			let formItems = that.items.filter(item => item.search && item.search !== '0')
+			if (this.transformitem) {
+				let { itemsArr, itemsRules } = that.generateFormItem(formItems)
+				formItemsArr = itemsArr
+			} else {
+				formItemsArr = formItems
+			}
+			formItemsArr.forEach(item => {
+				item.visible = true
+				item.itemRender.props.disabled = false
+			})
+			that.formOriginItems = formItemsArr
+			that.formItems = formItemsArr
+			if (formItemsArr.length > that.globalConfig.formToggleNum && that.globalConfig.formToggle) {
+				that.formToggleBtnShow = true // 显示展开全部按钮
+				that.formBtnCollapsed(false)
+			}
+			this.initFormData()
+		},
+		// 表单展开全部/收起切换事件
+		formBtnCollapsed(value) {
+			const that = this
+			that.formCollapsed = value
+			that.formItems = value ? that.formOriginItems : that.formOriginItems.slice(0, that.globalConfig.formToggleNum)
+			this.$emit('collapsed', value)
+		},
+		// -------- 搜索
+		async onFormSubmit() {
+			let that = this
+			let errMap = await that.queryFormRef().validate()
+			let data = that.data
+			if (!errMap) {
+				that.$emit('submit', data)
+			} else {
+				that.onFormSubmitInvalid({ data, errMap })
+			}
+		},
+		// 表单重置
+		onFormReset(params) {
+			this.initFormItems()
+			this.$vUtils.clear(this.data)
+			this.$emit('reset', params)
+		},
+		// 表单项编辑回调
+		onFormEditClosed(obj, renderbox) {
+			this.$emit('edit-closed', obj, renderbox, this)
+		},
+		// 表单校验不通过
+		onFormSubmitInvalid(obj) {
+			this.$emit('submit-invalid', obj)
+		},
+		// 表单重新渲染
+		refreshRender() {
+			this.renderKey++
+		},
+		// 自动生成表单渲染项
+		generateFormItem(items = []) {
+			const that = this
+			let itemsArr = []
+			let itemsRules = {}
+			that.$vUtils.mapTree(items, ori => {
+				let tar = Object.assign({}, that.itemConfigDefault, ori)
+				let renderConfig = {
+					name: ori.renderName || '$vInput',
+					props: Object.assign({}, ori.renderProps || {})
+				}
+				if (that.readonly || that.disabled) {
+					renderConfig.props.disabled = true
+				}
+				tar.itemRender = Object.assign({}, renderConfig, ori.itemRender || {})
+				// 首先提取校验配置
+				if (that.isTrue(ori['renderRequire'])) {
+					// 若配置了校验参数则走校验参数，没配置则给默认校验条件
+					if (ori['requireProps'] && Array.isArray(ori['requireProps']) && ori['requireProps'].length > 0) {
+						itemsRules[ori['field']] = ori['requireProps']
+					} else {
+						let dataType = 'string'
+						let arrayType = ['$vCheckgroup', '$vUpload', '$vTable']
+						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && that.isTrue(renderConfig.props.multiple))) {
+							dataType = 'array'
+						}
+						itemsRules[ori['field']] = [{ required: true, message: that.getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
+					}
+				}
+				// 表单不支持编辑渲染过滤
+				let notRenderName = ['seq', 'checkbox', 'radio', '$vImg', '$vHref', '$vGlobalOption']
+				if (!((ori.renderName && notRenderName.includes(ori.renderName)) || notRenderName.includes(ori.type))) {
+					itemsArr.push(tar)
+				}
+			})
+			return { itemsArr, itemsRules }
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.sh-query {
+	background: var(--theme-weak-color);
+	&.sh-query-collapsed-close {
+	}
+	&.sh-query-collapsed-open {
+	}
+	.sh-query-buttons {
+		border-top: 1px solid var(--border-color);
+		padding: 5px;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.sh-query-buttons-left {
+			flex: 1;
+		}
+		.sh-query-buttons-right {
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,377 @@
+<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">
+				<Progress v-if="showProgress" :percent="progressPercent" :stroke-width="2">
+					<template v-if="progressPercent === 100"><span>上传成功</span></template>
+				</Progress>
+			</transition>
+		</div>
+		<div class="import-template-head">
+			<vxe-button :size="size" @click="handleDownloadTemplateBtn">下载导入模板</vxe-button>
+			<vxe-button :size="size" status="primary" @click="handleImportFileBtn">选择导入文件</vxe-button>
+			<div class="floatright">
+				<Poptip v-if="importErrorData.length > 0" trigger="click" title="错误信息" placement="bottom-end">
+					<vxe-button :size="size" status="danger"
+						>共发现 <strong>{{ importErrorData.length }}</strong> 条不符合规范数据</vxe-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>
+				</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">
+				<vxe-button :size="size" @click="onModalClose">取消</vxe-button>
+				<vxe-button :size="size" status="primary" @click="handleImportDataBtn('all')">全部导入</vxe-button>
+				<vxe-button v-if="tableGlobalConfig.checkbox || tableGlobalConfig.radio" :size="size" status="warning" @click="handleImportDataBtn('select')">导入选中</vxe-button>
+			</div>
+		</div>
+	</sh-modal>
+</template>
+
+<script>
+import * as XLSX from 'xlsx'
+import excelToJson from '../js/excel_to_json'
+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 {}
+			}
+		},
+		importOption: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		globalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		size: {
+			type: String,
+			default: 'mini' //  medium / small / mini
+		},
+		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 => !(item.type === 'seq' || item.type === 'checkbox' || item.type === 'radio' || 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') {
+			const that = this
+			let importData = type === 'all' ? this.importTableData : this.$refs.shtable.getSelectionData()
+			if (!importData || !Array.isArray(importData) || importData.length < 1) {
+				that.msginfo('未导入数据')
+				return false
+			}
+			if (that.needValidate) {
+				let validateErrMap = await that.handleImportDataValidate(importData)
+				if (validateErrMap) {
+					that.msgerror('导入校验失败，请检查数据')
+					return validateErrMap
+				}
+			}
+			that.$emit('confirm', importData)
+			that.onModalClose()
+		},
+		// 导入数据验证
+		async handleImportDataValidate(rows) {
+			return this.$refs.shtable.validate(rows)
+		},
+		// 下载导入模板按钮
+		handleDownloadTemplateBtn() {
+			const that = this
+			if (typeof that.downloadTemplateCallback === 'function') {
+				that.downloadTemplateCallback()
+			} else {
+				let defaultOption = {
+					filename: '模板',
+					sheetName: this.importOption.filename || '模板',
+					type: 'xlsx',
+					original: false,
+					download: true,
+					message: false,
+					useStyle: false,
+					columns: this.$refs.shtable
+						.tableRef()
+						.getColumns()
+						.filter(item => item.type !== 'seq'),
+					data: [],
+					sheetMethod: ({ options, workbook, worksheet }) => {},
+					afterExportMethod: options => {
+						this.handleDownloadTemplateFinished(options)
+					}
+				}
+				this.$refs.shtable.tableRef().exportData(Object.assign(defaultOption, this.importOption))
+			}
+		},
+		// 下载导入模板成功回调
+		handleDownloadTemplateFinished(options) {
+			this.msgsuccess('下载模板完成！')
+			if (typeof this.downloadTemplateCallback === 'function') {
+				this.downloadTemplateFinished(options)
+			}
+		},
+		// 选择导入文件按钮
+		handleImportFileBtn() {
+			if (typeof this.importFileCallback === 'function') {
+				this.importFileCallback()
+			} else {
+				let defaultOption = {
+					mode: 'covering',
+					types: ['xlsx', 'csv'],
+					message: false,
+					remote: true,
+					importMethod: obj => {
+						this.handleImportFileMethod(obj)
+					},
+					afterImportMethod: options => {
+						this.handleImportFileFinished(options)
+					}
+				}
+				this.$refs.shtable.tableRef().importData(Object.assign(defaultOption, this.importConfig))
+			}
+		},
+		// 选择导入文件成功回调
+		async handleImportFileMethod({ file, options }) {
+			const that = this
+			const fileExt = file.name.split('.').pop().toLocaleLowerCase()
+			if (fileExt === 'xlsx' || fileExt === 'xls') {
+				that.file = file
+				try {
+					let fileRes = await that.readFile(file)
+					let { results, errDatas } = that.dealImportTableData(that.tableColumns, fileRes)
+					that.importTableData = results
+					that.importErrorData = errDatas
+					setTimeout(() => {
+						that.showProgress = false
+					}, 2000)
+				} catch (e) {
+					that.msgerror(e.message || e)
+				}
+			} else {
+			}
+		},
+		// 选择导入文件成功回调
+		handleImportFileFinished(options) {},
+		// 读取文件
+		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 data = e.target.result
+					const workbook = XLSX.read(data, { type: 'binary' })
+					let sheetNames = workbook.SheetNames
+					let excelJsonMap = {}
+					sheetNames.forEach(sheet => {
+						excelJsonMap[sheet] = excelToJson.sheet_to_json(workbook.Sheets[sheet])
+					})
+					let sheetActive = sheetNames.find(item => item === this.$parent.tableExportConfig.sheetName) || sheetNames[0]
+					resolve(excelJsonMap[sheetActive])
+				}
+			})
+		},
+		// 根据表格读取数据生成表格数据
+		dealImportTableData(columns, results) {
+			const that = this
+			let colsplit = '.'
+			let tableAllColumns = that.generateColumnsAll(columns)
+			let errDatas = []
+			results.map((row, rowIndex) => {
+				Object.keys(row).forEach((key, keyIndex) => {
+					let fieldObj = tableAllColumns.find(col =>
+						key.indexOf(colsplit) === -1 ? key === col.title || key === col.field : key.split(colsplit).includes(col.title) || key.split(colsplit).includes(col.field)
+					)
+					let fieldName = (fieldObj && fieldObj.field) || ''
+					if (fieldName) {
+						row[fieldName] = String(row[key])
+						delete row[key]
+					}
+					let fieldRender = (fieldObj && fieldObj.renderName) || ''
+					if (fieldRender) {
+						let fieldRenderProps = (fieldObj && fieldObj.renderProps) || {}
+						switch (fieldRender) {
+							case '$vSelect':
+							case '$vSwitch':
+							case '$vCheckgroup':
+							case '$vRadiogroup':
+								if (fieldRenderProps.options && Array.isArray(fieldRenderProps.options)) {
+									// 如果匹配到选择项则保留，否则删除掉不规范数据
+									// 判断导入值为数据源的key or value 去匹配
+									let rowsplit = fieldRenderProps.split || ','
+									let rowValue = null
+									if ((fieldRenderProps.multiple || fieldRender === '$vCheckgroup') && row[fieldName].indexOf(rowsplit) !== -1) {
+										let rowValues = row[fieldName].split(rowsplit)
+										let values = fieldRenderProps.options.map(opt => {
+											if (rowValues.includes(String(opt.value)) || rowValues.includes(opt.label)) {
+												return opt.value
+											}
+										})
+										if (values.length > 0) rowValue = values.join(rowsplit)
+									} else {
+										let opt = fieldRenderProps.options.find(opt => String(row[fieldName]) === String(opt.value) || String(row[fieldName]) === opt.label)
+										if (opt) rowValue = opt.value
+									}
+									if (rowValue === null && row[fieldName]) {
+										errDatas.push({
+											rowIndex: rowIndex + 1,
+											errMsg: `字段【${fieldObj.title}】不符合数据源规范，已被清空`
+										})
+										delete row[fieldName]
+									} else {
+										row[fieldName] = rowValue
+									}
+								}
+								break
+						}
+					}
+				})
+			})
+			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>