在 compare-form.vue 中添加 compareDate 隐藏字段,并在提交时自动填入当前时间

发布于:2025-02-27 ⋅ 阅读:(16) ⋅ 点赞:(0)

在 compare-form.vue 中添加 compareDate 隐藏字段,并在提交时自动填入当前时间。

  • 提交表单时存入的对象是FakeRegistration,这个对象里面有compareDate字段,刚好表格查询的对象也是FakeRegistration,所以表格展示的时间就是刚才提交的。
typescript:src/views/tools/fake-strategy/components/compare-form.vue
<template>
  <el-dialog
    // ... 其他代码保持不变 ...
  >
    <div class="ave-form-wrap">
      <div class="ave-form-box">
        <el-form>
          // ... 其他表单项保持不变 ...

          <!-- 添加隐藏的compareDate字段 -->
          <input v-model="form.compareDate" type="hidden" />

        </el-form>
      </div>
    </div>
    // ... 其他代码保持不变 ...
  </el-dialog>
</template>

<script lang="ts">
// ... 其他 import 保持不变 ...

export default class extends Vue {
  // ... 其他属性和方法保持不变 ...

  private handleSubmit() {
    // 在提交时自动填入当前时间
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    
    this.form.compareDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    this.save()
  }

  // ... 其他代码保持不变 ...
}
</script>

主要修改:

  1. 在表单中添加了隐藏的 compareDate 输入字段
  2. 在 handleSubmit 方法中,添加了自动生成当前时间的逻辑
  3. 生成的时间格式为 “YYYY-MM-DD HH:mm:ss”
  4. 在提交前将当前时间赋值给 form.compareDate

这样当用户点击提交按钮时,会自动将当前时间填入 compareDate 字段并发送给后端。

在这里插入图片描述