本章節要完成的功能為通過點擊日曆中的設置按鈕來設置對應日期的可預約人數。效果如下：

element plus 日曆 預約_ajax

完善頁面

為設置按鈕綁定事件

為日曆中的設置按鈕綁定單擊事件，當前日期作為參數

<button v-if="dayobject.day > today" 
        @click="handleOrderSet(dayobject.day)" class="orderbtn">設置</button>
//預約設置
handleOrderSet(day){
    alert(day);
}

彈出預約設置窗口併發送ajax請求

完善handleOrderSet方法，彈出預約設置窗口，用户點擊確定按鈕則發送ajax請求

element plus 日曆 預約_ajax_02

element plus 日曆 預約_element plus 日曆 預約_03

//預約設置
handleOrderSet(day){
  this.$prompt('請輸入可預約人數', '預約設置', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    inputPattern: /^[0-9]*[1-9][0-9]*$/,
    inputErrorMessage: '只能輸入正整數'
  }).then(({ value }) => {
    //發送ajax請求根據日期修改可預約人數
    axios.post("/ordersetting/editNumberByDate.do",{
      orderDate:this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate()), //日期
      number:value   //可預約人數
    }).then((response)=>{
      if(response.data.flag){
        this.initData(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1));
        this.$message({
          type: 'success',
          message: response.data.message
        });
      }else{
        this.$message.error(response.data.message);
      }
    });
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消'
    });
  });
}

View Code

後台代碼

Controller

在OrderSettingController中提供方法editNumberByDate

/**
* 根據指定日期修改可預約人數
* @param orderSetting
* @return
*/
@RequestMapping("/editNumberByDate")
public Result editNumberByDate(@RequestBody OrderSetting orderSetting){
  try{
    orderSettingService.editNumberByDate(orderSetting);
    //預約設置成功
    return new Result(true,MessageConstant.ORDERSETTING_SUCCESS);
  }catch (Exception e){
    e.printStackTrace();
    //預約設置失敗
    return new Result(false,MessageConstant.ORDERSETTING_FAIL);
  }
}

服務接口

在OrderSettingService服務接口中提供方法editNumberByDate

public void editNumberByDate(OrderSetting orderSetting);

服務實現類

在OrderSettingServiceImpl服務實現類中實現editNumberByDate

//根據日期修改可預約人數
public void editNumberByDate(OrderSetting orderSetting) {
  long count = orderSettingDao.findCountByOrderDate(orderSetting.getOrderDate());
  if(count > 0){
    //當前日期已經進行了預約設置，需要進行修改操作
    orderSettingDao.editNumberByOrderDate(orderSetting);
  }else{
    //當前日期沒有進行預約設置，進行添加操作
    orderSettingDao.add(orderSetting);
  }
}

Dao接口

在OrderSettingDao接口中提供方法

public void editNumberByOrderDate(OrderSetting orderSetting);
public long findCountByOrderDate(Date orderDate);

Mapper映射文件

在OrderSettingDao.xml映射文件中提供SQL

<!--根據日期更新可預約人數-->
<update id="editNumberByOrderDate" parameterType="com.itheima.pojo.OrderSetting">
  update t_ordersetting set number = #{number} where orderDate = #{orderDate}
</update>
<!--根據預約日期查詢-->
<select id="findCountByOrderDate" parameterType="java.util.Date" resultType="long">
  select count(*) from t_ordersetting where orderDate = #{orderDate}
</select>