ปรับ Code เคื่องราช

2023-08-29 10:59:58 +07:00 · 2023-08-29 10:59:58 +07:00 · 240862be2c
commit 240862be2c
parent 51d072ccc0
13 changed files with 548 additions and 885 deletions
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { DataOption } from "@/modules/04_registry/components/profileType";

-const DataStore = useAllocateDataStore();
 const $q = useQuasar();
 const myForm = ref<QForm>();
 const mixin = useCounterMixin();
@ -32,17 +30,17 @@ const returndate = ref<Date | null>();
 const reason = ref<string>("");
 const listPerson = ref<any>([]);
 const OrgList = ref<DataOption[]>([]);
-const insigniaNoteProfileId = ref<string>("")
+const insigniaNoteProfileId = ref<string>("");

 const clearData = () => {
-  receivedate.value = null
-  returndate.value = null
-  OrganazationId.value = ""
-  roundNo.value = ""
-  cardid.value = ""
-  fullName.value = ""
-  brand.value = ""
-  reason.value = ""
+  receivedate.value = null;
+  returndate.value = null;
+  OrganazationId.value = "";
+  roundNo.value = "";
+  cardid.value = "";
+  fullName.value = "";
+  brand.value = "";
+  reason.value = "";
 };

 const props = defineProps({
@ -69,21 +67,21 @@ const props = defineProps({
    type: String,
  },
  selectRoundOption: {
-    type: Array
+    type: Array,
  },
  profileId: {
    type: String,
-    default: ""
-  }
+    default: "",
+  },
 });

 watch(props, () => {
-  if (props.modal == true && props.roundId != 'all') {
-    roundNo.value = props.roundId
-    fecthlistInsignia()
-    fetchOrgList()
-    if (props.action == 'editData') {
-      fetchData()
+  if (props.modal == true && props.roundId != "all") {
+    roundNo.value = props.roundId;
+    fecthlistInsignia();
+    fetchOrgList();
+    if (props.action == "editData") {
+      fetchData();
    }
  }
 });
@ -98,10 +96,9 @@ const fecthlistInsignia = async () => {
  await http
    .post(config.API.noteSearch(), data)
    .then((res) => {
-      listPerson.value = res.data.result
+      listPerson.value = res.data.result;
    })
    .catch((err) => {
-      // console.log(err);
      messageError($q, err);
    })
    .finally(() => {
@ -116,17 +113,23 @@ const fetchOrgList = async () => {
    .then(async (response: any) => {
      const orgArr = response.data.result.map((e: any) => ({
        id: e.organizationId,
-        name: e.organizationName
-      }))
+        name: e.organizationName,
+      }));

-      if (props.action == 'editData') {
-        OrgList.value = [{id: "00000000-0000-0000-0000-000000000000", name: 'สำนักนายกรัฐมนตรี'},...orgArr]
+      if (props.action == "editData") {
+        OrgList.value = [
+          {
+            id: "00000000-0000-0000-0000-000000000000",
+            name: "สำนักนายกรัฐมนตรี",
+          },
+          ...orgArr,
+        ];
      } else {
-        OrgList.value = orgArr
+        OrgList.value = orgArr;
      }
    })
    .catch((err) => {
-      messageError($q, err)
+      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
@ -138,10 +141,10 @@ const fetchData = async () => {
  await http
    .get(config.API.insigniaManageBorrowById(props.profileId))
    .then(async (response: any) => {
-      console.log(response.data.result)
+      console.log(response.data.result);
    })
    .catch((err) => {
-      messageError($q, err)
+      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
@ -152,12 +155,12 @@ const clickSave = async () => {
  await myForm.value!.validate().then((result: boolean) => {
    if (result) {
      dialogConfirm($q, async () => {
-        if (props.action == 'addData') {
+        if (props.action == "addData") {
          await http
            .post(config.API.insigniaManageBorrow(), {
              borrowDate: receivedate.value,
              borrowOrganizationId: OrganazationId.value,
-              insigniaNoteProfileId: insigniaNoteProfileId.value
+              insigniaNoteProfileId: insigniaNoteProfileId.value,
            })
            .then(() => {
              success($q, "บันทึกข้อมูลสำเร็จ");
@ -166,7 +169,7 @@ const clickSave = async () => {
              messageError($q, err);
            })
            .finally(() => {
-              clearData()
+              clearData();
              props.closeAndFecth();
            });
        } else {
@ -174,7 +177,7 @@ const clickSave = async () => {
            .put(config.API.insigniaManageBorrowReturn(props.profileId), {
              returnDate: returndate.value,
              returnOrganizationId: OrganazationId.value,
-              returnReason: reason.value
+              returnReason: reason.value,
            })
            .then(() => {
              success($q, "บันทึกข้อมูลสำเร็จ");
@ -183,7 +186,7 @@ const clickSave = async () => {
              messageError($q, err);
            })
            .finally(() => {
-              clearData()
+              clearData();
              props.closeAndFecth();
            });
        }
@ -194,21 +197,23 @@ const clickSave = async () => {

 const searchcardid = async () => {
  if (cardid.value.length === 13) {
-    const node = await listPerson.value.find((e: any) => e.citizenId === cardid.value);
+    const node = await listPerson.value.find(
+      (e: any) => e.citizenId === cardid.value
+    );

    if (node) {
-      console.log("node", node)
-      fullName.value = `${node.prefix} ${node.fullName}`
-      brand.value = node.requestInsignia
-      insigniaNoteProfileId.value = node.id
+      console.log("node", node);
+      fullName.value = `${node.prefix} ${node.fullName}`;
+      brand.value = node.requestInsignia;
+      insigniaNoteProfileId.value = node.id;
    } else notifyError($q, "ไม่พบข้อมูลการได้รับในรอบนี้");
  }
 };

 const closeDialog = () => {
-  clearData()
-  props.close()
-}
+  clearData();
+  props.close();
+};
 </script>

 <template>
@ -216,39 +221,81 @@ const closeDialog = () => {
    <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="closeDialog"
-          style="color: #ff8080; background-color: #ffdede" />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeDialog"
+          style="color: #ff8080; background-color: #ffdede"
+          ><q-tooltip>ปิด</q-tooltip></q-btn
+        >
      </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 v-if="props.action === 'addData'" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div
+              v-if="props.action === 'addData'"
+              class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+            >
              <div class="col-6">
-                <q-select 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 || 'กรุณาเลือกรอบการขอเครื่องราชฯ',
-                  ]" @update:model-value="fecthlistInsignia()" />
-              </div>
-              <div class="col-12 text-weight-bold text-grey">
-                ข้อมูลผู้ยืม
+                <q-select
+                  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 || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
+                  @update:model-value="fecthlistInsignia()"
+                />
              </div>
+              <div class="col-12 text-weight-bold text-grey">ข้อมูลผู้ยืม</div>
              <div class="col-xs-12 col-sm-6">
-                <q-input :disable="roundNo == ''" hide-bottom-space outlined class="inputgreen" v-model="cardid" dense
-                  lazy-rules :rules="[
+                <q-input
+                  :disable="roundNo == ''"
+                  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 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+                  ]"
+                  label="เลขบัตรประจำตัวประชาชน"
+                  maxlength="13"
+                  mask="#############"
+                  @keyup="searchcardid"
+                />
              </div>
              <div class="col-xs-6 col-sm-6">
-                <q-input disable hide-bottom-space outlined dense lazy-rules class="inputgreen" borderless
-                  v-model="fullName" :label="`${'ชื่อ-นามสกุล'}`" />
+                <q-input
+                  disable
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  class="inputgreen"
+                  borderless
+                  v-model="fullName"
+                  :label="`${'ชื่อ-นามสกุล'}`"
+                />
              </div>

              <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
@ -256,12 +303,26 @@ const closeDialog = () => {
                รายละเอียดการยืมเครื่องราชฯ
              </div>
              <div class="col-xs-12 col-sm-6">
-                <q-input v-model="brand" disable dense outlined lazy-rules hide-bottom-space
-                  :label="`${'เครื่องราชฯ'}`" />
+                <q-input
+                  v-model="brand"
+                  disable
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  :label="`${'เครื่องราชฯ'}`"
+                />
              </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">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="receivedate"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
@ -269,11 +330,24 @@ const closeDialog = () => {
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
-                    <q-input dense borderless outlined :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
-                      :model-value="receivedate != null ? date2Thai(receivedate) : undefined
-                        " :label="`${'วันที่ยืม'}`" clearable>
+                    <q-input
+                      dense
+                      borderless
+                      outlined
+                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                      hide-bottom-space
+                      :model-value="
+                        receivedate != null ? date2Thai(receivedate) : undefined
+                      "
+                      :label="`${'วันที่ยืม'}`"
+                      clearable
+                    >
                      <template v-slot:prepend>
-                        <q-icon name="event" class="cursor-pointer" color="primary">
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
                        </q-icon>
                      </template>
                    </q-input>
@ -282,20 +356,40 @@ const closeDialog = () => {
              </div>

              <div class="col-xs-12 col-sm-6">
-                <q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
-                  emit-value map-options outlined v-model="OrganazationId" :label="`เลือกหน่วยงาน`" />
+                <q-select
+                  hide-bottom-space
+                  :options="OrgList"
+                  dense
+                  borderless
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  outlined
+                  v-model="OrganazationId"
+                  :label="`เลือกหน่วยงาน`"
+                />
              </div>
-
            </div>

-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs" v-if="props.action === 'editData'">
+            <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="returndate" :locale="'th'" autoApply borderless
-                  :enableTimePicker="false" week-start="0">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="returndate"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
@ -303,11 +397,24 @@ const closeDialog = () => {
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
-                    <q-input dense borderless outlined :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
-                      :model-value="returndate != null ? date2Thai(returndate) : undefined
-                        " :label="`${'วันที่คืน'}`" clearable>
+                    <q-input
+                      dense
+                      borderless
+                      outlined
+                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                      hide-bottom-space
+                      :model-value="
+                        returndate != null ? date2Thai(returndate) : undefined
+                      "
+                      :label="`${'วันที่คืน'}`"
+                      clearable
+                    >
                      <template v-slot:prepend>
-                        <q-icon name="event" class="cursor-pointer" color="primary">
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
                        </q-icon>
                      </template>
                    </q-input>
@ -316,16 +423,37 @@ const closeDialog = () => {
              </div>

              <div class="col-xs-12 col-sm-6">
-                <q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
-                  emit-value map-options outlined v-model="OrganazationId" :label="`เลือกหน่วยงานที่ส่งคืน`" />
+                <q-select
+                  hide-bottom-space
+                  :options="OrgList"
+                  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="reason" :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`" />
+                <q-input
+                  type="textarea"
+                  hide-bottom-space
+                  dense
+                  borderless
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  outlined
+                  v-model="reason"
+                  :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`"
+                />
              </div>
            </div>
-
          </div>
        </div>
      </q-form>
@ -333,9 +461,11 @@ const closeDialog = () => {
      <q-separator />
      <div class="q-pa-md">
        <div class="row justify-end">
-          <q-btn label="บันทึก" @click="clickSave" color="public" />
+          <q-btn label="บันทึก" @click="clickSave" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
        </div>
      </div>
    </q-card>
  </q-dialog>
-</template>
+</template>
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@ -11,17 +11,9 @@ import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main"
 import type { QTableProps, QInput } from "quasar";
 import { useQuasar } from "quasar";

-// const router = useRouter();
 const DataStore = useBrrowDataStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = mixin;
+const { showLoader, hideLoader, messageError } = mixin;
 const $q = useQuasar();
 const tab = ref<string>("");

@ -31,10 +23,8 @@ const selectRoundAllOption = ref<OptionDataYear[]>([]);

 const modal = ref<boolean>(false);
 const action = ref<string>("");
-const personId = ref<string>();
 const profileId = ref<string>("");
 const roundYear = ref<any>();
-const insigniaListAll = ref<any>([]);
 const insigniaList = ref<any>([]);

 onMounted(async () => {
@ -46,8 +36,6 @@ const fecthRound = async () => {
    .get(config.API.noteround())
    .then((res) => {
      let data = res.data.result;
-      console.log(data);
-
      selectRoundAllOption.value = [
        {
          name: "ทั้งหมด",
@ -73,7 +61,7 @@ const fecthRound = async () => {
      roundYear.value = data[0].year;
    })
    .catch((err) => {
-      console.log(err);
+      messageError($q, err);
    });
 };

@ -81,7 +69,6 @@ const fecthInsignia = async () => {
  await http
    .get(config.API.insignia)
    .then((res) => {
-      // console.log(res);
      let data = res.data.result;
      DataStore.fetchDataInsignia(data);
    })
@ -98,7 +85,6 @@ const fecthInsignia = async () => {
 const fecthInsigniaType = async () => {
  await http(config.API.insigniaType)
    .then(async (res) => {
-      // console.log(res);
      let data = res.data.result;
      DataStore.fetchDatainsigniaType(data);
      tab.value = DataStore.insigniaType[0].name;
@ -316,7 +302,6 @@ const fecthlistInsignia = async () => {
      rows.value = DataStore.rows;
    })
    .catch((err) => {
-      console.log(err);
      messageError($q, err);
    })
    .finally(() => {
@ -514,11 +499,7 @@ const resetFilter = () => {
      :modal="modal"
      :close="close"
      :close-and-fecth="closeAndFecth"
-      :round-id="
-        selectRound == '00000000-0000-0000-0000-000000000000'
-          ? 'all'
-          : selectRound
-      "
+      :round-id="selectRound == '0' ? 'all' : selectRound"
      :action="action"
      :profile-id="profileId"
      :select-round-option="selectRoundOption"