ui ออกคำสั่ง

src/api/18_command/api.command.ts

@@ -10,5 +10,7 @@ export default {
   commandAction: (commandId: string, type: string) =>
     `${command}/${type}/${commandId}`,
 
-  commandSalaryList:(command:string)=>`${commandSalary}/list?commandSysId=${command}`
+  commandSalaryList:(command:string)=>`${commandSalary}/list?commandSysId=${command}`,
+  commandSwap:(tab:string,direction:string,commandReciveId:string)=>`${command}/${tab}/swap/${direction}/${commandReciveId}`,
+  commandEditRecive:(tab:string,commandReciveId:string)=>`${command}/${tab}/recive/${commandReciveId}`
 };

src/modules/05_placement/components/PersonalList/DialogOrders.vue

@@ -3,9 +3,11 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import avatar from "@/assets/avatar_user.jpg";
+
+import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
-
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 // import http from "@/plugins/http";
 // import config from "@/app.config";
 
@@ -19,6 +21,8 @@ import { options } from "@fullcalendar/core/preact";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const route = useRoute();
+const DataStore = usePlacementDataStore();
 const storeCommand = useCommandMainStore();
 const {
   showLoader,
@@ -40,10 +44,13 @@ const props = defineProps({
   rows: Array,
 });
 
+const examId = route.params.examId;
 const rows = ref<any[]>([]);
 const commandType = ref<string>("");
 const commandOp = ref<ListCommand[]>([]);
+const listCommand = ref<ListCommand[]>([]); // เก็บคำสั่งทั้งหมด
 const modalCommand = ref<boolean>(false); //เปิด-ปิด modal สร้างคำสั่ง
+
 //Table
 const selected = ref<ResponseData[]>([]); //รายชื่อที่เลือก
 const filter = ref<string>(""); //คำค้นหา
@@ -150,6 +157,20 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * ฟิลเตอร์ คำสั่ง
+ * @param val ค่าจาก Input
+ * @param update Funtion quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandType.value = val ? "" : commandType.value;
+    commandOp.value = listCommand.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
 /**
  * ฟังก์ชันยืนยันการออกคำสั่ง
  */
@@ -167,8 +188,27 @@ function saveOrder() {
 
 function filterSelectOrder() {
   const data = props.rows ? props.rows : [];
-  rows.value = data.filter((v: any) => v.code == commandType.value);
+  rows.value = data.filter((v: any) => {
+    switch (commandType.value) {
+      case "C-PM-01":
+      case "C-PM-02":
+        return v.typeCommand === "APPOINTED" && v.bmaOfficer === null;
+
+      case "C-PM-03":
+        return v.typeCommand === "APPOINT" && v.bmaOfficer !== null;
+
+      case "C-PM-04":
+        return v.typeCommand === "MOVE" && v.bmaOfficer !== null;
+
+      case "C-PM-06":
+        return v.typeCommand === "SLIP" && v.bmaOfficer !== null;
+
+      default:
+        return [];
+    }
+  });
 }
+
 /**
  * เมื่อ props.modal เป็น true
  *
@@ -180,10 +220,25 @@ watch(
     if (modal.value === true) {
       rows.value = props.rows ? props.rows : [];
       selected.value = [];
-      const data = await storeCommand.getCommandTypes();
-      commandOp.value = data.filter(
-        (v: any) => v.code == "C-PM-01" || v.code == "C-PM-02"
-      );
+      const status = DataStore.DataMainOrig.find((x: any) => x.id == examId);
+      if (status?.examTypeName !== "") {
+        const data = await storeCommand.getCommandTypes();
+
+        listCommand.value = data.filter(
+          (v: any) =>
+            (status?.examTypeName === "สอบแข่งขัน" &&
+              (v.code === "C-PM-01" ||
+                v.code === "C-PM-03" ||
+                v.code === "C-PM-04" ||
+                v.code === "C-PM-06")) ||
+            ((status?.examTypeName === "สอบคัดเลือก" ||
+              status?.examTypeName === "คัดเลือกคนพิการ") &&
+              (v.code === "C-PM-02" ||
+                v.code === "C-PM-03" ||
+                v.code === "C-PM-04" ||
+                v.code === "C-PM-06"))
+        );
+      }
     }
   }
 );
@@ -205,9 +260,19 @@ watch(
             option-value="code"
             emit-value
             map-options
-            style="width: 200px; max-width: auto"
+            use-input
+            style="width: 350px; max-width: auto"
             @update:model-value="filterSelectOrder"
-          ></q-select>
+            @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn
+                    ) "
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template></q-select
+          >
           <q-space />
           <q-input
             borderless

src/modules/05_placement/components/PersonalList/PersonalListPage.vue

@@ -96,6 +96,7 @@ onMounted(async () => {
   title.value = examData.value == null ? null : examData.value.examRound;
   round.value = examData.value == null ? null : examData.value.examOrder;
   year.value = examData.value == null ? null : examData.value.fiscalYear;
+
 });
 </script>
 <template>

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

@@ -4,17 +4,24 @@ import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRoute } from "vue-router";
 import { usePosSalaryDataStore } from "@/modules/18_command/store/PosSalary";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/18_command/interface/index/Main";
-import type { ListCommandSalaryType } from "@/modules/18_command/interface/request/Main";
+import type {
+  ListCommandSalaryType,
+  PersonInfo,
+} from "@/modules/18_command/interface/request/Main";
 
 import DialogAddPerson from "@/modules/18_command/components/Step/Dialog2_AddPerson.vue";
 import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vue";
 
 const $q = useQuasar();
+const route = useRoute();
+const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
+
 const storePosSalary = usePosSalaryDataStore();
 const store = useCommandDetail();
 const {
@@ -36,23 +43,27 @@ const props = defineProps({
 
 const ListCommandSalary = ref<ListCommandSalaryType[]>([]);
 
+let selectPersonData = reactive<PersonInfo>({
+  id: "",
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  profileId: "",
+  order: 0,
+  remarkVertical: null,
+  remarkHorizontal: null,
+  amount: 0,
+  positionSalaryAmount: 0,
+  mouthSalaryAmount: 0,
+});
+const commandReciveId = ref<string>(""); //เก็บ id commandReciveId
 const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
 const templatePos = ref<string>("");
 const position = ref<string>("");
 
 const filter = ref<string>("");
-const rows = ref<any[]>([
-  {
-    idCard: "6796519798790",
-    fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
-    salaryAmount: 0,
-  },
-  {
-    idCard: "7707218775803",
-    fullName: "นายศรัณย์ ศิลาดี",
-    salaryAmount: 1,
-  },
-]);
+const rows = ref<PersonInfo[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -64,10 +75,10 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "idCard",
+    name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    field: "idCard",
+    field: "citizenId",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -80,9 +91,12 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
+    },
   },
 ]);
-const visibleColumns = ref<String[]>(["no", "idCard", "fullName"]);
+const visibleColumns = ref<String[]>(["no", "citizenId", "fullName"]);
 
 const modalSalary = ref<boolean>(false);
 const titleName = ref<string>("");
@@ -94,18 +108,55 @@ const modalPerson = ref<boolean>(false);
  * @param val
  */
 function updatePos(val: string) {
-  position.value = val;
+  const data = ListCommandSalary.value.find(
+    (item: ListCommandSalaryType) => item.id === val
+  );
+  if (data) {
+    position.value = data.name; // เก็บแค่ค่า name
+  } else {
+    position.value = "";
+  }
 }
 
-function onSawpPos(val: any, type: string) {}
+async function onSawpPos(val: any, type: string) {
+  showLoader();
+  await http
+    .get(config.API.commandSwap("tab2", type, val.id))
+    .then((res) => {
+      success($q, "แก้ไขข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 function onDelete(id: string) {
-  dialogRemove($q, () => {});
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .get(config.API.commandAction(id, "tab2"))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
-function selectModal(data: any) {
-  titleName.value = data.fullName;
+function selectModal(data: PersonInfo) {
+  selectPersonData = data
+  titleName.value = `${data.prefix ?? ""}${data.firstName ?? ""} ${
+    data.lastName ?? ""
+  }`;
   modalSalary.value = true;
+  commandReciveId.value = data.id;
 }
 
 /**
@@ -129,12 +180,34 @@ function filterSelector(val: string, update: Function, filtername: string) {
   }
 }
 
-function getCommandSalaryList(type: string) {
+/** บันทึกข้แมูล ตำแหน่ง */
+function savePosition() {
+  dialogConfirm($q, () => {
+    const body = {
+      commandSalaryId: templatePos.value,
+      positionDetail: position.value,
+    };
+    showLoader();
+    http
+      .put(config.API.commandAction(commandId.value, "tab2"), body)
+      .then(async (res) => {
+        await getPersonList();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+async function getCommandSalaryList(type: string) {
   showLoader();
-  http
+  await http
     .get(config.API.commandSalaryList(type))
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       ListCommandSalary.value = data;
     })
     .catch((e) => {
@@ -147,9 +220,29 @@ function getCommandSalaryList(type: string) {
 
 function onSubmit() {}
 
-onMounted(() => {
+/** ดึงข้อมูล บุคคล */
+async function getPersonList() {
+  showLoader();
+  await http
+    .get(config.API.commandAction(commandId.value, "tab2"))
+    .then((res) => {
+      const data = res.data.result;
+      templatePos.value = data.commandSalaryId;
+      position.value = data.positionDetail;
+      rows.value = data.commandRecives;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
   if (props.commandSysId) {
-    getCommandSalaryList(props.commandSysId);
+    await getCommandSalaryList(props.commandSysId);
+    await getPersonList();
   }
 });
 
@@ -180,10 +273,11 @@ defineExpose({
                 :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
                 option-label="name"
                 :options="ListCommandSalary"
-                option-value="name"
+                option-value="id"
                 hide-bottom-space
-                emit-value
                 use-input
+                emit-value
+                map-options
                 input-debounce="0"
                 @update:modelValue="updatePos"
                 @filter="(inputValue: any,
@@ -209,7 +303,7 @@ defineExpose({
         <q-separator />
 
         <q-card-actions align="right" v-if="!store.readonly">
-          <q-btn label="บันทึก" color="public" />
+          <q-btn label="บันทึก" color="public" @click="savePosition" />
         </q-card-actions>
       </q-card>
     </div>
@@ -292,7 +386,7 @@ defineExpose({
                         round
                         :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
                         :disable="props.rowIndex + 1 == 1"
-                        @click="onSawpPos(props, 'up')"
+                        @click="onSawpPos(props.row, 'up')"
                         icon="mdi-arrow-up-bold"
                       >
                         <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip>
@@ -308,7 +402,7 @@ defineExpose({
                           rows.length == props.rowIndex + 1 ? 'grey' : 'red'
                         "
                         :disable="rows.length == props.rowIndex + 1"
-                        @click="onSawpPos(props, 'down')"
+                        @click="onSawpPos(props.row, 'down')"
                         icon="mdi-arrow-down-bold"
                       >
                         <q-tooltip>เลื่อนลำดับลง</q-tooltip>
@@ -336,7 +430,7 @@ defineExpose({
                         flat
                         round
                         color="red"
-                        @click="onDelete(props.row.personalId)"
+                        @click="onDelete(props.row.id)"
                         icon="mdi-delete"
                       >
                         <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -360,5 +454,11 @@ defineExpose({
   </div>
 
   <DialogAddPerson v-model:modal="modalPerson" />
-  <DialogSalary v-model:modal="modalSalary" :title-name="titleName" />
+  <DialogSalary
+    v-model:modal="modalSalary"
+    :title-name="titleName"
+    :command-edit-recive="commandReciveId"
+    :get-data="getPersonList"
+    :select-person-data="selectPersonData"
+  />
 </template>

src/modules/18_command/components/Step/Dialog2_Salary.vue

@@ -1,17 +1,26 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
-const { dialogConfirm } = useCounterMixin();
+const { dialogConfirm, messageError, success } = useCounterMixin();
 
+const props = defineProps({
+  getData: Function,
+  selectPersonData: Object,
+});
 const modal = defineModel<boolean>("modal", { required: true });
 const titleName = defineModel<string>("titleName", { required: true });
+const commandEditRecive = defineModel<string>("commandEditRecive", {
+  required: true,
+});
 
 const formData = reactive({
   salaryAmount: 0,
@@ -23,7 +32,23 @@ const formData = reactive({
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    onClose();
+    http
+      .put(config.API.commandEditRecive("tab2", commandEditRecive.value), {
+        mouthSalaryAmount: formData.salaryAmount, //เงินเดือน
+        positionSalaryAmount: formData.positionSalaryAmount, //เงินประจำตำแหน่ง
+        amount: formData.monthSalaryAmount, //เงินค่าตอบแทนรายเดือน
+        remarkHorizontal: formData.remarkVertical, //หมายเหตุแนวตั้ง
+        remarkVertical: formData.remarkHorizontal, //หมายเหตุแนวนอน
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClose();
+        props.getData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
   });
 }
 
@@ -35,6 +60,22 @@ function onClose() {
   formData.remarkVertical = null;
   formData.remarkHorizontal = null;
 }
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      if (props.selectPersonData) {
+        const list = props.selectPersonData;
+        formData.salaryAmount = list.mouthSalaryAmount;
+        formData.positionSalaryAmount = list.positionSalaryAmount;
+        formData.monthSalaryAmount = list.amount;
+        formData.remarkVertical = list.remarkVertical;
+        formData.remarkHorizontal = list.remarkHorizontal;
+      }
+    }
+  }
+);
 </script>
 
 <template>

src/modules/18_command/interface/request/Main.ts

@@ -28,11 +28,28 @@ interface FormDataDetail {
 
 interface ListCommandSalaryType {
   id: string;
-  createdAt: Date|null;
-  lastUpdatedAt: Date|null;
+  createdAt: Date | null;
+  lastUpdatedAt: Date | null;
   createdFullName: string;
   lastUpdateFullName: string;
   name: string;
   commandSysId: string;
 }
-export type { FormQuery, FormCommand, FormDataDetail,ListCommandSalaryType };
+
+interface PersonInfo {
+  id: string;
+  citizenId: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  profileId: string;
+  order: number;
+  remarkVertical: string | null;
+  remarkHorizontal: string | null;
+  amount: number;
+  positionSalaryAmount: number;
+  mouthSalaryAmount: number; 
+}
+
+
+export type { FormQuery, FormCommand, FormDataDetail, ListCommandSalaryType ,PersonInfo};

src/modules/18_command/views/detail.vue

@@ -85,6 +85,7 @@ async function fetchDataCommandList() {
     .get(config.API.commandAction(commandId.value, "tab1"))
     .then(async (res) => {
       const data = await res.data.result;
+      console.log("🚀 ~ .then ~ data:", data);
       formCommandList = data;
       store.dataCommand = data;
       //รอ API ส่งมา  isAttachment.value = data.isAttachment ;
@@ -190,11 +191,7 @@ onMounted(async () => {
           </q-card>
         </q-tab-panel>
 
-        <q-tab-panel
-        class="bg-grey-2"
-          style="padding: 0px;"
-          name="ListPersons"
-        >
+        <q-tab-panel class="bg-grey-2" style="padding: 0px" name="ListPersons">
           <ListPersons
             ref="childListPersonsRef"
             v-model:is-change-data="isChangeData"