sh-view 2.7.8 → 2.8.0

package/packages/vxeTable/render/cell/vxe-render-tree.vue

@@ -1,63 +1,70 @@
-<template>
-	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
-		<template v-if="redit || isEditAll">
-			<span v-if="rprops.prefixText && rform" class="prefix">
-				<vxe-button v-if="prefixButton" v-bind="psButtonConfig" @click="vxeInputPrefixClick">{{ rprops.prefixText }}</vxe-button>
-				<span v-else @click="vxeInputPrefixClick">{{ rprops.prefixText }}</span>
-			</span>
-			<sh-tree v-model="renderValue" v-bind="rprops" :field="rkey" :value-data="rdata" :size="rsize" is-select @change="vxeTreeCallback"></sh-tree>
-			<span v-if="rprops.suffixText && rform" class="suffix">
-				<vxe-button v-if="suffixButton" v-bind="psButtonConfig" @click="vxeInputSuffixClick">{{ rprops.suffixText }}</vxe-button>
-				<span v-else @click="vxeInputSuffixClick">{{ rprops.suffixText }}</span>
-			</span>
-		</template>
-		<template v-else>
-			<span v-html="renderText"></span>
-		</template>
-	</span>
-</template>
-
-<script>
-import { defineComponent, getCurrentInstance } from 'vue'
-import cellProps from '../mixin/cell-props'
-import cellHooks from '../mixin/cell-hooks'
-export default defineComponent({
-	name: 'VxeRenderTree',
-	props: cellProps,
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const useCell = cellHooks(props, context, proxy)
-
-		// 输入框回调
-		const vxeTreeCallback = (selectedKeys, selectedRows) => {
-			let { valueKeys, multiple } = props.rprops
-			if (!multiple) {
-				selectedKeys = selectedKeys[0] || ''
-			}
-			if (valueKeys && selectedRows && selectedRows.length > 0) {
-				let prefixKey = props.rkey.endsWith('Id') ? String(props.rkey).replace('Id', '') : props.rkey
-				let valueks = Array.isArray(valueKeys) ? valueKeys : valueKeys.split(',')
-				valueks.forEach(key => {
-					let keySplits = key.split('=')
-					let fromDefaultKey = String(keySplits[0]).replace(/@/gi, '').toLowerCase()
-					let fromKey = keySplits[1] || String(keySplits[0]).replace(/@/gi, prefixKey)
-					let fromvalue = null
-					if (multiple) {
-						fromvalue = selectedRows.map(item => $vUtils.get(item, fromKey) || $vUtils.get(item, fromDefaultKey))
-					} else {
-						fromvalue = $vUtils.get(selectedRows[0], fromKey) || $vUtils.get(selectedRows[0], fromDefaultKey)
-					}
-					$vUtils.set(props.rdata, fromKey, fromvalue)
-				})
-			}
-			useCell.setRenderValue(selectedKeys, true)
-		}
-
-		return {
-			...useCell,
-			vxeTreeCallback
-		}
-	}
-})
-</script>
+<template>
+	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
+		<template v-if="redit || isEditAll">
+			<span v-if="rprops.prefixText && rform" class="prefix">
+				<vxe-button v-if="prefixButton" v-bind="psButtonConfig" @click="vxeInputPrefixClick">{{ rprops.prefixText }}</vxe-button>
+				<span v-else @click="vxeInputPrefixClick">{{ rprops.prefixText }}</span>
+			</span>
+			<sh-tree v-model="renderValue" v-bind="rprops" :field="rkey" :value-data="rdata" :size="rsize" is-select @change="vxeTreeCallback"></sh-tree>
+			<span v-if="rprops.suffixText && rform" class="suffix">
+				<vxe-button v-if="suffixButton" v-bind="psButtonConfig" @click="vxeInputSuffixClick">{{ rprops.suffixText }}</vxe-button>
+				<span v-else @click="vxeInputSuffixClick">{{ rprops.suffixText }}</span>
+			</span>
+		</template>
+		<template v-else>
+			<span v-html="renderText"></span>
+		</template>
+	</span>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderTree',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const useCell = cellHooks(props, context, proxy)
+
+		// 输入框回调
+		const vxeTreeCallback = (selectedKeys, selectedRows) => {
+			let { valueKeys, multiple } = props.rprops
+			let rvalue = selectedKeys
+			if (!multiple) {
+				rvalue = selectedKeys[0] || ''
+			}
+			if (valueKeys && selectedRows && selectedRows.length > 0) {
+				let prefixKey = props.rkey
+				let endStrs = ['Id', '_id']
+				endStrs.forEach(end => {
+					if (props.rkey.endsWith(end)) {
+						prefixKey = props.rkey.replace(end, '')
+					}
+				})
+				let valueks = Array.isArray(valueKeys) ? valueKeys : valueKeys.split(',')
+				valueks.forEach(key => {
+					let keySplits = key.split('=')
+					let fromDefaultKey = String(keySplits[0]).replace(/@/gi, '').toLowerCase()
+					let fromKey = keySplits[1] || String(keySplits[0]).replace(/@/gi, prefixKey)
+					let fromvalue = null
+					if (multiple) {
+						fromvalue = selectedRows.map(item => $vUtils.get(item, fromKey) || $vUtils.get(item, fromDefaultKey))
+					} else {
+						fromvalue = $vUtils.get(selectedRows[0], fromKey) || $vUtils.get(selectedRows[0], fromDefaultKey)
+					}
+					$vUtils.set(props.rdata, fromKey, fromvalue)
+				})
+			}
+			useCell.setRenderValue(rvalue, true)
+		}
+
+		return {
+			...useCell,
+			vxeTreeCallback
+		}
+	}
+})
+</script>

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
+		}
 	}
 }
 

