sh-view 2.1.0 → 2.2.0

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

@@ -1,63 +1,76 @@
-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 {}
-		}
-	}
-}
+export default {
+	data: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	loading: {
+		type: Boolean,
+		default: false
+	},
+	readonly: {
+		type: Boolean,
+		default: false
+	},
+	size: {
+		type: String //  medium / small / mini
+	},
+	isItemTitle: {
+		type: Boolean,
+		default: false // 分组标题是否渲染
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	items: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	collapseStatus: {
+		type: Boolean,
+		default: false
+	},
+	footer: {
+		type: Boolean,
+		default: false
+	},
+	rules: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	validConfig: {
+		type: Object,
+		default() {
+			return {
+				autoPos: true,
+				showMessage: true
+			}
+		}
+	},
+	formConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	globalConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	transformitem: {
+		type: Boolean,
+		default: true
+	},
+	valid: {
+		type: Boolean,
+		default: true
+	}
+}

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

@@ -0,0 +1,236 @@
+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 => {
+		initFormItems()
+		$vUtils.clear(props.data, null)
+		emit('reset', params)
+	}
+	// 表单项编辑回调
+	const onFormEditClosed = async (obj, renderbox) => {
+		let { property, data } = obj
+		if (props.valid && formRules.value[property]) {
+			let valerr = await formRef.value.validateField(property)
+			if (!valerr) {
+				formRef.value.clearValidate(property)
+			}
+		}
+		emit('edit-closed', obj, renderbox)
+		Object.assign(props.data, data)
+	}
+	// 表单校验不通过
+	const onFormSubmitInvalid = params => {
+		emit('submit-invalid', params)
+	}
+	// 表单折叠按钮被手动点击时会触发该事件
+	const onFormCollapse = params => {
+		emit('collapse', params)
+	}
+	// 前缀点击事件
+	const onPrefixClick = (params, render) => {
+		emit('prefix-click', params, render)
+	}
+	// 后缀点击事件
+	const onSuffixClick = (params, render) => {
+		emit('suffix-click', params, render)
+	}
+	// 表单验证方法
+	const validate = callback => {
+		return formRef.value.validate(callback)
+	}
+	// 初始化
+	const initCreated = () => {
+		initFormItems()
+	}
+	// 初始化表单字段
+	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
+			})
+		}
+		formOriginItems.value = $vUtils.clone(formItemsArr, true)
+		formItems.value = formItemsArr
+		if (!isForm && formItemsArr.length > props.globalConfig.formToggleNum && props.globalConfig.formToggle) {
+			formToggleBtnShow.value = true // 显示展开全部按钮
+			formBtnCollapsed(false)
+		}
+		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
+		}
+	)
+	watch(
+		() => props.rules,
+		nv => {
+			initEditRules(nv)
+		},
+		{
+			deep: true,
+			immediate: true
+		}
+	)
+
+	onBeforeMount(() => {
+		initCreated()
+	})
+
+	return {
+		slots,
+		formRef,
+		renderKey,
+		formBindConfig,
+		formCollapsed,
+		formToggleBtnShow,
+		formBtnCollapsed,
+		onFormSubmit,
+		onFormSubmitInvalid,
+		onFormReset,
+		onFormCollapse,
+		onFormEditClosed,
+		onPrefixClick,
+		onSuffixClick
+	}
+}

package/packages/components/global-components/sh-form/query.vue

