UI รายการข้าราชการฯที่ได้รับทุนการศึกษา

src/modules/15_development/components/scholarship/DetailView.vue

@@ -3,6 +3,13 @@ import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
+import type {
+  DataOption,
+  DataPerson,
+} from "@/modules/15_development/interface/index/Main";
+
+import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
@@ -11,37 +18,53 @@ const route = useRoute();
 const { dialogConfirm, showLoader, hideLoader, date2Thai } = useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+const modalDialogGov = ref<boolean>(false);
 
-const budgetSourceOp = ref<any>(["แหล่งงบประมาณกทม", "แหล่งงบประมาณอื่นๆ"]);
+const budgetSourceOp = ref<DataOption[]>([
-const scholarshipTypeOp = ref<any>([
+  { id: "1", name: "แหล่งงบประมาณกทม" },
-  { id: "1", label: "การศึกษาในประเทศ" },
+  { id: "2", name: "แหล่งงบประมาณอื่นๆ" },
+]);
+const scholarshipTypeOp = ref<DataOption[]>([
+  { id: "1", name: "การศึกษาในประเทศ" },
   {
     id: "2",
-    label:
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
-      "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
   },
   {
     id: "3",
-    label:
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
-      "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
   },
   {
     id: "4",
-    label:
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
-      "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
   },
 ]);
-const scholarshipTypeShortOp = ref<any>(["ทุน 1 (ก)(ข)(ค)", "ทุน 2 (ก)(ข)"]);
+const scholarshipTypeShortOp = ref<DataOption[]>([
+  { id: "1", name: "ทุน 1 (ก)(ข)(ค)" },
+  { id: "2", name: "ทุน 2 (ก)(ข)" },
+]);
 
 const isGov = ref<boolean>(false);
+const isGuarantor = ref<boolean>(false);
+const isSelectGov = ref<boolean>(false);
 const dataPerson = reactive({
   id: "",
-  citizenId: "123xxxxxxxxxx",
+  citizenId: "",
-  name: "นางสาวสาวิตรี ศรีสมัย",
+  name: "",
-  position: "นักทรัพยากรบุคคล",
+  position: "",
-  type: "ทั่วไป",
+  type: "",
-  level: "ปฏิบัติงาน",
+  level: "",
-  positionPath: "นักทรัพยากรบุคคล",
+  positionSide: "",
+  org: "-",
+});
+const dataGuarantor = reactive({
+  id: "",
+  citizenId: "",
+  name: "",
+  position: "",
+  type: "",
+  level: "",
+  positionSide: "",
   org: "-",
 });
 const formData = reactive({
@@ -89,6 +112,35 @@ function changeTrainingDateStart() {
   }
 }
 
+function onSelectGov(isGov: boolean) {
+  isSelectGov.value = isGov;
+  modalDialogGov.value = true;
+}
+
+function upDate(data: DataPerson) {
+  if (isSelectGov.value) {
+    dataPerson.id = data.id ? data.id : "-";
+    dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
+    dataPerson.name = data.name ? data.name : "-";
+    dataPerson.position = data.position ? data.position : "-";
+    dataPerson.type = data.type ? data.type : "-";
+    dataPerson.level = data.level ? data.level : "-";
+    dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
+    // dataPerson.org = data.
+    isGov.value = true;
+  } else {
+    dataGuarantor.id = data.id ? data.id : "-";
+    dataGuarantor.citizenId = data.citizenId ? data.citizenId : "-";
+    dataGuarantor.name = data.name ? data.name : "-";
+    dataGuarantor.position = data.position ? data.position : "-";
+    dataGuarantor.type = data.type ? data.type : "-";
+    dataGuarantor.level = data.level ? data.level : "-";
+    dataGuarantor.positionSide = data.positionSide ? data.positionSide : "-";
+    // dataGuarantor.org = data.
+    isGuarantor.value = true;
+  }
+}
+
 onMounted(() => {
   isGov.value = route.params.id ? true : false;
 });
@@ -112,7 +164,14 @@ onMounted(() => {
         <q-card bordered tyle="border: 1px solid #d6dee1">
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
             ข้อมูลราชการ
-            <q-btn flat dense icon="add" color="primary" label="เลือกข้าราชการ">
+            <q-btn
+              flat
+              dense
+              icon="add"
+              color="primary"
+              label="เลือกข้าราชการ"
+              @click="onSelectGov(true)"
+            >
               <q-tooltip>เพิ่ม</q-tooltip>
             </q-btn>
           </div>
@@ -146,7 +205,7 @@ onMounted(() => {
                 </div>
                 <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.positionPath }}
+                  {{ dataPerson.positionSide }}
                 </div>
                 <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                 <div class="col-8 text-weight-medium">{{ dataPerson.org }}</div>
@@ -178,6 +237,7 @@ onMounted(() => {
               <q-input
                 dense
                 outlined
+                class="inputgreen"
                 :model-value="
                   formData.year ? Number(formData.year) + 543 : null
                 "
@@ -203,10 +263,15 @@ onMounted(() => {
           <q-select
             dense
             outlined
+            class="inputgreen"
             label="แหล่งงบประมาณ"
             hide-bottom-space
             v-model="formData.budgetSource"
             :options="budgetSourceOp"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
             :rules="[
             (val:string) =>
               !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
@@ -218,6 +283,7 @@ onMounted(() => {
             dense
             outlined
             hide-bottom-space
+            class="inputgreen"
             v-model="formData.approveBudget"
             label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
             mask="###,###,###,###,###,###"
@@ -232,6 +298,7 @@ onMounted(() => {
           <q-input
             dense
             outlined
+            class="inputgreen"
             v-model="formData.approveNumber"
             label="เลขที่หนังสิออนุมัติ"
             mask="#"
@@ -259,6 +326,7 @@ onMounted(() => {
               <q-input
                 dense
                 outlined
+                class="inputgreen"
                 :model-value="formData.date ? date2Thai(formData.date) : null"
                 :label="`${'ลงวันที่'}`"
                 hide-bottom-space
@@ -295,6 +363,7 @@ onMounted(() => {
               <q-input
                 dense
                 outlined
+                class="inputgreen"
                 :model-value="
                   formData.approveDate ? date2Thai(formData.approveDate) : null
                 "
@@ -329,6 +398,7 @@ onMounted(() => {
           <q-input
             outlined
             dense
+            class="inputgreen"
             v-model="formData.detail"
             label="เปลี่ยนแปลงรายละเอียด"
             rows="3"
@@ -348,21 +418,17 @@ onMounted(() => {
             lazy-rules
             v-model="formData.scholarshipType"
             :options="scholarshipTypeOp"
-            option-label="label"
+            option-label="name"
             option-value="id"
             emit-value
             map-options
-            input-class="text-red"
+            class="inputgreen"
             label="เลือกประเภททุน"
             :rules="[
           (val:string) =>
             !!val || `${'กรุณาเลือกประเภททุน'}`,
         ]"
-          >
+          />
-            <template v-slot:selected-item="scope">
-              <div class="text-primary">{{ scope.opt.label }}</div>
-            </template>
-          </q-select>
         </div>
         <div
           class="col-3"
@@ -375,20 +441,19 @@ onMounted(() => {
             outlined
             hide-bottom-space
             lazy-rules
+            class="inputgreen"
             v-model="formData.scholarshipTypeShort"
             :options="scholarshipTypeShortOp"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
             label="ประเภททุน"
             :rules="[
           (val:string) =>
             !!val || `${'กรุณาเลือกประเภททุน'}`,
         ]"
-          >
+          />
-            <template v-slot:selected>
-              <div class="text-primary">
-                {{ formData.scholarshipTypeShort }}
-              </div>
-            </template>
-          </q-select>
         </div>
         <div
           class="col-12"
@@ -406,6 +471,7 @@ onMounted(() => {
                 reverse-fill-mask
                 label="เลขที่สัญญา"
                 mask="#"
+                class="inputgreen"
                 v-model="formData.contractNumber"
                 :rules="[
         (val:string) =>
@@ -428,6 +494,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    class="inputgreen"
                     :model-value="
                       formData.contractDate
                         ? date2Thai(formData.contractDate)
@@ -459,6 +526,7 @@ onMounted(() => {
                 hide-bottom-space
                 reverse-fill-mask
                 lazy-rules
+                class="inputgreen"
                 v-model="formData.reportNumber"
                 mask="#"
                 label="เลขที่หนังสือรายงานตัวกลับ"
@@ -483,6 +551,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    class="inputgreen"
                     :model-value="
                       formData.reportDate
                         ? date2Thai(formData.reportDate)
@@ -523,12 +592,13 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    class="inputgreen"
                     :model-value="
                       formData.reportLetterDate
                         ? date2Thai(formData.reportLetterDate)
                         : null
                     "
-                    :label="`${'ลงวันที่'}`"
+                    :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
                     hide-bottom-space
                     :rules="[
       (val:string) =>
@@ -557,22 +627,50 @@ onMounted(() => {
                     icon="add"
                     color="primary"
                     label="เลือกผู้ค้ำประกัน"
+                    @click="onSelectGov(false)"
                   >
                     <q-tooltip>เพิ่ม</q-tooltip>
                   </q-btn>
                 </div>
                 <div class="col-12"><q-separator /></div>
-                <div class="row col-12 q-col-gutter-md q-pa-md">
+                <div
+                  class="row col-12 q-col-gutter-md q-pa-md"
+                  v-if="isGuarantor"
+                >
                   <div class="col">
                     <div class="row q-col-gutter-md">
                       <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                      <div class="col-8 text-weight-medium">123xxxxxxxxxx</div>
+                      <div class="col-8 text-weight-medium">
+                        {{ dataGuarantor.citizenId }}
+                      </div>
+                      <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                      <div class="col-8 text-weight-medium">
+                        {{ dataGuarantor.name }}
+                      </div>
+                      <div class="col-4 text-grey">ตำแหน่ง</div>
+                      <div class="col-8 text-weight-medium">
+                        {{ dataGuarantor.position }}
+                      </div>
+                      <div class="col-4 text-grey">ประเภท</div>
+                      <div class="col-8 text-weight-medium">
+                        {{ dataGuarantor.type }}
+                      </div>
                     </div>
                   </div>
                   <div class="col">
                     <div class="row q-col-gutter-md">
                       <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                      <div class="col-8 text-weight-medium">123xxxxxxxxxx</div>
+                      <div class="col-8 text-weight-medium">
+                        {{ dataGuarantor.level }}
+                      </div>
+                      <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                      <div class="col-8 text-weight-medium">
+                        {{ dataGuarantor.positionSide }}
+                      </div>
+                      <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                      <div class="col-8 text-weight-medium">
+                        {{ dataGuarantor.org }}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -589,6 +687,7 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 hide-bottom-space
+                class="inputgreen"
                 label="หลักสูตรการฝึกอบรม"
                 v-model="formData.trainingCourse"
                 :rules="[
@@ -603,6 +702,7 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 hide-bottom-space
+                class="inputgreen"
                 label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                 v-model="formData.institution"
                 :rules="[
@@ -630,6 +730,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    class="inputgreen"
                     :model-value="
                       formData.trainingDateStart
                         ? date2Thai(formData.trainingDateStart)
@@ -672,6 +773,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    class="inputgreen"
                     :model-value="
                       formData.trainingDateEnd
                         ? date2Thai(formData.trainingDateEnd)
@@ -703,6 +805,7 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 hide-bottom-space
+                class="inputgreen"
                 label="สถานที่ไปศึกษาดูงาน"
                 v-model="formData.studyPlace"
                 :rules="[
@@ -718,6 +821,7 @@ onMounted(() => {
                 lazy-rules
                 hide-bottom-space
                 label="หัวข้อไปศึกษาดูงาน"
+                class="inputgreen"
                 v-model="formData.studyTopic"
                 :rules="[
         (val:string) =>
@@ -745,6 +849,8 @@ onMounted(() => {
       </div>
     </q-card>
   </q-form>
+
+  <DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
 </template>
 
 <style scoped></style>

src/modules/15_development/interface/index/Main.ts

@@ -36,10 +36,30 @@ interface NewPagination {
   sortBy: string;
 }
 
+interface DataPerson {
+  id: string;
+  name: string;
+  prefix: string;
+  rank: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  level: string;
+  type: string;
+  posLevelId: string;
+  posTypeId: string;
+  position: string;
+  positionSide: string;
+  posNo: string;
+  oc: string;
+  [key: string]: any;
+}
+
 export type {
   DataOption,
   DataOptionCheckBox,
   ItemsMenu,
   NewPagination,
   FormFilter,
+  DataPerson,
 };