ihotel-manage/src/views/system/index.vue

<template>
  <div class="stat">
    <el-card class="box-card" style="width: 1612px; height: 950px">
      <!-- 标题区域 -->
      <div slot="header" class="clearfix">
        <div class="stat-title">系统设置</div>
      </div>

      <!-- 主体内容区域 -->
      <div class="stat-body">
        <!-- 预付款区域 -->
        <div>
          预付款每晚不得少于
          <el-input
            class="input-new-tag"
            v-if="imprestShow"
            v-model="inputValue_imprest"
            v-fo
            size="small"
            @blur="handleInputConfirm('imprestShow', 'inputValue_imprest')"
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput('imprestShow', 'inputValue_imprest')"
          >{{ inputValue_imprest }}</el-button>元
        </div>

        <!-- 预定天数区域 -->
        <div>
          设置预定/续住天数提前
          <el-input
            class="input-new-tag"
            v-if="reserveShow"
            v-model="inputValue_reserve"
            size="small"
            @blur="handleInputConfirm('reserveShow', 'inputValue_reserve')"
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput('reserveShow', 'inputValue_reserve')"
          >{{ inputValue_reserve }}</el-button>天
        </div>

        <!-- 补助区域 -->
        <div>
          每人补助水量为
          <el-input
            class="input-new-tag"
            v-if="subsidyWaterShow"
            v-model="inputValue_subsidyWater"
            v-fo
            size="small"
            @blur="
              handleInputConfirm('subsidyWaterShow', 'inputValue_subsidyWater')
            "
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput('subsidyWaterShow', 'inputValue_subsidyWater')"
          >{{ inputValue_subsidyWater }}</el-button>吨，每人补助电量为
          <el-input
            class="input-new-tag"
            v-if="subsidyElectricityShow"
            v-model="inputValue_subsidyElectricity"
            v-fo
            size="small"
            @blur="
              handleInputConfirm(
                'subsidyElectricityShow',
                'inputValue_subsidyElectricity'
              )
            "
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="
              showInput(
                'subsidyElectricityShow',
                'inputValue_subsidyElectricity'
              )
            "
          >{{ inputValue_subsidyElectricity }}</el-button>度
        </div>

        <!-- 通知人区域 -->
        <!-- <div>
          设置清扫/查房通知人<el-input
            class="input-new-tag"
            v-if="informShow"
            v-model="inputValue_inform"
            v-fo
            size="small"
            @blur="handleInputConfirm('informShow', 'inputValue_inform')"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput('informShow', 'inputValue_inform')"
          >
            {{ inputValue_inform }}
          </el-button>
        </div>-->

        <!-- 退房区域 -->
        <div>
          设置退房后
          <el-input
            class="input-new-tag"
            v-if="refundShow"
            v-model="inputValue_refund"
            v-fo
            size="small"
            @blur="handleInputConfirm('refundShow', 'inputValue_refund')"
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput('refundShow', 'inputValue_refund')"
          >{{ inputValue_refund }}</el-button>分钟，断水断电
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "system",
  data() {
    return {
      // 预付款输入框按钮框切换控制
      imprestShow: false,
      // 预付款绑定数据
      inputValue_imprest: 20,

      // 预定天数输入框按钮框切换控制
      reserveShow: false,
      // 预定天数绑定数据
      inputValue_reserve: 10,

      // 补助区域水量输入框按钮框切换控制
      subsidyWaterShow: false,
      // 补助区域水量绑定数据
      inputValue_subsidyWater: 5,

      // 补助区域电量输入框按钮框切换控制
      subsidyElectricityShow: false,
      // 补助区域电量绑定数据
      inputValue_subsidyElectricity: 9,

      // 通知人输入框按钮框切换控制
      // informShow: false,
      // // 通知人绑定数据
      // inputValue_inform: 7,
      priceOfWater: 5, // 水费单价
      priceOfElectric: 5, // 电费单价
      // 退房输入框按钮框切换控制
      refundShow: false,
      // 退房绑定数据
      inputValue_refund: 8,
      id: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取系统设置页面数据
    async getData() {
      let res = await this.API.systemSetup.systemSettingInfo();
      // console.log(res);
      if (res.success) {
        this.inputValue_imprest = res.data.deposit;
        this.inputValue_reserve = res.data.preDay;
        this.inputValue_subsidyWater = res.data.freeQuotaOfWater;
        this.inputValue_subsidyElectricity = res.data.freeQuotaOfElectric;
        // this.inputValue_inform = res.data.deposit;
        // console.log(res.data.priceOfWater);
        this.priceOfWater = res.data.priceOfWater;
        this.priceOfElectric = res.data.priceOfElectric;
        this.inputValue_refund = res.data.turnOffTime;
        this.id = res.data.id;
      } else {
        this.$message.error(res.message);
      }
    },
    // 点击按钮 切换输入框 并聚焦
    showInput(show, value) {
      this[show] = true;
      this[value] = null;
    },
    // 失去焦点 切换回按钮 并更新数据
    async handleInputConfirm(show) {
      this[show] = false;
      let data = {
        id: this.id,
        deposit: this.inputValue_imprest,
        preDay: this.inputValue_reserve,
        priceOfWater: this.priceOfWater,
        priceOfElectric: this.priceOfElectric,
        freeQuotaOfWater: this.inputValue_subsidyWater,
        freeQuotaOfElectric: this.inputValue_subsidyElectricity,
        freeTotal:
          this.priceOfWater * this.inputValue_subsidyWater +
          this.priceOfElectric * this.inputValue_subsidyElectricity,
        turnOffTime: this.inputValue_refund
      };
      let res = await this.API.systemSetup.systemnoticeUpdate(data);
      // console.log(res);
      if (res.success) {
        this.$message.success("修改成功");
        this.getData();
      } else {
        this.$message.error(res.message);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.stat /deep/ .el-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
  .clearfix {
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .stat-title {
      width: 96px;
      height: 36px;
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      margin-left: 33px;
    }
  }
  .stat-body {
    padding: 30px 0 0 30px;
    div {
      height: 40px;
      margin-bottom: 28px;
      .input-new-tag {
        margin: 0 10px;
        width: 90px;
      }
      .button-new-tag {
        margin: 0 10px;
        width: 90px;
        height: 32px;
        vertical-align: middle;
      }
    }
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
  }
}
</style>