update การเพิ่ม คำสั่ง

src/modules/18_command/components/Main/DialogFormCommand.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const { dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const isCopy = defineModel<boolean>("isCopy", { required: true });
+
+const commandType = ref<string>("");
+const commandNo = ref<string>("");
+const commandYear = ref<string>("");
+
+const listCommand = ref<DataListCommand[]>([]);
+const commandOp = ref<DataListCommand[]>([]);
+
+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();
+    });
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    !isCopy.value && router.push(`/command/edit/1234`);
+    console.log(commandNo.value);
+    console.log(commandYear.value);
+    onClose();
+  });
+}
+
+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;
+  }
+}
+
+function onClose() {
+  modal.value = false;
+  commandNo.value = "";
+  commandYear.value = "";
+}
+
+watch(modal, () => {
+  if (modal.value && !isCopy.value) {
+    fetchCommandType();
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="max-width: 35%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="isCopy ? 'ทำสำเนาคำสั่ง' : 'เพิ่มคำสั่ง'"
+          :close="onClose"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12" v-if="!isCopy">
+              <q-select
+                class="inputgreen"
+                v-model="commandType"
+                :label="`${'ประเภทคำสั่ง'}`"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="commandOp"
+                option-value="id"
+                lazy-rules
+                use-input
+                hide-bottom-space
+                outlined
+                :rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+                @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
+                    ) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-6">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                v-model="commandNo"
+                hide-bottom-space
+                :label="`${'คำสั่งเลขที่'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
+                lazy-rules
+              />
+            </div>
+            <label class="col-1 flex justify-center items-center text-bold"
+              >/</label
+            >
+            <div class="col-5">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                v-model="commandYear"
+                hide-bottom-space
+                :label="`${'พ.ศ.'}`"
+                mask="####"
+                :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                lazy-rules
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="public" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>