วินัยรองรับลูกจ้างประจำ กทม.

src/modules/04_registryPerson/components/DialogHistory.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter } from "vue-router";
+import { useRouter,useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -22,6 +22,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 //use
 const myForm = ref<QForm>();
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
@@ -29,7 +30,7 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true }); //แสดง popup ประวัติถือครองตำแหน่ง
 
 //ตัวแปร
-const employeeClass = ref<string>(""); //ประเภทข้า่รายการ
+const employeeClass = ref<string>(route.name == "registryNew" ? 'officer':'perm'); //ประเภทข้า่รายการ
 const typeKeyword = ref<string>("");
 const Keyword = ref<string>("");
 const positionKeyword = ref<string>("");
@@ -252,23 +253,23 @@ function closeDialog() {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 850px; max-width: 80vw">
+    <q-card style="width: 60vw; max-width: 80vw">
       <DialogHeader :tittle="'ประวัติถือครองตำแหน่ง'" :close="closeDialog" />
 
       <q-separator />
 
       <q-card-section class="q-pa-sm">
         <q-form ref="myForm">
-          <div class="col-12 bg-grey-2 q-pa-sm">
-            <div class="col-12 row q-pb-sm q-col-gutter-sm items-center"></div>
-            <q-toolbar>
-              <div class="row q-col-gutter-sm">
+          <div class="bg-grey-2 q-pa-sm">
+            <div class="row q-col-gutter-sm no-warp full-width">
+              <div class="col-3">
                 <q-select
                   hide-bottom-space
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
                   outlined
                   dense
                   lazy-rules
+                  bg-color="white"
                   v-model="employeeClass"
                   emit-value
                   map-options
@@ -279,15 +280,17 @@ function closeDialog() {
                   use-input
                   input-debounce="0"
                   @update:model-value="changeEmployeeClass"
-                  style="width: 250px"
                 />
+              </div>
 
+              <div class="col-3">
                 <q-select
                   hide-bottom-space
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
                   outlined
                   dense
                   lazy-rules
+                  bg-color="white"
                   v-model="typeKeyword"
                   emit-value
                   map-options
@@ -298,19 +301,61 @@ function closeDialog() {
                   use-input
                   input-debounce="0"
                   @update:model-value="selectTypeKeyword(typeKeyword)"
+                />
+              </div>
+              <div class="col-3" v-if="typeKeyword === 'no'">
+                <q-input
+                  outlined
+                  dense
+                  bg-color="white"
+                  v-model="Keyword"
+                  placeholder="ตำแหน่งเลขที่"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอก ตำแหน่งเลขที่'}`]"
+                  hide-bottom-space
                   style="width: 250px"
                 />
               </div>
 
-              <q-space />
-              <q-btn
-                outline
-                color="primary"
-                label="ค้นหา"
-                @click="clickSearch(employeeClass)"
-                icon="mdi-magnify"
-              />
-            </q-toolbar>
+              <div class="col-3" v-if="typeKeyword === 'position'">
+                <q-select
+                  hide-bottom-space
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
+                  outlined
+                  dense
+                  v-model="positionKeyword"
+                  emit-value
+                  bg-color="white"
+                  map-options
+                  :options="options"
+                  option-label="name"
+                  option-value="id"
+                  :label="`${' เลือกตำแหน่ง'}`"
+                  use-input
+                  input-debounce="0"
+                  @filter="filterFn"
+                  style="width: 250px"
+                  behavior="menu"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template></q-select
+                >
+              </div>
+              <div :class="typeKeyword ? 'col-3':'col-3 offset-3'">
+                <q-btn
+                  class="on-right bg-white full-width"
+                  outline
+                  color="primary"
+                  label="ค้นหา"
+                  @click="clickSearch(employeeClass)"
+                  icon="mdi-magnify"
+                />
+              </div>
+            </div>
           </div>
 
           <div class="col-12 q-mt-sm">