Vue3新增时自动获取当前时间的操作方法

更新时间：2024年07月24日 11:27:17 作者：小宋1021

这篇文章主要介绍了Vue3新增时自动获取当前时间的操作方法,本文通过实例代码图文相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

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

时间组件：

      <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>

到此这篇关于Vue3新增时自动获取当前时间的文章就介绍到这了,更多相关Vue3自动获取当前时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)
这篇文章主要介绍了vue3.0找不到模块“./App.vue”或其相应的类型声明,报错原因是typescript 只能理解 .ts 文件，无法理解 .vue文件，本文通过多种情况分析给大家详细讲解，需要的朋友可以参考下
2023-01-01
Vue中Axios的封装与接口管理详解
在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中,下面这篇文章主要给大家介绍了关于Vue中Axios的封装与接口管理的相关资料,需要的朋友可以参考下
2022-03-03
Vue实现多标签选择器
这篇文章主要为大家详细介绍了Vue实现多标签选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
vue实现购物车完整功能
这篇文章主要为大家详细介绍了vue实现购物车完整功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
基于Vue框架vux组件库实现上拉刷新功能
这篇文章主要为大家详细介绍了基于Vue框架vux组件库实现上拉刷新功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Vue3项目使用PWA技术进行离线加载的详细流程
PWA是一种融合了网页（Web）与原生应用（Native App）优点的技术, 它让你用网页技术（HTML、CSS、JavaScript）构建出一个能像原生应用那样,简单来说,就是浏览器为你的网页提供了离线应用支持,所以本文给大家介绍了Vue3项目使用PWA技术进行离线加载的过程
2025-10-10
vue中$nextTick的用法讲解
今天小编就为大家分享一篇关于vue中$nextTick的用法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
vue中如何实现拖拽调整顺序功能
这篇文章主要介绍了vue中如何实现拖拽调整顺序功能问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
优雅的处理vue项目异常实战记录
这篇文章主要给大家介绍了关于如何优雅的处理vue项目异常的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
Vue3使用ref与reactive创建响应式对象的示例代码
这篇文章主要详细介绍了Vue3使用ref与reactive创建响应式对象的方法步骤,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
2024-02-02

Vue3新增时自动获取当前时间的操作方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具