sh-view 1.5.2

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

@@ -0,0 +1,269 @@
+<template>
+	<div class="sh-page-header" :style="styles" :type="type" :size="size" :class="classes">
+		<sh-loading :loading="loading" />
+		<div class="sh-page-header-heading">
+			<div class="sh-page-header-heading-left">
+				<div v-if="showback" class="sh-page-header-back">
+					<div class="sh-page-header-back-button" @click="handleBack"><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' }">
+					<slot name="title">{{ title }}</slot>
+				</span>
+				<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>
+			</div>
+			<div class="sh-page-header-heading-right">
+				<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 }">
+			<slot></slot>
+		</div>
+		<slot name="body"></slot>
+		<div v-if="$slots.footer" class="sh-page-header-footer"><slot name="footer"></slot></div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShHeader',
+	components: {},
+	props: {
+		size: {
+			type: String,
+			default: 'default'
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		theme: {
+			type: String,
+			default: ''
+		},
+		align: {
+			type: String,
+			default: 'left'
+		},
+		icon: {
+			type: String
+		},
+		iconSize: {
+			type: Number,
+			default: 20
+		},
+		iconColor: {
+			type: String
+		},
+		ghost: {
+			type: Boolean
+		},
+		full: {
+			type: Boolean
+		},
+		border: {
+			type: Boolean
+		},
+		type: {
+			type: String,
+			default: ''
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean
+		},
+		nowrap: {
+			type: Boolean
+		},
+		showback: {
+			type: Boolean
+		}
+	},
+	emits: ['back'],
+	data() {
+		return {}
+	},
+	computed: {
+		styles() {
+			return {
+				backgroundColor: this.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,
+					'sh-page-header-nowrap': this.nowrap
+				}
+			]
+		}
+	},
+	created() {},
+	methods: {
+		handleBack() {
+			this.$emit('back')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-page-header {
+	display: block;
+	box-sizing: border-box;
+	border-radius: 2px;
+	line-height: 1.5;
+	position: relative;
+	padding: 0.5rem 1rem;
+	background-color: var(--body-background);
+	&.sh-page-header-full {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	&.sh-page-header-dark {
+		color: #fff;
+		background: #333;
+	}
+	&.sh-page-header-primary {
+		background-color: var(--theme-color);
+		color: #fff;
+	}
+	&.sh-page-header-success {
+		background-color: var(--success-color);
+		color: #fff;
+	}
+	&.sh-page-header-warning {
+		background-color: var(--warning-color);
+		color: #fff;
+	}
+	&.sh-page-header-error {
+		background-color: var(--error-color);
+		color: #fff;
+	}
+	&.sh-page-header-info {
+		background-color: var(--info-color);
+		color: #fff;
+	}
+	&.sh-page-header-ghost {
+		background-color: transparent;
+	}
+	&.sh-page-header-border {
+		border: 1px solid var(--border-color);
+	}
+	&.sh-page-header-nowrap {
+		.sh-page-header-heading-title {
+			white-space: nowrap;
+		}
+	}
+	&[type='border'] {
+		& > .sh-page-header-heading {
+			padding: 1px 0 1px 10px;
+			border-left: 5px solid var(--theme-color) !important;
+		}
+	}
+	&[size='large'] {
+		.sh-page-header-heading-title {
+			font-size: 1.4285rem;
+		}
+	}
+	&[size='default'] {
+		.sh-page-header-heading-title {
+			font-size: 1.2857rem;
+		}
+	}
+	&[size='small'] {
+		.sh-page-header-heading-title {
+			font-size: 1rem;
+		}
+	}
+	&[size='mini'] {
+		.sh-page-header-heading-title {
+			font-size: 0.8571rem;
+		}
+	}
+	.sh-page-header-heading {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.sh-page-header-heading-left {
+			flex: 1;
+			display: inline-flex;
+			justify-content: flex-start;
+			align-items: center;
+			.sh-page-header-back {
+				font-size: 1.2rem;
+				line-height: 1;
+				margin-right: 0.5rem;
+				.sh-page-header-back-button {
+					color: inherit;
+					text-decoration: none;
+					outline: none;
+					transition: color 0.3s;
+					cursor: pointer;
+					&:hover {
+						opacity: 0.85;
+					}
+				}
+			}
+			.sh-page-header-heading-title {
+				display: block;
+				margin-right: 0.5rem;
+				font-weight: 600;
+			}
+			i + .sh-page-header-heading-title {
+				margin-left: 0.5rem;
+			}
+			.sh-page-header-heading-sub-title {
+				margin-right: 0.5rem;
+				color: rgba(0, 0, 0, 0.45);
+			}
+			.sh-page-header-heading-tags {
+			}
+		}
+		.sh-page-header-heading-right {
+			.sh-page-header-heading-extra {
+			}
+		}
+	}
+	.sh-page-header-content {
+		margin-top: 10px;
+		&.no-padding {
+			padding-top: 0;
+		}
+	}
+	.sh-page-header-footer {
+		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/icons.vue

@@ -0,0 +1,32 @@
+<template>
+	<i :class="`iconfont ${type}`" :style="styles"></i>
+</template>
+
+<script>
+export default {
+	name: 'IconfontIcons',
+	props: {
+		type: {
+			type: String,
+			required: true
+		},
+		color: {
+			type: String
+		},
+		size: {
+			type: [Number, String],
+			default: 16
+		}
+	},
+	computed: {
+		styles() {
+			return {
+				fontSize: `${this.size}px`,
+				color: this.color
+			}
+		}
+	}
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,27 @@
+<template>
+	<component :is="iconType" :type="type" :color="color" :size="size" />
+</template>
+
+<script>
+import Icons from './icons'
+export default {
+	name: 'ShIcon',
+	components: { Icons },
+	props: {
+		type: {
+			type: String,
+			required: true
+		},
+		color: String,
+		size: [Number, String]
+	},
+	computed: {
+		iconType() {
+			return this.type.startsWith('shicon') ? 'Icons' : 'Icon'
+		}
+	},
+	methods: {}
+}
+</script>
+
+<style></style>

package/packages/components/global-components/sh-iv-form/components/iv-group-item.vue

@@ -0,0 +1,57 @@
+<template>
+	<Col :span="column.span || span" v-bind="column.colProps || col">
+		<template v-if="hasChildren(column)">
+			<template v-for="(child, childIndex) in column.children" :key="childIndex">
+				<iv-group-item :column="child" :data="data" :group-renders="groupRenders" :size="size" :span="span" :col="col" />
+			</template>
+		</template>
+		<template v-else>
+			<iv-single-item :column="column" :data="data" :group-renders="groupRenders" :size="size" />
+		</template>
+	</Col>
+</template>
+
+<script>
+import IvSingleItem from './iv-single-item.vue'
+export default {
+	name: 'IvGroupItem',
+	components: {
+		IvSingleItem
+	},
+	props: {
+		data: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		column: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		groupRenders: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		size: {
+			type: String
+		},
+		span: {
+			type: Number,
+			default: 24
+		},
+		col: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	}
+}
+</script>
+
+<style scoped></style>

package/packages/components/global-components/sh-iv-form/components/iv-single-item.vue

@@ -0,0 +1,76 @@
+<template>
+	<FormItem v-bind="column">
+		<component :is="column.renderName || 'Input'" v-bind="componentProps" v-model="formDataIn[column.prop]" @change="onItemChange">
+			<template v-if="isGroup(column.renderName) && column.renderProps.options.length > 0">
+				<template v-for="(option, optionIndex) in column.renderProps.options" :key="optionIndex">
+					<component :is="isGroup(column.renderName)" v-bind="option" />
+				</template>
+			</template>
+		</component>
+	</FormItem>
+</template>
+
+<script>
+export default {
+	name: 'IvSingleItem',
+	inject: ['shivform'],
+	props: {
+		data: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		column: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		groupRenders: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		size: {
+			type: String
+		}
+	},
+	data() {
+		return {
+			formDataIn: this.data
+		}
+	},
+	computed: {
+		componentProps() {
+			let { disabled } = this.shivform || {}
+			let defaultProps = {
+				Input: { placeholder: disabled ? '' : `请输入${this.column.label}` },
+				Select: { placeholder: disabled ? '' : `请选择${this.column.label}` },
+				Switch: { width: 50, inlinePrompt: true, activeValue: 1, inactiveValue: -1, activeText: '是', inactiveText: '否' }
+			}
+			return Object.assign({ class: ['form-item-component'] }, defaultProps[this.column.renderName], this.column.renderProps)
+		}
+	},
+	watch: {
+		data: {
+			handler(newvalue) {
+				this.formDataIn = this.data
+			},
+			deep: true
+		}
+	},
+	created() {},
+	methods: {
+		isGroup(field) {
+			return this.groupRenders[field]
+		},
+		onItemChange($event) {
+			this.shivform.$emit('item-change', $event, this.column)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,255 @@
+<template>
+	<div class="sh-iv-form">
+		<Form
+			ref="ivForm"
+			:model="data"
+			:rules="formRules"
+			:inline="inline"
+			:label-position="labelPosition"
+			:label-width="labelWidth"
+			:show-message="showMessage"
+			:autocomplete="autocomplete"
+			:hide-required-mark="hideRequiredMark"
+			:label-colon="labelColon"
+			:disabled="disabled">
+			<Row v-bind="row">
+				<template v-for="(column, columnIndex) in formItems" :key="columnIndex">
+					<iv-group-item :data="data" :column="column" :group-renders="groupRenders" :size="size" :span="span" :col="colProps" />
+				</template>
+				<Col v-if="handle" :span="span" v-bind="colProps">
+					<FormItem class="form-button-item">
+						<Button :size="size" type="primary" :disabled="disabled" @click="onFormSubmit">{{ btnSubmitText }}</Button>
+						<Button :size="size" type="default" @click="onFormReset">{{ btnResetText }}</Button>
+					</FormItem>
+				</Col>
+			</Row>
+			<slot name="default"></slot>
+			<div v-if="footer" class="sh-common-footer">
+				<div class="sh-common-footer-left">
+					<Space><slot name="formLeft"></slot></Space>
+				</div>
+				<Space class="sh-common-footer-right">
+					<slot name="formRight"></slot>
+					<Button v-ripple type="primary" :size="size" :disabled="disabled" @click="onFormSubmit">{{ btnSubmitText }}</Button>
+					<Button v-ripple type="default" :size="size" @click="onFormReset">{{ btnResetText }}</Button>
+				</Space>
+			</div>
+		</Form>
+	</div>
+</template>
+
+<script>
+import ivGroupItem from './components/iv-group-item'
+export default {
+	name: 'ShIvForm',
+	components: {
+		ivGroupItem
+	},
+	provide() {
+		return {
+			shivform: this
+		}
+	},
+	props: {
+		data: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		items: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		rules: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		inline: {
+			type: Boolean
+		},
+		labelPosition: {
+			type: String
+		},
+		labelWidth: {
+			type: Number,
+			default: 100
+		},
+		showMessage: {
+			type: Boolean,
+			default: true
+		},
+		autocomplete: {
+			type: String
+		},
+		hideRequiredMark: {
+			type: Boolean
+		},
+		labelColon: {
+			type: Boolean
+		},
+		disabled: {
+			type: Boolean
+		},
+		footer: {
+			type: Boolean,
+			default: false
+		},
+		size: {
+			type: String,
+			default: 'default'
+		},
+		row: {
+			type: Object,
+			default() {
+				return {
+					gutter: 20
+				}
+			}
+		},
+		span: {
+			type: Number,
+			default: 24
+		},
+		handle: {
+			type: Boolean,
+			default: false
+		},
+		valid: {
+			type: Boolean,
+			default: true
+		},
+		btnSubmitText: {
+			type: String,
+			default: '确认'
+		},
+		btnResetText: {
+			type: String,
+			default: '取消'
+		}
+	},
+	emits: ['submit', 'reset', 'item-change'],
+	data() {
+		return {
+			formItems: [],
+			formRules: {},
+			groupRenders: {
+				CheckboxGroup: 'Checkbox',
+				RadioGroup: 'Radio',
+				Select: 'Option'
+			},
+			renderRelationship: {
+				Tree: 'TreeSelect',
+				Time: 'DatePicker',
+				TextArea: 'Input',
+				Checkgroup: 'CheckboxGroup',
+				Radiogroup: 'RadioGroup'
+			}
+		}
+	},
+	computed: {
+		colProps() {
+			return this.inline ? { xs: 24, sm: 12, md: 12, lg: 8, xl: 8 } : {}
+		}
+	},
+	watch: {
+		items: {
+			handler() {
+				this.initItemsConfig()
+			},
+			deep: true
+		},
+		rules: {
+			handler(newvalue, oldValue) {
+				this.initEditRules(newvalue)
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {
+		this.initItemsConfig()
+	},
+	mounted() {},
+	methods: {
+		formRef() {
+			return this.$refs.ivForm
+		},
+		async validate() {
+			return this.formRef().validate()
+		},
+		async onFormSubmit() {
+			let validateResult = await this.validate()
+			if (!validateResult) return
+			this.$emit('submit', this.data)
+		},
+		onFormReset() {
+			this.formRef().resetFields()
+			this.$emit('reset', this.data)
+		},
+		// 根据规则重新初始化字段配置
+		initItemsConfig() {
+			const that = this
+			if (that.items && that.items.length > 0) {
+				let formItems = that.$vUtils.clone(that.items, true)
+				let fieldRules = {}
+				that.$vUtils.eachTree(formItems, item => {
+					let renderProps = item.renderProps || {}
+					item.renderName = that.getRenderName(item.renderName, renderProps)
+					item.prop = item.prop || item.field
+					item.label = item.label || item.title
+					delete item.field
+					delete item.title
+					let arrayModelRenders = ['Cascader', 'Transfer', 'TagSelect', 'CheckboxGroup']
+					if (item.prop && !that.$vUtils.has(that.data, item.prop)) {
+						that.$vUtils.set(that.data, item.prop, renderProps.defaultValue || (arrayModelRenders.includes(item.renderName) ? [] : ''))
+					}
+					if (item.prop && +item.renderRequire) {
+						let dataType = 'string'
+						let arrayType = ['CheckboxGroup']
+						if (arrayType.includes(item.renderName) || (item.renderName === 'Select' && renderProps.multiple)) {
+							dataType = 'array'
+						}
+						fieldRules[item.prop] = [{ required: true, message: that.getDefaultMessage(item.renderName, item.label), type: dataType }]
+					}
+				})
+				that.formItems = formItems
+				that.initEditRules(fieldRules)
+			}
+		},
+		// 初始化验证规则
+		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]
+					}
+				})
+			}
+		},
+		// 获取渲染器关系
+		getRenderName(renderName, props) {
+			if (renderName && renderName.startsWith('$v')) {
+				let reRender = renderName.replace('$v', '')
+				let relationRender = this.renderRelationship[reRender]
+				return relationRender || reRender
+			}
+			return renderName || 'Input'
+		},
+		// 获取默认验证信息
+		getDefaultMessage(renderType, title) {
+			const selectRenders = ['Switch', 'Select', 'TreeSelect', 'DatePicker', 'TimePicker', 'Cascader', 'City', 'Rate']
+			return (selectRenders.includes(renderType) ? '请选择' : '请输入') + title
+		}
+	}
+}
+</script>
+
+<style scoped></style>