modal-detail

src/modules/05_placement/components/DialogFooter.vue

@@ -0,0 +1,90 @@
+<template>
+  <q-card-actions class="text-primary">
+    <q-space />
+    <q-btn
+      v-if="!editvisible"
+      flat
+      round
+      :disabled="editvisible"
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit"
+      icon="mdi-pencil-outline"
+    >
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+    </q-btn>
+    <div v-else>
+      <!-- <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :outline="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'red'"
+        @click="cancel()"
+        icon="mdi-undo"
+        v-if="modalEdit == true"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn> -->
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'public'"
+        @click="checkSave"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card-actions>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  editvisible: Boolean,
+  modalEdit: Boolean,
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits([
+  "update:editvisible",
+  "update:next",
+  "update:previous",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const cancel = async () => {
+  props.cancel();
+};
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then((success) => {
+  //       if (success) {
+  //       }
+  //     });
+  //   }
+};
+</script>

src/modules/05_placement/components/DialogHeader.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold">{{ tittle }}</q-toolbar-title>
+    <q-btn
+    icon="close"
+    unelevated
+    round
+    dense
+    @click="close"
+    style="color: #ff8080; background-color: #ffdede"
+      />
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>

src/modules/05_placement/components/PlacementTable.vue

@@ -3,11 +3,65 @@ import { ref, defineComponent, h } from "vue";
 import Table from "@/modules/05_placement/components/PlacementTableView.vue";
 import { useQuasar, QForm } from "quasar";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
+import DialogHeader from "@/modules/05_placement/components/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/DialogFooter.vue";
 const editvisible = ref<boolean>(false);
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
+const visibleColumns = ref<String[]>([]);
+const store = usePlacementDataStore();
+const filter = ref<string>("");
+const { placementData } = store;
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const position = ref<number>();
+const Name = ref<string>();
+const ExamOrder = ref<number>();
+const Unit = ref<string>();
+const ReportingDate = ref<string>();
+const BMAOfficer = ref<boolean>();
+const Status = ref<string>();
+const checkList = ref<string>();
 
+  const $q = useQuasar(); // show dialog
+
+const selectData = (props: TableName) => {
+  if (editvisible.value == true) {
+    editRow.value = false;
+    modalEdit.value = true;
+    modal.value = false;
+    edit.value = true;
+    position.value = props.position;
+    Name.value = props.Name;
+    ExamOrder.value = props.ExamOrder;
+    Unit.value = props.Unit;
+    ReportingDate.value = props.ReportingDate;
+    BMAOfficer.value = props.BMAOfficer;
+    Status.value = props.Status;
+    checkList.value = props.checkList;
+  }else{
+    editRow.value = false;
+    modalEdit.value = true;
+    modal.value = true;
+    edit.value = true;
+  }
+};
+
+placementData.mappingPosition.columns.length == 0
+  ? (visibleColumns.value = [
+      "position",
+      "Name",
+      "ExamOrder",
+      "Unit",
+      "ReportingDate",
+      "BMAOfficer",
+      "Status",
+      "checkList",
+    ])
+  : (visibleColumns.value = placementData.mappingPosition.columns);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "position",
@@ -66,7 +120,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "BMAOfficer",
-    align: "center",
+    align: "left",
     label: "ข้าราชการฯ กทม.",
     sortable: true,
     field: "BMAOfficer",
@@ -77,7 +131,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "Status",
-    align: "center",
+    align: "left",
     label: "สถานะการบรรจุ",
     sortable: true,
     field: "Status",
@@ -87,7 +141,7 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const rows = [
+const rows = ref<TableName[]>([
   {
     position: 1,
     Name: "setthawut",
@@ -96,6 +150,7 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
+    checkList:null
   },
   {
     position: 1,
@@ -105,6 +160,7 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "ยังไม่บรรจุ",
+    checkList:null
   },
   {
     position: 1,
@@ -114,6 +170,7 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
+    checkList:null
   },
 
   {
@@ -124,17 +181,20 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
+    checkList:null
   },
 
   {
     position: 1,
-    Name: "setthawut",
+    Name: "tee",
     ExamOrder: 1,
     Unit: "chamomind",
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-  },{
+    checkList:null
+  },
+  {
     position: 1,
     Name: "setthawut",
     ExamOrder: 1,
@@ -142,18 +202,37 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
+    checkList:null
   },
-
+]);
-];
 const clickCancel = async () => {
   editvisible.value = false;
 };
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+    });
+  } else {
+    modal.value = false;
+  }
+};
 </script>
 <template>
   <q-form ref="myForm">
     <Table
       :rows="rows"
       :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
       v-model:editvisible="editvisible"
       :cancel="clickCancel"
       :history="true"
