sh-view 1.7.5 → 2.0.0

package/packages/components/global-components/sh-vxe-form/js/methods.js

@@ -1,170 +0,0 @@
-const vxeEvents = {
-	// -------- 表单
-	// 表单提交
-	onFormSubmit(params) {
-		this.$emit('submit', params)
-	},
-	// 表单重置
-	onFormReset(params) {
-		this.initFormItems()
-		this.$vUtils.clear(this.data, null)
-		this.$emit('reset', params)
-	},
-	// 表单项编辑回调
-	async onFormEditClosed(obj, renderbox) {
-		let { property, data } = obj
-		if (this.formRules[property]) {
-			let valerr = await this.formRef().validateField(property)
-			if (!valerr) {
-				this.formRef().clearValidate(property)
-			}
-		}
-		this.$emit('edit-closed', obj, renderbox, this)
-		Object.assign(this.data, data)
-	},
-	// 表单校验不通过
-	onFormSubmitInvalid(params) {
-		this.$emit('submit-invalid', params)
-	},
-	// 表单折叠按钮被手动点击时会触发该事件
-	onFormCollapse(params) {
-		this.$emit('collapse', params)
-	},
-	// 前缀点击事件
-	onPrefixClick(params, render) {
-		this.$emit('prefix-click', params, render)
-	},
-	// 后缀点击事件
-	onSuffixClick(params, render) {
-		this.$emit('suffix-click', params, render)
-	}
-}
-
-const vxeMethods = {
-	// 表单验证方法
-	validate(callback) {
-		return this.formRef().validate(callback)
-	}
-}
-
-const shMethods = {
-	// 初始化
-	initCreated() {
-		this.initFormItems()
-		this.initFormData()
-	},
-	// 初始化表单字段
-	initFormData() {
-		const that = this
-		that.$vUtils.eachTree(that.items, item => {
-			let renderProps = item.renderProps || item.itemRender?.props || {}
-			if (!that.$vUtils.isNone(renderProps?.defaultValue) && that.$vUtils.isNone(that.$vUtils.get(that.data, item.field))) {
-				that.$vUtils.set(that.data, item.field, renderProps.defaultValue || null)
-			}
-		})
-	},
-	// 初始化表单项
-	initFormItems(items) {
-		const that = this
-		let originItems = items || that.items
-		let formItemsArr = [] // 表单项
-		let rules = {} // 校验规则
-		that.generateFormItem(originItems, formItemsArr, rules)
-		that.initEditRules(rules)
-		that.formItems = formItemsArr
-		this.initFormData()
-	},
-	// 初始化验证规则
-	initEditRules(rules) {
-		const that = this
-		if (rules && that.$vUtils.isPlainObject(rules)) {
-			Object.keys(rules).forEach(key => {
-				if (that.formRules[key]) {
-					that.formRules[key] = Array.from(new Set(that.formRules[key].concat(rules[key])))
-				} else {
-					that.formRules[key] = rules[key]
-				}
-			})
-		}
-	},
-	// 获取默认验证信息
-	getDefaultMessage(renderType, title) {
-		let message = ''
-		const selectRenders = ['$vSelect', '$vTree', '$vTime', '$vSwitch', '$vCheckbox', '$vCheckgroup', '$vRadio', '$vRadiogroup', '$vUpload']
-		if (selectRenders.includes(renderType)) {
-			message = '请选择' + title
-		} else {
-			message = '请输入' + title
-		}
-		return message
-	},
-	// 判断为true
-	isTrue(value) {
-		return String(value) === '1' || String(value).toLowerCase() === 'true'
-	},
-	// 生成全表头
-	generateColumnsAll(columns, resultColumns = []) {
-		columns.forEach((column, index) => {
-			if (column.children && Array.isArray(column.children) && column.children.length) {
-				this.generateColumnsAll(column.children, resultColumns)
-			} else {
-				resultColumns.push(column)
-			}
-		})
-		return resultColumns
-	},
-	// 自动生成表单渲染项
-	generateFormItem(formItems = [], itemArr = [], rules = {}) {
-		const that = this
-		formItems.forEach(ori => {
-			let tar = Object.assign({}, that.itemConfigDefault, ori)
-			if (ori.children && ori.children.length > 0) {
-				let childrenArr = []
-				that.generateFormItem(ori.children, childrenArr, rules)
-				if (that.isItemTitle) {
-					// 补入标题渲染器
-					let groupTitleRender = Object.assign({}, that.titleConfigDefault, tar, { span: 24, field: '' })
-					delete groupTitleRender.children
-					childrenArr.unshift(groupTitleRender)
-				}
-				tar.children = childrenArr
-				if (!tar.span) tar.span = 24
-				itemArr.push(tar)
-			} else {
-				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) {
-						rules[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'
-						}
-						rules[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))) {
-					itemArr.push(tar)
-				}
-			}
-		})
-	}
-}
-
-export default {
-	...vxeEvents,
-	...vxeMethods,
-	...shMethods
-}

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

