2024-03-13 18:05:32 +07:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { onMounted, ref, watch, useAttrs } from "vue";
|
|
|
|
|
import { useQuasar } from "quasar";
|
|
|
|
|
import type { QTableProps } from "quasar";
|
|
|
|
|
import http from "@/plugins/http";
|
|
|
|
|
import config from "@/app.config";
|
|
|
|
|
|
|
|
|
|
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";
|
|
|
|
|
|
|
|
|
|
const $q = useQuasar();
|
|
|
|
|
const attrs = ref<any>(useAttrs());
|
|
|
|
|
const mixin = useCounterMixin();
|
|
|
|
|
const {
|
|
|
|
|
date2Thai,
|
|
|
|
|
success,
|
|
|
|
|
dateToISO,
|
|
|
|
|
messageError,
|
|
|
|
|
typeChangeName,
|
|
|
|
|
dialogMessage,
|
|
|
|
|
showLoader,
|
|
|
|
|
hideLoader,
|
|
|
|
|
} = mixin;
|
|
|
|
|
|
|
|
|
|
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 editRow = ref<boolean>(false);
|
|
|
|
|
const note = ref<string>();
|
|
|
|
|
|
|
|
|
|
const myForm = ref<any>();
|
|
|
|
|
const edit = ref<boolean>(false);
|
|
|
|
|
const modal = ref<boolean>(false);
|
|
|
|
|
const modelView = ref<string>("table");
|
|
|
|
|
const filterSearch = ref("");
|
|
|
|
|
const filterHistory = ref<string>("");
|
|
|
|
|
const modalHistory = ref<boolean>(false);
|
|
|
|
|
const rowsHistory = ref<RequestItemsObject[]>([]);
|
|
|
|
|
const tittleHistory = ref<string>("ประวัติแก้ไขเครื่องราชอิสริยาภรณ์");
|
|
|
|
|
|
|
|
|
|
const Ops = ref<InsigniaOps>({
|
|
|
|
|
insigniaOptions: [],
|
|
|
|
|
});
|
|
|
|
|
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 columns = ref<QTableProps["columns"]>([
|
|
|
|
|
{
|
|
|
|
|
name: "year",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ปีที่ยื่นขอ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
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",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "วันที่ได้รับ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "receiveDate",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "insignia",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ชื่อเครื่องราชฯ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "insignia",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "insigniaType",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ลำดับชั้น",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "insigniaType",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "no",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ลำดับที่",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "no",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "issue",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ราชกิจจาฯ ฉบับที่",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "issue",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "volumeNo",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "เล่มที่",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "volumeNo",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "volume",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "เล่ม",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "volume",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "section",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ตอน",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "section",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "page",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "หน้า",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "page",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "dateAnnounce",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "วันที่ประกาศในราชกิจจาฯ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "dateAnnounce",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "refCommandNo",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "เลขที่คำสั่ง",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "refCommandNo",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "refCommandDate",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "refCommandDate",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "note",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "หมายเหตุ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "note",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const columnsHistory = ref<QTableProps["columns"]>([
|
|
|
|
|
{
|
|
|
|
|
name: "year",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ปีที่ยื่นขอ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
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",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ลงวันที่",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "receiveDate",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "insignia",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ชื่อเครื่องราชฯ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "insignia",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "insigniaType",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ลำดับชั้น",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "insigniaType",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "no",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ลำดับที่",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "no",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "issue",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ราชกิจจาฯ ฉบับที่",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "issue",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "volumeNo",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "เล่มที่",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "volumeNo",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "volume",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "เล่ม",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "volume",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "section",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ตอน",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "section",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "page",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "หน้า",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "page",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "dateAnnounce",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "วันที่ประกาศในราชกิจจาฯ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "dateAnnounce",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "refCommandNo",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "เลขที่คำสั่ง",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "refCommandNo",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "refCommandDate",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "refCommandDate",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "createdFullName",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ผู้ดำเนินการ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "createdFullName",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "createdAt",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "วันที่แก้ไข",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "createdAt",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px",
|
|
|
|
|
sort: (a: string, b: string) =>
|
|
|
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const visibleColumns = ref<String[]>([
|
|
|
|
|
"insignia",
|
|
|
|
|
"insigniaType",
|
|
|
|
|
"year",
|
|
|
|
|
"no",
|
|
|
|
|
"issue",
|
|
|
|
|
"volumeNo",
|
|
|
|
|
"volume",
|
|
|
|
|
"section",
|
|
|
|
|
"page",
|
|
|
|
|
"receiveDate",
|
|
|
|
|
"dateAnnounce",
|
|
|
|
|
"refCommandNo",
|
|
|
|
|
"refCommandDate",
|
|
|
|
|
"note",
|
|
|
|
|
"createdAt",
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const visibleColumnsHistory = ref<String[]>([
|
|
|
|
|
"insignia",
|
|
|
|
|
"insigniaType",
|
|
|
|
|
"year",
|
|
|
|
|
"no",
|
|
|
|
|
"issue",
|
|
|
|
|
"volumeNo",
|
|
|
|
|
"volume",
|
|
|
|
|
"section",
|
|
|
|
|
"page",
|
|
|
|
|
"receiveDate",
|
|
|
|
|
"dateAnnounce",
|
|
|
|
|
"refCommandNo",
|
|
|
|
|
"refCommandDate",
|
|
|
|
|
"createdFullName",
|
|
|
|
|
"createdAt",
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const initialPagination = ref<Pagination>({
|
|
|
|
|
rowsPerPage: 0,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const paginationLabel = (start: string, end: string, total: string) => {
|
|
|
|
|
return start + "-" + end + " ใน " + total;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
|
|
|
|
|
modal.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const clickClose = async () => {
|
|
|
|
|
if (editRow.value == true) {
|
|
|
|
|
$q.dialog({
|
|
|
|
|
title: `ข้อมูลมีการแก้ไข`,
|
|
|
|
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
|
|
|
|
cancel: "ยกเลิก",
|
|
|
|
|
ok: "ยืนยัน",
|
|
|
|
|
persistent: true,
|
|
|
|
|
}).onOk(async () => {
|
|
|
|
|
myForm.value.reset()
|
|
|
|
|
// modal.value = false;
|
|
|
|
|
// next.value = false;
|
|
|
|
|
// previous.value = false;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
modal.value = false;
|
|
|
|
|
// next.value = false;
|
|
|
|
|
// previous.value = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function onSubmit() {
|
|
|
|
|
myForm.value.validate().then(async (result: boolean) => {
|
|
|
|
|
if (result) {
|
|
|
|
|
// await saveData();
|
|
|
|
|
modal.value = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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) {
|
|
|
|
|
modalHistory.value = true;
|
|
|
|
|
// showLoader();
|
|
|
|
|
// await http
|
|
|
|
|
// .get(config.API.profileInsignHisId(row.id))
|
|
|
|
|
// .then((res) => {
|
|
|
|
|
// let data = res.data.result;
|
|
|
|
|
// rowsHistory.value = [];
|
|
|
|
|
// data.map((e: ResponseObject) => {
|
|
|
|
|
// rowsHistory.value.push({
|
|
|
|
|
// id: e.id,
|
|
|
|
|
// insignia: e.insignia,
|
|
|
|
|
// 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: new Date(e.receiveDate),
|
|
|
|
|
// dateAnnounce: new Date(e.dateAnnounce),
|
|
|
|
|
// refCommandNo: e.refCommandNo,
|
|
|
|
|
// refCommandDate:
|
|
|
|
|
// e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
|
|
|
|
// createdFullName: e.createdFullName,
|
|
|
|
|
// createdAt: new Date(e.createdAt),
|
|
|
|
|
// });
|
|
|
|
|
// });
|
|
|
|
|
// })
|
|
|
|
|
// .catch((e) => {
|
|
|
|
|
// messageError($q, e);
|
|
|
|
|
// })
|
|
|
|
|
// .finally(() => {
|
|
|
|
|
// hideLoader();
|
|
|
|
|
// });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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++;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
await fetchInsignia();
|
|
|
|
|
// await fetchData();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
2024-03-08 16:46:36 +07:00
|
|
|
<template>
|
2024-03-13 18:05:32 +07:00
|
|
|
<q-toolbar style="padding: 0px" class="text-primary">
|
|
|
|
|
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
|
|
|
|
<q-tooltip>เพิ่ม</q-tooltip>
|
|
|
|
|
</q-btn>
|
|
|
|
|
<q-space />
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
v-model="filterSearch"
|
|
|
|
|
label="ค้นหา"
|
|
|
|
|
class="q-mr-sm"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:append>
|
|
|
|
|
<q-icon name="search" />
|
|
|
|
|
</template>
|
|
|
|
|
</q-input>
|
|
|
|
|
|
|
|
|
|
<q-select
|
|
|
|
|
v-if="modelView === 'table'"
|
|
|
|
|
v-model="visibleColumns"
|
|
|
|
|
multiple
|
|
|
|
|
outlined
|
|
|
|
|
dense
|
|
|
|
|
options-dense
|
|
|
|
|
:display-value="$q.lang.table.columns"
|
|
|
|
|
emit-value
|
|
|
|
|
map-options
|
|
|
|
|
:options="columns"
|
|
|
|
|
option-value="name"
|
|
|
|
|
options-cover
|
|
|
|
|
style="min-width: 150px"
|
|
|
|
|
class="q-mr-sm"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<q-btn-toggle
|
|
|
|
|
v-model="modelView"
|
|
|
|
|
toggle-color="grey-4"
|
|
|
|
|
class="no-shadow toggle-borderd"
|
|
|
|
|
:options="[
|
|
|
|
|
{ value: 'table', slot: 'table' },
|
|
|
|
|
{ value: 'card', slot: 'card' },
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:table>
|
|
|
|
|
<q-icon
|
|
|
|
|
name="format_list_bulleted"
|
|
|
|
|
size="sm"
|
|
|
|
|
:style="{
|
|
|
|
|
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:card>
|
|
|
|
|
<q-icon
|
|
|
|
|
name="mdi-view-grid-outline"
|
|
|
|
|
size="sm"
|
|
|
|
|
:style="{
|
|
|
|
|
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</q-btn-toggle>
|
|
|
|
|
</q-toolbar>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<q-table
|
|
|
|
|
flat
|
|
|
|
|
dense
|
|
|
|
|
bordered
|
|
|
|
|
virtual-scroll
|
|
|
|
|
ref="table"
|
|
|
|
|
v-bind="attrs"
|
|
|
|
|
class="custom-header-table"
|
|
|
|
|
:rows="rows"
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:filter="filterSearch"
|
|
|
|
|
:rows-per-page-options="[0]"
|
|
|
|
|
:pagination="initialPagination"
|
|
|
|
|
:visible-columns="visibleColumns"
|
|
|
|
|
:pagination-label="paginationLabel"
|
|
|
|
|
:virtual-scroll-sticky-size-start="48"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:header="props">
|
|
|
|
|
<q-tr :props="props">
|
|
|
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
|
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
|
|
|
</q-th>
|
|
|
|
|
<q-th auto-width />
|
|
|
|
|
</q-tr>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-slot:body="props">
|
|
|
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
|
|
|
<q-td
|
|
|
|
|
v-for="col in props.cols"
|
|
|
|
|
:key="col.name"
|
|
|
|
|
:props="props"
|
|
|
|
|
class="cursor-pointer"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-if="
|
|
|
|
|
col.name == 'receiveDate' ||
|
|
|
|
|
col.name == 'dateAnnounce' ||
|
|
|
|
|
col.name == 'refCommandDate'
|
|
|
|
|
"
|
|
|
|
|
class="table_ellipsis"
|
|
|
|
|
>
|
|
|
|
|
{{ col.value == null ? "-" : date2Thai(col.value) }}
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else-if="col.name == 'year'" class="table_ellipsis">
|
|
|
|
|
{{ col.value + 543 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="table_ellipsis">
|
|
|
|
|
{{ col.value ? col.value : "-" }}
|
|
|
|
|
</div>
|
|
|
|
|
</q-td>
|
|
|
|
|
<q-td auto-width>
|
|
|
|
|
<q-btn
|
|
|
|
|
color="info"
|
|
|
|
|
flat
|
|
|
|
|
dense
|
|
|
|
|
round
|
|
|
|
|
size="14px"
|
|
|
|
|
icon="mdi-history"
|
|
|
|
|
@click="clickHistory(props.row)"
|
|
|
|
|
/>
|
|
|
|
|
</q-td>
|
|
|
|
|
</q-tr>
|
|
|
|
|
</template>
|
|
|
|
|
</q-table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<q-dialog v-model="modal" persistent>
|
|
|
|
|
<q-card style="width: 600px">
|
|
|
|
|
<q-form ref="myForm" @submit="onSubmit">
|
|
|
|
|
<DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
|
|
|
|
|
<q-separator />
|
|
|
|
|
<q-card-section class="q-p-sm">
|
|
|
|
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<datepicker
|
|
|
|
|
autoApply
|
|
|
|
|
year-picker
|
|
|
|
|
v-model="year"
|
|
|
|
|
week-start="0"
|
|
|
|
|
menu-class-name="modalfix"
|
|
|
|
|
:locale="'th'"
|
|
|
|
|
:enableTimePicker="false"
|
|
|
|
|
>
|
|
|
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
|
|
|
<template #year-overlay-value="{ value }">{{
|
|
|
|
|
parseInt(value + 543)
|
|
|
|
|
}}</template>
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
:model-value="year !== 0 ? (year as number) + 543:null"
|
|
|
|
|
:rules="[
|
|
|
|
|
(val:string) =>
|
|
|
|
|
!!val ||
|
|
|
|
|
`${'กรุณาเลือกปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`,
|
|
|
|
|
]"
|
|
|
|
|
:label="`${'ปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:prepend>
|
|
|
|
|
<q-icon
|
|
|
|
|
name="event"
|
|
|
|
|
class="cursor-pointer"
|
|
|
|
|
color="primary"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</q-input>
|
|
|
|
|
</template>
|
|
|
|
|
</datepicker>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<datepicker
|
|
|
|
|
autoApply
|
|
|
|
|
borderless
|
|
|
|
|
week-start="0"
|
|
|
|
|
menu-class-name="modalfix"
|
|
|
|
|
v-model="receiveDate"
|
|
|
|
|
:locale="'th'"
|
|
|
|
|
>
|
|
|
|
|
<template #year="{ year }">
|
|
|
|
|
{{ year + 543 }}
|
|
|
|
|
</template>
|
|
|
|
|
<template #year-overlay-value="{ value }">
|
|
|
|
|
{{ parseInt(value + 543) }}
|
|
|
|
|
</template>
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
for="inputDatereceive"
|
|
|
|
|
ref="dateReceivedRef"
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
:model-value="
|
|
|
|
|
receiveDate != null
|
|
|
|
|
? date2Thai(receiveDate as Date)
|
|
|
|
|
: null
|
|
|
|
|
"
|
|
|
|
|
:label="`${'วัน/เดือน/ปี ที่วันที่ได้รับ'}`"
|
|
|
|
|
:rules="[
|
|
|
|
|
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
|
|
|
|
|
]"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:prepend>
|
|
|
|
|
<q-icon
|
|
|
|
|
name="event"
|
|
|
|
|
class="cursor-pointer"
|
|
|
|
|
color="primary"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</q-input>
|
|
|
|
|
</template>
|
|
|
|
|
</datepicker>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<selector
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
use-input
|
|
|
|
|
emit-value
|
|
|
|
|
lazy-rules
|
|
|
|
|
map-options
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
option-value="id"
|
|
|
|
|
input-debounce="0"
|
|
|
|
|
option-label="name"
|
|
|
|
|
v-model="insigniaId"
|
|
|
|
|
:label="`${'ชื่อเครื่องราชฯ'}`"
|
|
|
|
|
:options="Ops.insigniaOptions"
|
|
|
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
|
|
|
|
|
@filter="(inputValue:any,
|
|
|
|
|
doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
|
|
|
|
|
) "
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
readonly
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
v-model="insigniaType"
|
|
|
|
|
:label="`${'ลำดับชั้น'}`"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
v-model="no"
|
|
|
|
|
:label="`${'ลำดับที่'}`"
|
|
|
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
v-model="issue"
|
|
|
|
|
:label="`${'ราชกิจจาฯ ฉบับที่'}`"
|
|
|
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
v-model="volumeNo"
|
|
|
|
|
:label="`${'เล่มที่'}`"
|
|
|
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
v-model="volume"
|
|
|
|
|
:label="`${'เล่ม'}`"
|
|
|
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
v-model="section"
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
:label="`${'ตอน'}`"
|
|
|
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
lazy-rules
|
|
|
|
|
outlined
|
|
|
|
|
v-model="page"
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
:label="`${'หน้า'}`"
|
|
|
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<datepicker
|
|
|
|
|
autoApply
|
|
|
|
|
week-start="0"
|
|
|
|
|
v-model="dateAnnounce"
|
|
|
|
|
menu-class-name="modalfix"
|
|
|
|
|
:locale="'th'"
|
|
|
|
|
:enableTimePicker="false"
|
|
|
|
|
>
|
|
|
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
|
|
|
<template #year-overlay-value="{ value }">{{
|
|
|
|
|
parseInt(value + 543)
|
|
|
|
|
}}</template>
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
:model-value="date2Thai(dateAnnounce as Date)"
|
|
|
|
|
:label="`${'วัน/เดือน/ปี ที่ประกาศในราชกิจจาฯ'}`"
|
|
|
|
|
:rules="[
|
|
|
|
|
(val:string) =>
|
|
|
|
|
!!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
|
|
|
|
|
]"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:prepend>
|
|
|
|
|
<q-icon
|
|
|
|
|
name="event"
|
|
|
|
|
class="cursor-pointer"
|
|
|
|
|
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>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
v-model="refCommandNo"
|
|
|
|
|
:label="`${'เลขที่คำสั่ง'}`"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:append>
|
|
|
|
|
<q-icon name="mdi-file" class="cursor-pointer" />
|
|
|
|
|
</template>
|
|
|
|
|
</q-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<datepicker
|
|
|
|
|
autoApply
|
|
|
|
|
week-start="0"
|
|
|
|
|
v-model="refCommandDate"
|
|
|
|
|
menu-class-name="modalfix"
|
|
|
|
|
:locale="'th'"
|
|
|
|
|
:enableTimePicker="false"
|
|
|
|
|
>
|
|
|
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
|
|
|
<template #year-overlay-value="{ value }">{{
|
|
|
|
|
parseInt(value + 543)
|
|
|
|
|
}}</template>
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
clearable
|
|
|
|
|
lazy-rules
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
:borderless="!edit"
|
|
|
|
|
:label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
|
|
|
|
|
:model-value="
|
|
|
|
|
date2Thai(refCommandDate as Date)
|
|
|
|
|
"
|
|
|
|
|
@clear="refCommandDate = ''"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:prepend>
|
|
|
|
|
<q-icon
|
|
|
|
|
name="event"
|
|
|
|
|
class="cursor-pointer"
|
|
|
|
|
color="primary"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="refCommandDate && edit" v-slot:append>
|
|
|
|
|
<q-icon
|
|
|
|
|
name="cancel"
|
|
|
|
|
@click.stop.prevent="refCommandDate = null"
|
|
|
|
|
class="cursor-pointer"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</q-input>
|
|
|
|
|
</template>
|
|
|
|
|
</datepicker>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
|
|
|
<q-input
|
|
|
|
|
dense
|
|
|
|
|
outlined
|
|
|
|
|
hide-bottom-space
|
|
|
|
|
v-model="note"
|
|
|
|
|
label="หมายเหตุ"
|
|
|
|
|
@update:modelValue="() => (editRow = true)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
<q-separator />
|
|
|
|
|
<div class="text-right q-pa-sm">
|
|
|
|
|
<q-btn
|
|
|
|
|
dense
|
|
|
|
|
unelevated
|
|
|
|
|
label="บันทึก"
|
|
|
|
|
id="onSubmit"
|
|
|
|
|
type="reset"
|
|
|
|
|
color="public"
|
|
|
|
|
class="q-px-md"
|
|
|
|
|
>
|
|
|
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
|
|
|
</q-btn>
|
|
|
|
|
</div>
|
|
|
|
|
</q-form>
|
|
|
|
|
</q-card>
|
|
|
|
|
</q-dialog>
|
|
|
|
|
|
|
|
|
|
<history-table
|
|
|
|
|
:rows="rowsHistory"
|
|
|
|
|
:columns="columnsHistory"
|
|
|
|
|
:filter="filterHistory"
|
|
|
|
|
:visible-columns="visibleColumnsHistory"
|
|
|
|
|
v-model:modal="modalHistory"
|
|
|
|
|
v-model:inputfilter="filterHistory"
|
|
|
|
|
v-model:inputvisible="visibleColumnsHistory"
|
|
|
|
|
v-model:tittle="tittleHistory"
|
|
|
|
|
>
|
|
|
|
|
<template #columns="props">
|
|
|
|
|
<q-tr :props="props">
|
|
|
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
|
|
|
<div
|
|
|
|
|
v-if="
|
|
|
|
|
col.name == 'receiveDate' ||
|
|
|
|
|
col.name == 'dateAnnounce' ||
|
|
|
|
|
col.name == 'createdAt' ||
|
|
|
|
|
col.name == 'refCommandDate'
|
|
|
|
|
"
|
|
|
|
|
class="table_ellipsis"
|
|
|
|
|
>
|
|
|
|
|
{{ col.value ? date2Thai(col.value) : "-" }}
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else-if="col.name == 'year'" class="table_ellipsis">
|
|
|
|
|
{{ col.value ? col.value + 543 : "-" }}
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="table_ellipsis">
|
|
|
|
|
{{ col.value ? col.value : "-" }}
|
|
|
|
|
</div>
|
|
|
|
|
</q-td>
|
|
|
|
|
</q-tr>
|
|
|
|
|
</template>
|
|
|
|
|
</history-table>
|
2024-03-08 16:46:36 +07:00
|
|
|
</template>
|
|
|
|
|
|
2024-03-13 18:05:32 +07:00
|
|
|
<style lang="scss">
|
|
|
|
|
.modalfix {
|
|
|
|
|
position: fixed !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
