Merge branch 'oat_dev' into develop

src/modules/15_development/components/MainTab.vue

@@ -17,6 +17,7 @@ import Target from "@/modules/15_development/components/Target.vue";
 import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue";
 import FollowResult from "@/modules/15_development/components/FollowResult.vue";
 import Other from "@/modules/15_development/components/Other.vue";
+import Record from "@/modules/15_development/components/Record.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
@@ -252,6 +253,7 @@ onUnmounted(() => {
         <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
         <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
         <q-tab name="Other" label="อื่นๆ" />
+        <q-tab name="Record" label="บันทึกผล" />
       </q-tabs>
       <q-separator />
       <div class="q-pa-sm" style="padding: 0px">
@@ -263,6 +265,7 @@ onUnmounted(() => {
           <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
           <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
           <q-tab-panel name="Other"> <Other /> </q-tab-panel>
+          <q-tab-panel name="Record"> <Record /> </q-tab-panel>
         </q-tab-panels>
       </div>
     </q-card>

src/modules/15_development/components/Record.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+const mixin = useCounterMixin();
+
+const { date2Thai } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "idcard",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "FullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงานที่สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "idcard",
+  "fullName",
+  "position",
+  "posTypeName",
+  "posLevelName",
+  "posExecutive",
+  "org",
+  "refCommandNo",
+  "refCommandDate",
+]);
+const files = ref<File[]>([]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+const keyword = ref<string>("");
+const row = [
+  {
+    idcard: "1234567890121",
+    prefix: "นาง",
+    firstName: "ณัฐนิชา",
+    lastName: "เป็งกำปอง",
+    position: "นักวิชาการสถิติ",
+    posTypeName: "วิชาการ",
+    posLevelName: "ชำนาญการ",
+    posExecutive: "นักบริหาร",
+    org: "สาขาสถิติ",
+    refCommandNo: "25/2566",
+    refCommandDate: new Date(),
+  },
+  {
+    idcard: "2222222222222",
+    prefix: "นาย",
+    firstName: "สมศักดิ์",
+    lastName: "กำแหง",
+    position: "นักการไฟฟ้า",
+    posTypeName: "วิชาการ",
+    posLevelName: "สูง",
+    posExecutive: "นักการช่าง",
+    org: "อิเล็กทรอนิกส์",
+    refCommandNo: "12/2565",
+    refCommandDate: new Date(),
+  },
+];
+</script>
+
+<template>
+  <q-toolbar style="padding: 0px" class="text-primary q-mb-xs">
+    <q-file
+      v-model="files"
+      dense
+      label="'อัปโหลดไฟล์"
+      outlined
+      use-chips
+      accept=".xlsx"
+      multiple
+      class="col-xs-12 col-sm-4"
+    >
+      <template v-slot:prepend>
+        <q-icon name="attach_file" color="blue" />
+      </template>
+    </q-file>
+    <q-btn size="md" icon="mdi-upload" round flat color="blue">
+      <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+      <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"
+      options-cover
+      style="min-width: 150px"
+      class="q-mr-sm"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="row"
+    :paging="true"
+    :filter="keyword"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[20, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <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 auto-width />
+      </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.id">
+          <div v-if="col.name === 'fullName'">
+            {{
+              props.row.prefix +
+              " " +
+              props.row.firstName +
+              " " +
+              props.row.lastName
+            }}
+          </div>
+          <div v-else>{{ col.value ? col.value : "-" }}</div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="primary"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            icon="mdi-pencil-outline"
+            clickable
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn color="info" flat dense round size="14px" icon="mdi-history">
+            <q-tooltip>ประวัติบันทึกผล</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+</template>
+
+<style scoped></style>

src/modules/15_development/components/Target.vue

@@ -26,7 +26,9 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const { dialogRemove, success, messageError } = useCounterMixin();
-
+const groupTargetData: any = reactive({
+  targetData: [{}],
+});
 const columnsPlannedGoals = ref<QTableProps["columns"]>([
   {
     name: "groupTarget",
@@ -142,7 +144,10 @@ const groupSubOp = ref<DataOption[]>([
   { id: "EDUCATIONAL", name: "บุคลากรทางการศึกษากรุงเทพมหานคร" },
 ]);
 
+const isEdit = ref<boolean>(false);
+const rowIndex = ref<number>(null);
 const modalGroupTarget = ref<boolean>(false);
+const newModalGroupTarget = ref<boolean>(false);
 const modalRelate = ref<boolean>(false);
 const isTarget = ref<string>("");
 
@@ -187,7 +192,7 @@ function fetchType() {
 function onClickOpenDialog(type: string, target: string) {
   isTarget.value = target;
   if (type === "group") {
-    modalGroupTarget.value = true;
+    newModalGroupTarget.value = true;
   } else {
     modalRelate.value = true;
   }
@@ -285,10 +290,12 @@ function cleanFormData() {
   formGroupTarget.amount = null;
   formGroupRelate.relate = "";
   formGroupRelate.amount = null;
+  isEdit.value = false;
 }
 
 function onClickCloseDialog() {
-  modalGroupTarget.value = false;
+  newModalGroupTarget.value = false;
+  groupTargetData.targetData = [{}];
   modalRelate.value = false;
   cleanFormData();
 }
@@ -327,6 +334,18 @@ function convertTypeGoals(id: string) {
   return data && data?.posTypeName;
 }
 
+const addGroupTargetData = async () => {
+  groupTargetData.targetData.push({
+    position: "",
+    posType: "",
+    level: "",
+  });
+};
+
+function deleteTargetData(index: any) {
+  groupTargetData.targetData.splice(index, 1);
+}
+
 onMounted(() => {
   fetchType();
   plannedGoals.value = store.formAddProject.plannedGoals
@@ -406,6 +425,22 @@ onMounted(() => {
               </q-td>
               <q-td>
                 <q-btn
+                  round
+                  flat
+                  color="primary"
+                  icon="mdi-pencil-outline"
+                  size="14px"
+                  @click="
+                    () => {
+                      isEdit = true;
+                      rowIndex = props.rowIndex;
+                      newModalGroupTarget = true;
+                    }
+                  "
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+                >
+                <!-- <q-btn
                   flat
                   round
                   dense
@@ -414,7 +449,7 @@ onMounted(() => {
                   @click="onclickDelete(props.rowIndex, 'plannedGoals')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
+                </q-btn> -->
               </q-td>
             </q-tr>
           </template>
@@ -527,6 +562,22 @@ onMounted(() => {
               </q-td>
               <q-td>
                 <q-btn
+                  round
+                  flat
+                  color="primary"
+                  icon="mdi-pencil-outline"
+                  size="14px"
+                  @click="
+                    () => {
+                      isEdit = true;
+                      rowIndex = props.rowIndex;
+                      newModalGroupTarget = true;
+                    }
+                  "
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+                >
+                <!-- <q-btn
                   flat
                   round
                   dense
@@ -535,7 +586,7 @@ onMounted(() => {
                   @click="onclickDelete(props.rowIndex, 'actualGoals')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
+                </q-btn> -->
               </q-td>
             </q-tr>
           </template>
@@ -764,6 +815,222 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="newModalGroupTarget" persistent>
+    <q-card style="width: 700px">
+      <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
+        <DialogHeader
+          :tittle="
+            isEdit ? 'แก้ไขกลุ่มเป้าหมาย (ใหม่)' : 'เพิ่มกลุ่มเป้าหมาย (ใหม่)'
+          "
+          :close="onClickCloseDialog"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-md">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                v-model="formGroupTarget.groupTarget"
+                :options="groupOp"
+                label="กลุ่มเป้าหมาย"
+                hide-bottom-space
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
+                lazy-rules
+                class="inputgreen"
+                @update:model-value="updateGroupTarget"
+                :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
+              ]"
+              />
+            </div>
+            <div
+              class="col-xs-6 col-sm-6 col-md-6"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
+              <q-select
+                dense
+                outlined
+                class="inputgreen"
+                v-model="formGroupTarget.groupTargetSub"
+                :options="
+                  formGroupTarget.groupTarget === 'OFFICER'
+                    ? groupSubOp.slice(0, 2)
+                    : groupSubOp.slice(2, 5)
+                "
+                label="กลุ่มเป้าหมายย่อย"
+                hide-bottom-space
+                lazy-rules
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
+                :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
+              ]"
+              />
+            </div>
+            <div
+              class="col-12 row items-center"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
+              <div class="text-weight-bold">เพิ่ม</div>
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="add"
+                size="14px"
+                @click="addGroupTargetData()"
+              >
+                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+              </q-btn>
+            </div>
+            <div
+              v-for="(items, index) in groupTargetData.targetData"
+              class="col-12 row q-col-gutter-md"
+            >
+              <div
+                class="col"
+                v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+              >
+                <q-input
+                  outlined
+                  dense
+                  hide-bottom-space
+                  class="inputgreen"
+                  v-model="items.position"
+                  label="ตำแหน่ง"
+                  :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณากรอกตำแหน่ง'}`,
+              ]"
+                />
+              </div>
+              <div
+                class="col"
+                v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+              >
+                <q-select
+                  dense
+                  outlined
+                  hide-bottom-space
+                  lazy-rules
+                  class="inputgreen"
+                  v-model="items.posType"
+                  :options="posTypeOp"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  input-class="text-red"
+                  label="ประเภทตำแหน่ง"
+                  @update:model-value="updatePosTypeName"
+                  :rules="[
+                    (val:string) =>
+                    !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
+                     ]"
+                />
+              </div>
+              <div
+                class="col"
+                v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+              >
+                <q-select
+                  dense
+                  outlined
+                  hide-bottom-space
+                  lazy-rules
+                  class="inputgreen"
+                  v-model="items.level"
+                  :options="posLevelOp"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  input-class="text-red"
+                  label="ระดับ"
+                  :rules="[
+        (val:string) =>
+          !!val || `${'กรุณาเลือกระดับ'}`,
+      ]"
+                />
+              </div>
+              <div
+                class="col-1 q-mt-sm"
+                v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+              >
+                <q-btn
+                  flat
+                  dense
+                  size="12px"
+                  round
+                  color="red"
+                  icon="mdi-delete"
+                  @click="deleteTargetData(index)"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+            <div
+              class="col-xs-6 col-sm-6 col-md-8"
+              v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
+            >
+              <q-input
+                outlined
+                dense
+                class="inputgreen"
+                hide-bottom-space
+                v-model="formGroupTarget.type"
+                label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
+                :rules="[
+              (val:string) =>
+                !!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
+            ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-input
+                outlined
+                dense
+                hide-bottom-space
+                class="inputgreen"
+                v-model="formGroupTarget.amount"
+                label="จำนวน(คน)"
+                mask="#"
+                reverse-fill-mask
+                :rules="[
+              (val:string) =>
+                !!val || `${'กรุณากรอกจำนวน(คน)'}`,
+            ]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
   <q-dialog v-model="modalRelate" persistent>
     <q-card style="width: 400px">
       <q-form greedy @submit.prevent @validation-success="onSubmitRelate">