รายการตัวชี้วัดตามแผนฯ => เพิ่มปีงบประมาณ

src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue

@@ -20,8 +20,7 @@ const {
 } = mixin;
 
 const planData = reactive<any>({
-  year: 0, //ปีงบประมาณ
+  kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
-  round: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
   including: "", //รหัสตัวชี้วัด
   includingName: "", //ชื่อตัวชี้วัด
   target: "", //ค่าเป้าหมาย
@@ -44,12 +43,10 @@ const planData = reactive<any>({
 const filter = ref<string>("");
 const filterAgency = ref<string>("");
 const route = useRoute();
-const id = ref<string | string[]>(route.params.id);
+const id = ref<string>(route.params.id.toString());
+const year = ref<number>(0);
 
-const roundOp = ref<any[]>([
+const roundOp = ref<any[]>([]);
-  { id: "APR", name: "เมษายน" },
-  { id: "OCT", name: "ตุลาคม" },
-]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
 const expandedPlan = ref<Array<string | null>>([]);
@@ -68,6 +65,41 @@ async function onSubmit() {
   );
 }
 
+const inputRef = ref<any>(null);
+function fetchRoundOption(isId: number | null = null) {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      const list = data.map((e: any) => ({
+        id: e.id,
+        name:
+          e.durationKPI === "OCT"
+            ? "รอบตุลาคม"
+            : e.durationKPI === "APR"
+            ? "รอบเมษายน"
+            : "",
+      }));
+      roundOp.value = list;
+      console.log(isId);
+
+      if (isId) {
+        planData.kpiPeriodId = "";
+        inputRef.value.resetValidation();
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function fetchTree() {
   showLoader();
   http
@@ -126,9 +158,10 @@ async function fetchDataById(id: any) {
     .get(config.API.kpiPlanById(id))
     .then(async (res) => {
       const data = res.data.result;
+      year.value = data.year;
       // planData.value = data;
-      planData.year = data.year;
+      // planData.year = data.year;
-      planData.round = data.round;
+      planData.kpiPeriodId = data.kpiPeriodId;
       planData.including = data.including;
       planData.includingName = data.includingName;
       planData.target = data.target;
@@ -146,6 +179,7 @@ async function fetchDataById(id: any) {
       planData.orgRevisionId = data.orgRevisionId;
       planData.strategy = data.strategy;
       planData.strategyId = data.strategyId;
+      fetchRoundOption();
     })
     .catch((err) => {
       messageError($q, err);
@@ -159,6 +193,7 @@ function updateSelected(data: any) {
   planData.strategyId = data.id;
   planData.strategy = data.level;
 }
+
 function updateSelectedAgency(data: any) {
   if (planData.node === data.orgLevel && planData.nodeId === data.orgTreeId) {
     planData.node = null;
@@ -184,11 +219,12 @@ async function addData() {
     });
 }
 
-async function editData(id: any) {
+async function editData(id: string) {
   await http
     .put(config.API.kpiPlanById(id), planData)
     .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
+      fetchDataById(id);
     })
     .catch((err) => {
       messageError($q, err);
@@ -219,12 +255,12 @@ onMounted(async () => {
         <div class="col-2">
           <datepicker
             menu-class-name="modalfix"
-            v-model="planData.year"
+            v-model="year"
             :locale="'th'"
             autoApply
             year-picker
             :enableTimePicker="false"
-            @update:modelValue="planData.year"
+            @update:modelValue="fetchRoundOption"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -237,9 +273,8 @@ onMounted(async () => {
                 outlined
                 class="inputgreen"
                 hide-bottom-space
-                :model-value="!!planData.year ? planData.year + 543 : null"
+                :model-value="!!year ? year + 543 : null"
                 :label="`${'ปีงบประมาณ'}`"
-                @update:modelValue="planData.year = null"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -255,9 +290,11 @@ onMounted(async () => {
         </div>
         <div class="col-2">
           <q-select
+            ref="inputRef"
+            :readonly="roundOp.length === 0"
             dense
             outlined
-            v-model="planData.round"
+            v-model="planData.kpiPeriodId"
             :options="roundOp"
             label="รอบการประเมิน"
             hide-bottom-space
@@ -593,4 +630,12 @@ onMounted(async () => {
   </q-form>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

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

@@ -14,7 +14,7 @@ const { showLoader, hideLoader, dialogRemove, success, messageError } =
   useCounterMixin();
 
 /** หัวตาราง */
-const rows = ref<any>([]);
+const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "including",
@@ -40,25 +40,14 @@ const expanded = ref<any>([]);
 const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
-const orgOp = ref<any[]>([
-  { id: "1", name: "กลุ่มงานช่วยนักบริหาร" },
-  { id: "2", name: "กลุ่มงานช่วยนักบริหาร 2" },
-]);
-
 const roundOp = ref<any[]>([
   { id: "APR", name: "รอบเมษายน" },
   { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
-const formFilter = reactive({
-  page: 1,
-  pageSize: 10,
-  org: "1",
-  round: "",
-  keyword: "",
-});
 const totalList = ref<number>(1);
 
+const year = ref<number>(new Date().getFullYear());
 const nodeData = reactive<any>({
   page: 1,
   pageSize: 10,
@@ -68,12 +57,41 @@ const nodeData = reactive<any>({
   keyword: "",
 });
 
+function fetchRoundOption() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      const list = data.map((e: any) => ({
+        id: e.id,
+        name:
+          e.durationKPI === "OCT"
+            ? "รอบตุลาคม"
+            : e.durationKPI === "APR"
+            ? "รอบเมษายน"
+            : "",
+      }));
+      roundOp.value = list;
+      nodeData.round = "";
+      fetchListProjectNew();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 function fetchList() {
   showLoader();
   http
     .get(
       config.API.kpiPlan +
-        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&round=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
+        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&kpiPeriodId=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -94,13 +112,6 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
     : router.push("/KPI-indicator-plan/add");
 }
 
-function onClickDelete(id: number) {
-  dialogRemove($q, () => {
-    rows.value.splice(id, 1);
-    success($q, "ลบข้อมูลสำเร็จ");
-  });
-}
-
 async function fetchData() {
   showLoader();
   await http
@@ -182,7 +193,8 @@ async function deleteData(idData: string) {
 
 onMounted(() => {
   fetchActive();
-  fetchData();
+  fetchRoundOption();
+  // fetchData();
 });
 </script>
 
@@ -190,80 +202,103 @@ onMounted(() => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการตัวชี้วัดตามแผนฯ
   </div>
-  <q-card flat bordered class="q-pa-md">
+  <q-card bordered class="col-12 row caedNone">
-    <div class="row q-col-gutter-sm">
+    <div class="col-xs-12 col-sm-3 row">
-      <q-card bordered class="col-4">
+      <div class="col-12 row no-wrap">
-        <q-card-section class="q-py-sm">
+        <div class="col-12 q-py-sm q-px-sm">
-          <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
+          <div class="q-gutter-sm">
-        </q-card-section>
+            <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
-        <div class="col-xs-12 col-sm-3 row">
+            <q-input dense outlined v-model="filterMain" label="ค้นหา">
-          <div class="col-12 row no-wrap">
+              <template v-slot:append>
-            <div class="col-12 q-py-sm q-px-sm">
+                <q-icon
-              <div class="q-gutter-sm">
+                  v-if="filterMain !== ''"
-                <q-input dense outlined v-model="filterMain" label="ค้นหา">
+                  name="clear"
-                  <template v-slot:append>
+                  class="cursor-pointer"
-                    <q-icon
+                  @click="filterMain = ''"
-                      v-if="filterMain !== ''"
+                />
-                      name="clear"
+                <q-icon v-else name="search" color="grey-5" />
-                      class="cursor-pointer"
+              </template>
-                      @click="filterMain = ''"
+            </q-input>
-                    />
+            <q-tree
-                    <q-icon v-else name="search" color="grey-5" />
+              class="tree-container"
-                  </template>
+              dense
-                </q-input>
+              :nodes="node"
-                <div>
+              node-key="orgTreeName"
-                  <q-tree
+              label-key="labelName"
-                    class="tree-container"
+              v-model:expanded="expanded"
-                    dense
+              :filter="filterMain"
-                    :nodes="node"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                    node-key="orgTreeName"
+              no-nodes-label="ไม่มีข้อมูล"
-                    label-key="labelName"
+              v-model:selected="nodeData.nodeId"
-                    v-model:expanded="expanded"
+            >
-                    :filter="filterMain"
+              <template v-slot:default-header="prop">
-                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                <q-item
-                    no-nodes-label="ไม่มีข้อมูล"
+                  clickable
-                    v-model:selected="nodeData.nodeId"
+                  @click.stop="updateSelectedTreeMain(prop.node)"
-                  >
+                  :active="nodeData.nodeId === prop.node.orgTreeId"
-                    <template v-slot:default-header="prop">
+                  active-class="my-list-link text-primary text-weight-medium"
-                      <q-item
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                        clickable
+                >
-                        @click.stop="updateSelectedTreeMain(prop.node)"
+                  <div>
-                        :active="nodeData.nodeId === prop.node.orgTreeId"
+                    <div class="text-weight-medium">
-                        active-class="my-list-link text-primary text-weight-medium"
+                      {{ prop.node.orgTreeName }}
-                        class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                    </div>
-                      >
+                    <div class="text-weight-light text-grey-8">
-                        <div>
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
-                          <div class="text-weight-medium">
+                      {{
-                            {{ prop.node.orgTreeName }}
+                        prop.node.orgTreeShortName == null
-                          </div>
+                          ? null
-                          <div class="text-weight-light text-grey-8">
+                          : prop.node.orgTreeShortName
-                            {{
+                      }}
-                              prop.node.orgCode == null
+                    </div>
-                                ? null
+                  </div>
-                                : prop.node.orgCode
+                </q-item>
-                            }}
+              </template>
-                            {{
+            </q-tree>
-                              prop.node.orgTreeShortName == null
-                                ? null
-                                : prop.node.orgTreeShortName
-                            }}
-                          </div>
-                        </div>
-                      </q-item>
-                    </template>
-                  </q-tree>
-                </div>
-              </div>
-            </div>
-            <div class="col-12 row">
-              <q-separator :vertical="!$q.screen.lt.md" />
-            </div>
           </div>
         </div>
-      </q-card>
+        <div class="col-12 row">
-      <div class="col-8">
+          <q-separator :vertical="!$q.screen.lt.md" />
-        <div class="row q-col-gutter-sm q-mb-sm">
+        </div>
-          <div class="col-3">
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-9 q-pa-md row">
+      <div class="col-12">
+        <q-toolbar style="padding: 0">
+          <div class="row q-gutter-sm">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              style="width: 150px"
+              @update:model-value="fetchRoundOption"
+            >
+              <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 ? 'ทั้งหมด' : 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
               dense
               outlined
@@ -275,28 +310,29 @@ onMounted(() => {
               emit-value
               map-options
               @update:model-value="fetchListProjectNew"
+              style="min-width: 150px"
             />
+            <q-toolbar-title>
+              <q-btn
+                flat
+                round
+                dense
+                icon="add"
+                color="primary"
+                @click="onClickAddOrView()"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </q-toolbar-title>
           </div>
-          <div class="col-2">
+          <q-space />
-            <q-btn
+          <div class="row q-gutter-sm">
-              flat
-              round
-              dense
-              icon="add"
-              color="primary"
-              @click="onClickAddOrView()"
-            >
-              <q-tooltip>เพิ่ม</q-tooltip>
-            </q-btn>
-          </div>
-          <div class="col-4">
             <q-input
               standout
               dense
               v-model="nodeData.keyword"
               ref="filterRef"
               outlined
-              debounce="300"
               placeholder="ค้นหา"
             >
               <template v-slot:append>
@@ -309,8 +345,6 @@ onMounted(() => {
                 />
               </template>
             </q-input>
-          </div>
-          <div class="col-3">
             <q-select
               v-model="visibleColumns"
               multiple
@@ -326,7 +360,7 @@ onMounted(() => {
               style="min-width: 150px"
             />
           </div>
-        </div>
+        </q-toolbar>
         <div class="col-12">
           <d-table
             for="table"
@@ -387,12 +421,14 @@ onMounted(() => {
       </div>
     </div>
   </q-card>
+
+ 
 </template>
 
 <style lang="scss" scoped>
 .tree-container {
   overflow: auto;
-  height: 65vh;
+  height: 73vh;
   border: 1px solid #e6e6e7;
   border-radius: 10px;
 }