sh-view 1.7.5 → 2.0.0

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

@@ -1,57 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-<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

@@ -1,255 +0,0 @@
-<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.vue'
-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>

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

@@ -1,142 +0,0 @@
-<template>
-	<div class="sh-split heightall">
-		<div v-if="loading" class="layout-loader">
-			<div class="loadbox">
-				<div class="loading" :class="`loading${loadingType < 0 || loadingType > 23 ? 2 : loadingType}`"></div>
-				<div v-if="loadingText" class="loadtext">{{ loadingText }}</div>
-			</div>
-		</div>
-		<Split v-model="verticalValue" mode="vertical">
-			<template #top><slot name="head"></slot></template>
-			<template #bottom>
-				<Split v-model="value" :mode="mode" :min="min" :max="max" @on-move-start="onMoveStart" @on-moving="onMoveing" @on-move-end="onMoveEnd">
-					<template #top><slot name="top"></slot></template>
-					<template #bottom><slot name="bottom"></slot></template>
-					<template #left><slot name="left"></slot></template>
-					<template #right
-						><div class="split-right"><slot name="right"></slot></div
-					></template>
-					<template v-if="disabled" #trigger>
-						<Divider class="m-0 heightall" :type="dividerMode">{{ dividerText }}</Divider>
-					</template>
-				</Split>
-			</template>
-			<template v-if="verticalDisabled" #trigger>
-				<Divider v-show="$slots.head" class="m-0" type="horizontal"></Divider>
-			</template>
-		</Split>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShLayout',
-	components: {},
-	props: {
-		split: {
-			type: [Number, String],
-			default: 0.2
-		},
-		mode: {
-			type: String,
-			default: 'horizontal'
-		},
-		min: {
-			type: [Number, String],
-			default: 0
-		},
-		max: {
-			type: [Number, String],
-			default: 0.6
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		dividerText: {
-			type: String,
-			default: ''
-		},
-		loading: {
-			type: Boolean
-		},
-		loadingText: {
-			type: String,
-			default: ''
-		},
-		loadingType: {
-			type: String,
-			default: '2'
-		},
-		verticalSplit: {
-			type: [Number, String],
-			default: '50px'
-		},
-		verticalDisabled: {
-			type: Boolean,
-			default: true
-		}
-	},
-	emits: ['move-start', 'moveing', 'move-end', 'update:modelValue'],
-	data() {
-		return {
-			value: this.split,
-			verticalValue: this.$slots.head ? this.verticalSplit : 0,
-			modeArr: ['horizontal', 'vertical']
-		}
-	},
-	computed: {
-		dividerMode() {
-			return this.modeArr.filter(item => item !== this.mode)
-		}
-	},
-	watch: {},
-	created() {},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
-		// 拖拽开始
-		onMoveStart() {
-			this.$emit('move-start', this.value)
-		},
-		// 拖拽
-		onMoveing() {
-			this.$emit('moveing', this.value)
-		},
-		// 拖拽结束
-		onMoveEnd() {
-			this.$emit('update:modelValue', this.value)
-			this.$emit('move-end', this.value)
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-split {
-	position: relative;
-	.layout-loader {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0, 0, 0, 0.4);
-		transition: opacity 0.65s;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-wrap: wrap;
-		font-size: 15px;
-		color: #fff;
-		z-index: 100;
-	}
-	.split-right {
-		position: absolute;
-		right: 0;
-		left: 5px;
-		top: 0;
-		bottom: 0;
-	}
-}
-</style>

package/packages/components/global-components/sh-upload/components/u-img.vue

@@ -1,63 +0,0 @@
-<template>
-	<img :src="imgsrc" />
-</template>
-
-<script>
-export default {
-	name: 'UImg',
-	props: {
-		src: {
-			type: String
-		},
-		file: {
-			type: Object
-		},
-		baseUrl: {
-			type: String
-		}
-	},
-	data() {
-		return {
-			imgsrc: ''
-		}
-	},
-	watch: {
-		file: {
-			handler: function (val, oldVal) {
-				this.initMounted()
-			},
-			immediate: false,
-			deep: true
-		}
-	},
-	mounted() {
-		this.initMounted()
-	},
-	methods: {
-		// 初始化渲染
-		async initMounted() {
-			if (!this.src) {
-				this.imgsrc = this.file ? await this.getImagePreviewData(this.file) : ''
-			} else {
-				this.imgsrc = this.src.startsWith('http') ? this.src : this.baseUrl || this.$config.baseUrl.pro + this.src
-			}
-		},
-		// 生成预览图片列表
-		async getImagePreviewData(file) {
-			let fileReader = new FileReader()
-			return new Promise((resolve, reject) => {
-				try {
-					fileReader.readAsDataURL(file)
-					fileReader.onload = function (e) {
-						resolve(e.target.result)
-					}
-				} catch (e) {
-					reject(e)
-				}
-			})
-		}
-	}
-}
-</script>
-
-<style scoped></style>

package/packages/components/global-components/sh-upload/components/u-list.vue

@@ -1,100 +0,0 @@
-<template>
-	<template v-if="uploadList.length > 0">
-		<div v-for="(item, index) in uploadList" :key="index" class="sh-upload-list" :style="upStyles" :class="upClass">
-			<div v-if="listType === 'card'" class="list-file-card">
-				<u-img v-if="type === 'img'" :src="item.url" :file="item"></u-img>
-				<div v-else class="file-title">{{ item.name }}</div>
-				<div class="list-file-cover">
-					<sh-icon v-if="preview" type="ios-eye-outline" title="查看文件" size="18" @click="handleFilePreviewView(item)" />
-					<sh-icon v-if="!disabled" type="ios-trash-outline" title="删除文件" size="18" @click="handleFileRemove(item)" />
-				</div>
-			</div>
-			<div v-else class="list-file-item">
-				<div class="file-title">{{ item.name }}</div>
-				<div class="file-action">
-					<span v-if="preview" class="file-action-item"><sh-icon type="ios-eye-outline" title="查看文件" size="18" @click="handleFilePreviewView(item)" /></span>
-					<span v-if="!disabled" class="file-action-item"><sh-icon type="ios-trash-outline" title="删除文件" size="18" @click="handleFileRemove(item)" /></span>
-				</div>
-			</div>
-		</div>
-	</template>
-	<sh-modal v-if="previewModal" v-model="previewModal" title="预览查看" height="100%" readonly @close="handleFilePreviewCancel">
-		<template v-if="type === 'file'">
-			<sh-preview :url="previewFile.url"></sh-preview>
-		</template>
-		<template v-else-if="isFormData && type === 'img'">
-			<u-img :src="previewFile && previewFile.url" :file="previewFile" style="max-width: 100%; margin: auto; display: block"></u-img>
-		</template>
-	</sh-modal>
-</template>
-
-<script>
-import UImg from './u-img.vue'
-export default {
-	name: 'UList',
-	components: {
-		UImg
-	},
-	props: {
-		uploadList: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		type: {
-			type: String,
-			default: 'img' // file  上传图片还是文件
-		},
-		listType: {
-			type: String,
-			default: 'list' // list  附件列表展示类型
-		},
-		isFormData: Boolean,
-		disabled: Boolean,
-		preview: Boolean,
-		upStyles: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		upClass: {
-			type: [Array, Object],
-			default() {
-				return {}
-			}
-		}
-	},
-	emits: ['delete'],
-	data() {
-		return {
-			previewFile: null,
-			previewModal: false
-		}
-	},
-	methods: {
-		// 文件预览
-		handleFilePreviewView(obj) {
-			if (this.isFormData || this.type === 'file') {
-				this.previewFile = obj
-				this.previewModal = true
-			} else {
-				this.$ImagePreview.show({
-					previewList: [obj.url]
-				})
-			}
-		},
-		// 文件预览取消
-		handleFilePreviewCancel() {
-			this.previewModal = false
-		},
-		// 文件删除
-		handleFileRemove(data) {
-			this.$emit('delete', data)
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss"></style>