107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
Vue
<template>
|
|
<div class="has-text-centered">
|
|
<p class="">
|
|
Bạn có chắc chắn muốn chuyển sản phẩm này sang trạng thái<br />
|
|
<strong :class="newStatus === 2 ? 'has-text-success' : 'has-text-danger'">
|
|
{{ newStatus === 2 ? "ĐANG BÁN" : "KHÓA" }}
|
|
</strong>
|
|
không?
|
|
</p>
|
|
|
|
<hr class="my-3" />
|
|
|
|
<div class="field is-grouped is-grouped-centered">
|
|
<div class="control">
|
|
<button
|
|
class="button"
|
|
:class="newStatus === 2 ? 'is-success' : 'is-danger'"
|
|
:disabled="isSaving"
|
|
@click="confirmChange"
|
|
>
|
|
<span v-if="isSaving">Đang xử lý...</span>
|
|
<span v-else>Đồng ý</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<button
|
|
class="button is-dark"
|
|
:disabled="isSaving"
|
|
@click="close"
|
|
>
|
|
Hủy bỏ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import { useNuxtApp } from "#app";
|
|
|
|
const emit = defineEmits(["close", "modalevent"]);
|
|
|
|
const props = defineProps({
|
|
product: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const { $patchapi, $snackbar } = useNuxtApp();
|
|
|
|
const isSaving = ref(false);
|
|
|
|
const currentStatus = computed(() => Number(props.product?.status) || null);
|
|
const newStatus = computed(() => (currentStatus.value === 15 ? 2 : 15));
|
|
|
|
async function confirmChange() {
|
|
if (!props.product?.id || newStatus.value === currentStatus.value) {
|
|
close();
|
|
return;
|
|
}
|
|
|
|
isSaving.value = true;
|
|
|
|
try {
|
|
const result = await $patchapi(
|
|
"product",
|
|
{
|
|
id: props.product.id,
|
|
status: newStatus.value,
|
|
},
|
|
{},
|
|
false,
|
|
);
|
|
|
|
if (result === "error" || !result) {
|
|
$snackbar("Cập nhật thất bại", "Lỗi", "Error");
|
|
return;
|
|
}
|
|
|
|
$snackbar("Cập nhật trạng thái thành công", "Thành công", "Success");
|
|
|
|
// Phát sự kiện để component cha (hoặc bảng) cập nhật lại dữ liệu
|
|
emit("modalevent", {
|
|
name: "update",
|
|
data: {
|
|
id: props.product.id,
|
|
status: newStatus.value,
|
|
},
|
|
});
|
|
|
|
close();
|
|
} catch (error) {
|
|
console.error("Lỗi đổi trạng thái:", error);
|
|
$snackbar("Có lỗi xảy ra", "Lỗi", "Error");
|
|
} finally {
|
|
isSaving.value = false;
|
|
}
|
|
}
|
|
|
|
function close() {
|
|
emit("close");
|
|
}
|
|
</script>
|