sh-view 2.6.2 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {

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

@@ -1,108 +1,110 @@
-<template>
-	<div class="sh-vxe-form" :class="{ readonly: readonly, disabled: disabled }">
-		<vxe-form
-			ref="formRef"
-			:key="renderKey"
-			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-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">
-						{{ globalConfig?.submitBtnText || '确认' }}
-					</vxe-button>
-					<vxe-button v-ripple type="reset" :size="size">{{ globalConfig?.resetBtnText || '重置' }}</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 { defineComponent, getCurrentInstance } from 'vue'
-import props from './js/props'
-import useForm from './js/useForm'
-export default defineComponent({
-	name: 'ShForm',
-	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, true)
-
-		return Object.assign({}, useFormHooks)
-	}
-})
-</script>
-
-<style lang="scss">
-.sh-vxe-form {
-	position: relative;
-	&.readonly {
-		.vxe-form {
-			.vxe-input--inner[disabled],
-			.vxe-textarea--inner[disabled] {
-				cursor: auto;
-				color: #333;
-				background-color: var(--vxe-table-body-background-color);
-				border-color: var(--vxe-primary-lighten-color);
-			}
-			.vxe-checkbox.is--disabled {
-				cursor: auto;
-				color: #333;
-				& > input + .vxe-checkbox--icon {
-					background-color: var(--vxe-table-body-background-color);
-					border-color: var(--vxe-primary-lighten-color);
-				}
-				& > input + .vxe-checkbox--icon:before {
-					border-color: var(--vxe-primary-color);
-				}
-				& > input + .vxe-checkbox--icon + .vxe-checkbox--label {
-					color: #333;
-				}
-			}
-			.vxe-input.is--disabled .vxe-input--date-picker-suffix,
-			.vxe-input.is--disabled .vxe-input--number-suffix,
-			.vxe-input.is--disabled .vxe-input--password-suffix,
-			.vxe-input.is--disabled .vxe-input--search-suffix,
-			.vxe-input.is--disabled .vxe-input--suffix {
-				cursor: auto;
-			}
-		}
-	}
-	.vxe-form {
-		.vxe-form--gather.shFormTitleItem {
-			border: 1px solid var(--vxe-table-border-color);
-		}
-		.vxe-form--item {
-			&.shFormTitleItem {
-				padding: 0.2em 0.8em;
-				border-left: 5px solid var(--vxe-primary-color);
-				margin-bottom: 0.5em;
-				.vxe-form--item-inner {
-					min-height: auto;
-					.vxe-form--item-title {
-						max-width: 100%;
-						.vxe-form--item-title-postfix {
-							display: none;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>
+<template>
+	<div class="sh-vxe-form" :class="{ readonly: readonly, disabled: disabled }">
+		<vxe-form
+			ref="formRef"
+			:key="renderKey"
+			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-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">
+						{{ globalConfig?.submitBtnText || '确认' }}
+					</vxe-button>
+					<vxe-button v-ripple type="reset" :size="size">{{ globalConfig?.resetBtnText || '重置' }}</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 { defineComponent, getCurrentInstance } from 'vue'
+import props from './js/props'
+import useForm from './js/useForm'
+export default defineComponent({
+	name: 'ShForm',
+	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, true)
+
+		return {
+			...useFormHooks
+		}
+	}
+})
+</script>
+
+<style lang="scss">
+.sh-vxe-form {
+	position: relative;
+	&.readonly {
+		.vxe-form {
+			.vxe-input--inner[disabled],
+			.vxe-textarea--inner[disabled] {
+				cursor: auto;
+				color: #333;
+				background-color: var(--vxe-table-body-background-color);
+				border-color: var(--vxe-primary-lighten-color);
+			}
+			.vxe-checkbox.is--disabled {
+				cursor: auto;
+				color: #333;
+				& > input + .vxe-checkbox--icon {
+					background-color: var(--vxe-table-body-background-color);
+					border-color: var(--vxe-primary-lighten-color);
+				}
+				& > input + .vxe-checkbox--icon:before {
+					border-color: var(--vxe-primary-color);
+				}
+				& > input + .vxe-checkbox--icon + .vxe-checkbox--label {
+					color: #333;
+				}
+			}
+			.vxe-input.is--disabled .vxe-input--date-picker-suffix,
+			.vxe-input.is--disabled .vxe-input--number-suffix,
+			.vxe-input.is--disabled .vxe-input--password-suffix,
+			.vxe-input.is--disabled .vxe-input--search-suffix,
+			.vxe-input.is--disabled .vxe-input--suffix {
+				cursor: auto;
+			}
+		}
+	}
+	.vxe-form {
+		.vxe-form--gather.shFormTitleItem {
+			border: 1px solid var(--vxe-table-border-color);
+		}
+		.vxe-form--item {
+			&.shFormTitleItem {
+				padding: 0.2em 0.8em;
+				border-left: 5px solid var(--vxe-primary-color);
+				margin-bottom: 0.5em;
+				.vxe-form--item-inner {
+					min-height: auto;
+					.vxe-form--item-title {
+						max-width: 100%;
+						.vxe-form--item-title-postfix {
+							display: none;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>

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

@@ -120,6 +120,9 @@ export default function (props, context, proxy, isForm) {
 		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()
 	}

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

@@ -1,68 +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 Object.assign({}, 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>
+<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-table/components/sh-column.vue

@@ -1,69 +1,69 @@
-<script>
-import { computed, defineComponent, getCurrentInstance, h, inject, ref, resolveComponent, renderSlot } from 'vue'
-import { turnColumnItemFilters } from '../js/tableMethods'
-export default defineComponent({
-	name: 'ShColumn',
-	props: {
-		column: {
-			type: Object
-		}
-	},
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const shTable = inject('ShTableInstance')
-
-		const isGroup = computed(() => {
-			return proxy.hasChildren(props.column)
-		})
-		const columnConfig = computed(() => {
-			let renderObj = { name: props.column.renderName, props: props.column.renderProps }
-			let config = Object.assign({}, shTable.columnObjConfig, props.column)
-			if (props.column.readonly) {
-				config.cellRender = config.cellRender || renderObj
-			} else {
-				config.editRender = config.editRender || renderObj
-			}
-			if (config.renderName === '$vMoney' && props.column.renderProps.bill) {
-				config.filter = false
-				config.headerClassName += ' header-bill-cell'
-			}
-			if (config.filter === true || Number(config.filter) === 1) {
-				shTable.turnColumnItemFilters(config, renderObj.props)
-			}
-			return $vUtils.omit(config, ['renderName', 'renderProps', 'renderRequire', 'requireProps'])
-		})
-		const groupConfig = computed(() => {
-			return $vUtils.omit(columnConfig.value, ['children', 'cellRender', 'editRender'])
-		})
-		const renderVN = () => {
-			let columnSlots = {}
-			if (props.column.slots) {
-				Object.keys(props.column.slots).map(key => {
-					columnSlots[key] = shTable.slots[props.column.slots[key]]
-				})
-			}
-			if (isGroup.value) {
-				let childrenList = props.column.children.map(child => {
-					return h(resolveComponent('sh-column'), { column: child })
-				})
-				columnSlots.default = () => childrenList
-				return h(resolveComponent('vxe-colgroup'), groupConfig.value, columnSlots)
-			}
-			return h(resolveComponent('vxe-column'), columnConfig.value, columnSlots)
-		}
-
-		return {
-			isGroup,
-			columnConfig,
-			groupConfig,
-			renderVN
-		}
-	},
-	render() {
-		return this.renderVN()
-	}
-})
-</script>
-
-<style scoped lang="scss"></style>
+<script>
+import { computed, defineComponent, getCurrentInstance, h, inject, ref, resolveComponent, renderSlot } from 'vue'
+import { turnColumnItemFilters } from '../js/tableMethods'
+export default defineComponent({
+	name: 'ShColumn',
+	props: {
+		column: {
+			type: Object
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const shTable = inject('ShTableInstance')
+
+		const isGroup = computed(() => {
+			return proxy.hasChildren(props.column)
+		})
+		const columnConfig = computed(() => {
+			let renderObj = { name: props.column.renderName, props: props.column.renderProps }
+			let config = Object.assign({}, shTable.columnObjConfig, props.column)
+			if (props.column.readonly) {
+				config.cellRender = config.cellRender || renderObj
+			} else {
+				config.editRender = config.editRender || renderObj
+			}
+			if (config.renderName === '$vMoney' && props.column.renderProps.bill) {
+				config.filter = false
+				config.headerClassName += ' header-bill-cell'
+			}
+			if (config.filter === true || Number(config.filter) === 1) {
+				shTable.turnColumnItemFilters(config, renderObj.props)
+			}
+			return $vUtils.omit(config, ['renderName', 'renderProps', 'renderRequire', 'requireProps'])
+		})
+		const groupConfig = computed(() => {
+			return $vUtils.omit(columnConfig.value, ['children', 'cellRender', 'editRender'])
+		})
+		const renderVN = () => {
+			let columnSlots = {}
+			if (props.column.slots) {
+				Object.keys(props.column.slots).map(key => {
+					columnSlots[key] = shTable.slots[props.column.slots[key]]
+				})
+			}
+			if (isGroup.value) {
+				let childrenList = props.column.children.map(child => {
+					return h(resolveComponent('sh-column'), { column: child })
+				})
+				columnSlots.default = () => childrenList
+				return h(resolveComponent('vxe-colgroup'), { ...groupConfig.value }, columnSlots)
+			}
+			return h(resolveComponent('vxe-column'), { ...columnConfig.value }, columnSlots)
+		}
+
+		return {
+			isGroup,
+			columnConfig,
+			groupConfig,
+			renderVN
+		}
+	},
+	render() {
+		return this.renderVN()
+	}
+})
+</script>
+
+<style scoped lang="scss"></style>