sh-view 1.7.5 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "description": "基于vxe-table、view-ui-plus二次封装",
   "main": "packages/index.js",
   "scripts": {

package/packages/components/global-components/{sh-layout → sh-split}/index.vue

@@ -30,7 +30,7 @@
 
 <script>
 export default {
-	name: 'ShLayout',
+	name: 'ShSplit',
 	components: {},
 	props: {
 		split: {

package/packages/components/global-components/sh-upload/index.vue

@@ -1,102 +1,54 @@
 <template>
-	<div class="sh-upload" :class="upClass">
-		<u-list
-			v-if="listType === 'card'"
-			:upload-list="uploadList"
-			:list-type="listType"
-			:type="type"
-			:is-form-data="isFormData"
-			:disabled="disabled"
-			:preview="preview"
-			:up-styles="upStyles"
-			:up-class="upClass"
-			@delete="handleFileRemove"></u-list>
-		<div v-show="uploadList.length < limit" class="sh-upload-list" :style="upStyles" :class="upClass">
-			<Upload
-				ref="upload"
-				class="upload-box-component"
-				:class="upClass"
-				:action="action"
-				:headers="headers"
-				:disabled="disabled"
-				:multiple="multiple"
-				:type="uploadType"
-				:accept="accept"
-				:data="params"
-				:name="inputname"
-				:show-upload-list="false"
-				:on-progress="uploadProgress"
-				:on-success="uploadSuccess"
-				:on-error="uploadError"
-				:before-upload="handleBeforeUpload">
-				<div v-if="uploadType === 'drag'" class="py-3">
-					<sh-icon :type="iconType" size="26"></sh-icon>
-					<p class="mt-1">上传附件</p>
+	<div class="sh-upload" :class="{ list: !card }">
+		<slot name="head"></slot>
+		<div
+			v-if="!disabled"
+			v-show="fileList.length < limit"
+			class="upload-component"
+			:class="upClass"
+			:style="upStyles"
+			@click="handleClick"
+			@drop.prevent="onDrop"
+			@paste="handlePaste"
+			@dragover.prevent="dragOver = true"
+			@dragleave.prevent="dragOver = false">
+			<input ref="input" type="file" class="sh-upload-input" :multiple="multiple" :webkitdirectory="webkitdirectory" :accept="accept" @change="handleChange" />
+			<slot>
+				<div class="upload-box" :class="{ drag, card }" :style="upStyles">
+					<sh-icon v-if="icon" class="upload-box-icon" :type="icon"></sh-icon>
+					<span class="upload-box-text">上传附件</span>
 				</div>
-				<template v-else-if="listType === 'card'">
-					<div class="upload-box-inner" :style="upStyles"><sh-icon :type="iconType" /></div>
-				</template>
-				<template v-else>
-					<Button icon="ios-cloud-upload-outline">上传附件</Button>
-				</template>
-			</Upload>
+			</slot>
 		</div>
-		<u-list
-			v-if="listType === 'list'"
-			:upload-list="uploadList"
-			:width="width"
-			:height="height"
-			:list-type="listType"
-			:type="type"
-			:is-form-data="isFormData"
-			:disabled="disabled"
-			:preview="preview"
-			:up-styles="upStyles"
-			:up-class="upClass"
-			@delete="handleFileRemove"></u-list>
+		<ul v-if="fileList.length" class="upload-list">
+			<li v-for="(file, index) in fileList" :key="index" class="upload-list-item">
+				<slot name="fileItem" v-bind="file">
+					<div class="upload-list-title" :title="file.name">{{ file.name }}</div>
+					<div v-if="file.status !== 'success'" class="upload-list-progress">
+						<Progress v-if="file.showProgress" v-bind="progressConfig(file)"></Progress>
+					</div>
+					<div v-else class="upload-list-action">
+						<template v-for="listAct in listActions" :key="listAct.code">
+							<span class="action-item" @click="onActionClick(listAct, file)"><sh-icon :type="listAct.icon" :title="listAct.title" size="18" /></span>
+						</template>
+					</div>
+				</slot>
+			</li>
+		</ul>
+		<slot name="foot"></slot>
 	</div>
 </template>
 
 <script>
-import UList from './components/u-list.vue'
+import mixin from './js/mixin'
 export default {
 	name: 'ShUpload',
-	components: {
-		UList
-	},
+	mixins: [mixin],
 	props: {
-		isFormData: {
-			type: Boolean,
-			default: true
-		},
-		// 编辑回显数据
-		value: {
-			type: [Array],
-			default() {
-				return []
-			}
-		},
-		action: {
-			type: String,
-			default: '-'
-		},
-		icon: {
+		baseUrl: {
 			type: String,
 			default: ''
 		},
-		headers: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		disabled: {
-			type: Boolean
-		},
-		preview: {
-			type: Boolean,
-			default: true
-		},
 		width: {
 			type: [String, Number],
 			default: 80
@@ -109,13 +61,15 @@ export default {
 			type: Number,
 			default: 1
 		},
-		limitBytes: {
-			type: Number,
-			default: 2097152
+		card: {
+			type: Boolean
 		},
-		accept: {
+		drag: {
+			type: Boolean
+		},
+		icon: {
 			type: String,
-			default: '.doc,.docx,.xls,.xlsx,.txt,.pdf,.jpg,.jpeg,.png,.txt,.7z,.zip,.rar'
+			default: 'ios-folder'
 		},
 		params: {
 			type: Object,
@@ -123,296 +77,199 @@ export default {
 				return {}
 			}
 		},
-		inputname: {
-			type: String,
-			default: 'image'
-		},
-		type: {
-			type: String,
-			default: 'img' // img, file  上传图片还是文件
-		},
-		listType: {
-			type: String,
-			default: 'card' // card, list  附件列表展示类型
-		},
-		uploadType: {
-			type: String,
-			default: 'select' // drag
-		},
-		beforeUpload: {
-			type: Function
-		},
-		baseUrl: {
-			type: String,
-			default: ''
-		},
-		serverConfig: {
-			type: Object,
+		actionList: {
+			type: Array,
 			default() {
-				return {
-					type: 'post',
-					url: ''
-				}
+				return ['detail', 'download', 'delete']
 			}
+		},
+		resKey: {
+			type: String,
+			default: 'data'
 		}
 	},
-	emits: ['update:modelValue', 'progress', 'success', 'error', 'file-delete'],
+	emits: ['update:modelValue', 'action'],
 	data() {
-		return {
-			resultUrl: '',
-			uploadList: []
-		}
+		return {}
 	},
 	computed: {
 		multiple() {
 			return this.limit > 1
 		},
-		iconType() {
-			return this.icon || (this.type === 'img' ? 'md-camera' : 'ios-folder')
-		},
 		upStyles() {
-			return this.listType === 'card' ? { width: `${this.width}px`, height: `${this.height}px` } : {}
+			return this.card ? { width: `${this.width}px`, height: `${this.height}px` } : {}
 		},
 		upClass() {
-			return [
-				{
-					[this.listType]: true
-				}
-			]
-		},
-		messageAll() {
 			return {
-				limitBytes: this.limitBytes,
-				fileSizeError: '文件大小不能超过' + this.limitBytes / (1024 * 1024) + 'M',
-				fileFormat: this.accept.split(','),
-				fileTypeError: '格式不正确，请上传' + this.accept + '文件'
+				'sh-upload-list': !this.card,
+				'sh-upload-select': !this.drag,
+				'sh-upload-drag': this.drag,
+				'sh-upload-dragOver': this.drag && this.dragOver
 			}
-		}
-	},
-	watch: {
-		modelValue: {
-			handler: function (val, oldVal) {
-				if (val && Array.isArray(val)) {
-					this.uploadList = val
-				}
-			},
-			immediate: true,
-			deep: true
 		},
-		uploadList: {
-			handler: function (val, oldVal) {
-				this.$emit('update:modelValue', val)
-			},
-			immediate: false,
-			deep: true
+		fileFormat() {
+			return this.format.length ? this.format : this.accept.split(',').map(_ => String(_).replace('.', ''))
+		},
+		listActions() {
+			let list = [
+				{ title: '查看文件', icon: 'ios-eye-outline', code: 'detail' },
+				{ title: '下载文件', icon: 'ios-download', code: 'download' }
+			]
+			if (!this.disabled) {
+				list.push({ title: '删除文件', icon: 'ios-trash-outline', code: 'delete' })
+			}
+			return list.filter(item => this.actionList.includes(item.code))
 		}
 	},
-	created() {},
-	mounted() {},
 	methods: {
-		// 上传进度
-		uploadProgress(event, file, fileList) {
-			this.$emit('progress', event, file, fileList)
-		},
-		// 上传成功
-		uploadSuccess(res, file, fileList) {
-			this.$emit('success', res, file, fileList)
-		},
-		// 上传失败
-		uploadError(error, file, fileList) {
-			this.$emit('error', error, file, fileList)
-		},
-		// 文件上传前狗子
-		handleBeforeUpload(file) {
-			// 文件类型校验
-			let type = file.name.substr(file.name.lastIndexOf('.')).toLowerCase() // .jpg
-			let imgFileTypeArr = this.messageAll.fileFormat
-			let checkType = imgFileTypeArr.some(item => {
-				return item === type
-			})
-			if (this.fileaccept !== '' && !checkType) {
-				this.msginfo(this.messageAll.fileTypeError)
-				return false
-			}
-			// 文件大小校验
-			const checkMax = file.size < this.messageAll.limitBytes
-			if (!checkMax) {
-				this.msginfo(this.messageAll.fileSizeError)
-				return false
-			}
-			if (typeof this.beforeUpload === 'function') {
-				this.beforeUpload(file)
-			} else if (this.isFormData) {
-				this.handleFilePreviewData(file)
-			} else {
-				this.handleFileUpload(file)
+		// 上传校验
+		validateFile(file) {
+			let { fileList, action, fileFormat, maxSize } = this
+			// check format
+			if (fileFormat.length) {
+				const _file_format = file.name.split('.').pop().toLocaleLowerCase()
+				const checked = fileFormat.some(item => item.toLocaleLowerCase() === _file_format)
+				if (!checked) {
+					let errorMsg = `格式不正确，请上传 ${fileFormat.join(' ')} 格式文件`
+					this.onFormatError ? this.onFormatError(file, errorMsg, fileList) : this.msginfo(errorMsg)
+					return
+				}
 			}
-			return this.action !== '-'
-		},
-		// 组件上传formdata进行内部预览图片
-		handleFilePreviewData(file) {
-			this.uploadList.push(file)
-		},
-		// 组件内文件上传
-		async handleFileUpload(file) {
-			const that = this
-			if (!that.serverConfig.url) {
-				that.msgerror('上传未配置请求地址！')
+			// check maxSize
+			if (maxSize && file.size > maxSize * 1024) {
+				let errorMsg = `文件大小不能超过 ${maxSize / 1024} M`
+				this.onExceededSize ? this.onExceededSize(file, errorMsg, fileList) : this.msginfo(errorMsg)
 				return
 			}
-			if (!that.serverConfig.type) {
-				that.msgerror('上传未配置请求方式！')
+			if (!action) {
+				this.msginfo('上传地址不能为空')
 				return
 			}
-			let axiosData = new FormData()
-			let axiosHeader = Object.assign({}, that.headers)
-			axiosHeader['Content-Type'] = 'multipart/form-data'
-			axiosData.append('file', file)
-			if (that.params) {
-				Object.keys(that.params).forEach(key => {
-					axiosData.append(key, that.params[key])
-				})
-			}
-			try {
-				let res = await that.$http.request({
-					method: that.serverConfig.type,
-					url: that.serverConfig.url,
-					headers: axiosHeader,
-					data: axiosData
-				})
-				console.log(res)
-			} catch (e) {
-				that.msgerror('上传失败 ' + e.message || e)
+			return true
+		},
+		// 附件操作点击事件
+		onActionClick(obj, file) {
+			if (obj.code === 'delete') {
+				this.handleRemove(file)
+			} else if (obj.code === 'detail') {
+				this.handlePreview(file)
+			} else if (obj.code === 'download') {
+				this.handleDownload(file)
 			}
+			this.$emit('action', obj)
 		},
-		// 文件删除
-		handleFileRemove(data) {
-			const that = this
-			that.msgconfirm({
-				content: '确定要删除吗？'
-			}).then(() => {
-				const dataIndex = this.uploadList.indexOf(data)
-				that.uploadList.splice(dataIndex, 1)
-				that.$refs.upload.fileList.splice(dataIndex, 1)
-				that.$emit('file-delete', data)
+		// 获取双向绑定值
+		getModelValue() {
+			return this.fileList.map(item => {
+				let url = this.$vUtils.get(item, `response.${this.resKey}`)
+				return {
+					name: item.name,
+					url: url
+				}
 			})
 		}
 	}
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .sh-upload {
 	display: inline-block;
+	vertical-align: top;
 	&.list {
 		display: block;
 		width: 100%;
 	}
-	.sh-upload-list {
-		border-radius: 4px;
-		background: var(--body-background);
-		position: relative;
-		&.card {
-			display: inline-block;
-			vertical-align: top;
-			text-align: center;
-			overflow: hidden;
-			& + .sh-upload-list.card {
-				margin-left: 4px;
-			}
+	.upload-component {
+		border: 1px solid var(--border-color);
+		background-color: var(--body-background);
+		border-radius: var(--border-radius);
+		cursor: pointer;
+		input[type='file'] {
+			display: none;
 		}
-		&.list {
-			& + .sh-upload-list.list {
-				margin-top: 8px;
+		.upload-box {
+			display: inline-block;
+			padding: 6px 10px;
+			box-sizing: border-box;
+			.upload-box-icon {
+				margin-right: 5px;
 			}
-		}
-		img {
-			width: 100%;
-			height: 100%;
-		}
-		.list-file-card {
-			position: relative;
-			height: 100%;
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			background-color: var(--header-color);
-			.list-file-cover {
-				display: flex;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				background: rgba(0, 0, 0, 0.6);
+			&.card,
+			&.drag {
+				display: inline-flex;
+				flex-direction: column;
 				align-items: center;
 				justify-content: center;
-				font-size: 20px;
-				opacity: 0;
-				transition: 0.3s all;
-				&:hover {
-					opacity: 1;
-				}
-				i {
-					color: #fff;
-					font-size: 16px;
-					cursor: pointer;
-					margin: 0 5px;
+				.upload-box-icon {
+					margin-bottom: 8px;
 				}
 			}
+			&.drag {
+				min-height: 100px;
+			}
+		}
+		&:hover {
+			border: 1px solid var(--theme-color);
 		}
-		.list-file-item {
+		&.sh-upload-select {
+			display: inline-block;
+			vertical-align: top;
+		}
+		&.sh-upload-drag {
+			text-align: center;
+			cursor: pointer;
 			position: relative;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 5px 10px;
-			background: var(--hover-color);
-			height: 100%;
-			& + .list-file-item {
-				margin-top: 8px;
+			overflow: hidden;
+			&:hover {
+				border: 1px dashed var(--theme-color);
 			}
-			.file-title {
+		}
+		&.sh-upload-dragOver {
+			border: 2px dashed var(--theme-color);
+		}
+	}
+	.upload-list {
+		display: block;
+		.upload-list-item {
+			display: flex;
+			align-items: stretch;
+			border: 1px solid var(--border-color);
+			background-color: var(--body-background);
+			position: relative;
+			.upload-list-title {
+				padding: 6px 10px;
 				flex: 1;
-				margin-right: 10px;
-				line-height: 1.2;
+				display: block;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
 			}
-			.file-action {
+			.upload-list-action {
 				display: inline-flex;
-				flex-wrap: nowrap;
-				.file-action-item {
-					display: inline-block;
+				align-items: center;
+				color: var(--theme-color);
+				.action-item {
+					display: inline-flex;
+					align-items: center;
+					padding: 0 5px;
+					height: 100%;
 					cursor: pointer;
-					color: var(--theme-color);
-					margin-left: 8px;
+					&:hover {
+						background-color: var(--theme-active-color);
+					}
 				}
 			}
-		}
-		.upload-box-component {
-			border-radius: 4px;
-			cursor: pointer;
-			width: 100%;
-			height: 100%;
-			&.card {
-				display: inline-block;
-				vertical-align: top;
-				border: 1px dashed var(--border-color);
-				text-align: center;
-				overflow: hidden;
-			}
-			&.list {
-			}
-			.upload-box-inner {
-				font-size: 26px;
-				display: inline-flex;
+			.upload-list-progress {
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				display: flex;
 				align-items: center;
-				justify-content: center;
 			}
 		}
 	}
-	.ivu-icon {
-		font-size: inherit;
-	}
 }
 </style>

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)
+}