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

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="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                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"
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="row col-12">
+            <q-space />
+            <q-input
+              borderless
+              outlined
               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>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
+          </div>
+
+          <div class="col-12">
+            <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>
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <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
-                  v-else
-                  :class="
-                    col.name === 'organizationPositionOld' ||
-                    col.name === 'organization'
-                      ? 'table_ellipsis'
-                      : ''
-                  "
-                >
-                  {{
-                    col.value == null ? "" : col.value == "" ? "-" : col.value
-                  }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
+                    <div
+                      v-else
+                      :class="
+                        col.name === 'organizationPositionOld' ||
+                        col.name === 'organization'
+                          ? 'table_ellipsis'
+                          : ''
+                      "
+                    >
+                      {{
+                        col.value == null
+                          ? ""
+                          : col.value == ""
+                          ? "-"
+                          : col.value
+                      }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">