ui ออกคำสั่ง

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>