时间控件

package-lock.json

@@ -9,6 +9,7 @@
       "version": "2.3.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "@nutui/nutui": "^4.0.0",
         "@tinymce/tinymce-vue": "^6.1.0",
         "@vueup/vue-quill": "^1.2.0",
         "@wangeditor/editor": "^5.1.23",
@@ -924,6 +925,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nutui/icons-vue": {
+      "version": "0.0.24",
+      "resolved": "https://registry.npmmirror.com/@nutui/icons-vue/-/icons-vue-0.0.24.tgz",
+      "integrity": "sha512-ek7JK0IBwARxd7V399WW/Gb6qPi3vfo2+kgTcVZP/rGjK/CCcvsK8HfswJ73yWTEDT9wINlrOQLLyqaPD1l0YQ=="
+    },
+    "node_modules/@nutui/nutui": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@nutui/nutui/-/nutui-4.0.0.tgz",
+      "integrity": "sha512-GnDPA/q/N0NXYpknzhllLKXUElxavRTID81oMVRkAfYPanAKUXtCG1pt9uFex8cBcw8XHx08zsNlJXsuhr1QwQ==",
+      "dependencies": {
+        "@nutui/icons-vue": "^0.0.24",
+        "sass": "^1.50.0"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "3.13.2",
       "resolved": "https://registry.npmmirror.com/@nuxt/kit/-/kit-3.13.2.tgz",

package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@nutui/nutui": "^4.0.0",
     "@tinymce/tinymce-vue": "^6.1.0",
     "@vueup/vue-quill": "^1.2.0",
     "@wangeditor/editor": "^5.1.23",

src/components/lowCode/assistant/datePicker.vue

@@ -7,138 +7,627 @@
 import dayJs from 'dayjs'
 
 const props = withDefaults(
-    defineProps<{
+	defineProps<{
 		modelValue?: string
 		disabled?: boolean
-		data?:any
-		types?:number
-    }>(),
-    {}
+		data?: any
+		types?: number
+	}>(),
+	{}
 )
+const selectType = computed(() => {
+	switch (props.data.control.type) {
+		case "year":
+			return "single";
+		case "month":
+			return "single";
+		case "date":
+			return "single";
+		case "datetime":
+			return "single";
+		case "week":
+			return "single";
+		case "datetimerange":
+			return "range";
+		case "daterange":
+			return "range";
+		case "monthrange":
+			return "range";
+		default:
+			return "single";
+	}
+})
+function timestampToTargetFormat(timestamp: string) {
+	// 将输入转换为数字类型的时间戳（毫秒）
+	const ms = Number(timestamp);
+	// 创建Date对象
+	const date = new Date(ms);
+	// Date对象的toString()方法恰好返回目标格式
+	return date.toString();
+}
+
+
+function convertToTimestamp(dateString: string) {
+	//console.log(dateString)
+	if (dateString) {
+		//console.log(dateString)
+		// 创建Date对象，JavaScript能直接解析这种格式
+		const date = new Date(dateString);
+
+		// 检查日期是否有效
+		if (isNaN(date.getTime())) {
+			throw new Error("无效的日期格式");
+		}
+
+		// 获取时间戳（毫秒数）并转换为字符串
+		return date.getTime().toString();
+	} else {
+		return ""
+	}
+
+}
+
 const emits = defineEmits<{
-    (e: 'update:modelValue', value: string): void
+	(e: 'update:modelValue', value: string): void
 }>()
+
+
+const value1 = ref("")
+
+
+
+
+const startValue1 = ref("")
+
+const endValue1 = ref("")
+
+
+
+//阻止唤起键盘
+const handleClick = (event: { target: { readOnly: boolean; }; }) => {
+	// 阻止输入框默认行为
+	event.target.readOnly = true;
+};
+const hasValue = ref(false)
+//打印数据
+const valPrint = (val1: string, group: string, type: string) => {
+	const val = new Date(parseInt(val1, 10));
+	/* console.log(val)
+	console.log(val1) */
+	if (val && val1) {
+		hasValue.value = true
+		switch (group) {
+			case "year":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY') + "年";
+				} else {
+					return dayJs(val).format(type) + "年";
+				}
+				break;
+			case "month":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月');
+				} else {
+					return dayJs(val).format(type) + "月";
+				}
+				break;
+			case "datetime":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月DD日 HH时mm分ss秒');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "week":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年 第ww周');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "datetimerange":
+				if (Array.isArray(val)) {
+					let startTime = val[0]
+					let endNum = val.length - 1
+					if (endNum < 0) {
+						endNum = 0
+					}
+					let endEnd = val[endNum]
+					if (type != "" && type == "x") {
+						return dayJs(startTime).format('YYYY-MM-DD HH:mm:ss') + " - " + dayJs(endEnd).format('YYYY-MM-DD HH:mm:ss');
+					} else {
+						return dayJs(startTime).format(type) + " - " + dayJs(endEnd).format(type);
+					}
+				}
+				break;
+			case "daterange":
+				if (Array.isArray(val)) {
+					let startTime = val[0]
+					let endNum = val.length - 1
+					if (endNum < 0) {
+						endNum = 0
+					}
+					let endEnd = val[endNum]
+					if (type != "" && type == "x") {
+						return dayJs(startTime).format('YYYY-MM-DD') + " - " + dayJs(endEnd).format('YYYY-MM-DD');
+					} else {
+						return dayJs(startTime).format(type) + " - " + dayJs(endEnd).format(type);
+					}
+				}
+				break;
+			case "monthrange":
+				if (Array.isArray(val)) {
+					let startTime = val[0]
+					let endNum = val.length - 1
+					if (endNum < 0) {
+						endNum = 0
+					}
+					let endEnd = val[endNum]
+					if (type != "" && type == "x") {
+						return dayJs(startTime).format('YYYY-MM') + " - " + dayJs(endEnd).format('YYYY-MM');
+					} else {
+						return dayJs(startTime).format(type) + " - " + dayJs(endEnd).format(type);
+					}
+				}
+				break;
+			default:
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月DD日');
+				} else {
+					return dayJs(val).format(type);
+				}
+		}
+
+	} else {
+		hasValue.value = false
+		return "请选择时间";
+	}
+
+
+
+}
+const hasValue1 = ref(false)
+const hasValue2 = ref(false)
+
+const formatStart = computed(() => {
+	//console.log(value.value[0])
+	let val = new Date(parseInt(value.value[0], 10));
+	let group = props.data.control.type
+	let type= props.data.control.valueFormat
+
+	
+
+	/* console.log(val)
+	console.log(group)
+	console.log(type) */
+	if (val&&value.value[0]&&value.value[0]!="") {
+		//console.log(111)
+		hasValue1.value = true
+		switch (group) {
+			case "year":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY') + "年";
+				} else {
+					return dayJs(val).format(type) + "年";
+				}
+				break;
+			case "month":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('MM') + "月";
+				} else {
+					return dayJs(val).format(type) + "月";
+				}
+				break;
+			case "datetime":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月DD日 HH时mm分ss秒');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "week":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年 第ww周');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "datetimerange":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY-MM-DD HH:mm');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "daterange":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月DD日');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "monthrange":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月');
+				} else {
+					return dayJs(val).format(type) + "月";
+				}
+				break;
+			default:
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月DD日');
+				} else {
+					return dayJs(val).format(type);
+				}
+		}
+
+	} else {
+		//alert(1)
+		hasValue1.value = false
+		return "请选择时间";
+	}
+
+
+
+});
+
+const formatEnd = computed(() => {
+	//console.log(value.value[1])
+	let val = new Date(parseInt(value.value[1], 10));
+	let group = props.data.control.type
+	let type= props.data.control.valueFormat
+
+	
+
+	/* console.log(val)
+	console.log(group)
+	console.log(type) */
+	if (val&&value.value[1]&&value.value[1]!="") {
+		//console.log(111)
+		hasValue2.value = true
+		switch (group) {
+			case "year":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY') + "年";
+				} else {
+					return dayJs(val).format(type) + "年";
+				}
+				break;
+			case "month":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('MM') + "月";
+				} else {
+					return dayJs(val).format(type) + "月";
+				}
+				break;
+			case "datetime":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月DD日 HH时mm分ss秒');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "week":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年 第ww周');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "datetimerange":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY-MM-DD HH:mm');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "daterange":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月DD日');
+				} else {
+					return dayJs(val).format(type);
+				}
+				break;
+			case "monthrange":
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月');
+				} else {
+					return dayJs(val).format(type) + "月";
+				}
+				break;
+			default:
+				if (type != "" && type == "x") {
+					return dayJs(val).format('YYYY年MM月DD日');
+				} else {
+					return dayJs(val).format(type);
+				}
+		}
+
+	} else {
+		//alert(1)
+		hasValue2.value = false
+		return "请选择时间";
+	}
+
+
+
+});
+
+
+
+import { ref, computed } from 'vue';
+import { DatePicker } from '@nutui/nutui';
+
+const showPicker = ref(false);
+
+const show = ref(false)
+
+const showStart = ref(false)
+
+const showEnd = ref(false)
+
 const value = computed({
 	get: () => {
-		return props.modelValue
+		//console.log(value.value)
+		//value1.value = timestampToTargetFormat(value.value)
+		if (selectType.value == "range") {
+			//console.log(props.modelValue)
+
+			return props.modelValue
+
+		} else {
+			return props.modelValue
+		}
+
 	},
 	set: (newVal: any) => {
-		emits('update:modelValue', newVal)
+		if (selectType.value == "range") {
+			emits('update:modelValue', newVal)
+		} else {
+			emits('update:modelValue', convertToTimestamp(newVal))
+		}
+
 	},
 });
