sh-view 1.7.5 → 2.0.0

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

@@ -1,115 +1,114 @@
-<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>
+<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="primary" :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() {
+			return Object.assign({}, this.formConfigDefault, this.formConfig)
+		}
+	},
+	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>

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

@@ -0,0 +1,146 @@
+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()
+	},
+	// 初始化表单字段
+	initFormData() {
+		const { items, data, $vUtils } = this
+		$vUtils.eachTree(items, item => {
+			let renderProps = item.renderProps || item.itemRender?.props || {}
+			if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(data, item.field))) {
+				$vUtils.set(data, item.field, renderProps.defaultValue)
+			}
+		})
+	},
+	// 初始化表单项
+	initFormItems(items) {
+		let originItems = items || this.items
+		let { formItemsArr, rules } = this.generateFormItem(originItems)
+		this.initEditRules(rules)
+		this.formItems = formItemsArr
+		this.initFormData()
+	},
+	// 初始化验证规则
+	initEditRules(rules) {
+		const { $vUtils } = this
+		if (rules && $vUtils.isPlainObject(rules)) {
+			Object.keys(rules).forEach(key => {
+				if (this.formRules[key]) {
+					this.formRules[key] = Array.from(new Set(this.formRules[key].concat(rules[key])))
+				} else {
+					this.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'
+	},
+	// 自动生成表单渲染项
+	generateFormItem(items = []) {
+		const { itemConfigDefault, isItemTitle, titleConfigDefault, readonly, disabled, isTrue, getDefaultMessage, $vUtils } = this
+		let rules = {}
+		// 表单不支持编辑渲染过滤
+		let notRenderName = ['seq', 'checkbox', 'radio', '$vImg', '$vHref', '$vGlobalOption']
+		let renderItems = $vUtils.searchTree(items, item => !((item.renderName && notRenderName.includes(item.renderName)) || notRenderName.includes(item.type)))
+		let formItemsArr = $vUtils.mapTree(renderItems, ori => {
+			let tar = Object.assign({}, itemConfigDefault, ori)
+			if (ori.children && ori.children.length > 0) {
+				if (isItemTitle) Object.assign(tar, titleConfigDefault)
+				return tar
+			}
+			let renderConfig = {
+				name: ori.renderName || '$vInput',
+				props: Object.assign({}, ori.renderProps || {})
+			}
+			if (readonly || disabled) {
+				renderConfig.props.disabled = true
+			}
+			tar.itemRender = Object.assign({}, renderConfig, ori.itemRender || {})
+			// 首先提取校验配置
+			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') && isTrue(renderConfig.props.multiple))) {
+						dataType = 'array'
+					}
+					rules[ori['field']] = [{ required: true, message: getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
+				}
+			}
+			return tar
+		})
+		return { formItemsArr, rules }
+	}
+}
+
+export default {
+	...vxeEvents,
+	...vxeMethods,
+	...shMethods
+}

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

@@ -1,33 +1,32 @@
-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() {}
-}
+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,
+				className: 'shFormTitleItem'
+			}
+		}
+	},
+	computed: {},
+	methods: {},
+	created() {},
+	activated() {}
+}