UI แต่งตั้งคณะกรรมการทดลองงาน

src/api/05_placement/api.probation.ts

@@ -85,5 +85,6 @@ export default {
   orgProfileStatus: (profileId: string) =>
     `${orgProfile}/profile/probation/${profileId}`,
 
-  appointMain
+  appointMain,
+  appointMainList:(id:string)=>`${appointMain}/list/${id}`,
 };

src/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+import type { AppointMainRows } from "@/modules/05_placement/interface/request/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
+
+/** use */
+const $q = useQuasar();
+const selected = ref<AppointMainRows[]>([]);
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const filterKeyword = defineModel<string>("filterKeyword", { required: true });
+const rows = defineModel<AppointMainRows[]>("rows", { required: true });
+/** props*/
+const props = defineProps({
+  modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+});
+
+/** ฟังก์ชั่นการ Selected Data*/
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+//Table
+const visibleColumns = ref<string[]>(["no", "topic", "commandNo", "status"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อ",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "commandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const modalCommand = ref<boolean>(false);
+
+/** popup ยืนยันส่งัว */
+function saveOrder() {
+  dialogConfirm(
+    $q,
+    () => {
+      props.closeModal?.();
+      modalCommand.value = true;
+    },
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+}
+
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+function updateInput(value: any) {
+  emit("update:filterKeyword2", value);
+}
+
+/** รีเซ็ตค่าในช่องค้นหา */
+function Reset() {
+  emit("update:filterKeyword2", "");
+}
+
+/** แปลง EN to THAI */
+function convertText(val: string) {
+  switch (val) {
+    case "PENDING":
+      return "รอดำเนินการ";
+    case "REPORT":
+      return "ส่งไปเเต่งตั้ง";
+    case "DONE":
+      return "เสร็จสิ้น";
+    default:
+      "-";
+  }
+}
+
+watchEffect(() => {
+  if (props.modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
+                </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="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="id"
+          :visible-columns="visibleColumns"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{
+                    (pagination.page - 1) * pagination.rowsPerPage +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div v-else-if="col.name == 'status'">
+                  {{ props.row.status ? convertText(props.row.status) : "-" }}
+                </div>
+
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogCreateCommand
+    v-model:modal="modalCommand"
+    :command-type-code="'C-PM-10'"
+    :persons="selected"
+    :not-person="true"
+  />
+</template>

src/modules/05_placement/components/probation/FormAssign.vue

@@ -7,6 +7,10 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import genReport from "@/plugins/genreport";
+import type {
+  AppointTopic,
+  AppointTopicMain,
+} from "@/modules/05_placement/interface/index/Main";
 
 const $q = useQuasar();
 const isEdit = ref<boolean>(false);
@@ -27,6 +31,10 @@ const personalId = route.params.personalId as string;
 const assignId = ref<string>(route.params.form as string);
 const routeName = router.currentRoute.value.name;
 
+const appointTopic = ref<AppointTopicMain>();
+const appointOp = ref<AppointTopicMain[]>([]);
+const appointAll = ref<AppointTopicMain[]>([]);
+
 const fullname = ref<string>();
 const date_start = ref<Date>();
 const date_finish = ref<any>();
@@ -121,19 +129,8 @@ const OPcaretaker = ref<
     positionLevel: string;
   }>[]
 >([]);
-const OPcommander = ref<
-  Array<{
-    id: string;
-    prefix: string;
-    firstName: string;
-    lastName: string;
-    name: string;
-    citizenId: number;
-    isDirector: boolean;
-    position: string;
-    positionLevel: string;
-  }>[]
->([]);
+const OPcaretakerNew = ref<any[]>([]);
+const OPcommander = ref<any[]>([]);
 const OPchairman = ref<
   Array<{
     id: string;
@@ -152,6 +149,10 @@ interface MonthOption {
   value: number;
   label: string;
 }
+interface optionsValue {
+  id: string;
+  name: string;
+}
 interface CheckboxItem {
   id: number;
   parent_id: number;
@@ -332,53 +333,53 @@ async function getUser() {
         position: item.position,
       }));
 
-      OPcommander.value = data.commander.map((item: any) => ({
-        id: item.id,
-        name:
-          (item.prefix == null ? "" : item.prefix) +
-          item.firstName +
-          " " +
-          item.lastName,
-        label: item.position
-          ? `${item.prefix == null ? "" : item.prefix} ${item.firstName} ${
-              item.lastName
-            } (${item.position}${
-              item.posLevel && item.posType
-                ? ", " + item.posType + ": " + item.posLevel
-                : ""
-            })`
-          : `${item.prefix == null ? "" : item.prefix} ${item.firstName} ${
-              item.lastName
-            }`,
-        citizenId: item.citizenId,
-        posLevel: item.posLevel,
-        posType: item.posType,
-        position: item.position,
-      }));
+      // OPcommander.value = data.commander.map((item: any) => ({
+      //   id: item.id,
+      //   name:
+      //     (item.prefix == null ? "" : item.prefix) +
+      //     item.firstName +
+      //     " " +
+      //     item.lastName,
+      //   label: item.position
+      //     ? `${item.prefix == null ? "" : item.prefix} ${item.firstName} ${
+      //         item.lastName
+      //       } (${item.position}${
+      //         item.posLevel && item.posType
+      //           ? ", " + item.posType + ": " + item.posLevel
+      //           : ""
+      //       })`
+      //     : `${item.prefix == null ? "" : item.prefix} ${item.firstName} ${
+      //         item.lastName
+      //       }`,
+      //   citizenId: item.citizenId,
+      //   posLevel: item.posLevel,
+      //   posType: item.posType,
+      //   position: item.position,
+      // }));
 
-      OPchairman.value = data.chairman.map((item: any) => ({
-        id: item.id,
-        name:
-          (item.prefix == null ? "-" : item.prefix) +
-          item.firstName +
-          " " +
-          item.lastName,
-        label: item.position
-          ? `${item.prefix == null ? "-" : item.prefix} ${item.firstName} ${
-              item.lastName
-            } (${item.position}${
-              item.posLevel && item.posType
-                ? ", " + item.posType + ": " + item.posLevel
-                : ""
-            })`
-          : `${item.prefix == null ? "-" : item.prefix} ${item.firstName} ${
-              item.lastName
-            }`,
-        citizenId: item.citizenId,
-        posLevel: item.posLevel,
-        posType: item.posType,
-        position: item.position,
-      }));
+      // OPchairman.value = data.chairman.map((item: any) => ({
+      //   id: item.id,
+      //   name:
+      //     (item.prefix == null ? "-" : item.prefix) +
+      //     item.firstName +
+      //     " " +
+      //     item.lastName,
+      //   label: item.position
+      //     ? `${item.prefix == null ? "-" : item.prefix} ${item.firstName} ${
+      //         item.lastName
+      //       } (${item.position}${
+      //         item.posLevel && item.posType
+      //           ? ", " + item.posType + ": " + item.posLevel
+      //           : ""
+      //       })`
+      //     : `${item.prefix == null ? "-" : item.prefix} ${item.firstName} ${
+      //         item.lastName
+      //       }`,
+      //   citizenId: item.citizenId,
+      //   posLevel: item.posLevel,
+      //   posType: item.posType,
+      //   position: item.position,
+      // }));
     });
 }
 
@@ -630,6 +631,7 @@ function putDataEdit(id: string) {
     });
   }
   const data = {
+    appointId: appointTopic.value ? appointTopic.value.id : "",
     fullname: fullname.value,
     position: position.value,
     monthSelect:
@@ -762,6 +764,7 @@ function putData(id: string) {
     });
   }
   const data = {
+    appointId: appointTopic.value ? appointTopic.value.id : "",
     personalId: GUID,
     fullname: fullname.value,
     position: position.value,
@@ -954,9 +957,9 @@ watch(
  * @param update fn
  */
 function filterFnCaretaker(val: string, update: any) {
-  const dataFilter = filtermantor(OPcaretaker.value, [caretaker2.value]).filter(
-    (i: any) => i.id !== chairman.value.id
-  );
+  const dataFilter = filtermantor(OPcaretakerNew.value, [
+    caretaker2.value,
+  ]).filter((i: any) => i.id !== chairman.value.id);
   if (val == "") {
     update(() => {
       optionCaretaker.value = dataFilter;
@@ -1022,25 +1025,6 @@ function filterFnCommander(val: string, update: any) {
  * @param update fn
  */
 
-function filterFnChairman(val: string, update: any) {
-  const dataFilter = OPchairman.value.filter(
-    (i: any) =>
-      i.id !== caretaker1.value.id &&
-      i.id !== caretaker2.value.id &&
-      i.id !== commander.value.id
-  );
-  if (val == "") {
-    update(() => {
-      OPchairmanFn.value = dataFilter;
-    });
-  } else {
-    update(() => {
-      OPchairmanFn.value = dataFilter.filter(
-        (e: any) => e.name.search(val) !== -1
-      );
-    });
-  }
-}
 /**
  * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
  * @param val รับค่า input
@@ -1058,6 +1042,73 @@ function filterFnKnowledge(val: string, update: any) {
   });
 }
 
+async function getAppoint(id: string) {
+  http
+    .get(config.API.appointMainList(id))
+    .then((res) => {
+      const data = res.data.data;
+      appointOp.value = data;
+      appointAll.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function updateAppointMent() {
+  if (appointTopic.value) {
+    const data = appointTopic.value.directors;
+
+    const dataFindChairman = data.find(
+      (item: AppointTopic) => item.role === "chairman"
+    );
+    const dataFindCommittee = data
+      .filter((item: AppointTopic) => item.role === "committee")
+      .map((i: AppointTopic) => ({
+        id: i.id,
+        name: i.name,
+        label: i.position
+          ? `${i.name} (${i.position}${
+              i.positionLevel && i.positionType
+                ? ", " + i.positionType + ": " + i.positionLevel
+                : ""
+            })`
+          : i.name,
+        posLevel: i.positionLevel,
+        posType: i.positionType,
+        position: i.position,
+      }));
+    const createChairmanObject = (chairmanData: AppointTopic) => ({
+      id: chairmanData.id,
+      name: chairmanData.name,
+      label: chairmanData.position
+        ? `${chairmanData.name} (${chairmanData.position}${
+            chairmanData.positionLevel && chairmanData.positionType
+              ? ", " +
+                chairmanData.positionType +
+                ": " +
+                chairmanData.positionLevel
+              : ""
+          })`
+        : chairmanData.name,
+      posLevel: chairmanData.positionLevel,
+      posType: chairmanData.positionType,
+      position: chairmanData.position,
+    });
+
+    OPcaretakerNew.value = dataFindCommittee;
+    OPcommander.value = dataFindCommittee;
+
+    OPchairmanFn.value = dataFindChairman
+      ? createChairmanObject(dataFindChairman)
+      : null;
+    chairman.value = dataFindChairman
+      ? createChairmanObject(dataFindChairman)
+      : null;
+  }
+}
+
 /** เมื่อโหลดหน้า เรียกใช้งานฟังชั่น */
 onMounted(async () => {
   await getUser();
@@ -1067,6 +1118,7 @@ onMounted(async () => {
   await getKnowledge(personalId);
   await getcompetency(personalId);
   await getCompetencyGroup(personalId);
+  await getAppoint(personalId);
   if (assignId.value !== undefined) {
     await getAssign();
   }
@@ -1182,6 +1234,25 @@ onMounted(async () => {
         <div class="row col-12">
           <div class="row col-12 q-gutter-lg">
             <div class="col-12 row">
+              <div class="col-6 q-mb-sm">
+                <q-select
+                  outlined
+                  dense
+                  label="เลือกคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
+                  bg-color="white"
+                  :rules="[(val:string) => !!val || 'กรุณาเลือกคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ']"
+                  hide-bottom-space
+                  :options="appointOp"
+                  class="col-xs-12 col-sm-6"
+                  :readonly="!isEdit && routeName !== 'probationWorkAdd'"
+                  borderless
+                  option-label="topic"
+                  option-value="id"
+                  v-model="appointTopic"
+                  map-options
+                  @update:model-value="updateAppointMent"
+                ></q-select>
+              </div>
               <div class="col-12 text-top0 items-center">
                 <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
                 ผู้ทดลองปฏิบัติหน้าที่ราชการ
@@ -1329,7 +1400,7 @@ onMounted(async () => {
                 <q-select
                   :rules="[(val:string) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                   option-value="id"
-                  :options="optionCaretaker"
+                  :options="OPcaretakerNew"
                   class="col-xs-12 col-sm-6"
                   :readonly="isEdit != true"
                   dense
@@ -1384,7 +1455,7 @@ onMounted(async () => {
                 <q-select
                   :rules="[(val:string) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                   option-value="id"
-                  :options="filtermantor(OPcaretaker, [caretaker2])"
+                  :options="filtermantor(OPcaretakerNew, [caretaker2])"
                   class="col-xs-12 col-sm-6"
                   :readonly="!isEdit && routeName !== 'probationWorkAdd'"
                   dense
@@ -2912,16 +2983,14 @@ onMounted(async () => {
                   :options="OPchairmanFn"
                   option-label="label"
                   class="col-xs-12 col-sm-8"
-                  :readonly="isEdit != true"
+                  readonly
                   dense
                   borderless
                   outlined
                   v-model="chairman"
                   label="ประธานกรรมการ"
-                  :rules="[(val:string) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
                   use-input
                   behavior="menu"
-                  @filter="filterFnChairman"
                   bg-color="white"
                 >
                   <template v-slot:no-option>
@@ -2939,16 +3008,14 @@ onMounted(async () => {
                   option-value="id"
                   option-label="label"
                   class="col-xs-12 col-sm-8"
-                  :readonly="!isEdit && routeName !== 'probationWorkAdd'"
+                  readonly
                   dense
                   borderless
                   outlined
                   v-model="chairman"
-                  :rules="[(val:string) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
                   label="ประธานกรรมการ"
                   use-input
                   behavior="menu"
-                  @filter="filterFnChairman"
                   bg-color="white"
                 >
                   <template v-slot:no-option>
@@ -3014,7 +3081,7 @@ onMounted(async () => {
 .q-item span {
   white-space: normal;
   display: -webkit-box;
- // -webkit-line-clamp: 2;
+  // -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;

src/modules/05_placement/components/probation/MainAppoint.vue

@@ -9,6 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 
 import type { AppointMainRows } from "@/modules/05_placement/interface/request/Main";
+import DialogOrder from "@/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
@@ -16,7 +17,11 @@ const { dialogRemove, showLoader, hideLoader, messageError, success } = mixin;
 const router = useRouter();
 
 const rows = ref<AppointMainRows[]>([]);
+const rowsOrder = ref<AppointMainRows[]>([]);
+
 const filterKeyword = ref<string>("");
+const filterKeywordOrder = ref<string>("");
+const modalOrder = ref<boolean>(false);
 
 const total = ref<number>(0);
 const totalList = ref<number>(1);
@@ -137,6 +142,17 @@ function convertText(val: string) {
   }
 }
 
+function onSendOrder() {
+  modalOrder.value = true;
+  rowsOrder.value = rows.value.filter(
+    (item: AppointMainRows) => item.status == "PENDING"
+  );
+}
+
+function closeModal() {
+  modalOrder.value = false;
+  rowsOrder.value = [];
+}
 watch(
   () => pagination.value.rowsPerPage,
   async () => {
@@ -149,13 +165,26 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-card flat>
+  <q-card flat class="q-pa-sm">
     <div class="row q-col-gutter-sm">
       <div class="col-12">
-        <div class="row q-gutter-x-sm">
+        <div class="row">
+          <div class="q-px-sm">
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              dense
+              color="add"
+              icon="mdi-account-arrow-right"
+              @click="onSendOrder"
+              ><q-tooltip>ส่งไปออกคำสั่ง</q-tooltip></q-btn
+            >
+          </div>
+
           <q-space />
           <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
+            class="col-xs-12 col-sm-3 col-md-2 q-mr-sm"
             standout
             dense
             v-model="filterKeyword"
@@ -296,4 +325,12 @@ onMounted(async () => {
       </div>
     </div>
   </q-card>
+
+  <DialogOrder
+    v-model:modal="modalOrder"
+    :close-modal="closeModal"
+    v-model:rows="rowsOrder"
+    v-model:filter-keyword="filterKeywordOrder"
+    :get-data="getData"
+  />
 </template>

src/modules/05_placement/components/probation/MainTabs.vue

@@ -40,7 +40,7 @@ const tabsManu = ref<ItemTabs[]>([
       <q-tab-panel name="probation" class="q-pa-sm">
         <ProbationPage />
       </q-tab-panel>
-      <q-tab-panel name="appoint">
+      <q-tab-panel name="appoint" class="q-pa-none">
         <AppointPage />
       </q-tab-panel>
     </q-tab-panels>

src/modules/05_placement/interface/index/Main.ts

@@ -341,6 +341,25 @@ interface PersonData {
   id: string;
 }
 
+interface AppointTopic {
+  id: string;
+  appointId: string;
+  profileId: string;
+  name: string;
+  position: string;
+  positionType: string;
+  positionLevel: string;
+  role: string;
+}
+
+interface AppointTopicMain {
+  id: string;
+  profileId: string;
+  topic: string;
+  commandNo: string;
+  status: string;
+  directors: AppointTopic[];
+}
 export type {
   DataOption,
   DataOptionInsignia,
@@ -367,6 +386,8 @@ export type {
   ListMenu,
   DataEducation,
   PersonData,
+  AppointTopic,
+  AppointTopicMain
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };

src/modules/18_command/components/DialogCreateCommand.vue

@@ -30,6 +30,10 @@ const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   commandTypeCode: String, // ไอดีประเภทคำสั่ง
   persons: Array, // ไอดีคนที่เลือกออกคำสั่งส่งมาเป็น array
+  notPerson: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
@@ -166,9 +170,10 @@ function createCommand(isRedirect: boolean) {
       commandYear: commandYear.value,
       commandNo: commandNo.value,
       commandTypeId: commandType.value,
-      persons: data,
+      persons: !props.notPerson ? data : [],
     };
 
+    console.log(body);
     await http
       .post(config.API.command + `/person`, body)
       .then(async (res) => {
@@ -263,6 +268,7 @@ async function fetchCommandType() {
     (v: ListCommand) => v.code == props.commandTypeCode
   );
   commandType.value = commandOp.value[0].id;
+  console.log("🚀 ~ fetchCommandType ~ commandType.value:", commandType.value)
 }
 
 /**