sh-view 1.5.2

package/packages/components/global-components/sh-vxe-form/js/methods.js

@@ -0,0 +1,170 @@
+const vxeEvents = {
+	// -------- 表单
+	// 表单提交
+	onFormSubmit(params) {
+		this.$emit('submit', params)
+	},
+	// 表单重置
+	onFormReset(params) {
+		this.initFormItems()
+		this.$vUtils.clear(this.data, null)
+		this.$emit('reset', params)
+	},
+	// 表单项编辑回调
+	async onFormEditClosed(obj, renderbox) {
+		let { property, data } = obj
+		if (this.formRules[property]) {
+			let valerr = await this.formRef().validateField(property)
+			if (!valerr) {
+				this.formRef().clearValidate(property)
+			}
+		}
+		this.$emit('edit-closed', obj, renderbox, this)
+		Object.assign(this.data, data)
+	},
+	// 表单校验不通过
+	onFormSubmitInvalid(params) {
+		this.$emit('submit-invalid', params)
+	},
+	// 表单折叠按钮被手动点击时会触发该事件
+	onFormCollapse(params) {
+		this.$emit('collapse', params)
+	},
+	// 前缀点击事件
+	onPrefixClick(params, render) {
+		this.$emit('prefix-click', params, render)
+	},
+	// 后缀点击事件
+	onSuffixClick(params, render) {
+		this.$emit('suffix-click', params, render)
+	}
+}
+
+const vxeMethods = {
+	// 表单验证方法
+	validate(callback) {
+		return this.formRef().validate(callback)
+	}
+}
+
+const shMethods = {
+	// 初始化
+	initCreated() {
+		this.initFormItems()
+		this.initFormData()
+	},
+	// 初始化表单字段
+	initFormData() {
+		const that = this
+		that.$vUtils.eachTree(that.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)
+			}
+		})
+	},
+	// 初始化表单项
+	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
+		this.initFormData()
+	},
+	// 初始化验证规则
+	initEditRules(rules) {
+		const that = this
+		if (rules && that.$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])))
+				} else {
+					that.formRules[key] = rules[key]
+				}
+			})
+		}
+	},
+	// 获取默认验证信息
+	getDefaultMessage(renderType, title) {
+		let message = ''
+		const selectRenders = ['$vSelect', '$vTree', '$vTime', '$vSwitch', '$vCheckbox', '$vCheckgroup', '$vRadio', '$vRadiogroup', '$vUpload']
+		if (selectRenders.includes(renderType)) {
+			message = '请选择' + title
+		} else {
+			message = '请输入' + title
+		}
+		return message
+	},
+	// 判断为true
+	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)
+			if (ori.children && ori.children.length > 0) {
+				let childrenArr = []
+				that.generateFormItem(ori.children, childrenArr, rules)
+				if (that.isItemTitle) {
+					// 补入标题渲染器
+					let groupTitleRender = Object.assign({}, that.titleConfigDefault, tar, { span: 24, field: '' })
+					delete groupTitleRender.children
+					childrenArr.unshift(groupTitleRender)
+				}
+				tar.children = childrenArr
+				if (!tar.span) tar.span = 24
+				itemArr.push(tar)
+			} else {
+				let renderConfig = {
+					name: ori.renderName || '$vInput',
+					props: Object.assign({}, ori.renderProps || {})
+				}
+				if (that.readonly || that.disabled) {
+					renderConfig.props.disabled = true
+				}
+				tar.itemRender = Object.assign({}, renderConfig, ori.itemRender || {})
+				// 首先提取校验配置
+				if (that.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))) {
+							dataType = 'array'
+						}
+						rules[ori['field']] = [{ required: true, message: that.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)
+				}
+			}
+		})
+	}
+}
+
+export default {
+	...vxeEvents,
+	...vxeMethods,
+	...shMethods
+}

package/packages/components/global-components/sh-vxe-form/js/props.js

