143 lines
4 KiB
Vue
143 lines
4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import InsigniaList from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const nameType = ref<string>("");
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import type {
|
|
DetailResponse,
|
|
DetailRow,
|
|
} from "@/modules/01_metadataNew/interface/response/insignia/Insignia";
|
|
|
|
const row = ref<DetailRow[]>();
|
|
const mixin = useCounterMixin();
|
|
const { date2Thai } = mixin;
|
|
const id = ref<string>(route.params.id.toString());
|
|
function fetchName(name: string) {
|
|
nameType.value = name;
|
|
}
|
|
|
|
const data = ref<DetailResponse[]>([
|
|
{
|
|
id: "1",
|
|
level: 1,
|
|
shortName: "จ.ม.",
|
|
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
|
insigniaTypeId: "1",
|
|
note: "-",
|
|
name: "จัตุรถาภรณ์มงกุฎไทย",
|
|
createdAt: new Date(),
|
|
lastUpdatedAt: new Date(),
|
|
lastUpdateFullName: "System Administrator",
|
|
isActive: true,
|
|
},
|
|
{
|
|
id: "2",
|
|
level: 1,
|
|
shortName: "จ.ช.",
|
|
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
|
insigniaTypeId: "1",
|
|
note: "-",
|
|
name: "จัตุรถาภรณ์ช้างเผือก",
|
|
createdAt: new Date(),
|
|
lastUpdatedAt: new Date(),
|
|
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
|
isActive: false,
|
|
},
|
|
{
|
|
id: "1",
|
|
level: 1,
|
|
shortName: "บ.ม.",
|
|
insigniaType: "ชั้นสายสะพาย",
|
|
insigniaTypeId: "2",
|
|
note: "-",
|
|
name: "เบญจมาภรณ์มงกุฎไทย",
|
|
createdAt: new Date(),
|
|
lastUpdatedAt: new Date(),
|
|
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
|
isActive: true,
|
|
},
|
|
{
|
|
id: "2",
|
|
level: 1,
|
|
shortName: "ท.ม.",
|
|
insigniaType: "ชั้นสายสะพาย",
|
|
insigniaTypeId: "2",
|
|
note: "-",
|
|
name: "ทวีติยาภรณ์มงกุฎไทย",
|
|
createdAt: new Date(),
|
|
lastUpdatedAt: new Date(),
|
|
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
|
isActive: true,
|
|
},
|
|
{
|
|
id: "1",
|
|
level: 1,
|
|
shortName: "บ.ช.",
|
|
insigniaType: "เหรียญบำเหน็จในราชการ",
|
|
insigniaTypeId: "3",
|
|
note: "-",
|
|
name: "เบญจมาภรณ์ช้างเผือก",
|
|
createdAt: new Date(),
|
|
lastUpdatedAt: new Date(),
|
|
lastUpdateFullName: "สาวิตรี ศรีสมัย",
|
|
isActive: true,
|
|
},
|
|
{
|
|
id: "2",
|
|
level: 1,
|
|
shortName: "ท.ม.",
|
|
insigniaType: "เหรียญบำเหน็จในราชการ",
|
|
insigniaTypeId: "3",
|
|
note: "-",
|
|
name: "ทวีติยาภรณ์มงกุฎไทย",
|
|
createdAt: new Date(),
|
|
lastUpdatedAt: new Date(),
|
|
lastUpdateFullName: "System Administrator",
|
|
isActive: true,
|
|
},
|
|
]);
|
|
|
|
function fetchData() {
|
|
const datafilter = data.value.find((e) => e.insigniaTypeId === id.value);
|
|
console.log(datafilter);
|
|
datafilter && fetchName(datafilter.insigniaType);
|
|
const list = data.value.map((e) => ({
|
|
...e,
|
|
createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
|
|
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
|
|
}));
|
|
row.value = list.filter((e) => e.insigniaTypeId === id.value);
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchData();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="toptitle text-dark col-12 row items-center">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.go(-1)"
|
|
/>
|
|
รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์ {{ nameType }}
|
|
</div>
|
|
|
|
<q-card flat bordered>
|
|
<InsigniaList
|
|
:data="row"
|
|
@update:fetchName="fetchName"
|
|
:nameType="nameType"
|
|
/>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|