sh-view 1.7.6 → 2.0.0

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

@@ -1,275 +1,278 @@
-<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"></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">
-						<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 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'
-		},
-		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(--border-color);
-		background-color: var(--body-background);
-		border-radius: var(--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(--theme-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(--theme-color);
-			}
-		}
-		&.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;
-				display: block;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				overflow: hidden;
-			}
-			.upload-list-action {
-				display: inline-flex;
-				align-items: center;
-				color: var(--theme-color);
-				.action-item {
-					display: inline-flex;
-					align-items: center;
-					padding: 0 5px;
-					height: 100%;
-					cursor: pointer;
-					&:hover {
-						background-color: var(--theme-active-color);
-					}
-				}
-			}
-			.upload-list-progress {
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: 0;
-				bottom: 0;
-				display: flex;
-				align-items: center;
-			}
-		}
-	}
-}
-</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>