sh-view 1.7.5 → 2.0.0

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

@@ -1,418 +1,278 @@
-<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>
-				<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>
-		</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>
-	</div>
-</template>
-
-<script>
-import UList from './components/u-list.vue'
-export default {
-	name: 'ShUpload',
-	components: {
-		UList
-	},
-	props: {
-		isFormData: {
-			type: Boolean,
-			default: true
-		},
-		// 编辑回显数据
-		value: {
-			type: [Array],
-			default() {
-				return []
-			}
-		},
-		action: {
-			type: String,
-			default: '-'
-		},
-		icon: {
-			type: String,
-			default: ''
-		},
-		headers: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		disabled: {
-			type: Boolean
-		},
-		preview: {
-			type: Boolean,
-			default: true
-		},
-		width: {
-			type: [String, Number],
-			default: 80
-		},
-		height: {
-			type: [String, Number],
-			default: 80
-		},
-		limit: {
-			type: Number,
-			default: 1
-		},
-		limitBytes: {
-			type: Number,
-			default: 2097152
-		},
-		accept: {
-			type: String,
-			default: '.doc,.docx,.xls,.xlsx,.txt,.pdf,.jpg,.jpeg,.png,.txt,.7z,.zip,.rar'
-		},
-		params: {
-			type: Object,
-			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,
-			default() {
-				return {
-					type: 'post',
-					url: ''
-				}
-			}
-		}
-	},
-	emits: ['update:modelValue', 'progress', 'success', 'error', 'file-delete'],
-	data() {
-		return {
-			resultUrl: '',
-			uploadList: []
-		}
-	},
-	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` } : {}
-		},
-		upClass() {
-			return [
-				{
-					[this.listType]: true
-				}
-			]
-		},
-		messageAll() {
-			return {
-				limitBytes: this.limitBytes,
-				fileSizeError: '文件大小不能超过' + this.limitBytes / (1024 * 1024) + 'M',
-				fileFormat: this.accept.split(','),
-				fileTypeError: '格式不正确，请上传' + this.accept + '文件'
-			}
-		}
-	},
-	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
-		}
-	},
-	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)
-			}
-			return this.action !== '-'
-		},
-		// 组件上传formdata进行内部预览图片
-		handleFilePreviewData(file) {
-			this.uploadList.push(file)
-		},
-		// 组件内文件上传
-		async handleFileUpload(file) {
-			const that = this
-			if (!that.serverConfig.url) {
-				that.msgerror('上传未配置请求地址！')
-				return
-			}
-			if (!that.serverConfig.type) {
-				that.msgerror('上传未配置请求方式！')
-				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)
-			}
-		},
-		// 文件删除
-		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)
-			})
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.sh-upload {
-	display: inline-block;
-	&.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;
-			}
-		}
-		&.list {
-			& + .sh-upload-list.list {
-				margin-top: 8px;
-			}
-		}
-		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);
-				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;
-				}
-			}
-		}
-		.list-file-item {
-			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;
-			}
-			.file-title {
-				flex: 1;
-				margin-right: 10px;
-				line-height: 1.2;
-			}
-			.file-action {
-				display: inline-flex;
-				flex-wrap: nowrap;
-				.file-action-item {
-					display: inline-block;
-					cursor: pointer;
-					color: var(--theme-color);
-					margin-left: 8px;
-				}
-			}
-		}
-		.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;
-				align-items: center;
-				justify-content: center;
-			}
-		}
-	}
-	.ivu-icon {
-		font-size: inherit;
-	}
-}
-</style>
+<template>
+	<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" :size="iconSize"></sh-icon>
+					<span class="upload-box-text">上传附件</span>
+				</div>
+			</slot>
+		</div>
+		<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">
+						<sh-progress v-if="file.showProgress" v-bind="progressConfig(file)"></sh-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 mixin from './js/mixin'
+export default {
+	name: 'ShUpload',
+	mixins: [mixin],
+	props: {
+		baseUrl: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [String, Number],
+			default: 80
+		},
+		height: {
+			type: [String, Number],
+			default: 80
+		},
+		limit: {
+			type: Number,
+			default: 1
+		},
+		card: {
+			type: Boolean
+		},
+		drag: {
+			type: Boolean
+		},
+		icon: {
+			type: String,
+			default: 'ios-folder'
+		},
+		iconSize: {
+			type: [Number, String]
+		},
+		params: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		actionList: {
+			type: Array,
+			default() {
+				return ['detail', 'download', 'delete']
+			}
+		},
+		resKey: {
+			type: String,
+			default: 'data'
+		}
+	},
+	emits: ['update:modelValue', 'action'],
+	data() {
+		return {}
+	},
+	computed: {
+		multiple() {
+			return this.limit > 1
+		},
+		upStyles() {
+			return this.card ? { width: `${this.width}px`, height: `${this.height}px` } : {}
+		},
+		upClass() {
+			return {
+				'sh-upload-list': !this.card,
+				'sh-upload-select': !this.drag,
+				'sh-upload-drag': this.drag,
+				'sh-upload-dragOver': this.drag && this.dragOver
+			}
+		},
+		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))
+		}
+	},
+	methods: {
+		// 上传校验
+		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
+				}
+			}
+			// 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 (!action) {
+				this.msginfo('上传地址不能为空')
+				return
+			}
+			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)
+		},
+		// 获取双向绑定值
+		getModelValue() {
+			return this.fileList.map(item => {
+				let url = this.$vUtils.get(item, `response.${this.resKey}`)
+				return {
+					name: item.name,
+					url: url
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-upload {
+	display: inline-block;
+	vertical-align: top;
+	&.list {
+		display: block;
+		width: 100%;
+	}
+	.upload-component {
+		border: 1px solid var(--vxe-table-border-color);
+		background-color: var(--vxe-table-body-background-color);
+		border-radius: var(--vxe-border-radius);
+		cursor: pointer;
+		input[type='file'] {
+			display: none;
+		}
+		.upload-box {
+			display: inline-block;
+			padding: 6px 10px;
+			box-sizing: border-box;
+			.upload-box-icon {
+				margin-right: 5px;
+			}
+			&.card,
+			&.drag {
+				display: inline-flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				.upload-box-icon {
+					margin-bottom: 8px;
+				}
+			}
+			&.drag {
+				min-height: 100px;
+			}
+		}
+		&:hover {
+			border: 1px solid var(--vxe-primary-color);
+		}
+		&.sh-upload-select {
+			display: inline-block;
+			vertical-align: top;
+		}
+		&.sh-upload-drag {
+			text-align: center;
+			cursor: pointer;
+			position: relative;
+			overflow: hidden;
+			&:hover {
+				border: 1px dashed var(--vxe-primary-color);
+			}
+		}
+		&.sh-upload-dragOver {
+			border: 2px dashed var(--vxe-primary-color);
+		}
+	}
+	.upload-list {
+		display: block;
+		.upload-list-item {
+			display: flex;
+			align-items: stretch;
+			border: 1px solid var(--vxe-table-border-color);
+			background-color: var(--vxe-table-body-background-color);
+			position: relative;
+			.upload-list-title {
+				padding: 6px 10px;
+				flex: 1;
+				display: block;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+			}
+			.upload-list-action {
+				display: inline-flex;
+				align-items: center;
+				color: var(--vxe-primary-color);
+				.action-item {
+					display: inline-flex;
+					align-items: center;
+					padding: 0 5px;
+					height: 100%;
+					cursor: pointer;
+					&:hover {
+						background-color: var(--vxe-primary-darken-color);
+					}
+				}
+			}
+			.upload-list-progress {
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+}
+</style>