ปีงบประมาณ

src/modules/13_salary/components/SalaryRound/DialogForm.vue

@@ -16,6 +16,7 @@ const isActive = ref<boolean>(false);
 const period = ref<string>("");
 const modal = defineModel<boolean>("modal", { required: true });
 const effective = defineModel<Date|null|string>("effective", { required: true });
+const year = defineModel<number|null|string>("year");
 const mixin = useCounterMixin();
 const { dialogConfirm, date2Thai, messageError } = mixin;
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
@@ -68,6 +69,7 @@ function clearForm() {
   isActive.value = false;
   period.value = "";
   effective.value = null;
+  year.value = 0
 }
 
 function close() {
@@ -81,6 +83,7 @@ function editSummit(){
       period: period.value,
       isActive: isActive.value,
       effectiveDate: effective.value,
+      year: year.value,
     };
     http
       .put(config.API.salaryPeriod()+`/${props.idRound}`, body)
@@ -102,6 +105,7 @@ function onSubmit() {
       period: period.value,
       isActive: isActive.value,
       effectiveDate: effective.value,
+      year: year.value,
     };
     http
       .post(config.API.salaryPeriod(), body)
@@ -133,6 +137,7 @@ watch(
       effectiveDate.value = props.effectiveDate ? props.effectiveDate:null;
       isActive.value = props.isActive;
     }else{
+      year.value = 0
       effective.value = null
       period.value = ''
       isActive.value = false
@@ -154,6 +159,40 @@ watch(
 
       <q-card-section class="scroll" style="max-height: 70vh">
         <div class="q-gutter-y-sm">
+
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="year"
+          class="col-2"
+          :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
+              dense
+              lazy-rules
+              outlined
+              :model-value="year === 0 ? null : Number(year) + 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-select
             ref="periodRef"
             :class="inputEdit(isReadonly)"

src/modules/13_salary/interface/response/Main.ts

@@ -45,6 +45,7 @@ interface RowList {
   period: string|null;
   isActive: boolean|null;
   effectiveDate: Date|null|string;
+  year: number|null;
   status: string|null;
 }
 

src/modules/13_salary/store/SalaryStore.ts

@@ -17,6 +17,7 @@ export const useSalaryDataStore = defineStore("salaryDataStore", () => {
     rows.value = data.map((i: RowList) => ({
       id: i.id,
       period: i.period !== null ? i.period : null,
+      year: i.year !== null ? i.year : null,
       isActive: i.isActive !== null ? i.isActive : null,
       effectiveDate: i.effectiveDate !== null ? i.effectiveDate : null,
       status: i.status !== null ? i.status : null,

src/modules/13_salary/views/salaryRound.vue

@@ -25,6 +25,7 @@ const period = ref<string>("");
 const isActive = ref<boolean>(false);
 const effectiveDate = ref<Date | null>(null);
 
+const yearData = ref<number|null>(0)
 const maxPage = ref<number>(1);
 const currentPage = ref<number>(1);
 const page = ref<number>(1);
@@ -38,6 +39,7 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "period",
+  "year",
   "effectiveDate",
   "isActive",
 ]);
@@ -62,6 +64,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "effectiveDate",
     align: "left",
@@ -147,6 +158,7 @@ function editPopup(data:RowList) {
   console.log(dialog.value)
   idRound.value = data.id;
   period.value = data.period ? data.period:'';
+  yearData.value = data.year ? data.year:0;
   effectiveDate.value = data.effectiveDate as Date;
   isActive.value = data.isActive ? data.isActive:false;
 }
@@ -314,6 +326,9 @@ onMounted(async () => {
               <div v-if="col.name == 'effectiveDate'">
                 {{ date2Thai(props.row.effectiveDate)}}
               </div>
+              <div v-else-if="col.name == 'year'">
+                {{ props.row.year ? props.row.year + 543:'-'}}
+              </div>
               <div v-else-if="col.name == 'period'">
                 {{ dataStore.statusTothai(props.row.period)}}
               </div>
@@ -379,6 +394,7 @@ onMounted(async () => {
     :period="period"
     v-model:effective="effectiveDate"
     :isActive="isActive"
+    v-model:year="yearData"
   />
 </template>