ออกคำสั่ง ==> รายละเอียด API Tab 3

src/modules/18_command/components/Main/TableMain.vue

@@ -143,7 +143,21 @@ function onCancel(id: string) {
 function onReCommand(id: string) {
   dialogConfirm(
     $q,
-    () => {},
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.commandAction(id, "resume"))
+        .then(async () => {
+          await fetchListCommand();
+          success($q, "ดึงไปทำคำสั่งใหม่สำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
     "ยืนยันการดึงไปทำคำสั่งใหม่",
     "ต้องการยืนยืนยันการดึงไปทำคำสั่งใหม่ใช่หรือไม่ ?"
   );

src/modules/18_command/components/Step/1_Detail.vue

@@ -15,14 +15,18 @@ import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.
 const $q = useQuasar();
 const route = useRoute();
 const store = useCommandDetail();
-const { showLoader, hideLoader, success, messageError } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
+/**
+ * props
+ */
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const props = defineProps({
+const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
-const commandId = ref<string>(route.params.id.toString());
+const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
+// ฟอร์มข้อมูล
 const formData = reactive<FormDataDetail>({
   commandNo: "",
   commandYear: null,
@@ -32,8 +36,13 @@ const formData = reactive<FormDataDetail>({
   detailFooter: "",
   issue: null,
 });
-const modalPreview = ref<boolean>(false);
+const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
+ *
+ * กำหนดข้อมูลที่ได้รับมาให้กับตัวแปร `formData`
+ */
 async function fetchData() {
   showLoader();
   await http
@@ -56,28 +65,34 @@ async function fetchData() {
     });
 }
 
+/**
+ * ฟังก์ชันบันทึกข้อมูลรายละเอียดคำสั่ง
+ *
+ * และกำหนด isChangeData เป็น false
+ */
 async function onSubmit() {
   showLoader();
   await http
     .put(config.API.commandAction(commandId.value, "tab1"), formData)
-    .then(async () => {
-      // await fetchData();
-      // success($q, "บันทึกข้อมูลสำเร็จ");
-    })
+    .then(() => {})
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   fetchData();
 });
 
 /**
- * เรียก function ไปใช่หน้าหลัก
+ * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
  */
 defineExpose({
   onSubmit,
@@ -107,7 +122,7 @@ defineExpose({
             v-model="formData.commandNo"
             hide-bottom-space
             :label="`${'คำสั่งเลขที่'}`"
-            @update:model-value="props.onCheckChangeData()"
+            @update:model-value="onCheckChangeData()"
           />
         </div>
         <label class="col-1 flex justify-center items-center text-bold">
@@ -123,7 +138,7 @@ defineExpose({
             :enableTimePicker="false"
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
-            @update:model-value="props.onCheckChangeData()"
+            @update:model-value="onCheckChangeData()"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -167,7 +182,7 @@ defineExpose({
           v-model="formData.issue"
           hide-bottom-space
           :label="`${'คำสั่งเรื่อง'}`"
-          @update:model-value="props.onCheckChangeData()"
+          @update:model-value="onCheckChangeData()"
         />
       </div>
 
@@ -188,7 +203,7 @@ defineExpose({
             >
               <template #control>
                 <q-editor
-                  @update:model-value="props.onCheckChangeData()"
+                  @update:model-value="onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
                   v-model="formData.detailHeader"
@@ -229,7 +244,7 @@ defineExpose({
             >
               <template #control>
                 <q-editor
-                  @update:model-value="props.onCheckChangeData()"
+                  @update:model-value="onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
                   v-model="formData.detailBody"
@@ -270,7 +285,7 @@ defineExpose({
             >
               <template #control>
                 <q-editor
-                  @update:model-value="props.onCheckChangeData()"
+                  @update:model-value="onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
                   v-model="formData.detailFooter"

src/modules/18_command/components/Step/2_ListPersons.vue

@@ -24,8 +24,8 @@ const {
   success,
 } = useCounterMixin();
 
-const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const props = defineProps({
+const isChangeData = defineModel<boolean>("isChangeData", { required: true }); //การเปลี่ยนแปลงของข้อมูล
+const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
@@ -123,6 +123,10 @@ function filterSelector(val: string, update: Function, filtername: string) {
 }
 
 function onSubmit() {}
+
+/**
+ * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
+ */
 defineExpose({
   onSubmit,
 });

src/modules/18_command/components/Step/3_ReceivedCopy.vue

@@ -2,14 +2,22 @@
 import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { DataOption } from "@/modules/18_command/interface/index/Main";
+import type {
+  DataOption,
+  DataPerson,
+  DateSelectPerson,
+} from "@/modules/18_command/interface/index/Main";
 
 import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
 
 const $q = useQuasar();
+const route = useRoute();
 const store = useCommandDetail();
 const {
   dialogMessageNotify,
@@ -22,20 +30,12 @@ const {
 } = useCounterMixin();
 
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const props = defineProps({
+const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
 const filter = ref<string>("");
-const rows = ref<any[]>([
-  {
-    idCard: "1",
-    name: "2",
-    position: "3",
-    unit: "4",
-    send: "5",
-  },
-]);
+const rows = ref<DataPerson[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -47,19 +47,19 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "idCard",
+    name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    field: "idCard",
+    field: "citizenId",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    field: "name",
+    field: "fullName",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -74,10 +74,10 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "unit",
+    name: "org",
     align: "left",
     label: "หน่วยงาน",
-    field: "unit",
+    field: "org",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -94,169 +94,254 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<String[]>([
   "no",
-  "idCard",
-  "name",
+  "citizenId",
+  "fullName",
   "position",
-  "unit",
+  "org",
   "send",
 ]);
 
 const optionSelect = ref<DataOption[]>([
-  { id: 1, name: "อีเมล" },
-  { id: 2, name: "กล่องข้อความ" },
+  { id: "EMAIL", name: "อีเมล" },
+  { id: "INBOX", name: "กล่องข้อความ" },
 ]);
 
-const modal = ref<boolean>(false);
-const selectedModal = ref<any[]>([]);
+const commandId = ref<string>(route.params.id.toString());
 
-function onDelete(id: string) {
-  dialogRemove($q, () => {});
+const modal = ref<boolean>(false);
+const selectedModal = ref<DateSelectPerson[]>([]);
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.commandAction(commandId.value, "tab3"))
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data.map((e: DataPerson) => ({
+        ...e,
+        fullName: `${e.prefix}${e.fristName}  ${e.lastName}`,
+      }));
+
+      isChangeData.value = false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-function onSubmitPerson() {}
+function onDelete(id: string) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.commandAction(id, "tab3"))
+      .then(async () => {
+        await fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
 
-function onSubmit() {}
+async function onSubmitPerson() {
+  const body = selectedModal.value.map((e: DateSelectPerson) => e.profileId);
+  showLoader();
+  await http
+    .put(config.API.commandAction(commandId.value, "tab3-add"), {
+      profileId: body,
+    })
+    .then(async () => {
+      await fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmit() {
+  const body = rows.value.map((e: DataPerson) => ({
+    sendCC: e.sendCC,
+    id: e.id,
+  }));
+
+  showLoader();
+  http
+    .put(config.API.commandAction(commandId.value, "tab3"), {
+      commandSend: body,
+    })
+    .then(async () => {
+      // await fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+      isChangeData.value = false;
+    });
+}
+
+onMounted(() => {
+  fetchData();
+});
+
+/**
+ * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
+ */
 defineExpose({
   onSubmit,
 });
 </script>
 
 <template>
-  <q-card-section>
-    <div class="row q-col-gutter-sm">
-      <div class="col-12 row items-center">
-        <q-btn
-          v-if="!store.readonly"
-          flat
-          round
-          color="primary"
-          @click="modal = true"
-          icon="mdi-plus"
-        >
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-        <q-space />
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <q-card-section>
+      <div class="row q-col-gutter-sm">
+        <div class="col-12 row items-center">
+          <q-btn
+            v-if="!store.readonly"
+            flat
+            round
+            color="primary"
+            @click="modal = true"
+            icon="mdi-plus"
           >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filter = ''"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+
+        <div class="col-12">
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="id"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
             </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="!store.readonly"
+                    dense
+                    flat
+                    round
+                    color="red"
+                    @click="onDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name === 'send'">
+                    <q-select
+                      :readonly="store.readonly"
+                      :class="store.classInput(!store.readonly)"
+                      hide-bottom-space
+                      multiple
+                      :outlined="true"
+                      dense
+                      v-model="props.row.sendCC"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                        (val) =>
+                          val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                      ]"
+                      :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="optionSelect"
+                      option-value="id"
+                      input-debounce="0"
+                      color="primary"
+                      @update:model-value="onCheckChangeData()"
+                    >
+                      <template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-black">
+                            ไม่พบข้อมูลที่ค้นหา
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+                  <div v-else class="table_ellipsis2">
+                    {{ col.value ?? "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
         </div>
       </div>
+    </q-card-section>
 
-      <div class="col-12">
-        <d-table
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :filter="filter"
-          row-key="idCard"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th auto-width />
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td auto-width>
-                <q-btn
-                  v-if="!store.readonly"
-                  dense
-                  flat
-                  round
-                  color="red"
-                  @click="onDelete(props.row.personalId)"
-                  icon="mdi-delete"
-                >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name === 'send'">
-                  <q-select
-                    :readonly="store.readonly"
-                    :class="store.classInput(!store.readonly)"
-                    hide-bottom-space
-                    multiple
-                    :outlined="true"
-                    dense
-                    v-model="props.row.mutiselect"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
-                      (val) =>
-                        val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
-                    ]"
-                    :label="`${'เลือกช่องทางการส่งสำเนา'}`"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    :options="optionSelect"
-                    option-value="id"
-                    input-debounce="0"
-                    color="primary"
-                  >
-                    <template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-black">
-                          ไม่พบข้อมูลที่ค้นหา
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-                <div v-else>
-                  {{ col.value ?? "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </div>
-    </div>
-  </q-card-section>
+    <q-separator />
 
-  <q-separator />
-
-  <q-card-actions align="right" v-if="!store.readonly">
-    <q-btn label="บันทึก" color="public" />
-  </q-card-actions>
+    <q-card-actions align="right" v-if="!store.readonly">
+      <q-btn label="บันทึก" type="submit" color="public" />
+    </q-card-actions>
+  </q-form>
 
   <DialogOrgSelectOneStep
     v-model:modal="modal"

src/modules/18_command/components/Step/4_Attached.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const props = defineProps({
+const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
 function onSubmit() {}
+
+/**
+ * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
+ */
 defineExpose({
   onSubmit,
 });