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

<!--
@ 作者: 秦东
@ 时间: 2024-11-17 14:17:36
@ 备注: 创建时间
-->
<script lang='ts' setup>
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
import { 
    constFormProps
} from '@/api/lowCode/utils';
import { FormList,FormItem } from "@/api/lowCode/form/type"
import validate from "@/api/lowCode/form/validate"

const props = withDefaults(
    defineProps<{
		data: FormList
		tablekey: any
		numrun?: number
		modelValue?: any // 子表和弹性布局时时有传
		tProp?: string // 子表时的form-item的prop值，用于子表校验用
    }>(),
    {}
)
const formProps = inject(constFormProps, {}) as any
const config = computed(() => {
    return props.data.config || {}
})
const type = computed(() => {
    return formProps.value.type
})
// 返回当前item项的校验规则
const itemRules = computed(() => {
    let temp
    const itemR: any = props.data.item?.rules || []
    const customR = formatCustomRules()
    // 如果三个都没有设置，则返回undefined
    if (itemR?.length || customR?.length) {
      	temp = [...customR, ...itemR]
    }
    return temp
})
// 处理自定义校验规则，将customRules转换后追加到rules里
const formatCustomRules = () => {
    const rulesReg: any = {}
    validate &&
    validate.forEach(item => {
        rulesReg[item.type] = item.regExp
    })

    // 获取校验方法 父级使用provide方法注入
    const temp: any = []
    props.data.customRules?.forEach((item: any) => {
		if (!item.message && item.type !== 'methods') {
			return // 方法时允许提示信息为空
		}
		let obj = {}
		if (item.type === 'required') {
			obj = { required: true }
		} else if (item.type === 'rules') {
			// 自定义表达式
			obj = { pattern: item.rules }
		} else if (item.type === 'methods') {
			// 方法时
			const methods: any = item.methods
			if (methods) {
			obj = { validator: inject(methods, {}) }
			}
		} else if (item.type) {
			obj = { pattern: rulesReg[item.type as string] }
		}
		// 这里判断下防某些条件下重复push的可能或存重复校验类型
		let message: any = { message: item.message }
		if (!item.message) {
			// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示
			message = {}
		}
		temp.push(
			Object.assign(
				{
					trigger: item.trigger || 'blur'
				},
				obj,
				message
			)
		)
    })
    return temp
}
const getLabel = (ele: FormItem) => {
    const showColon = formProps.value.showColon ? '：' : ''
    if (ele) {
    	return ele.showLabel ? '' : ele.label + showColon
    } else {
      	return ''
    }
}
//组件css部分
const configStyle = computed(() => {
    return props.data.styles || {}
})
/**
@ 作者: 秦东
@ 时间: 2024-03-01 09:07:11
@ 功能: 布局处理
*/
const getFormItemLableStyle = (ele: any) => {
    if(ele?.labelStyle){
    //   console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle))
      return AnalysisCss(ele?.labelStyle)
    }
}
const getFormItemInputStyle = (ele: any,sty:number) => {
    if(ele?.inputStyle){
    //   console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
      return AnalysisInputCss(ele?.inputStyle,sty)
    }
}

const value = computed({
    get() {
		let zhiVal = ""
		if (props.tProp) {
			// 表格和弹性布局
			zhiVal = props.modelValue
			
		} else {
			zhiVal = formProps.value.model[props.data.name]
			
		}
		if(zhiVal != null && zhiVal != "") {
			return unixTimeToDayTime(zhiVal)
		}else{
			return getCurrentTime()
		}
		
    },
    set(newVal: any) {
		if(newVal != null && newVal != "") {
			newVal=newVal*1
		}
		if (props.tProp) {
			
			emits('update:modelValue', newVal)
		}
		updateModel(newVal*1)
    }
})
/**
@ 作者: 秦东
@ 时间: 2024-06-24 11:13:44
@ 功能: 时间戳转日期
*/
const unixTimeToDayTime = (val:string) => {
	let date = new Date(val * 1000);
	let Y = date.getFullYear() + "-";
	let M =(date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
	let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
	let h = date.getHours() + ":";
	let m = date.getMinutes() + ":";
	let s = date.getSeconds();
	return Y + M + D + h + m + s;
}
//获取系统当前时间
const getCurrentTime = () => {
	const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // 月份是从0开始的
    const day = now.getDate();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
 
    return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
</script>
<template>
	<div class="inputbox">
		<el-input v-model="value" :style="getFormItemInputStyle(configStyle,2)" :input-style="getFormItemInputStyle(configStyle,3)"  placeholder="系统自动生成" disabled></el-input>
	</div>
</template>
<style  lang='scss' scoped>
.inputbox{
	width:100%;
}
</style>