@@ -218,7 +297,6 @@ const clickCancel = async () => {
                 round
                 size="14px"
                 icon="mdi-account-alert"
-                
               />
               <q-btn
                 color="red"
@@ -227,11 +305,9 @@ const clickCancel = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                
               />
             </div>
             <div v-else align="right">
-
               <q-btn
                 color="red"
                 flat
@@ -239,7 +315,6 @@ const clickCancel = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                
               />
             </div>
           </q-td>
@@ -247,4 +322,25 @@ const clickCancel = async () => {
       </template>
     </Table>
   </q-form>
+    <q-dialog v-model="modal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader
+          :tittle="`รายละเอียดของ`"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+     text
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :save="clickSave"
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>

src/modules/05_placement/components/PlacementTableView.vue

@@ -2,25 +2,25 @@
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm" v-if="nornmalData == false">
       <q-btn
-          v-if="!editvisible == true && publicNoBtn == false"
+        size="12px"
+        v-if="!editvisible"
         flat
         round
-          :disabled="editvisible == true"
+        :disabled="editvisible"
-          :color="editvisible == true ? 'grey-7' : 'primary'"
+        :color="editvisible ? 'grey-7' : 'primary'"
-          @click="edit"
+        @click="clickEdit"
         icon="mdi-pencil-outline"
       >
-        
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
       <q-btn
-          v-else
+        size="12px"
         flat
         round
-          :disabled="editvisible == false"
+        v-if="editvisible"
-          :outline="editvisible == false"
+        :disabled="!editvisible"
-          :color="editvisible == false ? 'grey-7' : 'red'"
+        :color="!editvisible ? 'grey-7' : 'red'"
-          @click="cancel()"
+        @click="clickCancel"
         icon="mdi-undo"
       >
         <q-tooltip>ยกเลิก</q-tooltip>
@@ -38,18 +38,13 @@
         </q-btn>
       </div>
 
-
-  
       <q-space />
       <div class="items-center" style="display: flex">
-
         <div
           class="row items-center"
           style="display: flex"
           v-if="publicData == false && publicNoBtn == false"
-          >
+        ></div>
-
-          </div>
 
         <q-input
           standout
@@ -91,28 +86,10 @@
         />
       </div>
     </div>
-      <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
+
     <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
       <span class="text-subtitle1">{{ titleText }}</span>
-        <!-- <q-select
+
-          :model-value="inputvisibleFilter"
-          :options="optionsFilter"
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        /> -->
-        <q-select
-          dense
-          outlined
-          :model-value="inputvisibleFilter"
-          :options="optionsFilter"
-          class="col-xs-12 col-sm-4 col-md-3"
-          option-value="id"
-          option-label="name"
-          map-options
-          emit-value
-          @update:model-value="updateVisibleFilter"
-          v-if="optionsFilter != undefined && optionsFilter.length > 0"
-        />
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
@@ -167,33 +144,21 @@
       dense
       :pagination-label="paginationLabel"
       :pagination="initialPagination"
-        :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
+      :rows-per-page-options="[0]"
     >
-        <!-- :pagination="initialPagination" -->
-        <!-- :rows-per-page-options="[0]" -->
       <template v-slot:header="props">
         <q-tr :props="props">
-  
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
-            <q-th
+          <q-th auto-width v-if="history == true" />
-              auto-width
-              v-if="
-                editvisible == true || nextPageVisible == true || history == true
-              "
-            />
-            
         </q-tr>
-          
       </template>
-        <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
       <template #body="props">
         <slot v-bind="props" name="columns"></slot>
       </template>
     </q-table>
   </div>
-    
 </template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
@@ -203,7 +168,7 @@
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { dialogMessage } = mixin;
-  
+const editvisible = ref<boolean>(false);
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -328,7 +293,16 @@
   //     });
   //   }
 };
-  
+const clickEdit = () => {
+  updateEdit(!props.editvisible);
+  editvisible.value = !editvisible.value;
+  props.edit();
+};
+const clickCancel = () => {
+  updateEdit(!props.editvisible);
+  editvisible.value = !editvisible.value;
+  props.cancel();
+};
 const publishModal = () => {
   props.validate();
   const filter = attrs.value.rows.filter((r: any) => r.name == "");
@@ -422,4 +396,3 @@
   }
 }
 </style>
-  

src/modules/05_placement/interface/request/placement.ts

@@ -1,5 +1,5 @@
 interface TableName {
-  position: string;
+  position: number;
   Name: string;
   ExamOrder: number;
   Unit: string;
@@ -10,20 +10,8 @@ interface TableName {
 
 }
 
-interface RequestReport2 {
-  organizationShortNameId: string;
-  organizationOrganizationId: string;
-  positionNumId: string;
-  positionTypeId: string;
-  positionExecutiveId: string;
-  positionExecutiveSideId: string;
-  positionPathId: string;
-  positionPathSideId: string;
-  positionLevelId: string;
-  status: string | null;
-}
 
 export type {
   TableName,
-  RequestReport2,
+
 };

src/modules/05_placement/store.ts

@@ -1,5 +1,32 @@
 import { defineStore } from "pinia";
-
+import { ref, computed } from "vue";
 export const useProfileDataStore = defineStore("placement", () => {
   return {};
 });
+export const usePlacementDataStore = defineStore("placement", () => {
+  interface placement {
+    mappingPosition: { columns: String[] };
+  }
+  const placementData = ref<placement>({
+    mappingPosition: { columns: [] },
+  });
+  const changePlacementColumns = (system: String, val: String[]) => {
+    if (system == "mappingPosition")
+      placementData.value.mappingPosition.columns = val;
+    localStorage.setItem(
+      "placement",
+      JSON.stringify(placementData.value)
+    );
+  };
+
+  if (localStorage.getItem("placement") !== null) {
+    placementData.value = JSON.parse(
+      localStorage.getItem("placement") || "{}"
+    );
+  }
+
+  return {
+    placementData,
+    changePlacementColumns,
+  };
+});