sh-view 2.6.6 → 2.6.7

package/README.md

@@ -66,7 +66,8 @@ createApp(App).use(ShView).mount('#app')
 
 #### 功能计划
 * [x] v2.6.4 基于 vxe4.+，包含vxe-table所有功能，扩展更强渲染器
-* [ ] 下一阶段：独立vxe的日历组件，独立范围选择日期渲染器；低代码配置；基础sh-view的admin系统开源（包含低代码设计模板，及系统鉴权、路由守卫等）
+* [x] v2.6.7：独立日历组件，扩展日期选择组件(支持日期的单选，范围选择，多日期选择等)；
+* [ ] 下一阶段：基础sh-view的admin系统开源（包含低代码设计模板，及系统鉴权、路由守卫等）
 
 
 #### 项目预览

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -29,12 +29,12 @@
     "jszip": "^3.10.1",
     "lunar-javascript": "^1.6.4",
     "popper.js": "^1.16.1",
-    "sh-tools": "^2.1.6",
+    "sh-tools": "^2.1.7",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-masonry": "^0.16.0",
     "vue-router": "^4.2.4",
-    "vxe-table": "^4.5.11",
+    "vxe-table": "^4.5.12",
     "vxe-table-plugin-export-pdf": "^3.0.4",
     "vxe-table-plugin-export-xlsx": "^3.0.5",
     "xe-clipboard": "^1.10.2",

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

@@ -8,7 +8,7 @@
 			</div>
 			<div class="sh-alert-content">
 				<slot>{{ title }}</slot>
-				<div class="sh-alert-desc">
+				<div v-if="content || $slots.content" class="sh-alert-desc">
 					<slot name="content">{{ content }}</slot>
 				</div>
 			</div>

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

@@ -8,11 +8,11 @@
 				</template>
 			</div>
 		</div>
-		<table class="sh-calendar-table" v-bind="tableConfig">
+		<table class="sh-calendar-table" :class="{ 'sh-calendar-pulldown': pulldown }" v-bind="tableConfig">
 			<thead>
 				<tr>
 					<template v-for="(head, headIndex) in headers" :key="headIndex">
-						<th>{{ head.label }}</th>
+						<th :style="{ textAlign: headerAlign }">{{ head.label }}</th>
 					</template>
 				</tr>
 			</thead>
