อัพเดตออกคำสั่ง

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

@@ -1,4 +1,406 @@
-div
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import type { QInput } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps, QForm } from "quasar";
+import { useRoute } from "vue-router";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  dialogMessageNotify,
+  dialogConfirm,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const route = useRoute();
+const $q = useQuasar();
+const modalData = ref<any>({
+  salaryAmount: null,
+  positionSalaryAmount: null,
+  mouthSalaryAmount: null,
+});
+const myForm = ref<QForm | null>(null);
+const myFormAdd = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
+const titleName = ref<string>("");
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
+const columns = 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: "education",
+    align: "left",
+    label: "วุฒิการศึกษาในการออกคำสั่ง",
+    field: "education",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const selected = ref<ResponseData[]>([]);
+
+onMounted(async () => {
+  await conditionData();
+});
+
+const conditionData = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsselectedOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          education: r.education ?? "",
+          idCard: r.idCard ?? "",
+          name: r.name ?? "",
+          personalId: r.personalId ?? "",
+          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+          sequence: r.sequence !== null ? r.sequence : 0,
+          refRecordId: r.refRecordId,
+          salaryAmount: r.salaryAmount !== 0 ? r.salaryAmount : null,
+          positionSalaryAmount: r.positionSalaryAmount!== 0 ? r.positionSalaryAmount : null,
+          monthSalaryAmount: r.monthSalaryAmount!== 0 ? r.monthSalaryAmount : null,
+        });
+      });
+      // console.log("list", list);
+      rows.value = list;
+      selected.value = rows.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const dialogDeleteData = async (id: string) => {
+  dialogRemove($q, () => deleteData(id));
+};
+
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.personsOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await conditionData();
+    });
+};
+
+const swapUp = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapUpOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const swapDown = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapDownOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const upDown = async (value: any, up: boolean = true) => {
+  const indexCurrent = value.rowIndex;
+  if (up) {
+    await swapUp(value.row.personalId);
+  } else {
+    await swapDown(value.row.personalId);
+  }
+};
+
+const saveModal = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        putSalary(modalData.value);
+      }
+    });
+  }
+};
+const personalId = ref<string>("");
+const selectModal = (e: any) => {
+  console.log(e);
+  titleName.value = e.name;
+  personalId.value = e.personalId;
+  modalOpenClose(e.personalId);
+};
+
+const modalOpenClose = async (personalId: string) => {
+  modal.value = !modal.value;
+  if (!modal.value) {
+    titleName.value = "";
+  }
+  if (modal.value == true) {
+    await fetchSalary(personalId);
+  }
+};
+const fetchSalary = async (personalId: string) => {
+  console.log(personalId);
+  showLoader();
+  await http
+    .get(config.API.salaryOrder(personalId))
+    .then((res: any) => {
+      console.log(res);
+      const data = res.data.result;
+      modalData.value = {
+        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount:null,
+        positionSalaryAmount: data.positionSalaryAmount !== 0 ? data.salaryAmount:null,
+        mouthSalaryAmount: data.monthSalaryAmount !== 0 ? data.salaryAmount:null,
+      };
+      console.log("data", modalData.value);
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const putSalary = async (salary: any) => {
+  modalData.value = {
+    salaryAmount: Number(salary.salaryAmount),
+    positionSalaryAmount: Number(salary.positionSalaryAmount),
+    monthSalaryAmount: Number(salary.mouthSalaryAmount),
+  };
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.salaryOrder(personalId.value), modalData.value)
+      .then((res: any) => {
+        // console.log(res);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        // console.log(e);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionData();
+        modal.value = false;
+        hideLoader();
+      });
+  });
+};
+
+const modalAddChange = async () => {
+  modalAdd.value = !modalAdd.value;
+  if (modalAdd.value == true) {
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
+      : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
+  } else await conditionData();
+};
+
+const fetchaddlist = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list = [];
+      list = data.map((r: ResponseData) => ({
+        education: r.education ?? "",
+        idCard: r.idCard ?? "",
+        name: r.name ?? "",
+        personalId: r.personalId ?? "",
+        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+        sequence: r.sequence !== null ? r.sequence : 0,
+        refRecordId: r.refRecordId,
+      }));
+      rows2.value = list;
+      selected.value = rows.value;
+      // rows2.value = list.filter((e: any) => e.selectStatus === false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const saveModalAdd = () => {
+  if (myFormAdd.value !== null) {
+    myFormAdd.value.validate().then(async (result: boolean) => {
+      if (result && selected.value.length !== 0) {
+        dialogConfirm(
+          $q,
+          () => {
+            let data = [];
+            data.push(...selected.value.map((e: any) => e.refRecordId));
+            addlist(data);
+          },
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?"
+        );
+      }
+    });
+  }
+};
+
+const addlist = async (data: Object) => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await http
+      .post(config.API.personsOrder(id), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
+};
+
+const save = async () => {
+  // console.log("save===>", rows.value)
+  const check = rows.value.find((x:any) => x.salaryAmount==null);
+  if (selected.value.length > 0 && !check) {
+    dialogConfirm($q, () => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    });
+  } else if (check) {
+    dialogMessageNotify($q, "ระบุรายละเอียดการเงินไม่ครบ");
+  } else {
+    dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
+  }
+};
+
+const refresh = async () => {
+  // await conditionData();
+  modalAddChange();
+  selected.value = [];
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
 <template>
   <div>
     <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
@@ -162,12 +564,8 @@ div
         color="public"
         @click="save"
         class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
+        >
-        <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
-      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
     </div>
   </div>
   <!--********************************** เงินเดือน ********************************** -->
@@ -311,431 +709,3 @@ div
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import type { QInput } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps, QForm } from "quasar";
-import { useRoute } from "vue-router";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const next = () => props.next();
-const previous = () => props.previous();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  dialogMessageNotify,
-  dialogConfirm,
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-} = mixin;
-
-const route = useRoute();
-const $q = useQuasar();
-const salaryAmount = ref<number>();
-const positionSalaryAmount = ref<number>();
-const mouthSalaryAmount = ref<number>();
-const modalData = ref<any>({
-  salaryAmount: null,
-  positionSalaryAmount: null,
-  mouthSalaryAmount: null,
-});
-const myForm = ref<QForm | null>(null);
-const myFormAdd = ref<QForm | null>(null);
-const modal = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const titleName = ref<string>("");
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
-const columns = 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: "education",
-    align: "left",
-    label: "วุฒิการศึกษาในการออกคำสั่ง",
-    field: "education",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const selected = ref<ResponseData[]>([]);
-
-onMounted(async () => {
-  await conditionData();
-});
-
-const conditionData = async () => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await getData(id);
-  }
-};
-
-const getData = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsselectedOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list: ResponseData[] = [];
-      data.map((r: ResponseData) => {
-        list.push({
-          education: r.education ?? "",
-          idCard: r.idCard ?? "",
-          name: r.name ?? "",
-          personalId: r.personalId ?? "",
-          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-          sequence: r.sequence !== null ? r.sequence : 0,
-          refRecordId: r.refRecordId,
-          salaryAmount: r.salaryAmount !== 0 ? r.salaryAmount : null,
-          positionSalaryAmount: r.positionSalaryAmount!== 0 ? r.positionSalaryAmount : null,
-          monthSalaryAmount: r.monthSalaryAmount!== 0 ? r.monthSalaryAmount : null,
-        });
-      });
-      console.log("list", list);
-      rows.value = list;
-      selected.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// const saveSalary = async (id: string) => {
-//   await http
-//     .put(config.API.salaryOrder(id))
-//     .then((res) => {
-//       //   const data = res.data.result;
-//       //   console.log(res);
-//       success($q, "บันทึกข้อมูลสำเร็จ");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-const dialogDeleteData = async (id: string) => {
-  dialogRemove($q, () => deleteData(id));
-};
-
-const deleteData = async (id: string) => {
-  await http
-    .delete(config.API.personsOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await conditionData();
-    });
-};
-
-const swapUp = async (id: string) => {
-  // id = personalId
-  await http
-    .put(config.API.swapUpOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      hideLoader();
-    });
-};
-
-const swapDown = async (id: string) => {
-  // id = personalId
-  await http
-    .put(config.API.swapDownOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      hideLoader();
-    });
-};
-
-const upDown = async (value: any, up: boolean = true) => {
-  const indexCurrent = value.rowIndex;
-  if (up) {
-    await swapUp(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
-    // rows.value[indexCurrent - 1] = value.row;
-  } else {
-    await swapDown(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
-    // rows.value[indexCurrent + 1] = value.row;
-  }
-};
-
-const saveModal = () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (result: boolean) => {
-      if (result) {
-        putSalary(modalData.value);
-      }
-    });
-  }
-};
-const personalId = ref<string>("");
-const selectModal = (e: any) => {
-  console.log(e);
-  titleName.value = e.name;
-  personalId.value = e.personalId;
-  // modalData.value = {
-  //   salaryAmount: 0,
-  //   positionSalaryAmount: 0,
-  //   mouthSalaryAmount: 0,
-  // };
-
-  modalOpenClose(e.personalId);
-};
-
-const modalOpenClose = async (personalId: string) => {
-  modal.value = !modal.value;
-  if (!modal.value) {
-    titleName.value = "";
-  }
-  if (modal.value == true) {
-    await fetchSalary(personalId);
-  }
-};
-const fetchSalary = async (personalId: string) => {
-  console.log(personalId);
-  showLoader();
-  await http
-    .get(config.API.salaryOrder(personalId))
-    .then((res: any) => {
-      console.log(res);
-      const data = res.data.result;
-      modalData.value = {
-        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount:null,
-        positionSalaryAmount: data.positionSalaryAmount !== 0 ? data.salaryAmount:null,
-        mouthSalaryAmount: data.monthSalaryAmount !== 0 ? data.salaryAmount:null,
-      };
-      console.log("data", modalData.value);
-    })
-    .catch((e) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const putSalary = async (salary: any) => {
-  modalData.value = {
-    salaryAmount: Number(salary.salaryAmount),
-    positionSalaryAmount: Number(salary.positionSalaryAmount),
-    monthSalaryAmount: Number(salary.mouthSalaryAmount),
-  };
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-        hideLoader();
-      });
-  });
-};
-
-const modalAddChange = async () => {
-  modalAdd.value = !modalAdd.value;
-  if (modalAdd.value == true) {
-    const id = route.params.orderid
-      ? route.params.orderid.toString()
-      : localStorage.getItem("orderId")
-      ? localStorage.getItem("orderId")
-      : null;
-    if (id !== null) {
-      await fetchaddlist(id);
-    }
-  } else await conditionData();
-};
-const fetchaddlist = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list = [];
-      list = data.map((r: ResponseData) => ({
-        education: r.education ?? "",
-        idCard: r.idCard ?? "",
-        name: r.name ?? "",
-        personalId: r.personalId ?? "",
-        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-        sequence: r.sequence !== null ? r.sequence : 0,
-        refRecordId: r.refRecordId,
-      }));
-      rows2.value = list;
-      selected.value = rows.value;
-      // rows2.value = list.filter((e: any) => e.selectStatus === false);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const saveModalAdd = () => {
-  if (myFormAdd.value !== null) {
-    myFormAdd.value.validate().then(async (result: boolean) => {
-      if (result && selected.value.length !== 0) {
-        dialogConfirm(
-          $q,
-          () => {
-            let data = [];
-            data.push(...selected.value.map((e: any) => e.refRecordId));
-            addlist(data);
-          },
-          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?"
-        );
-      }
-    });
-  }
-};
-const addlist = async (data: Object) => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await http
-      .post(config.API.personsOrder(id), data)
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e: any) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(() => {
-        modalAddChange();
-      });
-  }
-};
-
-const click = (e: any) => {
-  console.log(e);
-  console.log(rows.value.length);
-};
-
-const save = () => {
-  if (selected.value.length > 0) {
-    dialogConfirm($q, () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      next();
-    });
-  } else {
-    dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
-  }
-};
-
-const refresh = async () => {
-  // await conditionData();
-  modalAddChange();
-  selected.value = [];
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
-<style lang="scss"></style>

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

@@ -1,314 +1,3 @@
-<template>
-  <div>
-    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
-      <div class="col-12 row q-py-sm items-center">
-        <q-btn flat round color="primary" @click="clickAdd" 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"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </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>
-      <q-form ref="myForm">
-        <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 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 key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="idCard" :props="props">
-                {{ props.row.idCard }}
-              </q-td>
-              <q-td key="name" :props="props">
-                {{ props.row.name }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="unit" :props="props">
-                {{ props.row.unit }}
-              </q-td>
-              <q-td key="send" :props="props">
-                <q-select
-                  :class="getClass(true)"
-                  hide-bottom-space
-                  multiple
-                  :outlined="true"
-                  dense
-                  lazy-rules
-                  v-model="props.row.mutiselect"
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
-                  :label="`${'เลือกช่องทางการส่งสำเนา'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="optionSelect"
-                  option-value="id"
-                  input-debounce="0"
-                  color="primary"
-                  @update:model-value="() => updateData(props.row)"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-black">
-                        ไม่พบข้อมูลที่ค้นหา
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="red"
-                  @click="clickDelete(props.row.personalId)"
-                  icon="mdi-delete"
-                >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-form>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อ"
-      >
-      </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="saveDataCopyOrder"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
-    </div>
-  </div>
-
-  <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
-      <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"
-                  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"
-                      @click="resetFilter"
-                    />
-                  </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"
-              :filter="filterModal"
-              row-key="profileId"
-              selection="multiple"
-              v-model:selected="selectedModal"
-            >
-              <template v-slot:header-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-
-              <template v-slot:body-selection="scope">
-                <!-- <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    :model-value="scope.selected"
-                    @update:model-value="
-                      (val, evt) => {
-                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
-                          val,
-                          evt
-                        );
-                      }
-                    "
-                  /> -->
-                <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-separator />
-      <q-card-actions align="right">
-        <!-- <q-btn
-            flat
-            round
-            color="public"
-            icon="mdi-content-save-outline"
-            @click="clickClose"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
-          </q-btn> -->
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="saveData"
-          class="q-px-md"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
@@ -698,4 +387,315 @@ const updateData = (row: DataCopyOrder) => {
   editRows.value.push(row);
 };
 </script>
-<style lang="scss"></style>
+
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-py-sm items-center">
+        <q-btn flat round color="primary" @click="clickAdd" 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"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </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>
+      <q-form ref="myForm">
+        <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 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 key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="idCard" :props="props">
+                {{ props.row.idCard }}
+              </q-td>
+              <q-td key="name" :props="props">
+                {{ props.row.name }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="unit" :props="props">
+                {{ props.row.unit }}
+              </q-td>
+              <q-td key="send" :props="props">
+                <q-select
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  :outlined="true"
+                  dense
+                  lazy-rules
+                  v-model="props.row.mutiselect"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
+                  :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="optionSelect"
+                  option-value="id"
+                  input-debounce="0"
+                  color="primary"
+                  @update:model-value="() => updateData(props.row)"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-black">
+                        ไม่พบข้อมูลที่ค้นหา
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.personalId)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-form>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อ"
+      >
+      </q-btn>
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        color="public"
+        @click="saveDataCopyOrder"
+        class="q-px-md"
+        ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+      </q-btn>
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
+      <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"
+                  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"
+                      @click="resetFilter"
+                    />
+                  </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"
+              :filter="filterModal"
+              row-key="profileId"
+              selection="multiple"
+              v-model:selected="selectedModal"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body-selection="scope">
+                <!-- <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :model-value="scope.selected"
+                    @update:model-value="
+                      (val, evt) => {
+                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
+                          val,
+                          evt
+                        );
+                      }
+                    "
+                  /> -->
+                <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-separator />
+      <q-card-actions align="right">
+        <!-- <q-btn
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            @click="clickClose"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn> -->
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="saveData"
+          class="q-px-md"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -1,3 +1,238 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+const route = useRoute();
+const $q = useQuasar();
+
+const orderId_params = route.params.orderid;
+const dialog = ref<boolean>(false);
+const dialogFileUpload = ref<boolean>(false);
+const splitterModel = ref<number>(70);
+const tab = ref<string>("main");
+
+const order = ref<string>("");
+const years = ref<number>(new Date().getDate());
+const date = ref<Date>(new Date());
+const fileOrder = ref<any>(null);
+const fileTailer = ref<any>(null);
+
+const OrderPDF = ref<string>("");
+const TailerPDF = ref<string>("");
+const OrderPDFUpload = ref<string>("");
+const TailerPDFUpload = ref<string>("");
+const statusOrder = ref<string>();
+
+const orderId = ref<string>(orderId_params.toString());
+onMounted(async () => {
+  if (orderId.value) {
+    fetchAttachment(orderId.value);
+    fecthstatusOrder(orderId.value);
+  }
+});
+
+const fetchAttachment = async (orderId: string) => {
+  showLoader();
+  await http
+    .get(config.API.attachmentOrder(orderId))
+    .then(async (res) => {
+      let response = res.data.result;
+      // console.log(response);
+      order.value = response.orderNo;
+      years.value = Number(response.orderYear);
+      if (response.date !== undefined) {
+        date.value = response.date;
+      }
+      if (response.orderFileUrl !== null) {
+        // OrderPDF.value = response.orderFileUrl;
+        OrderPDFUpload.value = response.orderFileUrl;
+
+        viewPDF(OrderPDF.value);
+      }
+      if (response.attachmentFileUrl !== null) {
+        // TailerPDF.value = response.attachmentFileUrl;
+        TailerPDFUpload.value = response.attachmentFileUrl;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fecthstatusOrder = async (orderId: string) => {
+  await http
+    .get(config.API.orderReady(orderId))
+    .then((res) => {
+      let status = res.data.result;
+      statusOrder.value = status.result;
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
+const viewPDF = async (pdf: string) => {
+  const pdfData = await usePDF(`${pdf}`);
+  showLoader();
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+    hideLoader();
+  }, 1500);
+};
+
+const viewPDFUpload = async (pdf: string) => {
+  const pdfData = await usePDF(`${pdf}`);
+  showLoader();
+  setTimeout(() => {
+    pdfFileUploadSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+    hideLoader();
+  }, 1500);
+};
+
+watch(tab, () => {
+  // console.log(tab.value);
+  if (tab.value === "main") {
+    viewPDF(OrderPDF.value);
+  }
+  if (tab.value === "second") {
+    viewPDF(TailerPDF.value);
+  }
+});
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const pdfFileUploadSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
+
+const myForm = ref<QForm | null>(null);
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+// const next = () => props.next();
+const previous = () => props.previous();
+
+const onchangePage = (val: any) => {
+  //   console.log(val);
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
+};
+
+const save = () => {
+  if (myForm.value !== null) {
+    myForm.value!.validate().then((success: Boolean) => {
+      if (success) {
+        dialogConfirm(
+          $q,
+          async () => {
+            await putOrderData();
+            await postfileOrder();
+            await postfileTailer();
+            await fetchAttachment(orderId.value);
+            await fecthstatusOrder(orderId.value);
+          },
+        );
+
+      }
+    });
+  }
+};
+const putOrderData = async () => {
+  const orderData = {
+    orderNo: order.value,
+    orderYear: years.value.toString(),
+    signDate: date.value,
+  };
+  await http
+    .put(config.API.attachmentOrder(orderId.value), orderData)
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
+
+const postfileOrder = async () => {
+  const formData = new FormData();
+  formData.append("File", fileOrder.value);
+  await http.post(config.API.attachmentOrderId(orderId.value), formData).then(() => {
+    // fileOrder.value = null 
+  });
+};
+const postfileTailer = async () => {
+  const formData = new FormData();
+  formData.append("File", fileTailer.value);
+  await http.post(config.API.attachmentFileId(orderId.value), formData).then(() => { //fileTailer.value = null 
+  });
+};
+
+const clickExecute = async (id: string) => {
+  dialogConfirm(
+    $q,
+    async () => {
+      await http
+        .put(config.API.executeOrder(id))
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        });
+    },
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
+  );
+};
+
+const validateForm = () => {
+  return (
+    fileOrder.value !== null &&
+    fileOrder.value !== null &&
+    order.value.trim() !== ""
+  );
+};
+const getClass = (val: boolean) => {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+};
+const setTab = (val: string) => {
+  tab.value = val;
+  page.value = 1;
+};
+
+const viewFileUpload = async (url: string) => {
+  pdfFileUploadSrc.value = undefined
+  await viewPDFUpload(url);
+
+  dialogFileUpload.value = true
+}
+</script>
+
 <template>
   <div>
     <div style="min-height: 70vh">
@@ -6,7 +241,7 @@
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
+              <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
                 :color="tab !== 'main' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
@@ -25,8 +260,8 @@
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn v-show="TailerPDF == ''" size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'"
+              <q-btn size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download"
-                icon="mdi-download" :disable="tab !== 'second'">
+                :disable="tab !== 'second'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
@@ -92,8 +327,17 @@
                 <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">คำสั่ง</label>
+                    <div class="text-right">
+                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
+                        @click="viewFileUpload(OrderPDFUpload)">
+                        <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
+                      </q-btn>
+                      <q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download" target="_blank">
+                        <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
+                      </q-btn>
+                    </div>
                     <q-file outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
@@ -101,8 +345,18 @@
                   </div>
                   <div>
                     <label class="text-file">เอกสารแนบท้าย</label>
+                    <div class="text-right">
+                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
+                        @click="viewFileUpload(TailerPDFUpload)">
+                        <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
+                      </q-btn>
+                      <q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download" target="_blank">
+                        <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
+                      </q-btn>
+                    </div>
+
                     <q-file outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
-                      lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
+                      lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
@@ -184,22 +438,10 @@
       <q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
         @click="save">
       </q-btn>
-
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-          <q-tooltip>ต่อไป</q-tooltip>
-        </q-btn> -->
     </div>
 
     <q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
       <q-card class="bg-white text-white">
-        <!-- <q-bar>
-            <q-space />
-  
-            <q-btn dense flat icon="close" v-close-popup>
-              <q-tooltip>ปิดหน้าต่าง</q-tooltip>
-            </q-btn>
-          </q-bar> -->
-
         <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
           <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
             v-close-popup />
@@ -238,227 +480,52 @@
         </q-card-section>
       </q-card>
     </q-dialog>
+
+    <q-dialog v-model="dialogFileUpload" persistent :maximized="true" transition-show="slide-up"
+      transition-hide="slide-down">
+      <q-card class="bg-white text-white">
+        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+          <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
+            v-close-popup />
+        </div>
+        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+          <div class="justify-between items-center align-center q-pb-sm row">
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+          <div class="pdfWidth">
+            <VuePDF ref="vuePDFRef" :pdf="pdfFileUploadSrc" :page="page" fit-parent :scale="0.1" />
+            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+          </div>
+          <div class="justify-between items-center align-center q-pt-sm row">
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
   </div>
 </template>
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
-const route = useRoute();
-const $q = useQuasar();
-
-const orderId_params = route.params.orderid;
-const dialog = ref<boolean>(false);
-const splitterModel = ref<number>(70);
-const tab = ref<string>("main");
-
-const order = ref<string>("");
-const years = ref<number>(new Date().getDate());
-const date = ref<Date>(new Date());
-const fileOrder = ref<any>(null);
-const fileTailer = ref<any>(null);
-
-const OrderPDF = ref<string>("");
-const TailerPDF = ref<string>("");
-const statusOrder = ref<string>();
-
-const orderId = ref<string>(orderId_params.toString());
-onMounted(async () => {
-  if (orderId.value) {
-    fetchAttachment(orderId.value);
-    fecthstatusOrder(orderId.value);
-  }
-
-  //   const pdfData = usePDF();
-
-  //   setTimeout(() => {
-  //     pdfSrc.value = pdfData.pdf.value;
-  //     numOfPages.value = pdfData.pages.value;
-  //   }, 1000);
-});
-
-const fetchAttachment = async (orderId: string) => {
-  showLoader();
-  await http
-    .get(config.API.attachmentOrder(orderId))
-    .then(async (res) => {
-      let response = res.data.result;
-      // console.log(response);
-      order.value = response.orderNo;
-      years.value = Number(response.orderYear);
-      if (response.date !== undefined) {
-        date.value = response.date;
-      }
-      if (response.orderFileUrl !== null) {
-        OrderPDF.value = response.orderFileUrl;
-        viewPDF(OrderPDF.value);
-      }
-      if (response.attachmentFileUrl !== null) {
-        TailerPDF.value = response.attachmentFileUrl;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const fecthstatusOrder = async (orderId: string) => {
-  await http
-    .get(config.API.orderReady(orderId))
-    .then((res) => {
-      let status = res.data.result;
-      statusOrder.value = status.result;
-    })
-    .catch((e) => {
-      console.log(e);
-    });
-};
-const viewPDF = async (pdf: string) => {
-  const pdfData = await usePDF(`${pdf}`);
-  showLoader();
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-    hideLoader();
-  }, 1500);
-};
-watch(tab, () => {
-  // console.log(tab.value);
-  if (tab.value === "main") {
-    viewPDF(OrderPDF.value);
-  }
-  if (tab.value === "second") {
-    viewPDF(TailerPDF.value);
-  }
-});
-
-// const myEventHandler = (e: any) => {
-//   console.log("e", e.target.innerWidth);
-//   if (vuePDFRef !== null) {
-//     vuePDFRef.value.reload();
-//   }
-// };
-
-const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
-const vuePDFRef = ref<any>(null);
-
-const myForm = ref<QForm | null>(null);
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-// const next = () => props.next();
-const previous = () => props.previous();
-
-const onchangePage = (val: any) => {
-  //   console.log(val);
-  if (vuePDFRef !== null) {
-    vuePDFRef.value.reload();
-  }
-};
-
-const save = () => {
-  if (myForm.value !== null) {
-    myForm.value!.validate().then((success: Boolean) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => {
-            await putOrderData();
-            await postfileOrder();
-            await postfileTailer();
-            await fetchAttachment(orderId.value);
-            await fecthstatusOrder(orderId.value);
-          },
-        );
-
-      }
-    });
-  }
-};
-const putOrderData = async () => {
-  const orderData = {
-    orderNo: order.value,
-    orderYear: years.value.toString(),
-    signDate: date.value,
-  };
-  await http
-    .put(config.API.attachmentOrder(orderId.value), orderData)
-    .then((res) => {
-      console.log(res);
-    })
-    .catch((e) => {
-      console.log(e);
-    });
-};
-
-const postfileOrder = async () => {
-  const formData = new FormData();
-  formData.append("File", fileOrder.value);
-  await http.post(config.API.attachmentOrderId(orderId.value), formData);
-};
-const postfileTailer = async () => {
-  const formData = new FormData();
-  formData.append("File", fileTailer.value);
-  await http.post(config.API.attachmentFileId(orderId.value), formData);
-};
-const clickExecute = async (id: string) => {
-  dialogConfirm(
-    $q,
-    async () => {
-      await http
-        .put(config.API.executeOrder(id))
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((e) => {
-          messageError($q, e);
-        });
-    },
-    "ยืนยันการออกคำสั่ง",
-    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
-  );
-};
-
-const validateForm = () => {
-  return (
-    fileOrder.value !== null &&
-    fileOrder.value !== null &&
-    order.value.trim() !== ""
-  );
-};
-const getClass = (val: boolean) => {
-  return {
-    "card-header-active q-px-lg q-py-md cursor-pointer": val,
-    "card-header q-px-lg q-py-md cursor-pointer": !val,
-  };
-};
-const setTab = (val: string) => {
-  tab.value = val;
-  page.value = 1;
-};
-</script>
 <style lang="scss" scoped>
 .border {
   border-radius: 10px;