sh-view 2.7.9 → 2.8.1

package/packages/components/sh-tree/components/table-tree.vue

@@ -23,7 +23,6 @@ import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted }
 // 树组件表格默认配置
 const tableConfigDefault = {
 	autoResize: true,
-	syncResize: true,
 	stripe: false,
 	size: 'small', //  medium / small / mini
 	border: 'inner',
@@ -198,7 +197,7 @@ export default defineComponent({
 			let searchData = null
 			if (filterText) {
 				let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
-				const searchProps = [{ rkey: labelField, format: labelFormat }]
+				const searchProps = [{ rkey: labelField, rname: '', rprops: {}, format: labelFormat }]
 				let tableColumnsAll = tableRef.value.getColumns()
 				tableColumnsAll.forEach(col => {
 					let renderObj = col.cellRender || col.editRender || col.itemRender

package/packages/components/sh-tree/index.vue

@@ -1,228 +1,228 @@
-<template>
-	<div class="sh-tree" :class="[isSelect ? 'direct' : 'select']" :style="{ height: wrapHeight }">
-		<template v-if="isSelect">
-			<vxe-pulldown ref="treeSelectRef" class="sh-tree-select" v-bind="selectConfigIn" @hide-panel="onHidePanel">
-				<template #default>
-					<div class="sh-tree-select-input">
-						<vxe-input ref="treeSelectInputRef" :model-value="selectLabels" v-bind="selectInputConfigIn" readonly @focus="onFocus" @clear="onClear"></vxe-input>
-					</div>
-				</template>
-				<template #dropdown>
-					<div v-if="filter" class="sh-tree-filter">
-						<vxe-input ref="filterInputRef" v-model="filterTextIn" class="sh-tree-filter-input" v-bind="filterInputConfigIn"></vxe-input>
-					</div>
-					<div class="sh-tree-select-dropdown">
-						<table-tree v-if="pulldownDrop" v-bind="tableTreeProps" @datacall="onDataCall" @select="onChange"></table-tree>
-					</div>
-				</template>
-			</vxe-pulldown>
-		</template>
-		<template v-else>
-			<div v-if="filter" class="sh-tree-filter">
-				<vxe-input ref="filterInputRef" v-model="filterTextIn" class="sh-tree-filter-input" v-bind="filterInputConfigIn"></vxe-input>
-			</div>
-			<div class="sh-tree-content" :class="{ 'has-filter': filter }">
-				<table-tree v-bind="tableTreeProps" @datacall="onDataCall" @select="onChange"></table-tree>
-			</div>
-		</template>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, onBeforeMount, getCurrentInstance, ref, watch } from 'vue'
-import './css/index.scss'
-import mixinProps from './mixin/treeProps'
-import tableTree from './components/table-tree.vue'
-export default defineComponent({
-	name: 'ShTree',
-	components: {
-		tableTree
-	},
-	props: {
-		...mixinProps
-	},
-	emits: ['update:modelValue', 'change', 'focus', 'blur'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const treeSelectRef = ref()
-		const treeSelectInputRef = ref()
-		const filterInputRef = ref()
-		// 公共属性
-		const filterTextIn = ref(props.filterText)
-		const selectedKeys = ref([])
-		const selectedData = ref([])
-		const treeData = ref(props.options)
-		// 下拉专属属性
-		const pulldownDrop = ref(false) // 由于hidePanel延迟350ms关闭，体验不好，这里使用自定义开关
-
-		const wrapHeight = computed(() => ([100, '100%', 'auto'].includes(props.height) ? '100%' : 'auto'))
-		const checkConfig = computed(() => ({ disabled: props.disabled, size: props.size }))
-		const selectLabels = computed(() => {
-			let { valueData, multiple, format, field, split, labelField } = props
-			if (selectedKeys.value && Array.isArray(selectedKeys.value) && selectedKeys.value.length > 0 && treeData.value && treeData.value.length > 0) {
-				let selectRows = getSelectRowsByValue(selectedKeys.value)
-				let labelFieldList = selectRows.map(item => $vUtils.get(item, labelField))
-				if (format) {
-					let prefixKey = field
-					let endStrs = ['Id', '_id']
-					endStrs.forEach(end => {
-						if (field.endsWith(end)) {
-							prefixKey = field.replace(end, '')
-						}
-					})
-					let dataformat = format.replace(/@/gi, prefixKey)
-					if (multiple) {
-						let formatKeys = $vUtils.getFormatKeys(dataformat)
-						// 首先构建回显数据源，防止formayKeys值不全导致索引错乱
-						let formatSourceList = Array.from(new Array(selectedKeys.value.length), (item, itemIndex) => {
-							let result = { [field]: selectedKeys.value[itemIndex] }
-							formatKeys.forEach(key => {
-								result[key] = $vUtils.get(valueData, `${key}[${itemIndex}]`)
-							})
-							return result
-						})
-						labelFieldList = formatSourceList.map(item => $vUtils.format(dataformat, item))
-					} else {
-						labelFieldList = [$vUtils.format(dataformat, valueData)]
-					}
-				}
-				return labelFieldList.join(split)
-			}
-			return ''
-		})
-		const selectConfigIn = computed(() => {
-			return Object.assign({ transfer: true, popupClassName: 'sh-tree-select-dropdown' }, props.globalConfig?.selectConfig, checkConfig.value)
-		})
-		const selectInputConfigIn = computed(() => {
-			return Object.assign({ clearable: true, controls: false, transfer: false, suffixIcon: 'vxe-icon-caret-down', placeholder: props.placeholder }, props.globalConfig?.inputConfig)
-		})
-		const filterInputConfigIn = computed(() => {
-			return Object.assign({ prefixIcon: 'vxe-icon-search', placeholder: '搜索', clearable: true, controls: false, transfer: true }, props.globalConfig?.filterInputConfig)
-		})
-		const tableTreeProps = computed(() => {
-			return Object.assign({}, props, { filterText: filterTextIn.value, modelValue: selectedKeys.value })
-		})
-
-		// 根据选中值返回选中节点信息
-		const getSelectRowsByValue = keys => {
-			const { nodeKey, globalConfig } = props
-			let childKey = (globalConfig.treeConfig && globalConfig.treeConfig.childrenField) || proxy.$vTableSetup?.table?.treeConfig?.childrenField || 'children'
-			let selectRows = []
-			$vUtils.eachTree(
-				treeData.value,
-				node => {
-					if (node[nodeKey] && keys.includes(node[nodeKey])) {
-						selectRows.push(node)
-					}
-				},
-				{ children: childKey }
-			)
-			return selectRows
-		}
-		// 获取选中数据
-		const getSelectionData = () => {
-			return selectedData.value
-		}
-		// 树节点获取焦点事件
-		const onFocus = async obj => {
-			emitFocus()
-			treeSelectInputRef.value.blur()
-			await treeSelectRef.value.togglePanel()
-			pulldownDrop.value = true
-			if (filterInputRef.value) filterInputRef.value.focus()
-		}
-		// 树节点选择变换事件
-		const onChange = async (keys, rows, obj) => {
-			if (props.isSelect) {
-				if (!props.multiple) {
-					pulldownDrop.value = false
-					selectedKeys.value = keys
-					selectedData.value = rows
-					await treeSelectRef.value.hidePanel()
-					onHidePanel()
-				} else {
-					selectedKeys.value = keys
-					selectedData.value = rows
-				}
-				return
-			}
-			selectedKeys.value = keys
-			selectedData.value = rows
-			emitChange()
-		}
-		// 树收起下拉回调方法
-		const onHidePanel = () => {
-			pulldownDrop.value = false
-			filterTextIn.value = ''
-			emitChange()
-			emitBlur()
-		}
-		// 下拉数清除事件
-		const onClear = () => {
-			onHidePanel()
-		}
-		// 表格数据回调
-		const onDataCall = datas => {
-			treeData.value = datas
-		}
-		// 回调focus事件
-		const emitFocus = obj => {
-			emit('focus', obj)
-		}
-		// 回调change事件
-		const emitChange = () => {
-			emitValue()
-			emit('change', selectedKeys.value, selectedData.value)
-		}
-		// 回调blur事件
-		const emitBlur = () => {
-			emit('blur', selectedKeys.value, selectedData.value)
-		}
-		// 回调双向绑定
-		const emitValue = () => {
-			emit('update:modelValue', selectedKeys.value)
-		}
-
-		watch(
-			() => props.modelValue,
-			value => {
-				if (pulldownDrop.value) return
-				if ($vUtils.isNone(value)) {
-					selectedKeys.value = []
-				} else {
-					selectedKeys.value = Array.isArray(value) ? value : [value]
-				}
-			},
-			{
-				immediate: true,
-				deep: true
-			}
-		)
-
-		return {
-			treeSelectRef,
-			treeSelectInputRef,
-			filterInputRef,
-			wrapHeight,
-			selectConfigIn,
-			selectInputConfigIn,
-			filterTextIn,
-			filterInputConfigIn,
-			pulldownDrop,
-			tableTreeProps,
-			selectLabels,
-			getSelectionData,
-			onFocus,
-			onClear,
-			onHidePanel,
-			onDataCall,
-			onChange
-		}
-	}
-})
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+	<div class="sh-tree" :class="[isSelect ? 'direct' : 'select']" :style="{ height: wrapHeight }">
+		<template v-if="isSelect">
+			<vxe-pulldown ref="treeSelectRef" class="sh-tree-select" v-bind="selectConfigIn" @hide-panel="onHidePanel">
+				<template #default>
+					<div class="sh-tree-select-input">
+						<vxe-input ref="treeSelectInputRef" :model-value="selectLabels" v-bind="selectInputConfigIn" readonly @focus="onFocus" @clear="onClear"></vxe-input>
+					</div>
+				</template>
+				<template #dropdown>
+					<div v-if="filter" class="sh-tree-filter">
+						<vxe-input ref="filterInputRef" v-model="filterTextIn" class="sh-tree-filter-input" v-bind="filterInputConfigIn"></vxe-input>
+					</div>
+					<div class="sh-tree-select-dropdown">
+						<table-tree v-if="pulldownDrop" v-bind="tableTreeProps" @datacall="onDataCall" @select="onChange"></table-tree>
+					</div>
+				</template>
+			</vxe-pulldown>
+		</template>
+		<template v-else>
+			<div v-if="filter" class="sh-tree-filter">
+				<vxe-input ref="filterInputRef" v-model="filterTextIn" class="sh-tree-filter-input" v-bind="filterInputConfigIn"></vxe-input>
+			</div>
+			<div class="sh-tree-content" :class="{ 'has-filter': filter }">
+				<table-tree v-bind="tableTreeProps" @datacall="onDataCall" @select="onChange"></table-tree>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, onBeforeMount, getCurrentInstance, ref, watch } from 'vue'
+import './css/index.scss'
+import mixinProps from './mixin/treeProps'
+import tableTree from './components/table-tree.vue'
+export default defineComponent({
+	name: 'ShTree',
+	components: {
+		tableTree
+	},
+	props: {
+		...mixinProps
+	},
+	emits: ['update:modelValue', 'change', 'focus', 'blur'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const treeSelectRef = ref()
+		const treeSelectInputRef = ref()
+		const filterInputRef = ref()
+		// 公共属性
+		const filterTextIn = ref(props.filterText)
+		const selectedKeys = ref([])
+		const selectedData = ref([])
+		const treeData = ref(props.options)
+		// 下拉专属属性
+		const pulldownDrop = ref(false) // 由于hidePanel延迟350ms关闭，体验不好，这里使用自定义开关
+
+		const wrapHeight = computed(() => ([100, '100%', 'auto'].includes(props.height) ? '100%' : 'auto'))
+		const checkConfig = computed(() => ({ disabled: props.disabled, size: props.size }))
+		const selectLabels = computed(() => {
+			let { valueData, multiple, format, field, split, labelField } = props
+			if (selectedKeys.value && Array.isArray(selectedKeys.value) && selectedKeys.value.length > 0 && treeData.value && treeData.value.length > 0) {
+				let selectRows = getSelectRowsByValue(selectedKeys.value)
+				let labelFieldList = selectRows.map(item => $vUtils.get(item, labelField))
+				if (format) {
+					let prefixKey = field
+					let endStrs = ['Id', '_id']
+					endStrs.forEach(end => {
+						if (field.endsWith(end)) {
+							prefixKey = field.replace(end, '')
+						}
+					})
+					let dataformat = format.replace(/@/gi, prefixKey)
+					if (multiple) {
+						let formatKeys = $vUtils.getFormatKeys(dataformat)
+						// 首先构建回显数据源，防止formayKeys值不全导致索引错乱
+						let formatSourceList = Array.from(new Array(selectedKeys.value.length), (item, itemIndex) => {
+							let result = { [field]: selectedKeys.value[itemIndex] }
+							formatKeys.forEach(key => {
+								result[key] = $vUtils.get(valueData, `${key}[${itemIndex}]`)
+							})
+							return result
+						})
+						labelFieldList = formatSourceList.map(item => $vUtils.format(dataformat, item))
+					} else {
+						labelFieldList = [$vUtils.format(dataformat, valueData)]
+					}
+				}
+				return labelFieldList.join(split)
+			}
+			return ''
+		})
+		const selectConfigIn = computed(() => {
+			return Object.assign({ transfer: true, popupClassName: 'sh-tree-select-dropdown' }, props.globalConfig?.selectConfig, checkConfig.value)
+		})
+		const selectInputConfigIn = computed(() => {
+			return Object.assign({ clearable: true, controls: false, transfer: false, suffixIcon: 'vxe-icon-caret-down', placeholder: props.placeholder }, props.globalConfig?.inputConfig)
+		})
+		const filterInputConfigIn = computed(() => {
+			return Object.assign({ prefixIcon: 'vxe-icon-search', placeholder: '搜索', clearable: true, controls: false, transfer: true }, props.globalConfig?.filterInputConfig)
+		})
+		const tableTreeProps = computed(() => {
+			return Object.assign({}, props, { filterText: filterTextIn.value, modelValue: selectedKeys.value })
+		})
+
+		// 根据选中值返回选中节点信息
+		const getSelectRowsByValue = keys => {
+			const { nodeKey, globalConfig } = props
+			let childKey = (globalConfig.treeConfig && globalConfig.treeConfig.childrenField) || proxy.$vTableSetup?.table?.treeConfig?.childrenField || 'children'
+			let selectRows = []
+			$vUtils.eachTree(
+				treeData.value,
+				node => {
+					if (node[nodeKey] && keys.includes(node[nodeKey]) && !selectRows.find(row => row[nodeKey] === node[nodeKey])) {
+						selectRows.push(node)
+					}
+				},
+				{ children: childKey }
+			)
+			return selectRows
+		}
+		// 获取选中数据
+		const getSelectionData = () => {
+			return selectedData.value
+		}
+		// 树节点获取焦点事件
+		const onFocus = async obj => {
+			emitFocus()
+			treeSelectInputRef.value.blur()
+			await treeSelectRef.value.togglePanel()
+			pulldownDrop.value = true
+			if (filterInputRef.value) filterInputRef.value.focus()
+		}
+		// 树节点选择变换事件
+		const onChange = async (keys, rows, obj) => {
+			if (props.isSelect) {
+				if (!props.multiple) {
+					pulldownDrop.value = false
+					selectedKeys.value = keys
+					selectedData.value = rows
+					await treeSelectRef.value.hidePanel()
+					onHidePanel()
+				} else {
+					selectedKeys.value = keys
+					selectedData.value = rows
+				}
+				return
+			}
+			selectedKeys.value = keys
+			selectedData.value = rows
+			emitChange()
+		}
+		// 树收起下拉回调方法
+		const onHidePanel = () => {
+			pulldownDrop.value = false
+			filterTextIn.value = ''
+			emitChange()
+			emitBlur()
+		}
+		// 下拉数清除事件
+		const onClear = () => {
+			onHidePanel()
+		}
+		// 表格数据回调
+		const onDataCall = datas => {
+			treeData.value = datas
+		}
+		// 回调focus事件
+		const emitFocus = obj => {
+			emit('focus', obj)
+		}
+		// 回调change事件
+		const emitChange = () => {
+			emitValue()
+			emit('change', selectedKeys.value, selectedData.value)
+		}
+		// 回调blur事件
+		const emitBlur = () => {
+			emit('blur', selectedKeys.value, selectedData.value)
+		}
+		// 回调双向绑定
+		const emitValue = () => {
+			emit('update:modelValue', selectedKeys.value)
+		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				if (pulldownDrop.value) return
+				if ($vUtils.isNone(value)) {
+					selectedKeys.value = []
+				} else {
+					selectedKeys.value = Array.isArray(value) ? value : [value]
+				}
+			},
+			{
+				immediate: true,
+				deep: true
+			}
+		)
+
+		return {
+			treeSelectRef,
+			treeSelectInputRef,
+			filterInputRef,
+			wrapHeight,
+			selectConfigIn,
+			selectInputConfigIn,
+			filterTextIn,
+			filterInputConfigIn,
+			pulldownDrop,
+			tableTreeProps,
+			selectLabels,
+			getSelectionData,
+			onFocus,
+			onClear,
+			onHidePanel,
+			onDataCall,
+			onChange
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped></style>

package/packages/vxeTable/css/index.scss

@@ -192,13 +192,37 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
 }
 
 // 渲染器
-.vxe-filter--wrap{
-    padding: 8px;
-    box-sizing: border-box;
-    .vxe-filter--input{
+.vxe-filter{
+    &--wrap{
+        padding: 8px;
+        box-sizing: border-box;
     }
-    .vxe-filter--footer{
-        margin-top: 8px;
+    &--input{
+    }
+    &--list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        &-head{
+
+        }
+        &-body{
+            overflow: auto;
+            height: 120px;
+        }
+        &-item{
+            padding: 2px 0;
+            display: block;
+        }
+    }
+    &--top{
+        position: relative;
+        margin-bottom: 5px;
+    }
+    &--body{
+    }
+    &--footer{
+        margin-top: 5px;
         padding: 5px 0 2px;
         .vxe-button{
             margin-left: 0;

package/packages/vxeTable/render/filters/vxe-filter-input.vue

@@ -1,25 +1,26 @@
-<template>
-	<div class="vxe-filter--wrap">
-		<span class="vxe-filter--inner">
-			<vxe-input v-model="renderValue.data" v-bind="rprops" :disabled="false" @input="vxeFilterCallback" />
-		</span>
-	</div>
-</template>
-
-<script>
-import { defineComponent, getCurrentInstance } from 'vue'
-import cellProps from '../mixin/cell-props'
-import filterHooks from '../mixin/filter-hooks'
-export default defineComponent({
-	name: 'VxeFilterInput',
-	props: cellProps,
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const useFilter = filterHooks(props, context, proxy)
-
-		return {
-			...useFilter
-		}
-	}
-})
-</script>
+<template>
+	<div class="vxe-filter--wrap">
+		<span class="vxe-filter--inner">
+			<vxe-input v-model="renderOption.data" v-bind="rprops" :disabled="false" @input="vxeFilterChange" />
+		</span>
+	</div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance, ref, watch } from 'vue'
+import cellProps from '../mixin/cell-props'
+import filterHooks from '../mixin/filter-hooks'
+export default defineComponent({
+	name: 'VxeFilterInput',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+
+		const useFilter = filterHooks(props, context, proxy)
+
+		return {
+			...useFilter
+		}
+	}
+})
+</script>

package/packages/vxeTable/render/filters/vxe-filter-time.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="vxe-filter--wrap">
+		<span class="vxe-filter--inner">
+			<sh-date v-model="renderOption.data" v-bind="rprops" :disabled="false" @change="vxeFilterChange" />
+		</span>
+	</div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance, reactive, ref } from 'vue'
+import cellProps from '../mixin/cell-props'
+import filterHooks from '../mixin/filter-hooks'
+export default defineComponent({
+	name: 'VxeFilterTime',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+
+		const useFilter = filterHooks(props, context, proxy)
+
+		return {
+			...useFilter
+		}
+	}
+})
+</script>

package/packages/vxeTable/render/globalRenders.jsx

@@ -29,6 +29,7 @@ import vxeFooterMoney from './footer/vxe-footer-money.vue'
 
 // 过滤器组件封装
 import vxeFilterInput from './filters/vxe-filter-input.vue'
+import vxeFilterTime from './filters/vxe-filter-time.vue'
 
 // 渲染器通用默认配置
 let defaultPublicProps = {
@@ -54,6 +55,7 @@ let defaultProps = {
 	$vHref: { disabled: true, target: '_blank' },
 	$vUpload: { split: ',' },
 	$vFilterInput: { placeholder: '请输入关键词' },
+	$vFilterTime: { range: true },
 	$vTable: { size: 'mini' },
 	$vCode: { placeholder: '请输入', border: true, height: '100px' },
 	$vGlobalOption: { type: 'text' }
@@ -63,11 +65,6 @@ let defaultProps = {
 const getFixedProp = (renderOpts, params) => {
 	let { name, props = {} } = renderOpts
 	let { column, $table } = params
-	let writeColumn = !!column
-	if (name === '$vFilterInput') {
-		writeColumn = false
-		name = props.colRenderName
-	}
 	let rturnProps = Object.assign({}, defaultPublicProps, defaultProps[name], props)
 	let transKeys = ['transfer', 'disabled', 'multiple', 'isLeaf', 'commafy', 'border', 'filterable', 'showWordCount', 'editable']
 	transKeys.forEach(key => {
@@ -75,7 +72,7 @@ const getFixedProp = (renderOpts, params) => {
 			rturnProps[key] = Boolean(+rturnProps[key])
 		}
 	})
-	if (writeColumn) {
+	if (column) {
 		column.rname = name
 		column.rprops = rturnProps
 	}
@@ -468,7 +465,7 @@ const filterRenders = {
 	$vFilterInput: {
 		renderFilter(renderOpts, params) {
 			let props = getFixedProp(renderOpts, params)
-			return [<vxeFilterInput rparams={params} rname={renderOpts.name} rprops={props.rprops} />]
+			return [<vxeFilterInput rparams={params} rname={renderOpts.name} rprops={props.rprops} rkey={props.rkey} />]
 		},
 		filterResetMethod({ options, column }) {
 			options.forEach(option => {
@@ -481,6 +478,28 @@ const filterRenders = {
 			let { rtext } = utils.formatRender(cellValue, property, row, rname, rprops, { $vUtils: utils })
 			return String(rtext).toLowerCase().indexOf(data.toLowerCase()) > -1
 		}
+	},
+	$vFilterTime: {
+		renderFilter(renderOpts, params) {
+			let props = getFixedProp(renderOpts, params)
+			return [<vxeFilterTime rparams={params} rname={renderOpts.name} rprops={props.rprops} rkey={props.rkey} />]
+		},
+		filterResetMethod({ options, column }) {
+			options.forEach(option => {
+				option.data = option.resetValue || []
+			})
+		},
+		filterMethod({ value, option, cellValue, row, column, $table }) {
+			const { data } = option
+			const { rname, rprops, property } = column
+			let { rtext } = utils.formatRender(cellValue, property, row, rname, rprops, { $vUtils: utils })
+			if (rprops.range || rprops.range === undefined) {
+				let startDiff = utils.getDateDiff(data[0], rtext)
+				let endDiff = utils.getDateDiff(rtext, data[1])
+				return startDiff.done && endDiff.done
+			}
+			return data === rtext
+		}
 	}
 }