datepicker

src/modules/18_command/components/Step/3_ReceivedCopy.vue

@@ -3,12 +3,23 @@ import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/18_command/interface/index/Main";
 
 import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
 
+const $q = useQuasar();
 const store = useCommandDetail();
+const {
+  dialogMessageNotify,
+  dialogConfirm,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
 
 const filter = ref<string>("");
 const rows = ref<any[]>([
@@ -93,7 +104,9 @@ const optionSelect = ref<DataOption[]>([
 const modal = ref<boolean>(false);
 const selectedModal = ref<any[]>([]);
 
-function onDelete(id: string) {}
+function onDelete(id: string) {
+  dialogRemove($q, () => {});
+}
 
 function onSubmitPerson() {}
 </script>

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

@@ -7,7 +7,7 @@ import TableList from "@/modules/18_command/components/Main/TableMain.vue";
 
 const store = useCommandListStore();
 
-const year = ref<number>(new Date().getFullYear());
+const yearly = ref<number>(new Date().getFullYear());
 const searchKeyword = ref<string>("");
 
 const tabsManu = ref([
@@ -55,14 +55,12 @@ onMounted(() => {
   <q-card>
     <q-toolbar class="q-pa-sm">
       <datepicker
-        class="q-mr-sm"
         menu-class-name="modalfix"
-        :model-value="year"
+        v-model="yearly"
         :locale="'th'"
         autoApply
         year-picker
         :enableTimePicker="false"
-        clearable
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -70,16 +68,24 @@ onMounted(() => {
         }}</template>
         <template #trigger>
           <q-input
-            hide-bottom-space
-            outlined
             dense
-            borderless
-            :model-value="year == null ? null : year + 543"
+            outlined
+            hide-bottom-space
+            :model-value="yearly == null ? null : yearly + 543"
             :label="`${'ปีงบประมาณ'}`"
           >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
           </q-input>
         </template>
       </datepicker>
+
       <q-btn flat round dense icon="add" color="primary" />
 
       <q-space />