sh-view 2.8.3 → 2.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "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",

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-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/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,4 +1,4 @@
-import { ShType } from '../../../types/component'
+import { ShType } from './component'
 
 export const alertProps = {
 	type: {

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>