127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<script setup>
|
|
import Table from "@/components/customUI/Table.vue";
|
|
import FloorsModal from "./FloorsModal.vue";
|
|
import { deleteAssetFloor } from "@/apis/asset";
|
|
import { onMounted, ref, inject, computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import useBuildingStore from "@/stores/useBuildingStore";
|
|
|
|
const storeBuild = useBuildingStore();
|
|
const FILE_BASEURL = window.env?.VITE_FILE_API_BASEURL;
|
|
const { t } = useI18n();
|
|
const { openToast, cancelToastOpen } = inject("app_toast");
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
title: t("accountManagement.index"),
|
|
key: "index",
|
|
},
|
|
{
|
|
title: t("energy.floor"),
|
|
key: "full_name",
|
|
filter: true,
|
|
},
|
|
{
|
|
title: t("assetManagement.floor_plan"),
|
|
key: "floor_plan",
|
|
},
|
|
{
|
|
title: t("accountManagement.operation"),
|
|
key: "operation",
|
|
},
|
|
]);
|
|
|
|
const loading = ref(false);
|
|
|
|
onMounted(() => {
|
|
storeBuild.fetchFloorList(storeBuild.selectedBuilding?.building_guid);
|
|
});
|
|
|
|
const formState = ref({
|
|
full_name: "",
|
|
floorFile: [],
|
|
});
|
|
|
|
const openModal = (record) => {
|
|
if (record.floor_guid) {
|
|
console.log('record',record);
|
|
formState.value.floor_guid = record.floor_guid;
|
|
formState.value.full_name = record.full_name;
|
|
if(record.floor_map_url){
|
|
const floorFile = record
|
|
? {
|
|
// size: record.oriSize,
|
|
name: record.floor_map_name,
|
|
src: `${record.floor_map_url}.svg`,
|
|
ext: 'svg',
|
|
}
|
|
: {};
|
|
formState.value.floorFile = [floorFile];
|
|
}
|
|
} else {
|
|
formState.value = {
|
|
full_name: "",
|
|
floorFile: [],
|
|
};
|
|
}
|
|
floor_modal.showModal();
|
|
};
|
|
|
|
const remove = async (id) => {
|
|
openToast("warning", t("msg.sure_to_delete"), "body", async () => {
|
|
await cancelToastOpen();
|
|
const res = await deleteAssetFloor({
|
|
floor_guid: id,
|
|
});
|
|
if (res.isSuccess) {
|
|
storeBuild.fetchFloorList(storeBuild.selectedBuilding?.building_guid);
|
|
openToast("success", t("msg.delete_success"));
|
|
} else {
|
|
openToast("error", res.msg);
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-start items-center mt-10 mb-5">
|
|
<h3 class="text-xl mr-5">{{ $t("energy.floor") }}</h3>
|
|
<FloorsModal :formState="formState" :openModal="openModal" />
|
|
</div>
|
|
<Table
|
|
:columns="columns"
|
|
:dataSource="storeBuild.floorList"
|
|
:loading="loading"
|
|
>
|
|
<template #bodyCell="{ record, column, index }">
|
|
<template v-if="column.key === 'index'">{{ index + 1 }}</template>
|
|
<template v-else-if="column.key === 'operation'">
|
|
<button
|
|
class="btn btn-sm btn-success text-white mr-2"
|
|
@click.stop.prevent="() => openModal(record)"
|
|
>
|
|
{{ $t("button.edit") }}
|
|
</button>
|
|
<button
|
|
class="btn btn-sm btn-error text-white"
|
|
@click.stop.prevent="() => remove(record.floor_guid)"
|
|
>
|
|
{{ $t("button.delete") }}
|
|
</button>
|
|
</template>
|
|
<template v-else-if="column.key === 'floor_plan'">
|
|
<img
|
|
v-if="record.floor_map_url"
|
|
:src="`${FILE_BASEURL}/${record.floor_map_url}.svg`"
|
|
class="w-[200px] bg-white mx-auto"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
{{ record[column.key] }}
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
</template>
|
|
|
|
<style lang="css" scoped></style>
|