如图，点击新增的时候自动获取当前的时间来作为创建时间
时间组件：
<el-form-item label="创建时间" prop="createTime"><el-date-pickerv-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 = truedialogTitle.value = t('action.' + type)formType.value = typeresetForm()userList.value = await UserApi.getSimpleUserList()// 修改时，设置数据if (id) {formLoading.value = truetry {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-formref="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-optionv-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-optionv-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-optionv-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-optionv-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-pickerv-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 = truedialogTitle.value = t('action.' + type)formType.value = typeresetForm()userList.value = await UserApi.getSimpleUserList()// 修改时，设置数据if (id) {formLoading.value = truetry {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 = truetry {const data = formData.value as unknown as ResearchingManageVOif (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>
