sh-view 2.1.0 → 2.3.0

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

@@ -12,7 +12,7 @@
 			@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" />
+			<input ref="inputRef" 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>
@@ -40,11 +40,17 @@
 </template>
 
 <script>
-import mixin from './js/mixin'
-export default {
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
+import ajax from './js/ajax'
+export default defineComponent({
 	name: 'ShUpload',
-	mixins: [mixin],
 	props: {
+		modelValue: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
 		baseUrl: {
 			type: String,
 			default: ''
@@ -89,90 +95,341 @@ export default {
 		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` } : {}
+		action: {
+			type: String,
+			default: 'fileservice/v2/upload'
 		},
-		upClass() {
-			return {
-				'sh-upload-list': !this.card,
-				'sh-upload-select': !this.drag,
-				'sh-upload-drag': this.drag,
-				'sh-upload-dragOver': this.drag && this.dragOver
+		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 []
 			}
 		},
-		fileFormat() {
-			return this.format.length ? this.format : this.accept.split(',').map(_ => String(_).replace('.', ''))
+		onFormatError: {
+			type: Function
+		},
+		onExceededSize: {
+			type: Function
+		},
+		onProgress: {
+			type: Function,
+			default() {}
+		},
+		onSuccess: {
+			type: Function,
+			default() {}
+		},
+		onError: {
+			type: Function,
+			default() {}
 		},
-		listActions() {
+		onRemove: {
+			type: Function,
+			default() {}
+		},
+		onPreview: {
+			type: Function,
+			default() {}
+		},
+		onDownload: {
+			type: Function,
+			default() {}
+		}
+	},
+	emits: ['update:modelValue', 'action'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const inputRef = ref()
+		const tempIndex = ref(1)
+		const dragOver = ref(false)
+		const fileList = ref([])
+
+		const multiple = computed(() => props.limit > 1)
+		const upStyles = computed(() => {
+			return props.card ? { width: `${props.width}px`, height: `${props.height}px` } : {}
+		})
+		const upClass = computed(() => {
+			return {
+				'sh-upload-list': !props.card,
+				'sh-upload-select': !props.drag,
+				'sh-upload-drag': props.drag,
+				'sh-upload-dragOver': props.drag && dragOver.value
+			}
+		})
+		const fileFormat = computed(() => (props.format.length ? props.format : props.accept.split(',').map(_ => String(_).replace('.', ''))))
+		const listActions = computed(() => {
 			let list = [
 				{ title: '查看文件', icon: 'ios-eye-outline', code: 'detail' },
 				{ title: '下载文件', icon: 'ios-download', code: 'download' }
 			]
-			if (!this.disabled) {
+			if (!props.disabled) {
 				list.push({ title: '删除文件', icon: 'ios-trash-outline', code: 'delete' })
 			}
-			return list.filter(item => this.actionList.includes(item.code))
+			return list.filter(item => props.actionList.includes(item.code))
+		})
+
+		const progressConfig = file => {
+			return {
+				textInside: true,
+				strokeWidth: 20,
+				percent: parseInt(file.percentage, 10),
+				status: file.status
+			}
 		}
-	},
-	methods: {
+		const handleClick = () => {
+			if (props.disabled) return
+			inputRef.value.click()
+		}
+		const handleChange = e => {
+			const files = e.target.files
+			if (!files) return
+			uploadFiles(files)
+			inputRef.value.value = null
+		}
+		const handleStart = file => {
+			file.uid = Date.now() + tempIndex.value++
+			const _file = {
+				status: 'active',
+				name: file.name,
+				size: file.size,
+				percentage: 0,
+				uid: file.uid,
+				showProgress: true
+			}
+			fileList.value.push(_file)
+		}
+		const handlePaste = e => {
+			if (props.disabled) return
+			if (props.paste) {
+				uploadFiles(e.clipboardData.files)
+			}
+		}
+		const handleProgress = (e, file) => {
+			const _file = getFile(file)
+			props.onProgress(e, _file, fileList.value)
+			_file.percentage = e.percent || 0
+		}
+		const handleSuccess = (res, file) => {
+			const _file = getFile(file)
+			if (_file) {
+				_file.status = 'success'
+				_file.response = res
+				emitValue()
+				props.onSuccess(res, _file, fileList.value)
+				setTimeout(() => {
+					_file.showProgress = false
+				}, 1000)
+			}
+		}
+		const handleError = (err, response, file) => {
+			const _file = getFile(file)
+			const fileArray = fileList.value
+			_file.status = 'wrong'
+			fileArray.splice(fileArray.indexOf(_file), 1)
+			props.onError(err, response, file)
+		}
+		const handleRemove = file => {
+			const fileArray = fileList.value
+			fileArray.splice(fileArray.indexOf(file), 1)
+			emitValue()
+			props.onRemove(file, fileArray)
+		}
+		const handlePreview = file => {
+			const fileArray = fileList.value
+			fileArray.splice(fileArray.indexOf(file), 1)
+			props.onRemove(file, fileArray)
+		}
+		const handleDownload = file => {
+			const fileArray = fileList.value
+			fileArray.splice(fileArray.indexOf(file), 1)
+			props.onDownload(file, fileArray)
+		}
+		const onDrop = e => {
+			dragOver.value = false
+			if (props.disabled) return
+			uploadFiles(e.dataTransfer.files)
+		}
+		const uploadFiles = files => {
+			let postFiles = Array.prototype.slice.call(files)
+			if (!multiple.value) postFiles = postFiles.slice(0, 1)
+			if (postFiles.length === 0) return
+			postFiles.forEach(file => {
+				upload(file)
+			})
+		}
+		const upload = file => {
+			if (!props.beforeUpload) {
+				return post(file)
+			}
+			const before = props.beforeUpload(file)
+			if (before && before.then) {
+				before.then(processedFile => {
+					if (Object.prototype.toString.call(processedFile) === '[object File]') {
+						post(processedFile)
+					} else {
+						post(file)
+					}
+				})
+			} else if (before !== false) {
+				post(file)
+			}
+		}
+		const post = async file => {
+			let { headers, name, params, action, withCredentials } = props
+			if (validateFile) {
+				let valResult = validateFile(file)
+				if (!valResult) return
+			}
+			handleStart(file)
+			ajax({
+				headers: headers,
+				withCredentials: withCredentials,
+				file: file,
+				data: params,
+				filename: name,
+				action: action,
+				onProgress: e => {
+					handleProgress(e, file)
+				},
+				onSuccess: res => {
+					handleSuccess(res, file)
+				},
+				onError: (err, response) => {
+					handleError(err, response, file)
+				}
+			})
+		}
+		const getFile = file => {
+			const fileArray = fileList.value
+			let target
+			fileArray.every(item => {
+				target = file.uid === item.uid ? item : null
+				return !target
+			})
+			return target
+		}
+		const clearFiles = () => {
+			fileList.value = []
+			emitValue()
+		}
+		const emitValue = () => {
+			let list = getModelValue ? getModelValue() : fileList.value
+			emit('update:modelValue', list)
+		}
+
 		// 上传校验
-		validateFile(file) {
-			let { fileList, action, fileFormat, maxSize } = this
+		const validateFile = file => {
+			let { action, maxSize } = props
 			// check format
-			if (fileFormat.length) {
+			if (fileFormat.value.length) {
 				const _file_format = file.name.split('.').pop().toLocaleLowerCase()
-				const checked = fileFormat.some(item => item.toLocaleLowerCase() === _file_format)
+				const checked = fileFormat.value.some(item => item.toLocaleLowerCase() === _file_format)
 				if (!checked) {
-					let errorMsg = `格式不正确，请上传 ${fileFormat.join(' ')} 格式文件`
-					this.onFormatError ? this.onFormatError(file, errorMsg, fileList) : this.msginfo(errorMsg)
+					let errorMsg = `格式不正确，请上传 ${fileFormat.value.join(' ')} 格式文件`
+					props.onFormatError ? props.onFormatError(file, errorMsg, fileList.value) : proxy.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)
+				props.onExceededSize ? props.onExceededSize(file, errorMsg, fileList.value) : proxy.msginfo(errorMsg)
 				return
 			}
 			if (!action) {
-				this.msginfo('上传地址不能为空')
+				proxy.msginfo('上传地址不能为空')
 				return
 			}
 			return true
-		},
+		}
 		// 附件操作点击事件
-		onActionClick(obj, file) {
+		const onActionClick = (obj, file) => {
 			if (obj.code === 'delete') {
-				this.handleRemove(file)
+				handleRemove(file)
 			} else if (obj.code === 'detail') {
-				this.handlePreview(file)
+				handlePreview(file)
 			} else if (obj.code === 'download') {
-				this.handleDownload(file)
+				handleDownload(file)
 			}
-			this.$emit('action', obj)
-		},
+			emit('action', obj)
+		}
 		// 获取双向绑定值
-		getModelValue() {
-			return this.fileList.map(item => {
-				let url = this.$vUtils.get(item, `response.${this.resKey}`)
-				return {
-					name: item.name,
-					url: url
-				}
+		const getModelValue = () => {
+			return fileList.value.map(item => {
+				let url = $vUtils.get(item, `response.${props.resKey}`)
+				return { name: item.name, url: url }
 			})
 		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				fileList.value = value
+			},
+			{
+				immediate: true,
+				deep: true
+			}
+		)
+
+		return {
+			inputRef,
+			fileList,
+			upClass,
+			upStyles,
+			dragOver,
+			multiple,
+			listActions,
+			handleClick,
+			handlePaste,
+			handleChange,
+			progressConfig,
+			onDrop,
+			onActionClick
+		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">

package/packages/components/global-components/sh-water-fall/index.vue

@@ -17,9 +17,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
+export default defineComponent({
 	name: 'ShWaterFall',
-	components: {},
 	props: {
 		id: {
 			type: String,
@@ -66,15 +66,8 @@ export default {
 			type: [String, Number],
 			default: 10
 		}
-	},
-	data() {
-		return {}
-	},
-	computed: {},
-	watch: {},
-	mounted() {},
-	methods: {}
-}
+	}
+})
 </script>
 
 <style lang="scss" scoped>

package/packages/components/index.js

@@ -8,7 +8,7 @@ import ShCorner from './global-components/sh-corner/index.vue'
 import ShCountTo from './global-components/sh-count-to/index.vue'
 import ShDrawer from './global-components/sh-drawer/index.vue'
 import ShEmpty from './global-components/sh-empty/index.vue'
-import ShForm from './global-components/sh-form/index.vue'
+import ShForm from './global-components/sh-form/form.vue'
 import ShHeader from './global-components/sh-header/index.vue'
 import ShIcon from './global-components/sh-icon/index.vue'
 import ShImage from './global-components/sh-image/index.vue'
@@ -19,11 +19,12 @@ import ShNoticebar from './global-components/sh-noticebar/index.vue'
 import ShPoptip from './global-components/sh-poptip/index.vue'
 import ShProgress from './global-components/sh-progress/index.vue'
 import ShPullRefresh from './global-components/sh-pull-refresh/index.vue'
-import ShQuery from './global-components/sh-query/index.vue'
+import ShQuery from './global-components/sh-form/query.vue'
 import ShResult from './global-components/sh-result/index.vue'
 import ShRow from './global-components/sh-row/index.vue'
 import ShSplit from './global-components/sh-split/index.vue'
-import ShTable from './global-components/sh-table/index.vue'
+import ShGrid from './global-components/sh-table/grid.vue'
+import ShTable from './global-components/sh-table/table.vue'
 import ShTabs from './global-components/sh-tabs/index.vue'
 import ShTag from './global-components/sh-tag/index.vue'
 import ShToolbar from './global-components/sh-toolbar/index.vue'
@@ -57,6 +58,7 @@ const components = {
 	ShResult,
 	ShRow,
 	ShSplit,
+	ShGrid,
 	ShTable,
 	ShTabs,
 	ShTag,