@@ -1,129 +0,0 @@
-<template>
-	<div class="sh-list">
-		<template v-if="$slots.header"><slot name="header"></slot></template>
-		<vxe-list ref="vxeList" :data="dataSourse" :size="size" :class-name="className" :loading="loading" :height="height" :auto-resize="autoResize" :sync-resize="syncResize" :scroll-y="scrollY">
-			<template #default="{ items }">
-				<sh-empty v-if="items.length === 0 && !loading" :no-data-icon="noDataIcon" :no-data-text="noDataText"></sh-empty>
-				<Row :gutter="grid.gutter">
-					<Col v-for="(item, itemindex) in items" :key="itemindex" v-bind="grid">
-						<div class="sh-list-item" :class="itemClassName">
-							<slot name="item" :item="item"></slot>
-						</div>
-					</Col>
-				</Row>
-			</template>
-		</vxe-list>
-		<template v-if="$slots.footer"><slot name="footer"></slot></template>
-		<vxe-pager v-if="pagerConfig" v-bind="listPagerConfig" @page-change="onPageChange"></vxe-pager>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShList',
-	props: {
-		dataSourse: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		size: {
-			type: String
-		},
-		className: {
-			type: String
-		},
-		itemClassName: {
-			type: String
-		},
-		loading: {
-			type: Boolean
-		},
-		height: {
-			type: [String, Number],
-			default: 'auto'
-		},
-		autoResize: {
-			type: Boolean
-		},
-		syncResize: {
-			type: [Boolean, String, Number]
-		},
-		scrollY: {
-			type: [Boolean, Object],
-			default() {
-				return { enabled: false, gt: 60 }
-			}
-		},
-		pagerConfig: {
-			type: [Object, Boolean],
-			default: false
-		},
-		noDataIcon: {
-			type: String
-		},
-		noDataText: {
-			type: String
-		},
-		grid: {
-			type: Object,
-			default() {
-				return { gutter: 0, span: 24 }
-			}
-		}
-	},
-	emits: ['page-change'],
-	data() {
-		return {
-			pagerConfigDefault: {
-				currentPage: 1,
-				pageSize: 50,
-				total: 0
-			},
-			listPagerConfig: {}
-		}
-	},
-	computed: {},
-	watch: {
-		pagerConfig: {
-			handler(newvalue, oldValue) {
-				this.initPagerConfig()
-			},
-			deep: true,
-			immediate: true
-		}
-	},
-	created() {},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
-		listRef() {
-			return this.$refs.vxeList
-		},
-		// 初始化分页配置
-		initPagerConfig() {
-			this.listPagerConfig = Object.assign({}, this.pagerConfigDefault, this.pagerConfig)
-		},
-		// 分页变化触发
-		onPageChange(data) {
-			let { currentPage, pageSize } = data
-			this.listPagerConfig.currentPage = currentPage
-			this.listPagerConfig.pageSize = pageSize
-			this.$emit('page-change', data)
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-list {
-	position: relative;
-	.sh-list-item {
-		display: flex;
-		width: 100%;
-		justify-content: space-between;
-		align-items: center;
-	}
-}
-</style>

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

@@ -1,377 +0,0 @@
-<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>