sh-view 2.8.1 → 2.8.2

package/packages/components/sh-form/js/useForm.js

@@ -1,229 +1,229 @@
-import { computed, onBeforeMount, ref, watch } from 'vue'
-import { getFieldsRules } from '../../sh-table/js/tableMethods'
-
-// 表单默认配置
-const formConfigDefault = {
-	span: 6,
-	align: 'left',
-	titleAlign: 'right',
-	titleWidth: 100,
-	titleColon: true,
-	titleAsterisk: true,
-	titleOverflow: true,
-	customLayout: false,
-	preventSubmit: false
-}
-// 标题项默认配置
-const titleConfigDefault = {
-	align: 'left',
-	titleAlign: 'left',
-	titleWidth: '100%',
-	titleOverflow: false,
-	className: 'shFormTitleItem'
-}
-
-export default function (props, context, proxy, isForm) {
-	const { $vUtils } = proxy
-	const { emit, slots } = context
-
-	const formRef = ref()
-	const renderKey = ref(1)
-	const formCollapsed = ref(false) // 表单展开状态
-	const formToggleBtnShow = ref(false) // 是否渲染表单展开全部按钮
-	const formOriginItems = ref([]) // 表单初始项
-	const formItems = ref([])
-	const formRules = ref({})
-
-	const formBindConfig = computed(() => {
-		return Object.assign({ size: isForm ? 'medium' : 'small' }, formConfigDefault, props.formConfig, {
-			items: formItems.value,
-			data: props.data,
-			rules: props.valid ? formRules.value : {},
-			validConfig: props.validConfig
-		})
-	})
-
-	// 重新渲染表单
-	const refreshRender = () => {
-		renderKey.value++
-	}
-	// 表单提交
-	const onFormSubmit = async params => {
-		let errMap = await formRef.value.validate()
-		if (props.valid && errMap) {
-			return
-		}
-		emit('submit', params)
-	}
-	// 表单重置
-	const onFormReset = params => {
-		$vUtils.clear(props.data)
-		refreshRender()
-		emit('reset', params)
-	}
-	// 表单项编辑回调
-	const onFormEditClosed = async params => {
-		emit('edit-closed', params)
-		Object.assign(props.data, params.data)
-	}
-	// 表单校验不通过
-	const onFormSubmitInvalid = params => {
-		emit('submit-invalid', params)
-	}
-	// 表单折叠按钮被手动点击时会触发该事件
-	const onFormCollapse = params => {
-		emit('collapse', params)
-	}
-	// 前缀点击事件
-	const onPrefixClick = params => {
-		emit('prefix-click', params)
-	}
-	// 后缀点击事件
-	const onSuffixClick = params => {
-		emit('suffix-click', params)
-	}
-	// 表单验证方法
-	const validate = callback => {
-		return formRef.value.validate(callback)
-	}
-	// 初始化表单字段
-	const initFormData = () => {
-		let initItems = isForm ? props.items : props.items.filter(item => item.search && item.search !== '0')
-		$vUtils.eachTree(initItems, item => {
-			let renderProps = item.renderProps || item.itemRender?.props || {}
-			if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(props.data, item.field))) {
-				$vUtils.set(props.data, item.field, renderProps.defaultValue)
-			}
-		})
-	}
-	// 初始化表单项
-	const initFormItems = () => {
-		let rules = getFieldsRules(props.items)
-		initEditRules(rules)
-
-		let formItemsArr = props.items
-		if (props.transformitem) {
-			let { groupItemsArr, flatItemsArr } = generateFormItem(formItemsArr)
-			// 表单支持分组 搜索组件不需要分组
-			formItemsArr = isForm ? groupItemsArr : flatItemsArr
-		}
-		if (!isForm) {
-			formItemsArr = formItemsArr.filter(item => item.search && !['0', 'false'].includes(item.search))
-			formItemsArr.forEach(item => {
-				item.visible = true
-				item.itemRender.props.disabled = false
-				item.slots = undefined
-			})
-		}
-		formOriginItems.value = $vUtils.clone(formItemsArr, true)
-		formItems.value = formItemsArr
-		if (!isForm && formItemsArr.length > props.globalConfig.formToggleNum && props.globalConfig.formToggle) {
-			formToggleBtnShow.value = true // 显示展开全部按钮
-			formBtnCollapsed(false)
-		} else if (!formItems.value.length) {
-			// tag: vxe-form在 item监听时数据length为0时没有刷新视图补充
-			refreshRender()
-		}
-		initFormData()
-	}
-	// 初始化验证规则
-	const initEditRules = rules => {
-		if (rules && $vUtils.isPlainObject(rules)) {
-			Object.keys(rules).forEach(key => {
-				if (formRules.value[key]) {
-					formRules.value[key] = Array.from(new Set(formRules.value[key].concat(rules[key])))
-				} else {
-					formRules.value[key] = rules[key]
-				}
-			})
-		}
-	}
-	// 表单展开全部/收起切换事件
-	const formBtnCollapsed = (value, isEmit) => {
-		formCollapsed.value = value
-		formItems.value = value ? formOriginItems.value : formOriginItems.value.slice(0, props.globalConfig.formToggleNum)
-		if (isEmit) emit('collapsed', value)
-	}
-	// 自动生成表单渲染项
-	const generateFormItem = (items = []) => {
-		const { isItemTitle, readonly, disabled } = props
-		// 表单不支持编辑渲染过滤
-		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 flatItemsArr = []
-		let groupItemsArr = $vUtils.mapTree(renderItems, ori => {
-			let tar = Object.assign({}, 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 || {})
-			flatItemsArr.push(tar)
-			return tar
-		})
-		return { groupItemsArr, flatItemsArr }
-	}
-
-	watch(
-		() => props.readonly,
-		() => {
-			initFormItems()
-		}
-	)
-	watch(
-		() => props.data,
-		() => {
-			initFormData()
-		},
-		{
-			immediate: true
-		}
-	)
-	watch(
-		() => props.items,
-		nv => {
-			initFormItems()
-		},
-		{
-			deep: true,
-			immediate: true
-		}
-	)
-	watch(
-		() => props.rules,
-		nv => {
-			initEditRules(nv)
-		},
-		{
-			deep: true,
-			immediate: true
-		}
-	)
-
-	onBeforeMount(() => {})
-
-	return {
-		slots,
-		formRef,
-		renderKey,
-		formBindConfig,
-		formCollapsed,
-		formToggleBtnShow,
-		validate,
-		formBtnCollapsed,
-		onFormSubmit,
-		onFormSubmitInvalid,
-		onFormReset,
-		onFormCollapse,
-		onFormEditClosed,
-		onPrefixClick,
-		onSuffixClick
-	}
-}
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import { getFieldsRules } from '../../sh-table/js/tableMethods'
+
+// 表单默认配置
+const formConfigDefault = {
+	span: 6,
+	align: 'left',
+	titleAlign: 'right',
+	titleWidth: 100,
+	titleColon: true,
+	titleAsterisk: true,
+	titleOverflow: true,
+	customLayout: false,
+	preventSubmit: false
+}
+// 标题项默认配置
+const titleConfigDefault = {
+	align: 'left',
+	titleAlign: 'left',
+	titleWidth: '100%',
+	titleOverflow: false,
+	className: 'shFormTitleItem'
+}
+
+export default function (props, context, proxy, isForm) {
+	const { $vUtils } = proxy
+	const { emit, slots } = context
+
+	const formRef = ref()
+	const renderKey = ref(1)
+	const formCollapsed = ref(false) // 表单展开状态
+	const formToggleBtnShow = ref(false) // 是否渲染表单展开全部按钮
+	const formOriginItems = ref([]) // 表单初始项
+	const formItems = ref([])
+	const formRules = ref({})
+
+	const formBindConfig = computed(() => {
+		return Object.assign({ size: isForm ? 'medium' : 'small' }, formConfigDefault, props.formConfig, {
+			items: formItems.value,
+			data: props.data,
+			rules: props.valid ? formRules.value : {},
+			validConfig: props.validConfig
+		})
+	})
+
+	// 重新渲染表单
+	const refreshRender = () => {
+		renderKey.value++
+	}
+	// 表单提交
+	const onFormSubmit = async params => {
+		let errMap = await formRef.value.validate()
+		if (props.valid && errMap) {
+			return
+		}
+		emit('submit', params)
+	}
+	// 表单重置
+	const onFormReset = params => {
+		$vUtils.clear(props.data)
+		refreshRender()
+		emit('reset', params)
+	}
+	// 表单项编辑回调
+	const onFormEditClosed = async params => {
+		emit('edit-closed', params)
+		Object.assign(props.data, params.data)
+	}
+	// 表单校验不通过
+	const onFormSubmitInvalid = params => {
+		emit('submit-invalid', params)
+	}
+	// 表单折叠按钮被手动点击时会触发该事件
+	const onFormCollapse = params => {
+		emit('collapse', params)
+	}
+	// 前缀点击事件
+	const onPrefixClick = params => {
+		emit('prefix-click', params)
+	}
+	// 后缀点击事件
+	const onSuffixClick = params => {
+		emit('suffix-click', params)
+	}
+	// 表单验证方法
+	const validate = callback => {
+		return formRef.value.validate(callback)
+	}
+	// 初始化表单字段
+	const initFormData = () => {
+		let initItems = isForm ? props.items : props.items.filter(item => item.search && item.search !== '0')
+		$vUtils.eachTree(initItems, item => {
+			let renderProps = item.renderProps || item.itemRender?.props || {}
+			if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(props.data, item.field))) {
+				$vUtils.set(props.data, item.field, renderProps.defaultValue)
+			}
+		})
+	}
+	// 初始化表单项
+	const initFormItems = () => {
+		let rules = getFieldsRules(props.items)
+		initEditRules(rules)
+
+		let formItemsArr = props.items
+		if (props.transformitem) {
+			let { groupItemsArr, flatItemsArr } = generateFormItem(formItemsArr)
+			// 表单支持分组 搜索组件不需要分组
+			formItemsArr = isForm ? groupItemsArr : flatItemsArr
+		}
+		if (!isForm) {
+			formItemsArr = formItemsArr.filter(item => item.search && !['0', 'false'].includes(item.search))
+			formItemsArr.forEach(item => {
+				item.visible = true
+				item.itemRender.props.disabled = false
+				item.slots = undefined
+			})
+		}
+		formOriginItems.value = $vUtils.clone(formItemsArr, true)
+		formItems.value = formItemsArr
+		if (!isForm && formItemsArr.length > props.globalConfig.formToggleNum && props.globalConfig.formToggle) {
+			formToggleBtnShow.value = true // 显示展开全部按钮
+			formBtnCollapsed(false)
+		} else if (!formItems.value.length) {
+			// tag: vxe-form在 item监听时数据length为0时没有刷新视图补充
+			refreshRender()
+		}
+		initFormData()
+	}
+	// 初始化验证规则
+	const initEditRules = rules => {
+		if (rules && $vUtils.isPlainObject(rules)) {
+			Object.keys(rules).forEach(key => {
+				if (formRules.value[key]) {
+					formRules.value[key] = Array.from(new Set(formRules.value[key].concat(rules[key])))
+				} else {
+					formRules.value[key] = rules[key]
+				}
+			})
+		}
+	}
+	// 表单展开全部/收起切换事件
+	const formBtnCollapsed = (value, isEmit) => {
+		formCollapsed.value = value
+		formItems.value = value ? formOriginItems.value : formOriginItems.value.slice(0, props.globalConfig.formToggleNum)
+		if (isEmit) emit('collapsed', value)
+	}
+	// 自动生成表单渲染项
+	const generateFormItem = (items = []) => {
+		const { isItemTitle, readonly, disabled } = props
+		// 表单不支持编辑渲染过滤
+		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 flatItemsArr = []
+		let groupItemsArr = $vUtils.mapTree(renderItems, ori => {
+			let tar = Object.assign({}, 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 || {})
+			flatItemsArr.push(tar)
+			return tar
+		})
+		return { groupItemsArr, flatItemsArr }
+	}
+
+	watch(
+		() => props.readonly,
+		() => {
+			initFormItems()
+		}
+	)
+	watch(
+		() => props.data,
+		() => {
+			initFormData()
+		},
+		{
+			immediate: true
+		}
+	)
+	watch(
+		() => props.items,
+		nv => {
+			initFormItems()
+		},
+		{
+			deep: true,
+			immediate: true
+		}
+	)
+	watch(
+		() => props.rules,
+		nv => {
+			initEditRules(nv)
+		},
+		{
+			deep: true,
+			immediate: true
+		}
+	)
+
+	onBeforeMount(() => {})
+
+	return {
+		slots,
+		formRef,
+		renderKey,
+		formBindConfig,
+		formCollapsed,
+		formToggleBtnShow,
+		validate,
+		formBtnCollapsed,
+		onFormSubmit,
+		onFormSubmitInvalid,
+		onFormReset,
+		onFormCollapse,
+		onFormEditClosed,
+		onPrefixClick,
+		onSuffixClick
+	}
+}