sh-view 1.7.3 → 1.7.6

package/packages/components/global-components/sh-upload/js/ajax.js

@@ -0,0 +1,80 @@
+function getError(action, option, xhr) {
+	const msg = `fail to post ${action} ${xhr.status}'`
+	const err = new Error(msg)
+	err.status = xhr.status
+	err.method = 'post'
+	err.url = action
+	return err
+}
+
+function getBody(xhr) {
+	const text = xhr.responseText || xhr.response
+	if (!text) {
+		return text
+	}
+
+	try {
+		return JSON.parse(text)
+	} catch (e) {
+		return text
+	}
+}
+
+export default function upload(option) {
+	if (typeof XMLHttpRequest === 'undefined') {
+		return
+	}
+
+	const xhr = new XMLHttpRequest()
+	const action = option.action
+
+	if (xhr.upload) {
+		xhr.upload.onprogress = function progress(e) {
+			if (e.total > 0) {
+				e.percent = (e.loaded / e.total) * 100
+			}
+			option.onProgress(e)
+		}
+	}
+
+	const formData = new FormData()
+
+	if (option.data) {
+		Object.keys(option.data).map(key => {
+			formData.append(key, option.data[key])
+		})
+	}
+
+	formData.append(option.filename, option.file)
+
+	xhr.onerror = function error(e) {
+		option.onError(e)
+	}
+
+	xhr.onload = function onload() {
+		if (xhr.status < 200 || xhr.status >= 300) {
+			return option.onError(getError(action, option, xhr), getBody(xhr))
+		}
+
+		option.onSuccess(getBody(xhr))
+	}
+
+	xhr.open('post', action, true)
+
+	if (option.withCredentials && 'withCredentials' in xhr) {
+		xhr.withCredentials = true
+	}
+
+	const headers = option.headers || {}
+
+	// if (headers['X-Requested-With'] !== null) {
+	//   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+	// }
+
+	for (let item in headers) {
+		if (headers.hasOwnProperty(item) && headers[item] !== null) {
+			xhr.setRequestHeader(item, headers[item])
+		}
+	}
+	xhr.send(formData)
+}

package/packages/components/global-components/sh-upload/js/mixin.js

