School_bus_manage/src/views/waiting/waiting.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">系统设置</span>
    </div>
    <div class="middle">
      <div class="filter">
        <div class="condition">
          <div style="display: flex; align-items: center">
            <h3>开始时间段设置</h3>
            <!-- <el-button
              color="rgba(61, 81, 232, 1)"
              @click="editSystem"
              v-if="timeShow"
              type="primary"
              >修改</el-button
            >
            <el-button
              color="rgba(61, 81, 232, 1)"
              @click="saveSystem"
              v-if="!timeShow"
              type="primary"
              >保存</el-button
            >
            <el-button @click="cancelSystem" v-if="!timeShow" plain
              >取消</el-button
            > -->
          </div>
          <div
            style="display: flex; align-items: center; margin-bottom: 8px"
            v-for="(i, ind) in timeList.list" :key="ind"
          >
            <div class="addTime">
              <span>周期配置&nbsp;&nbsp;</span>
              <el-checkbox-group
                @change="saveTime($event, i.id, '星期一')"
                v-model="i.day1"
              >
                <el-checkbox :label="1">星期一</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group
                @change="saveTime($event, i.id, '星期二')"
                v-model="i.day2"
              >
                <el-checkbox :label="1">星期二</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group
                @change="saveTime($event, i.id, '星期三')"
                v-model="i.day3"
              >
                <el-checkbox :label="1">星期三</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group
                @change="saveTime($event, i.id, '星期四')"
                v-model="i.day4"
              >
                <el-checkbox :label="1">星期四</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group
                @change="saveTime($event, i.id, '星期五')"
                v-model="i.day5"
              >
                <el-checkbox :label="1">星期五</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group
                @change="saveTime($event, i.id, '星期六')"
                v-model="i.day6"
              >
                <el-checkbox :label="1">星期六</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group
                @change="saveTime($event, i.id, '星期日')"
                v-model="i.day7"
              >
                <el-checkbox :label="1">星期日</el-checkbox>
              </el-checkbox-group>

              <div style="margin: 0 18px">
                <el-time-picker
                  class="timePicker"
                  v-model="i.timePicker"
                  :clearable="false"
                  is-range
                  format="HH:mm"
                  value-format="HH:mm"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="saveTime($event, i.id)"
                />
              </div>
            </div>
            <div>
              <span
                @click="addTime(ind)"
                style="cursor: pointer; color: rgb(30, 125, 251)"
                >添加</span
              >
              <span
                v-if="timeList.list.length > 1"
                @click="delTime(ind, i.id)"
                style="cursor: pointer; color: #f56c6c"
                >删除</span
              >
            </div>
          </div>
        </div>
        <div class="condition">
          <h3>截止预约时间设置</h3>
          <div>
            <span>发车前</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.yy_end"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <!-- <el-time-picker
              v-model="ruleForm.hh_end"
              format="HH:mm"
              value-format="HH:mm"
              @change="timeUpdata"
            /> -->
            <span>&nbsp;&nbsp;分钟</span>
          </div>
        </div>
        <div class="condition">
          <h3>扫码时间设置</h3>
          <div>
            <span>发车前</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.startTime"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;分钟 ,</span>
            <span>发车后</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.endTime"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;分钟可扫码核销 </span>
          </div>
          <div style="margin-top: 15px">
            <span>扫码间隔</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.scanInterval"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;分钟 ,</span>
            <span>在此时间内多次扫码均提示已预约</span>
          </div>
        </div>
        <!-- <div class="condition">
          <h3>候补截止预约时间设置</h3>
          <div>
            <span>候补截止时间</span>
            <el-time-picker
              v-model="ruleForm.hh_end"
              placeholder="请选择时间"
              format="HH:mm"
              value-format="HH:mm"
              @change="timeUpdata"
            />
          </div>
        </div> -->
        <div class="condition">
          <h3>黑名单设置</h3>
          <div>
            <span>爽约</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.black_count"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;次，锁定账号</span>
          </div>
        </div>
        <div class="condition">
          <h3>通知时间</h3>
          <div>
            <span>发车前提前</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.notice_time"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;分钟，发送通知</span>
          </div>
        </div>
        <div class="condition">
          <h3>报备人员开始预约时间设置</h3>
          <div>
            <span>发车前</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.bb_before"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;分钟，可以预约车辆</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
