From e6cff6dece1f9f97d131bc1e74caaecd0f473365 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 29 Nov 2024 18:16:49 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/DialogOrder.vue      | 267 +++++++++---------
 .../DialogOrder/DialogSendToCommand.vue       | 160 +++++------
 .../probation/FormAppoint/FormAppoint.vue     |  43 ++-
 .../components/probation/MainAppoint.vue      |  22 +-
 .../components/probation/MainProbation.vue    |  28 +-
 .../components/probation/ProbationDetail.vue  |  10 +-
 6 files changed, 260 insertions(+), 270 deletions(-)

diff --git a/src/modules/05_placement/components/probation/DialogOrder.vue b/src/modules/05_placement/components/probation/DialogOrder.vue
index 1ee2e660b..657475af9 100644
--- a/src/modules/05_placement/components/probation/DialogOrder.vue
+++ b/src/modules/05_placement/components/probation/DialogOrder.vue
@@ -166,7 +166,6 @@ const columns = ref<QTableProps["columns"]>([
  */
 function filterSelector(val: string, update: Function) {
   update(() => {
-    commandType.value = val ? "" : commandType.value;
     commandOp.value = listCommand.value.filter(
       (v: any) => v.name.indexOf(val) > -1
     );
@@ -200,7 +199,7 @@ async function getList() {
       config.API.probationPersonalList() +
         `?status=${commandType.value == "C-PM-11" ? 2 : 3}&page=${
           pagination.value.page
-        }&pageSize=${pagination.value.rowsPerPage}`
+        }&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}`
     )
     .then(async (res) => {
       const data = await res.data.result.data;
@@ -260,144 +259,150 @@ watch(
       <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
       <q-separator />
       <q-card-section>
-        <div class="row q-mb-sm" style="padding: 0">
-          <q-select
-            v-model="commandType"
-            dense
-            outlined
-            label="ประเภทคำสั่ง"
-            :options="commandOp"
-            option-label="name"
-            option-value="code"
-            emit-value
-            class="inputgreen"
-            map-options
-            use-input
-            style="width: 350px; max-width: auto"
-            @update:model-value="getList()"
-            @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn
-                    ) "
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template></q-select
-          >
-          <q-space />
-          <q-input
-            borderless
-            outlined
-            dense
-            debounce="300"
-            v-model="filter"
-            placeholder="ค้นหา"
-            style="width: 200px; 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="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
-
-        <d-table
-          :columns="columns"
-          :rows="rows"
-          :filter="filter"
-          row-key="personal_id"
-          :visible-columns="visibleColumns"
-          selection="single"
-          v-model:selected="selected"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePagination"
-        >
-          <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-col-gutter-sm">
+            <q-select
+              v-model="commandType"
               dense
-              :disable="commandType"
-              v-model="scope.selected"
+              outlined
+              label="ประเภทคำสั่ง"
+              :options="commandOp"
+              option-label="name"
+              option-value="code"
+              emit-value
+              map-options
+              use-input
+              hide-selected
+              fill-input
+              style="width: 620px; max-width: auto"
+              @update:model-value="(pagination.page = 1), getList()"
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn
+                      ) "
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template></q-select
+            >
+            <q-space />
+            <q-input
+              borderless
+              outlined
+              dense
+              debounce="300"
+              v-model="filter"
+              placeholder="ค้นหา"
+              style="width: 200px; max-width: auto"
+              @keydown.enter="(pagination.page = 1), getList()"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
             />
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td>
+          </div>
+
+          <div class="col-12">
+            <d-table
+              :columns="columns"
+              :rows="rows"
+              row-key="personal_id"
+              :visible-columns="visibleColumns"
+              selection="single"
+              v-model:selected="selected"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePagination"
+            >
+              <template v-slot:header-selection="scope">
                 <q-checkbox
                   keep-color
                   color="primary"
                   dense
                   :disable="commandType"
-                  v-model="props.selected"
+                  v-model="scope.selected"
                 />
-              </q-td>
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name == 'no'">
-                  {{
-                    (pagination.page - 1) * pagination.rowsPerPage +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div v-else-if="col.name == 'order_number'">
-                  {{
-                    props.row.order_number
-                      ? props.row.order_number != "xx/2566"
-                        ? props.row.order_number
-                        : "-"
-                      : "-"
-                  }}
-                </div>
-                <div v-else-if="col.name == 'probation_status'">
-                  {{
-                    props.row.probation_status
-                      ? store.statusProbationMain(props.row.probation_status)
-                      : "-"
-                  }}
-                </div>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      :disable="commandType"
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{
+                        (pagination.page - 1) * pagination.rowsPerPage +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else-if="col.name == 'order_number'">
+                      {{
+                        props.row.order_number
+                          ? props.row.order_number != "xx/2566"
+                            ? props.row.order_number
+                            : "-"
+                          : "-"
+                      }}
+                    </div>
+                    <div v-else-if="col.name == 'probation_status'">
+                      {{
+                        props.row.probation_status
+                          ? store.statusProbationMain(
+                              props.row.probation_status
+                            )
+                          : "-"
+                      }}
+                    </div>
 
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total }} รายการ
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="Number(totalList)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="getList"
-            ></q-pagination>
-          </template>
-        </d-table>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ total }} รายการ
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(totalList)"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  :max-pages="5"
+                  @update:model-value="getList"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
diff --git a/src/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue b/src/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue
index 886c06ea7..8a924175f 100644
--- a/src/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue
+++ b/src/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue
@@ -133,6 +133,7 @@ function convertText(val: string) {
 watchEffect(() => {
   if (props.modal === true) {
     selected.value = [];
+    filterKeyword.value = "";
   }
 });
 </script>
@@ -142,95 +143,94 @@ watchEffect(() => {
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
       <q-separator />
-      <q-card-section class="q-pt-none">
-        <div class="row justify-end">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns"
-                option-value="name"
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns"
-          :rows="rows"
-          :filter="filterKeyword"
-          row-key="id"
-          :visible-columns="visibleColumns"
-          selection="single"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
+      <q-card-section>
+        <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"
+              placeholder="ค้นหา"
+              v-model="filterKeyword"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+              class="q-ml-sm"
             />
-          </template>
+          </div>
 
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
+          <div class="col-12">
+            <d-table
+              :columns="columns"
+              :rows="rows"
+              :filter="filterKeyword"
+              row-key="id"
+              :visible-columns="visibleColumns"
+              selection="single"
+              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.name" :props="props">
-                <div v-if="col.name == 'no'">
-                  {{
-                    (pagination.page - 1) * pagination.rowsPerPage +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div v-else-if="col.name == 'status'">
-                  {{ props.row.status ? convertText(props.row.status) : "-" }}
-                </div>
+              </template>
 
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
+              <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.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{
+                        (pagination.page - 1) * pagination.rowsPerPage +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else-if="col.name == 'status'">
+                      {{
+                        props.row.status ? convertText(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-card-actions align="right" class="bg-white text-teal">
diff --git a/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue b/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
index 063910c80..2274c5880 100644
--- a/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
+++ b/src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue
@@ -434,6 +434,8 @@ watch(
   () => modal.value,
   () => {
     if (modal.value) {
+      filterKeyword.value = "";
+
       optionsTypeMain.value = optionsType.value;
       const optionData = optionsType.value;
       const caregiverCount = rows.value.filter(
@@ -611,23 +613,24 @@ onMounted(async () => {
         <q-separator />
         <q-card-section>
           <div class="row q-col-gutter-sm">
+            <div class="col-2">
+              <q-select
+                v-model="member"
+                outlined
+                dense
+                label="บทบาท"
+                :options="optionsTypeMain"
+                option-value="id"
+                option-label="value"
+                map-options
+                emit-value
+                @update:model-value="selected = []"
+              >
+              </q-select>
+            </div>
             <div class="col-12">
               <div class="row">
-                <div class="col-2">
-                  <q-select
-                    v-model="member"
-                    outlined
-                    dense
-                    label="บทบาท"
-                    :options="optionsTypeMain"
-                    option-value="id"
-                    option-label="value"
-                    map-options
-                    emit-value
-                    @update:model-value="selected = []"
-                  >
-                  </q-select>
-                </div>
+                <!-- <div class="col-2"></div> -->
                 <q-checkbox
                   keep-color
                   v-model="isDirector"
@@ -656,16 +659,10 @@ onMounted(async () => {
                   outlined
                   debounce="300"
                   placeholder="ค้นหา"
-                  @keydown.enter.prevent="getPerson()"
+                  @keydown.enter.prevent="(pagination.page = 1), getPerson()"
                 >
                   <template v-slot:append>
-                    <q-icon v-if="filterKeyword == ''" name="search" />
-                    <q-icon
-                      v-if="filterKeyword !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="resetFilter()"
-                    />
+                    <q-icon name="search" />
                   </template>
                 </q-input>
 
diff --git a/src/modules/05_placement/components/probation/MainAppoint.vue b/src/modules/05_placement/components/probation/MainAppoint.vue
index 3b6f3dd9d..0653421ca 100644
--- a/src/modules/05_placement/components/probation/MainAppoint.vue
+++ b/src/modules/05_placement/components/probation/MainAppoint.vue
@@ -158,6 +158,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <q-card flat class="q-pa-sm">
     <div class="row q-col-gutter-sm">
@@ -188,13 +189,7 @@ onMounted(async () => {
             placeholder="ค้นหา"
           >
             <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
 
@@ -209,7 +204,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="col-xs-12 col-sm-3 col-md-2"
           />
@@ -254,28 +248,26 @@ onMounted(async () => {
                 </q-btn>
                 <q-btn
                   v-if="
-                    props.row.status == 'PENDING' &&
                     checkPermission($route)?.attrIsUpdate &&
                     checkPermission($route)?.attrIsGet
                   "
                   flat
+                  :disable="props.row.status !== 'PENDING'"
+                  :color="props.row.status !== 'PENDING' ? 'grey-5' : 'edit'"
                   dense
                   round
-                  color="edit"
                   icon="edit"
                   @click="onNextPage(props.row.id, true)"
                 >
                   <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                 </q-btn>
                 <q-btn
-                  v-if="
-                    props.row.status == 'PENDING' &&
-                    checkPermission($route)?.attrIsDelete
-                  "
+                  v-if="checkPermission($route)?.attrIsDelete"
+                  :disable="props.row.status !== 'PENDING'"
+                  :color="props.row.status !== 'PENDING' ? 'grey-5' : 'red'"
                   flat
                   dense
                   round
-                  color="red"
                   icon="delete"
                   @click="onDelete(props.row.id)"
                 >
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 77a8ed780..f714f0964 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -144,7 +144,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "order_number",
-    align: "center",
+    align: "left",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
     sortable: true,
     field: "order_number",
@@ -244,7 +244,11 @@ async function getpersonalList() {
   await http
     .get(
       config.API.probationPersonalList() +
-        `?status=${fillter.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filterKeyword.value}`
+        `?status=${!fillter.value ? "" : fillter.value}&page=${
+          pagination.value.page
+        }&pageSize=${pagination.value.rowsPerPage}&keyword=${
+          filterKeyword.value
+        }`
     )
     .then(async (res) => {
       const data = await res.data.result.data;
@@ -402,11 +406,10 @@ function paginationLabel2(start: string, end: string, total: string) {
  * @param val ค่าที่ค้นหา
  * @param update fn
  */
-function filterFn(val: string, update: any) {
+function filterFn(val: string, update: Function) {
   if (val == "") {
     update(() => {
       Opfillter2.value = Opfillter.value;
-      fillter.value = undefined;
     });
   } else {
     update(() => {
@@ -460,6 +463,7 @@ function closeAdd() {
 }
 
 function getSearchMain() {
+  rows.value = [];
   pagination.value.page = 1;
   getpersonalList();
 }
@@ -504,7 +508,12 @@ onMounted(async () => {
             @update:model-value="getSearchMain()"
             @filter="filterFn"
             use-input
+            hide-selected
+            fill-input
             behavior="menu"
+            style="width: 400px"
+            :clearable="fillter !== ''"
+            @clear="fillter = ''"
           >
             <template v-slot:no-option>
               <q-item>
@@ -551,18 +560,11 @@ onMounted(async () => {
           v-model="filterKeyword"
           ref="filterRef"
           outlined
-          debounce="300"
           placeholder="ค้นหา"
           @keydown.enter.prevent="getSearchMain()"
         >
           <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon name="search" />
           </template>
         </q-input>
 
@@ -658,7 +660,7 @@ onMounted(async () => {
                   }}
                 </div>
 
-                <div v-else class="table_ellipsis">
+                <div v-else class="table_ellipsis2">
                   {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 87690fdff..b608b742b 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -298,7 +298,7 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.push(`/probation/`)"
     />
-    รายละเอียดงานที่ได้รับมอบหมายของ{{ name }}
+    รายละเอียดงานที่ได้รับมอบหมาย {{ name }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
@@ -401,13 +401,7 @@ onMounted(async () => {
           placeholder="ค้นหา"
         >
           <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon name="search" />
           </template>
         </q-input>