sh-view 2.10.6 → 2.10.8

package/README.md

@@ -54,20 +54,84 @@ npm install sh-tools sh-view@next
 ```javascript
 import { createApp } from 'vue'
 import ShView from 'sh-view'
-
-createApp(App).use(ShView).mount('#app')
+// 进行全局自定义，可扩展性更强
+let options = {
+	uiOption: {},
+	tableOption: {},
+	menuOption: {},
+	editorOption: {},
+	validateOption: {}
+}
+createApp(App).use(ShView, options).mount('#app')
 ```
 
 #### 使用说明
+1.  table与form的二次封装完全保留的vxe-table的所有功能，在其基础上进行扩展
+2.  table与form支持了公式配置计算，并解决了公式互相依赖计算问题，全局配置如下
+```javascript
+    // 以下为默认配置
+    // enabled 为false,则关闭公式计算
+    // data 为扩展参数计算的数据，例如一些计算要从系统的菜单或者用户信息中取数据使用，计算时会进行Object.assign({}, row, data),注意data中的信息会覆盖
+    // type 参数说明  all：实时全局计算，row: 整行计算，编辑后整行所有公式均计算，edit: 按需计算，编辑后所有依赖此字段的项进行重新计算
+    uiOption.caculateConfig = {
+       enabled: true,
+       type: 'edit',
+       data: {}
+    }
+	// 例如有 a b c d四个字段 存在公式 c = d * 2, a = b + c, 则会优先计算 c, 然后再进行计算  a = b + c得到正确的结果
+    // 示例表头配置
+    // 注意支持公式计算的只有 $vMoney 及 $vNumber渲染器
+    let columns = [
+		{ field: a, title: 'a', renderName: '$vMoney', renderPorps: { formula: '{b} + {c}' } },
+		{ field: b, title: 'b', renderName: '$vMoney' },
+		{ field: c, title: 'c', renderName: '$vMoney', renderPorps: { formula: '{d} * 2' } },
+		{ field: d, title: 'd', renderName: '$vMoney' },
+    ]
+    // 更多公式计算配置 详见  sh-tools 内有详细说明
+
+```
+3.  table支持了金额切换，全局配置如下
+```javascript
+    // 以下为默认配置
+    // enabled 为false,则关闭金额
+    // titleUnit 渲染器为 $vMoney的表头 是否显示金额单位
+    // options 为金额切换下拉数据源
+    uiOption.moneyConfig = {
+	    enabled: false,
+		titleUnit: true,
+		options: [
+		{ value: 1, label: '元', digits: 2 },
+		{ value: 1000, label: '千元', digits: 4 },
+		{ value: 10000, label: '万元', digits: 6 }
+	]
+}
+```
 
-1.  暂无文档，请参考示例或者组件api
-2.  作者QQ：577754811
+4. table的导入导出功能完善，完全进行重构，高级导出面板更使用于用户使用，扩展了导出是否在表头上增加金额单位，及自定义的表格ID，及表头信息，用于在导出的模板在导入时进行校验，支持了多级表头的导入导出
+详见 userTable.js 中的onExportData方法
+且导入导出方法中增加了事件钩子
+如果导出全量数据时，要配置 getAllDataMethod去数据
+导入时增加了 importBefore, importValidate, importFinished, downloadTemplate, downloadFinished等钩子用户自定义校验及处理数据
 
+5. code编辑器组件，扩展了编码自动补全方案，
+```javascript
+    // 以下为示例配置
+    // jsSnippets 为js模式扩展的自定义自动补全
+    // sqlSnippets 为sql模式扩展的自定义自动补全
+    // jsonSnippets 为json模式扩展的自定义自动补全
+    uiOption.codeConfig = {
+	    jsSnippets: [
+			{ label: 'const', content: 'const ${}', detail: 'const' },
+			{ label: 'let', content: 'let ${}', detail: 'let' }
+        ],
+		sqlSnippets: [
+			{ label: 'select', content: 'select ${}', detail: 'select' },
+			{ label: 'sf', content: 'select * from ${}', detail: 'select * from' }
+        ],
+		jsonSnippets: []
+    }
+```
 
-#### 功能计划
-* [x] v2.6.4 基于 vxe4.+，包含vxe-table所有功能，扩展更强渲染器
-* [x] v2.6.7：独立日历组件，扩展日期选择组件(支持日期的单选，范围选择，多日期选择等)；
-* [ ] 下一阶段：基础sh-view的admin系统开源（包含低代码设计模板，及系统鉴权、路由守卫等）
 
 
 #### 项目预览

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sh-view",
-	"version": "2.10.6",
+	"version": "2.10.8",
 	"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",
@@ -15,53 +15,54 @@
 	"author": "神秘的sh",
 	"license": "ISC",
 	"dependencies": {
-		"@babel/eslint-parser": "^7.23.10",
-		"@codemirror/lang-javascript": "^6.1.9",
-		"@codemirror/lang-json": "^6.0.1",
-		"@codemirror/lang-sql": "^6.5.2",
-		"@vxe-ui/plugin-export-pdf": "^4.2.4",
-		"@vxe-ui/plugin-export-xlsx": "^4.3.0",
-		"@vxe-ui/plugin-menu": "^4.1.0",
-		"@vxe-ui/plugin-render-wangeditor": "^4.0.5",
+		"@babel/eslint-parser": "^7.28.6",
+		"@codemirror/lang-javascript": "^6.2.4",
+		"@codemirror/lang-json": "^6.0.2",
+		"@codemirror/lang-sql": "^6.10.0",
+		"@vxe-ui/plugin-export-pdf": "^4.4.0",
+		"@vxe-ui/plugin-export-xlsx": "^4.5.1",
+		"@vxe-ui/plugin-menu": "^4.3.1",
+		"@vxe-ui/plugin-render-wangeditor": "^4.3.1",
+		"@vxe-ui/plugin-validator": "^4.3.1",
 		"@wangeditor/editor": "^5.1.23",
 		"@wolf-table/table": "^0.0.1",
 		"babel-polyfill": "^6.26.0",
 		"codemirror": "^6.0.2",
-		"core-js": "^3.32.2",
+		"core-js": "^3.48.0",
 		"countup.js": "^2.9.0",
-		"cron-parser": "^4.8.1",
+		"cron-parser": "^4.9.0",
 		"docx-preview": "^0.1.20",
 		"exceljs": "^4.4.0",
 		"jspdf": "^3.0.4",
 		"jszip": "^3.10.1",
-		"lunar-typescript": "^1.6.10",
+		"lunar-typescript": "^1.8.6",
 		"popper.js": "^1.16.1",
-		"sh-tools": "^2.3.10",
+		"sh-tools": "^2.3.12",
 		"vue": "^3.5.20",
 		"vue-masonry": "^0.16.0",
-		"vue-router": "^4.5.1",
-		"vxe-pc-ui": "^4.11.24",
-		"vxe-table": "^4.17.38"
+		"vue-router": "^4.6.4",
+		"vxe-pc-ui": "^4.12.30",
+		"vxe-table": "^4.17.48"
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^6.9.0",
-		"@typescript-eslint/parser": "^6.9.0",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
 		"@vue/cli-plugin-babel": "~5.0.8",
 		"@vue/cli-plugin-eslint": "~5.0.8",
 		"@vue/cli-plugin-router": "~5.0.8",
-		"@vue/cli-plugin-typescript": "^5.0.8",
+		"@vue/cli-plugin-typescript": "^5.0.9",
 		"@vue/cli-plugin-vuex": "~5.0.8",
 		"@vue/cli-service": "~5.0.8",
 		"@vue/eslint-config-typescript": "^12.0.0",
-		"babel-loader": "^9.1.2",
+		"babel-loader": "^9.2.1",
 		"compression-webpack-plugin": "~6.1.1",
 		"eslint": "^7.32.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-vue": "^9.0.0",
-		"prettier": "^2.4.1",
-		"sass": "^1.32.7",
-		"sass-loader": "^12.0.0",
-		"typescript": "^5.2.2"
+		"eslint-config-prettier": "^8.10.2",
+		"eslint-plugin-prettier": "^4.2.5",
+		"eslint-plugin-vue": "^9.33.0",
+		"prettier": "^2.8.8",
+		"sass": "^1.97.3",
+		"sass-loader": "^12.6.0",
+		"typescript": "^5.9.3"
 	}
 }

package/packages/components/index.js

@@ -13,6 +13,7 @@ import ShEmpty from './sh-empty/index.vue'
 import ShForm from './sh-form/form.vue'
 import ShHeader from './sh-header/index.vue'
 import ShIcon from './sh-icon/index.vue'