@@ -0,0 +1,63 @@
+export default {
+	data: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	loading: {
+		type: Boolean,
+		default: false
+	},
+	readonly: {
+		type: Boolean,
+		default: false
+	},
+	size: {
+		type: String,
+		default: 'medium' //  medium / small / mini
+	},
+	isItemTitle: {
+		type: Boolean,
+		default: false // 分组标题是否渲染
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	collapseStatus: {
+		type: Boolean,
+		default: false
+	},
+	footer: {
+		type: Boolean,
+		default: false
+	},
+	items: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	rules: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	validConfig: {
+		type: Object,
+		default() {
+			return {
+				autoPos: true,
+				showMessage: true
+			}
+		}
+	},
+	formConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	}
+}

package/packages/components/global-components/sh-vxe-form/mixin/defaultData.js

@@ -0,0 +1,33 @@
+export default {
+	data() {
+		return {
+			// 表单默认配置
+			formConfigDefault: {
+				span: 8,
+				align: 'left',
+				titleAlign: 'right',
+				titleWidth: 100,
+				titleColon: true,
+				titleAsterisk: true,
+				titleOverflow: false,
+				className: '',
+				preventSubmit: false
+			},
+			// 表单项默认配置
+			itemConfigDefault: {},
+			// 标题项默认配置
+			titleConfigDefault: {
+				align: 'left',
+				titleAlign: 'left',
+				titleWidth: '100%',
+				titleOverflow: false,
+				itemRender: false,
+				className: 'shFormTitleItem'
+			}
+		}
+	},
+	computed: {},
+	methods: {},
+	created() {},
+	activated() {}
+}

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

