ปรับ fe sprint2

src/modules/02_organizational/components/Tree/OrganizationDialog.vue

@@ -54,7 +54,7 @@
                 v-model="item.organizationOrganizationId"
                 :options="organizationOri"
                 label="หน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-6 col-md-6"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -75,7 +75,7 @@
                 v-model="item.organizationAgencyCode"
                 :options="organizationAgencyCode"
                 label="รหัสหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -98,7 +98,7 @@
                 v-model="item.organizationGovernmentCode"
                 :options="item.organizationGovernmentCodeOption"
                 label="รหัสส่วนราชการ"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -121,51 +121,36 @@
                 outlined
                 :modelValue="item.organizationShortName.toString() ?? ''"
                 label="ชื่อย่อหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
               />
-
-              <selector
-                hide-bottom-space
+              <q-input
                 dense
                 outlined
-                v-model="item.organizationAgencyId"
-                :options="organizationAgency"
-                label="หน่วยงานต้นสังกัด"
-                class="col-xs-12 col-sm-4 col-md-3"
-                use-input
-                input-debounce="0"
-                @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '1')
-                "
-                option-label="name"
-                option-value="id"
-                map-options
-                emit-value
-                clearable
+                v-model="item.agency"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่หน่วยงาน"
               />
-
-              <selector
-                hide-bottom-space
+              <q-input
                 dense
                 outlined
-                v-model="item.organizationGovernmentAgencyId"
-                :options="organizationGovernmentAgency"
-                label="ส่วนราชการต้นสังกัด"
-                class="col-xs-12 col-sm-4 col-md-3"
-                use-input
-                input-debounce="0"
-                @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '1')
-                "
-                option-label="name"
-                option-value="id"
-                map-options
-                emit-value
-                clearable
+                v-model="item.government"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่ส่วนราชการ"
+              />
+              <q-input
+                dense
+                outlined
+                v-model="item.department"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่ฝ่าย/ส่วน"
+              />
+              <q-input
+                dense
+                outlined
+                v-model="item.pile"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่กอง"
               />
-
               <selector
                 hide-bottom-space
                 dense
@@ -173,7 +158,7 @@
                 v-model="item.organizationTypeId"
                 :options="organizationType"
                 label="ประเภทหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -193,7 +178,7 @@
                 v-model="item.organizationLevelId"
                 :options="organizationLevel"
                 label="ระดับหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -207,6 +192,54 @@
                 clearable
                 :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
               />
+              <selector
+                hide-bottom-space
+                dense
+                outlined
+                v-model="item.organizationAgencyId"
+                :options="organizationAgency"
+                label="หน่วยงานต้นสังกัด"
+                class="col-xs-12 col-sm-4 col-md-4"
+                use-input
+                input-debounce="0"
+                @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
+                clearable
+              />
+              <selector
+                hide-bottom-space
+                dense
+                outlined
+                v-model="item.organizationGovernmentAgencyId"
+                :options="organizationGovernmentAgency"
+                label="ส่วนราชการต้นสังกัด"
+                class="col-xs-12 col-sm-6 col-md-6"
+                use-input
+                input-debounce="0"
+                @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
+                clearable
+              />
+              <q-input
+                dense
+                outlined
+                v-model="item.organizationOrder"
+                class="col-xs-12 col-sm-2 col-md-2"
+                type="number"
+                label="ลำดับผังโครงสร้าง"
+              />
               <selector
                 hide-bottom-space
                 dense
@@ -214,7 +247,7 @@
                 v-model="item.organizationExternalPhoneId"
                 :options="organizationTelExternal"
                 label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -234,7 +267,7 @@
                 v-model="item.organizationInternalPhoneId"
                 :options="organizationTelInternal"
                 label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -254,7 +287,7 @@
                 v-model="item.organizationFaxId"
                 :options="organizationFax"
                 label="หมายเลขโทรสาร"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -267,43 +300,6 @@
                 emit-value
                 clearable
               />
-              <q-input
-                dense
-                outlined
-                v-model="item.agency"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="หน่วยงาน"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.government"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="ส่วนราชการ"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.department"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="ฝ่าย/ส่วน"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.pile"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="กอง"
-              />
-
-              <q-input
-                dense
-                outlined
-                :modelValue="Number(item.organizationOrder) ?? 0"
-                class="col-xs-12 col-sm-4 col-md-3"
-                type="number"
-                label="ลำดับผังโครงสร้าง"
-              />
               <div class="col-xs-12 col-sm-12 col-md-12">
                 <q-input
                   :class="getClass(true)"