-//阻止唤起键盘
-const handleClick = (event) => {
-  // 阻止输入框默认行为
-  event.target.readOnly = true;
-};
-//打印数据
-const valPrint = (val:number,group:string,type:string) => {
-	switch(group){
+
+const confirm = () => {
+	flag.value = "single"
+	value.value = value1.value
+	show.value = false
+}
+
+const cancel = () => {
+	value1.value = ""
+	show.value = false
+}
+
+const valueRange = computed(() => {
+	//当是start触发的时,要从父组件获取end,作为arr[1],反之亦然
+	let arr = []
+	arr[0] = convertToTimestamp(startValue1.value)
+	arr[1] = convertToTimestamp(endValue1.value)
+	return arr
+})
+
+const flag = ref("")
+const confirmStart = () => {
+	flag.value = "start"
+	//value.value = startValue1.value
+	value.value = valueRange.value
+	showStart.value = false
+}
+
+const cancelStart = () => {
+	startValue1.value = ""
+	showStart.value = false
+}
+
+const confirmEnd = () => {
+	flag.value = "end"
+	//value.value = endValue1.value
+	value.value = valueRange.value
+	showEnd.value = false
+}
+
+const cancelEnd = () => {
+	endValue1.value = ""
+	showEnd.value = false
+}
+
+const formatter = (type: any, option: { text: string; }) => {
+	switch (type) {
+		case 'year':
+			option.text += '年'
+			break
+		case 'month':
+			option.text += '月'
+			break
+		case 'day':
+			option.text += '日'
+			break
+		case 'hour':
+			option.text += '时'
+			break
+		case 'minute':
+			option.text += '分'
+			break
+		default:
+			option.text += ''
+	}
+	return option
+}
+
+const min = new Date(2010, 0, 1, 0o0, 0o0)
+const max = new Date(2045, 10, 1, 23, 29)
+
+const type = computed(() => {
+	switch (props.data.control.type) {
 		case "year":
-			if(type != "" && type == "x"){
-				return dayJs(val).format('YYYY');
-			}else{
-				return dayJs(val).format(type);
-			}
-			break;
+			return "year-month";
 		case "month":
-			if(type != "" && type == "x"){
-				return dayJs(val).format('MM');
-			}else{
-				return dayJs(val).format(type);
-			}
-			break;	
+			return "year-month";
+		case "date":
+			return "date";
 		case "datetime":
-			if(type != "" && type == "x"){
-				return dayJs(val).format('YYYY-MM-DD HH:mm:ss');
-			}else{
-				return dayJs(val).format(type);
-			}
-			break;	
+			return "datetime";
 		case "week":
-			if(type != "" && type == "x"){
-				return dayJs(val).format('YYYY年第ww周');
-			}else{
-				return dayJs(val).format(type);
-			}
-			break;	
+			return "date";
 		case "datetimerange":
-			if(Array.isArray(val)){
-				let startTime = val[0]
-				let endNum = val.length-1
-				if(endNum<0){
-					endNum = 0
-				}
-				let endEnd = val[endNum]
-				if(type != "" && type == "x"){
-					return dayJs(startTime).format('YYYY-MM-DD HH:mm:ss') + " - " + dayJs(endEnd).format('YYYY-MM-DD HH:mm:ss');
-				}else{
-					return dayJs(startTime).format(type) + " - " + dayJs(endEnd).format(type);
-				}
-			}
-			break;	
+			return "datetime";
 		case "daterange":
-			if(Array.isArray(val)){
-				let startTime = val[0]
-				let endNum = val.length-1
-				if(endNum<0){
-					endNum = 0
-				}
-				let endEnd = val[endNum]
-				if(type != "" && type == "x"){
-					return dayJs(startTime).format('YYYY-MM-DD') + " - " + dayJs(endEnd).format('YYYY-MM-DD');
-				}else{
-					return dayJs(startTime).format(type) + " - " + dayJs(endEnd).format(type);
-				}
-			}
-			break;	
+			return "date";
 		case "monthrange":
-			if(Array.isArray(val)){
-				let startTime = val[0]
-				let endNum = val.length-1
-				if(endNum<0){
-					endNum = 0
-				}
-				let endEnd = val[endNum]
-				if(type != "" && type == "x"){
-					return dayJs(startTime).format('YYYY-MM') + " - " + dayJs(endEnd).format('YYYY-MM');
-				}else{
-					return dayJs(startTime).format(type) + " - " + dayJs(endEnd).format(type);
-				}
-			}
-			break;		
+			return "year-month";
 		default:
-			if(type != "" && type == "x"){
-				return dayJs(val).format('YYYY-MM-DD');
-			}else{
-				return dayJs(val).format(type);
-			}
+			return "date";
 	}
-	
-     
+})
+
+
+const shichang = computed(() => {
+	console.log(value.value)
+	let start = value.value[0]
+	let end = value.value[1]
+	console.log(start)
+	console.log(end)
+	let a = calculateTimeDiff(start,end)
+	return a
+})
+function calculateTimeDiff(startTimestamp: string, endTimestamp: string) {
+    // 解析时间戳为数字
+    const start = parseInt(startTimestamp, 10);
+    const end = parseInt(endTimestamp, 10);
+    
+    // 计算时间差（毫秒）并取绝对值
+    const diffMs = Math.abs(end - start);
+    
+    // 计算总分钟数并四舍五入
+    const totalMinutes = Math.round(diffMs / 60000);
+    
+    // 计算总小时数（带小数）
+    const totalHours = totalMinutes / 60;
+    
+    // 处理小时进位情况
+    if (totalHours < 24) {
+        // 不足一天：四舍五入到小时
+        return `${Math.round(totalHours)} 小时`;
+    } else {
+        // 计算完整天数
+        const days = Math.floor(totalHours / 24);
+        // 计算剩余小时数（四舍五入）
+        const remainingHours = Math.round(totalHours % 24);
+        
+        // 处理小时进位（当剩余小时为24时）
+        if (remainingHours === 24) {
+            return `${days + 1} 天 0 小时`;
+        }
+        return `${days} 天 ${remainingHours} 小时`;
+    }
 }
+
+
 </script>
 <template>
-    <el-date-picker
-		v-if="props.types!=3"
-		align="left"
-		v-model="value"
-		:type="props.data.control.type"
-		range-separator="-"
-		start-placeholder="开始日期"
-		end-placeholder="结束日期"
-		:teleported="true"
-		:placeholder="props.data.control.placeholder"
-		:value-format="props.data.valueFormat"
-		:format="props.data.control.format"
-		@click="handleClick"
-		@focus="handleClick"
-    />
-	<el-text v-else class="wordColor">{{valPrint(value,props.data.control.type,props.data.control.valueFormat)}}</el-text>
+
+
+	<el-drawer v-model="show" :with-header="false" direction="btt" :append-to-body="true">
+		<nut-date-picker v-if="selectType == 'single'" v-model="value1" :three-dimensional="false" @confirm="confirm"
+			:min-date="min" @cancel="cancel" :type="type" :max-date="max" :formatter="formatter"></nut-date-picker>
+
+
+
+
+
+	</el-drawer>
+
+	<el-drawer v-model="showStart" :with-header="false" direction="btt">
+
+		<nut-date-picker v-if="selectType == 'range'" v-model="startValue1" :three-dimensional="false"
+			@confirm="confirmStart" :min-date="min" @cancel="cancelStart" :type="type" :max-date="max"
+			:formatter="formatter"></nut-date-picker>
+	</el-drawer>
+	<el-drawer v-model="showEnd" :with-header="false" direction="btt">
+
+		<nut-date-picker v-if="selectType == 'range'" v-model="endValue1" :three-dimensional="false"
+			@confirm="confirmEnd" :min-date="min" @cancel="cancelEnd" :type="type" :max-date="max"
+			:formatter="formatter"></nut-date-picker>
+	</el-drawer>
+
+
+
+
+
+
+	<div v-if="selectType == 'single'"
+		style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 100%;height: 97%;border-radius: 5px;"
+		@click="show = true">
+		<el-text v-if="hasValue" class="wordColor">{{ valPrint(value, props.data.control.type,
+			props.data.control.valueFormat)
+		}}</el-text>
+		<el-text v-if="!hasValue" class="wordColor1">{{ valPrint(value, props.data.control.type,
+			props.data.control.valueFormat)
+		}}</el-text>
+	</div>
+
+
+	<!-- 区间 -->
+	<div v-if="selectType == 'range'"
+		style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;"
+		@click="showStart = true">
+		<el-text   v-if="hasValue1" class="wordColor">{{ formatStart
+		}}</el-text>
+		<el-text v-if="!hasValue1" class="wordColor1">{{  formatStart
+		}}</el-text>
+	</div>
+
+	<div v-if="selectType == 'range'"
+		style="border: 0px solid #DCDFE6; padding-left:1.5%; width: 7%;height: 97%;border-radius: 5px;">
+		<el-text class="wordColor">至</el-text>
+	</div>
+
+	<div v-if="selectType == 'range'"
+		style="border: 0.5px solid #DCDFE6; padding-left: 10px; width: 46.5%;height: 97%;border-radius: 5px;"
+		@click="showEnd = true">
+		<el-text  v-if="hasValue2" class="wordColor">{{ formatEnd
+		}}</el-text>
+		<el-text v-if="!hasValue2" class="wordColor1">{{formatEnd
+		}}</el-text>
+	</div>
+	<!-- <div v-if="selectType == 'range'"
+		style="border: 0px solid #DCDFE6; padding-left: 8px; width: 10%;height: 97%;border-radius: 5px;">
+		<el-text class="wordColor">时长:23天</el-text>
+	</div> -->
+	<div v-if="selectType=='range'&&value[0]&&value[1]" style="float:right;border: black 0px solid;position: absolute;top: 27px;color:#A8ABB2 ;width: 100%; font-size: smaller;"><div style="float:right">{{ shichang }}</div></div>
+
 
 </template>
-<style  lang='scss' scoped>
-.wordColor{
-	color:#000000;
+<style lang='scss'>
+.wordColor {
+	color: #000000;
+}
+
+.wordColor1 {
+	//color: #000000;
+	color: #A8ABB2;
+}
+
+/* 全局覆盖NutUI部分样式 */
+.nut-picker {
+	z-index: 3000 !important;
+	/* 确保高于Element弹窗 */
+}
+
+.nut-date-picker__header {
+	background: var(--el-color-primary);
+	/* 同步Element主题色 */
+}
+
+//#1E5EFF
+//#626AEF
+:root {
+	--nut-primary-color: #626AEF;
+	--nut-picker-right: #626AEF;
+	--nut-picker-ok-color: #626AEF;
+
 }
 </style>

src/main.ts

@@ -10,10 +10,12 @@ import 'virtual:svg-icons-register';
 import { setupStores } from '@/utils/pinia/stores/index'
 import router from "@/utils/router/index"
 import AppLowCode from '@/utils/lowCode/index'
+import { DatePicker, Picker,ConfigProvider   } from '@nutui/nutui';
 
 import 'font-awesome/css/font-awesome.min.css'
 import '@/assets/css/reset.css'
 import '@/assets/css/public.css'
+import '@nutui/nutui/dist/style.css'; // 全局样式或按需导入
 
 import App from './App.vue'
 
@@ -25,6 +27,7 @@ app.use(ElementPlus, {
 })
 app.use(router)
 app.use(AppLowCode)
+app.use(DatePicker).use(Picker).use(ConfigProvider);
 // app.use(pinia.stores)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)