网站建设系统源码,陕西恒立建设集团网站,贵阳做网站费用,wordpress移机♥️作者#xff1a;小宋1021 #x1f935;♂️个人主页#xff1a;小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识#xff0c;和大家一起努力呀#xff01;#xff01;#xff01; #x1f388;#x1f388;加油#xff01; 加油#xff01…♥️作者小宋1021 ♂️个人主页小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识和大家一起努力呀 加油 加油 加油 加油 欢迎评论 点赞 收藏 加关注 如图想往数据库存一个时间段在后端用两个字段接收
实体类 /*** 开始时间*/private LocalDateTime meetingStartTime;/*** 结束时间*/private LocalDateTime meetingEndTime; ParentMeetingRespVO Schema(description 开始时间)private LocalDateTime meetingStartTime;Schema(description 结束时间)private LocalDateTime meetingEndTime; ParentMeetingSaveReqVO Schema(description 开始时间)private LocalDateTime meetingStartTime;Schema(description 结束时间)private LocalDateTime meetingEndTime;
controller PostMapping(/create)Operation(summary 创建家长会)PreAuthorize(ss.hasPermission(study:parent-meeting:create))public CommonResultLong createParentMeeting(Valid RequestBody ParentMeetingSaveReqVO createReqVO) {return success(parentMeetingService.createParentMeeting(createReqVO));}
service /*** 创建家长会** param createReqVO 创建信息* return 编号*/Long createParentMeeting(Valid ParentMeetingSaveReqVO createReqVO);
实现类 Overridepublic Long createParentMeeting(ParentMeetingSaveReqVO createReqVO) {// 插入ParentMeetingDO parentMeeting BeanUtils.toBean(createReqVO, ParentMeetingDO.class);parentMeetingMapper.insert(parentMeeting);// 返回return parentMeeting.getId();}前端
组件 el-form-item label时间 proptimeel-date-pickerv-modelformData.timestylewidth: calc(100% - 20px); font-size: 1px;typedatetimerangestart-placeholder开始时间end-placeholder结束时间placeholder选择时间changechanges//el-form-item
点击事件并转换成时间戳
const changes(e){const date new Date(e[0])const date2 new Date(e[1])// 获取时间戳毫秒 const timestamp date.getTime()const timestamp2 date2.getTime()formData.value.meetingStartTime timestampformData.value.meetingEndTime timestamp2formData.value.time [dateFormat(timestamp),dateFormat(timestamp2)]}
dateform转换
const dateFormat (value){let date new Date(value);let y date.getFullYear();let MM date.getMonth() 110? (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();return y - MM - d
}
完整代码
templateDialog :titledialogTitle v-modeldialogVisible width1100pxel-formrefformRef:modelformData:rulesformRuleslabel-width100pxv-loadingformLoadingdiv stylepadding: 8px 0;background: #f8fbffdiv classtipdiv classbold/divspan classbtitle/span/divel-row :gutter24el-form-item label主题 propsubject stylewidth: 46%;margin-left: 15px ;el-input v-modelformData.subject placeholder请输入主题 //el-form-item/el-rowel-rowel-form-item label班级名称 propclassNameel-select v-modelformData.className placeholder请选择班级名称el-option label班级名称 value //el-select/el-form-item/el-rowel-rowel-form-item label时间 proptimeel-date-pickerv-modelformData.timestylewidth: calc(100% - 20px); font-size: 1px;typedatetimerangestart-placeholder开始时间end-placeholder结束时间placeholder选择时间changechanges//el-form-item/el-row!-- el-form-item label老师名称 propteacherNameel-select v-modelformData.teacherName placeholder请选择老师名称el-option label老师名称 value //el-select/el-form-item --el-rowel-form-item label形式 proptypeel-select v-modelformData.type placeholder请选择形式el-option label形式 value //el-select/el-form-item!-- el-form-item label实到 proparrivedNumel-input v-modelformData.arrivedNum placeholder请输入实到 //el-form-item --!-- el-form-item label状态 propstatusel-select v-modelformData.status placeholder请选择状态el-option label状态 value //el-select/el-form-item --/el-row/div/el-formtemplate #footerel-button clicksubmitForm typeprimary :disabledformLoading发 布/el-buttonel-button clicksubmitForm typeprimary :disabledformLoading确 定/el-buttonel-button clickdialogVisible false取 消/el-button/template/Dialog
/template
script setup langts
import { ParentMeetingApi, ParentMeetingVO } from /api/study/parentmeeting
import { fr } from element-plus/es/locale;/** 家长会 表单 */
defineOptions({ name: ParentMeetingForm })
const time ref([
])
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,className: undefined,subject: undefined,time: undefined,teacherName: undefined,type: undefined,arrivedNum: undefined,status: undefined,meetingContent: undefined,meetingImage: undefined,parentName: undefined,parentPhone: undefined,absentReason: undefined,arrivingNum: undefined,meetingStartTime: undefined,meetingEndTime: undefined,
})
const formRules reactive({
})
const formRef ref() // 表单 Ref/** 打开弹窗 */
const open async (type: string, id?: number) {dialogVisible.value truedialogTitle.value t(action. type)formType.value typeresetForm()// 修改时设置数据if (id) {formLoading.value truetry {formData.value await ParentMeetingApi.getParentMeeting(id)} finally {formLoading.value false}}
}
defineExpose({ open }) // 提供 open 方法用于打开弹窗
const changes(e){const date new Date(e[0])const date2 new Date(e[1])// 获取时间戳毫秒 const timestamp date.getTime()const timestamp2 date2.getTime()formData.value.meetingStartTime timestampformData.value.meetingEndTime timestamp2formData.value.time [dateFormat(timestamp),dateFormat(timestamp2)]}
/** 提交表单 */
const emit defineEmits([success]) // 定义 success 事件用于操作成功后的回调
const submitForm async () {// 校验表单await formRef.value.validate()// 提交请求formLoading.value truetry {const data formData.value as unknown as ParentMeetingVOif (formType.value create) {await ParentMeetingApi.createParentMeeting(data)message.success(t(common.createSuccess))} else {await ParentMeetingApi.updateParentMeeting(data)message.success(t(common.updateSuccess))}dialogVisible.value false// 发送操作成功的事件emit(success)} finally {formLoading.value false}
}
const dateFormat (value){let date new Date(value);let y date.getFullYear();let MM date.getMonth() 110? (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();return y - MM - d
}
/** 重置表单 */
const resetForm () {formData.value {id: undefined,className: undefined,subject: undefined,time: undefined,teacherName: undefined,type: undefined,arrivedNum: undefined,status: undefined,meetingContent: undefined,meetingImage: undefined,parentName: undefined,parentPhone: undefined,absentReason: undefined,arrivingNum: undefined,meetingStartTime: undefined,meetingEndTime: undefined,}formRef.value?.resetFields()
}
/script
style scoped langscss
.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%;
}
.el-scrollbar:nth-of-type(2) {display: none !important;}
.el-time-spinner {text-align: center;
}/style
