no message

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

@@ -9,20 +9,51 @@ div
         <q-space />
         <div class="items-center" style="display: flex">
           <!-- ค้นหาข้อความใน table -->
-          <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
+          <q-input
-            style="max-width: 200px" class="q-ml-sm">
+            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" />
+              <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
+          <q-select
-            :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
+            v-model="visibleColumns"
-            class="gt-xs q-ml-sm" />
+            :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">
+      <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">
@@ -32,27 +63,79 @@ div
             <q-th auto-width />
             <q-th auto-width />
             <q-th auto-width />
+            <q-th auto-width />
           </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" @click="selectModal(props.row)">{{ col.name ==
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">{{
-              "no" ? props.rowIndex + 1 : col.value }}</q-td>
+              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'"
+              <q-btn
-                :disable="props.rowIndex + 1 == 1" @click="upDown(props)" icon="mdi-arrow-up-bold">
+                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'"
+              <q-btn
-                :disable="rows.length == props.rowIndex + 1" @click="upDown(props, false)" icon="mdi-arrow-down-bold">
+                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>
-              <q-btn dense size="12px" flat round color="red" @click="dialogDeleteData(props.row.personalId)"
+              <q-btn
-                icon="mdi-delete">
+                v-if="props.row.salaryAmount === null"
+                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>
@@ -62,9 +145,24 @@ div
     </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
+        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"><!-- icon="mdi-content-save-outline"
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        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">
@@ -83,22 +181,44 @@ div
             <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input outlined dense lazy-rules v-model="modalData.salaryAmount"
+                  <q-input
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" :label="`${'เงินเดือน'}`" type="number"
+                    outlined
-                    hide-bottom-space />
+                    dense
+                    
+                    lazy-rules
+                    v-model.number="modalData.salaryAmount"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    :label="`${'เงินเดือน'}`"
+                    type="text"
+                    hide-bottom-space
+                  />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input outlined dense lazy-rules v-model="modalData.positionSalaryAmount"
+                  <q-input
-                    :label="`${'เงินประจำตำแหน่ง'}`" type="number" hide-bottom-space />
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                     ]" -->
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input outlined dense lazy-rules v-model="modalData.mouthSalaryAmount"
+                  <q-input
-                    :label="`${'เงินค่าตอบแทนรายเดือน'}`" type="number" hide-bottom-space />
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.mouthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                     ]" -->
@@ -109,7 +229,14 @@ 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-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>
@@ -123,12 +250,24 @@ div
         <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"
+          <d-table
-            selection="multiple" v-model:selected="selected">
+            :rows="rows2"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+            selection="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-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>
@@ -138,17 +277,33 @@ div
             <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-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 :
+                <q-td
-                  col.value }}</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"><!-- icon="mdi-content-save-outline"
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModalAdd"
+            class="q-px-md"
+            ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -183,15 +338,25 @@ const props = defineProps({
 const next = () => props.next();
 const previous = () => props.previous();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessageNotify, dialogConfirm, dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+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: 0,
+  salaryAmount: null,
-  positionSalaryAmount: 0,
+  positionSalaryAmount: null,
-  mouthSalaryAmount: 0,
+  mouthSalaryAmount: null,
 });
 const myForm = ref<QForm | null>(null);
 const myFormAdd = ref<QForm | null>(null);
@@ -251,8 +416,8 @@ const conditionData = async () => {
   const id = route.params.orderid
     ? route.params.orderid.toString()
     : localStorage.getItem("orderId")
-      ? localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
-      : null;
+    : null;
   if (id !== null) {
     await getData(id);
   }
@@ -275,9 +440,12 @@ const getData = async (id: string) => {
           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);
+      console.log("list", list);
       rows.value = list;
       selected.value = rows.value;
     })
@@ -306,10 +474,7 @@ const getData = async (id: string) => {
 // };
 
 const dialogDeleteData = async (id: string) => {
-  dialogRemove(
+  dialogRemove($q, () => deleteData(id));
-    $q,
-    () => deleteData(id),
-  );
 };
 
 const deleteData = async (id: string) => {
@@ -415,12 +580,13 @@ const fetchSalary = async (personalId: string) => {
     .get(config.API.salaryOrder(personalId))
     .then((res: any) => {
       console.log(res);
-      let salary = res.data.result;
+      const data = res.data.result;
       modalData.value = {
-        salaryAmount: salary.salaryAmount,
+        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount:null,
-        positionSalaryAmount: salary.positionSalaryAmount,
+        positionSalaryAmount: data.positionSalaryAmount !== 0 ? data.salaryAmount:null,
-        mouthSalaryAmount: salary.monthSalaryAmount,
+        mouthSalaryAmount: data.monthSalaryAmount !== 0 ? data.salaryAmount:null,
       };
+      console.log("data", modalData.value);
     })
     .catch((e) => {
       console.log(e);
@@ -436,27 +602,24 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  dialogConfirm(
+  dialogConfirm($q, async () => {
-    $q,
+    showLoader();
-    async () => {
+    await http
-      showLoader()
+      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      await http
+      .then((res: any) => {
-        .put(config.API.salaryOrder(personalId.value), modalData.value)
+        console.log(res);
-        .then((res: any) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
-          console.log(res);
+      })
-          success($q, "บันทึกข้อมูลสำเร็จ");
+      .catch((e) => {
-        })
+        console.log(e);
-        .catch((e) => {
+        messageError($q, e);
-          console.log(e);
+      })
-          messageError($q, e);
+      .finally(async () => {
-        })
+        await conditionData();
-        .finally(async () => {
+        modal.value = false;
-          await conditionData();
+        hideLoader();
-          modal.value = false;
+      });
-          hideLoader()
+  });
-        });
-    },
-  );
 };
 
 const modalAddChange = async () => {
@@ -465,8 +628,8 @@ const modalAddChange = async () => {
     const id = route.params.orderid
       ? route.params.orderid.toString()
       : localStorage.getItem("orderId")
-        ? localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
-        : null;
+      : null;
     if (id !== null) {
       await fetchaddlist(id);
     }
@@ -512,9 +675,8 @@ const saveModalAdd = () => {
             addlist(data);
           },
           "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?"
         );
-
       }
     });
   }
@@ -523,8 +685,8 @@ const addlist = async (data: Object) => {
   const id = route.params.orderid
     ? route.params.orderid.toString()
     : localStorage.getItem("orderId")
-      ? localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
-      : null;
+    : null;
   if (id !== null) {
     await http
       .post(config.API.personsOrder(id), data)
@@ -548,19 +710,12 @@ const click = (e: any) => {
 
 const save = () => {
   if (selected.value.length > 0) {
-    dialogConfirm(
+    dialogConfirm($q, () => {
-      $q,
+      success($q, "บันทึกข้อมูลสำเร็จ");
-      () => {
+      next();
-        success($q, "บันทึกข้อมูลสำเร็จ");
+    });
-        next();
-      },
-    );
-
   } else {
-    dialogMessageNotify(
+    dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
-      $q,
-      "กรุณาเลือกรายชื่อ",
-    );
   }
 };
 
@@ -583,4 +738,4 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss"></style>