Vue3新增时自动获取当前时间

news2024/9/22 15:48:09

如图，点击新增的时候自动获取当前的时间来作为创建时间

时间组件：

      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="createTime"
          type="datetime"
          value-format="x"
          placeholder="选择创建时间"
        />
      </el-form-item>

formData：

const formData = ref({
  id: undefined,
  courseType: undefined,
  subject: undefined,
  fileType: undefined,
  appendixName: undefined,
  creator:  userStore.user.id,
  createTime: undefined,
})
const createTime = ref('')

打开弹窗时给创建时间赋值：

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  createTime.value = dateFormat()
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  userList.value = await UserApi.getSimpleUserList()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ResearchingManageApi.getResearchingManage(id)
     formData.value.createTime = createTime.value

    } finally {
      formLoading.value = false
    }
  }
  // 获得登录人名称
  userList.value = await UserApi.getSimpleUserList()
  userList.value.forEach((item) => {
    if (item.id === userStore.user.id) {
      creator.value = item.nickname
    }
  })
}

获取时间方法：

const dateFormat = ()=>{
  let date = new Date();
      let y = date.getFullYear();
      let MM = 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() < 10 ? ('0' +date.getHours()) : date.getHours();
      const m = date.getMinutes()< 10 ? ('0' + date.getMinutes()) : date.getMinutes();
      let s = date.getSeconds() < 10 ? ('0' +date.getSeconds()) : date.getSeconds();
      console.log( y + '-' + MM + '-' + d + ' ' + h + ':' + m  + ':' +s)
      return  y + '-' + MM + '-' + d + ' ' + h + ':' + m  + ':' +s
}

为了怕大家找不到代码应该放在那里，我就在下面放上完整代码，大家自行查找，谢谢大家。

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
    <div style="padding: 8px 0;background: #f8fbff">
       
        <el-row :gutter="24">
      <el-form-item label="课程类型" prop="courseType">
        <el-select v-model="formData.courseType" placeholder="请选择课程类型">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.COURSE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="科目" prop="subject">
        <el-select v-model="formData.subject" placeholder="请选择科目">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.SUBJECT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文件类型" prop="fileType">
        <el-select v-model="formData.fileType" placeholder="请选择文件类型">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.FILE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="附件名称" prop="appendixName">
        <el-input v-model="formData.appendixName" placeholder="请输入附件名称" />
      </el-form-item>
      <el-form-item label="创建人" prop="creator">
            <el-select v-model="formData.creator" placeholder="请选择创建人">
              <el-option
                v-for="dict in userList"
                :key="dict.id"
                :label="dict.nickname"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="createTime"
          type="datetime"
          value-format="x"
          placeholder="选择创建时间"
        />
      </el-form-item>
    </el-row>
  </div>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { ResearchingManageApi, ResearchingManageVO } from '@/api/teach/researchingmanage'
