山东大学项目实训—微信小程序选座系统—7月19日

山东大学项目实训—7月19日

一、基本任务介绍

  我的任务是教学任务的管理，教学管理任务是保证管理员通过此功能来管理一次活动，如可以是一次讲座，每个活动应该有固定开始时间，结束时间，限制人数，活动内容介绍，活动使用的教室；同时可以查看当前选座情况、导出选座名单等。
  我主要负责的功能是：创建教学、可选座位管理、可选教室查询，房间冲突检测、生成签到二维码。但由于后期设计更改，二维码由后端生成，因此我不负责二维码生成功能。

二、完成任务

  我的第一阶段的基本任务已经完成，今天是添加验证和消息提醒。

• 未填写或填写错误消息提醒
  1、某部分未填写内容时消息提醒，将所有输入框设置为必填框。鼠标点击输入框后，鼠标移动后输入框出现消息提醒。
  展示：
  
  代码实现：
    先对表单进行声明包括，rules和ref声明，前者是存放验证规则，后者是声明索引，后续可用此索引对表单内容进行提取。在使用prop对每个表单项进行绑定，方便对每个表单项进行验证。
  
    在data()里对每个表单项的约束进行定义。

addactivityRules: {
        act_name: [
           {required: true, message: '请输入教学名称', trigger: 'blur'}
        ],
        act_desc: [
          {required: true, message: '请输入内容简介', trigger: 'blur'}
        ],
        room_name: [
          {required: true, message: '请输入教室名称', trigger: 'blur'}
        ],
        act_start_time: [
          {required: true, message: '请输入活动开始时间', trigger: 'blur'},
        ],
        act_end_time: [
          {required: true, message: '请输入活动结束时间', trigger: 'blur'},
        ],
        pick_start_time:[
          {required: true, message: '请输入开始预约时间', trigger: 'blur'},
          ],
        pick_end_time:[
          {required: true, message: '请输入截止预约时间', trigger: 'blur'},
        ],
        sign_in_time:[
          {required: true, message: '请输入开始签退时间', trigger: 'blur'},
        ],
        sign_out_time:[
          {required: true, message: '请输入开始签退时间', trigger: 'blur'},
        ],
      },

2、为每一个事件添加验证和消息提醒。
  包括：

  -查询可用教室时，输入的活动开始时间或活动结束时间为空、输入的活动结束时间早于活动开始时间、输入的活动开始时间早于当前时间。此时查询会提示错误，需要重新输入时间。
展示：

代码设计：

  -查询可用教室时，如没有得到可用教室，则进行消息提醒，重新选择活动时间。
代码设计：

  -座位布局管理时，如果没有选择教室，则进行消息提醒，需要选择教室。
展示：

代码设计：

  -添加活动时，如果添加成功则返回添加成功提醒，否则，则提醒重新进行填写。
展示：

代码设计：

• 时间填写验证和错误提醒
    添加时间验证，包括：所有的结束时间都晚于开始时间，开始预约时间要早于活动开始时间，所有的开始时间都要晚于当前时间，开始签到时间要晚于活动开始时间，开始签退时间要晚于活动结束时间。

代码设计：

  data() {
    //时间验证
    var validateActStart = (rule, value, callback) => {
      if(Date.now()>Date.parse(value)){
        callback("活动开始时间需晚于当前时间")
      }else{
        if (this.addactivityForm.act_end_time !== "") {
          this.$refs.addactivityFormRef.validateField('act_end_time')
        }
        callback()
      }
    };
    var validateActEnd = (rule, value, callback) => {
      if(value < this.addactivityForm.act_start_time){
        callback(new Error("活动结束时间需晚于活动开始时间"))
      }
      else{
        callback()
      }
    };
    var validatePickStart = (rule, value, callback) => {
      if(Date.now()>Date.parse(value)){
        callback("开始预约时间需晚于当前时间")
      }else{
        if(value > this.addactivityForm.act_start_time){
          callback(new Error("开始预约时间需早于活动开始时间"))
        }else{
          if(this.addactivityForm.pick_end_time !==''){
            this.$refs.addactivityFormRef.validateField("pick_end_time")
          }
          callback()
        }
      }
    };
    var validatePickEnd = (rule, value, callback) => {
      if(value > this.addactivityForm.act_end_time){
        callback(new Error("截止预约时间需早于活动结束时间"))
      }else{
        if(value < this.addactivityForm.pick_start_time){
          callback(new Error("截止预约时间需晚于开始预约时间"))
        } else{
          callback()
        }
      }
    };
    var validateSignIn = (rule, value, callback) => {
      if(value > this.addactivityForm.act_start_time){
        callback(new Error("开始签到时间需早于活动开始时间"))
      }else{
        callback()
      }
    };
    var validateSignOut = (rule, value, callback) => {
      if(value < this.addactivityForm.act_end_time){
        callback(new Error("开始签退时间需晚于活动结束时间"))
      }else{
        callback()
      }
    };

    return {
      //简单约束,时间约束
      addactivityRules: {
        act_name: [
           {required: true, message: '请输入教学名称', trigger: 'blur'}
        ],
        act_desc: [
          {required: true, message: '请输入内容简介', trigger: 'blur'}
        ],
        room_name: [
          {required: true, message: '请输入教室名称', trigger: 'blur'}
        ],
        act_start_time: [
          {required: true, message: '请输入活动开始时间', trigger: 'blur'},
          {validator: validateActStart, trigger: "blur"}
        ],
        act_end_time: [
          {required: true, message: '请输入活动结束时间', trigger: 'blur'},
          {validator: validateActEnd, trigger: "blur"}
        ],
        pick_start_time:[
          {required: true, message: '请输入开始预约时间', trigger: 'blur'},
          {validator: validatePickStart, trigger: "blur"}
        ],
        pick_end_time:[
          {required: true, message: '请输入截止预约时间', trigger: 'blur'},
          {validator: validatePickEnd, trigger: "blur"}
        ],
        sign_in_time:[
          {required: true, message: '请输入开始签退时间', trigger: 'blur'},
          {validator: validateSignIn, trigger: "blur"}
        ],
        sign_out_time:[
          {required: true, message: '请输入开始签退时间', trigger: 'blur'},
          {validator: validateSignOut, trigger: "blur"}
        ],
      },
    }
  },

界面举例：

三、下一步计划

  继续完善设计，进行活动管理的协同测试和界面优化。