appFormLowcode/src/components/lowCode/assistant/datePicker.vue

<!--
@ 作者: 秦东
@ 时间: 2024-11-14 13:08:53
@ 备注: 日期选择器
-->
<script lang='ts' setup>
import dayJs from 'dayjs'

const props = withDefaults(
    defineProps<{
		modelValue?: string
		disabled?: boolean
		data?:any
		types?:number
    }>(),
    {}
)
const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()
const value = computed({
	get: () => {
		return props.modelValue
	},
	set: (newVal: any) => {
		emits('update:modelValue', newVal)
	},
});
//阻止唤起键盘
const handleClick = (event) => {
  // 阻止输入框默认行为
  event.target.readOnly = true;
};
//打印数据
const valPrint = (val:number,group:string,type:string) => {
	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(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);
			}
	}
	
     
}
</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>

</template>
<style  lang='scss' scoped>
.wordColor{
	color:#000000;
}
</style>