From 748b8e7aa7c63d89cf92745f5044b5ddf9ab4cf1 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 26 Oct 2023 16:42:47 +0700
Subject: [PATCH 1/2] =?UTF-8?q?UI=20=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  10 +-
 .../components/3_WorkTime/DialogForm.vue      | 216 ++++++++++++++++++
 .../components/3_WorkTime/MainPage.vue        | 211 +++++++++++++++++
 .../09_leave/interface/request/workTime.ts    |  21 ++
 src/modules/09_leave/router.ts                |  11 +
 src/modules/09_leave/stores/WorkTimeStore.ts  | 117 ++++++++++
 .../2_InvestigateFacts/MainPage.vue           |   4 +-
 7 files changed, 586 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/09_leave/components/3_WorkTime/DialogForm.vue
 create mode 100644 src/modules/09_leave/components/3_WorkTime/MainPage.vue
 create mode 100644 src/modules/09_leave/interface/request/workTime.ts
 create mode 100644 src/modules/09_leave/stores/WorkTimeStore.ts

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index a0b52f8d0..7571508d3 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -378,18 +378,24 @@ const menuList = readonly<any[]>([
     children: [
       {
         key: 9.1,
+        label: "รอบการปฏิบัติงาน",
+        path: "/working-time",
+        role: "leave",
+      },
+      {
+        key: 9.2,
         label: "รายการลงเวลาปฏิบัติงาน",
         path: "/work-list",
         role: "leave",
       },
       {
-        key: 9.2,
+        key: 9.3,
         label: "รายการลา",
         path: "/leave-list",
         role: "leave",
       },
       {
-        key: 9.3,
+        key: 9.4,
         label: "รายงานสถิติ",
         path: "/statistics-report",
         role: "leave",
diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
new file mode 100644
index 000000000..1cd0e7aaf
--- /dev/null
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import type { formData } from "@/modules/09_leave/interface/request/workTime";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const formData = reactive<formData>({
+  morning: "07:30",
+  morningEnd: "12:00",
+  afternoon: "12:00",
+  afternoonEnd: "15:30",
+  reason: "",
+  status: false,
+});
+
+const props = defineProps({
+  modal: Boolean,
+  editCheck: Boolean,
+  closeDialog: Function,
+  detailData: Object,
+});
+
+function clickSave() {
+  if (props.closeDialog) {
+    props.closeDialog();
+  }
+  console.log("save", formData);
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <DialogHeader
+        :tittle="
+          !editCheck
+            ? 'เพิ่มรอบการปฏิบัติงาน'
+            : props.detailData
+            ? `แก้ไขรอบ ${props.detailData.round}`
+            : ''
+        "
+        :close="closeDialog"
+      />
+      <q-separator color="grey-4" />
+
+      <div
+        class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+      >
+        <p style="color: #21ba45; font-size: 16px">ครึ่งเช้า</p>
+        <div class="row justify-between q-my-sm items-center">
+          <p class="q-ma-none">เวลาเข้างาน</p>
+          <q-input
+            class="inputgreen"
+            :outlined="!$props.editCheck"
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.morning"
+            hide-bottom-space
+            type="text"
+          
+          />
+        </div>
+        <q-separator inset />
+        <div class="row items-center q-my-sm justify-between">
+          <p class="q-ma-none">เวลาออกงาน</p>
+          <q-input
+            class="inputgreen"
+            :outlined="!$props.editCheck"
+            dense
+            v-model="formData.morningEnd"
+            lazy-rules
+            borderless
+            hide-bottom-space
+            type="text"
+          />
+        </div>
+      </div>
+      <div
+        class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+      >
+        <p style="color: #21ba45; font-size: 16px">ครึ่งบ่าย</p>
+        <div class="row justify-between q-my-sm items-center">
+          <p class="q-ma-none">เวลาเข้างาน</p>
+          <q-input
+            class="inputgreen"
+            :outlined="!$props.editCheck"
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.afternoon"
+            hide-bottom-space
+            type="text"
+          />
+        </div>
+        <q-separator inset />
+        <div class="row items-center q-my-sm justify-between">
+          <p class="q-ma-none">เวลาออกงาน</p>
+          <q-input
+            class="inputgreen"
+            :outlined="!$props.editCheck"
+            dense
+            v-model="formData.afternoonEnd"
+            lazy-rules
+            borderless
+            hide-bottom-space
+            type="text"
+          />
+        </div>
+      </div>
+      <q-input
+        class="col-12 bg-white q-ma-md"
+        outlined
+        stack-label
+        v-model="formData.reason"
+        label="คำอธิบาย"
+        hide-bottom-space
+        type="textarea"
+      ></q-input>
+      <div
+        class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+      >
+        <div class="row items-center q-my-sm justify-between">
+          <p class="q-ma-none">สถานะการใช้งาน</p>
+          <label class="toggle-control">
+            <input type="checkbox" v-model="formData.status" />
+            <span class="control"></span>
+          </label>
+        </div>
+      </div>
+      <q-separator color="grey-4" />
+      <div class="q-pa-md">
+        <div class="row justify-end">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            flat
+            round
+            @click="clickSave"
+            color="secondary"
+            icon="mdi-content-save-outline"
+            ><q-tooltip>{{ !props.editCheck ? 'บันทึกข้อมูล':'บันทึกแก้ไขข้อมูล' }}</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #24b047;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/09_leave/components/3_WorkTime/MainPage.vue b/src/modules/09_leave/components/3_WorkTime/MainPage.vue
new file mode 100644
index 000000000..859550277
--- /dev/null
+++ b/src/modules/09_leave/components/3_WorkTime/MainPage.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { ref, useAttrs, onMounted } from "vue";
+
+import router from "@/router";
+import { useQuasar } from "quasar";
+import DialogForm from '@/modules/09_leave/components/3_WorkTime/DialogForm.vue'
+import { useWorkTimeStore } from "@/modules/09_leave/stores/WorkTimeStore";
+const dataWorkTime = useWorkTimeStore();
+const { fecthList } = dataWorkTime;
+
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false)
+const detailData = ref<any>()
+const editCheck = ref<boolean>(false)
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+
+function openModal(data:any,check:boolean){
+ modal.value = true
+ editCheck.value = check
+ detailData.value = data
+};
+
+function closeDialog(){
+  modal.value = false
+  editCheck.value = false
+}
+onMounted(() => {
+  fecthList([
+    {
+      morning: "07:30",
+      morningEnd: "12:00",
+      afternoon: "13:00",
+      afternoonEnd: "15:30",
+      reason: "",
+      status: 1,
+    },
+    {
+      morning: "08:30",
+      morningEnd: "12:00",
+      afternoon: "13:00",
+      afternoonEnd: "15:30",
+      reason: "",
+      status: 0,
+    },
+    {
+      morning: "09:30",
+      morningEnd: "12:00",
+      afternoon: "13:00",
+      afternoonEnd: "15:30",
+      reason: "",
+      status: 1,
+    },
+    {
+      morning: "10:30",
+      morningEnd: "12:00",
+      afternoon: "13:00",
+      afternoonEnd: "15:30",
+      reason: "",
+      status: 1,
+    },
+  ]);
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการรอบการปฏิบัติงาน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <div>
+        <q-btn
+          for="#addInvestigatefacts"
+          @click="openModal(null,false)"
+          size="12px"
+          flat
+          round
+          color="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มรอบการปฏิบัติงาน</q-tooltip>
+        </q-btn>
+      </div>
+      <q-space />
+
+      <q-input
+        for="#search"
+        class="col-xs-12 col-sm-3 col-md-2"
+        standout
+        dense
+        v-model="filterKeyword"
+        ref="filterRef"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+      >
+        <template v-slot:append>
+          <q-icon v-if="filterKeyword == ''" name="search" />
+          <q-icon
+            v-if="filterKeyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+
+      <q-select
+        for="#select"
+        v-model="dataWorkTime.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataWorkTime.columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
+    </div>
+    <div class="col-12">
+      <d-table
+        ref="table"
+        :columns="dataWorkTime.columns"
+        :rows="dataWorkTime.rows"
+        :filter="filterKeyword"
+        row-key="interrogated"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        v-bind="attrs"
+        :visible-columns="dataWorkTime.visibleColumns"
+        :pagination-label="paginationLabel"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500;padding-top: 16px;padding-bottom: 16px;"
+            >
+              <span class="text-weight-medium ">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click.prevent="openModal(props.row,true)">
+              <div v-if="col.name === 'status'">
+                <q-icon
+                  v-if="props.row.status === 1"
+                  name="mdi-check"
+                  size="sm"
+                  color="positive"
+                />
+                <q-icon
+                  v-if="props.row.status === 0"
+                  name="mdi-close"
+                  size="sm"
+                  color="grey"
+                />
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+<DialogForm 
+  :modal="modal"
+  :closeDialog="closeDialog"
+  :editCheck="editCheck"
+  :detailData="detailData"
+/>
+</template>
+<style scoped lang="scss">
+.q-table tbody td:before.no-background {
+  background: none;
+}
+</style>
diff --git a/src/modules/09_leave/interface/request/workTime.ts b/src/modules/09_leave/interface/request/workTime.ts
new file mode 100644
index 000000000..ebffb8c71
--- /dev/null
+++ b/src/modules/09_leave/interface/request/workTime.ts
@@ -0,0 +1,21 @@
+interface workingTimeDataRowType {
+    morning: string
+    morningEnd: string
+    afternoon: string
+    afternoonEnd: string
+    reason: string
+    status: number
+}
+
+interface formData {
+    morning:string
+    morningEnd:string
+    afternoon:string
+    afternoonEnd:string
+    reason:string
+    status:boolean
+}
+export type {
+    workingTimeDataRowType,
+    formData
+}
\ No newline at end of file
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index 936a99a6a..1f90e0b96 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -3,6 +3,7 @@ const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue")
 const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
 const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
 const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
+const workingtime = () => import('@/modules/09_leave/components/3_WorkTime/MainPage.vue')
 
 export default [
     {
@@ -45,5 +46,15 @@ export default [
             Role: "coin",
         },
     },
+    {
+        path: "/workingtime",
+        name: "/working-time",
+        component: workingtime,
+        meta: {
+            Auth: true,
+            Key: [9],
+            Role: "coin",
+        },
+    },
 
 ]
\ No newline at end of file
diff --git a/src/modules/09_leave/stores/WorkTimeStore.ts b/src/modules/09_leave/stores/WorkTimeStore.ts
new file mode 100644
index 000000000..778469448
--- /dev/null
+++ b/src/modules/09_leave/stores/WorkTimeStore.ts
@@ -0,0 +1,117 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import type { workingTimeDataRowType } from '@/modules/09_leave/interface/request/workTime'
+
+export const useWorkTimeStore = defineStore("WorkTimeStore", () => {
+    const rows = ref<workingTimeDataRowType[]>([])
+
+    const visibleColumns = ref<string[]>([
+        "round",
+        "morning",
+        "morningEnd",
+        "afternoon",
+        "afternoonEnd",
+        "reason",
+        "status",
+    ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+
+        {
+            name: "round",
+            align: "left",
+            label: "รอบ",
+            sortable: true,
+            field: "round",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+        {
+            name: "morning",
+            align: "left",
+            label: "รอบเช้า",
+            sortable: true,
+            field: "morning",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "morningEnd",
+            align: "left",
+            label: "รอบออก",
+            sortable: true,
+            field: "morningEnd",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "afternoon",
+            align: "left",
+            label: "รอบบ่าย",
+            sortable: true,
+            field: "afternoon",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "afternoonEnd",
+            align: "left",
+            label: "รอบออก",
+            sortable: true,
+            field: "afternoonEnd",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "reason",
+            align: "left",
+            label: "คำอธิบาย",
+            sortable: true,
+            field: "reason",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "status",
+            align: "center",
+            label: "สถานะการใช้งาน",
+            sortable: false,
+            field: "status",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+    ]);
+    function fecthList(data: workingTimeDataRowType[]) {
+        let datalist: workingTimeDataRowType[] = data.map((e: workingTimeDataRowType) => {
+            return {
+                round:`${e.morning}-${e.afternoonEnd}`,
+                morning: e.morning,
+                morningEnd: e.morningEnd,
+                afternoon: e.afternoon,
+                afternoonEnd: e.afternoonEnd,
+                reason: e.reason === '' ? '-':e.reason,
+                status: e.status,
+            };
+        });
+        rows.value = datalist;
+    }
+
+    return {
+        fecthList,
+        rows,
+        visibleColumns,
+        columns
+    };
+})
\ No newline at end of file
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index cc1a92d0f..8f038ca43 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -49,8 +49,8 @@ const paginationLabel = (start: string, end: string, total: string) => {
 const clickAdd = () => {
   router.push(`/discipline/investigatefacts/add`);
 };
-onMounted(() => {
-  fecthList([
+onMounted(async() => {
+ await fecthList([
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",

From fea2d8f972a1be3128822d3b2030f238f1989f60 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 26 Oct 2023 16:55:20 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20UI?=
 =?UTF-8?q?=20-=20=E0=B8=AA=E0=B8=B7=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B9=80=E0=B8=97=E0=B9=87=E0=B8=88?=
 =?UTF-8?q?=E0=B8=88=E0=B8=A3=E0=B8=B4=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/2_InvestigateFacts/MainPage.vue    | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 8f038ca43..72eb8c80f 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -34,17 +34,13 @@ const resetFilter = () => {
 };
 
 const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
 });
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
+
 
 const clickAdd = () => {
   router.push(`/discipline/investigatefacts/add`);
@@ -156,7 +152,6 @@ onMounted(async() => {
         class="custom-header-table"
         v-bind="attrs"
         :visible-columns="dataInvestigate.visibleColumns"
-        :pagination-label="paginationLabel"
         v-model:pagination="pagination"
       >
         <template v-slot:header="props">
@@ -176,9 +171,9 @@ onMounted(async() => {
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <q-td v-if="col.name == 'no'">
+              <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
-              </q-td>
+              </div>
               <div>
                 {{ col.value }}
               </div>
@@ -192,8 +187,8 @@ onMounted(async() => {
                   v-if="props.row.status === 'ยุติเรื่อง'"
                   for="#cancel"
                   dense
-                  outline
-                  color="deep-orange-7"
+                  unelevated 
+                  color="primary"
                   class="q-px-sm"
                   >ยกเลิกยุติเรื่อง</q-btn
                 >