Vue3新增時自動獲取當(dāng)前時間的操作方法
更新時間：2024年07月24日 11:27:17 作者：小宋1021
這篇文章主要介紹了Vue3新增時自動獲取當(dāng)前時間的操作方法,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
如圖，點(diǎn)擊新增的時候自動獲取當(dāng)前的時間來作為創(chuàng)建時間
時間組件：
<el-form-item label="創(chuàng)建時間" prop="createTime">
<el-date-picker
v-model="createTime"
type="datetime"
value-format="x"
placeholder="選擇創(chuàng)建時間"
/>
</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('')打開彈窗時給創(chuàng)建時間賦值：
/** 打開彈窗 */
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()
// 修改時，設(shè)置數(shù)據(jù)
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
}為了怕大家找不到代碼應(yīng)該放在那里，我就在下面放上完整代碼，大家自行查找，謝謝大家。
<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="創(chuàng)建人" prop="creator">
<el-select v-model="formData.creator" placeholder="請選擇創(chuàng)建人">
<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="創(chuàng)建時間" prop="createTime">
<el-date-picker
v-model="createTime"
type="datetime"
value-format="x"
placeholder="選擇創(chuàng)建時間"
/>
</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('') // 彈窗的標(biāo)題
const formLoading = ref(false) // 表單的加載中：1）修改時的數(shù)據(jù)加載；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()
// 修改時，設(shè)置數(shù)據(jù)
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 事件，用于操作成功后的回調(diào)
const submitForm = async () => {
// 校驗(yàn)表單
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
// 發(fā)送操作成功的事件
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>到此這篇關(guān)于Vue3新增時自動獲取當(dāng)前時間的文章就介紹到這了,更多相關(guān)Vue3自動獲取當(dāng)前時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報錯原因是typescript?只能理解?.ts?文件，無法理解?.vue文件，本文通過多種情況分析給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01
在vue項目中和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,可運(yùn)行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)多標(biāo)簽選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購物車完整功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
基于Vue框架vux組件庫實(shí)現(xiàn)上拉刷新功能
這篇文章主要為大家詳細(xì)介紹了基于Vue框架vux組件庫實(shí)現(xiàn)上拉刷新功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Vue3項目使用PWA技術(shù)進(jìn)行離線加載的詳細(xì)流程
PWA是一種融合了 網(wǎng)頁（Web） 與 原生應(yīng)用（Native App） 優(yōu)點(diǎn)的技術(shù), 它讓你用網(wǎng)頁技術(shù)（HTML、CSS、JavaScript）構(gòu)建出一個能像原生應(yīng)用那樣,簡單來說,就是瀏覽器為你的網(wǎng)頁提供了離線應(yīng)用支持,所以本文給大家介紹了Vue3項目使用PWA技術(shù)進(jìn)行離線加載的過程2025-10-10
今天小編就為大家分享一篇關(guān)于vue中$nextTick的用法講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
優(yōu)雅的處理vue項目異常實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的處理vue項目異常的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue3使用ref與reactive創(chuàng)建響應(yīng)式對象的示例代碼
這篇文章主要詳細(xì)介紹了Vue3使用ref與reactive創(chuàng)建響應(yīng)式對象的方法步驟,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-02-02