sh-view 2.8.3 → 2.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
   "main": "packages/index.js",
   "typings": "types/index.d.ts",
@@ -31,7 +31,7 @@
     "jszip": "^3.10.1",
     "lunar-typescript": "^1.6.10",
     "popper.js": "^1.16.1",
-    "sh-tools": "^2.2.5",
+    "sh-tools": "^2.2.6",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-masonry": "^0.16.0",

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

@@ -21,10 +21,36 @@
 
 <script>
 import { defineComponent, ref, computed } from 'vue'
-import { alertProps } from './alert.ts'
 export default defineComponent({
 	name: 'ShAlert',
-	props: alertProps,
+	props: {
+		type: {
+			type: String,
+			default: 'info'
+		},
+		title: {
+			type: String
+		},
+		content: {
+			type: String
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		showIcon: {
+			type: Boolean,
+			default: false
+		},
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		block: {
+			type: Boolean,
+			default: false
+		}
+	},
 	emits: ['close'],
 	setup(props, context) {
 		const { slots, emit } = context

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

@@ -86,16 +86,6 @@ export default function (props, context, proxy, isForm) {
 	const validate = callback => {
 		return formRef.value.validate(callback)
 	}
-	// 初始化表单字段
-	const initFormData = () => {
-		let initItems = isForm ? props.items : props.items.filter(item => item.search && item.search !== '0')
-		$vUtils.eachTree(initItems, item => {
-			let renderProps = item.renderProps || item.itemRender?.props || {}
-			if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(props.data, item.field))) {
-				$vUtils.set(props.data, item.field, renderProps.defaultValue)
-			}
-		})
-	}
 	// 初始化表单项
 	const initFormItems = () => {
 		let rules = getFieldsRules(props.items)
@@ -124,7 +114,6 @@ export default function (props, context, proxy, isForm) {
 			// tag: vxe-form在 item监听时数据length为0时没有刷新视图补充
 			refreshRender()
 		}
-		initFormData()
 	}
 	// 初始化验证规则
 	const initEditRules = rules => {
@@ -177,15 +166,6 @@ export default function (props, context, proxy, isForm) {
 			initFormItems()
 		}
 	)
-	watch(
-		() => props.data,
-		() => {
-			initFormData()
-		},
-		{
-			immediate: true
-		}
-	)
 	watch(
 		() => props.items,
 		nv => {

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

@@ -84,7 +84,7 @@ export default defineComponent({
 		const styles = computed(() => {
 			return {
 				color: props.color,
-				backgroundColor: $vUtils.fade(props.color, 30)
+				backgroundColor: $vUtils.fade(props.color, 20)
 			}
 		})
 		const animateStyles = computed(() => {
@@ -164,44 +164,42 @@ export default defineComponent({
 	z-index: 15;
 	padding: 10px 0 10px 15px;
 	box-sizing: border-box;
-	&.sh-notice-bar-round {
+	&-round {
 		border-radius: 6px;
 	}
-	.sh-notice-icon {
-		cursor: pointer;
+	&-left,
+	&-right {
+		display: flex;
+		align-items: center;
 	}
-}
-.sh-notice-bar-left,
-.sh-notice-bar-right {
-	display: flex;
-	align-items: center;
-}
-
-.sh-notice-bar-left {
-	padding-right: 10px;
-}
-.sh-notice-bar-right {
-	padding: 0 10px;
-}
-.sh-notice-bar-empty {
-	padding-right: 0;
-}
-
-.sh-notice-bar-content {
-	flex: 1;
-	margin: auto;
-	width: auto;
-	white-space: nowrap;
-	overflow: hidden;
-	&.sh-notice-bar-multi-content {
-		padding: 0;
-		line-height: 1.5;
-		white-space: normal;
+	&-left {
+		padding-right: 10px;
+	}
+	&-right {
+		padding: 0 10px;
+	}
+	&-empty {
+		padding-right: 0;
+	}
+	&-content {
+		flex: 1;
+		margin: auto;
+		width: auto;
+		white-space: nowrap;
+		overflow: hidden;
+		&-multi-content {
+			padding: 0;
+			line-height: 1.5;
+			white-space: normal;
+		}
+		&-animate {
+			padding-left: 100%;
+			display: inline-block;
+			animation: sh-notice-bar-animation linear 30s infinite both;
+		}
 	}
-	.sh-notice-bar-content-animate {
-		padding-left: 100%;
-		display: inline-block;
-		animation: sh-notice-bar-animation linear 30s infinite both;
+	.sh-notice-icon {
+		cursor: pointer;
 	}
 }
 @keyframes sh-notice-bar-animation {

package/packages/components/sh-table/js/tableMethods.js

@@ -68,18 +68,19 @@ export const tableFooterCompute = (columns, data, computeType, typeObj = {}) =>
 export const turnColumnItemFilters = (column, props) => {
 	if (column.filters) return
 	let columnRender = column.cellRender || column.editRender || column.contentRender
-	let columnProps = Object.assign({}, props)
 	let renderSelects = ['$select', '$vSelect', '$vCheckgroup', '$vRadiogroup', '$vSwitch']
-	let renderTimes = ['$vTime']
-	if (renderTimes.includes(columnRender.name)) {
-		column.filters = [{ data: null }]
-		column.filterRender = { name: '$vFilterTime', props: columnProps }
+	let renderComplexs = ['$vTime', '$vMoney', '$vProgress']
+	let defaultProps = { colRender: columnRender }
+	if (renderComplexs.includes(columnRender.name)) {
+		defaultProps.type = columnRender.name === '$vTime' ? 'date' : 'number'
+		column.filters = [{ data: { type: 'has', valueSt: null, valueEd: null }, resetValue: { type: 'has', valueSt: null, valueEd: null } }]
+		column.filterRender = { name: '$vFilterComplex', props: Object.assign(defaultProps, props) }
 	} else if (renderSelects.includes(columnRender.name)) {
 		column.filters = Array.isArray(columnRender.props && columnRender.props.options) ? columnRender.props.options : []
 		if (column.filterMultiple === undefined) column.filterMultiple = true
 	} else {
 		column.filters = [{ data: null }]
-		column.filterRender = { name: '$vFilterInput', props: columnProps }
+		column.filterRender = { name: '$vFilterInput', props: Object.assign(defaultProps, props) }
 	}
 }
 // 转换表头校验规则

package/packages/components/sh-table/js/useTable.js

@@ -394,39 +394,6 @@ export default function (props, context, proxy, isGrid) {
 			})
 		}
 	}
-	// 初始化表头配置默认值
-	const initColsDefaultValue = () => {
-		let colsDefaultValue = {}
-		let colsFormulaValue = {}
-		$vUtils.eachTree(props.columns, item => {
-			let columnProps = item.renderProps || item.editRender?.props || item.cellRender?.props || {}
-			if (!$vUtils.isNone(columnProps.defaultValue)) {
-				colsDefaultValue[item.field] = columnProps.defaultValue
-			}
-			if (!$vUtils.isNone(columnProps.formula)) {
-				colsFormulaValue[item.field] = columnProps.formula
-			}
-		})
-		tableRowDefaultData.value = colsDefaultValue
-		if (Array.isArray(props.dataSourse)) {
-			props.dataSourse.forEach(row => {
-				if (Object.keys(colsDefaultValue).length > 0) {
-					Object.keys(colsDefaultValue).forEach(defaultKey => {
-						if ($vUtils.isNone($vUtils.get(row, defaultKey))) {
-							$vUtils.set(row, defaultKey, colsDefaultValue[defaultKey])
-						}
-					})
-				}
-				if (Object.keys(colsFormulaValue).length > 0) {
-					Object.keys(colsFormulaValue).forEach(formulaKey => {
-						let formulaValue = $vUtils.calculate(colsFormulaValue[formulaKey], row)
-						$vUtils.set(row, formulaKey, formulaValue)
-					})
-				}
-			})
-		}
-	}
-
 	// 全局搜索输入框事件
 	const handleTableFilter = obj => {
 		let filterText = tableFilterText.value
@@ -563,7 +530,6 @@ export default function (props, context, proxy, isGrid) {
 	watch(
 		() => props.dataSourse,
 		value => {
-			initColsDefaultValue()
 			selectionRows.value = []
 		},
 		{

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

@@ -9,10 +9,7 @@
 				<div ref="navScrollRef" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
 					<div ref="navRef" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
 						<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
-							<div
-								:class="{ 'sh-tab-item': true, 'sh-tab-item-disabled': tab.disabled, 'sh-tab-item-active': tab[labelKey] === activeKey }"
-								:style="getTabItemStyle(tab, tabIndex)"
-								@click="handleChange(tab)">
+							<div v-ripple v-bind="getTabItemBind(tab, tabIndex)" @click="handleChange(tab)">
 								<slot name="tabItem" v-bind="{ ...tab, isActive: tab[labelKey] === activeKey }">
 									<div v-if="tab.icon" class="sh-tab-icon"><sh-icon :type="tab.icon"></sh-icon></div>
 									<div class="sh-tab-label">{{ tab[labelField] }}</div>
@@ -161,14 +158,21 @@ export default defineComponent({
 		const getTabIsClosable = tab => {
 			return props.closable && !tab.disabled && !tab.unClosed
 		}
-		const getTabItemStyle = (tab, tabIndex) => {
+		const getTabItemBind = (tab, tabIndex) => {
 			let itemStyle = {}
 			if (isHorizontal.value) {
 				itemStyle.marginTop = tabIndex ? `${props.gutter}px` : 0
 			} else {
 				itemStyle.marginLeft = tabIndex ? `${props.gutter}px` : 0
 			}
-			return itemStyle
+			return {
+				style: itemStyle,
+				class: {
+					'sh-tab-item': true,
+					'sh-tab-item-disabled': tab.disabled,
+					'sh-tab-item-active': tab[props.labelKey] === activeKey.value
+				}
+			}
 		}
 		const handleResize = e => {
 			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
@@ -269,7 +273,7 @@ export default defineComponent({
 			handleChange,
 			handleClose,
 			getTabIsClosable,
-			getTabItemStyle
+			getTabItemBind
 		}
 	}
 })

package/packages/vxeTable/css/index.scss

@@ -198,6 +198,13 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
         box-sizing: border-box;
     }
     &--input{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .vxe-input{
+            width: 120px;
+            flex: 1;
+        }
     }
     &--list {
         margin: 0;
@@ -215,14 +222,16 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
             display: block;
         }
     }
+    &--inner{
+    }
     &--top{
         position: relative;
-        margin-bottom: 5px;
+        margin-bottom: 8px;
     }
     &--body{
     }
     &--footer{
-        margin-top: 5px;
+        margin-top: 8px;
         padding: 5px 0 2px;
         .vxe-button{
             margin-left: 0;

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

@@ -0,0 +1,45 @@
+<template>
+	<div class="vxe-filter--wrap">
+		<div class="vxe-filter--top">
+			<vxe-radio-group v-model="renderOption.data.type">
+				<template v-for="filterType in filterTypes" :key="filterType.value">
+					<vxe-radio-button v-ripple :label="filterType.value" size="mini">{{ filterType.label }}</vxe-radio-button>
+				</template>
+			</vxe-radio-group>
+		</div>
+		<div class="vxe-filter--input">
+			<vxe-input v-model="renderOption.data.valueSt" v-bind="rprops" :disabled="false" />
+			<template v-if="renderOption.data.type === 'ltgt'">
+				<span style="margin: 0 8px">至</span>
+				<vxe-input v-model="renderOption.data.valueEd" v-bind="rprops" :disabled="false" />
+			</template>
+		</div>
+	</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 filterTypes = [
+			{ value: 'has', label: '包含' },
+			{ value: 'eq', label: '等于' },
+			{ value: 'gt', label: '大于' },
+			{ value: 'lt', label: '小于' },
+			{ value: 'ltgt', label: '区间' }
+		]
+
+		const useFilter = filterHooks(props, context, proxy)
+
+		return {
+			...useFilter,
+			filterTypes
+		}
+	}
+})
+</script>

package/packages/vxeTable/render/globalRenders.jsx

@@ -29,7 +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'
+import vxeFilterComplex from './filters/vxe-filter-complex.vue'
 
 // 渲染器通用默认配置
 let defaultPublicProps = {
@@ -464,8 +464,7 @@ const extraRenders = {
 const filterRenders = {
 	$vFilterInput: {
 		renderFilter(renderOpts, params) {
-			let props = getFixedProp(renderOpts, params)
-			return [<vxeFilterInput rparams={params} rname={renderOpts.name} rprops={props.rprops} rkey={props.rkey} />]
+			return [<vxeFilterInput rparams={params} rprops={renderOpts.props} />]
 		},
 		filterResetMethod({ options, column }) {
 			options.forEach(option => {
@@ -479,26 +478,36 @@ const filterRenders = {
 			return String(rtext).toLowerCase().indexOf(data.toLowerCase()) > -1
 		}
 	},
-	$vFilterTime: {
+	$vFilterComplex: {
 		renderFilter(renderOpts, params) {
-			let props = getFixedProp(renderOpts, params)
-			return [<vxeFilterTime rparams={params} rname={renderOpts.name} rprops={props.rprops} rkey={props.rkey} />]
+			return [<vxeFilterComplex rparams={params} rprops={renderOpts.props} />]
 		},
 		filterResetMethod({ options, column }) {
 			options.forEach(option => {
-				option.data = option.resetValue || []
+				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
+			const { type, valueSt, valueEd } = data
+			let { rvalue, rtext } = utils.formatRender(cellValue, property, row, rname, rprops, { $vUtils: utils })
+			let isDate = ['date', 'time', 'datetime', 'week', 'month', 'year'].includes(rprops.type)
+			switch (type) {
+				case 'has':
+					return String(rtext).indexOf(valueSt) > -1
+				case 'eq':
+					return utils.isEqual(rvalue, valueSt)
+				case 'gt':
+					return isDate ? utils.getDateDiff(valueSt, rvalue).done : Number(rvalue) > Number(valueSt)
+				case 'lt':
+					return isDate ? utils.getDateDiff(rvalue, valueSt).done : Number(rvalue) < Number(valueSt)
+				case 'ltgt':
+					if (isDate) {
+						return utils.getDateDiff(valueSt, rvalue).done && utils.getDateDiff(rvalue, valueEd).done
+					}
+					return Number(rvalue) > Number(valueSt) && Number(rvalue) < Number(valueEd)
 			}
-			return data === rtext
 		}
 	}
 }

package/{packages/components/sh-alert → types}/alert.ts

@@ -1,30 +1,30 @@
-import { ShType } from '../../../types/component'
-
-export const alertProps = {
-	type: {
-		type: String as () => ShType,
-		default: 'info'
-	},
-	title: {
-		type: String
-	},
-	content: {
-		type: String
-	},
-	closable: {
-		type: Boolean,
-		default: false
-	},
-	showIcon: {
-		type: Boolean,
-		default: false
-	},
-	fade: {
-		type: Boolean,
-		default: true
-	},
-	block: {
-		type: Boolean,
-		default: false
-	}
-}
+import { ShType } from './component'
+
+export const alertProps = {
+	type: {
+		type: String as () => ShType,
+		default: 'info'
+	},
+	title: {
+		type: String
+	},
+	content: {
+		type: String
+	},
+	closable: {
+		type: Boolean,
+		default: false
+	},
+	showIcon: {
+		type: Boolean,
+		default: false
+	},
+	fade: {
+		type: Boolean,
+		default: true
+	},
+	block: {
+		type: Boolean,
+		default: false
+	}
+}

package/types/component.d.ts

@@ -1 +1 @@
-export type ShType = 'info' | 'success' | 'warning' | 'error'
+export type ShType = 'info' | 'success' | 'warning' | 'error'

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

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