@@ -317,7 +313,6 @@
                   :label="`${'หน้าที่รับผิดชอบ'}`"
                   type="textarea"
                 />
-                <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
               </div>
             </div>
           </q-card>
@@ -339,8 +334,6 @@ import type {
 } from "../../interface/index/Main";
 import { log } from "console";
 import { useDataStore } from "@/stores/data";
-
-import { useCounterMixin } from "@/stores/mixin";
 // import { organizationSet } from "../interface/index/Main";
 
 const props = defineProps({
@@ -350,8 +343,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:organizprops", "update:formprops"]);
 
-const mixin = useCounterMixin();
-const {showLoader, hideLoader } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
@@ -390,7 +381,7 @@ const organizationAgencyCode = ref<GovermentOption[]>([]);
 const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchOrganizationOri();
   await fetchOrganizationAgencyCode();
   await fetchOrganizationGovernmentCode();
@@ -409,7 +400,7 @@ onMounted(async () => {
  *  หน่วยงาน
  */
 const fetchOrganizationOri = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -425,14 +416,14 @@ const fetchOrganizationOri = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสหน่วยงาน
  */
 const fetchOrganizationAgencyCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationCode)
     .then((res) => {
@@ -454,14 +445,14 @@ const fetchOrganizationAgencyCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสส่วนราชการ
  */
 const fetchOrganizationGovernmentCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -483,14 +474,14 @@ const fetchOrganizationGovernmentCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 // /**
 //  *  ชื่อย่อหน่วยงาน
 //  */
 // const fetchOrganizationShortName = async () => {
-//   showLoader();
+//   loaderPage(true);
 //   await http
 //     .get(config.API.organizationShortName)
 //     .then((res) => {
@@ -512,16 +503,16 @@ const fetchOrganizationGovernmentCode = async () => {
 //       console.log(e);
 //     })
 //     .finally(() => {
-//       hideLoader();
+//       loaderPage(false);
 //     });
 // };
 /**
  *  หน่วยงานต้นสังกัด
  */
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
-    .get(config.API.listOrganizationAgency("หน่วยงาน"))
+    .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -538,16 +529,16 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  ส่วนราชการต้นสังกัด
  */
 const fetchOrganizationGovernmentAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
-    .get(config.API.listOrganizationAgency("ส่วนราชการ"))
+    .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -564,14 +555,14 @@ const fetchOrganizationGovernmentAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *   ประเภทหน่วยงาน
  */
 const fetchOrganizationType = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationType)
     .then((res) => {
@@ -587,14 +578,14 @@ const fetchOrganizationType = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  ระดับหน่วยงาน
  */
 const fetchOrganizationLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationLevel)
     .then((res) => {
@@ -610,14 +601,14 @@ const fetchOrganizationLevel = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายใน
  */
 const fetchOrganizationTelInternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelInternal)
     .then((res) => {
@@ -633,14 +624,14 @@ const fetchOrganizationTelInternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายนอก
  */
 const fetchOrganizationTelExternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelExternal)
     .then((res) => {
@@ -656,14 +647,14 @@ const fetchOrganizationTelExternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์โทรสาร
  */
 const fetchOrganizationFax = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationFax)
     .then((res) => {
@@ -679,7 +670,7 @@ const fetchOrganizationFax = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -771,6 +762,7 @@ const addOrganizationItem = async () => {
         organizationGovernmentCodeOption: organizationGovernmentCode.value,
         organizationGovernmentCodeOptionFilter:
           organizationGovernmentCodeFilter.value,
+        isActive: true,
       });
       emit("update:organizprops", organizations.value);
       //   console.log(organizations);
@@ -780,7 +772,7 @@ const addOrganizationItem = async () => {
 
 const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationGovernmentCode(val))
     .then((res) => {
@@ -800,14 +792,14 @@ const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };
 
 const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationAgencyCode(val))
     .then((res) => {
@@ -827,7 +819,7 @@ const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };