vue+java实现预约时间段、数量设置

本文将会介绍如何制作一个预约时间段、数量的设置；

笔者前端使用vue3+javaScript+element-plus编写；

后端采用springboot+mybatis-plus进行编写。

 效果演示

设置效果演示

• 模板

<el-dialog :title="title" v-model="open" width="50vw" append-to-body :before-close="handleClose">
      <el-table
          :data="timeOptions"
          style="width: 100%;"
          border
      >
        <el-table-column label="预约时段" align="center">
          <template #default="scope">
            <el-row>
              <el-col :span="10">
                <el-time-picker
                    v-model="scope.row.startTime"
                    placeholder="开始时间"
                    format="HH:mm"
                    value-format="HH"
                    :editable="false"
                    :disabled-minutes = disabledMinutes
                ></el-time-picker>
              </el-col>
              <el-col :span="2" class="text-center">至</el-col>
              <el-col :span="10">
                <el-time-picker
                    v-model="scope.row.endTime"
                    placeholder="结束时间"
                    format="HH:mm"
                    value-format="HH"
                    :editable="false"
                    :disabled-minutes = disabledMinutes
                ></el-time-picker>
              </el-col>
            </el-row>
          </template>
        </el-table-column>

        <el-table-column label="可预约车辆数" align="center">
          <template #default="scope">
            <el-input-number
                v-model="scope.row.amount"
                :min="1"
                :max="20"
                placeholder="请输入数量"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <el-button
                type="success"
                :icon="Plus"
                circle
                size="small"
                v-if="!scope.row.configId"
                @click="saveRow(scope.row)"
            ></el-button>
            <el-button
                type="success"
                :icon="Edit"
                circle
                size="small"
                v-if="scope.row.configId"
                @click="updateRow(scope.row)"
            ></el-button>
            <el-button
                type="danger"
                :icon="Delete"
                circle
                size="small"
                @click="removeRow(scope.$index,scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-button
          type="primary"
          :icon="Edit"
          size="default"
          @click="addRow"
          style="margin-top: 10px;"
      >
        新增时间段
      </el-button>
    </el-dialog>

• 脚本

function  makeRange(start, end) {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}
export function disabledMinutes(){
    return makeRange(0, 60)
}
export function getTimeList(){
    listTime().then(res=>{
        open.value = true
        title.value = '设置工作时间'
        timeOptions.value = res.data
    })
}
export function addRow(){
    if (timeOptions.value.length == 0 || timeOptions.value[timeOptions.value.length - 1].configId){
        timeOptions.value.push({
            startTime:'',
            endTime:'',
            amount:0
        })
    }else {
        ElMessage.error('请先填写并提交预约时间配置');
    }
}
export function saveRow(row){
    if (!row.startTime || !row.endTime || !row.amount){
        ElMessage.error('请填写完整信息');
        return
    }
    const requestBody = {
        startTime:formatTime(row.startTime),
        endTime:formatTime(row.endTime),
        amount:row.amount
    }
    addTime(requestBody).then(res=>{
        ElMessage.success('保存成功')
        getTimeList()
    })
}
export function updateRow(row){
    const startTime = row.startTime.split(":")[0]
    const endTime = row.endTime.split(":")[0]
    const requestBody = {
        configId:row.configId,
        startTime:formatTime(startTime),
        endTime:formatTime(endTime),
        amount:row.amount
    }
    updateTime(requestBody).then(res=>{
        ElMessage.success('修改成功')
        getTimeList()
    })
}
export function removeRow(index, row){
    if (row.configId){
        ElMessageBox.confirm(
            '确定要删除该配置吗？',
            '系统提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            deleteTime(row.configId).then(res=>{
                ElMessage.success('删除成功')
                getTimeList()
            })
        }).catch(() => {
            ElMessage.info('已取消删除')
        })
    }else {
        timeOptions.value.splice(index,1)
    }
}
export function handleClose(){
    ElMessageBox.confirm('你确定要关闭该对话框吗？').then(() =>{
        open.value = false
    })
}

•  后端

@RestController
@RequestMapping("/calendar/holiday")
public class CalendarController {
    @Autowired
    private final WechatTimeConfigService timeConfigService;
    public CalendarController(WechatCalendarService calendarService) {
        this.timeConfigService = timeConfigService;
    }
    
    @GetMapping("/time/list")
    public AjaxResult timeList(){
        List<WechatTimeConfig> list = timeConfigService.list();
        return AjaxResult.success(list);
    }
    @PostMapping("/time/add")
    public AjaxResult addTime(@RequestBody WechatTimeConfig timeConfig){
        timeConfig.setCreateTime(LocalDateTime.now());
        timeConfigService.save(timeConfig);
        return AjaxResult.success();
    }
    @PutMapping("/time/update")
    public AjaxResult updateTime(@RequestBody WechatTimeConfig timeConfig){
        timeConfigService.updateById(timeConfig);
        return AjaxResult.success();
    }
    @DeleteMapping("/time/delete/{configId}")
    public AjaxResult deleteTime(@PathVariable Long configId){
        timeConfigService.removeById(configId);
        return AjaxResult.success();
    }
}