@@ -0,0 +1,129 @@
+<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">
+			<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">
+					<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>
+						</div>
+					</Col>
+				</Row>
+			</template>
+		</vxe-list>
+		<template v-if="$slots.footer"><slot name="footer"></slot></template>
+		<vxe-pager v-if="pagerConfig" v-bind="listPagerConfig" @page-change="onPageChange"></vxe-pager>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShList',
+	props: {
+		dataSourse: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		size: {
+			type: String
+		},
+		className: {
+			type: String
+		},
+		itemClassName: {
+			type: String
+		},
+		loading: {
+			type: Boolean
+		},
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		},
+		autoResize: {
+			type: Boolean
+		},
+		syncResize: {
+			type: [Boolean, String, Number]
+		},
+		scrollY: {
+			type: [Boolean, Object],
+			default() {
+				return { enabled: false, gt: 60 }
+			}
+		},
+		pagerConfig: {
+			type: [Object, Boolean],
+			default: false
+		},
+		noDataIcon: {
+			type: String
+		},
+		noDataText: {
+			type: String
+		},
+		grid: {
+			type: Object,
+			default() {
+				return { gutter: 0, span: 24 }
+			}
+		}
+	},
+	emits: ['page-change'],
+	data() {
+		return {
+			pagerConfigDefault: {
+				currentPage: 1,
+				pageSize: 50,
+				total: 0
+			},
+			listPagerConfig: {}
+		}
+	},
+	computed: {},
+	watch: {
+		pagerConfig: {
+			handler(newvalue, oldValue) {
+				this.initPagerConfig()
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		listRef() {
+			return this.$refs.vxeList
+		},
+		// 初始化分页配置
+		initPagerConfig() {
+			this.listPagerConfig = Object.assign({}, this.pagerConfigDefault, this.pagerConfig)
+		},
+		// 分页变化触发
+		onPageChange(data) {
+			let { currentPage, pageSize } = data
+			this.listPagerConfig.currentPage = currentPage
+			this.listPagerConfig.pageSize = pageSize
+			this.$emit('page-change', data)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-list {
+	position: relative;
+	.sh-list-item {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		align-items: center;
+	}
+}
+</style>

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

@@ -0,0 +1,209 @@
+<template>
+	<vxe-modal
+		:id="id"
+		ref="vxeModal"
+		v-model="modalVisible"
+		:title="title"
+		:size="size"
+		:class-name="className"
+		:width="width"
+		:height="height"
+		:type="type"
+		:status="status"
+		:loading="loading"
+		:destroy-on-close="destroyOnClose"
+		:transfer="transfer"
+		:fullscreen="mobile || fullscreen"
+		:show-header="showHeader"
+		:show-zoom="showZoom"
+		:show-close="showClose"
+		:show-footer="showFooter"
+		:resize="resize"
+		:mask="mask"
+		:mask-closable="maskClosable"
+		:esc-closable="escClosable"
+		:position="position"
+		:before-hide-method="beforeHideMethod"
+		@show="onModalShow"
+		@hide="onModalHide"
+		@zoom="onModalZoom"
+		@close="onModalClose"
+		@cancel="onModalClose"
+		@confirm="onModalConfirm">
+		<template v-for="slot in Object.keys($slots)" #[slot]="scope">
+			<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
+			<slot :name="slot" v-bind="scope"></slot>
+		</template>
+		<template #footer>
+			<div class="sh-modal-footer">
+				<div class="sh-modal-footer-left"><slot name="footerLeft"></slot></div>
+				<div class="sh-modal-footer-right">
+					<slot name="footerRightLeft"></slot>
+					<vxe-button v-ripple :content="cancelButtonText" @click="onModalClose"></vxe-button>
+					<vxe-button v-if="!readonly" v-ripple status="theme" :content="confirmButtonText" @click="onModalConfirm"></vxe-button>
+					<slot name="footerRight"></slot>
+				</div>
+			</div>
+		</template>
+	</vxe-modal>
+</template>
+
+<script>
+export default {
+	name: 'ShModal',
+	props: {
+		visible: {
+			type: Boolean
+		},
+		id: {
+			type: String
+		},
+		title: {
+			type: String
+		},
+		size: {
+			type: String
+		},
+		className: {
+			type: String
+		},
+		width: {
+			type: [String, Number],
+			default: '80%'
+		},
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		},
+		type: {
+			type: String,
+			default: 'modal'
+		},
+		status: {
+			type: String
+		},
+		loading: {
+			type: Boolean
+		},
+		destroyOnClose: {
+			type: Boolean,
+			default: true
+		},
+		transfer: {
+			type: Boolean,
+			default: true
+		},
+		fullscreen: {
+			type: Boolean
+		},
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		showZoom: {
+			type: Boolean,
+			default: true
+		},
+		showClose: {
+			type: Boolean,
+			default: true
+		},
+		showFooter: {
+			type: Boolean,
+			default: true
+		},
+		resize: {
+			type: Boolean,
+			default: true
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean
+		},
+		escClosable: {
+			type: Boolean,
+			default: true
+		},
+		position: {
+			type: [String, Object],
+			default: 'center'
+		},
+		beforeHideMethod: {
+			type: Function
+		},
+		readonly: {
+			type: Boolean
+		},
+		confirmButtonText: {
+			type: String,
+			default: '确认'
+		},
+		cancelButtonText: {
+			type: String,
+			default: '取消'
+		}
+	},
+	emits: ['show', 'hide', 'zoom', 'confirm', 'close', 'update:visible'],
+	data() {
+		return {
+			modalVisible: this.visible
+		}
+	},
+	computed: {},
+	watch: {
+		visible() {
+			this.modalVisible = this.visible
+		},
+		modalVisible(nv) {
+			if (!nv) this.onModalClose()
+		}
+	},
+	created() {},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		modalRef() {
+			return this.$refs.vxeModal
+		},
+		// 弹窗显示回调
+		onModalShow() {
+			this.$emit('show')
+		},
+		// 弹窗隐藏回调
+		onModalHide() {
+			this.$emit('hide')
+		},
+		// 弹窗全屏切换回调
+		onModalZoom() {
+			this.$emit('zoom')
+		},
+		// 确认操作
+		onModalConfirm() {
+			this.$emit('confirm')
+		},
+		// 取消操作
+		onModalClose() {
+			this.$emit('close')
+			this.$emit('update:visible', false)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-modal-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	white-space: nowrap;
+	.sh-modal-footer-left {
+	}
+	.sh-modal-footer-right {
+		flex: 1;
+	}
+}
+</style>