เพิ่มออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง

src/modules/13_salary/components/Command/step02.vue

@@ -0,0 +1,776 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+
+import type { QInput } from "quasar";
+import type { QTableProps, QForm } from "quasar";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
+
+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 routeName = ref<string>(route.name ? route.name.toString() : "");
+const modalData = ref<any>({
+  salaryAmount: null,
+  positionSalaryAmount: null,
+  monthSalaryAmount: null,
+  remarkVertical: "",
+  remarkHorizontal: "",
+});
+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: false,
+  },
+  {
+    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[]>([]);
+const orderTypeCode = ref<string>("");
+
+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);
+    await fetchOrder(id);
+  }
+};
+// เรียกรายชื่อออกคำสั่ง
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsselectedOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      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,
+          positionSalaryAmount: r.positionSalaryAmount,
+          monthSalaryAmount: r.monthSalaryAmount,
+        });
+      });
+      rows.value = list;
+      selected.value = rows.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+//เรียกรายละเอียดของคำสั่ง
+const fetchOrder = async (id: string) => {
+  await http
+    .get(config.API.detailOrder(id))
+    .then((res) => {
+      let data = res.data.result;
+      orderTypeCode.value = data.orderTypeCode;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+};
+// เช็คคำสั่ง
+const statuscode = computed(() => {
+  if (
+    orderTypeCode.value === "c-pm-01" ||
+    orderTypeCode.value === "c-pm-02" ||
+    orderTypeCode.value === "c-pm-03" ||
+    orderTypeCode.value === "c-pm-04" ||
+    orderTypeCode.value === "c-pm-05" ||
+    orderTypeCode.value === "c-pm-06" ||
+    orderTypeCode.value === "c-pm-07" ||
+    orderTypeCode.value === "c-pm-08" ||
+    orderTypeCode.value === "c-pm-09" ||
+    orderTypeCode.value === "c-pm-14" ||
+    orderTypeCode.value === "c-pm-21" ||
+    orderTypeCode.value === "c-pm-22"
+  ) {
+    return false;
+  }
+  return true;
+});
+// เช็คหมายเหตุ
+const checkNote = computed(() => {
+  if (
+    orderTypeCode.value === "c-pm-01" ||
+    orderTypeCode.value === "c-pm-02" ||
+    orderTypeCode.value === "c-pm-03" ||
+    orderTypeCode.value === "c-pm-04"
+  ) {
+    return true;
+  }
+  return false;
+});
+// ยืนยันลบข้อมูลราชชื่อ
+const dialogDeleteData = async (id: string) => {
+  dialogRemove($q, () => deleteData(id));
+};
+// ลบข้อมูลราชชื่อ API
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.personsOrder(id))
+    .then(() => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await conditionData();
+    });
+};
+// ปรับราชชื่อขึ้น
+const swapUp = async (id: string) => {
+  await http
+    .put(config.API.swapUpOrder(id))
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+// ปรับราชชื่อลง
+const swapDown = async (id: string) => {
+  await http
+    .put(config.API.swapDownOrder(id))
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const upDown = async (value: any, up: boolean = true) => {
+  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>("");
+// เปิด popup เงินเดือน
+const selectModal = (e: any) => {
+  titleName.value = e.name;
+  personalId.value = e.personalId;
+  modalOpenClose(e.personalId);
+};
+// เปิด popup เงินเดือน
+const modalOpenClose = async (personalId: string) => {
+  modal.value = !modal.value;
+  if (modal.value) {
+    await fetchSalary(personalId);
+  } else {
+    titleName.value = "";
+  }
+  myForm.value?.reset();
+};
+// เรียกข้อมูลเงินเดือนตาม personalId
+const fetchSalary = async (personalId: string) => {
+  showLoader();
+  await http
+    .get(config.API.salaryOrder(personalId))
+    .then((res: any) => {
+      const data = res.data.result;
+      modalData.value = {
+        salaryAmount:
+          data.salaryAmount === 0 &&
+          data.positionSalaryAmount === 0 &&
+          data.monthSalaryAmount === 0
+            ? null
+            : data.salaryAmount,
+        positionSalaryAmount:
+          data.salaryAmount === 0 &&
+          data.positionSalaryAmount === 0 &&
+          data.monthSalaryAmount === 0
+            ? null
+            : data.positionSalaryAmount,
+        monthSalaryAmount:
+          data.salaryAmount === 0 &&
+          data.positionSalaryAmount === 0 &&
+          data.monthSalaryAmount === 0
+            ? null
+            : data.monthSalaryAmount,
+        remarkVertical: data.remarkVertical,
+        remarkHorizontal: data.remarkHorizontal,
+      };
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+// ยืนยันการแก้ไขข้อมูลเงินเดือน
+const putSalary = async (salary: any) => {
+  dialogConfirm($q, async () => {
+    showLoader();
+    if (modalData.value.salaryAmount === null) {
+      modalData.value.salaryAmount = 0;
+    }
+    if (modalData.value.positionSalaryAmount === null) {
+      modalData.value.positionSalaryAmount = 0;
+    }
+    if (modalData.value.monthSalaryAmount === null) {
+      modalData.value.monthSalaryAmount = 0;
+    }
+    await http
+      .put(config.API.salaryOrder(personalId.value), modalData.value)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionData();
+        modal.value = false;
+        hideLoader();
+      });
+  });
+};
+// เปิด popup เพิ่มข้อมูลราชชื่อ
+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;
+      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;
+    })
+    .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);
+          },
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?"
+        );
+      }
+    });
+  }
+};
+// เพิ่มราชชื่อ API
+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) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
+};
+// บันทึกข้อมูล step 2
+const save = async () => {
+  const check = rows.value.find((x: any) => x.salaryAmount == 0);
+  if (
+    (selected.value.length > 0 && !check) ||
+    (statuscode.value === true && selected.value.length > 0)
+  ) {
+    dialogConfirm($q, () => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    });
+  } else if (check && statuscode.value === false) {
+    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,
+  };
+};
+const pagination = ref({
+  // sortBy: "OrderDate,OrderType",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="max-height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-pb-sm items-center">
+        <q-btn flat round color="primary" @click="refresh" 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>
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :filter="filter"
+        row-key="name"
+      >
+        <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-th auto-width />
+            <q-th auto-width />
+            <q-th auto-width v-if="statuscode !== true" />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">{{
+              col.name == "no" ? props.rowIndex + 1 : col.value
+            }}</q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1"
+                @click="upDown(props)"
+                icon="mdi-arrow-up-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1"
+                @click="upDown(props, false)"
+                icon="mdi-arrow-down-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width v-if="statuscode !== true">
+              <q-btn
+                v-if="props.row.salaryAmount === 0"
+                dense
+                size="12px"
+                flat
+                round
+                color="blue"
+                @click="selectModal(props.row)"
+                icon="mdi-cash-multiple"
+              >
+                <q-tooltip>เงินเดือน</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-else
+                dense
+                size="12px"
+                flat
+                round
+                color="primary"
+                @click="selectModal(props.row)"
+                icon="mdi-information-outline"
+              >
+                <q-tooltip>เงินเดือน</q-tooltip>
+              </q-btn>
+            </q-td>
+
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="dialogDeleteData(props.row.personalId)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </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="save"
+        class="q-px-md"
+      >
+      <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+  <!--********************************** เงินเดือน ********************************** -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="titleName" :close="modalOpenClose" />
+        <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">
+              <div class="col-12 row q-py-sm q-col-gutter-sm">
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.salaryAmount"
+                    :label="`${'เงินเดือน'}`"
+                    :rules="[(val: any) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`"
+                    hide-bottom-space
+                  />
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.monthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
+                  <q-input
+                    dense
+                    outlined
+                    v-model="modalData.remarkVertical"
+                    label="หมายเหตุแนวตั้ง"
+                    type="textarea"
+                    rows="2"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
+                  <q-input
+                    dense
+                    outlined
+                    v-model="modalData.remarkHorizontal"
+                    type="textarea"
+                    label="หมายเหตุแนวนอน"
+                    rows="2"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModal"
+            class="q-px-md"
+          >
+            <!-- icon="mdi-content-save-outline" -->
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <!--********************************** รายชื่อ ********************************** -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <d-table
+            :rows="rows2"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+            :selection="
+              routeName === 'disciplineOrderDatail' ? 'single' : 'multiple'
+            "
+            v-model:selected="selected"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-th>
+                <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" class="cursor-pointer">
+                <q-td>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
+                >
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModalAdd"
+            class="q-px-md"
+          >
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/13_salary/components/Command/step03.vue

