Merge branch 'nice_dev' into develop

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

@@ -20,8 +20,7 @@ const {
 } = mixin;
 
 const planData = reactive<any>({
-  year: 0, //ปีงบประมาณ
-  round: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+  kpiPeriodId: "", //รอบการประเมิน(เมษา->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[]>([
-  { id: "APR", name: "เมษายน" },
-  { id: "OCT", name: "ตุลาคม" },
-]);
+const roundOp = ref<any[]>([]);
 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.round = data.round;
+      // planData.year = data.year;
+      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>