ออกคำสั่ง step01

src/modules/10_order/components/Detail.vue

@@ -32,13 +32,14 @@ onUnmounted(() => {
 });
 
 const nextStep = async () => {
-  stepper.value!.next();
+  // stepper.value!.next();
+
   localStorage.setItem("currentStep", step.value.toString());
   if (orderId.value) {
     await http
       .put(config.API.nextStep(orderId.value))
       .then(() => {
-        router.push(`/order/detail/${orderId.value}?step=${step.value}`);
+        router.push(`/order/detail/${orderId.value}?step=${step.value + 1}`);
       })
       .catch((e) => {
         console.log(e);
@@ -46,13 +47,13 @@ const nextStep = async () => {
   }
 };
 const previousStep = async () => {
-  stepper.value!.previous();
+  // stepper.value!.previous();
   localStorage.setItem("currentStep", step.value.toString());
   if (orderId.value) {
     await http
       .put(config.API.prevStep(orderId.value))
       .then(() => {
-        router.push(`/order/detail/${orderId.value}?step=${step.value}`);
+        router.push(`/order/detail/${orderId.value}?step=${step.value - 1}`);
       })
       .catch((e) => {
         console.log(e);
@@ -62,7 +63,6 @@ const previousStep = async () => {
 const destroyLocalStorage = () => {
   localStorage.clear();
 };
-
 onMounted(() => {
   // console.log("route query===>", route.query)
   if (route.query.step) {
@@ -79,7 +79,7 @@ onMounted(() => {
 
   if (orderId_params !== undefined) {
     orderId.value = orderId_params.toString();
-    //   console.log(orderId.value);
+    // console.log("orderId.value");
   }
 });
 </script>

src/modules/10_order/components/step/step01.vue

@@ -10,6 +10,11 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import type { ResponseOrganiz } from "@/modules/05_placement/interface/response/Order";
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 
 const mixin = useCounterMixin();
 const {
@@ -19,6 +24,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  dialogMessageNotify,
 } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
@@ -60,66 +66,17 @@ const examRound = ref<string>("");
 const examRoundOption = ref<DataOption1[]>([]);
 const conclusionRegisterNo = ref<string>("");
 const conclusionRegisterDate = ref<Date>(new Date());
-// const registerOption = ref<DataOption1[]>([
+
-//   {
-//     name: "รับสมคัรสอบ ครั้งที่ 1",
-//     id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-//   },
-// ]);
 const conclusionResultNo = ref<string>("");
 const conclusionResultDate = ref<Date>(new Date());
-// const announceOption = ref<DataOption1[]>([
-//   {
-//     name: "ผลการสอบแข่งขั้น ครั้งที่ 1",
-//     id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-//   },
-// ]);
 
 // C-PM-05 - 06
-const conclusion1 = ref<string>("");
-const conclusionDate1 = ref<Date>(new Date());
-const conclusion1Option = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const conclusion2 = ref<string>("");
-const conclusionDate2 = ref<Date>(new Date());
-const conclusion2Option = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
 const meeting = ref<string>("");
 const dateMeeting = ref<Date>(new Date());
-const meetingOption = ref<DataOption1[]>([
-  { name: "การประชุมครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
 
-// C-PM-07
+//  C-PM-08
-const conclusionRelocation1 = ref<string>("");
+const conclusionReturnNo = ref<string>("");
-const conclusionRelocationDate1 = ref<Date>(new Date());
+const conclusionReturnDate = ref<Date>(new Date());
-const RelocationOption1 = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const conclusionRelocation2 = ref<string>("");
-const conclusionRelocationDate2 = ref<Date>(new Date());
-const RelocationOption2 = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-
-//  C-PM-08 && 14
-const conclusion = ref<string>("");
-const conclusionDate = ref<Date>(new Date());
-const conclusionOption = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const conclusionLeave = ref<string>("");
-const conclusionLeaveDate = ref<Date>(new Date());
-const LeaveOption = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
-const conclusionReceive = ref<string>("");
-const conclusionReceiveDate = ref<Date>(new Date());
-const ReceiveOption = ref<DataOption1[]>([
-  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
-]);
 
 // C-PM-09
 const organizations = ref<string>("");
@@ -138,6 +95,7 @@ const bookOption = ref<DataOption1[]>([
 ]);
 
 // C-PM-10
+const dialogVisible = ref<boolean>(false);
 const organizationsOld = ref<string>("");
 const organizationsOldOption = ref<DataOption1[]>([
   { name: "หน่วยงานที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
@@ -193,6 +151,8 @@ const receiveOcOption = ref<DataOption1[]>([
 ]);
 // C-PM-14
 const transferOrganizationName = ref<string>("");
+const conclusionReceive = ref<string>("");
+const conclusionReceiveDate = ref<Date>(new Date());
 
 // C-PM-16
 const orderNumber = ref<string>();
@@ -260,10 +220,10 @@ const fetchdetailOrder = async () => {
   await http
     .get(config.API.detailOrder(orderIdString))
     .then((res: any) => {
-      console.log(res);
+      // console.log(res);
 
       const data = res.data.result;
-      console.log(data);
+      // console.log(data);
       typeOrder.value = typeOrderOption.value.find(
         (e) => e.id === data.orderTypeValue
       );
@@ -286,17 +246,20 @@ const fetchdetailOrder = async () => {
       dateMeeting.value = data.conclusionMeetingDate;
 
       // 08
-      conclusionReceive.value = data.conclusionReturnNo;
+      conclusionReturnNo.value = data.conclusionReturnNo;
-      conclusionReceiveDate.value = data.conclusionReturnDate;
+      conclusionReturnDate.value = data.conclusionReturnDate;
 
       //09
       organizations.value = data.sourceOrganizationName;
       order.value = data.conclusionReturnNo;
       orderDate.value = data.conclusionReturnDate;
       book.value = data.militaryCommandNo;
-      bookDate.value = data.militaryCommandDate;
+      bookDate.value = data.militaryCommanDate;
 
       //10
+      if (data.orderTypeCode === "c-pm-10") {
+        nodeTree();
+      }
       organizationsOld.value = data.placementCommandIssuer;
       orderOld.value = data.placementCommandNo;
       orderOldDate.value = data.placementCommandDate;
@@ -356,6 +319,9 @@ const fecthCommand = async () => {
 };
 const selectCMP = (selectOrder: any) => {
   fecthExamRoundOption(selectOrder.commandCode);
+  if (selectOrder.commandCode === "C-PM-10") {
+    nodeTree();
+  }
   //01-04
   examRound.value = "";
   conclusionRegisterNo.value = "";
@@ -422,6 +388,8 @@ const submit = async () => {
   let signBy = null;
   if (!nameCommand.value.length) {
     signBy = await nameCommand.value.name;
+  } else if (nameCommand.value !== "") {
+    signBy = await nameCommand.value;
   } else {
     const name2 = await CommandOption.value.find(
       (x: any) => x.name == nameCommand.value
@@ -429,6 +397,7 @@ const submit = async () => {
     signBy = await name2?.name;
     console.log("signBy", signBy);
   }
+  console.log(signBy);
 
   const orderByOrganizationName = await byOrderOption.value.find(
     (x: any) => x.id == byOrder.value
@@ -470,8 +439,8 @@ const submit = async () => {
     });
   } else if (typeOrder.value.commandCode == "C-PM-08") {
     Object.assign(formdata, {
-      conclusionReturnNo: conclusionReceive.value,
+      conclusionReturnNo: conclusionReturnNo.value,
-      conclusionReturnDate: conclusionReceiveDate.value,
+      conclusionReturnDate: conclusionReturnDate.value,
     });
   } else if (typeOrder.value.commandCode == "C-PM-09") {
     Object.assign(formdata, {
@@ -582,6 +551,120 @@ const updateOrder = async (formData: Object, orderId: string, type: string) => {
       hideLoader();
     });
 };
+// dialog 10
+const search = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const selectedModal = ref<ResponseOrganiz[]>([]);
+const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
+const columnsModal = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rowsModal = ref<ResponseOrganiz[]>([]);
+const clickAction = ref<string>("");
+const filterModal = ref<string>("");
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const onSelected = async (id: string) => {
+  await listModal(id);
+};
+const listModal = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.copyOrderPersonsId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let list: ResponseOrganiz[] = [];
+      data.map((r: ResponseOrganiz) => {
+        list.push({
+          firstName: r.firstName ?? "",
+          idCard: r.idCard ?? "",
+          lastName: r.lastName ?? "",
+          name: r.name ?? "",
+          position: r.position ?? "",
+          prefixId: r.prefixId ?? "",
+          profileId: r.profileId ?? "",
+          unit: r.unit ?? "",
+        });
+      });
+      rowsModal.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+const openDialog = (action: string) => {
+  dialogVisible.value = true;
+  clickAction.value = action;
+  selectedModal.value = [];
+};
+const clickSavelist = () => {
+  if (selectedModal.value.length > 0) {
+    if (clickAction.value === "chairman") {
+      chairman.value = selectedModal.value[0].name;
+    } else if (clickAction.value === "director") {
+      director.value = selectedModal.value[0].name;
+    } else if (clickAction.value === "director2") {
+      director2.value = selectedModal.value[0].name;
+    }
+    dialogVisible.value = false;
+  } else dialogMessageNotify($q, "โปรดเลือกรายชื่อ");
+};
 
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
@@ -729,7 +812,10 @@ const getClass = (val: boolean) => {
             @update:model-value="(nameCommand = ''), (positionCommand = '')"
           />
         </div>
-        <div class="col-xs-12 col-md-6">
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
+        >
           <selector
             :class="getClass(true)"
             outlined
@@ -766,7 +852,10 @@ const getClass = (val: boolean) => {
             hide-bottom-space
           /> -->
         </div>
-        <div class="col-xs-12 col-md-6">
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
+        >
           <q-input
             :class="getClass(true)"
             outlined
@@ -779,6 +868,36 @@ const getClass = (val: boolean) => {
             disable
           />
         </div>
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder == '00000000-0000-0000-0000-000000000000'"
+        >
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div
+          class="col-xs-12 col-md-6"
+          v-if="byOrder == '00000000-0000-0000-0000-000000000000'"
+        >
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            hide-bottom-space
+          />
+        </div>
         <div class="col-12">
           <q-separator v-if="typeOrder.commandCode" />
         </div>
@@ -1354,7 +1473,7 @@ const getClass = (val: boolean) => {
               outlined
               dense
               lazy-rules
-              v-model="conclusionReceive"
+              v-model="conclusionReturnNo"
               :rules="[
                 (val) =>
                   !!val ||
@@ -1372,7 +1491,7 @@ const getClass = (val: boolean) => {
           <div class="col-xs-12 col-md-6">
             <datepicker
               menu-class-name="modalfix"
-              v-model="conclusionReceiveDate"
+              v-model="conclusionReturnDate"
               :locale="'th'"
               autoApply
               borderless
@@ -1391,8 +1510,8 @@ const getClass = (val: boolean) => {
                   dense
                   class="full-width datepicker"
                   :model-value="
-                    conclusionReceiveDate != null
+                    conclusionReturnDate != null
-                      ? date2Thai(conclusionReceiveDate)
+                      ? date2Thai(conclusionReturnDate)
                       : null
                   "
                   :label="`${'ลงวันที่ '}`"
@@ -1811,6 +1930,7 @@ const getClass = (val: boolean) => {
               :rules="[(val) => !!val || `${'กรุณากรอกชื่อประธาน'}`]"
               :label="`${'ประธาน'}`"
               hide-bottom-space
+              @click="openDialog('chairman')"
             />
           </div>
           <div class="col-xs-12 col-md-4">
@@ -1840,6 +1960,7 @@ const getClass = (val: boolean) => {
               :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ'}`]"
               :label="`${'กรรมการ'}`"
               hide-bottom-space
+              @click="openDialog('director')"
             />
           </div>
           <div class="col-xs-12 col-md-4">
@@ -1869,6 +1990,7 @@ const getClass = (val: boolean) => {
               :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ'}`]"
               :label="`${'กรรมการ'}`"
               hide-bottom-space
+              @click="openDialog('director2')"
             />
           </div>
         </div>
@@ -2247,10 +2369,161 @@ const getClass = (val: boolean) => {
       <q-tooltip>บันทึก</q-tooltip>
     </q-btn>
   </div>
+
+  <q-dialog v-model="dialogVisible">
+    <q-card style="width: 900px; max-width: 80vw">
+      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" v-close-popup />
+      <q-separator />
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-5 row">
+            <q-card flat bordered class="fit q-pa-sm">
+              <q-scroll-area visible style="height: 70vh">
+                <q-input
+                  outlined
+                  dense
+                  v-model="search"
+                  placeholder="ค้นหา"
+                  class="q-mb-sm"
+                >
+                  <template v-slot:append>
+                    <q-icon name="mdi-magnify" />
+                  </template>
+                </q-input>
+                <q-tree
+                  :nodes="nodesTree"
+                  dense
+                  node-key="id"
+                  :filter="search"
+                  v-model:selected="selected"
+                  v-model:expanded="expanded"
+                  no-selection-unset
+                  selected-color="primary"
+                  @update:selected="onSelected"
+                  default-expand-all
+                />
+              </q-scroll-area>
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-7">
+            <div class="col-12 row q-py-sm items-center">
+              <q-space />
+              <div class="items-center" style="display: flex">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterModal"
+                  ref="filterRef"
+                  outlined
+                  debounce="300"
+                  placeholder="ค้นหา"
+                  style="max-width: 200px"
+                  class="q-ml-sm"
+                >
+                  <template v-slot:append>
+                    <q-icon v-if="filterModal == ''" name="search" />
+                    <q-icon
+                      v-if="filterModal !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+
+                <!-- <q-select
+                  v-model="visibleColumnsModal"
+                  :display-value="$q.lang.table.columns"
+                  multiple
+                  outlined
+                  dense
+                  :options="columnsModal"
+                  options-dense
+                  option-value="name"
+                  map-options
+                  emit-value
+                  style="min-width: 150px"
+                  class="gt-xs q-ml-sm"
+                /> -->
+              </div>
+            </div>
+            <d-table
+              :rows="rowsModal"
+              :columns="columnsModal"
+              :visible-columns="visibleColumnsModal"
+              row-key="profileId"
+              selection="single"
+              v-model:selected="selectedModal"
+              no-data-label="ไม่มีข้อมูล"
+              :filter="filterModal"
+            >
+              <template v-slot:body-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body-cell="props">
+                <q-td :props="props">
+                  <div v-if="props.col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div v-else>
+                    {{ props.value }}
+                  </div>
+                </q-td>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="clickSavelist"
+          class="q-px-md"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style>
 .q-field--with-bottom {
   padding-bottom: 0px;
 }
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  .q-table thead tr:last-child th {
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
 </style>