// 表格数据
const ruleForm = reactive({
  yy_duration: "",
  hh_end: "", //截止预约时间设置
  yy_end: "", //候补截止预约时间设置
  black_count: "", //黑名单设置次数
  notice_time: "", //发车前提前
  startTime: "", // 扫码前时间
  endTime: "", // 扫码后时间
  scanInterval: "", // 扫码间隔
  bb_before: "", // 报备人预约车辆时间设置
  id: "",
});
// 开始时间段配置
const timeList = reactive({
  list: [
    {
      day1: [],
      day2: [],
      day3: [],
      day4: [],
      day5: [],
      day6: [],
      day7: [],
      timePicker: [],
      id: "",
    },
  ],
});

const timeShow = ref(true);

// 获取系统设置数据
const getlist = async (message) => {
  let res = await axios({
    method: "post",
    url: api.value + "/carBook/cnqueryHb.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
  });
  console.log(res);
  if (res.data.code == 200) {
    ruleForm.yy_duration = res.data.data.yy_duration;
    ruleForm.scanInterval = res.data.data.scanInterval;
    ruleForm.yy_end = res.data.data.yy_end; //
    ruleForm.hh_end = res.data.data.hh_end; //
    ruleForm.black_count = res.data.data.black_count;
    ruleForm.notice_time = res.data.data.notice_time;
    ruleForm.startTime = res.data.data.sm_start;
    ruleForm.endTime = res.data.data.sm_end;
    ruleForm.bb_before = res.data.data.bb_before;
    ruleForm.id = res.data.data.id;
    sessionStorage.setItem("sm_start", res.data.data.sm_start);
    sessionStorage.setItem("sm_end", res.data.data.sm_end);
    if (message) {
      ElMessage({
        type: "success",
        showClose: true,
        message: message,
        center: true,
      });
    }
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.message == "token错误") {
      router.push({
        path: `/login`,
      });
    }
  }
};
const getTimeList = async () => {
  let res = await axios({
    method: "post",
    url: api.value + "/carBook/weekConfigqueryList.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
  });
  console.log(res, "开始时间段配置");
  if (res.data.code == 200) {
    let resData = res.data.data;
    let arr = [];
    resData.forEach((i) => {
      arr.push({
        day1: i.day1 ? [i.day1] : [],
        day2: i.day2 ? [i.day2] : [],
        day3: i.day3 ? [i.day3] : [],
        day4: i.day4 ? [i.day4] : [],
        day5: i.day5 ? [i.day5] : [],
        day6: i.day6 ? [i.day6] : [],
        day7: i.day7 ? [i.day7] : [],
        timePicker: [i.startTime, i.endTime],
        id: i.id,
      });
    });
    timeList.list = arr;
    console.log(arr, "开始时间段配置");
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.message == "token错误") {
      router.push({
        path: `/login`,
      });
    }
  }
};