@@ -0,0 +1,70 @@
+<template>
+	<vxe-form
+		ref="formRef"
+		:key="renderKey"
+		class="sh-query"
+		:class="formCollapsed ? 'sh-query-collapsed-open' : 'sh-query-collapsed-close'"
+		v-bind="formBindConfig"
+		@submit="onFormSubmit"
+		@submit-invalid="onFormSubmitInvalid"
+		@reset="onFormReset"
+		@collapse="onFormCollapse"
+		@edit-closed="onFormEditClosed"
+		@prefix-click="onPrefixClick"
+		@suffix-click="onSuffixClick">
+		<div v-if="footer" class="sh-query-buttons">
+			<div class="sh-query-buttons-left"><slot name="footLeft"></slot></div>
+			<div class="sh-query-buttons-right">
+				<slot name="footRight"></slot>
+				<vxe-button v-ripple type="submit" status="primary" :size="size" icon="vxe-icon-search">{{ globalConfig?.submitBtnText || '查询' }}</vxe-button>
+				<vxe-button v-ripple type="reset" :size="size" icon="vxe-icon-repeat">{{ globalConfig?.resetBtnText || '重置' }}</vxe-button>
+				<vxe-button v-if="formToggleBtnShow" v-ripple :size="size" :icon="formCollapsed ? 'vxe-icon-caret-up' : 'vxe-icon-caret-down'" @click="formBtnCollapsed(!formCollapsed, true)">
+					{{ formCollapsed ? '收起' : '展开全部' }}
+				</vxe-button>
+			</div>
+		</div>
+	</vxe-form>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import props from './js/props'
+import useForm from './js/useForm'
+export default defineComponent({
+	name: 'ShQuery',
+	props: props,
+	emits: ['submit', 'reset', 'edit-closed', 'submit-invalid', 'collapse', 'prefix-click', 'suffix-click'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useFormHooks = useForm(props, context, proxy)
+
+		return {
+			...useFormHooks
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-query {
+	width: 100%;
+	background: var(--primary-weak-color);
+	&.sh-query-collapsed-close {
+	}
+	&.sh-query-collapsed-open {
+	}
+	.sh-query-buttons {
+		border-top: 1px solid var(--vxe-table-border-color);
+		padding: 5px;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.sh-query-buttons-left {
+			flex: 1;
+		}
+		.sh-query-buttons-right {
+		}
+	}
+}
+</style>

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

@@ -7,30 +7,30 @@
 					<div class="sh-page-header-back-button" @click="handleBack"><sh-icon :size="iconSize" type="ios-arrow-back" /></div>
 				</div>
 				<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="iconColor"></sh-icon>
-				<span v-if="title || $slots.title" class="sh-page-header-heading-title" :style="{ textAlign: align, flex: align ? '1' : 'auto' }">
+				<span v-if="title || slots.title" class="sh-page-header-heading-title" :style="{ textAlign: align, flex: align ? '1' : 'auto' }">
 					<slot name="title">{{ title }}</slot>
 				</span>
-				<span v-if="subTitle || $slots.subTitle" class="sh-page-header-heading-sub-title">
+				<span v-if="subTitle || slots.subTitle" class="sh-page-header-heading-sub-title">
 					<slot name="subTitle">{{ subTitle }}</slot>
 				</span>
-				<span v-if="$slots.tags" class="sh-page-header-heading-tags"><slot name="tags"></slot></span>
+				<span v-if="slots.tags" class="sh-page-header-heading-tags"><slot name="tags"></slot></span>
 			</div>
 			<div class="sh-page-header-heading-right">
-				<span v-if="$slots.extra" class="sh-page-header-heading-extra"><slot name="extra"></slot></span>
+				<span v-if="slots.extra" class="sh-page-header-heading-extra"><slot name="extra"></slot></span>
 			</div>
 		</div>
-		<div v-if="$slots.default" class="sh-page-header-content" :class="{ 'no-padding': !title && !$slots.title && !subTitle && !$slots.subTitle && !$slots.tags && !$slots.extra }">
+		<div v-if="slots.default" class="sh-page-header-content" :class="{ 'no-padding': !title && !slots.title && !subTitle && !slots.subTitle && !slots.tags && !slots.extra }">
 			<slot></slot>
 		</div>
 		<slot name="body"></slot>
-		<div v-if="$slots.footer" class="sh-page-header-footer"><slot name="footer"></slot></div>
+		<div v-if="slots.footer" class="sh-page-header-footer"><slot name="footer"></slot></div>
 	</div>
 </template>
 
 <script>
-export default {
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
 	name: 'ShHeader',
-	components: {},
 	props: {
 		size: {
 			type: String,
@@ -90,37 +90,38 @@ export default {
 		}
 	},
 	emits: ['back'],
-	data() {
-		return {}
-	},
-	computed: {
-		styles() {
+	setup(props, context) {
+		const { emit, slots } = context
+
+		const styles = computed(() => {
 			return {
-				backgroundColor: this.color
+				backgroundColor: props.color
 			}
-		},
-		classes() {
-			return [
-				{
-					'sh-page-header-ghost': this.ghost,
-					'sh-page-header-full': this.full,
-					'sh-page-header-border': this.border,
-					'has-footer': this.$slots.footer,
-					[`sh-page-header-${this.theme}`]: this.theme,
-					[`${this.type}`]: this.type,
-					[`${this.size}`]: this.size,
-					'sh-page-header-nowrap': this.nowrap
-				}
-			]
+		})
+		const classes = computed(() => {
+			return {
+				'sh-page-header-ghost': props.ghost,
+				'sh-page-header-full': props.full,
+				'sh-page-header-border': props.border,
+				'has-footer': slots.footer,
+				[`sh-page-header-${props.theme}`]: props.theme,
+				[`${props.type}`]: props.type,
+				[`${props.size}`]: props.size,
+				'sh-page-header-nowrap': props.nowrap
+			}
+		})
+
+		const handleBack = () => {
+			emit('back')
 		}
-	},
-	created() {},
-	methods: {
-		handleBack() {
-			this.$emit('back')
+		return {
+			styles,
+			classes,
+			slots,
+			handleBack
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -274,20 +275,4 @@ export default {
 		margin-top: 10px;
 	}
 }
-
-.mobile {
-	.sh-page-header {
-		&.sh-page-header-nowrap {
-			.sh-page-header-heading-title {
-				white-space: normal;
-			}
-		}
-	}
-}
-
-.theme--dark {
-	.sh-page-header {
-		background: transparent;
-	}
-}
 </style>

package/packages/components/global-components/sh-icon/css/index.scss

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: 'Ionicons';
+  src: url("./default/ionicons.woff2") format("woff2"),
+  url("./default/ionicons.woff") format("woff"),
+  url("./default/ionicons.ttf") format("truetype"),
+  url("./default/ionicons.svg") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.sh-icon {
+  display: inline-block;
+  font-family: 'Ionicons';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: -0.125em;
+  text-align: center;
+}
+
+@import "./default/icons";
+
+@font-face {
+  font-family: "iconfont";
+  src: url('./font/iconfont.woff2?t=1661513291946') format('woff2'),
+  url('./font/iconfont.woff?t=1661513291946') format('woff'),
+  url('./font/iconfont.ttf?t=1661513291946') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@import "./font/icons";

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

@@ -1,13 +1,12 @@
 <template>
-	<component :is="iconType" :type="type" :color="color" :size="size" />
+	<i :class="iconClass" :style="iconStyle"></i>
 </template>
 
 <script>
-import iconDefault from './icon-default.vue'
-import iconFont from './icon-font.vue'
-export default {
+import './css/index.scss'
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
 	name: 'ShIcon',
-	components: { iconDefault, iconFont },
 	props: {
 		type: {
 			type: String,
@@ -16,13 +15,27 @@ export default {
 		color: String,
 		size: [Number, String]
 	},
-	computed: {
-		iconType() {
-			return this.type.startsWith('font') ? 'iconFont' : 'iconDefault'
+	setup(props, context) {
+		const iconClass = computed(() => {
+			return {
+				'sh-icon': !props.type.startsWith('font'),
+				iconfont: props.type.startsWith('font'),
+				[`${props.type}`]: true
+			}
+		})
+		const iconStyle = computed(() => {
+			return {
+				fontSize: `${props.size}px`,
+				color: props.color
+			}
+		})
+
+		return {
+			iconClass,
+			iconStyle
 		}
-	},
-	methods: {}
-}
+	}
+})
 </script>
 
 <style></style>