sh-view 1.7.5 → 1.7.6

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-vxe-form/js/methods.js

@@ -51,38 +51,34 @@ const shMethods = {
 	// 初始化
 	initCreated() {
 		this.initFormItems()
-		this.initFormData()
 	},
 	// 初始化表单字段
 	initFormData() {
-		const that = this
-		that.$vUtils.eachTree(that.items, item => {
+		const { items, data, $vUtils } = this
+		$vUtils.eachTree(items, item => {
 			let renderProps = item.renderProps || item.itemRender?.props || {}
-			if (!that.$vUtils.isNone(renderProps?.defaultValue) && that.$vUtils.isNone(that.$vUtils.get(that.data, item.field))) {
-				that.$vUtils.set(that.data, item.field, renderProps.defaultValue || null)
+			if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(data, item.field))) {
+				$vUtils.set(data, item.field, renderProps.defaultValue)
 			}
 		})
 	},
 	// 初始化表单项
 	initFormItems(items) {
-		const that = this
-		let originItems = items || that.items
-		let formItemsArr = [] // 表单项
-		let rules = {} // 校验规则
-		that.generateFormItem(originItems, formItemsArr, rules)
-		that.initEditRules(rules)
-		that.formItems = formItemsArr
+		let originItems = items || this.items
+		let { formItemsArr, rules } = this.generateFormItem(originItems)
+		this.initEditRules(rules)
+		this.formItems = formItemsArr
 		this.initFormData()
 	},
 	// 初始化验证规则
 	initEditRules(rules) {
-		const that = this
-		if (rules && that.$vUtils.isPlainObject(rules)) {
+		const { formRules, $vUtils } = this
+		if (rules && $vUtils.isPlainObject(rules)) {
 			Object.keys(rules).forEach(key => {
-				if (that.formRules[key]) {
-					that.formRules[key] = Array.from(new Set(that.formRules[key].concat(rules[key])))
+				if (formRules[key]) {
+					formRules[key] = Array.from(new Set(formRules[key].concat(rules[key])))
 				} else {
-					that.formRules[key] = rules[key]
+					formRules[key] = rules[key]
 				}
 			})
 		}
@@ -102,64 +98,55 @@ const shMethods = {
 	isTrue(value) {
 		return String(value) === '1' || String(value).toLowerCase() === 'true'
 	},
-	// 生成全表头
-	generateColumnsAll(columns, resultColumns = []) {
-		columns.forEach((column, index) => {
-			if (column.children && Array.isArray(column.children) && column.children.length) {
-				this.generateColumnsAll(column.children, resultColumns)
-			} else {
-				resultColumns.push(column)
-			}
-		})
-		return resultColumns
-	},
 	// 自动生成表单渲染项
-	generateFormItem(formItems = [], itemArr = [], rules = {}) {
-		const that = this
-		formItems.forEach(ori => {
-			let tar = Object.assign({}, that.itemConfigDefault, ori)
+	generateFormItem(items = []) {
+		const { itemConfigDefault, isItemTitle, titleConfigDefault, readonly, disabled, isTrue, getDefaultMessage, $vUtils } = this
+		let formItemsArr = []
+		let rules = {}
+		$vUtils.eachTree(items, ori => {
+			let tar = Object.assign({}, itemConfigDefault, ori)
 			if (ori.children && ori.children.length > 0) {
 				let childrenArr = []
-				that.generateFormItem(ori.children, childrenArr, rules)
-				if (that.isItemTitle) {
+				if (isItemTitle) {
 					// 补入标题渲染器
-					let groupTitleRender = Object.assign({}, that.titleConfigDefault, tar, { span: 24, field: '' })
+					let groupTitleRender = Object.assign({}, titleConfigDefault, tar, { span: 24, field: '' })
 					delete groupTitleRender.children
 					childrenArr.unshift(groupTitleRender)
 				}
 				tar.children = childrenArr
 				if (!tar.span) tar.span = 24
-				itemArr.push(tar)
+				formItemsArr.push(tar)
 			} else {
 				let renderConfig = {
 					name: ori.renderName || '$vInput',
 					props: Object.assign({}, ori.renderProps || {})
 				}
-				if (that.readonly || that.disabled) {
+				if (readonly || disabled) {
 					renderConfig.props.disabled = true
 				}
 				tar.itemRender = Object.assign({}, renderConfig, ori.itemRender || {})
 				// 首先提取校验配置
-				if (that.isTrue(ori['renderRequire'])) {
+				if (isTrue(ori['renderRequire'])) {
 					// 若配置了校验参数则走校验参数，没配置则给默认校验条件
 					if (ori['requireProps'] && Array.isArray(ori['requireProps']) && ori['requireProps'].length > 0) {
 						rules[ori['field']] = ori['requireProps']
 					} else {
 						let dataType = 'string'
 						let arrayType = ['$vCheckgroup', '$vUpload', '$vTable']
-						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && that.isTrue(renderConfig.props.multiple))) {
+						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && isTrue(renderConfig.props.multiple))) {
 							dataType = 'array'
 						}
-						rules[ori['field']] = [{ required: true, message: that.getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
+						rules[ori['field']] = [{ required: true, message: getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
 					}
 				}
 				// 表单不支持编辑渲染过滤
 				let notRenderName = ['seq', 'checkbox', 'radio', '$vImg', '$vHref', '$vGlobalOption']
 				if (!((ori.renderName && notRenderName.includes(ori.renderName)) || notRenderName.includes(ori.type))) {
-					itemArr.push(tar)
+					formItemsArr.push(tar)
 				}
 			}
 		})
+		return { formItemsArr, rules }
 	}
 }
 

package/packages/components/global-components/sh-vxe-list/index.vue

@@ -1,16 +1,23 @@
 <template>
 	<div class="sh-list">
 		<template v-if="$slots.header"><slot name="header"></slot></template>
-		<vxe-list ref="vxeList" :data="dataSourse" :size="size" :class-name="className" :loading="loading" :height="height" :auto-resize="autoResize" :sync-resize="syncResize" :scroll-y="scrollY">
+		<vxe-list ref="vxeList" v-bind="listConfig">
 			<template #default="{ items }">
 				<sh-empty v-if="items.length === 0 && !loading" :no-data-icon="noDataIcon" :no-data-text="noDataText"></sh-empty>
-				<Row :gutter="grid.gutter">
+				<Row v-if="grid" :gutter="grid.gutter">
 					<Col v-for="(item, itemindex) in items" :key="itemindex" v-bind="grid">
 						<div class="sh-list-item" :class="itemClassName">
-							<slot name="item" :item="item"></slot>
+							<slot name="item" v-bind="item"></slot>
 						</div>
 					</Col>
 				</Row>
+				<template v-else>
+					<template v-for="(item, itemindex) in items" :key="itemindex">
+						<div class="sh-list-item" :class="itemClassName">
+							<slot name="item" v-bind="item"></slot>
+						</div>
+					</template>
+				</template>
 			</template>
 		</vxe-list>
 		<template v-if="$slots.footer"><slot name="footer"></slot></template>
@@ -67,7 +74,7 @@ export default {
 			type: String
 		},
 		grid: {
-			type: Object,
+			type: [Object, Boolean],
 			default() {
 				return { gutter: 0, span: 24 }
 			}
@@ -84,7 +91,20 @@ export default {
 			listPagerConfig: {}
 		}
 	},
-	computed: {},
+	computed: {
+		listConfig() {
+			return {
+				data: this.dataSourse,
+				size: this.size,
+				className: this.className,
+				loading: this.loading,
+				height: this.height,
+				autoResize: this.autoResize,
+				syncResize: this.syncResize,
+				scrollY: this.scrollY
+			}
+		}
+	},
 	watch: {
 		pagerConfig: {
 			handler(newvalue, oldValue) {

package/packages/components/global-components/sh-vxe-query/index.vue

@@ -7,7 +7,7 @@
 		v-bind="queryFormConfig"
 		:items="formItems"
 		:data="data"
-		:rules="rules"
+		:rules="valid ? formRules : {}"
 		:valid-config="validConfig"
 		@submit="onFormSubmit"
 		@reset="onFormReset"
@@ -88,6 +88,9 @@ export default {
 		transformitem: {
 			type: Boolean,
 			default: true
+		},
+		valid: {
+			type: Boolean
 		}
 	},
 	emits: ['submit', 'reset', 'edit-closed', 'submit-invalid', 'collapsed'],
@@ -103,6 +106,8 @@ export default {
 			formOriginItems: [],
 			// 表单渲染项
 			formItems: [],
+			// 表单校验规则
+			formRules: {},
 			// 表格高级搜索默认配置
 			formConfigDefault: {
 				titleWidth: 100,
@@ -138,6 +143,13 @@ export default {
 			},
 			deep: true,
 			immediate: false
+		},
+		rules: {
+			handler(newvalue, oldValue) {
+				this.initEditRules(newvalue)
+			},
+			deep: true,
+			immediate: true
 		}
 	},
 	created() {
@@ -153,54 +165,66 @@ export default {
 		},
 		// 初始化表单字段
 		initFormData() {
-			const that = this
-			let formItems = that.items.filter(item => item.search && item.search !== '0')
-			that.$vUtils.eachTree(formItems, item => {
+			const { items, data, $vUtils } = this
+			let queryItems = items.filter(item => item.search && item.search !== '0')
+			$vUtils.eachTree(queryItems, item => {
 				let renderProps = item.renderProps || item.itemRender?.props || {}
-				if (!that.$vUtils.has(that.data, item.field)) {
-					that.$vUtils.set(that.data, item.field, renderProps.defaultValue || null)
+				if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(data, item.field))) {
+					$vUtils.set(data, item.field, renderProps.defaultValue)
 				}
 			})
 		},
 		// 初始化搜索表单
 		initFormItems() {
-			const that = this
 			let formItemsArr = [] // 表单项
-			let formItems = that.items.filter(item => item.search && item.search !== '0')
+			let formItems = this.items.filter(item => item.search && item.search !== '0')
 			if (this.transformitem) {
-				let { itemsArr, itemsRules } = that.generateFormItem(formItems)
+				let { itemsArr, rules } = this.generateFormItem(formItems)
 				formItemsArr = itemsArr
+				this.initEditRules(rules)
 			} else {
 				formItemsArr = formItems
+				this.initEditRules(this.rules)
 			}
 			formItemsArr.forEach(item => {
 				item.visible = true
 				item.itemRender.props.disabled = false
 			})
-			that.formOriginItems = formItemsArr
-			that.formItems = formItemsArr
-			if (formItemsArr.length > that.globalConfig.formToggleNum && that.globalConfig.formToggle) {
-				that.formToggleBtnShow = true // 显示展开全部按钮
-				that.formBtnCollapsed(false)
+			this.formOriginItems = formItemsArr
+			this.formItems = formItemsArr
+			if (formItemsArr.length > this.globalConfig.formToggleNum && this.globalConfig.formToggle) {
+				this.formToggleBtnShow = true // 显示展开全部按钮
+				this.formBtnCollapsed(false)
 			}
 			this.initFormData()
 		},
+		// 初始化验证规则
+		initEditRules(rules) {
+			const { formRules, $vUtils } = this
+			if (rules && $vUtils.isPlainObject(rules)) {
+				Object.keys(rules).forEach(key => {
+					if (formRules[key]) {
+						formRules[key] = Array.from(new Set(formRules[key].concat(rules[key])))
+					} else {
+						formRules[key] = rules[key]
+					}
+				})
+			}
+		},
 		// 表单展开全部/收起切换事件
 		formBtnCollapsed(value) {
-			const that = this
-			that.formCollapsed = value
-			that.formItems = value ? that.formOriginItems : that.formOriginItems.slice(0, that.globalConfig.formToggleNum)
+			this.formCollapsed = value
+			this.formItems = value ? this.formOriginItems : this.formOriginItems.slice(0, this.globalConfig.formToggleNum)
 			this.$emit('collapsed', value)
 		},
 		// -------- 搜索
 		async onFormSubmit() {
-			let that = this
-			let errMap = await that.queryFormRef().validate()
-			let data = that.data
+			let { data } = this
+			let errMap = await this.queryFormRef().validate()
 			if (!errMap) {
-				that.$emit('submit', data)
+				this.$emit('submit', data)
 			} else {
-				that.onFormSubmitInvalid({ data, errMap })
+				this.onFormSubmitInvalid({ data, errMap })
 			}
 		},
 		// 表单重置
@@ -223,31 +247,31 @@ export default {
 		},
 		// 自动生成表单渲染项
 		generateFormItem(items = []) {
-			const that = this
 			let itemsArr = []
-			let itemsRules = {}
-			that.$vUtils.mapTree(items, ori => {
-				let tar = Object.assign({}, that.itemConfigDefault, ori)
+			let rules = {}
+			const { itemConfigDefault, readonly, disabled, isTrue, getDefaultMessage, $vUtils } = this
+			$vUtils.eachTree(items, ori => {
+				let tar = Object.assign({}, itemConfigDefault, ori)
 				let renderConfig = {
 					name: ori.renderName || '$vInput',
 					props: Object.assign({}, ori.renderProps || {})
 				}
-				if (that.readonly || that.disabled) {
+				if (readonly || disabled) {
 					renderConfig.props.disabled = true
 				}
 				tar.itemRender = Object.assign({}, renderConfig, ori.itemRender || {})
 				// 首先提取校验配置
-				if (that.isTrue(ori['renderRequire'])) {
+				if (isTrue(ori['renderRequire'])) {
 					// 若配置了校验参数则走校验参数，没配置则给默认校验条件
 					if (ori['requireProps'] && Array.isArray(ori['requireProps']) && ori['requireProps'].length > 0) {
-						itemsRules[ori['field']] = ori['requireProps']
+						rules[ori['field']] = ori['requireProps']
 					} else {
 						let dataType = 'string'
 						let arrayType = ['$vCheckgroup', '$vUpload', '$vTable']
-						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && that.isTrue(renderConfig.props.multiple))) {
+						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && isTrue(renderConfig.props.multiple))) {
 							dataType = 'array'
 						}
-						itemsRules[ori['field']] = [{ required: true, message: that.getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
+						rules[ori['field']] = [{ required: true, message: getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
 					}
 				}
 				// 表单不支持编辑渲染过滤
@@ -256,7 +280,7 @@ export default {
 					itemsArr.push(tar)
 				}
 			})
-			return { itemsArr, itemsRules }
+			return { itemsArr, rules }
 		}
 	}
 }