ทะเบียนประวัติ: ผูก API เครื่องราชฯ (insignia)
This commit is contained in:
puriphatt
parent
01c585d0ca
commit
bc1b5bce92
2 changed files with 399 additions and 232 deletions
|
|
@ -4,14 +4,22 @@ const registryNew = `${env.API_URI}/org/profile/`;
|
|||
|
||||
export default {
|
||||
registryNew,
|
||||
// เครื่องราชฯ
|
||||
profileNewInsign: `${registryNew}insignia`,
|
||||
profileNewInsignByProfileId: (profileId: string) =>
|
||||
`${registryNew}insignia/${profileId}`,
|
||||
profileNewInsignByInsignId: (insignId: string) =>
|
||||
`${registryNew}insignia/${insignId}`,
|
||||
profileNewInsignHisByInsignId: (insignId: string) =>
|
||||
`${registryNew}insignia/history/${insignId}`,
|
||||
profileNewInsignById: (dataId: string) => `${registryNew}insignia/${dataId}`,
|
||||
profileNewInsignHisById: (dataId: string) =>
|
||||
`${registryNew}insignia/history/${dataId}`,
|
||||
|
||||
// ประกาศเกียรติคุณ
|
||||
profileNewHonor: `${registryNew}honor`,
|
||||
profileNewHonorByProfileId: (profileId: string) =>
|
||||
`${registryNew}honor/${profileId}`,
|
||||
profileNewHonorById: (dataId: string) => `${registryNew}honor/${dataId}`,
|
||||
profileNewHonorHisById: (dataId: string) => `${registryNew}honor/${dataId}`,
|
||||
|
||||
// การฝึกอบรม
|
||||
profileNewTraining: `${registryNew}training`,
|
||||
profileNewTrainingByProfileId: (profileId: string) =>
|
||||
`${registryNew}training/${profileId}`,
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch, useAttrs } from "vue";
|
||||
import { onMounted, ref, watch, reactive } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
Columns,
|
||||
DataProps,
|
||||
} from "@/modules/04_registryNew/interface/request/Insignia";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
DataOptionInsignia,
|
||||
InsigniaOps,
|
||||
Pagination,
|
||||
} from "@/modules/04_registryNew/interface/index/Main";
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
Columns,
|
||||
DataProps,
|
||||
} from "@/modules/04_registryNew/interface/request/Insignia";
|
||||
|
||||
const $q = useQuasar();
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
|
|
@ -34,27 +34,51 @@ const {
|
|||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const year = ref<number | null>(0);
|
||||
const receiveDate = ref<Date | string | null>();
|
||||
const insigniaId = ref<string>("");
|
||||
const insigniaType = ref<string>();
|
||||
const no = ref<string>();
|
||||
const issue = ref<string>();
|
||||
const volumeNo = ref<string>();
|
||||
const volume = ref<string>();
|
||||
const section = ref<string>();
|
||||
const page = ref<string>();
|
||||
const dateAnnounce = ref<Date | null | string>(null);
|
||||
const refCommandNo = ref<string>();
|
||||
const refCommandDate = ref<Date | null | string>();
|
||||
const note = ref<string>();
|
||||
const insigniaData = reactive<{
|
||||
id: string;
|
||||
isActive: boolean;
|
||||
year: number | null;
|
||||
receiveDate: Date | string | null;
|
||||
insigniaId: string;
|
||||
insigniaType: string;
|
||||
no: string;
|
||||
issue: string;
|
||||
volumeNo: string;
|
||||
volume: string;
|
||||
section: string;
|
||||
page: string;
|
||||
dateAnnounce: Date | null | string;
|
||||
refCommandNo: string;
|
||||
refCommandDate: Date | null | string;
|
||||
note: string;
|
||||
}>({
|
||||
id: "",
|
||||
isActive: true,
|
||||
year: 0,
|
||||
receiveDate: null,
|
||||
insigniaId: "",
|
||||
insigniaType: "",
|
||||
no: "",
|
||||
issue: "",
|
||||
volumeNo: "",
|
||||
volume: "",
|
||||
section: "",
|
||||
page: "",
|
||||
dateAnnounce: null,
|
||||
refCommandNo: "",
|
||||
refCommandDate: null,
|
||||
note: "",
|
||||
});
|
||||
|
||||
const editRow = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const edit = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const modal = ref<boolean>(false);
|
||||
const modelView = ref<string>("table");
|
||||
const modeView = ref<string>("table");
|
||||
const filterSearch = ref("");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
|
|
@ -68,90 +92,7 @@ const OpsFilter = ref<InsigniaOps>({
|
|||
insigniaOptions: [],
|
||||
});
|
||||
|
||||
// mock data
|
||||
const rows = ref<any>([
|
||||
{
|
||||
id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
|
||||
insignia: "จัตุรถาภรณ์ช้างเผือก",
|
||||
insigniaId: "08db721b-c7f9-40c5-85f7-7c2c6d0eceb9",
|
||||
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
||||
year: 2025,
|
||||
no: "1",
|
||||
issue: "1",
|
||||
volumeNo: "1",
|
||||
volume: null,
|
||||
section: "1",
|
||||
page: "1",
|
||||
receiveDate: new Date("2023-10-10T00:00:00"),
|
||||
dateAnnounce: new Date("2023-10-10T00:00:00"),
|
||||
refCommandNo: "1",
|
||||
refCommandDate: null,
|
||||
createdFullName: "System Administrator",
|
||||
createdAt: new Date("2023-10-10T13:38:18.177967"),
|
||||
note: "1234dd",
|
||||
},
|
||||
{
|
||||
id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
|
||||
insignia: "จัตุรถาภรณ์ช้างเผือก",
|
||||
insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
|
||||
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
||||
year: 2024,
|
||||
no: "",
|
||||
issue: "",
|
||||
volumeNo: "",
|
||||
volume: "",
|
||||
section: "",
|
||||
page: "",
|
||||
receiveDate: new Date("2024-02-07T00:00:00"),
|
||||
dateAnnounce: null,
|
||||
refCommandNo: null,
|
||||
refCommandDate: null,
|
||||
createdFullName: "User Key1",
|
||||
createdAt: new Date("2024-02-07T18:14:50.918701"),
|
||||
note: null,
|
||||
},
|
||||
{
|
||||
id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
|
||||
insignia: "จัตุรถาภรณ์มงกุฎไทย",
|
||||
insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
|
||||
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
||||
year: 2016,
|
||||
no: "",
|
||||
issue: "",
|
||||
volumeNo: "",
|
||||
volume: "",
|
||||
section: "",
|
||||
page: "",
|
||||
receiveDate: new Date("2016-05-02T00:00:00"),
|
||||
dateAnnounce: null,
|
||||
refCommandNo: null,
|
||||
refCommandDate: null,
|
||||
createdFullName: "สาวิตรี ศรีสมัย",
|
||||
createdAt: new Date("2024-02-13T18:06:44.941056"),
|
||||
note: null,
|
||||
},
|
||||
{
|
||||
id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
|
||||
insignia: "ตริตาภรณ์ช้างเผือก",
|
||||
insigniaId: "08db721b-c7fd-4ec7-886a-f883ae333a8d",
|
||||
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
||||
year: 2018,
|
||||
no: "",
|
||||
issue: "",
|
||||
volumeNo: "",
|
||||
volume: "",
|
||||
section: "",
|
||||
page: "",
|
||||
receiveDate: new Date("2024-02-13T00:00:00"),
|
||||
dateAnnounce: null,
|
||||
refCommandNo: "",
|
||||
refCommandDate: null,
|
||||
createdFullName: "สาวิตรี ศรีสมัย",
|
||||
createdAt: new Date("2024-02-13T18:08:49.301201"),
|
||||
note: "a",
|
||||
},
|
||||
]);
|
||||
|
||||
const rows = ref<any>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "year",
|
||||
|
|
@ -161,8 +102,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "receiveDate",
|
||||
|
|
@ -180,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
align: "left",
|
||||
label: "ชื่อเครื่องราชฯ",
|
||||
sortable: true,
|
||||
field: "insignia",
|
||||
field: "insigniaId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -308,7 +247,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "year",
|
||||
|
|
@ -476,7 +414,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"insignia",
|
||||
"insigniaType",
|
||||
|
|
@ -494,7 +431,6 @@ const visibleColumns = ref<String[]>([
|
|||
"note",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"insignia",
|
||||
"insigniaType",
|
||||
|
|
@ -513,19 +449,236 @@ const visibleColumnsHistory = ref<String[]>([
|
|||
"createdAt",
|
||||
]);
|
||||
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
const formFilter = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
|
||||
modal.value = true;
|
||||
async function fetchData() {
|
||||
if (profileId.value) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewInsignByProfileId(profileId.value))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
rows.value = [];
|
||||
data.map((e: any) => {
|
||||
rows.value.push({
|
||||
id: e.id,
|
||||
insigniaId: e.insigniaId,
|
||||
insigniaType: e.insigniaType,
|
||||
year: e.year,
|
||||
no: e.no,
|
||||
issue: e.issue,
|
||||
volumeNo: e.volumeNo,
|
||||
volume: e.volume,
|
||||
section: e.section,
|
||||
page: e.page,
|
||||
receiveDate: e.receiveDate,
|
||||
dateAnnounce: e.dateAnnounce,
|
||||
refCommandNo: e.refCommandNo,
|
||||
refCommandDate: e.refCommandDate,
|
||||
createdFullName: e.createdFullName,
|
||||
createdAt: e.createdAt,
|
||||
note: e.note,
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
// store.isLoad++;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const clickClose = async () => {
|
||||
async function fetchInsignia() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.insignia)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let option: DataOptionInsignia[] = [];
|
||||
data.map((r: any) => {
|
||||
option.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString() + ` (${r.shortName})`,
|
||||
typeName:
|
||||
r.insigniaType == null ? null : r.insigniaType.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.insigniaOptions = option;
|
||||
OpsFilter.value.insigniaOptions = option;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
// store.isLoad++;
|
||||
});
|
||||
}
|
||||
|
||||
async function saveData() {
|
||||
if (profileId.value) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profileNewInsign, {
|
||||
profileId: profileId.value,
|
||||
isActive: insigniaData.isActive,
|
||||
year: insigniaData.year,
|
||||
no: insigniaData.no,
|
||||
volume: insigniaData.volume,
|
||||
section: insigniaData.section,
|
||||
page: insigniaData.page,
|
||||
receiveDate: dateToISO(insigniaData.receiveDate as Date),
|
||||
insigniaId: insigniaData.insigniaId,
|
||||
insigniaType: insigniaData.insigniaType,
|
||||
dateAnnounce: insigniaData.dateAnnounce
|
||||
? dateToISO(insigniaData.dateAnnounce as Date)
|
||||
: null,
|
||||
issue: insigniaData.issue,
|
||||
volumeNo: insigniaData.volumeNo,
|
||||
refCommandDate:
|
||||
insigniaData.refCommandDate == null
|
||||
? null
|
||||
: dateToISO(insigniaData.refCommandDate as Date),
|
||||
refCommandNo: insigniaData.refCommandNo,
|
||||
// note: note.value,
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function editData() {
|
||||
showLoader();
|
||||
await http
|
||||
.patch(config.API.profileNewInsignById(insigniaData.id), {
|
||||
profileId: profileId.value,
|
||||
isActive: insigniaData.isActive,
|
||||
year: insigniaData.year,
|
||||
no: insigniaData.no,
|
||||
volume: insigniaData.volume,
|
||||
section: insigniaData.section,
|
||||
page: insigniaData.page,
|
||||
receiveDate: dateToISO(insigniaData.receiveDate as Date),
|
||||
insigniaId: insigniaData.insigniaId,
|
||||
insigniaType: insigniaData.insigniaType,
|
||||
dateAnnounce: insigniaData.dateAnnounce
|
||||
? dateToISO(insigniaData.dateAnnounce as Date)
|
||||
: null,
|
||||
issue: insigniaData.issue,
|
||||
volumeNo: insigniaData.volumeNo,
|
||||
refCommandDate:
|
||||
insigniaData.refCommandDate == null
|
||||
? null
|
||||
: dateToISO(insigniaData.refCommandDate as Date),
|
||||
refCommandNo: insigniaData.refCommandNo,
|
||||
// note: note.value,
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
}
|
||||
|
||||
async function clickDelete(dataId: string) {
|
||||
$q.dialog({
|
||||
title: `ลบข้อมูล`,
|
||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||
cancel: "ยกเลิก",
|
||||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.profileNewInsignById(dataId))
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
})
|
||||
.onCancel(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
}
|
||||
|
||||
function onClickOpenDialog(editStatus: boolean = false, props?: any) {
|
||||
modal.value = true;
|
||||
editRow.value = false;
|
||||
|
||||
if (editStatus && props) {
|
||||
isEdit.value = editStatus;
|
||||
|
||||
insigniaData.id = props.row.id;
|
||||
insigniaData.year = props.row.year == 0 ? 0 : props.row.year;
|
||||
insigniaData.receiveDate = props.row.receiveDate;
|
||||
insigniaData.insigniaId = props.row.insigniaId;
|
||||
insigniaData.insigniaType = props.row.insigniaType;
|
||||
insigniaData.no = props.row.no;
|
||||
insigniaData.issue = props.row.issue;
|
||||
insigniaData.volumeNo = props.row.volumeNo;
|
||||
insigniaData.volume = props.row.volume;
|
||||
insigniaData.section = props.row.section;
|
||||
insigniaData.page = props.row.page;
|
||||
insigniaData.dateAnnounce =
|
||||
props.row.dateAnnounce == "-" ? "" : props.row.dateAnnounce;
|
||||
insigniaData.refCommandNo = props.row.refCommandNo;
|
||||
insigniaData.refCommandDate =
|
||||
props.row.refCommandDate == "-" ? null : props.row.refCommandDate;
|
||||
insigniaData.note = props.note;
|
||||
} else {
|
||||
isEdit.value = editStatus;
|
||||
|
||||
insigniaData.id = "";
|
||||
insigniaData.year = 0;
|
||||
insigniaData.receiveDate = "";
|
||||
insigniaData.insigniaId = "";
|
||||
insigniaData.insigniaType = "";
|
||||
insigniaData.no = "";
|
||||
insigniaData.issue = "";
|
||||
insigniaData.volumeNo = "";
|
||||
insigniaData.volume = "";
|
||||
insigniaData.section = "";
|
||||
insigniaData.page = "";
|
||||
insigniaData.dateAnnounce = null;
|
||||
insigniaData.refCommandNo = "";
|
||||
insigniaData.refCommandDate = null;
|
||||
insigniaData.note = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function clickClose() {
|
||||
if (editRow.value == true) {
|
||||
$q.dialog({
|
||||
title: `ข้อมูลมีการแก้ไข`,
|
||||
|
|
@ -535,6 +688,7 @@ const clickClose = async () => {
|
|||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
modal.value = false;
|
||||
editRow.value = false;
|
||||
// next.value = false;
|
||||
// previous.value = false;
|
||||
});
|
||||
|
|
@ -543,33 +697,6 @@ const clickClose = async () => {
|
|||
// next.value = false;
|
||||
// previous.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
// await saveData();
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectData(props: any) {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "insigniaOptions":
|
||||
update(() => {
|
||||
Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function clickHistory(row: RequestItemsObject) {
|
||||
|
|
@ -611,45 +738,44 @@ async function clickHistory(row: RequestItemsObject) {
|
|||
// });
|
||||
}
|
||||
|
||||
async function fetchInsignia() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.insignia)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let option: DataOptionInsignia[] = [];
|
||||
data.map((r: any) => {
|
||||
option.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString() + ` (${r.shortName})`,
|
||||
typeName:
|
||||
r.insigniaType == null ? null : r.insigniaType.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.insigniaOptions = option;
|
||||
OpsFilter.value.insigniaOptions = option;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
// store.isLoad++;
|
||||
});
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
isEdit.value ? await editData() : await saveData();
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(insigniaId, (count: string, prevCount: string) => {
|
||||
const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
|
||||
(r: DataOptionInsignia) => r.id == insigniaId.value
|
||||
);
|
||||
if (insigniaTypeFilter[0] != null) {
|
||||
insigniaType.value = insigniaTypeFilter[0].typeName;
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "insigniaOptions":
|
||||
update(() => {
|
||||
Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => insigniaData.insigniaId,
|
||||
(count: string, prevCount: string) => {
|
||||
const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
|
||||
(r: DataOptionInsignia) => r.id === insigniaData.insigniaId
|
||||
);
|
||||
if (insigniaTypeFilter.length > 0) {
|
||||
insigniaData.insigniaType = insigniaTypeFilter[0].typeName;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchInsignia();
|
||||
// await fetchData();
|
||||
await fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -672,7 +798,7 @@ onMounted(async () => {
|
|||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-if="modelView === 'table'"
|
||||
v-if="modeView === 'table'"
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
|
|
@ -690,7 +816,7 @@ onMounted(async () => {
|
|||
|
||||
<q-btn-toggle
|
||||
dense
|
||||
v-model="modelView"
|
||||
v-model="modeView"
|
||||
toggle-color="grey-4"
|
||||
class="no-shadow toggle-borderd"
|
||||
:options="[
|
||||
|
|
@ -703,7 +829,7 @@ onMounted(async () => {
|
|||
name="format_list_bulleted"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
color: modeView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -712,7 +838,7 @@ onMounted(async () => {
|
|||
name="mdi-view-grid-outline"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
color: modeView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -723,16 +849,14 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
class="custom-header-table"
|
||||
:rows="rows"
|
||||
:paging="true"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:pagination="initialPagination"
|
||||
:grid="modeView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
|
|
@ -744,14 +868,14 @@ onMounted(async () => {
|
|||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<template v-slot:body="props" v-if="modeView === 'table'">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
class="cursor-pointer"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="selectData(props)"
|
||||
@click="onClickOpenDialog(true, props)"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
|
|
@ -766,6 +890,14 @@ onMounted(async () => {
|
|||
<div v-else-if="col.name == 'year'" class="table_ellipsis">
|
||||
{{ col.value + 543 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'insignia'" class="table_ellipsis">
|
||||
{{
|
||||
col.value
|
||||
? (Ops.insigniaOptions.find((r) => r.id === col.value) || {})
|
||||
.name
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
|
@ -782,6 +914,17 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
color="red"
|
||||
icon="mdi-delete"
|
||||
@click="clickDelete(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
@ -797,7 +940,7 @@ onMounted(async () => {
|
|||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
@click.stop.prevent="onClickOpenDialog()"
|
||||
@click="onClickOpenDialog(true, props)"
|
||||
>
|
||||
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -806,7 +949,7 @@ onMounted(async () => {
|
|||
round
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click.stop.prevent="clickHistory(props.row)"
|
||||
@click="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -837,6 +980,19 @@ onMounted(async () => {
|
|||
<q-item-label v-else-if="col.name == 'year'">
|
||||
{{ col.value + 543 }}
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
v-else-if="col.name == 'insignia'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{
|
||||
col.value
|
||||
? (
|
||||
Ops.insigniaOptions.find((r) => r.id === col.value) ||
|
||||
{}
|
||||
).name
|
||||
: "-"
|
||||
}}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
|
|
@ -859,7 +1015,7 @@ onMounted(async () => {
|
|||
<datepicker
|
||||
autoApply
|
||||
year-picker
|
||||
v-model="year"
|
||||
v-model="insigniaData.year"
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
|
|
@ -875,7 +1031,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:model-value="year !== 0 ? (year as number) + 543:null"
|
||||
class="inputgreen"
|
||||
:model-value="insigniaData.year !== 0 ? (insigniaData.year as number) + 543 : null"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val ||
|
||||
|
|
@ -901,7 +1058,7 @@ onMounted(async () => {
|
|||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="receiveDate"
|
||||
v-model="insigniaData.receiveDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
|
|
@ -915,18 +1072,17 @@ onMounted(async () => {
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
for="inputDatereceive"
|
||||
ref="dateReceivedRef"
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
receiveDate != null
|
||||
? date2Thai(receiveDate as Date)
|
||||
insigniaData.receiveDate != null
|
||||
? date2Thai(insigniaData.receiveDate as Date)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
|
||||
]"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -952,7 +1108,8 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
input-debounce="0"
|
||||
option-label="name"
|
||||
v-model="insigniaId"
|
||||
v-model="insigniaData.insigniaId"
|
||||
class="inputgreen"
|
||||
:label="`${'ชื่อเครื่องราชฯ'}`"
|
||||
:options="Ops.insigniaOptions"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
|
||||
|
|
@ -969,7 +1126,7 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="insigniaType"
|
||||
v-model="insigniaData.insigniaType"
|
||||
:label="`${'ลำดับชั้น'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
|
|
@ -980,7 +1137,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="no"
|
||||
v-model="insigniaData.no"
|
||||
class="inputgreen"
|
||||
:label="`${'ลำดับที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -992,7 +1150,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="issue"
|
||||
v-model="insigniaData.issue"
|
||||
class="inputgreen"
|
||||
:label="`${'ราชกิจจาฯ ฉบับที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1004,7 +1163,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="volumeNo"
|
||||
v-model="insigniaData.volumeNo"
|
||||
class="inputgreen"
|
||||
:label="`${'เล่มที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1016,7 +1176,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="volume"
|
||||
v-model="insigniaData.volume"
|
||||
class="inputgreen"
|
||||
:label="`${'เล่ม'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1027,8 +1188,9 @@ onMounted(async () => {
|
|||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
v-model="section"
|
||||
hide-bottom-space
|
||||
v-model="insigniaData.section"
|
||||
class="inputgreen"
|
||||
:label="`${'ตอน'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1039,8 +1201,9 @@ onMounted(async () => {
|
|||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
v-model="page"
|
||||
hide-bottom-space
|
||||
v-model="insigniaData.page"
|
||||
class="inputgreen"
|
||||
:label="`${'หน้า'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1050,7 +1213,7 @@ onMounted(async () => {
|
|||
<datepicker
|
||||
autoApply
|
||||
week-start="0"
|
||||
v-model="dateAnnounce"
|
||||
v-model="insigniaData.dateAnnounce"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
|
|
@ -1065,7 +1228,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:model-value="date2Thai(dateAnnounce as Date)"
|
||||
class="inputgreen"
|
||||
:model-value="date2Thai(insigniaData.dateAnnounce as Date)"
|
||||
:label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
|
|
@ -1080,13 +1244,6 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="dateAnnounce && edit" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="dateAnnounce = null"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
|
@ -1097,7 +1254,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="refCommandNo"
|
||||
v-model="insigniaData.refCommandNo"
|
||||
class="inputgreen"
|
||||
:label="`${'เลขที่คำสั่ง'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
|
|
@ -1110,7 +1268,7 @@ onMounted(async () => {
|
|||
<datepicker
|
||||
autoApply
|
||||
week-start="0"
|
||||
v-model="refCommandDate"
|
||||
v-model="insigniaData.refCommandDate"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
|
|
@ -1126,12 +1284,12 @@ onMounted(async () => {
|
|||
clearable
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:borderless="!edit"
|
||||
class="inputgreen"
|
||||
:label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
|
||||
:model-value="
|
||||
date2Thai(refCommandDate as Date)
|
||||
date2Thai(insigniaData.refCommandDate as Date)
|
||||
"
|
||||
@clear="refCommandDate = ''"
|
||||
@clear="insigniaData.refCommandDate = ''"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -1150,7 +1308,8 @@ onMounted(async () => {
|
|||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
v-model="note"
|
||||
v-model="insigniaData.note"
|
||||
class="inputgreen"
|
||||
label="หมายเหตุ"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue