134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<script setup>
|
|
import { inject, defineProps, watch, ref } from "vue";
|
|
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
|
|
import { postEditDemand } from "@/apis/energy";
|
|
import * as yup from "yup";
|
|
import { useI18n } from "vue-i18n";
|
|
import useBuildingStore from "@/stores/useBuildingStore";
|
|
const store = useBuildingStore();
|
|
const { t } = useI18n();
|
|
const { openToast } = inject("app_toast");
|
|
const props = defineProps({
|
|
demandData: Object,
|
|
getData: Function,
|
|
});
|
|
|
|
let scheme = yup.object({
|
|
contract: yup.number().required(t("button.required")),
|
|
alert: yup.number().required(t("button.required")),
|
|
reset: yup.number().required(t("button.required")),
|
|
});
|
|
|
|
const form = ref(null);
|
|
const formState = ref({
|
|
contract: null,
|
|
alert: null,
|
|
reset: null,
|
|
});
|
|
|
|
const { formErrorMsg, handleSubmit, handleErrorReset } = useFormErrorMessage(
|
|
scheme.value
|
|
);
|
|
|
|
watch(
|
|
() => props.demandData,
|
|
(newValue) => {
|
|
if (newValue) {
|
|
formState.value = {
|
|
...newValue,
|
|
};
|
|
}
|
|
}
|
|
);
|
|
|
|
const onOk = async () => {
|
|
const values = await handleSubmit(scheme, formState.value);
|
|
|
|
const res = await postEditDemand({
|
|
...values,
|
|
"building_guid":store.selectedBuilding.building_guid,
|
|
});
|
|
if (res.isSuccess) {
|
|
props.getData();
|
|
closeModal();
|
|
} else {
|
|
openToast("error", res.msg, "#immediate_demand_add_item");
|
|
}
|
|
};
|
|
|
|
const closeModal = () => {
|
|
handleErrorReset();
|
|
onCancel();
|
|
};
|
|
|
|
const openModal = () => {
|
|
immediate_demand_add_item.showModal();
|
|
};
|
|
|
|
const onCancel = () => {
|
|
immediate_demand_add_item.close();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="btn btn-xs btn-success absolute top-0 right-0"
|
|
@click.stop.prevent="openModal"
|
|
>
|
|
{{ $t("button.edit") }}
|
|
</button>
|
|
<Modal
|
|
id="immediate_demand_add_item"
|
|
:title="t('energy.edit_automatic_demand')"
|
|
:onCancel="closeModal"
|
|
:width="400"
|
|
>
|
|
<template #modalContent>
|
|
<form ref="form" class="mt-5 flex flex-col items-center">
|
|
<Input :value="formState" class="w-full" name="contract">
|
|
<template #topLeft>{{ $t("energy.contract_capacity") }}</template>
|
|
<template #bottomLeft>
|
|
<span class="text-error text-base">
|
|
{{ formErrorMsg.contract }}
|
|
</span>
|
|
</template>
|
|
</Input>
|
|
<Input class="w-full" :value="formState" name="alert">
|
|
<template #topLeft>{{ $t("energy.alert_capacity") }}</template>
|
|
<template #bottomLeft>
|
|
<span class="text-error text-base">
|
|
{{ formErrorMsg.alert }}
|
|
</span>
|
|
</template>
|
|
</Input>
|
|
<Input class="w-full" :value="formState" name="reset">
|
|
<template #topLeft>{{ $t("energy.reset_value") }}</template>
|
|
<template #bottomLeft>
|
|
<span class="text-error text-base">
|
|
{{ formErrorMsg.reset }}
|
|
</span>
|
|
</template>
|
|
</Input>
|
|
</form>
|
|
</template>
|
|
<template #modalAction>
|
|
<button
|
|
type="reset"
|
|
class="btn btn-outline-success mr-2"
|
|
@click.prevent="closeModal"
|
|
>
|
|
{{ $t("button.cancel") }}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-outline-success"
|
|
@click.prevent="onOk"
|
|
>
|
|
{{ $t("button.submit") }}
|
|
</button>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|