// 页面数据一修改就调用函数
const timeVerify=(val)=>{
  const regex = /^[0-9]+$/;
  if(regex.test(val)){
    timeUpdata()
  }else{
    getlist()
    ElMessage({
      type: "warning",
      showClose: true,
      message: "请输入正确数值",
      center: true,
    });
  }
}
const timeUpdata = async () => {
  if (ruleForm.black_count <= 0) {
    ruleForm.black_count = 1;
  }
  let data = {
    yy_duration: ruleForm.yy_duration,
    scanInterval: ruleForm.scanInterval,
    yy_end: ruleForm.yy_end,
    hh_end: ruleForm.hh_end,
    black_count: ruleForm.black_count,
    notice_time: ruleForm.notice_time,
    sm_start: ruleForm.startTime,
    sm_end: ruleForm.endTime,
    bb_before: ruleForm.bb_before,
    id: ruleForm.id,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/carBook/cnupdate.action",
    headers: {
      "Content-Type": "application/json;charset=utf-8",
      token: sessionStorage.getItem("token"),
    },
    data: data,
  });
  console.log(res, "修改候补");
  if (res.data.code == 200) {
    // getlist();
    store.dispatch("sm_time");
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    getlist();
    ElMessage({
      type: "error",
      showClose: true,
      message: "修改失败",
      center: true,
    });
  }
};

const addTime = lodash.debounce(async (ind) => {
  console.log("添加", ind);
  // timeList.list.splice(ind + 1, 0, {
  //   day1: [],
  //   day2: [],
  //   day3: [],
  //   day4: [],
  //   day5: [],
  //   day6: [],
  //   day7: [],
  //   timePicker: [],
  //   id: "",
  // });
  let arr = {
    day1: 0,
    day2: 0,
    day3: 0,
    day4: 0,
    day5: 0,
    day6: 0,
    day7: 0,
    timePicker: null,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/carBook/weekConfiginsert.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
    data: arr,
  });
  if (res.data.code == 200) {
    getTimeList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 500);
const delTime = async (ind, id) => {
  // timeList.list.splice(ind, 1);
  let data = new FormData();
  data.append("id", id);
  let res = await axios({
    method: "post",
    url: api.value + "/carBook/weekConfigdel.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
    data: data,
  });
  if (res.data.code == 200) {
    getTimeList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const saveTime = async (event, id, txt) => {
  // console.log(event,'id:'+id,txt);
  console.log(timeList.list);
  let arr = timeList.list.map((i) => {
    console.log(i);
    return {
      day1: i.day1.length ? 1 : 0,
      day2: i.day2.length ? 1 : 0,
      day3: i.day3.length ? 1 : 0,
      day4: i.day4.length ? 1 : 0,
      day5: i.day5.length ? 1 : 0,
      day6: i.day6.length ? 1 : 0,
      day7: i.day7.length ? 1 : 0,
      startTime: i.timePicker[0],
      endTime: i.timePicker[1],
      id: i.id,
    };
  });
  // console.log(arr);
  let augment = arr.filter((i) => {
    return i.id == id;
  });
  // console.log(augment);
  let res = await axios({
    method: "post",
    url: api.value + "/carBook/weekConfigupdate.action",
    headers: {
      "Content-Type": "application/json;charset=utf-8",
      token: sessionStorage.getItem("token"),
    },
    data: augment[0],
  });
  if (res.data.code == 200) {
    getTimeList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    getTimeList();
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

const editSystem = () => {
  timeShow.value = false;
};
const saveSystem = () => {
  timeShow.value = true;
};
const cancelSystem = () => {
  timeShow.value = true;
};

onBeforeMount(() => {
  api.value = store.state.user.api;
  getlist();
  getTimeList();
});
onUnmounted(() => {});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    .camera {
      margin-right: 15px;
      color: #4392f7;
    }
  }
  .middle {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    overflow: auto;
    margin: 0 auto;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      .condition {
        display: flex;
        flex-direction: column;
        margin: 10px 30px 10px 0;
        h3 {
          margin: 12px 12px 12px 0;
        }
        span {
          margin: 0 10px 0 0;
          font-size: 18px;
          color: #000;
        }
        .addTime {
          display: flex;
          align-items: center;
          .el-checkbox-group {
            .el-checkbox {
              margin: 0 15px 0 0;
            }
          }
          :deep(.timePicker) {
            width: 200px;
          }
        }
      }
    }
    .gongneng {
      margin: 10px 0;
    }
    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }
    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }
    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }
    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
  }
}
.el-input {
  width: 192px;
}
</style>