ทะเบียนประวัติ: แก้หน้าประวัติ+

src/modules/04_registryNew/components/detail/Achievement/02_Train.vue

@@ -144,6 +144,147 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const historyColumns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: (v) =>
+      v.isDate
+        ? date2Thai(v.startDate)
+        : new Date(v.startDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: (v) =>
+      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "yearly",
+    align: "left",
+    label: "ปีที่อบรม (พ.ศ.)",
+    sortable: true,
+    field: "yearly",
+    format: (v) => v + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "place",
+    align: "left",
+    label: "สถานที่ฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "place",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "department",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numberOrder",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "numberOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "dateOrder",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
 const isDate = ref<string>("false");
 const dialogStatus = ref<string>("create");
 const historyDialog = ref<boolean>(false);
@@ -199,6 +340,8 @@ const historyVisibleColumns = ref<string[]>([
   "dateOrder", // คำสั่งลงวันที่
   "startDate", // วันเริ่มต้น
   "endDate", // วันสิ้นสุด
+  "lastUpdateFullName", // แก้ไขโดย
+  "lastUpdatedAt", // แก้ไขเมื่อวันที่
 ]);
 
 async function onSubmit() {
@@ -548,6 +691,26 @@ onMounted(async () => {
         </q-card>
       </div>
     </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
@@ -964,7 +1127,7 @@ onMounted(async () => {
             :display-value="$q.lang.table.columns"
             emit-value
             map-options
-            :options="columns"
+            :options="historyColumns"
             option-value="name"
             options-cover
             style="min-width: 150px"
@@ -972,7 +1135,7 @@ onMounted(async () => {
         </q-toolbar>
         <d-table
           ref="table"
-          :columns="columns"
+          :columns="historyColumns"
           :rows="historyRows"
           row-key="name"
           flat
@@ -1002,6 +1165,26 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
         </d-table>
       </q-card-section>
     </q-card>