当前时间组件

概述

CurrentDatetime 是一个自动填充当前时间的只读组件，常用于表单中的"创建时间"、"更新时间"等字段，支持多种时间格式和填充模式。

组件路径：web/apps/web-ele/src/components/zq-form/current-datetime/

组件名称：CurrentDatetime

功能特性

• 自动填充当前时间
• 支持日期、时间、日期时间三种类型
• 支持自定义显示格式和值格式
• 支持多种填充模式（创建时/更新时/始终）
• 可选实时更新显示

Props

属性	类型	默认值	说明
modelValue	string	-	时间值
type	'date' | 'time' | 'datetime'	'datetime'	时间类型
format	string	-	显示格式（dayjs 格式）
valueFormat	string	-	值格式（dayjs 格式）
disabled	boolean	true	是否禁用（始终为只读）
placeholder	string	'当前时间'	占位符
autoUpdate	boolean	false	是否实时更新显示
fillMode	'onCreate' | 'onUpdate' | 'always'	'onCreate'	填充模式

填充模式说明

模式	说明	使用场景
onCreate	仅在值为空时填充	创建时间字段
onUpdate	每次渲染时更新	更新时间字段
always	始终更新	实时显示当前时间

默认格式

类型	默认格式
date	YYYY-MM-DD
time	HH:mm:ss
datetime	YYYY-MM-DD HH:mm:ss

Events

事件	参数	说明
update:modelValue	string	值更新
change	string	值变化

使用示例

创建时间

<template>
  <CurrentDatetime
    v-model="createTime"
    type="datetime"
    fill-mode="onCreate"
  />
</template>

<script setup>
import { ref } from 'vue';

const createTime = ref('');
</script>

更新时间

<template>
  <CurrentDatetime
    v-model="updateTime"
    type="datetime"
    fill-mode="onUpdate"
  />
</template>

<script setup>
import { ref } from 'vue';

const updateTime = ref('');
</script>

仅日期

<template>
  <CurrentDatetime
    v-model="currentDate"
    type="date"
  />
</template>

<script setup>
import { ref } from 'vue';

const currentDate = ref('');
</script>

自定义格式

<template>
  <CurrentDatetime
    v-model="customTime"
    format="YYYY年MM月DD日 HH:mm"
    value-format="YYYY-MM-DD HH:mm:ss"
  />
</template>

<script setup>
import { ref } from 'vue';

const customTime = ref('');
</script>

实时更新显示

<template>
  <CurrentDatetime
    v-model="liveTime"
    type="datetime"
    :auto-update="true"
    fill-mode="always"
  />
</template>

<script setup>
import { ref } from 'vue';

const liveTime = ref('');
</script>

与表单设计器集成

在表单设计器中，该组件作为 current-datetime 类型的表单项使用：

{
  "type": "current-datetime",
  "field": "sys_create_datetime",
  "label": "创建时间",
  "props": {
    "type": "datetime",
    "fillMode": "onCreate",
    "format": "YYYY-MM-DD HH:mm:ss"
  }
}

典型应用场景

• 创建时间：fillMode="onCreate"，记录数据创建时间
• 更新时间：fillMode="onUpdate"，记录数据最后更新时间
• 当前日期：type="date"，显示当前日期
• 时钟显示：autoUpdate=true，实时显示当前时间