เพิ่มเลือกประเภทคำสั่ง

src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
+import { ref, computed, watchEffect, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import http from "@/plugins/http";
@@ -12,7 +13,7 @@ import config from "@/app.config";
 const $q = useQuasar();
 const selected = ref<ResponseData[]>([]);
 const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const visibleColumns2 = ref<string[]>([
@@ -122,11 +123,11 @@ const props = defineProps({
   closeModal: Function,
   getData: Function,
   rows2: Array,
-  filterKeyword2:String,
+  filterKeyword2: String,
+
+  type: String,
 });
 
-
-
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -135,8 +136,13 @@ const checkSelected = computed(() => {
 
 //popup ยืนยันส่งัว
 const saveOrder = () => {
-    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
-}
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((r) => r.id);
@@ -163,20 +169,49 @@ const Ordersave = async () => {
 const emit = defineEmits([
   "update:filterKeyword2",
   "update:selected",
-
+  "update:type",
 ]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
-    emit("update:filterKeyword2", "");
+  emit("update:filterKeyword2", "");
 };
+
+const updateInputType = (value: any) => {
+  emit("update:type", value);
+};
+
+//----(ดึงข้อมูลประเภทคำสั่ง)------//
+const optionsType = ref<[]>([]);
+const fecthTypeOption = async () => {
+  showLoader();
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      optionsType.value = res.data.result.filter(
+        (e: OpType) =>
+          e.commandCode === "C-PM-25" || e.commandCode === "C-PM-26"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 watchEffect(() => {
   if (props.Modal === true) {
     selected.value = [];
   }
 });
+
+onMounted(async () => {
+  await fecthTypeOption();
+});
 </script>
 <template>
   <q-dialog v-model="props.Modal">
@@ -184,7 +219,33 @@ watchEffect(() => {
       <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
-        <div class="row justify-end">
+        <div class="row justify-between">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-select
+                outlined
+                dense
+                :model-value="type"
+                @update:model-value="updateInputType"
+                :options="optionsType"
+                label="ประเภทคำสั่ง"
+                style="width: 400px; max-width: auto"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                use-input
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-toolbar>
+          </div>
+
           <div class="col-5">
             <q-toolbar style="padding: 0">
               <q-input
@@ -192,7 +253,7 @@ watchEffect(() => {
                 outlined
                 dense
                 debounce="300"
-                :model-value="filterKeyword2" 
+                :model-value="filterKeyword2"
                 @update:model-value="updateInput"
                 placeholder="ค้นหา"
                 style="width: 850px; max-width: auto"
@@ -297,4 +358,4 @@ watchEffect(() => {
       </q-card-actions>
     </q-card>
   </q-dialog>
-</template>
+</template>

src/modules/11_discipline/components/4_Result/EditPage.vue

@@ -18,6 +18,7 @@ const { dialogConfirm } = mixin;
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
+const type = ref<string>("");
 
 /** ข้อมูล v-model ของฟอร์ม */
 const data = reactive<FormData>({
@@ -45,13 +46,11 @@ function closeModal() {
   modal.value = false;
 }
 
-function getData() {
-
-}
+function getData() {}
 
 /** ยืนยัน ส่งไปออกคำสั่ง */
 function sentIssue() {
-  modal.value = true
+  modal.value = true;
   // dialogConfirm(
   //   $q,
   //   () => {
@@ -64,7 +63,7 @@ function sentIssue() {
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(async () => {
-  store.tabMenu = 'result'
+  store.tabMenu = "result";
   await fetchData();
 });
 </script>
@@ -128,8 +127,8 @@ onMounted(async () => {
     :rows2="[]"
     v-model:filterKeyword2="filterKeyword"
     :getData="getData"
+    v-model:type="type"
   />
-
 </template>
 
 <style scoped>