@@ -75,6 +75,7 @@ export default defineComponent({
 		modelValue: [String, Number, Date],
 		type: { type: String, default: 'day' }, // day, month, year 暂时只支持day
 		startDay: { type: [String, Number], default: 1 },
+		headerAlign: { type: String, default: 'center' },
 		align: { type: String, default: 'center' },
 		header: { type: Boolean, default: true },
 		footer: { type: Boolean, default: false },
@@ -82,13 +83,15 @@ export default defineComponent({
 		noteHeight: { type: String, default: '22px' }, // 备注高度
 		noteMethod: { type: Function, default() {} },
 		festival: { type: Boolean, default: false }, // 是否显示农历
+		pulldown: { type: Boolean, default: false }, // 是否为下拉显示
 		valueFormat: { type: String, default: '' },
 		weeks: {
 			type: Array,
 			default() {
 				return ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 			}
-		}
+		},
+		disabledMethod: { type: Function }
 	},
 	emits: ['update:modelValue', 'change'],
 	setup(props, context) {
@@ -445,6 +448,18 @@ export default defineComponent({
 			font-size: 0.8em;
 		}
 	}
+	.sh-calendar-table {
+		&:not(.sh-calendar-pulldown) {
+			td {
+				border: 1px solid var(--vxe-table-border-color);
+			}
+		}
+		&.sh-calendar-pulldown {
+			tbody {
+				border: 1px solid var(--vxe-table-border-color);
+			}
+		}
+	}
 	table {
 		border: 0;
 		width: 100%;
@@ -457,9 +472,11 @@ export default defineComponent({
 	td {
 		font-weight: normal;
 		position: relative;
-		border: 1px solid var(--vxe-table-border-color);
 		height: 36px;
 	}
+	th {
+		border: 1px solid var(--vxe-table-border-color);
+	}
 	td {
 		&.is--prev,
 		&.is--next {

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

@@ -0,0 +1,273 @@
+<template>
+	<div class="sh-date">
+		<template v-if="range">
+			<vxe-pulldown v-model="pulldownValue" v-bind="pulldownConfig" @hide-panel="onHidePanel">
+				<template #default>
+					<div class="sh-date-range-input" @click="onRangeFocus">
+						<input class="vxe-input vxe-input--inner" v-bind="startInputConfig" />
+						<span>{{ separator }}</span>
+						<input class="vxe-input vxe-input--inner" v-bind="endInputConfig" />
+						<span class="sh-date-range-suffix sh-date-clear" @click.stop="onRangeClear"><i class="vxe-icon-error-circle-fill"></i></span>
+						<span class="sh-date-range-suffix"><i class="vxe-icon-calendar"></i></span>
+					</div>
+				</template>
+				<template #dropdown>
+					<div class="sh-date-content">
+						<sh-calendar v-model="rangeValue[0]" v-bind="startCalendarConfig"></sh-calendar>
+						<div style="min-width: 10px"></div>
+						<sh-calendar v-model="rangeValue[1]" v-bind="endCalendarConfig"></sh-calendar>
+					</div>
+				</template>
+			</vxe-pulldown>
+		</template>
+		<template v-else>
+			<vxe-input
+				v-model="inputValue"
+				v-bind="inputConfig"
+				@input="dispatch('input', $event)"
+				@change="dispatch('change', $event)"
+				@keydown="dispatch('keydown', $event)"
+				@keyup="dispatch('keyup', $event)"
+				@click="dispatch('click', $event)"
+				@focus="dispatch('focus', $event)"
+				@blur="dispatch('blur', $event)"
+				@clear="dispatch('clear', $event)"
+				@search-click="dispatch('search-click', $event)"
+				@toggle-visible="dispatch('toggle-visible', $event)"
+				@prefix-click="dispatch('prefix-click', $event)"
+				@suffix-click="dispatch('suffix-click', $event)"
+				@date-prev="dispatch('date-prev', $event)"
+				@date-today="dispatch('date-today', $event)"
+				@date-next="dispatch('date-next', $event)"></vxe-input>
+		</template>
+	</div>
+</template>
+
+<script>
+// 记录自定义参数,传给vxe要过滤掉
+let omitProps = ['range', 'separator', 'startPlaceholder', 'endPlaceholder', 'pulldown']
+import { computed, defineComponent, getCurrentInstance, ref, reactive, onBeforeMount, PropType, watch } from 'vue'
+export default defineComponent({
+	name: 'ShDate',
+	props: {
+		modelValue: [String, Number, Date, Array],
+		type: { type: String, default: 'date' },
+		clearable: { type: Boolean },
+		readonly: Boolean,
+		disabled: Boolean,
+		placeholder: String,
+		className: String,
+		size: String,
+		multiple: Boolean,
+		// date、week、month、quarter、year
+		startDate: { type: [String, Number, Date] },
+		endDate: { type: [String, Number, Date] },
+		minDate: [String, Number, Date],
+		maxDate: [String, Number, Date],
+		startDay: { type: [String, Number] },
+		labelFormat: { type: String, default: 'yyyy-MM-dd' },
+		valueFormat: { type: String, default: 'yyyy-MM-dd' },
+		editable: { type: Boolean, default: true },
+		festivalMethod: { type: Function },
+		disabledMethod: { type: Function },
+		// week
+		selectDay: { type: [String, Number] },
+		prefixIcon: String,
+		suffixIcon: String,
+		placement: String,
+		transfer: Boolean,
+		// 个性化参数
+		range: Boolean,
+		separator: { type: String, default: '至' },
+		startPlaceholder: { type: String, default: '起始日期' },
+		endPlaceholder: { type: String, default: '截止日期' },
+		pulldown: Object
+	},
+	emits: [
+		'update:modelValue',
+		'focus',
+		'change',
+		'blur',
+		'input',
+		'keydown',
+		'keyup',
+		'click',
+		'clear',
+		'search-click',
+		'toggle-visible',
+		'prefix-click',
+		'suffix-click',
+		'date-prev',
+		'date-today',
+		'date-next'
+	],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const pulldownValue = ref(false)
+		const inputValue = ref(props.modelValue)
+		const rangeValue = ref(props.modelValue || [])
+
+		const inputConfig = computed(() => {
+			let defaultProps = {}
+			let vxeProps = $vUtils.omit(props, (val, key) => {
+				return omitProps.includes(key) || $vUtils.isNone(val)
+			})
+			let shProps = {}
+			return Object.assign(defaultProps, vxeProps, shProps)
+		})
+		const pulldownConfig = computed(() => {
+			return Object.assign({ transfer: true }, props.pulldown)
+		})
+		const rangeInputConfig = computed(() => ({ type: 'text', readonly: true }))
+		const startInputConfig = computed(() => {
+			let startValue = rangeValue.value[0] || ''
+			let startLabel = $vUtils.toDateString(startValue, props.labelFormat)
+			return { ...rangeInputConfig.value, value: startLabel, placeholder: props.startPlaceholder }
+		})
+		const endInputConfig = computed(() => {
+			let endValue = rangeValue.value[1] || ''
+			let endLabel = $vUtils.toDateString(endValue, props.labelFormat)
+			return { ...rangeInputConfig.value, value: endLabel, placeholder: props.endPlaceholder }
+		})
+		const calendarConfig = computed(() => ({ pulldown: true, style: { height: '100%' }, align: 'center', valueFormat: props.valueFormat }))
+		const startCalendarConfig = computed(() => {
+			let startValue = rangeValue.value[0] || ''
+			return {
+				...calendarConfig.value,
+				modelValue: startValue,
+				disabledMethod: ({ date, viewType }) => {
+					let endTime = rangeValue.value[1]
+					let { done, time } = $vUtils.getDateDiff(endTime, date)
+					return done
+				}
+			}
+		})
+		const endCalendarConfig = computed(() => {
+			let endValue = rangeValue.value[1] || ''
+			return {
+				...calendarConfig.value,
+				modelValue: endValue,
+				disabledMethod: ({ date, viewType }) => {
+					let startTime = rangeValue.value[0]
+					let { done, time } = $vUtils.getDateDiff(startTime, date)
+					return startTime ? !done : false
+				}
+			}
+		})
+
+		const onRangeFocus = async e => {
+			pulldownValue.value = !pulldownValue.value
+			if (pulldownValue.value) {
+				dispatch('focus', e)
+			}
+		}
+		const onRangeClear = () => {
+			pulldownValue.value = false
+			rangeValue.value = []
+			onHidePanel()
+		}
+		const onHidePanel = () => {
+			dispatch('value')
+			dispatch('change')
+			dispatch('blur')
+		}
+
+		// 回调事件
+		const dispatch = (code, params) => {
+			if (code === 'value') {
+				emit('update:modelValue', rangeValue.value)
+			} else if (props.range) {
+				emit(code, { value: rangeValue.value, params })
+			} else {
+				if (code === 'change') {
+					emit('update:modelValue', params.value)
+				}
+				emit(code, params)
+			}
+		}
+
+		watch(
+			() => props.modelValue,
+			(value, oldValue) => {
+				if (props.range) {
+					rangeValue.value = value
+				} else {
+					inputValue.value = value
+				}
+			}
+		)
+
+		return {
+			pulldownValue,
+			inputValue,
+			rangeValue,
+			inputConfig,
+			pulldownConfig,
+			startInputConfig,
+			endInputConfig,
+			startCalendarConfig,
+			endCalendarConfig,
+			onRangeFocus,
+			onHidePanel,
+			onRangeClear,
+			dispatch
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-date {
+	display: inline-block;
+	position: relative;
+}
+.sh-date-range-input {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: var(--vxe-border-radius);
+	color: var(--vxe-font-color);
+	border: 1px solid var(--vxe-input-border-color);
+	background-color: var(--vxe-input-background-color);
+	box-shadow: none;
+	&:hover {
+		.sh-date-clear {
+			display: flex;
+		}
+	}
+	input {
+		width: 100%;
+		border: none;
+		color: inherit;
+		text-align: center;
+	}
+	.sh-date-range-suffix {
+		color: var(--vxe-table-column-icon-border-color);
+		height: 100%;
+		display: inline-flex;
+		margin-right: 8px;
+	}
+	.sh-date-clear {
+		cursor: pointer;
+		display: none;
+		position: absolute;
+		right: 0;
+		height: 100%;
+		justify-content: center;
+		align-items: center;
+		&:hover {
+			color: inherit;
+		}
+	}
+}
+.sh-date-content {
+	display: flex;
+	justify-content: space-between;
+	padding: 12px;
+	width: 600px;
+	max-width: 100%;
+}
+</style>

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

@@ -162,7 +162,7 @@ export default defineComponent({
 		const onDataCall = datas => {
 			treeData.value = datas
 		}
-		// 回调fouces事件
+		// 回调focus事件
 		const emitFocus = obj => {
 			emit('focus', obj)
 		}
@@ -171,7 +171,7 @@ export default defineComponent({
 			emitValue()
 			emit('change', selectedKeys.value, selectedData.value)
 		}
-		// 回调fouces事件
+		// 回调blur事件
 		const emitBlur = () => {
 			emit('blur', selectedKeys.value, selectedData.value)
 		}

package/packages/components/index.js

@@ -7,6 +7,7 @@ import ShCodeEditor from './global-components/sh-code-editor/index.vue'
 import ShCol from './global-components/sh-col/index.vue'
 import ShCorner from './global-components/sh-corner/index.vue'
 import ShCountTo from './global-components/sh-count-to/index.vue'
+import ShDate from './global-components/sh-date/index.vue'
 import ShDrawer from './global-components/sh-drawer/index.vue'
 import ShEmpty from './global-components/sh-empty/index.vue'
 import ShForm from './global-components/sh-form/form.vue'
@@ -44,6 +45,7 @@ const components = {
 	ShCol,
 	ShCorner,
 	ShCountTo,
+	ShDate,
 	ShDrawer,
 	ShEmpty,
 	ShForm,

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

@@ -1,44 +1,44 @@
-<template>
-	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
-		<template v-if="redit || isEditAll">
-			<vxe-input v-model="renderValue" v-bind="rprops" :size="rsize" :disabled-method="vxeDisabledMethod" @change="vxeChangeCallBack"></vxe-input>
-		</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: 'VxeRenderTime',
-	props: cellProps,
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const useCell = cellHooks(props, context, proxy)
-
-		// 禁用事件
-		const vxeDisabledMethod = ({ date, viewType }) => {
-			let { startTime, endTime } = props.rprops
-			if (startTime) {
-				startTime = $vUtils.format(startTime, props.rdata)
-				let { done, time } = $vUtils.getDateDiff(startTime, date)
-				return startTime ? !done : false
-			} else if (endTime) {
-				endTime = $vUtils.format(endTime, props.rdata)
-				let { done, time } = $vUtils.getDateDiff(endTime, date)
-				return done
-			}
-		}
-
-		return {
-			...useCell,
-			vxeDisabledMethod
-		}
-	}
-})
-</script>
+<template>
+	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
+		<template v-if="redit || isEditAll">
+			<sh-date v-model="renderValue" v-bind="rprops" :size="rsize" :disabled-method="vxeDisabledMethod" @change="vxeChangeCallBack"></sh-date>
+		</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: 'VxeRenderTime',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const useCell = cellHooks(props, context, proxy)
+
+		// 禁用事件
+		const vxeDisabledMethod = ({ date, viewType }) => {
+			let { startTime, endTime } = props.rprops
+			if (startTime) {
+				startTime = $vUtils.format(startTime, props.rdata)
+				let { done, time } = $vUtils.getDateDiff(startTime, date)
+				return startTime ? !done : false
+			} else if (endTime) {
+				endTime = $vUtils.format(endTime, props.rdata)
+				let { done, time } = $vUtils.getDateDiff(endTime, date)
+				return done
+			}
+		}
+
+		return {
+			...useCell,
+			vxeDisabledMethod
+		}
+	}
+})
+</script>

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

@@ -35,7 +35,7 @@ export default function (props, context, proxy) {
 	const rform = computed(() => !!props.rparams.$form)
 	const reditmode = computed(() => props.rparams.$table?.props?.editConfig?.mode)
 	const isEditAll = computed(() => {
-		return props.rparams.$table?.props?.editConfig?.enabled && reditmode.value === 'all'
+		return props.rparams.$table?.props?.editConfig?.enabled && reditmode.value === 'all' && props.rparams.column.editRender
 	})
 	const moneyUnitText = computed(() => {
 		let moneyConstant = moneyUnitConstants.find(item => item.value === props.rprops.moneyUnit)

package/README.en.md

@@ -1,36 +0,0 @@
-# sh-view
-
-#### Description
-{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
-
-#### Software Architecture
-Software architecture description
-
-#### Installation
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Instructions
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Contribution
-
-1.  Fork the repository
-2.  Create Feat_xxx branch
-3.  Commit your code
-4.  Create Pull Request
-
-
-#### Gitee Feature
-
-1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4.  The most valuable open source project [GVP](https://gitee.com/gvp)
-5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)