sh-view 1.5.2

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

@@ -0,0 +1,418 @@
+<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'
+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>

package/packages/components/global-components/sh-vxe-form/components/form-item.vue

@@ -0,0 +1,25 @@
+<template>
+	<vxe-form-gather v-bind="parentItem">
+		<template v-for="(childItem, childItemIndex) in parentItem.children">
+			<formItem v-if="childItem.children" :key="childItemIndex" :parent-item="childItem"></formItem>
+			<vxe-form-item v-else v-bind="childItem" :key="childItemIndex"></vxe-form-item>
+		</template>
+	</vxe-form-gather>
+</template>
+
+<script>
+export default {
+	name: 'FormItem',
+	props: {
+		parentItem: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	created() {}
+}
+</script>
+
+<style scoped></style>

package/packages/components/global-components/sh-vxe-form/css/index.scss

@@ -0,0 +1,55 @@
+.sh-vxe-form{
+    position: relative;
+    &.readonly {
+        .vxe-form{
+            .vxe-input--inner[disabled], .vxe-textarea--inner[disabled]{
+                cursor: auto;
+                color: #333;
+                background-color: #fff;
+                border-color: var(--theme-weak-color);
+            }
+            .vxe-checkbox.is--disabled{
+                cursor: auto;
+                color: #333;
+                & > input + .vxe-checkbox--icon{
+                    background-color: #fff;
+                    border-color: var(--theme-weak-color);
+                }
+                & > input + .vxe-checkbox--icon:before{
+                    border-color: var(--theme-color);
+                }
+                & > input + .vxe-checkbox--icon + .vxe-checkbox--label{
+                    color: #333;
+                }
+            }
+            .vxe-input.is--disabled .vxe-input--date-picker-suffix,
+            .vxe-input.is--disabled .vxe-input--number-suffix,
+            .vxe-input.is--disabled .vxe-input--password-suffix,
+            .vxe-input.is--disabled .vxe-input--search-suffix,
+            .vxe-input.is--disabled .vxe-input--suffix{
+                cursor: auto;
+            }
+        }
+    }
+    .vxe-form{
+        .vxe-form--gather{
+            border: 1px solid var(--border-color);
+        }
+        .vxe-form--item{
+            &.shFormTitleItem{
+                padding: 0.2em 0.8em;
+                border-left: 5px solid var(--theme-color);
+                margin-bottom: 0.5em;
+                .vxe-form--item-inner{
+                    min-height: auto;
+                    .vxe-form--item-title{
+                        max-width: 100%;
+                        .vxe-form--item-title-postfix{
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,115 @@
+<template>
+	<div class="sh-vxe-form" :class="{ readonly: readonly, disabled: disabled }">
+		<vxe-form
+			ref="vxeForm"
+			:key="renderKey"
+			:items="formItems"
+			:data="data"
+			:loading="loading"
+			:size="size"
+			:span="myFormConfig.span"
+			:align="myFormConfig.align"
+			:title-align="myFormConfig.titleAlign"
+			:title-width="myFormConfig.titleWidth"
+			:title-colon="myFormConfig.titleColon"
+			:title-asterisk="myFormConfig.titleAsterisk"
+			:title-overflow="myFormConfig.titleOverflow"
+			:class-name="myFormConfig.className"
+			:custom-layout="myFormConfig.customLayout"
+			:rules="formRules"
+			:prevent-submit="myFormConfig.preventSubmit"
+			:valid-config="validConfig"
+			@submit="onFormSubmit"
+			@submit-invalid="onFormSubmitInvalid"
+			@reset="onFormReset"
+			@collapse="onFormCollapse"
+			@edit-closed="onFormEditClosed"
+			@prefix-click="onPrefixClick"
+			@suffix-click="onSuffixClick">
+			<div v-if="footer" class="sh-common-footer">
+				<div class="sh-common-footer-left">
+					<slot name="formLeft"></slot>
+				</div>
+				<div class="sh-common-footer-right">
+					<slot name="formRight"></slot>
+					<vxe-button v-ripple type="submit" status="theme" :size="size" :disabled="disabled || loading">确认</vxe-button>
+					<vxe-button v-ripple type="reset" :size="size">重置</vxe-button>
+				</div>
+			</div>
+			<template v-for="slot in Object.keys($slots)" #[slot]="scope">
+				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
+				<slot :name="slot" v-bind="scope"></slot>
+			</template>
+		</vxe-form>
+	</div>
+</template>
+
+<script>
+import defaultData from './mixin/defaultData'
+import props from './js/props'
+import methods from './js/methods'
+export default {
+	name: 'ShForm',
+	components: {},
+	mixins: [defaultData],
+	props: {
+		...props
+	},
+	emits: ['submit', 'reset', 'edit-closed', 'submit-invalid', 'collapse', 'prefix-click', 'suffix-click'],
+	data() {
+		return {
+			renderKey: 1,
+			formItems: [],
+			formRules: {}
+		}
+	},
+	computed: {
+		myFormConfig() {
+			let mobileTurnConfig = this.mobile ? { span: '24' } : {}
+			return Object.assign({}, this.formConfigDefault, this.formConfig, mobileTurnConfig)
+		}
+	},
+	watch: {
+		readonly(newvalue, oldValue) {
+			this.initFormItems()
+		},
+		data: {
+			handler(newvalue, oldValue) {
+				this.initFormData()
+			},
+			immediate: true
+		},
+		items: {
+			handler(newvalue, oldValue) {
+				this.initFormItems(newvalue)
+			},
+			deep: true
+		},
+		rules: {
+			handler(newvalue, oldValue) {
+				this.initEditRules(newvalue)
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {
+		this.initCreated()
+	},
+	mounted() {},
+	methods: {
+		formRef() {
+			return this.$refs.vxeForm
+		},
+		// 重新渲染表单
+		refreshRender() {
+			this.renderKey++
+		},
+		...methods
+	}
+}
+</script>
+
+<style lang="scss">
+@import './css/index.scss';
+</style>