@@ -0,0 +1,257 @@
+// 上传组件通用方法
+
+import ajax from './ajax'
+
+export default {
+	props: {
+		modelValue: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		action: {
+			type: String,
+			default: 'fileservice/v2/upload'
+		},
+		headers: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxSize: {
+			type: Number,
+			default: 1024 * 2 // 文件大小限制，单位 kb
+		},
+		accept: {
+			type: String,
+			default: '.doc,.docx,.xls,.xlsx,.txt,.pdf,.jpg,.jpeg,.png,.txt,.7z,.zip,.rar'
+		},
+		name: {
+			type: String,
+			default: 'file'
+		},
+		beforeUpload: {
+			type: Function
+		},
+		webkitdirectory: {
+			type: Boolean,
+			default: false // 是否开启选择文件夹，部分浏览器适用
+		},
+		withCredentials: {
+			type: Boolean,
+			default: false // 支持发送 cookie 凭证信息
+		},
+		paste: {
+			type: Boolean,
+			default: false // 是否支持粘贴上传文件
+		},
+		format: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		onFormatError: {
+			type: Function
+		},
+		onExceededSize: {
+			type: Function
+		},
+		onProgress: {
+			type: Function,
+			default() {}
+		},
+		onSuccess: {
+			type: Function,
+			default() {}
+		},
+		onError: {
+			type: Function,
+			default() {}
+		},
+		onRemove: {
+			type: Function,
+			default() {}
+		},
+		onPreview: {
+			type: Function,
+			default() {}
+		},
+		onDownload: {
+			type: Function,
+			default() {}
+		}
+	},
+	data() {
+		return {
+			tempIndex: 1,
+			dragOver: false,
+			fileList: []
+		}
+	},
+	methods: {
+		progressConfig(file) {
+			return {
+				textInside: true,
+				strokeWidth: 20,
+				percent: parseInt(file.percentage, 10),
+				status: file.status
+			}
+		},
+		handleClick() {
+			if (this.disabled) return
+			this.$refs.input.click()
+		},
+		handleChange(e) {
+			const files = e.target.files
+			if (!files) return
+			this.uploadFiles(files)
+			this.$refs.input.value = null
+		},
+		handleStart(file) {
+			file.uid = Date.now() + this.tempIndex++
+			const _file = {
+				status: 'active',
+				name: file.name,
+				size: file.size,
+				percentage: 0,
+				uid: file.uid,
+				showProgress: true
+			}
+			this.fileList.push(_file)
+		},
+		handlePaste(e) {
+			if (this.disabled) return
+			if (this.paste) {
+				this.uploadFiles(e.clipboardData.files)
+			}
+		},
+		handleProgress(e, file) {
+			const _file = this.getFile(file)
+			this.onProgress(e, _file, this.fileList)
+			_file.percentage = e.percent || 0
+		},
+		handleSuccess(res, file) {
+			const _file = this.getFile(file)
+			if (_file) {
+				_file.status = 'success'
+				_file.response = res
+				this.emitValue()
+				this.onSuccess(res, _file, this.fileList)
+				setTimeout(() => {
+					_file.showProgress = false
+				}, 1000)
+			}
+		},
+		handleError(err, response, file) {
+			const _file = this.getFile(file)
+			const fileList = this.fileList
+			_file.status = 'wrong'
+			fileList.splice(fileList.indexOf(_file), 1)
+			this.onError(err, response, file)
+		},
+		handleRemove(file) {
+			const fileList = this.fileList
+			fileList.splice(fileList.indexOf(file), 1)
+			this.emitValue()
+			this.onRemove(file, fileList)
+		},
+		handlePreview(file) {
+			const fileList = this.fileList
+			fileList.splice(fileList.indexOf(file), 1)
+			this.onRemove(file, fileList)
+		},
+		handleDownload(file) {
+			const fileList = this.fileList
+			fileList.splice(fileList.indexOf(file), 1)
+			this.onDownload(file, fileList)
+		},
+		onDrop(e) {
+			this.dragOver = false
+			if (this.disabled) return
+			this.uploadFiles(e.dataTransfer.files)
+		},
+		uploadFiles(files) {
+			let postFiles = Array.prototype.slice.call(files)
+			if (!this.multiple) postFiles = postFiles.slice(0, 1)
+			if (postFiles.length === 0) return
+			postFiles.forEach(file => {
+				this.upload(file)
+			})
+		},
+		upload(file) {
+			if (!this.beforeUpload) {
+				return this.post(file)
+			}
+			const before = this.beforeUpload(file)
+			if (before && before.then) {
+				before.then(processedFile => {
+					if (Object.prototype.toString.call(processedFile) === '[object File]') {
+						this.post(processedFile)
+					} else {
+						this.post(file)
+					}
+				})
+			} else if (before !== false) {
+				this.post(file)
+			}
+		},
+		async post(file) {
+			let { headers, name, params, action, withCredentials } = this
+			if (this.validateFile) {
+				let valResult = this.validateFile(file)
+				if (!valResult) return
+			}
+			this.handleStart(file)
+			ajax({
+				headers: headers,
+				withCredentials: withCredentials,
+				file: file,
+				data: params,
+				filename: name,
+				action: action,
+				onProgress: e => {
+					this.handleProgress(e, file)
+				},
+				onSuccess: res => {
+					this.handleSuccess(res, file)
+				},
+				onError: (err, response) => {
+					this.handleError(err, response, file)
+				}
+			})
+		},
+		getFile(file) {
+			const fileList = this.fileList
+			let target
+			fileList.every(item => {
+				target = file.uid === item.uid ? item : null
+				return !target
+			})
+			return target
+		},
+		clearFiles() {
+			this.fileList = []
+			this.emitValue()
+		},
+		emitValue() {
+			let list = this.getModelValue ? this.getModelValue() : this.fileList
+			this.$emit('update:modelValue', list)
+		}
+	},
+	watch: {
+		modelValue: {
+			handler(fileList) {
+				this.fileList = fileList
+			},
+			immediate: true,
+			deep: true
+		}
+	}
+}

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

@@ -51,38 +51,34 @@ const shMethods = {
 	// 初始化
 	initCreated() {
 		this.initFormItems()
-		this.initFormData()
 	},
 	// 初始化表单字段
 	initFormData() {
-		const that = this
-		that.$vUtils.eachTree(that.items, item => {
+		const { items, data, $vUtils } = this
+		$vUtils.eachTree(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)
+			if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(data, item.field))) {
+				$vUtils.set(data, item.field, renderProps.defaultValue)
 			}
 		})
 	},
 	// 初始化表单项
 	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
