บรรจุ แต่งตั้ง ===> ปรับ ui

src/modules/05_placement/components/AppointEmployee/DialogOrders.vue

@@ -177,7 +177,6 @@ function filterSelectOrder() {
  */
 function filterSelector(val: string, update: Function) {
   update(() => {
-    commandType.value = val ? "" : commandType.value;
     commandOp.value = commandMainOp.value.filter(
       (v: ListCommand) => v.name.indexOf(val) > -1
     );
@@ -225,7 +224,9 @@ watch(
                 emit-value
                 map-options
                 use-input
-                style="width: 380px; max-width: auto"
+                hide-selected
+                fill-input
+                style="width: 350px"
                 @update:model-value="filterSelectOrder"
                 @filter="(inputValue:string,
                   doneFn:Function) => filterSelector(inputValue, doneFn
@@ -251,13 +252,7 @@ watch(
                   placeholder="ค้นหา"
                 >
                   <template v-slot:append>
-                    <q-icon v-if="filterKeyword2 == ''" name="search" />
+                    <q-icon name="search" />
-                    <q-icon
-                      v-if="filterKeyword2 !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="Reset"
-                    />
                   </template>
                 </q-input>
                 <q-select

src/modules/05_placement/components/AppointMent/DialogOrders.vue

@@ -196,7 +196,6 @@ function filterSelectOrder() {
  */
 function filterSelector(val: string, update: Function) {
   update(() => {
-    commandType.value = val ? "" : commandType.value;
     commandOp.value = commandMainOp.value.filter(
       (v: ListCommand) => v.name.indexOf(val) > -1
     );
@@ -246,7 +245,8 @@ watch(
                 emit-value
                 map-options
                 use-input
-                style="width: 350px; max-width: auto"
+                hide-selected
+                fill-input
                 @update:model-value="filterSelectOrder"
                 @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn
@@ -272,13 +272,7 @@ watch(
                   placeholder="ค้นหา"
                 >
                   <template v-slot:append>
-                    <q-icon v-if="filterKeyword2 == ''" name="search" />
+                    <q-icon name="search" />
-                    <q-icon
-                      v-if="filterKeyword2 !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="Reset"
-                    />
                   </template>
                 </q-input>
                 <q-select
@@ -292,7 +286,6 @@ watch(
                   map-options
                   :options="columns2"
                   option-value="name"
-                  
                   style="min-width: 140px"
                 />
               </div>

src/modules/05_placement/components/Help-Government/DialogOrders.vue

@@ -1,33 +1,25 @@
 <script setup lang="ts">
-import { ref, watch,computed } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
 
-/**
+/** importType*/
- * importType
- */
 import type { QTableProps } from "quasar";
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
-/**
+/** importComponents*/
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
 
-/**
+/** use*/
- * use
- */
 const $q = useQuasar();
 const { statusText } = useTransferDataStore();
 const { dialogConfirm, findOrgNameOld, findPosMasterNoOld, date2Thai } =
   useCounterMixin();
 
-/**
+/** props*/
- * props
- */
 const props = defineProps({
   Modal: Boolean,
   closeModal: Function,
@@ -37,9 +29,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
 
-/**
+/** Table*/
- * Table
- */
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -177,7 +167,8 @@ const visibleColumns2 = ref<string[]>([
   "status",
 ]);
 const selected = ref<officerType[]>([]); //รายการที่เลือก
-  const dataMapToSend = computed(() => {
+
+const dataMapToSend = computed(() => {
   return selected.value.map((i: any) => ({
     id: i.id,
     profileId: i.profileId,
@@ -211,11 +202,6 @@ function updateInput(value: string) {
   emit("update:filterKeyword2", value);
 }
 
-/** รีเซ็ตค่าในช่องค้นหา*/
-function Reset() {
-  emit("update:filterKeyword2", "");
-}
-
 /**
  * เมื่อ props.modal เป็น true
  * กำหนดให้  selected เป็นค่าว่าง
@@ -229,104 +215,100 @@ watch(
   }
 );
 </script>
+
 <template>
   <q-dialog v-model="props.Modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader :tittle="'ส่งไปออกคำสั่งช่วยราชการ'" :close="closeModal" />
       <q-separator />
       <q-card-section>
-        <div class="row justify-end">
+        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-5">
+          <div class="row col-12">
-            <q-toolbar style="padding: 0">
+            <q-space />
-              <q-input
+            <q-input
-                borderless
+              borderless
-                outlined
+              outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="id"
-          class="custom-header-table"
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
               dense
-              v-model="scope.selected"
+              debounce="300"
+              :model-value="filterKeyword2"
+              @update:model-value="updateInput"
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append> <q-icon name="search" /> </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns2"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns2"
+              option-value="name"
+              style="min-width: 140px"
+              class="gt-xs q-ml-sm"
             />
-          </template>
+          </div>
-          <template v-slot:body="props">
+
-            <q-tr :props="props" class="cursor-pointer">
+          <div class="col-12">
-              <q-td>
+            <d-table
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="id"
+              class="custom-header-table"
+              :visible-columns="visibleColumns2"
+              selection="multiple"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
                 <q-checkbox
                   keep-color
                   color="primary"
                   dense
-                  v-model="props.selected"
+                  v-model="scope.selected"
                 />
-              </q-td>
+              </template>
-              <q-td v-for="col in props.cols" :key="col.id">
+              <template v-slot:body="props">
-                <div v-if="col.name === 'no'">
+                <q-tr :props="props" class="cursor-pointer">
-                  {{ props.rowIndex + 1 }}
+                  <q-td>
-                </div>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td v-for="col in props.cols" :key="col.id">
+                    <div v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
 
-                <div
+                    <div
-                  v-else
+                      v-else
-                  :class="
+                      :class="
-                    col.name === 'organizationPositionOld' ||
+                        col.name === 'organizationPositionOld' ||
-                    col.name === 'organization'
+                        col.name === 'organization'
-                      ? 'table_ellipsis'
+                          ? 'table_ellipsis'
-                      : ''
+                          : ''
-                  "
+                      "
-                >
+                    >
-                  {{
+                      {{
-                    col.value == null ? "" : col.value == "" ? "-" : col.value
+                        col.value == null
-                  }}
+                          ? ""
-                </div>
+                          : col.value == ""
-              </q-td>
+                          ? "-"
-            </q-tr>
+                          : col.value
-          </template>
+                      }}
-        </d-table>
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">

src/modules/05_placement/components/Other/DialogOrders.vue

@@ -168,7 +168,6 @@ function clickAddlist() {
  */
 function filterSelector(val: string, update: Function) {
   update(() => {
-    commandType.value = val ? "" : commandType.value;
     commandOp.value = commandMainOp.value.filter(
       (v: ListCommand) => v.name.indexOf(val) > -1
     );
@@ -218,7 +217,9 @@ watch(
                 emit-value
                 map-options
                 use-input
-                style="width: 350px; max-width: auto"
+                hide-selected
+                fill-input
+                style="width: 480px; max-width: auto"
                 @filter="(inputValue:string,
               doneFn:Function) => filterSelector(inputValue, doneFn
               ) "
@@ -243,13 +244,7 @@ watch(
                   placeholder="ค้นหา"
                 >
                   <template v-slot:append>
-                    <q-icon v-if="filterKeyword2 == ''" name="search" />
+                    <q-icon name="search" />
-                    <q-icon
-                      v-if="filterKeyword2 !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="Reset"
-                    />
                   </template>
                 </q-input>
                 <q-select
@@ -263,7 +258,6 @@ watch(
                   map-options
                   :options="columns2"
                   option-value="name"
-                  
                   style="min-width: 140px"
                 />
               </div>

src/modules/05_placement/components/PersonalList/DialogOrders.vue

@@ -236,6 +236,8 @@ watch(
             emit-value
             map-options
             use-input
+            hide-selected
+            fill-input
             style="width: 350px; max-width: auto"
             @update:model-value="filterSelectOrder"
             @filter="(inputValue:any,
@@ -259,13 +261,13 @@ watch(
             style="width: 200px; max-width: auto"
           >
             <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
+              <q-icon name="search" />
-              <q-icon
+              <!-- <q-icon
                 v-if="filter !== ''"
                 name="clear"
                 class="cursor-pointer"
                 @click="filter = ''"
-              />
+              /> -->
             </template>
           </q-input>
           <q-select
@@ -279,7 +281,6 @@ watch(
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="gt-xs q-ml-sm"
           />

src/modules/05_placement/components/PersonalList/TableView.vue

@@ -240,13 +240,13 @@ function onUpdateNewRows() {
           class="q-ml-sm"
         >
           <template v-slot:append>
-            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon name="search" />
-            <q-icon
+            <!-- <q-icon
               v-if="inputfilter !== ''"
               name="clear"
               class="cursor-pointer"
               @click="resetFilter"
-            />
+            /> -->
           </template>
         </q-input>
         <!-- แสดง table ใน คอลัมน์ -->

src/modules/05_placement/components/Receive/DialogOrders.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect,computed } from "vue";
+import { ref, watchEffect, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -171,140 +171,147 @@ watchEffect(() => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader :tittle="'ส่งไปออกคำสั่งรับโอน'" :close="clickClose" />
+      <DialogHeader :tittle="'ส่งไปออกsคำสั่งรับโอน'" :close="clickClose" />
       <q-separator />
       <q-card-section>
-        <div class="row justify-end">
+        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-5">
+          <div class="row col-12">
-            <q-toolbar style="padding: 0">
+            <q-space />
-              <q-input
+
-                borderless
+            <q-input
-                outlined
+              borderless
-                dense
+              outlined
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="onReset"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="id"
-          flat
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
               dense
-              v-model="scope.selected"
+              debounce="300"
+              :model-value="filterKeyword2"
+              @update:model-value="updateInput"
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+                <!-- <q-icon
+                      v-if="filterKeyword2 !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="onReset"
+                    /> -->
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns2"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns2"
+              option-value="name"
+              style="min-width: 140px"
+              class="gt-xs q-ml-sm"
             />
-          </template>
+          </div>
-          <template v-slot:body="props">
+
-            <q-tr :props="props" class="cursor-pointer">
+          <div class="col-12">
-              <q-td>
+            <d-table
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="id"
+              flat
+              :visible-columns="visibleColumns2"
+              selection="multiple"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
                 <q-checkbox
                   keep-color
                   color="primary"
                   dense
-                  v-model="props.selected"
+                  v-model="scope.selected"
                 />
-              </q-td>
+              </template>
-              <q-td
+              <template v-slot:body="props">
-                v-for="col in props.cols"
+                <q-tr :props="props" class="cursor-pointer">
-                :key="col.name"
+                  <q-td>
-                :props="props"
+                    <q-checkbox
-                @click="props.nextPage(props.row.id)"
+                      keep-color
-              >
+                      color="primary"
-                <div v-if="col.name == 'no'">
+                      dense
-                  {{ props.rowIndex + 1 }}
+                      v-model="props.selected"
-                </div>
+                    />
-                <div v-else-if="col.name == 'fullname'">
+                  </q-td>
-                  {{
+                  <q-td
-                    props.row.firstName
+                    v-for="col in props.cols"
-                      ? `${props.row.prefix ?? ""}${
+                    :key="col.name"
-                          props.row.firstName ?? ""
+                    :props="props"
-                        } ${props.row.lastName ?? ""}`
+                    @click="props.nextPage(props.row.id)"
-                      : "-"
+                  >
-                  }}
+                    <div v-if="col.name == 'no'">
-                </div>
+                      {{ props.rowIndex + 1 }}
-                <div v-else-if="col.name == 'dateOfBirth'">
+                    </div>
-                  {{
+                    <div v-else-if="col.name == 'fullname'">
-                    props.row.dateOfBirth
-                      ? date2Thai(props.row.dateOfBirth)
-                      : "-"
-                  }}
-                </div>
-                <div v-else-if="col.name == 'createdAt'">
-                  {{
-                    props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
-                  }}
-                </div>
-                <div v-else-if="col.name == 'organizationName'">
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{ props.row.root !== null ? props.row.root : "-" }}
                       {{
-                        props.row.rootShortName !== null
+                        props.row.firstName
-                          ? `(${props.row.rootShortName})`
+                          ? `${props.row.prefix ?? ""}${
-                          : ""
+                              props.row.firstName ?? ""
+                            } ${props.row.lastName ?? ""}`
+                          : "-"
                       }}
                     </div>
-                    <div class="text-weight-light">
+                    <div v-else-if="col.name == 'dateOfBirth'">
                       {{
-                        props.row.nodeName !== null ? props.row.nodeName : ""
+                        props.row.dateOfBirth
-                      }}
+                          ? date2Thai(props.row.dateOfBirth)
-                      {{
+                          : "-"
-                        props.row.nodeShortName !== null
-                          ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
-                          : ""
                       }}
                     </div>
-                  </div>
+                    <div v-else-if="col.name == 'createdAt'">
-                </div>
+                      {{
-                <div v-else-if="col.name == 'status'">
+                        props.row.createdAt
-                  {{ props.row.status ? statusText(props.row.status) : "-" }}
+                          ? date2Thai(props.row.createdAt)
-                </div>
+                          : "-"
-                <div v-else>
+                      }}
-                  {{ col.value ? col.value : "-" }}
+                    </div>
-                </div>
+                    <div v-else-if="col.name == 'organizationName'">
-              </q-td>
+                      <div class="col-4">
-            </q-tr>
+                        <div class="text-weight-medium">
-          </template>
+                          {{ props.row.root !== null ? props.row.root : "-" }}
-        </d-table>
+                          {{
+                            props.row.rootShortName !== null
+                              ? `(${props.row.rootShortName})`
+                              : ""
+                          }}
+                        </div>
+                        <div class="text-weight-light">
+                          {{
+                            props.row.nodeName !== null
+                              ? props.row.nodeName
+                              : ""
+                          }}
+                          {{
+                            props.row.nodeShortName !== null
+                              ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                              : ""
+                          }}
+                        </div>
+                      </div>
+                    </div>
+                    <div v-else-if="col.name == 'status'">
+                      {{
+                        props.row.status ? statusText(props.row.status) : "-"
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">

src/modules/05_placement/components/Receive/ReceiveAddPerson.vue

@@ -4,11 +4,9 @@ import { useQuasar } from "quasar";
 
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QForm } from "quasar";
 import type {
   DataOption,
   DataOptioninfo,
@@ -18,8 +16,6 @@ import type {
   FormAddPerson,
 } from "@/modules/05_placement/interface/index/ProfileType";
 
-// import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
-
 const retireDate = ref<Date>();
 const router = useRouter();
 const $q = useQuasar();
@@ -35,8 +31,6 @@ const {
   dialogConfirm,
 } = mixin;
 
-const profileStore = useProfileDataStore();
-
 const age = ref<string | null>("");
 const defaultCitizenData = ref<string>("");
 const informaData = ref<FormAddPerson>({
@@ -210,39 +204,40 @@ async function checkCitizen(id: string) {
  * @param refData ประเภทของตัวเลือก
  */
 function filterSelector(val: string, update: Function, refData: string) {
+  const newVal = val.toLowerCase();
   switch (refData) {
     case "prefixOps":
       update(() => {
         Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "genderOps":
       update(() => {
         Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "bloodOps":
       update(() => {
         Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "statusOps":
       update(() => {
         Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "religionOps":
       update(() => {
         Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
@@ -493,6 +488,12 @@ onMounted(async () => {
                       },
                     ]"
                     emit-value
+                    use-input
+                    hide-selected
+                    fill-input
+                    @filter="(inputValue:string,
+                    doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
+                    )"
                   />
                 </div>
                 <div class="col-3">
@@ -588,6 +589,8 @@ onMounted(async () => {
                     dense
                     outlined
                     use-input
+                    hide-selected
+                    fill-input
                     clearable
                     lazy-rules
                     emit-value
@@ -610,6 +613,8 @@ onMounted(async () => {
                     dense
                     outlined
                     use-input
+                    hide-selected
+                    fill-input
                     clearable
                     lazy-rules
                     emit-value
@@ -654,6 +659,8 @@ onMounted(async () => {
                     dense
                     outlined
                     use-input
+                    hide-selected
+                    fill-input
                     clearable
                     lazy-rules
                     emit-value
@@ -676,6 +683,8 @@ onMounted(async () => {
                     dense
                     outlined
                     use-input
+                    hide-selected
+                    fill-input
                     clearable
                     lazy-rules
                     emit-value

src/modules/05_placement/components/Repatriate/DialogOrders.vue

@@ -195,96 +195,88 @@ watch(
       <DialogHeader :tittle="'ส่งไปออกคำสั่งส่งตัวกลับ'" :close="closeModal" />
       <q-separator />
       <q-card-section>
-        <div class="row justify-end">
+        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-5">
+          <div class="row col-12">
-            <q-toolbar style="padding: 0">
+            <q-space />
-              <q-input
+            <q-input
-                borderless
+              borderless
-                outlined
+              outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="id"
-          class="custom-header-table"
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
               dense
-              v-model="scope.selected"
+              debounce="300"
+              :model-value="filterKeyword2"
+              @update:model-value="updateInput"
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns2"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns2"
+              option-value="name"
+              style="min-width: 140px"
+              class="gt-xs q-ml-sm"
             />
-          </template>
+          </div>
-          <template v-slot:body="props">
+          <div class="col-12">
-            <q-tr :props="props" class="cursor-pointer">
+            <d-table
-              <q-td>
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="id"
+              class="custom-header-table"
+              :visible-columns="visibleColumns2"
+              selection="multiple"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
                 <q-checkbox
                   keep-color
                   color="primary"
                   dense
-                  v-model="props.selected"
+                  v-model="scope.selected"
                 />
-              </q-td>
+              </template>
-              <q-td v-for="col in props.cols" :key="col.id">
+              <template v-slot:body="props">
-                <div v-if="col.name === 'no'">
+                <q-tr :props="props" class="cursor-pointer">
-                  {{ props.rowIndex + 1 }}
+                  <q-td>
-                </div>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td v-for="col in props.cols" :key="col.id">
+                    <div v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
 
-                <div
+                    <div
-                  v-else
+                      v-else
-                  :class="
+                      :class="
-                    col.name === 'organizationPositionOld' ||
+                        col.name === 'organizationPositionOld' ||
-                    col.name === 'organization'
+                        col.name === 'organization'
-                      ? 'table_ellipsis'
+                          ? 'table_ellipsis'
-                      : ''
+                          : ''
-                  "
+                      "
-                >
+                    >
-                  {{ col.value ? col.value : "-" }}
+                      {{ !col.value ? "-" : col.value }}
-                </div>
+                    </div>
-              </q-td>
+                  </q-td>
-            </q-tr>
+                </q-tr>
-          </template>
+              </template>
-        </d-table>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">

src/modules/05_placement/components/Transfer/DialogOrders.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch,computed } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -160,94 +160,94 @@ watch(
       <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
       <q-separator />
       <q-card-section>
-        <div class="row justify-end">
+        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-5">
+          <div class="row col-12">
-            <q-toolbar style="padding: 0">
+            <q-space />
-              <q-input
+            <q-input
-                borderless
+              borderless
-                outlined
+              outlined
-                dense
-                debounce="300"
-                v-model="filter"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-        <d-table
-          :columns="columns2"
-          :rows="rows"
-          :filter="filter"
-          row-key="id"
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
               dense
-              v-model="scope.selected"
+              debounce="300"
+              v-model="filter"
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+                <!-- <q-icon
+                      v-if="filter !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filter = ''"
+                    /> -->
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns2"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns2"
+              option-value="name"
+              style="min-width: 140px"
+              class="gt-xs q-ml-sm"
             />
-          </template>
+          </div>
 
-          <template v-slot:body="props">
+          <div class="col-12">
-            <q-tr :props="props" class="cursor-pointer">
+            <d-table
-              <q-td>
+              :columns="columns2"
+              :rows="rows"
+              :filter="filter"
+              row-key="id"
+              :visible-columns="visibleColumns2"
+              selection="multiple"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
                 <q-checkbox
                   keep-color
                   color="primary"
                   dense
-                  v-model="props.selected"
+                  v-model="scope.selected"
                 />
-              </q-td>
+              </template>
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
 
-                <div
+              <template v-slot:body="props">
-                  v-else
+                <q-tr :props="props" class="cursor-pointer">
-                  :class="
+                  <q-td>
-                    col.name === 'organizationPositionOld' ||
+                    <q-checkbox
-                    col.name === 'organization'
+                      keep-color
-                      ? 'table_ellipsis'
+                      color="primary"
-                      : ''
+                      dense
-                  "
+                      v-model="props.selected"
-                >
+                    />
-                  {{ col.value ? col.value : "-" }}
+                  </q-td>
-                </div>
+                  <q-td v-for="col in props.cols" :key="col.id">
-              </q-td>
+                    <div v-if="col.name === 'no'">
-            </q-tr>
+                      {{ props.rowIndex + 1 }}
-          </template>
+                    </div>
-        </d-table>
+
+                    <div
+                      v-else
+                      :class="
+                        col.name === 'organizationPositionOld' ||
+                        col.name === 'organization'
+                          ? 'table_ellipsis'
+                          : ''
+                      "
+                    >
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">

src/modules/05_placement/views/01_Main.vue

@@ -47,8 +47,8 @@ const addedExamTypeValues: Set<string> = new Set();
 
 /** บัญชีหมดอายุ */
 const expiredAccount = ref<boolean>(false);
-const examTimeOP2 = ref<any[]>([]);
+const examTimeOP2 = ref<DataOption1[]>(examTypeOP.value);
-const examTypeOP2 = ref<any[]>([]);
+const examTypeOP2 = ref<DataOption1[]>([]);
 
 const paging = ref<boolean>(true);
 const pagination = ref({
@@ -407,6 +407,8 @@ onMounted(async () => {
           :hide-dropdown-icon="false"
           @update:model-value="filterYear"
           use-input
+          hide-selected
+          fill-input
           @filter="filterFnYear"
           ><template v-slot:no-option>
             <q-item>
@@ -428,13 +430,13 @@ onMounted(async () => {
           placeholder="ค้นหา"
         >
           <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon  name="search" />
-            <q-icon
+            <!-- <q-icon
               v-if="filterKeyword !== ''"
               name="clear"
               class="cursor-pointer"
               @click="resetFilter"
-            />
+            /> -->
           </template>
         </q-input>
 
@@ -468,6 +470,8 @@ onMounted(async () => {
               option-value="id"
               option-label="name"
               lazy-rules
+              hide-selected
+              fill-input
               hide-bottom-space
               :readonly="false"
               :borderless="false"
@@ -475,6 +479,8 @@ onMounted(async () => {
               :hide-dropdown-icon="false"
               @update:model-value="searchFilterTable"
               @filter="filterFnexamTime"
+              :clearable="examTime !== 'all' && examTime !== 'ทั้งหมด'"
+              @clear="(examTime = 'ทั้งหมด'), searchFilterTable()"
               use-input
               input-debounce="0"
               ><template v-slot:no-option>
@@ -505,6 +511,10 @@ onMounted(async () => {
               @update:model-value="searchFilterTable"
               @filter="filterFnExamtype"
               use-input
+              hide-selected
+              fill-input
+              :clearable="examType !== 'all' && examType !== 'ทั้งหมด'"
+              @clear="(examType = 'all'), searchFilterTable()"
             >
               <template v-slot:no-option>
                 <q-item>

src/modules/05_placement/views/02_transferMain.vue

@@ -215,13 +215,13 @@ onMounted(async () => {
             placeholder="ค้นหา"
           >
             <template v-slot:append>
-              <q-icon v-if="filterMain == ''" name="search" />
+              <q-icon name="search" />
-              <q-icon
+              <!-- <q-icon
                 v-if="filterMain !== ''"
                 name="clear"
                 class="cursor-pointer"
                 @click="resetFilter"
-              />
+              /> -->
             </template>
           </q-input>
 
@@ -236,7 +236,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
           />
@@ -280,8 +279,15 @@ onMounted(async () => {
                     {{ props.rowIndex + 1 }}
                   </div>
 
-                  <div v-else>
+                  <div
-                    {{}}
+                    v-else
+                    :class="
+                      col.name === 'organizationPositionOld' ||
+                      col.name === 'organization'
+                        ? 'table_ellipsis2'
+                        : ''
+                    "
+                  >
                     {{
                       col.value == null ? "" : col.value == "" ? "-" : col.value
                     }}

src/modules/05_placement/views/03_receiveMain.vue

@@ -374,13 +374,13 @@ onMounted(() => {
             placeholder="ค้นหา"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon name="search" />
-              <q-icon
+              <!-- <q-icon
                 v-if="filterKeyword !== ''"
                 name="clear"
                 class="cursor-pointer"
                 @click="resetFilter"
-              />
+              /> -->
             </template>
           </q-input>
           <q-select
@@ -394,7 +394,6 @@ onMounted(() => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
           />

src/modules/05_placement/views/04_helpGovernmentMain.vue

@@ -302,13 +302,7 @@ onMounted(() => {
             placeholder="ค้นหา"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
 
@@ -323,7 +317,6 @@ onMounted(() => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
           />
@@ -361,16 +354,21 @@ onMounted(() => {
                   </q-btn>
 
                   <q-btn
-                    v-if="
+                    v-if="checkPermission($route)?.attrIsDelete"
-                      props.row.status !== 'REPORT' &&
+                    :disable="
-                      props.row.status !== 'DONE' &&
+                      props.row.status === 'REPORT' ||
-                      checkPermission($route)?.attrIsDelete
+                      props.row.status === 'DONE'
                     "
                     icon="delete"
                     flat
                     round
                     dense
-                    color="red"
+                    :color="
+                      props.row.status === 'REPORT' ||
+                      props.row.status === 'DONE'
+                        ? 'grey-5'
+                        : 'red'
+                    "
                     @click.stop.prevent="clickDelete(props.row.id)"
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>

src/modules/05_placement/views/05_repatriateMain.vue

@@ -9,15 +9,11 @@ import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
+/** importType*/
- * importType
- */
 import type { QTableProps } from "quasar";
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
-/**
+/** importComponents*/
- * importComponents
- */
 import Dialogbody from "@/modules/05_placement/components/Repatriate/DialogOrders.vue"; //popup ส่งไปออกคำสั่งส่งตัวกลับ
 
 const $q = useQuasar();
@@ -266,13 +262,7 @@ onMounted(async () => {
             placeholder="ค้นหา"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
           <q-select
@@ -287,7 +277,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -324,16 +313,20 @@ onMounted(async () => {
                     <q-tooltip>รายละเอียด</q-tooltip>
                   </q-btn>
                   <q-btn
-                    v-if="
+                    v-if="checkPermission($route)?.attrIsDelete"
-                      props.row.status !== 'REPORT' &&
+                    :disable="
-                      props.row.status !== 'DONE' &&
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
-                      checkPermission($route)?.attrIsDelete
+                    "
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey-5'
+                        : 'red'
                     "
                     icon="delete"
                     flat
                     round
                     dense
-                    color="red"
+                
                     @click.stop.prevent="clickDelete(props.row.id)"
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -349,11 +342,11 @@ onMounted(async () => {
                     :class="
                       col.name === 'organizationPositionOld' ||
                       col.name === 'organization'
-                        ? 'table_ellipsis'
+                        ? 'table_ellipsis2'
                         : ''
                     "
                   >
-                    {{ col.value == null ? "" : col.value }}
+                    {{ !col.value ? "-" : col.value }}
                   </div>
                 </q-td>
               </q-tr>

src/modules/05_placement/views/06_appointPromoteMain.vue

@@ -315,13 +315,7 @@ onMounted(() => {
             placeholder="ค้นหา"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
 
@@ -336,7 +330,6 @@ onMounted(() => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
           />

src/modules/05_placement/views/07_appointEmployeeMain.vue

@@ -325,13 +325,7 @@ onMounted(() => {
             placeholder="ค้นหา"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
 

src/modules/05_placement/views/08_otherMain.vue

@@ -12,7 +12,6 @@ import config from "@/app.config";
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { listMain } from "@/modules/05_placement/interface/response/OhterMain";
-import type { OpType } from "@/modules/05_placement/interface/response/Main";
 
 /** importcomopnents*/
 import Dialogbody from "@/modules/05_placement/components/Other/DialogOrders.vue";
@@ -160,14 +159,6 @@ async function fecthlistOthet() {
     });
 }
 
-/**
- * รีเซ็ตข้อมูลในช่อง input
- */
-function resetFilter() {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-}
-
 /**
  * เปิด popup ส่งไปออกคำสั่งอื่นๆ
  */
@@ -248,13 +239,7 @@ onMounted(() => {
             placeholder="ค้นหา"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
           <q-select
@@ -268,7 +253,6 @@ onMounted(() => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
           />
@@ -307,15 +291,18 @@ onMounted(() => {
                   </q-btn>
 
                   <q-btn
-                    v-if="
+                    v-if="checkPermission($route)?.attrIsDelete"
-                      props.row.status !== 'REPORT' &&
-                      props.row.status !== 'DONE' &&
-                      checkPermission($route)?.attrIsDelete
-                    "
                     flat
+                    :disable="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                    "
                     round
                     dense
-                    color="red"
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey-5'
+                        : 'red'
+                    "
                     icon="mdi-delete"
                     @click.stop="clickDelete(props.row.id)"
                   >
@@ -332,7 +319,7 @@ onMounted(() => {
                     :class="
                       col.name === 'organizationPositionOld' ||
                       col.name === 'organization'
-                        ? 'table_ellipsis'
+                        ? 'table_ellipsis2'
                         : ''
                     "
                   >