repaireschool_guanli/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>
            <span>工单完成后 </span>
            <el-input clearable v-model="ruleForm.day" class="w-50 m-2" style="width: 80px" @blur="timeUpdata" />
            <span>&nbsp;&nbsp;天,用户未评价系统默认为好评</span>
          </div>
        </div>
        <div class="condition">
          <h3>电话设置</h3>
          <div class="phone">
            <span>墨轩湖紧急电话 : </span>
            <el-input clearable v-model="ruleForm.emergencyMxh" class="w-50 m-2" style="width: 200px"
              @blur="timeUpdata" />
          </div>
          <div class="phone">
            <span>黄家湖紧急电话 : </span>
            <el-input clearable v-model="ruleForm.emergencyCall" class="w-50 m-2" style="width: 200px"
              @blur="timeUpdata" />
          </div>
          <div class="phone">
            <span>服务监督电话 : </span>
            <el-input clearable v-model="ruleForm.servicePhone" class="w-50 m-2" style="width: 200px"
              @blur="timeUpdata" />
          </div>
        </div>
      </div>
    </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({
  day: "", // 自动好评时间
  emergencyCall: "", // 黄家湖紧急电话
  emergencyMxh: "",// 墨轩湖紧急电话
  servicePhone: "", // 服务监督电话
  id: "",
});
// 获取系统设置数据
const getlist = async (message) => {
  let res = await axios({
    method: "get",
    url: api.value + "/repairSystemSetting/queryRepairSystemSetting",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res);
  if (res.data.code == 200) {
    ruleForm.day = res.data.data.day; // 自动好评时间
    ruleForm.emergencyCall = res.data.data.emergencyCall; // 黄家湖紧急电话
    ruleForm.emergencyMxh = res.data.data.emergencyMxh; // 墨轩湖紧急电话
    ruleForm.servicePhone = res.data.data.servicePhone; // 服务监督电话
    ruleForm.id = res.data.data.id; // 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.code == 570) {
      sessionStorage.removeItem("token")
      router.push({
        path: `/login`,
      });
    }
  }
};

// 页面数据一修改就调用函数
const timeUpdata = async () => {
  let data = {
    day: ruleForm.day, // 自动好评时间
    emergencyCall: ruleForm.emergencyCall, // 紧急电话
    emergencyMxh: ruleForm.emergencyMxh, // 紧急电话
    servicePhone: ruleForm.servicePhone, // 服务监督电话
    id: ruleForm.id, // id
  };
  let res = await axios({
    method: "post",
    url: api.value + "/repairSystemSetting/updateRepairSystemSettingById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    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: res.data.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;
  box-shadow: 0px 3px 10px rgba(213, 228, 252, 1);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 30px;
    margin: 0 30px;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
  }

  .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;

      .condition {
        display: flex;
        flex-direction: column;
        margin: 10px 30px 10px 0;

        span {
          width: 100px;
          margin: 0 10px 0 0;
          font-size: 16px;
          color: #000;
        }

        .phone {
          margin: 10px 0;
        }
      }
    }
  }
}
</style>