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

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

@@ -0,0 +1,7 @@
+import env from "../index";
+
+const command = `${env.API_URI}/order`;
+
+export default {
+  commandType: `${command}/order-type`,
+};

src/app.config.ts

@@ -67,6 +67,9 @@ import KPI from "./api/14_KPI/api.KPI";
 /** API เงินเดือน/ค่าจ้าง*/
 import development from "./api/15_development/api.development";
 
+/** ออกคำสั่งใหม่ */
+import command from "./api/18_command/api.command";
+
 import file from "./api/file/api.file";
 
 // environment variables
@@ -133,6 +136,9 @@ const API = {
   ...KPI,
   ...development,
 
+  /** ออกคำสั่งใหม่ */
+  ...command,
+
   /*file*/
   ...file,
 };

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

@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useQuasar } from "quasar";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const $q = useQuasar();
-const { dialogConfirm } = useCounterMixin();
-
-const modal = defineModel<boolean>("modal", { required: true });
-
-const commandNo = ref<string>("");
-const commandYear = ref<string>("");
-
-function onSubmit() {
-  dialogConfirm($q, () => {
-    console.log(commandNo.value);
-    console.log(commandYear.value);
-    onClose();
-  });
-}
-
-function onClose() {
-  modal.value = false;
-  commandNo.value = "";
-  commandYear.value = "";
-}
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="max-width: 50%">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader :tittle="'ทำสำเนาคำสั่ง'" :close="onClose" />
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm">
-            <div class="col-6">
-              <q-input
-                class="inputgreen"
-                outlined
-                dense
-                v-model="commandNo"
-                hide-bottom-space
-                :label="`${'คำสั่งเลขที่'}`"
-                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
-              />
-            </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 || `${'กรุณากรอก พ.ศ.'}`]"
-              />
-              <!-- <datepicker
-                v-model="commandYear"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    class="inputgreen"
-                    :model-value="
-                      commandYear !== null ? commandYear + 543 : null
-                    "
-                    :rules="[(val) => !!val || `${'กรุณาเลือก พ.ศ.'}`]"
-                    :label="`${'พ.ศ.'}`"
-                    dense
-                    hide-bottom-space
-                    outlined
-                  >
-                  </q-input>
-                </template>
-              </datepicker> -->
-            </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>

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>

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

@@ -6,7 +6,7 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 
-import DialogCopyCommand from "@/modules/18_command/components/Main/DialogCopyCommand.vue";
+import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
 
 import type { QTableProps } from "quasar";
 
@@ -239,7 +239,7 @@ function onReCommand(id: string) {
     </template>
   </d-table>
 
-  <DialogCopyCommand v-model:modal="modalCopy" />
+  <DialogFormCommand v-model:modal="modalCopy" :is-copy="true" />
 </template>
 
 <style scoped></style>

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

@@ -1 +1,14 @@
-export type {};
+interface DataListCommand {
+  category: string;
+  commandCode: string;
+  createdAt: string | Date;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string | Date;
+  name: string;
+}
+
+export type { DataListCommand };

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

@@ -3,12 +3,14 @@ import { onMounted, ref } from "vue";
 
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 
+import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
 import TableList from "@/modules/18_command/components/Main/TableMain.vue";
 
 const store = useCommandListStore();
 
 const yearly = ref<number>(new Date().getFullYear());
 const searchKeyword = ref<string>("");
+const modalAdd = ref<boolean>(false);
 
 const tabsManu = ref([
   { label: "แบบร่าง", name: "list_draft" },
@@ -86,7 +88,14 @@ onMounted(() => {
         </template>
       </datepicker>
 
-      <q-btn flat round dense icon="add" color="primary" />
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click.prevent="modalAdd = true"
+      />
 
       <q-space />
       <q-input
@@ -134,6 +143,8 @@ onMounted(() => {
       </q-tab-panels>
     </q-card-section>
   </q-card>
+
+  <DialogFormCommand v-model:modal="modalAdd" :is-copy="false" />
 </template>
 
 <style scoped></style>