+		let originItems = items || this.items
+		let { formItemsArr, rules } = this.generateFormItem(originItems)
+		this.initEditRules(rules)
+		this.formItems = formItemsArr
 		this.initFormData()
 	},
 	// 初始化验证规则
 	initEditRules(rules) {
-		const that = this
-		if (rules && that.$vUtils.isPlainObject(rules)) {
+		const { formRules, $vUtils } = this
+		if (rules && $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])))
+				if (formRules[key]) {
+					formRules[key] = Array.from(new Set(formRules[key].concat(rules[key])))
 				} else {
-					that.formRules[key] = rules[key]
+					formRules[key] = rules[key]
 				}
 			})
 		}
@@ -102,64 +98,55 @@ const shMethods = {
 	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)
+	generateFormItem(items = []) {
+		const { itemConfigDefault, isItemTitle, titleConfigDefault, readonly, disabled, isTrue, getDefaultMessage, $vUtils } = this
+		let formItemsArr = []
+		let rules = {}
+		$vUtils.eachTree(items, ori => {
+			let tar = Object.assign({}, itemConfigDefault, ori)
 			if (ori.children && ori.children.length > 0) {
 				let childrenArr = []
-				that.generateFormItem(ori.children, childrenArr, rules)
-				if (that.isItemTitle) {
+				if (isItemTitle) {
 					// 补入标题渲染器
-					let groupTitleRender = Object.assign({}, that.titleConfigDefault, tar, { span: 24, field: '' })
+					let groupTitleRender = Object.assign({}, titleConfigDefault, tar, { span: 24, field: '' })
 					delete groupTitleRender.children
 					childrenArr.unshift(groupTitleRender)
 				}
 				tar.children = childrenArr
 				if (!tar.span) tar.span = 24
-				itemArr.push(tar)
+				formItemsArr.push(tar)
 			} else {
 				let renderConfig = {
 					name: ori.renderName || '$vInput',
 					props: Object.assign({}, ori.renderProps || {})
 				}
-				if (that.readonly || that.disabled) {
+				if (readonly || disabled) {
 					renderConfig.props.disabled = true
 				}
 				tar.itemRender = Object.assign({}, renderConfig, ori.itemRender || {})
 				// 首先提取校验配置
-				if (that.isTrue(ori['renderRequire'])) {
+				if (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))) {
+						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && isTrue(renderConfig.props.multiple))) {
 							dataType = 'array'
 						}
-						rules[ori['field']] = [{ required: true, message: that.getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
+						rules[ori['field']] = [{ required: true, message: 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)
+					formItemsArr.push(tar)
 				}
 			}
 		})
+		return { formItemsArr, rules }
 	}
 }
 

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

@@ -1,16 +1,23 @@
 <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">
+		<vxe-list ref="vxeList" v-bind="listConfig">
 			<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">
+				<Row v-if="grid" :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>
+							<slot name="item" v-bind="item"></slot>
 						</div>
 					</Col>
 				</Row>
+				<template v-else>
+					<template v-for="(item, itemindex) in items" :key="itemindex">
+						<div class="sh-list-item" :class="itemClassName">
+							<slot name="item" v-bind="item"></slot>
+						</div>
+					</template>
+				</template>
 			</template>
 		</vxe-list>
 		<template v-if="$slots.footer"><slot name="footer"></slot></template>
@@ -67,7 +74,7 @@ export default {
 			type: String
 		},
 		grid: {
-			type: Object,
+			type: [Object, Boolean],
 			default() {
 				return { gutter: 0, span: 24 }
 			}
@@ -84,7 +91,20 @@ export default {
 			listPagerConfig: {}
 		}
 	},
-	computed: {},
+	computed: {
+		listConfig() {
+			return {
+				data: this.dataSourse,
+				size: this.size,
+				className: this.className,
+				loading: this.loading,
+				height: this.height,
+				autoResize: this.autoResize,
+				syncResize: this.syncResize,
+				scrollY: this.scrollY
+			}
+		}
+	},
 	watch: {
 		pagerConfig: {
 			handler(newvalue, oldValue) {