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">
          <h3>开始时间段设置</h3>
          <div>
            <el-time-picker
              v-model="ruleForm.yy_duration"
              is-range
              format="HH:mm"
              value-format="HH:mm"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="timeUpdata"
            />
          </div>
        </div>
        <div class="condition">
          <h3>截止预约时间设置</h3>
          <div>
            <span>正常发车前</span>
            <!-- <el-input
              clearable
              v-model="ruleForm.yy_end"
              class="w-50 m-2"
              style="width: 100px"
            /> -->
            <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-time-picker
              v-model="ruleForm.hh_end"
              placeholder="请选择时间"
              format="HH:mm"
              value-format="HH:mm"
              @change="timeUpdata"
            /> -->
            <el-input
              clearable
              v-model="ruleForm.yy_end"
              class="w-50 m-2"
              style="width: 100px"
              @blur="timeUpdata"
            />
            <span>&nbsp;&nbsp;分钟</span>
          </div>
        </div>
        <div class="condition">
          <h3>黑名单设置</h3>
          <div>
            <span>爽约超过</span>
            <el-input
              clearable
              v-model="ruleForm.black_count"
              class="w-50 m-2"
              style="width: 100px"
              @blur="timeUpdata"
            />
            <span>&nbsp;&nbsp;次，锁定账号</span>
          </div>
        </div>
        <div class="condition">
          <h3>通知时间</h3>
          <div>
            <span>发车前提前</span>
            <el-input
              clearable
              v-model="ruleForm.notice_time"
              class="w-50 m-2"
              style="width: 100px"
              @blur="timeUpdata"
            />
            <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: "", //发车前提前
  id: "",
});
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) {
    console.log(res.data.data.yy_duration.split("~"));

    ruleForm.yy_duration = res.data.data.yy_duration.split("~");
    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.id = res.data.data.id;
    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 timeUpdata = async () => {
  let data = {
    yy_duration: ruleForm.yy_duration.join("~"),
    yy_end: ruleForm.yy_end,
    hh_end: ruleForm.hh_end,
    black_count: ruleForm.black_count,
    notice_time: ruleForm.notice_time,
    id: ruleForm.id,
  };
  // let res = await admin.adminAdd(data);
  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();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    getlist();
    ElMessage({
      type: "error",
      showClose: true,
      message: "修改失败",
      center: true,
    });
  }
};

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

<style scoped lang="scss">
.content-box {
  width: 97.5%;
  height: 89%;
  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;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    .camera {
      margin-right: 15px;
      color: #4392f7;
    }
  }
  .middle {
    width: 96%;
    margin: 0 auto;

    color: #000;
    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      margin: 10px 0 0 0;
      .condition {
        display: flex;
        flex-direction: column;
        margin: 10px 30px 10px 0;
        span {
          margin: 0 10px 0 0;
        }
      }
    }
    .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;
    }
  }
  .footer {
    width: 96%;
    height: 550px;
    margin: 10px auto 30px;
    .el-table--fit {
      height: 100%;
      :deep(.el-table__header-wrapper) {
        background-color: #000;
      }
      :deep(.el-table__row) {
        height: 50px;
      }
      :deep(.el-table__row td) {
        padding: 0;
        border: 0;
      }

      .el-button--primary {
        margin-left: 5px;
      }
      :deep(.el-table__body .even) {
        background-color: #fff;
      }
      :deep(.el-table__body .odd) {
        background-color: #f7fafe;
      }
      :deep(.look) {
        padding: 5px 14px;
        border-radius: 45px;
        border: 0.74px solid rgba(30, 125, 251, 1);
      }
    }
  }
  .el-pagination {
    // width: 1600px;
    width: 96%;
    margin: 0 auto 18px;
    justify-content: flex-end;
    :deep(.el-pagination__total) {
      color: #000;
    }
    :deep(.el-pagination__goto) {
      color: #000;
    }
    :deep(.el-pagination__classifier) {
      color: #000;
    }

    :deep(.el-pager li) {
      margin: 0 3px;
    }
    :deep(.btn-prev) {
      margin-right: 3px;
    }
    :deep(.btn-next) {
      margin-left: 3px;
    }
  }
}
.el-input {
  width: 192px;
}
</style>