ui ยืม-คืนเครื่องราช, แก้ label เครื่องราช

src/modules/07_insignia/components/1_Proposals/addProposals.vue

@@ -278,7 +278,7 @@ const updateYear = async (e: number) => {
 
 const editData = async (id: string) => {
   const formData = new FormData();
-  const name = `รอบการเสนอพระราชทานเครื่องราชรอบที่ ${
+  const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
     roundInsig.value.value
   }  ปี ${yearly.value + 543} `;
   formData.append("name", name);
@@ -352,7 +352,7 @@ const updateDateRange = () => {
 
 const addData = async () => {
   const formData = new FormData();
-  const name = `รอบการเสนอพระราชทานเครื่องราชรอบที่ ${
+  const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
     roundInsig.value.value
   }  ปี ${yearly.value + 543} `;
   console.log(name);

src/modules/07_insignia/components/4_Allocate/DialogForm.vue

@@ -95,7 +95,7 @@ const dataSave = async () => {
   <q-dialog v-model="props.modal" persistent>
     <q-card style="width: 800px">
       <q-toolbar class="q-py-sm">
-        <q-toolbar-title class="text-h6">บันทึกผล </q-toolbar-title>
+        <q-toolbar-title class="text-h6">จัดสรรเครื่องราชฯ </q-toolbar-title>
         <q-btn
           icon="close"
           unelevated
@@ -140,7 +140,7 @@ const dataSave = async () => {
                 map-options
                 outlined
                 v-model="Org"
-                :label="`เครื่องราชฯ`"
+                :label="`เลือกหน่วยงาน`"
               />
             </div>
             <div class="col-xs-12 col-sm-6">

src/modules/07_insignia/components/4_Allocate/listAllocate.vue

@@ -56,7 +56,10 @@ const fecthRound = async () => {
     .get(config.API.noteround())
     .then((res) => {
       let data = res.data.result;
-      selectRoundOption.value = data;
+      selectRoundOption.value = data.map((e: any) => ({
+        name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
+        id: e.id,
+      }));
       selectRound.value = data[0].id;
       // console.log(selectRound.value);
     })
@@ -259,7 +262,6 @@ const resetFilter = () => {
   <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
     <div class="bg-grey-1 col-12 row items-center">
       <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
-      <div>
         <selector
           hide-bottom-space
           borderless
@@ -278,7 +280,6 @@ const resetFilter = () => {
           @update:emit-value="selectorRound"
         >
         </selector>
-      </div>
     </div>
     <q-separator />
     <q-tabs

src/modules/07_insignia/components/5_Borrow/DialogForm.vue

@@ -0,0 +1,458 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useResultDataStore } from "@/modules/07_insignia/storeResult";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { DataOption } from "@/modules/04_registry/components/profileType";
+
+const DataStore = useResultDataStore();
+const $q = useQuasar();
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  notifyError,
+} = mixin;
+const status = ref<status>("");
+
+const Advertise = ref<string>("");
+const issue = ref<string>("");
+const brand = ref<string>("");
+const roundNo = ref<string>("");
+const cardid = ref<string>("");
+const OrganazationId = ref<string>("");
+const fullName = ref<string>("");
+const volume = ref<string>("");
+const episode = ref<string>("");
+const duty = ref<string>("");
+const announced = ref<string>("");
+const firstname = ref<string>("");
+const lastname = ref<string>("");
+const position = ref<string>("");
+const invoice = ref<string | null>(null);
+const payment = ref<string>("");
+const addressPayment = ref<string | null>(null);
+const affiliationRequest = ref<string>("");
+const affiliationReceived = ref<string>("");
+const receivedate = ref<Date | null>();
+const announceDate = ref<Date | null>();
+const invoiceDate = ref<Date | null>(null);
+
+const employeeClass = ref<string>("");
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  { id: "employee", name: "ลูกจ้างประจำ" },
+]);
+
+const listPerson = ref<any>([]);
+
+const paymentOp = [
+  { label: "จัดส่งทางไปรษณี", value: "จัดส่งทางไปรษณี" },
+  { label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
+];
+const volumeOp = [
+  { label: "เล่มที่", value: "xx1" },
+  { label: "เล่มที่2", value: "xx2" },
+  { label: "เล่มที่3", value: "xx3" },
+];
+const episodeOp = [
+  { label: "ตอนที่1", value: "xx1" },
+  { label: "ตอนที่2", value: "xx2" },
+  { label: "ตอนที่3", value: "xx3" },
+];
+const dutyOp = [
+  { label: "หน้าที่1", value: "xx1" },
+  { label: "หน้าที่2", value: "xx2" },
+  { label: "หน้าที่3", value: "xx3" },
+];
+const announcedOp = [
+  { label: "ลำดับที่1", value: "xx1" },
+  { label: "ลำดับที่2", value: "xx2" },
+  { label: "ลำดับที่3", value: "xx3" },
+];
+const affiliationRequestOp = [
+  { label: "สังกัด1", value: "xx1" },
+  { label: "สังกัด2", value: "xx2" },
+  { label: "สังกัด3", value: "xx3" },
+];
+const affiliationReceivedOp = [
+  { label: "สังกัด4", value: "xx4" },
+  { label: "สังกัด5", value: "xx5" },
+  { label: "สังกัด6", value: "xx6" },
+];
+const prefixOp = [
+  { label: "นาย", value: "mr" },
+  { label: "นางสาว", value: "miss" },
+  { label: "นาง", value: "mrs" },
+];
+const positionOp = [
+  { label: "ตำแหน่ง1", value: "xxx1" },
+  { label: "ตำแหน่ง2", value: "xxx2" },
+  { label: "ตำแหน่ง3", value: "xxx3" },
+];
+
+const OrgOp = ref<DataOption[]>([
+  { id: "xxx1", name: "หน่วยงาน กทม" },
+  { id: "xxx2", name: "หน่วยงาน กทมฯ" },
+]);
+
+const clearDateExam = () => {
+  receivedate.value = null;
+  announceDate.value = null;
+  invoiceDate.value = null;
+};
+const props = defineProps({
+  modal: Boolean,
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  roundId: {
+    type: String,
+  },
+  action: {
+    type: String,
+  },
+  personId: {
+    type: String,
+  },
+  profileType: {
+    type: String,
+  },
+  selectRoundOption: {
+    type: Array
+  }
+});
+watch(props, () => {
+  if (props.modal === true) {
+    employeeClass.value = "";
+    cardid.value = "";
+    fullName.value = "";
+    position.value = "";
+    Advertise.value = "";
+    brand.value = "";
+    receivedate.value = null;
+    issue.value = "";
+    affiliationRequest.value = "";
+    affiliationReceived.value = "";
+    announceDate.value = null;
+    volume.value = "";
+    episode.value = "";
+    duty.value = "";
+    announced.value = "";
+    // invoice.value = "";
+    invoiceDate.value = null;
+    payment.value = "";
+
+    if (props.action === "editData") {
+      fectDataByid(props.personId);
+    }
+  }
+});
+const disbleStatus = computed(() => {
+  if (employeeClass.value !== "") {
+    return false;
+  } else return true;
+});
+
+const selectType = async () => {
+  showLoader();
+  cardid.value = "";
+  fullName.value = "";
+  position.value = "";
+  Advertise.value = "";
+  brand.value = "";
+  receivedate.value = null;
+  issue.value = "";
+  affiliationRequest.value = "";
+  affiliationReceived.value = "";
+  announceDate.value = null;
+  volume.value = "";
+  episode.value = "";
+  duty.value = "";
+  announced.value = "";
+  invoiceDate.value = null;
+  payment.value = "";
+  await fecthlistPerson();
+};
+
+const fecthlistPerson = async () => {
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      const id = res.data.result[0].id;
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const findlist = async (id: string) => {
+  let data = [{}];
+  if (employeeClass.value === "officer") {
+    data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
+  } else if (employeeClass.value === "employee") {
+    data = [
+      { criteriaType: "is_retire", criteriaValue: "false" },
+      { criteriaType: "employee_class", criteriaValue: "perm" },
+    ];
+  }
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, employeeClass.value), {
+      criterias: data,
+    })
+    .then((res) => {
+      // console.log(res.data.result);
+      listPerson.value = res.data.result;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fectDataByid = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.noteByid(id))
+    .then((res) => {
+      let data = res.data.result;
+      employeeClass.value = "";
+      cardid.value = data.citizenId;
+      fullName.value = data.fullName;
+      position.value = data.position;
+      Advertise.value = data.number;
+      brand.value = data.requestInsigniaId;
+      receivedate.value = data.dateReceive;
+      issue.value = data.issue;
+      affiliationRequest.value = data.organizationOrganizationSend;
+      affiliationReceived.value = data.organizationOrganizationReceive;
+      announceDate.value = data.date;
+      volume.value = data.volumeNo;
+      episode.value = data.section;
+      duty.value = data.page;
+      announced.value = data.no;
+      invoiceDate.value = data.datePayment;
+      payment.value = data.typePayment;
+      addressPayment.value = data.address;
+      status.value = data.status;
+      employeeClass.value = props.profileType;
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const clickSave = async () => {
+  let body = {
+    citizanId: cardid.value, // เลขบัตร
+    insigniaId: brand.value, // insigniaID
+    number: Advertise.value,
+    issue: issue.value,
+    dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
+    organizationOrganizationSend: affiliationRequest.value,
+    organizationOrganizationReceive: affiliationReceived.value,
+    date: announceDate.value, // วันที่กิจนุเบก
+    volumeNo: volume.value, // เล่ม
+    section: episode.value, //ตอนที่
+    page: duty.value, //หน้าที่
+    no: announced.value,
+    // รอฟิล: invoice.value,
+    datePayment: invoiceDate.value, //วันที่จ่าย
+    typePayment: payment.value, // รูปแบบการจ่าย
+    address: addressPayment.value, //ที่อยู่
+  };
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      dialogConfirm($q, async () => {
+        await addNote(body);
+      });
+    }
+  });
+};
+const addNote = async (body: any) => {
+  await http
+    .put(config.API.noteAdd(props.roundId), body)
+    .then(() => {
+      success($q, "เพิ่มราชชื่อสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.close();
+    });
+};
+const searchcardid = () => {
+  // console.log(cardid.value);
+  if (cardid.value.length === 13) {
+    let data = listPerson.value.find((e: any) => e.citizenId === cardid.value);
+    if (data) {
+      fullName.value = data.fullname;
+      position.value = data.positionEmployeePosition;
+    } else notifyError($q, "ไม่พบข้อมูลเลขบัตรประชาชนนี้");
+  }
+};
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 900px" class="q-pb-md">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="text-h6">ยืม-คืนเครื่องราชฯ </q-toolbar-title>
+        <q-btn icon="close" unelevated round dense @click="props.close"
+          style="color: #ff8080; background-color: #ffdede" />
+      </q-toolbar>
+      <q-separator />
+
+      <q-form ref="myForm">
+        <div class="q-pa-md">
+          <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-4">
+              <q-select :rules="[
+                (val) => !!val || 'กรุณาเลือก  ขรก.สามัญ/ลูกจ้างประจำ',
+              ]" hide-bottom-space :options="employeeClassOps" dense borderless option-label="name" option-value="id"
+                emit-value map-options outlined v-model="employeeClass" :label="`ขรก.สามัญ/ลูกจ้างประจำ`"
+                @update:model-value="selectType" :disable="status !== ''" />
+            </div>
+            <div class="col-12 text-weight-bold text-grey">
+              ข้อมูลผู้ยืม
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-input :disable="disbleStatus || status == 'DONE' || status == 'PENDING'" hide-bottom-space outlined
+                class="inputgreen" v-model="cardid" dense lazy-rules :rules="[
+                  (val: string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+                  (val: string) =>
+                    val.length >= 13 ||
+                    `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+                ]" label="เลขบัตรประจำตัวประชาชน" maxlength="13" mask="#############" @keyup="searchcardid" />
+              <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+            </div>
+            <div class="col-xs-6 col-sm-4">
+              <q-input disable hide-bottom-space outlined dense lazy-rules class="inputgreen" borderless
+                v-model="fullName" :label="`${'ชื่อ-นามสกุล'}`" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-input disable hide-bottom-space outlined dense lazy-rules class="inputgreen" borderless
+                v-model="position" :label="`ตำเเหน่ง`" />
+            </div>
+
+            <div class="col-6"></div>
+
+            <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+            <div class="col-12 text-weight-bold text-grey">
+              รายละเอียดการยืมเครื่องราชฯ
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-select :disable="disbleStatus || status == 'DONE'" v-model="roundNo" dense outlined lazy-rules
+                hide-bottom-space :label="`${'รอบการขอเครื่องราชฯ'}`" emit-value map-options option-label="name"
+                :options="selectRoundOption" option-value="id" :readonly="false" :borderless="false"
+                style="min-width: 150px" :rules="[
+                  (val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ',
+                ]" />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-select :disable="disbleStatus || status == 'DONE'" v-model="brand" dense outlined lazy-rules
+                hide-bottom-space :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name"
+                :options="DataStore.insigniaOp2" option-value="id" :readonly="false" :borderless="false"
+                style="min-width: 150px" :rules="[
+                  (val) => !!val || 'กรุณาเลือกเครื่องราชฯ',
+                ]" />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <datepicker menu-class-name="modalfix" v-model="receivedate" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input :disable="disbleStatus || status == 'DONE'" dense borderless outlined
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space :model-value="receivedate != null ? date2Thai(receivedate) : undefined
+                      " :label="`${'วันที่ยืม'}`" clearable @clear="clearDateExam">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" color="primary">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-12 col-sm-6">
+              <q-select hide-bottom-space :options="OrgOp" dense borderless option-label="name" option-value="id"
+                emit-value map-options outlined v-model="OrganazationId" :label="`เลือกหน่วยงาน`" />
+            </div>
+
+            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs" v-if="props.action === 'editData'">
+              <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+              <div class="col-12 text-weight-bold text-grey">
+                รายละเอียดการคืนเครื่องราชฯ
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                <datepicker menu-class-name="modalfix" v-model="receivedate" :locale="'th'" autoApply borderless
+                  :enableTimePicker="false" week-start="0">
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input :disable="disbleStatus || status == 'DONE'" dense borderless outlined
+                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space :model-value="receivedate != null ? date2Thai(receivedate) : undefined
+                        " :label="`${'วันที่คืน'}`" clearable @clear="clearDateExam">
+                      <template v-slot:prepend>
+                        <q-icon name="event" class="cursor-pointer" color="primary">
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-select hide-bottom-space :options="OrgOp" dense borderless option-label="name" option-value="id"
+                  emit-value map-options outlined v-model="OrganazationId" :label="`เลือกหน่วยงานที่ส่งคืน`" />
+              </div>
+
+              <div class="col-12">
+                <q-input type="textarea" hide-bottom-space dense borderless option-label="name" option-value="id"
+                  emit-value map-options outlined v-model="OrganazationId"
+                  :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`" />
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </q-form>
+
+      <q-separator />
+      <div class="q-pa-md">
+        <div class="row justify-end">
+          <q-btn label="บันทึก" @click="clickSave" color="public" />
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/07_insignia/components/5_Borrow/Main.vue

@@ -6,8 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useResultDataStore } from "@/modules/07_insignia/storeResult";
 
-import DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue";
+import DialogForm from "@/modules/07_insignia/components/5_Borrow/DialogForm.vue";
-import fileUploadview from "@/modules/07_insignia/components/3_result/fileUpload.vue";
 
 import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 import type { QTableProps, QInput } from "quasar";
@@ -29,6 +28,8 @@ const tab = ref<string>("");
 
 const selectRound = ref<string>();
 const selectRoundOption = ref<OptionData[]>([]);
+const selectRoundAllOption = ref<OptionData[]>([]);
+
 const modal = ref<boolean>(false);
 const action = ref<string>("");
 const personId = ref<string>();
@@ -45,7 +46,21 @@ const fecthRound = async () => {
     .get(config.API.noteround())
     .then((res) => {
       let data = res.data.result;
-      selectRoundOption.value = data;
+      selectRoundAllOption.value = [{
+        name: "ทั้งหมด",
+        id: "all",
+      }]
+      data.map((e: any) => {
+        selectRoundOption.value = [...selectRoundOption.value, {
+          name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
+          id: e.id,
+        }]
+
+        selectRoundAllOption.value = [...selectRoundAllOption.value, {
+          name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
+          id: e.id,
+        }]
+    });
       selectRound.value = data[0].id;
       // console.log(selectRound.value);
     })
@@ -101,11 +116,20 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  // {
+  //   name: "status",
+  //   align: "left",
+  //   label: "สถานะ",
+  //   field: "status",
+  //   sortable: true,
+  //   sort: (a: string, b: string) =>
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  // },
   {
-    name: "status",
+    name: "citizenId",
     align: "left",
-    label: "สถานะ",
+    label: "เลขบัตรประชาชน",
-    field: "status",
+    field: "citizenId",
     sortable: true,
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
@@ -245,7 +269,7 @@ const fecthlistInsignia = async () => {
         citizenId: e.citizenId,
         prefix: e.prefix,
         position: e.position,
-        status: DataStore.status(e.status),
+        // status: DataStore.status(e.status),
         name: e.fullName,
         type: e.requestInsignia,
         employeeType: DataStore.profileType(e.profileType),
@@ -336,48 +360,13 @@ const resetFilter = () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์/การจ่ายใบกำกับ
+    ยืม-คืนเครื่องราชฯ
   </div>
   <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
-    <div class="bg-grey-1 col-12 row items-center">
+    <q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
-      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
-      <div>
-        <selector
-          hide-bottom-space
-          borderless
-          dense
-          lazy-rules
-          emit-value
-          map-options
-          options-dense
-          option-label="name"
-          option-value="id"
-          v-model="selectRound"
-          :options="selectRoundOption"
-          use-input
-          input-debounce="0"
-          input-class="text-bold text-grey"
-          @update:emit-value="selectorRound"
-        >
-        </selector>
-      </div>
-    </div>
-    <q-separator />
-    <q-tabs
-      dense
-      v-model="tab"
-      align="left"
-      class="bg-white text-grey"
-      active-color="primary"
-      indicator-color="primary"
-    >
       <div v-for="item in DataStore.insigniaType">
         <q-tab :name="item.name" :label="item.label" />
       </div>
-      <!-- <q-tab name="hight" label="ขั้นสายสะพาน" />
-      <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
-      <q-tab name="medal" label="เหรียญตรา" /> -->
-
 
     </q-tabs>
 
@@ -388,113 +377,42 @@ const resetFilter = () => {
         <div v-if="tab == item.name" class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
             <div>
-              <q-select
+              <q-select v-model="selectRound" dense outlined lazy-rules hide-bottom-space
-                v-model="DataStore.insignia"
+                :label="`${'รอบการขอเครื่องราชฯ'}`" emit-value map-options option-label="name"
-                dense
+                :options="selectRoundAllOption" option-value="id" :readonly="false" :borderless="false"
-                outlined
+                style="min-width: 150px" @update:emit-value="selectorRound" />
-                lazy-rules
+            </div>
-                hide-bottom-space
+            <div>
-                :label="`${'เครื่องราชฯ'}`"
+              <q-select v-model="DataStore.insignia" dense outlined lazy-rules hide-bottom-space
-                emit-value
+                :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="DataStore.insigniaOp"
-                map-options
+                option-value="id" :readonly="false" :borderless="false" style="min-width: 150px"
-                option-label="name"
+                @update:model-value="selectorInsignia" />
-                :options="DataStore.insigniaOp"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="selectorInsignia"
-              />
             </div>
 
             <div>
-              <q-btn
+              <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
                 <q-tooltip>เพิ่ม</q-tooltip>
               </q-btn>
             </div>
-            <div>
-
-
-              <!-- <q-btn flat round color="light-blue" icon="upload">
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section
-                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
-                      >
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn> -->
-            </div>
-
-
             <q-space />
 
             <div class="items-center" style="display: flex">
               <!-- ค้นหาข้อความใน table -->
-              <q-input
+              <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-                standout
+                style="max-width: 200px" class="q-ml-sm">
-                dense
-                v-model="filter"
-                ref="filterRef"
-                outlined
-                debounce="300"
-                placeholder="ค้นหา"
-                style="max-width: 200px"
-                class="q-ml-sm"
-              >
                 <template v-slot:append>
                   <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
+                  <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
-              <q-select
+              <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-                v-model="visibleColumns"
+                :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-                :display-value="$q.lang.table.columns"
+                class="gt-xs q-ml-sm" />
-                multiple
-                outlined
-                dense
-                :options="columns"
-                options-dense
-                option-value="name"
-                map-options
-                emit-value
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
             </div>
           </div>
 
-          <d-table
+          <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-            :rows="rows"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-          >
             <template v-slot:body-cell="props">
               <q-td :props="props">
                 <div v-if="props.col.name == 'no'">
@@ -502,17 +420,9 @@ const resetFilter = () => {
                 </div>
 
                 <div v-else-if="props.col.name == 'action'">
-                  <q-btn
+                  <q-td>
-                    dense
+                    <q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
-                    size="12px"
+                  </q-td>
-                    flat
-                    round
-                    color="primary"
-                    @click.stop="editData(props.row)"
-                    icon="mdi-pencil-outline"
-                  >
-                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
                 </div>
 
                 <div v-else>
@@ -525,108 +435,34 @@ const resetFilter = () => {
 
         <div v-else-if="tab == item.name" class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <selector
+            <selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
-              outlined
+              emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
-              dense
+              input-debounce="0" style="min-width: 150px" />
-              lazy-rules
-              v-model="DataStore.insignia"
-              hide-bottom-space
-              :label="`${'เครื่องราชฯ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="DataStore.insigniaOp"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              style="min-width: 150px"
-            />
             <div>
-              <q-btn
+              <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
                 <q-tooltip>เพิ่ม</q-tooltip>
               </q-btn>
             </div>
-            <div>
-              <q-btn flat round color="light-blue" icon="upload">
-                <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section
-                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
-                      >
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
 
             <q-space />
 
             <div class="items-center" style="display: flex">
               <!-- ค้นหาข้อความใน table -->
-              <q-input
+              <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-                standout
+                style="max-width: 200px" class="q-ml-sm">
-                dense
-                v-model="filter"
-                ref="filterRef"
-                outlined
-                debounce="300"
-                placeholder="ค้นหา"
-                style="max-width: 200px"
-                class="q-ml-sm"
-              >
                 <template v-slot:append>
                   <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
+                  <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
-              <q-select
+              <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-                v-model="visibleColumns"
+                :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-                :display-value="$q.lang.table.columns"
+                class="gt-xs q-ml-sm" />
-                multiple
-                outlined
-                dense
-                :options="columns"
-                options-dense
-                option-value="name"
-                map-options
-                emit-value
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
             </div>
           </div>
 
-          <d-table
+          <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-            :rows="rows"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-          >
             <template v-slot:body-cell="props">
               <q-td :props="props">
                 <div v-if="props.col.name == 'no'">
@@ -634,17 +470,9 @@ const resetFilter = () => {
                 </div>
 
                 <div v-else-if="props.col.name == 'action'">
-                  <q-btn
+                  <q-td>
-                    dense
+                    <q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
-                    size="12px"
+                  </q-td>
-                    flat
-                    round
-                    color="primary"
-                    @click="editData(props.row)"
-                    icon="mdi-pencil-outline"
-                  >
-                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
                 </div>
 
                 <div v-else>
@@ -657,107 +485,33 @@ const resetFilter = () => {
 
         <div v-else-if="tab == item.name" class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <selector
+            <selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
-              outlined
+              emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
-              dense
+              input-debounce="0" style="min-width: 150px" />
-              lazy-rules
-              v-model="DataStore.insignia"
-              hide-bottom-space
-              :label="`${'เครื่องราชฯ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="DataStore.insigniaOp"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              style="min-width: 150px"
-            />
             <div>
-              <q-btn
+              <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
                 <q-tooltip>เพิ่ม</q-tooltip>
               </q-btn>
             </div>
-            <div>
-              <q-btn flat round color="light-blue" icon="upload">
-                <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section
-                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
-                      >
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
             <q-space />
 
             <div class="items-center" style="display: flex">
               <!-- ค้นหาข้อความใน table -->
-              <q-input
+              <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-                standout
+                style="max-width: 200px" class="q-ml-sm">
-                dense
-                v-model="filter"
-                ref="filterRef"
-                outlined
-                debounce="300"
-                placeholder="ค้นหา"
-                style="max-width: 200px"
-                class="q-ml-sm"
-              >
                 <template v-slot:append>
                   <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
+                  <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
-              <q-select
+              <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-                v-model="visibleColumns"
+                :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-                :display-value="$q.lang.table.columns"
+                class="gt-xs q-ml-sm" />
-                multiple
-                outlined
-                dense
-                :options="columns"
-                options-dense
-                option-value="name"
-                map-options
-                emit-value
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
             </div>
           </div>
 
-          <d-table
+          <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-            :rows="rows"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-          >
             <template v-slot:body-cell="props">
               <q-td :props="props">
                 <div v-if="props.col.name == 'no'">
@@ -765,17 +519,9 @@ const resetFilter = () => {
                 </div>
 
                 <div v-else-if="props.col.name == 'action'">
-                  <q-btn
+                  <q-td>
-                    dense
+                    <q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
-                    size="12px"
+                  </q-td>
-                    flat
-                    round
-                    color="primary"
-                    @click="editData(props.row)"
-                    icon="mdi-pencil-outline"
-                  >
-                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
                 </div>
 
                 <div v-else>
@@ -789,15 +535,8 @@ const resetFilter = () => {
 
     </div>
 
-    <DialogForm
+    <DialogForm :modal="modal" :save="save" :close="close" :roundId="selectRound" :action="action" :personId="personId"
-      :modal="modal"
+      :profileType="profileType" :selectRoundOption="selectRoundOption" />
-      :save="save"
-      :close="close"
-      :roundId="selectRound"
-      :action="action"
-      :personId="personId"
-      :profileType="profileType"
-    />
   </q-card>
 </template>
 <style lang="scss" scoped>

src/modules/07_insignia/views/ResultPage.vue

@@ -46,7 +46,7 @@ const fecthRound = async () => {
     .then((res) => {
       let data = res.data.result;
       selectRoundOption.value = data.map((e: any) => ({
-        name: "รอบการเสนอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
+        name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
         id: e.id,
       }));
       selectRound.value = data[0].id;