updated

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

@@ -15,6 +15,7 @@ import type {
 
 import Header from "@/components/DialogHeader.vue";
 import PageOrder from "@/modules/05_command/components/ViewPdf.vue";
+import TemplateDetail from "@/modules/05_command/components/FormTemplate.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -28,18 +29,20 @@ const {
   messageError,
 } = mixin;
 
-const inActive = ref<string>(""); //Select Active/InActive
+const isActive = ref<string>(""); // สถานะของรายการคำสั่ง
+// options สถานะการใช้งาน
 const activeOptions = ref<ActiveOptions[]>([
   {
-    value: "Active",
+    value: true,
     label: "Active",
   },
   {
-    value: "InActive",
+    value: false,
     label: "InActive",
   },
 ]);
 
+// Tabs
 const tabs = ref<Tabs[]>([
   {
     value: "order",
@@ -49,25 +52,32 @@ const tabs = ref<Tabs[]>([
     value: "account",
     label: "บัญชีแนบท้าย",
   },
+  {
+    value: "template",
+    label: "ข้อความต้นแบบ",
+  },
 ]);
 
-const idOrder = ref<string>("");
-const activeOrderId = ref<string>("");
+const idOrder = ref<string>(""); // Id คำสั่ง
+const activeOrderId = ref<string>(""); // Id คำสั่งที่เลือก
 const name = ref<string>(""); // ชื่อคำสั่ง
 const listOrder = ref<ListOrder[]>([]); // list คำสั่ง
 const status = ref<boolean>(false); // สถานะ
 const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
-const modelDialogActive = ref<boolean>(false); // model คำสั่ง
+const dialogFormCommand = ref<boolean>(false); // model คำสั่ง
 
-/** search Active / InActive */
-function searchActive(val: string) {
+/**
+ * ฟังก์ชั่นค้นหาคำสั่ง ตามสถานะ
+ * @param val สถานะ true/false
+ */
+function searchByStatus(val: string) {
   console.log(val);
 }
 
 /** เปิด dialog */
 function onDialogAdd() {
   isEdit.value = false;
-  modelDialogActive.value = true;
+  dialogFormCommand.value = true;
 }
 /**
  * เปิด dialog Edit
@@ -79,7 +89,7 @@ function onDialogEdit(data: ListOrder) {
   status.value = data.status;
 
   isEdit.value = true;
-  modelDialogActive.value = true;
+  dialogFormCommand.value = true;
 }
 
 /**
@@ -102,7 +112,7 @@ function onDelete(id: string) {
 function closeDialog() {
   idOrder.value = "";
   isEdit.value = false;
-  modelDialogActive.value = false;
+  dialogFormCommand.value = false;
   name.value = "";
   status.value = false;
 }
@@ -174,14 +184,14 @@ onMounted(() => {
             <q-select
               outlined
               dense
-              v-model="inActive"
+              v-model="isActive"
               class="inputgreen"
               label="สถานะการใช้งาน"
               :options="activeOptions"
               option-label="label"
               option-value="value"
               emit-value
-              @update:model-value="searchActive"
+              @update:model-value="searchByStatus"
             ></q-select>
           </div>
         </div>
@@ -294,6 +304,12 @@ onMounted(() => {
                 :id-order="activeOrderId"
               />
             </q-tab-panel>
+            <q-tab-panel name="template">
+              <TemplateDetail
+                v-model:type="store.currentTab"
+                :command-id="activeOrderId"
+              />
+            </q-tab-panel>
           </q-tab-panels>
         </div>
         <div v-else style="height: auto; max-width: 100%; max-height: 90vh">
@@ -315,11 +331,11 @@ onMounted(() => {
     </div>
   </div>
 
-  <q-dialog v-model="modelDialogActive" persistent>
+  <q-dialog v-model="dialogFormCommand" persistent>
     <q-card class="col-12" style="min-width: 30%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
-          :tittle="isEdit ? 'แก้ไขข้อมูลคำสั่ง' : 'เพิ่มข้อมูลคำสั่ง'"
+          :tittle="isEdit ? 'แก้ไขคำสั่ง' : 'เพิ่มคำสั่ง'"
           :close="closeDialog"
         />
         <q-separator />