+import ShInput from './sh-input/index.vue'
 import ShList from './sh-list/index.vue'
 import ShLoading from './sh-loading/index.vue'
 import ShModal from './sh-modal/index.vue'
@@ -50,6 +51,7 @@ const components = {
 	ShForm,
 	ShHeader,
 	ShIcon,
+	ShInput,
 	ShList,
 	ShLoading,
 	ShModal,

package/packages/components/sh-code-editor/index.vue

@@ -6,16 +6,68 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, nextTick, getCurrentInstance } from 'vue'
 import { basicSetup } from 'codemirror'
-import { keymap, placeholder, drawSelection, lineNumbers, EditorView } from '@codemirror/view'
+import { keymap, placeholder, EditorView } from '@codemirror/view'
 import { Compartment, EditorState, StateEffect } from '@codemirror/state'
-import { defaultKeymap, indentWithTab, historyKeymap, history } from '@codemirror/commands'
+import { defaultKeymap, indentWithTab, historyKeymap } from '@codemirror/commands'
+import { autocompletion, snippetCompletion, acceptCompletion } from '@codemirror/autocomplete'
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete'
 import themes from './themes'
 import { javascript } from '@codemirror/lang-javascript'
 import { sql } from '@codemirror/lang-sql'
 import { json } from '@codemirror/lang-json'
 const tabSize = new Compartment()
