sh-view 1.7.5 → 2.0.0

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-water-fall/index.vue

@@ -1,87 +1,87 @@
-<template>
-	<div
-		v-masonry
-		class="sh-waterfall"
-		:transition-duration="duration"
-		:item-selector="selector"
-		:origin-left="originLeft"
-		:origin-top="originTop"
-		:fit-width="fitWidth"
-		:stamp="stamp"
-		:gutter="gutter"
-		:horizontal-order="horizontalOrder">
-		<div v-for="(item, itemindex) in dataSourse" :key="itemindex" v-masonry-tile class="sh-list-item" :class="itemClassName">
-			<slot name="item" :item="item" :index="itemindex"></slot>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShWaterFall',
-	components: {},
-	props: {
-		id: {
-			type: String,
-			default: 'containerId'
-		},
-		dataSourse: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		itemClassName: {
-			type: String
-		},
-		duration: {
-			type: String,
-			default: '0.3s'
-		},
-		selector: {
-			type: String,
-			default: '.sh-list-item'
-		},
-		fitWidth: {
-			type: Boolean,
-			default: false
-		},
-		originLeft: {
-			type: Boolean,
-			default: true
-		},
-		originTop: {
-			type: Boolean,
-			default: true
-		},
-		horizontalOrder: {
-			type: Boolean,
-			default: true
-		},
-		stamp: {
-			type: String,
-			default: ''
-		},
-		gutter: {
-			type: [String, Number],
-			default: 10
-		}
-	},
-	data() {
-		return {}
-	},
-	computed: {},
-	watch: {},
-	mounted() {},
-	methods: {}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-waterfall {
-	width: 100%;
-	margin: auto;
-	.sh-list-item {
-	}
-}
-</style>
+<template>
+	<div
+		v-masonry
+		class="sh-waterfall"
+		:transition-duration="duration"
+		:item-selector="selector"
+		:origin-left="originLeft"
+		:origin-top="originTop"
+		:fit-width="fitWidth"
+		:stamp="stamp"
+		:gutter="gutter"
+		:horizontal-order="horizontalOrder">
+		<div v-for="(item, itemindex) in dataSourse" :key="itemindex" v-masonry-tile class="sh-water-item" :class="itemClassName">
+			<slot name="item" :item="item" :index="itemindex"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShWaterFall',
+	components: {},
+	props: {
+		id: {
+			type: String,
+			default: 'containerId'
+		},
+		dataSourse: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		itemClassName: {
+			type: String
+		},
+		duration: {
+			type: String,
+			default: '0.3s'
+		},
+		selector: {
+			type: String,
+			default: '.sh-water-item'
+		},
+		fitWidth: {
+			type: Boolean,
+			default: false
+		},
+		originLeft: {
+			type: Boolean,
+			default: true
+		},
+		originTop: {
+			type: Boolean,
+			default: true
+		},
+		horizontalOrder: {
+			type: Boolean,
+			default: true
+		},
+		stamp: {
+			type: String,
+			default: ''
+		},
+		gutter: {
+			type: [String, Number],
+			default: 10
+		}
+	},
+	data() {
+		return {}
+	},
+	computed: {},
+	watch: {},
+	mounted() {},
+	methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-waterfall {
+	width: 100%;
+	margin: auto;
+	.sh-list-item {
+	}
+}
+</style>

package/packages/components/index.js

