CviLux_fe/src/views/setting/components/ElecPriceStd.vue

<script setup>
import { computed, inject, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
import { postTimeElec } from "@/apis/energy";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const { t } = useI18n();
const { stand2, stand3, getData } = inject("time_elec");
const stand2isEditing = ref(false);
const stand3isEditing = ref(false);
const stand2NewValue = ref([]);
const stand3NewValue = ref([]);
const onOk = async (sheet, data) => {
  const res = await postTimeElec({
    sheet: sheet,
    cost: data,
    building_guid: store.selectedBuilding.building_guid,
  });
  if (res.isSuccess) {
    getData();
    onCancel(sheet);
  } else {
    openToast("error", res.msg, "#immediate_demand_add_item");
  }
};

const onCancel = (sheet) => {
  if (sheet === "stand2") {
    stand2isEditing.value = false;
    stand2NewValue.value = [...stand2.value];
  } else if (sheet === "stand3") {
    stand3isEditing.value = false;
    stand3NewValue.value = [...stand3.value];
  }
};

watch(
  stand2,
  (newValue, oldValue) => {
    stand2NewValue.value = [...newValue];
  },
  { immediate: true }
);

watch(
  stand3,
  (newValue, oldValue) => {
    stand3NewValue.value = [...newValue];
  },
  { immediate: true }
);
</script>

<template>
  <div class="flex justify-start items-center my-5">
    <h3 class="text-xl mr-5">標準型時間電價二段式</h3>
    <button
      v-if="!stand2isEditing"
      class="btn btn-sm btn-add mr-3"
      @click.stop.prevent="stand2isEditing = true"
    >
      <font-awesome-icon :icon="['fas', 'pencil-alt']" />{{
        $t("button.start_edit")
      }}
    </button>
    <template v-else>
      <button
        class="btn btn-sm btn-add mr-3"
        @click.prevent="onOk('stand2', stand2NewValue)"
      >
        <font-awesome-icon :icon="['fas', 'save']" />{{ $t("button.confirm") }}
      </button>
      <button
        class="btn btn-sm btn-outline-info mr-3"
        @click.stop.prevent="onCancel('stand2')"
      >
        <font-awesome-icon :icon="['fas', 'times']" />{{ $t("button.cancel") }}
      </button>
    </template>
  </div>
  <table class="">
    <thead>
      <tr>
        <th colspan="6" class="bg-teal-800 bg-opacity-20">分類</th>
        <th class="bg-teal-800 bg-opacity-20">夏月<br />(6/1~9/30)</th>
        <th class="bg-teal-800 bg-opacity-20">非夏月<br />(夏月以外的時間)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="6" class="bg-teal-800 bg-opacity-40">基本電費</td>
        <td colspan="2" rowspan="2" class="bg-teal-800 bg-opacity-40">
          按戶計收
        </td>
        <td colspan="2" class="bg-teal-800 bg-opacity-40">單相</td>
        <td rowspan="2" class="bg-teal-800 bg-opacity-40">每戶每月</td>
        <td colspan="2" class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[0]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="2" class="bg-teal-800 bg-opacity-40">三相</td>
        <td colspan="2" class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[1]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="4" class="bg-teal-800 bg-opacity-40">經常契約</td>
        <td rowspan="4" class="bg-teal-800 bg-opacity-40">每瓩每月</td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[2]"
            :readonly="!stand2isEditing"
          />
        </td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[3]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="4" class="bg-teal-800 bg-opacity-40">非夏日契約</td>
        <td class="bg-teal-800 bg-opacity-40">-</td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[4]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="4" class="bg-teal-800 bg-opacity-40">週六半尖峰契約</td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[5]"
            :readonly="!stand2isEditing"
          />
        </td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[6]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="4" class="bg-teal-800 bg-opacity-40">離峰契約</td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[7]"
            :readonly="!stand2isEditing"
          />
        </td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand2NewValue[8]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td rowspan="9">流動電費</td>
        <td rowspan="4">週一~週五</td>
        <td rowspan="2" class="bg-rose-600 bg-opacity-70">尖峰時間</td>
        <td class="bg-rose-600 bg-opacity-20">夏月</td>
        <td class="bg-rose-600 bg-opacity-20">09:00 ~ 24:00</td>
        <td rowspan="9">每度</td>
        <td class="bg-rose-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[9]"
            :readonly="!stand2isEditing"
          />
        </td>
        <td class="bg-rose-600 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td class="bg-rose-600 bg-opacity-20">非夏月</td>
        <td class="bg-rose-600 bg-opacity-20">06:00 ~ 11:00<br />14:00~24:00</td>
        <td class="bg-rose-600 bg-opacity-20">-</td>
        <td class="bg-rose-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[10]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td rowspan="2" class="bg-green-600 bg-opacity-60">離峰時間</td>
        <td class="bg-green-600 bg-opacity-20">夏月</td>
        <td class="bg-green-600 bg-opacity-20">00:00 ~ 09:00</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[11]"
            :readonly="!stand2isEditing"
          />
        </td>
        <td class="bg-green-600 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td class="bg-green-600 bg-opacity-20">非夏月</td>
        <td class="bg-green-600 bg-opacity-20">
          00:00 ~ 06:00<br />
          11:00 ~ 14:00
        </td>
        <td class="bg-green-600 bg-opacity-20">-</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[12]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td rowspan="4">週六</td>
        <td rowspan="2" class="bg-yellow-400 bg-opacity-80">半尖峰時間</td>
        <td class="bg-yellow-400 bg-opacity-20">夏日</td>
        <td class="bg-yellow-400 bg-opacity-20">09:00 ~ 24:00</td>
        <td class="bg-yellow-400 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[13]"
            :readonly="!stand2isEditing"
          />
        </td>
        <td class="bg-yellow-400 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td class="bg-yellow-400 bg-opacity-20">非夏日</td>
        <td class="bg-yellow-400 bg-opacity-20">
          06:00 ~ 11:00<br />
          14:00 ~ 24:00
        </td>
        <td class="bg-yellow-400 bg-opacity-20">-</td>
        <td class="bg-yellow-400 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[14]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td rowspan="2" class="bg-green-600 bg-opacity-60">離峰時間</td>
        <td class="bg-green-600 bg-opacity-20">夏月</td>
        <td class="bg-green-600 bg-opacity-20">00:00 ~ 09:00</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[15]"
            :readonly="!stand2isEditing"
          />
        </td>
        <td class="bg-green-600 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td class="bg-green-600 bg-opacity-20">非夏月</td>
        <td class="bg-green-600 bg-opacity-20">00:00 ~ 06:00<br />11:00 ~ 14:00</td>
        <td class="bg-green-600 bg-opacity-20">-</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[16]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
      <tr>
        <td>週六、週日<br />及離峰日</td>
        <td class="bg-green-600 bg-opacity-60">離峰時間</td>
        <td colspan="2" class="bg-green-600 bg-opacity-20">全日</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[17]"
            :readonly="!stand2isEditing"
          />
        </td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand2NewValue[18]"
            :readonly="!stand2isEditing"
          />
        </td>
      </tr>
    </tbody>
  </table>

  <div class="flex justify-start items-center mt-14">
    <h3 class="text-xl mr-5">標準型時間電價三段式</h3>
    <button
      v-if="!stand3isEditing"
      class="btn btn-sm btn-add mr-3"
      @click.stop.prevent="stand3isEditing = true"
    >
      <font-awesome-icon :icon="['fas', 'pencil-alt']" />{{
        $t("button.start_edit")
      }}
    </button>
    <template v-else>
      <button
        class="btn btn-sm btn-add mr-3"
        @click.prevent="onOk('stand3', stand3NewValue)"
      >
        <font-awesome-icon :icon="['fas', 'save']" />{{ $t("button.confirm") }}
      </button>
      <button
        class="btn btn-sm btn-outline-info mr-3"
        @click.stop.prevent="onCancel('stand3')"
      >
        <font-awesome-icon :icon="['fas', 'times']" />{{ $t("button.cancel") }}
      </button>
    </template>
  </div>
  <table class="my-5">
    <thead>
      <tr>
        <th colspan="6" class="bg-teal-800 bg-opacity-20">分類</th>
        <th class="bg-teal-800 bg-opacity-20">夏月<br />(6/1~9/30)</th>
        <th class="bg-teal-800 bg-opacity-20">非夏月<br />(夏月以外的時間)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="6" class="bg-teal-800 bg-opacity-40">基本電費</td>
        <td colspan="2" rowspan="2" class="bg-teal-800 bg-opacity-40">按戶計收</td>
        <td colspan="2" class="bg-teal-800 bg-opacity-40">單相</td>
        <td rowspan="2" class="bg-teal-800 bg-opacity-40">每戶每月</td>
        <td colspan="2" class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[0]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="2" class="bg-teal-800 bg-opacity-40">三相</td>
        <td colspan="2" class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[1]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="4" class="bg-teal-800 bg-opacity-40">經常契約</td>
        <td rowspan="4" class="bg-teal-800 bg-opacity-40">每瓩每月</td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[2]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[3]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="4" class="bg-teal-800 bg-opacity-40">非夏日契約</td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[4]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[5]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="4" class="bg-teal-800 bg-opacity-40">週六半尖峰契約</td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[6]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[7]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td colspan="4" class="bg-teal-800 bg-opacity-40">離峰契約</td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[8]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-teal-800 bg-opacity-40">
          <input
            type="number"
            v-model.number="stand3NewValue[9]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td rowspan="10">流動電費</td>
        <td rowspan="5">週一~週五</td>
        <td class="bg-rose-600 bg-opacity-70">尖峰時間</td>
        <td class="bg-rose-600 bg-opacity-20">夏月</td>
        <td class="bg-rose-600 bg-opacity-20">16:00 ~ 22:00</td>
        <td rowspan="10">每度</td>
        <td class="bg-rose-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[10]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-rose-600 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td rowspan="2" class="bg-yellow-400 bg-opacity-80">半尖峰時間</td>
        <td class="bg-yellow-500 bg-opacity-20">夏月</td>
        <td class="bg-yellow-500 bg-opacity-20">09:00 ~ 16:00<br />22:00 ~ 24:00</td>
        <td class="bg-yellow-500 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[11]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-yellow-500 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td class="bg-yellow-500 bg-opacity-20">非夏月</td>
        <td class="bg-yellow-500 bg-opacity-20">06:00 ~ 11:00<br />14:00 ~ 24:00</td>
        <td class="bg-yellow-500 bg-opacity-20">-</td>
        <td class="bg-yellow-500 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[12]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td rowspan="2" class="bg-green-600 bg-opacity-60">離峰時間</td>
        <td class="bg-green-600 bg-opacity-20">夏月</td>
        <td class="bg-green-600 bg-opacity-20">00:00 ~ 09:00</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[13]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-green-600 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td class="bg-green-600 bg-opacity-20">非夏月</td>
        <td class="bg-green-600 bg-opacity-20">
          00:00 ~ 06:00<br />
          11:00 ~ 14:00
        </td>
        <td class="bg-green-600 bg-opacity-20">-</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[14]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td rowspan="4">週六</td>
        <td rowspan="2" class="bg-yellow-400 bg-opacity-80">半尖峰時間</td>
        <td class="bg-yellow-500 bg-opacity-20">夏日</td>
        <td class="bg-yellow-500 bg-opacity-20">09:00 ~ 24:00</td>
        <td class="bg-yellow-500 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[15]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-yellow-500 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td class="bg-yellow-500 bg-opacity-20">非夏日</td>
        <td class="bg-yellow-500 bg-opacity-20">
          06:00 ~ 11:00<br />
          14:00 ~ 24:00
        </td>
        <td class="bg-yellow-500 bg-opacity-20">-</td>
        <td class="bg-yellow-500 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[16]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td rowspan="2" class="bg-green-600 bg-opacity-60">離峰時間</td>
        <td class="bg-green-600 bg-opacity-20">夏月</td>
        <td class="bg-green-600 bg-opacity-20">00:00 ~ 09:00</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[17]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-green-600 bg-opacity-20">-</td>
      </tr>
      <tr>
        <td class="bg-green-600 bg-opacity-20">非夏月</td>
        <td class="bg-green-600 bg-opacity-20">00:00 ~ 06:00<br />11:00 ~ 14:00</td>
        <td class="bg-green-600 bg-opacity-20">-</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[18]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
      <tr>
        <td>週日及離峰日</td>
        <td class="bg-green-600 bg-opacity-60">離峰時間</td>
        <td colspan="2" class="bg-green-600 bg-opacity-20">全日</td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[19]"
            :readonly="!stand3isEditing"
          />
        </td>
        <td class="bg-green-600 bg-opacity-20">
          <input
            type="number"
            v-model.number="stand3NewValue[20]"
            :readonly="!stand3isEditing"
          />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss" scoped>
th,
td {
  text-align: center;
  border: 1px solid #ddd;
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}
input {
  @apply text-lg text-white w-full bg-transparent input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:text-white read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0;
}
</style>