รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ

src/modules/14_KPI/interface/request/Main.ts

@@ -7,6 +7,7 @@ interface FormQueryRound {
 
 interface FormRound {
   durationKPI: string;
+  year: number | null;
   startDate: Date | null;
   endDate: Date | null;
 }

src/modules/14_KPI/views/round.vue

@@ -70,17 +70,32 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สะถานะ",
+    sortable: true,
+    field: "isActive",
+    format: (val) => (val ? "เปืดรอบ" : "ปิดรอบ"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "durationKPI",
+  "startDate",
+  "endDate",
+  "isActive",
 ]);
-const visibleColumns = ref<string[]>(["durationKPI", "startDate", "endDate"]);
 
 /** itemMenu*/
 const itemMenu = ref<ItemsMenu[]>([
-  {
+  // {
-    label: "เปิดรอบ",
+  //   label: "เปิดรอบ",
-    value: "open",
+  //   value: "open",
-    icon: "mdi-check",
+  //   icon: "mdi-check",
-    color: "primary",
+  //   color: "primary",
-  },
+  // },
   {
     label: "ปิดรอบ",
     value: "close",
@@ -113,6 +128,7 @@ const formQuery = reactive<FormQueryRound>({
 const totalList = ref<number>(1);
 const formData = reactive<FormRound>({
   durationKPI: "",
+  year: null,
   startDate: null,
   endDate: null,
 });
@@ -172,6 +188,7 @@ function clearFormData() {
   formData.durationKPI = "";
   formData.startDate = null;
   formData.endDate = null;
+  formData.year = null;
 }
 
 /** function บันทึกข้อมูลเพิ่มรอบการประเมิน*/
@@ -244,6 +261,7 @@ function onCloseRounde(id: string) {
   dialogConfirm(
     $q,
     () => {
+      showLoader()
       http
         .get(config.API.kpiPeriod + `/close/${id}`)
         .then(() => {
@@ -336,7 +354,9 @@ onMounted(() => {
               dense
               lazy-rules
               outlined
-              :model-value="Number(formQuery.year) + 543"
+              :model-value="
+                formQuery.year === 0 ? 'ทั้งหมด' : Number(formQuery.year) + 543
+              "
               :label="`${'ปีงบประมาณ'}`"
             >
               <template v-slot:prepend>
@@ -347,6 +367,15 @@ onMounted(() => {
                 >
                 </q-icon>
               </template>
+              <template v-if="formQuery.year" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    (formQuery.year = 0), (formQuery.page = 1), fetchList()
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
             </q-input>
           </template>
         </datepicker>
@@ -462,7 +491,9 @@ onMounted(() => {
                     <q-item
                       clickable
                       v-close-popup
-                      v-for="items in itemMenu"
+                      v-for="items in props.row.isActive
+                        ? itemMenu
+                        : itemMenu.slice(1, 2)"
                       @click="onClickAction(items.value, props.row.id)"
                     >
                       <q-item-section avatar>
@@ -526,6 +557,49 @@ onMounted(() => {
         ]"
               />
             </div>
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.year"
+                :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
+                    outlined
+                    hide-bottom-space
+                    class="inputgreen"
+                    :model-value="
+                      formData.year === null
+                        ? null
+                        : Number(formData.year) + 543
+                    "
+                    :label="`${'ปีงบประมาณ'}`"
+                    :rules="[
+                      (val:string) =>
+                        !!val || `${'กรุณาเลือกปีงบประมาณ'}`,
+                    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"