@@ -1,59 +1,85 @@
-// 全局公共封装组件
-import ShCard from './global-components/sh-card/index.vue'
-import ShCodeEditor from './global-components/sh-code-editor/index.vue'
-import ShCorner from './global-components/sh-corner/index.vue'
-import ShCountTo from './global-components/sh-count-to/index.vue'
-import ShEmpty from './global-components/sh-empty/index.vue'
-import ShHeader from './global-components/sh-header/index.vue'
-import ShIcon from './global-components/sh-icon/index.vue'
-import ShIvForm from './global-components/sh-iv-form/index.vue'
-import ShLayout from './global-components/sh-layout/index.vue'
-import ShLoading from './global-components/sh-loading/index.vue'
-import ShNoticeBar from './global-components/sh-noticebar/index.vue'
-import ShPullRefresh from './global-components/sh-pull-refresh/index.vue'
-import ShResult from './global-components/sh-result/index.vue'
-import ShUpload from './global-components/sh-upload/index.vue'
-import ShForm from './global-components/sh-vxe-form/index.vue'
-import ShList from './global-components/sh-vxe-list/index.vue'
-import ShModal from './global-components/sh-vxe-modal/index.vue'
-import ShQuery from './global-components/sh-vxe-query/index.vue'
-import ShTable from './global-components/sh-vxe-table/index.vue'
-import ShToolbar from './global-components/sh-vxe-toolbar/index.vue'
-import ShTree from './global-components/sh-vxe-tree/index.vue'
-import ShWaterFall from './global-components/sh-water-fall/index.vue'
-
-const components = {
-	ShCard,
-	ShCodeEditor,
-	ShCorner,
-	ShCountTo,
-	ShEmpty,
-	ShHeader,
-	ShIcon,
-	ShIvForm,
-	ShLayout,
-	ShLoading,
-	ShNoticeBar,
-	ShPullRefresh,
-	ShResult,
-	ShUpload,
-	ShForm,
-	ShList,
-	ShModal,
-	ShQuery,
-	ShTable,
-	ShToolbar,
-	ShTree,
-	ShWaterFall
-}
-
-const index = {
-	install: function (Vue, { excludeComponents = [] }) {
-		let globalComponentKeys = Object.keys(components).filter(key => !excludeComponents.includes(key))
-		globalComponentKeys.forEach(key => {
-			Vue.component(key, components[key])
-		})
-	}
-}
-
-export default index
+// 全局公共封装组件
+import ShAlert from './global-components/sh-alert/index.vue'
+import ShBadge from './global-components/sh-badge/index.vue'
+import ShCard from './global-components/sh-card/index.vue'
+import ShCodeEditor from './global-components/sh-code-editor/index.vue'
+import ShCol from './global-components/sh-col/index.vue'
+import ShCorner from './global-components/sh-corner/index.vue'
+import ShCountTo from './global-components/sh-count-to/index.vue'
+import ShDate from './global-components/sh-date/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 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'
+import ShList from './global-components/sh-list/index.vue'
+import ShLoading from './global-components/sh-loading/index.vue'
+import ShModal from './global-components/sh-modal/index.vue'
+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 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 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'
+import ShTree from './global-components/sh-tree/index.vue'
+import ShUpload from './global-components/sh-upload/index.vue'
+import ShWaterFall from './global-components/sh-water-fall/index.vue'
+import { VxeButton, VxeInput, VxeTextarea, VxeSelect } from 'vxe-table'
+
+const components = {
+	ShAlert,
+	ShBadge,
+	ShCard,
+	ShCodeEditor,
+	ShCol,
+	ShCorner,
+	ShCountTo,
+	ShDate,
+	ShDrawer,
+	ShEmpty,
+	ShForm,
+	ShHeader,
+	ShIcon,
+	ShImage,
+	ShList,
+	ShLoading,
+	ShModal,
+	ShNoticebar,
+	ShPoptip,
+	ShProgress,
+	ShPullRefresh,
+	ShQuery,
+	ShResult,
+	ShRow,
+	ShSplit,
+	ShTable,
+	ShTabs,
+	ShTag,
+	ShToolbar,
+	ShTree,
+	ShUpload,
+	ShWaterFall,
+
+	ShButton: VxeButton,
+	ShInput: VxeInput,
+	ShTextarea: VxeTextarea,
+	ShSelect: VxeSelect
+}
+
+const index = {
+	install(Vue, { excludeComponents = [] }) {
+		let globalComponentKeys = Object.keys(components).filter(key => !excludeComponents.includes(key))
+		globalComponentKeys.forEach(key => {
+			Vue.component(key, components[key])
+		})
+	}
+}
+
+export default index

package/packages/components/other-components/sh-cron-modal/css/index.scss

@@ -11,7 +11,7 @@
       margin-top: 5px;
       display: flex;
       align-items: center;
-      font-size: var(--font-size-base);
+      font-size: var(--vxe-font-size);
       .choice{
         padding: 5px 8px;
         margin-right: 10px;
@@ -37,7 +37,7 @@
   }
   .cron-title{
     font-weight: bold;
-    border-left: 3px solid var(--theme-color);
+    border-left: 3px solid var(--vxe-primary-color);
     padding: 0 5px;
     box-sizing: border-box;
     margin: 10px 0;