import { useUserStore } from '@/store/modules/user'
import * as UserApi from '@/api/system/user'
const userStore = useUserStore()
/** 教研管理 表单 */
defineOptions({ name: 'ResearchingManageForm' })
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  courseType: undefined,
  subject: undefined,
  fileType: undefined,
  appendixName: undefined,
  creator:  userStore.user.id,
  createTime: undefined,
})
const formRules = reactive({
})
const createTime = ref('')
const formRef = ref() // 表单 Ref
const creator = ref('')
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  createTime.value = dateFormat()
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  userList.value = await UserApi.getSimpleUserList()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ResearchingManageApi.getResearchingManage(id)
     formData.value.createTime = createTime.value

    } finally {
      formLoading.value = false
    }
  }
  // 获得登录人名称
  userList.value = await UserApi.getSimpleUserList()
  userList.value.forEach((item) => {
    if (item.id === userStore.user.id) {
      creator.value = item.nickname
    }
  })
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const dateFormat = ()=>{
  let date = new Date();
      let y = date.getFullYear();
      let MM = 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() < 10 ? ('0' +date.getHours()) : date.getHours();
      const m = date.getMinutes()< 10 ? ('0' + date.getMinutes()) : date.getMinutes();
      let s = date.getSeconds() < 10 ? ('0' +date.getSeconds()) : date.getSeconds();
      console.log( y + '-' + MM + '-' + d + ' ' + h + ':' + m  + ':' +s)
      return  y + '-' + MM + '-' + d + ' ' + h + ':' + m  + ':' +s
}
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ResearchingManageVO
    if (formType.value === 'create') {
      await ResearchingManageApi.createResearchingManage(data)
      message.success(t('common.createSuccess'))
    } else {
      await ResearchingManageApi.updateResearchingManage(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    courseType: undefined,
    subject: undefined,
    fileType: undefined,
    appendixName: undefined,
    creator: userStore.user.id,
    createTime: undefined,
  }
  formRef.value?.resetFields()
}
</script>
<style scoped lang="scss">
.el-form-item{
  width: 47%;
}
:deep(.el-form-item__label){
  width: 130px !important;
}
.bold{
  width: 20px;
  height:20px;
  border-radius: 50%;
  background:#85afd5;
  text-align: center;
  margin-top:5px;
  margin-left:-10px;
  color:#fff
}
.btitle{
  line-height:30px;
  margin-left:10px;
  color:#84b0d5
}
.tip{
  border:1px solid #84b0d5;
  border-radius:0 20px 20px 0;
  width:140px;
  height:30px;
  display:flex;
  margin-left:30px;
  margin-bottom:20px
}
:deep(.el-form-item__content){
  display: block;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper){
  width: -webkit-fill-available;
}
.textarea{
  width: 94%;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1935370.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI算不出9.11和9.9哪个大？六家大模型厂商总结了这些原因

AI算不出9.11和9.9哪个大？六家大模型厂商总结了这些原因

大模型“答对”或“答错”其实是个概率问题。关于“9.11和9.9哪个大”&#xff0c;这样一道小学生难度的数学题难倒了一众海内外AI大模型。7月17日&#xff0c;第一财经报道了国内外“12个大模型8个都会答错”这道题的现象&#xff0c;大模型的数学能力引发讨论。 “从技术人员…
阅读更多...
《基于 CDC、Spark Streaming、Kafka 实现患者指标采集》

《基于 CDC、Spark Streaming、Kafka 实现患者指标采集》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…
阅读更多...
AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理

AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理

AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理 目录 AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理 一、简单介绍 二、零样本学习 (Zero-shot Learning) 和少样本学习 (Few-shot Learning) 1、零样本学…
阅读更多...
RV1103使用rtsp和opencv推流视频到网页端

RV1103使用rtsp和opencv推流视频到网页端

参考&#xff1a; Luckfox-Pico/Luckfox-Pico-RV1103/Luckfox-Pico-pinout/CSI-Camera Luckfox-Pico/RKMPI-example Luckfox-Pico/RKMPI-example 下载源码 其中源码位置&#xff1a;https://github.com/luckfox-eng29/luckfox_pico_rtsp_opencv 使用git clone由于项目比较大&am…
阅读更多...
vi 编辑器快捷生成 main 函数和基本框架

vi 编辑器快捷生成 main 函数和基本框架

step1: 执行 sudo vi /etc/vim/vimrc &#xff08;修改vimrc需要管理员权限&#xff1a;sudo&#xff09; step2:输入用户密码&#xff0c;回车, 编辑vimrc文件 step3:在尾行输入以下代码&#xff08;可复制&#xff09; map mf i#include<stdio.h><ESC>o#includ…
阅读更多...
一篇论文分享，以多模态的形式来做RAG的研究

一篇论文分享，以多模态的形式来做RAG的研究

这篇论文&#xff0c;给我很强的割裂感和冲击感。非常值得阅读。我是做RAG相关研究工作的 &#xff0c;过去一年在做传统的RAG&#xff0c;就是标准的文档解析&#xff0c;chunk&#xff0c;召回&#xff0c;排序&#xff0c;模型生成答案这条路。深谙RAG的复杂&#xff0c;中间…
阅读更多...
PostgreSQL创建表和自增序列

PostgreSQL创建表和自增序列

一、创建表&#xff1a; 注意&#xff1a; 1、在mysql没有序列的概念&#xff0c;id自增通过auto_increment实现&#xff1b; 2、pgsql没有auto_increment的概念&#xff0c;如何实现id自增&#xff1f;有两种方式&#xff1a; 方式一&#xff1a;创建序列&#xff0c;绑定…
阅读更多...
Dify是什么？能用来做什么？

Dify是什么？能用来做什么？

吾名爱妃&#xff0c;性好静亦好动。好编程&#xff0c;常沉浸于代码之世界&#xff0c;思维纵横&#xff0c;力求逻辑之严密&#xff0c;算法之精妙。亦爱篮球&#xff0c;驰骋球场&#xff0c;尽享挥洒汗水之乐。且喜跑步&#xff0c;尤钟马拉松&#xff0c;长途奔袭&#xf…
阅读更多...
idea怎么配置gradle多个版本

idea怎么配置gradle多个版本

1.背景 gradle版本很多,而且很多时候版本是不兼容的,我们希望拉取下来的代码就包含已经配置好的版本,而不是去配置本机的gradle版本..... 意思就是要实现项目A可以用6.X版本 项目B可以使用7.X版本 项目C可以用9.X版本..... 2.配置方式 步骤一:项目根路径下保留一个文件夹…
阅读更多...
Axios使用方法详解，从入门到进阶

Axios使用方法详解，从入门到进阶

目录 &#x1f333; Axios的诞生 &#x1f333; Axios的介绍 定义 原理 特性 浏览器支持情况 如何安装 &#x1f333; Axios的使用 ◼️ 创建vue项目 ◼️ Axios的基础用法&#xff08;get、post、put 等请求方法&#xff09; get方法 post方法 put和patch方法 …
阅读更多...
ts踩坑！vue3中ts文件用export导出公共方法的ts类型定义

ts踩坑！vue3中ts文件用export导出公共方法的ts类型定义

当我们有一个ts文件&#xff0c;定义并export出该function&#xff0c;其中方法里边有定义的变量&#xff0c;方法、钩子函数等多种&#xff0c;并最终return出该变量、方法。 此时 ts规则校验会让我们返回该函数类型。如下 export default function () {const chart ref();c…
阅读更多...
vue echarts 柱状图表，点击柱子，路由代参数（X轴坐标）跳转

vue echarts 柱状图表，点击柱子，路由代参数（X轴坐标）跳转

一 myChart.on(click, (params) > {if (params.componentType series && params.dataIndex ! undefined) {const months this.month_htqd[params.dataIndex]; // 获取点击柱状图的 X 轴坐标值alert(点击了柱状图&#xff0c;值为: ${months});// 根据点击的柱状图…
阅读更多...
PHP房产中介租房卖房平台微信小程序系统源码

PHP房产中介租房卖房平台微信小程序系统源码

​&#x1f3e0;【租房卖房新选择】揭秘房产中介小程序&#xff0c;一键搞定置业大事&#xff01;&#x1f3e1; &#x1f50d;【开篇&#xff1a;告别繁琐&#xff0c;拥抱便捷】&#x1f50d; 还在为找房子跑断腿&#xff1f;为卖房发愁吗&#xff1f;今天给大家安利一个超…
阅读更多...
前端开发_注意事项

前端开发_注意事项

无论使用哪种框架开发&#xff08;vue、react、...&#xff09;&#xff0c;前端开发终究是结构&#xff08;HTML&#xff09;、样式&#xff08;CSS&#xff09;、逻辑&#xff08;用户操作数据处理对接后端API&#xff09;。那么开发过程中都需要注意哪些事项&#xff0c;本文…
阅读更多...
【单片机毕业设计选题24072】-基于单片机的智能停车场管理系统

【单片机毕业设计选题24072】-基于单片机的智能停车场管理系统

系统功能: 1.根据RFID卡卡号判断新老用户&#xff0c;老用户不计费直接放行&#xff0c;新用户放行时显示计费结果 2.显示屏显示车位剩余数量 3.检测车位有车亮红灯&#xff0c;无车亮绿灯&#xff0c;能够实现车位诱导 5.车辆出停车场时&#xff0c;能根据停车时间计算停车…
阅读更多...
大数据采集工具——Flume简介安装配置使用教程

大数据采集工具——Flume简介安装配置使用教程

Flume简介&安装配置&使用教程 1、Flume简介 一&#xff1a;概要 Flume 是一个可配置、可靠、高可用的大数据采集工具&#xff0c;主要用于将大量的数据从各种数据源&#xff08;如日志文件、数据库、本地磁盘等&#xff09;采集到数据存储系统&#xff08;主要为Had…
阅读更多...
计算机课设——基于Java web的超市管理系统

计算机课设——基于Java web的超市管理系统

smbms_java_web 基于Java web的超市管理系统&#xff0c;数据库课程设计 1.引言 是一个基于Java Web连接MySQL的小项目。 超市管理系统(smbms)作为每个计算机专业的大学生都是一个很好的练手项目&#xff0c;逻辑层次分明&#xff0c;基础功能包括用户的登录和注销&#xff…
阅读更多...
云手机结合自主ADB命令接口 提升海外营销效率

云手机结合自主ADB命令接口 提升海外营销效率

现在&#xff0c;跨境电商直播已经成为在线零售的重要渠道&#xff0c;在大环境下&#xff0c;确保直播应用的稳定性和用户体验至关重要。 云手机支持自主ADB命令接口&#xff0c;为电商直播营销提供了技术支持&#xff0c;使得应用开发、测试、优化和运维更加高效。 什么是A…
阅读更多...
鸿蒙语言基础类库：【@system.sensor (传感器)】

鸿蒙语言基础类库：【@system.sensor (传感器)】

传感器 说明&#xff1a; 从API Version 8开始&#xff0c;该接口不再维护&#xff0c;推荐使用新接口[ohos.sensor]。本模块首批接口从API version 4开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。该功能使用需要对应硬件支持&#xff0c;仅支持…
阅读更多...
什么是信息指纹和信息加密——《数学之美》第16、17章以及其他各种资料的读书笔记

什么是信息指纹和信息加密——《数学之美》第16、17章以及其他各种资料的读书笔记

目录 1. 信息指纹 1.1 概念 1.2 相关算法的演进历程 1.3 哈希碰撞 1.4 雪崩效应 1.5 应用场景 2. 信息加密 2.1 密码学的简要历史 2.1.1 古代密码学&#xff1a;智慧的萌芽 2.1.2 中世纪至文艺复兴&#xff1a;密码术的兴起 2.1.3 近代密码学&#xff1a;机械密码机的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023