package/packages/vxeTable/render/mixin/filter-hooks.js

@@ -1,28 +1,46 @@
-import { computed, onBeforeMount, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
-export default function (props, context, proxy) {
+export default function (props, context, proxy, initRenderData) {
 	const { $vUtils } = proxy
-	const renderValue = ref({})
+
+	let renderOption = ref({})
 
 	// 初始化
 	const initData = () => {
 		const { column, $panel } = props.rparams
 		const option = column.filters[0]
-		renderValue.value = option
-		$panel.changeOption(null, Boolean(renderValue.value.data), option)
+		renderOption.value = option
+		$panel.changeOption(null, Boolean(renderOption.value.data), option)
+	}
+
+	// 过滤回调option
+	const vxeFilterChange = ({ value, $event }) => {
+		const { $panel } = props.rparams
+		$panel.changeOption(null, Boolean(renderOption.value.data), renderOption.value)
 	}
-	// 过滤回调
-	const vxeFilterCallback = ({ value, $event }) => {
+
+	// 过滤确认
+	const vxeFilterConfirm = () => {
+		const { $panel } = props.rparams
+		$panel.confirmFilter()
+	}
+
+	// 过滤充值
+	const vxeFilterReset = () => {
 		const { $panel } = props.rparams
-		$panel.changeOption(null, Boolean(renderValue.value.data), renderValue.value)
+		$panel.resetFilter()
 	}
 
-	onBeforeMount(() => {
-		initData()
-	})
+	watch(
+		() => props.rkey,
+		() => (initRenderData ? initRenderData() : initData()),
+		{ deep: true, immediate: true }
+	)
 
 	return {
-		renderValue,
-		vxeFilterCallback
+		renderOption,
+		vxeFilterChange,
+		vxeFilterConfirm,
+		vxeFilterReset
 	}
 }

package/packages/components/global-components/sh-header/index.vue

@@ -1,278 +0,0 @@
-<template>
-	<div class="sh-page-header" :style="styles" :class="classes">
-		<sh-loading :loading="loading" />
-		<div class="sh-page-header-heading">
-			<div class="sh-page-header-heading-left">
-				<div v-if="showback" class="sh-page-header-back">
-					<div class="sh-page-header-back-button" @click="handleBack"><sh-icon :size="iconSize" type="ios-arrow-back" /></div>
-				</div>
-				<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="iconColor"></sh-icon>
-				<span v-if="title || slots.title" class="sh-page-header-heading-title" :style="{ textAlign: align, flex: align ? '1' : 'auto' }">
-					<slot name="title">{{ title }}</slot>
-				</span>
-				<span v-if="subTitle || slots.subTitle" class="sh-page-header-heading-sub-title">
-					<slot name="subTitle">{{ subTitle }}</slot>
-				</span>
-				<span v-if="slots.tags" class="sh-page-header-heading-tags"><slot name="tags"></slot></span>
-			</div>
-			<div class="sh-page-header-heading-right">
-				<span v-if="slots.extra" class="sh-page-header-heading-extra"><slot name="extra"></slot></span>
-			</div>
-		</div>
-		<div v-if="slots.default" class="sh-page-header-content" :class="{ 'no-padding': !title && !slots.title && !subTitle && !slots.subTitle && !slots.tags && !slots.extra }">
-			<slot></slot>
-		</div>
-		<slot name="body"></slot>
-		<div v-if="slots.footer" class="sh-page-header-footer"><slot name="footer"></slot></div>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
-export default defineComponent({
-	name: 'ShHeader',
-	props: {
-		size: {
-			type: String,
-			default: 'default'
-		},
-		color: {
-			type: String,
-			default: ''
-		},
-		theme: {
-			type: String,
-			default: ''
-		},
-		align: {
-			type: String,
-			default: 'left'
-		},
-		icon: {
-			type: String
-		},
-		iconSize: {
-			type: Number,
-			default: 20
-		},
-		iconColor: {
-			type: String
-		},
-		ghost: {
-			type: Boolean
-		},
-		full: {
-			type: Boolean
-		},
-		border: {
-			type: Boolean
-		},
-		type: {
-			type: String,
-			default: '' // 'success', 'info', 'warning', 'error'
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		subTitle: {
-			type: String,
-			default: ''
-		},
-		loading: {
-			type: Boolean
-		},
-		nowrap: {
-			type: Boolean
-		},
-		showback: {
-			type: Boolean
-		}
-	},
-	emits: ['back'],
-	setup(props, context) {
-		const { emit, slots } = context
-
-		const styles = computed(() => {
-			return {
-				backgroundColor: props.color
-			}
-		})
-		const classes = computed(() => {
-			return {
-				'sh-page-header-ghost': props.ghost,
-				'sh-page-header-full': props.full,
-				'sh-page-header-border': props.border,
-				'has-footer': slots.footer,
-				[`sh-page-header-${props.theme}`]: props.theme,
-				[`${props.type}`]: props.type,
-				[`${props.size}`]: props.size,
-				'sh-page-header-nowrap': props.nowrap
-			}
-		})
-
-		const handleBack = () => {
-			emit('back')
-		}
-		return {
-			styles,
-			classes,
-			slots,
-			handleBack
-		}
-	}
-})
-</script>
-
-<style lang="scss" scoped>
-.sh-page-header {
-	display: block;
-	box-sizing: border-box;
-	border-radius: 2px;
-	line-height: 1.5;
-	position: relative;
-	padding: 0.5rem 1rem;
-	background-color: var(--vxe-table-body-background-color);
-	&.sh-page-header-full {
-		padding-left: 0;
-		padding-right: 0;
-	}
-	&.sh-page-header-dark {
-		color: #fff;
-		background: #333;
-	}
-	&.sh-page-header-primary {
-		background-color: var(--vxe-primary-color);
-		color: #fff;
-	}
-	&.sh-page-header-success {
-		background-color: var(--vxe-success-color);
-		color: #fff;
-	}
-	&.sh-page-header-warning {
-		background-color: var(--vxe-warning-color);
-		color: #fff;
-	}
-	&.sh-page-header-error {
-		background-color: var(--vxe-danger-color);
-		color: #fff;
-	}
-	&.sh-page-header-info {
-		background-color: var(--vxe-info-color);
-		color: #fff;
-	}
-	&.sh-page-header-ghost {
-		background-color: transparent;
-	}
-	&.sh-page-header-border {
-		border: 1px solid var(--vxe-table-border-color);
-	}
-	&.sh-page-header-nowrap {
-		.sh-page-header-heading-title {
-			white-space: nowrap;
-		}
-	}
-	&.success {
-		border-left: 4px solid var(--vxe-success-color);
-		background-color: #edfff3;
-		.sh-page-header-heading-title {
-			color: var(--vxe-success-color);
-		}
-	}
-	&.info {
-		border-left: 4px solid var(--vxe-info-color);
-		background-color: #f0faff;
-		.sh-page-header-heading-title {
-			color: var(--vxe-info-color);
-		}
-	}
-	&.warning {
-		border-left: 4px solid var(--vxe-warning-color);
-		background-color: #fff9e6;
-		.sh-page-header-heading-title {
-			color: var(--vxe-warning-color);
-		}
-	}
-	&.error {
-		border-left: 4px solid var(--vxe-danger-color);
-		background-color: #ffefe6;
-		.sh-page-header-heading-title {
-			color: var(--vxe-danger-color);
-		}
-	}
-	&.large {
-		.sh-page-header-heading-title {
-			font-size: 1.4285rem;
-		}
-	}
-	&.default {
-		.sh-page-header-heading-title {
-			font-size: 1.2857rem;
-		}
-	}
-	&.small {
-		.sh-page-header-heading-title {
-			font-size: 1rem;
-		}
-	}
-	&.mini {
-		.sh-page-header-heading-title {
-			font-size: 0.8571rem;
-		}
-	}
-	.sh-page-header-heading {
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		.sh-page-header-heading-left {
-			flex: 1;
-			display: inline-flex;
-			justify-content: flex-start;
-			align-items: center;
-			.sh-page-header-back {
-				font-size: 1.2rem;
-				line-height: 1;
-				margin-right: 0.5rem;
-				.sh-page-header-back-button {
-					color: inherit;
-					text-decoration: none;
-					outline: none;
-					transition: color 0.3s;
-					cursor: pointer;
-					&:hover {
-						opacity: 0.85;
-					}
-				}
-			}
-			.sh-page-header-heading-title {
-				display: block;
-				margin-right: 0.5rem;
-				font-weight: 600;
-			}
-			i + .sh-page-header-heading-title {
-				margin-left: 0.5rem;
-			}
-			.sh-page-header-heading-sub-title {
-				margin-right: 0.5rem;
-				color: rgba(0, 0, 0, 0.45);
-			}
-			.sh-page-header-heading-tags {
-			}
-		}
-		.sh-page-header-heading-right {
-			.sh-page-header-heading-extra {
-			}
-		}
-	}
-	.sh-page-header-content {
-		margin-top: 10px;
-		&.no-padding {
-			padding-top: 0;
-		}
-	}
-	.sh-page-header-footer {
-		margin-top: 10px;
-	}
-}
-</style>