@@ -0,0 +1,665 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { QInput, QForm } from "quasar";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+import type {
+  ResponseOrganiz,
+  ResponseCopyOrder,
+  DataCopyOrder,
+} from "@/modules/10_order/interface/response/Order";
+import type { RequestCopyOrder } from "@/modules/05_placement/interface/request/Order";
+import { useRoute } from "vue-router";
+import type { DataOption } from "@/modules/10_order/interface/index/Main";
+
+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 $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+
+const route = useRoute();
+
+const myForm = ref<QForm | null>(null);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+
+const modal = ref<boolean>(false);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+
+const selectedModal = ref<ResponseOrganiz[]>([]);
+
+const filterModal = ref<string>("");
+const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
+const columnsModal = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: false,
+  },
+  {
+    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 optionSelect = ref<DataOption[]>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "กล่องข้อความ" },
+]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "idCard",
+  "name",
+  "position",
+  "unit",
+  "send",
+]);
+const columns = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: false },
+  {
+    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" }),
+  },
+  {
+    name: "unit",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "unit",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "send",
+    align: "left",
+    label: "ช่องทางการส่งสำเนา",
+    field: "send",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const rows = ref<DataCopyOrder[]>([]);
+
+const editRows = ref<DataCopyOrder[]>([]);
+
+onMounted(async () => {
+  await conditionId();
+});
+
+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();
+    });
+};
+// เช็คค่า orderid
+const conditionId = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+// เรียก้อมูลใน Table
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.copyOrderId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let list: DataCopyOrder[] = [];
+      data.map((r: ResponseCopyOrder) => {
+        let selectCopyOrder = [];
+        if (r.emailChannel) {
+          selectCopyOrder.push(1);
+        }
+        if (r.inboxChannel) {
+          selectCopyOrder.push(2);
+        }
+        list.push({
+          personalId: r.personalId ?? "",
+          name: r.name ?? "",
+          idCard: r.idCard ?? "",
+          position: r.position ?? "",
+          unit: r.unit ?? "",
+          send: "",
+          mutiselect: selectCopyOrder,
+        });
+      });
+      if (editRows.value.length > 0) {
+        list.map((r: DataCopyOrder) => {
+          editRows.value.map((e: DataCopyOrder) => {
+            if (r.personalId == e.personalId) {
+              r.mutiselect = e.mutiselect;
+            }
+          });
+        });
+      }
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+// เลือกราชชื่อจากหน่วยงาน
+const saveData = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    showLoader();
+    await http
+      .post(config.API.copyOrderPersonsId(id), selectedModal.value)
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionId();
+        clickClose();
+        // hideLoader();
+      });
+  }
+};
+
+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,
+  };
+};
+
+const clickClose = async () => {
+  modal.value = false;
+};
+// เปิด popup เพิ่มข้อมูล
+const clickAdd = async () => {
+  await nodeTree();
+  selected.value = "";
+  rowsModal.value = [];
+  selectedModal.value = [];
+  modal.value = true;
+  if (myForm.value !== null) {
+    myForm.value.reset();
+  }
+};
+// ยืนยันการลบข้อมูล
+const clickDelete = (id: string) => {
+  dialogRemove($q, () => deleteData(id));
+};
+// โหลดโครงสร้าง tree
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      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 deleteData = async (id: string) => {
+  await http
+    .delete(config.API.copyOrderId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      //   hideLoader();
+      await conditionId();
+    });
+};
+// บันทึกข้อมูล step 3
+const saveDataCopyOrder = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        await fetchSaveCopyOrder();
+      }
+    });
+  }
+};
+// บันทึกข้อมูล step 3 API
+const fetchSaveCopyOrder = async () => {
+  let list: RequestCopyOrder[] = [];
+  rows.value.map((r: DataCopyOrder) => {
+    list.push({
+      personalId: r.personalId,
+      emailChannel: r.mutiselect.includes(1),
+      inboxChannel: r.mutiselect.includes(2),
+    });
+  });
+
+  showLoader();
+  await http
+    .put(config.API.copyOrder, list)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const updateData = (row: DataCopyOrder) => {
+  editRows.value.push(row);
+};
+</script>
+
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="max-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
+                  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"
+                  @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"
+      >
+        <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
+                  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
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="saveData"
+          class="q-px-md"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>