ปรับ ui สร้างคำสั่ง

src/modules/18_command/components/DialogCreateCommand.vue

@@ -14,6 +14,7 @@ import type {
   DataCommandType,
   DataListCommand,
 } from "@/modules/18_command/interface/response/Main";
+import type { ListCommand } from "@/modules/18_command/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -33,13 +34,12 @@ const {
 const modal = defineModel<boolean>("modal", { required: true });
 
 const props = defineProps({
-  commandTypeId: String, // ไอดีประเภทคำสั่ง
+  commandTypeCode: String, // ไอดีประเภทคำสั่ง
   personsId: Array, // ไอดีคนที่เลือกออกคำสั่งส่งมาเป็น array
 });
 
+const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
 const commandType = ref<string>(""); //ประเภทคำสั่ง
-const commandOp = ref<DataCommandType[]>([]); //ตัวเลือกคำสั่ง
-const listCommand = ref<DataCommandType[]>([]); //ตัวเลือกคำสั่ง
 const commandNo = ref<string>("");
 const commandYear = ref<number>(new Date().getFullYear());
 
@@ -135,29 +135,28 @@ const columns = ref<QTableProps["columns"]>([
  */
 function createCommand() {
   dialogConfirm($q, async () => {
-    // const data = props.personsId;
-    // const body = {
-    //   commandYear: commandYear.value,
-    //   commandNo: commandNo.value,
-    //   commandTypeId: commandType.value,
-    //   persons: data,
-    // };
-    // showLoader();
-    // await http
-    //   .post(config.API.transferReport, body)
-    //   .then(async (res) => {
-    //     const id = await res.data.result;
-    //     modal.value = false;
-    router.push("/command/edit/736c178f-9c11-44bc-b6e0-ef47ea06ffe9");
-    // router.push(`/command/edit/${id}`);
-    clearValue();
-    // })
-    // .catch((e) => {
-    //   messageError($q, e);
-    // })
-    // .finally(() => {
-    //   hideLoader();
-    // });
+    const data = props.personsId;
+    const body = {
+      commandYear: commandYear.value,
+      commandNo: commandNo.value,
+      commandTypeId: commandType.value,
+      //   persons: data,
+    };
+    showLoader();
+    await http
+      .post(config.API.command, body)
+      .then(async (res) => {
+        const id = await res.data.result;
+        modal.value = false;
+        clearValue();
+        router.push(`/command/edit/${id}`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -198,22 +197,6 @@ function onSubmit() {
   }
 }
 
-function filterSelector(val: string, update: Function, refData: string) {
-  switch (refData) {
-    case "OrderTypeOption":
-      update(() => {
-        commandType.value = val ? "" : commandType.value;
-        commandOp.value = listCommand.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-}
-
 /**
  * เปลี่ยน tab เเละ clear ค่า tab ก่อนหน้า
  * @param type แยกประเภท
@@ -238,8 +221,8 @@ function clearValue() {
   commandYear.value = new Date().getFullYear();
 
   selectCreate.value = "NEW";
-  selected.value = []
-  filter.value = ''
+  selected.value = [];
+  filter.value = "";
 }
 
 const selectCreate = ref<string | null>("NEW");
@@ -269,20 +252,12 @@ async function getListCommandDraf() {
 
 /** ดึงข้อมูลคำสั่ง */
 async function fetchCommandType() {
-  showLoader();
-  await http
-    .get(config.API.commandType)
-    .then(async (res) => {
-      const data = await res.data.result;
-      listCommand.value = data;
-      commandOp.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  const data = await storeCommand.getCommandTypes(); // ยิงไป get ที่ store
+  // filter เฉพาะ code ของคำสั่งที่เลือก
+  commandOp.value = await data.filter(
+    (v: any) => v.code == props.commandTypeCode
+  );
+  commandType.value = commandOp.value[0].id;
 }
 
 function updatePagination(newPagination: any) {
@@ -305,17 +280,13 @@ watch(modal, () => {
 </script>
 
 <template>
-  <q-dialog v-model="modal">
-    <q-card
-      :style="
-        selectCreate == 'NEW'
-          ? 'width: 500px;max-width: 80vw;'
-          : 'width: 1200px;max-width: 80vw;'
-      "
-    >
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
       <DialogHeader :tittle="'สร้าง/เลือกคำสั่ง'" :close="closeModal" />
+
       <q-separator />
-      <q-card-section class="q-pa-sm">
+
+      <q-card-section style="max-height: 50vh" class="scroll">
         <div class="row q-mb-md">
           <div class="col-12 q-gutter-md">
             <q-btn
@@ -341,20 +312,17 @@ watch(modal, () => {
               class="inputgreen"
               v-model="commandType"
               :label="`${'ประเภทคำสั่ง'}`"
-              dense
-              emit-value
-              map-options
               option-label="name"
               :options="commandOp"
               option-value="id"
+              dense
+              emit-value
+              map-options
               lazy-rules
               use-input
               hide-bottom-space
               outlined
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-              @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
-                    ) "
+              readonly
             >
               <template v-slot:no-option>
                 <q-item>
@@ -539,7 +507,9 @@ watch(modal, () => {
           </div>
         </div>
       </q-card-section>
+
       <q-separator />
+
       <q-card-actions align="right">
         <q-btn
           label="บันทึก"