feat(module_example): 增强demo模块功能

添加时间格式化工具函数
扩展demo表单项和接口字段
优化日期时间字段处理和JSON展示
移除冗余的时间格式化逻辑

backend/app/plugin/module_example/demo/schema.py

@@ -17,9 +17,9 @@ class DemoCreateSchema(BaseModel):
     b: int | None = Field(default=None, description="大整数")
     c: float | None = Field(default=None, description="浮点数")
     d: bool = Field(default=True, description="布尔型")
-    e: date | None = Field(default=None, description="日期")
+    e: DateStr | None = Field(default=None, description="日期")
-    f: time | None = Field(default=None, description="时间")
+    f: TimeStr | None = Field(default=None, description="时间")
-    g: datetime | None = Field(default=None, description="日期时间")
+    g: DateTimeStr | None = Field(default=None, description="日期时间")
     h: str | None = Field(default=None, description="长文本")
     i: dict | None = Field(default=None, description="元数据(JSON格式)")
 
@@ -61,11 +61,6 @@ class DemoOutSchema(DemoCreateSchema, BaseSchema, UserBySchema):
     """响应模型"""
     model_config = ConfigDict(from_attributes=True)
 
-    # 覆盖日期时间字段，使用可序列化的类型
-    e: DateStr | None = Field(default=None, description="日期")
-    f: TimeStr | None = Field(default=None, description="时间")
-    g: DateTimeStr | None = Field(default=None, description="日期时间")
-
 
 class DemoQueryParam:
     """示例查询参数"""

frontend/src/api/module_example/demo.ts

@@ -92,6 +92,8 @@ export interface DemoPageQuery extends PageQuery {
 
 export interface DemoTable extends BaseType {
   name?: string;
+  status?: string;
+  description?: string;
   created_by?: CommonType;
   updated_by?: CommonType;
   a?: number;
@@ -107,13 +109,15 @@ export interface DemoTable extends BaseType {
 
 export interface DemoForm extends BaseFormType {
   name?: string;
+  status?: string;
+  description?: string;
   a?: number;
   b?: number;
   c?: number;
   d?: boolean;
   e?: string;
-  f?: string;
+  f?: Date | string;
-  g?: string;
+  g?: Date | string;
   h?: string;
   i?: Record<string, any>;
 }

frontend/src/utils/dateUtil.ts

@@ -13,6 +13,10 @@ export function formatToDate(date?: dayjs.ConfigType, format = DATE_FORMAT): str
   return dayjs(date).format(format);
 }
 
+export function formatToTime(time?: dayjs.ConfigType, format = "HH:mm:ss"): string {
+  return dayjs(time).format(format);
+}
+
 export const useNow = (immediate = true) => {
   let timer: ReturnType<typeof setInterval>;
 

frontend/src/views/module_example/demo/index.vue

@@ -322,9 +322,7 @@
           min-width="140"
         >
           <template #default="scope">
-            <el-tooltip :content="JSON.stringify(scope.row.i)" placement="top">
+            <JsonPretty :value="scope.row.i" height="100px" />
-              <div class="json-preview">{{ JSON.stringify(scope.row.i) }}</div>
-            </el-tooltip>
           </template>
         </el-table-column>
         <el-table-column
@@ -465,9 +463,7 @@
             {{ detailFormData.h }}
           </el-descriptions-item>
           <el-descriptions-item label="元数据" :span="2">
-            <el-tooltip :content="JSON.stringify(detailFormData.i)" placement="top">
+            <JsonPretty :value="detailFormData.i" height="140px" />
-              <div class="json-preview">{{ JSON.stringify(detailFormData.i) }}</div>
-            </el-tooltip>
           </el-descriptions-item>
           <el-descriptions-item label="描述" :span="2">
             {{ detailFormData.description }}
@@ -529,10 +525,16 @@
               type="date"
               placeholder="请选择日期"
               style="width: 100%"
+              value-format="YYYY-MM-DD"
             />
           </el-form-item>
           <el-form-item label="时间" prop="f">
-            <el-time-picker v-model="formData.f" placeholder="请选择时间" style="width: 100%" />
+            <el-time-picker
+              v-model="formData.f"
+              placeholder="请选择时间"
+              style="width: 100%"
+              value-format="HH:mm:ss"
+            />
           </el-form-item>
           <el-form-item label="日期时间" prop="g">
             <el-date-picker
@@ -540,6 +542,7 @@
               type="datetime"
               placeholder="请选择日期时间"
               style="width: 100%"
+              value-format="YYYY-MM-DD HH:mm:ss"
             />
           </el-form-item>
           <el-form-item label="长文本" prop="h">
@@ -862,6 +865,8 @@ async function handleCloseDialog() {
 
 // 打开弹窗
 async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  // 每次打开弹窗前先重置表单
+  resetForm();
   dialogVisible.type = type;
   if (id) {
     const response = await DemoAPI.getDemoDetail(id);
@@ -885,44 +890,7 @@ async function handleSubmit() {
   dataFormRef.value.validate(async (valid: any) => {
     if (valid) {
       loading.value = true;
-      // 处理元数据字段，将字符串转换为JSON对象
       const submitData = { ...formData };
-      if (submitData.i && typeof submitData.i === "string") {
-        try {
-          submitData.i = JSON.parse(submitData.i);
-        } catch (error: any) {
-          ElMessage.error("元数据格式错误，请输入有效的JSON字符串" + error.message);
-          loading.value = false;
-          return;
-        }
-      }
-
-      // 处理时间字段格式
-      const formatDate = (date: Date | string | undefined): string | undefined => {
-        if (!date) return undefined;
-        const d = typeof date === "string" ? new Date(date) : date;
-        return d.toISOString().split("T")[0]; // 只保留日期部分 YYYY-MM-DD
-      };
-
-      const formatTime = (time: Date | string | undefined): string | undefined => {
-        if (!time) return undefined;
-        const t = typeof time === "string" ? new Date(time) : time;
-        return t.toTimeString().split(" ")[0]; // 只保留时间部分 HH:MM:SS
-      };
-
-      const formatDateTime = (datetime: Date | string | undefined): string | undefined => {
-        if (!datetime) return undefined;
-        const dt = typeof datetime === "string" ? new Date(datetime) : datetime;
-        const datePart = dt.toISOString().split("T")[0];
-        const timePart = dt.toTimeString().split(" ")[0];
-        return `${datePart} ${timePart}`; // 日期时间格式 YYYY-MM-DD HH:MM:SS
-      };
-
-      // 应用格式化
-      submitData.e = formatDate(submitData.e);
-      submitData.f = formatTime(submitData.f);
-      submitData.g = formatDateTime(submitData.g);
-      // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
       const id = formData.id;
       if (id) {
         try {