sh-view 1.7.5 → 2.0.0

package/packages/components/global-components/{sh-vxe-query → sh-query}/index.vue

@@ -1,286 +1,317 @@
-<template>
-	<vxe-form
-		ref="queryForm"
-		:key="renderKey"
-		class="sh-query"
-		:class="formCollapsed ? 'sh-query-collapsed-open' : 'sh-query-collapsed-close'"
-		v-bind="queryFormConfig"
-		:items="formItems"
-		:data="data"
-		:rules="rules"
-		:valid-config="validConfig"
-		@submit="onFormSubmit"
-		@reset="onFormReset"
-		@edit-closed="onFormEditClosed">
-		<div 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="theme" :size="size" icon="vxe-icon-search">查询</vxe-button>
-				<vxe-button v-ripple type="reset" :size="size" icon="vxe-icon-repeat">重置</vxe-button>
-				<vxe-button v-if="formToggleBtnShow" v-ripple :size="size" :icon="formCollapsed ? 'vxe-icon-caret-up' : 'vxe-icon-caret-down'" @click="formBtnCollapsed(!formCollapsed)">
-					{{ formCollapsed ? '收起' : '展开全部' }}
-				</vxe-button>
-			</div>
-		</div>
-	</vxe-form>
-</template>
-
-<script>
-export default {
-	name: 'ShQuery',
-	props: {
-		data: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		readonly: {
-			type: Boolean,
-			default: false
-		},
-		size: {
-			type: String,
-			default: 'small' //  medium / small / mini
-		},
-		disabled: {
-			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 {}
-			}
-		},
-		globalConfig: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		transformitem: {
-			type: Boolean,
-			default: true
-		}
-	},
-	emits: ['submit', 'reset', 'edit-closed', 'submit-invalid', 'collapsed'],
-	data() {
-		return {
-			// 渲染key值
-			renderKey: 1,
-			// 表单展开状态
-			formCollapsed: false,
-			// 是否渲染表单展开全部按钮
-			formToggleBtnShow: false,
-			// 表单初始项
-			formOriginItems: [],
-			// 表单渲染项
-			formItems: [],
-			// 表格高级搜索默认配置
-			formConfigDefault: {
-				titleWidth: 100,
-				titleAlign: 'right',
-				titleColon: true,
-				titleAsterisk: true,
-				titleOverflow: true,
-				align: 'left',
-				span: 6,
-				loading: false,
-				customLayout: false,
-				preventSubmit: false,
-				size: this.size
-			}
-		}
-	},
-	computed: {
-		queryFormConfig() {
-			let mobileTurnConfig = this.mobile ? { span: '24' } : {}
-			return Object.assign({}, this.formConfigDefault, this.formConfig, mobileTurnConfig)
-		}
-	},
-	watch: {
-		data: {
-			handler(newvalue, oldValue) {
-				this.initFormData()
-			},
-			immediate: true
-		},
-		items: {
-			handler(newvalue, oldValue) {
-				this.initFormItems()
-			},
-			deep: true,
-			immediate: false
-		}
-	},
-	created() {
-		this.initCreated()
-	},
-	methods: {
-		queryFormRef() {
-			return this.$refs.queryForm
-		},
-		// 初始化
-		initCreated() {
-			this.initFormItems()
-		},
-		// 初始化表单字段
-		initFormData() {
-			const that = this
-			let formItems = that.items.filter(item => item.search && item.search !== '0')
-			that.$vUtils.eachTree(formItems, item => {
-				let renderProps = item.renderProps || item.itemRender?.props || {}
-				if (!that.$vUtils.has(that.data, item.field)) {
-					that.$vUtils.set(that.data, item.field, renderProps.defaultValue || null)
-				}
-			})
-		},
-		// 初始化搜索表单
-		initFormItems() {
-			const that = this
-			let formItemsArr = [] // 表单项
-			let formItems = that.items.filter(item => item.search && item.search !== '0')
-			if (this.transformitem) {
-				let { itemsArr, itemsRules } = that.generateFormItem(formItems)
-				formItemsArr = itemsArr
-			} else {
-				formItemsArr = formItems
-			}
-			formItemsArr.forEach(item => {
-				item.visible = true
-				item.itemRender.props.disabled = false
-			})
-			that.formOriginItems = formItemsArr
-			that.formItems = formItemsArr
-			if (formItemsArr.length > that.globalConfig.formToggleNum && that.globalConfig.formToggle) {
-				that.formToggleBtnShow = true // 显示展开全部按钮
-				that.formBtnCollapsed(false)
-			}
-			this.initFormData()
-		},
-		// 表单展开全部/收起切换事件
-		formBtnCollapsed(value) {
-			const that = this
-			that.formCollapsed = value
-			that.formItems = value ? that.formOriginItems : that.formOriginItems.slice(0, that.globalConfig.formToggleNum)
-			this.$emit('collapsed', value)
-		},
-		// -------- 搜索
-		async onFormSubmit() {
-			let that = this
-			let errMap = await that.queryFormRef().validate()
-			let data = that.data
-			if (!errMap) {
-				that.$emit('submit', data)
-			} else {
-				that.onFormSubmitInvalid({ data, errMap })
-			}
-		},
-		// 表单重置
-		onFormReset(params) {
-			this.initFormItems()
-			this.$vUtils.clear(this.data)
-			this.$emit('reset', params)
-		},
-		// 表单项编辑回调
-		onFormEditClosed(obj, renderbox) {
-			this.$emit('edit-closed', obj, renderbox, this)
-		},
-		// 表单校验不通过
-		onFormSubmitInvalid(obj) {
-			this.$emit('submit-invalid', obj)
-		},
-		// 表单重新渲染
-		refreshRender() {
-			this.renderKey++
-		},
-		// 自动生成表单渲染项
-		generateFormItem(items = []) {
-			const that = this
-			let itemsArr = []
-			let itemsRules = {}
-			that.$vUtils.mapTree(items, ori => {
-				let tar = Object.assign({}, that.itemConfigDefault, ori)
-				let renderConfig = {
-					name: ori.renderName || '$vInput',
-					props: Object.assign({}, ori.renderProps || {})
-				}
-				if (that.readonly || that.disabled) {
-					renderConfig.props.disabled = true
-				}
-				tar.itemRender = Object.assign({}, renderConfig, ori.itemRender || {})
-				// 首先提取校验配置
-				if (that.isTrue(ori['renderRequire'])) {
-					// 若配置了校验参数则走校验参数，没配置则给默认校验条件
-					if (ori['requireProps'] && Array.isArray(ori['requireProps']) && ori['requireProps'].length > 0) {
-						itemsRules[ori['field']] = ori['requireProps']
-					} else {
-						let dataType = 'string'
-						let arrayType = ['$vCheckgroup', '$vUpload', '$vTable']
-						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && that.isTrue(renderConfig.props.multiple))) {
-							dataType = 'array'
-						}
-						itemsRules[ori['field']] = [{ required: true, message: that.getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
-					}
-				}
-				// 表单不支持编辑渲染过滤
-				let notRenderName = ['seq', 'checkbox', 'radio', '$vImg', '$vHref', '$vGlobalOption']
-				if (!((ori.renderName && notRenderName.includes(ori.renderName)) || notRenderName.includes(ori.type))) {
-					itemsArr.push(tar)
-				}
-			})
-			return { itemsArr, itemsRules }
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.sh-query {
-	background: var(--theme-weak-color);
-	&.sh-query-collapsed-close {
-	}
-	&.sh-query-collapsed-open {
-	}
-	.sh-query-buttons {
-		border-top: 1px solid var(--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="queryForm"
+		:key="renderKey"
+		class="sh-query"
+		:class="formCollapsed ? 'sh-query-collapsed-open' : 'sh-query-collapsed-close'"
+		v-bind="queryFormConfig"
+		:items="formItems"
+		:data="data"
+		:rules="valid ? formRules : {}"
+		:valid-config="validConfig"
+		@submit="onFormSubmit"
+		@reset="onFormReset"
+		@edit-closed="onFormEditClosed">
+		<div 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">查询</vxe-button>
+				<vxe-button v-ripple type="reset" :size="size" icon="vxe-icon-repeat">重置</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>
+export default {
+	name: 'ShQuery',
+	props: {
+		data: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		size: {
+			type: String,
+			default: 'small' //  medium / small / mini
+		},
+		disabled: {
+			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 {}
+			}
+		},
+		globalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		transformitem: {
+			type: Boolean,
+			default: true
+		},
+		valid: {
+			type: Boolean
+		}
+	},
+	emits: ['submit', 'reset', 'edit-closed', 'submit-invalid', 'collapsed'],
+	data() {
+		return {
+			// 渲染key值
+			renderKey: 1,
+			// 表单展开状态
+			formCollapsed: false,
+			// 是否渲染表单展开全部按钮
+			formToggleBtnShow: false,
+			// 表单初始项
+			formOriginItems: [],
+			// 表单渲染项
+			formItems: [],
+			// 表单校验规则
+			formRules: {},
+			// 表格高级搜索默认配置
+			formConfigDefault: {
+				titleWidth: 100,
+				titleAlign: 'right',
+				titleColon: true,
+				titleAsterisk: true,
+				titleOverflow: true,
+				align: 'left',
+				span: 6,
+				loading: false,
+				customLayout: false,
+				preventSubmit: false,
+				size: this.size
+			}
+		}
+	},
+	computed: {
+		queryFormConfig() {
+			return Object.assign({}, this.formConfigDefault, this.formConfig)
+		}
+	},
+	watch: {
+		data: {
+			handler(newvalue, oldValue) {
+				this.initFormData()
+			},
+			immediate: true
+		},
+		items: {
+			handler(newvalue, oldValue) {
+				this.initFormItems()
+			},
+			deep: true,
+			immediate: false
+		},
+		rules: {
+			handler(newvalue, oldValue) {
+				this.initEditRules(newvalue)
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {
+		this.initCreated()
+	},
+	methods: {
+		queryFormRef() {
+			return this.$refs.queryForm
+		},
+		// 初始化
+		initCreated() {
+			this.initFormItems()
+		},
+		// 初始化表单字段
+		initFormData() {
+			const { items, data, $vUtils } = this
+			let queryItems = items.filter(item => item.search && item.search !== '0')
+			$vUtils.eachTree(queryItems, item => {
+				let renderProps = item.renderProps || item.itemRender?.props || {}
+				if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(data, item.field))) {
+					$vUtils.set(data, item.field, renderProps.defaultValue)
+				}
+			})
+		},
+		// 初始化搜索表单
+		initFormItems() {
+			let formItemsArr = [] // 表单项
+			let formItems = this.$vUtils.searchTree(this.items, item => item.search && item.search !== '0')
+			if (this.transformitem) {
+				let { itemsArr, rules } = this.generateFormItem(formItems)
+				formItemsArr = itemsArr
+				this.initEditRules(rules)
+			} else {
+				formItemsArr = formItems
+				this.initEditRules(this.rules)
+			}
+			formItemsArr.forEach(item => {
+				item.visible = true
+				item.itemRender.props.disabled = false
+			})
+			this.formOriginItems = formItemsArr
+			this.formItems = formItemsArr
+			if (formItemsArr.length > this.globalConfig.formToggleNum && this.globalConfig.formToggle) {
+				this.formToggleBtnShow = true // 显示展开全部按钮
+				this.formBtnCollapsed(false)
+			}
+			this.initFormData()
+		},
+		// 初始化验证规则
+		initEditRules(rules) {
+			const { $vUtils } = this
+			if (rules && $vUtils.isPlainObject(rules)) {
+				Object.keys(rules).forEach(key => {
+					if (this.formRules[key]) {
+						this.formRules[key] = Array.from(new Set(this.formRules[key].concat(rules[key])))
+					} else {
+						this.formRules[key] = rules[key]
+					}
+				})
+			}
+		},
+		// 表单展开全部/收起切换事件
+		formBtnCollapsed(value, emit) {
+			this.formCollapsed = value
+			this.formItems = value ? this.formOriginItems : this.formOriginItems.slice(0, this.globalConfig.formToggleNum)
+			if (emit) this.$emit('collapsed', value)
+		},
+		// -------- 搜索
+		async onFormSubmit() {
+			let { data } = this
+			let errMap = await this.queryFormRef().validate()
+			if (!errMap) {
+				this.$emit('submit', data)
+			} else {
+				this.onFormSubmitInvalid({ data, errMap })
+			}
+		},
+		// 表单重置
+		onFormReset(params) {
+			this.initFormItems()
+			this.$vUtils.clear(this.data)
+			this.$emit('reset', params)
+		},
+		// 表单项编辑回调
+		onFormEditClosed(obj, renderbox) {
+			this.$emit('edit-closed', obj, renderbox, this)
+		},
+		// 表单校验不通过
+		onFormSubmitInvalid(obj) {
+			this.$emit('submit-invalid', obj)
+		},
+		// 表单重新渲染
+		refreshRender() {
+			this.renderKey++
+		},
+		// 判断为true
+		isTrue(value) {
+			return String(value) === '1' || String(value).toLowerCase() === 'true'
+		},
+		// 自动生成表单渲染项
+		generateFormItem(items = []) {
+			let itemsArr = []
+			let rules = {}
+			// 表单不支持编辑渲染过滤
+			let notRenderName = ['seq', 'checkbox', 'radio', '$vImg', '$vHref', '$vGlobalOption']
+			const { itemConfigDefault, readonly, disabled, isTrue, getDefaultMessage, $vUtils } = this
+			$vUtils.eachTree(items, ori => {
+				if (ori.children && ori.children.length) {
+					return
+				}
+				let tar = Object.assign({}, itemConfigDefault, ori)
+				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 || {})
+				// 首先提取校验配置
+				if (isTrue(ori['renderRequire'])) {
+					// 若配置了校验参数则走校验参数，没配置则给默认校验条件
+					if (ori['requireProps'] && Array.isArray(ori['requireProps']) && ori['requireProps'].length > 0) {
+						rules[ori['field']] = ori['requireProps']
+					} else {
+						let dataType = 'string'
+						let arrayType = ['$vCheckgroup', '$vUpload', '$vTable']
+						if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && isTrue(renderConfig.props.multiple))) {
+							dataType = 'array'
+						}
+						rules[ori['field']] = [{ required: true, message: getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
+					}
+				}
+				if (!((ori.renderName && notRenderName.includes(ori.renderName)) || notRenderName.includes(ori.type))) {
+					itemsArr.push(tar)
+				}
+			})
+			return { itemsArr, rules }
+		}
+	}
+}
+</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>