+const completionConfig = new Compartment()
+
+const jsDefaultSnippets = [
+	{ label: 'if', content: 'if (${}) {\n\t${}\n}', detail: 'if语句' },
+	{ label: 'else', content: 'else {\n\t${}\n}', detail: 'else语句' },
+	{ label: 'function', content: 'function ${}(${}) {\n\t${}\n}', detail: '函数定义' },
+	{ label: 'const', content: 'const ${}', detail: 'const' },
+	{ label: 'let', content: 'let ${}', detail: 'let' },
+	{ label: 'var', content: 'var ${}', detail: 'var' },
+	{ label: 'for', content: 'for ${}', detail: 'for' },
+	{ label: 'async', content: 'async ${}', detail: 'async' },
+	{ label: 'await', content: 'await ${}', detail: 'await' },
+	{ label: 'try', content: 'try ${}', detail: 'try' },
+	{ label: 'catch', content: 'catch ${}', detail: 'catch' },
+	{ label: 'finally', content: 'finally ${}', detail: 'finally' },
+	{ label: 'trycf', content: 'try {\n\t${}\n} catch(e) {} finally {}', detail: 'try catch' },
+	{ label: 'return', content: 'return', detail: 'return' },
+	{ label: 'ife', content: 'if (${}) {\n\t${}\n} else {\n\t${}\n}', detail: 'if else语句' }
+]
+const sqlDefaultSnippets = [
+	{ label: 'select', content: 'select ${}', detail: 'select' },
+	{ label: 'from', content: 'from ${}', detail: 'from' },
+	{ label: 'where', content: 'where ${}', detail: 'where' },
+	{ label: 'insert', content: 'insert ${}', detail: 'insert' },
+	{ label: 'update', content: 'update ${}', detail: 'update' },
+	{ label: 'delete', content: 'delete ${}', detail: 'delete' },
+	{ label: 'create', content: 'create ${}', detail: 'create' },
+	{ label: 'drop', content: 'drop ${}', detail: 'drop' },
+	{ label: 'join', content: 'join ${}', detail: 'join' },
+	{ label: 'left', content: 'left ${}', detail: 'left' },
+	{ label: 'right', content: 'right ${}', detail: 'right' },
+	{ label: 'on', content: 'on ${}', detail: 'on' },
+	{ label: 'group by', content: 'group by', detail: 'group by' },
+	{ label: 'order by', content: 'order by', detail: 'order by' },
+	{ label: 'having', content: 'having ${}', detail: 'having' },
+	{ label: 'limit', content: 'limit ${}', detail: 'limit' },
+	{ label: 'distinct', content: 'distinct ${}', detail: 'distinct' },
+	{ label: 'union', content: 'union ${}', detail: 'union' },
+	{ label: 'all', content: 'all ${}', detail: 'all' },
+	{ label: 'as', content: 'as ${}', detail: 'as' },
+	{ label: 'between', content: 'between ${}', detail: 'between' },
+	{ label: 'in', content: 'in ${}', detail: 'in' },
+	{ label: 'like', content: 'like ${}', detail: 'like' },
+	{ label: 'sf', content: 'select * from ${}', detail: 'select * from' },
+	{ label: 'lj', content: 'left join ${}', detail: 'left join' },
+	{ label: 'rj', content: 'right join ${}', detail: 'right join' },
+	{ label: 'rj', content: 'right join ${}', detail: 'right join' },
+	{ label: 'una', content: 'union all ${}', detail: 'union all' }
+]
+
 export default defineComponent({
 	name: 'ShCodeEditor',
 	props: {
@@ -31,7 +83,7 @@ export default defineComponent({
 		},
 		mode: {
 			type: String,
-			default: 'javascript'
+			default: 'js' // js, sql, json
 		},
 		theme: {
 			type: String,
@@ -55,7 +107,8 @@ export default defineComponent({
 			type: Boolean
 		},
 		tab: {
-			type: Boolean
+			type: Boolean,
+			default: true
 		},
 		multipleSelection: {
 			type: Boolean,
@@ -68,20 +121,30 @@ export default defineComponent({
 			}
 		},
 		width: {
-			type: [String, Number],
+			type: String,
 			default: '100%'
 		},
 		height: {
-			type: [String, Number],
+			type: String,
 			default: 'auto'
+		},
+		autocomplete: {
+			type: Boolean,
+			default: false
+		},
+		autoclose: {
+			type: Boolean,
+			default: true
 		}
 	},
-	emits: ['update:modelValue', 'change', 'loaded', 'focus', 'blur', 'destroy'],
+	emits: ['update:modelValue', 'input', 'change', 'loaded', 'focus', 'blur', 'destroy'],
 	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils, $vUiSetup } = proxy
 		const { emit } = context
 
-		let codeEditor = null
 		let codeLength = 0
+		const codeEditor = ref(null)
 		const codeError = ref(null)
 		const codeRef = ref()
 
@@ -92,39 +155,116 @@ export default defineComponent({
 				border: props.border ? '1px solid var(--border-color)' : 'none'
 			}
 		})
-		const codeExtensions = computed(() => {
-			const { mode, disabled, multipleSelection, indent, theme, tab, wrap, extensions } = props
-			const defaultExtensions = [basicSetup, history(), drawSelection(), lineNumbers(), placeholder(props.placeholder), keymap.of([...defaultKeymap, ...historyKeymap])]
-			if (['javascript', 'js'].includes(mode.toLowerCase())) {
-				defaultExtensions.push(javascript())
-			} else if (['mysql', 'sql'].includes(mode.toLowerCase())) {
-				defaultExtensions.push(sql())
-			} else if (['json'].includes(mode.toLowerCase())) {
-				defaultExtensions.push(json())
+		// 自定义Tab键行为：当补全菜单打开时，Tab选择补全；否则缩进
+		const customKeymap = () => {
+			let customList = [
+				{
+					key: 'Tab',
+					run: view => {
+						if (acceptCompletion(view)) {
+							return true
+						}
+						return false
+					},
+					preventDefault: true
+				}
+			]
+			if (props.tab) {
+				customList.push(indentWithTab)
+			}
+			return keymap.of([...customList, ...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap])
+		}
+		// 自定义自动不全方案
+		const customCompletion = context => {
+			let codeConfig = $vUiSetup.codeConfig || {}
+			let snippets = []
+			let snippetList = []
+			if (props.mode === 'js') {
+				snippetList = jsDefaultSnippets.concat(codeConfig.jsSnippets)
+			} else if (props.mode === 'sql') {
+				snippetList = sqlDefaultSnippets.concat(codeConfig.sqlSnippets)
+			} else if (props.mode === 'json') {
+				snippetList = codeConfig.jsonSnippets
 			}
-			return [
-				...defaultExtensions,
-				EditorView.updateListener.of(updateListener),
-				EditorView.focusChangeEffect.of(focusListener),
+			snippets = snippetList.map(item => snippetCompletion(item.content, Object.assign({ type: 'snippet', boost: 3 }, item)))
+			// 根据当前输入进行过滤
+			const word = context.matchBefore(/\w*/)
+			if (!word || (word.from === word.to && !context.explicit)) return null
+			// 过滤并返回结果
+			let wordLower = word.text.toLowerCase()
+			const filteredOptions = snippets
+				.filter(option => option.label.toLowerCase().includes(wordLower))
+				.toSorted((a, b) => {
+					const aLabel = a.label.toLowerCase()
+					const bLabel = b.label.toLowerCase()
+					const aStartsWith = aLabel.startsWith(wordLower)
+					const bStartsWith = bLabel.startsWith(wordLower)
+					if (aStartsWith && !bStartsWith) return -1
+					if (!aStartsWith && bStartsWith) return 1
+					if (aStartsWith && bStartsWith) {
+						if (aLabel.length !== bLabel.length) {
+							return aLabel.length - bLabel.length
+						}
+					}
+					return aLabel.localeCompare(bLabel)
+				})
+			return {
+				from: word.from,
+				options: filteredOptions,
+				filter: false
+			}
+		}
+		const modeExtensions = computed(() => {
+			let resultExtensions = []
+			if (props.mode === 'js') {
+				resultExtensions.push(javascript())
+			} else if (props.mode === 'sql') {
+				resultExtensions.push(sql())
+			} else if (props.mode === 'json') {
+				resultExtensions.push(json())
+			}
+			if (props.autocomplete) {
+				resultExtensions.push(
+					completionConfig.of(
+						autocompletion({
+							override: [customCompletion],
+							activateOnTyping: true,
+							defaultKeymap: true,
+							closeOnBlur: true,
+							maxRenderedOptions: 20
+						})
+					)
+				)
+			}
+			return resultExtensions
+		})
+
+		const codeExtensions = computed(() => {
+			const { disabled, theme, wrap, autoclose, extensions } = props
+			const innerExtensions = [
+				basicSetup,
+				placeholder(props.placeholder),
+				tabSize.of(EditorState.tabSize.of(props.indent)),
+				EditorState.allowMultipleSelections.of(props.multipleSelection),
 				EditorView.editable.of(!disabled),
-				EditorState.allowMultipleSelections.of(multipleSelection),
-				tabSize.of(EditorState.tabSize.of(indent)),
-				theme && themes[theme] ? themes[theme] : undefined,
-				tab ? keymap.of([indentWithTab]) : undefined,
-				wrap ? EditorView.lineWrapping : undefined,
-				...extensions
-			].filter(item => !!item)
+				customKeymap()
+			]
+			// 括号自动补全
+			if (autoclose) innerExtensions.push(closeBrackets())
+			if (theme && themes[theme]) innerExtensions.push(themes[theme])
+			if (wrap) innerExtensions.push(EditorView.lineWrapping)
+			return [...innerExtensions, ...modeExtensions.value, ...extensions].filter(item => !!item)
 		})
 
 		watch(
 			() => props.modelValue,
 			value => {
-				if (codeEditor && !codeEditor.composing) {
-					const docLength = codeEditor.state.doc.length
+				if (codeEditor.value && !codeEditor.value.composing) {
+					const docLength = codeEditor.value.state.doc.length
 					const docValue = getTransformValue(value)
-					codeEditor.dispatch({
+					codeEditor.value.dispatch({
 						changes: { from: 0, to: docLength, insert: docValue },
-						selection: codeEditor.state.selection,
+						selection: codeEditor.value.state.selection,
 						scrollIntoView: true
 					})
 					codeLength = docLength
@@ -132,24 +272,23 @@ export default defineComponent({
 			}
 		)
 		watch(
-			() => props.codeExtensions,
+			() => codeExtensions.value,
 			value => {
-				codeEditor?.dispatch({
+				if (!codeEditor.value) return
+				codeEditor.value?.dispatch({
 					effects: StateEffect.reconfigure.of(value)
 				})
-			},
-			{
-				immediate: true
 			}
 		)
 
 		const codeRender = async () => {
 			const docValue = getTransformValue(props.modelValue)
+			let editExtensions = [EditorView.focusChangeEffect.of(focusListener), EditorView.updateListener.of(updateListener)].concat(codeExtensions.value)
 			const codeState = EditorState.create({
 				doc: docValue,
-				extensions: codeExtensions.value
+				extensions: editExtensions
 			})
-			codeEditor = new EditorView({
+			codeEditor.value = new EditorView({
 				parent: codeRef.value,
 				state: codeState
 			})
@@ -167,14 +306,14 @@ export default defineComponent({
 			}
 		}
 
-		const updateListener = async ({ state, changes, docChanged }) => {
+		const updateListener = ({ state, changes, docChanged }) => {
 			if (changes.empty || !docChanged) return
 			const valueStr = state.doc.toString()
 			dispatchEvent('change', valueStr)
 		}
 
 		const focus = () => {
-			codeEditor && codeEditor.focus()
+			codeEditor.value && codeEditor.value.focus()
 		}
 
 		const getTransformValue = (value, out) => {
@@ -198,6 +337,7 @@ export default defineComponent({
 			const outValue = getTransformValue(value, true)
 			if (codeError.value) return
 			emit('update:modelValue', outValue)
+			emit('input', outValue)
 		}
 
 		const dispatchEvent = (type, value) => {
@@ -213,7 +353,7 @@ export default defineComponent({
 			codeRender()
 		})
 		onUnmounted(() => {
-			if (codeEditor) codeEditor.destroy()
+			if (codeEditor.value) codeEditor.value.destroy()
 			dispatchEvent('destroy', props.modelValue)
 		})
 
@@ -235,6 +375,10 @@ export default defineComponent({
 	.sh-code-content {
 		flex: 1;
 		display: block;
+		:deep(.cm-editor) {
+			height: 100%;
+			overflow: auto;
+		}
 	}
 	.sh-code-error {
 		position: absolute;

package/packages/components/sh-code-editor/themes/dark.js

@@ -13,7 +13,7 @@ const chalky = '#e5c07b',
 	whiskey = '#d19a66',
 	violet = '#c678dd',
 	darkBackground = '#21252b',
-	highlightBackground = '#2c313a',
+	highlightBackground = '#494a4c',
 	background = '#282c34',
 	tooltipBackground = '#353a42',
 	selection = '#3E4451',

package/packages/components/sh-code-editor/themes/dracula.js

@@ -13,7 +13,7 @@ const chalky = '#bd93f9',
 	whiskey = '#d19a66',
 	violet = '#c678dd',
 	darkBackground = '#21252b',
-	highlightBackground = '#2c313a',
+	highlightBackground = '#494a4c',
 	background = '#282a36',
 	tooltipBackground = '#353a42',
 	selection = '#3E4451',

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

@@ -7,7 +7,7 @@
 						<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 v-if="!disabled && !readonly" 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>
@@ -113,12 +113,8 @@ export default defineComponent({
 
 		const vmConfig = computed(() => ({ size: props.size || $vUiSetup.size }))
 		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, vmConfig.value)
+			let vxeProps = $vUtils.omit(props, (val, key) => omitProps.includes(key) || $vUtils.isNone(val))
+			return Object.assign({}, vxeProps, vmConfig.value)
 		})
 		const pulldownConfig = computed(() => {
 			return Object.assign({ transfer: true }, props.pulldown, vmConfig.value)
@@ -129,9 +125,12 @@ export default defineComponent({
 			return props.format || 'yyyy-MM-dd'
 		})
 		const rangeInputConfig = computed(() => {
-			let returnConfig = { type: 'text', readonly: true }
+			let returnConfig = { type: 'text', readonly: true, class: [] }
 			if (vmConfig.value.size) {
-				returnConfig.class = [`size--${vmConfig.value.size}`]
+				returnConfig.class.push(`size--${vmConfig.value.size}`)
+			}
+			if (props.disabled) {
+				returnConfig.class.push(`is--disabled`)
 			}
 			return returnConfig
 		})
@@ -180,6 +179,7 @@ export default defineComponent({
 		})
 
 		const onRangeFocus = async e => {
+			if (props.disabled || props.readonly) return
 			pulldownValue.value = !pulldownValue.value
 			if (pulldownValue.value) {
 				dispatch('focus', e)
@@ -238,6 +238,7 @@ export default defineComponent({
 			pulldownValue,
 			inputValue,
 			rangeValue,
+			vmConfig,
 			inputConfig,
 			pulldownConfig,
 			startInputConfig,
@@ -255,6 +256,9 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.vxe-form--item.is--error .sh-date-range-input {
+	border-color: var(--vxe-ui-form-validate-error-color);
+}
 .sh-date {
 	display: inline-flex;
 	position: relative;