แก้เเสดงผล Individual Development Plan

src/api/KPI/api.kpis.ts

@@ -11,6 +11,7 @@ const KpiFile = `${env.API_URI}/salary/file`;
 const KpiEvaluationInfo = `${env.API_URI}/kpi/evaluation`;
 const Kpiorg = `${env.API_URI}/org/profile/commander`;
 
+const developmentOrg = `${env.API_URI}/org`;
 const Kpi = `${env.API_URI}/kpi`;
 const KpiUser = `${env.API_URI}/kpi/user`;
 const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
@@ -64,4 +65,8 @@ export default {
   kpiReport: (id: string) => `${Kpi}/report/kpi-user/${id}`,
 
   developmentMain: `${development}/main`,
+
+  developmentReQuestIDP: (id: string) => `${developmentOrg}/profile/development/registry/USER/${id}`,
+  developmentIDP: (id: string) => `${development}/main/registry/USER/${id}`,
 };
+

src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue

@@ -12,6 +12,7 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
 import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
 
+const typeIDP = ref<string>("");
 const link = ref<string>("");
 const dataPerson = useDataStore();
 const idByRow = ref<string>("");
@@ -191,6 +192,7 @@ function getHistory() {
 function openDialogDevelop(data: any) {
   modalDevelop.value = true;
   kpiDevelopmentId.value = data.kpiDevelopmentId;
+  typeIDP.value = data.type
 }
 
 function onSearch() {
@@ -374,7 +376,7 @@ onMounted(async () => {
     </d-table>
   </div>
 
-  <DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" />
+  <DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" :type="typeIDP"/>
 </template>
 <style scoped>
 .absolute_button {

src/modules/10_registry/Dialog/DialogDevelopmant.vue

@@ -20,6 +20,10 @@ interface ProjectYearOp {
 
 const props = defineProps({
   getAll: Function,
+  type: {
+    type: String,
+    required: true,
+  },
 });
 
 const development = ref<any[]>([]);
@@ -195,8 +199,14 @@ watch(
   (i) => {
     if (i) {
       showLoader();
+      const url =
+        props.type == "KPI"
+          ? config.API.kpiAchievementDevelop + `/registry/user/${id.value}`
+          : props.type == "REQUEST"
+          ? config.API.developmentReQuestIDP(id.value)
+          : config.API.developmentIDP(id.value);
       http
-        .get(config.API.kpiAchievementDevelop + `/registry/user/${id.value}`)
+        .get(url)
         .then(async (res) => {
           const data = res.data.result;
           formData.year = data.selectTypeYear;
@@ -321,9 +331,11 @@ function filterOptionFn(val: string, update: Function) {
       <q-separator />
       <q-card-section>
         <div class="row q-col-gutter-sm">
-          <div class="col-3">
+          <div
+            class="col-3"
+            v-if="props.type !== 'DEVELOP' && props.type !== 'REQUEST'"
+          >
             <q-select
-              class="inputgreen"
               outlined
               dense
               label="ตัวเลือก"
@@ -337,54 +349,15 @@ function filterOptionFn(val: string, update: Function) {
             >
             </q-select>
           </div>
-          <div class="col-3" v-if="choice == 'PROJECT'">
+
-            <datepicker
+          <div
-              menu-class-name="modalfix"
+            class="col-3"
-              v-model="formData.year"
+            v-if="choice == 'PROJECT' && props.type !== 'DEVELOP'"
-              readonly
+          >
-              :locale="'th'"
-              autoApply
-              position="center"
-              year-picker
-              :alt-position="customPosition"
-              :enableTimePicker="false"
-              @update:model-value="getDataByYear(), (projectName = '')"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  readonly
-                  outlined
-                  hide-bottom-space
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
-                  class="inputgreen"
-                  :model-value="
-                    formData.year === null ? null : Number(formData.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>
-          </div>
-          <div class="col-3" v-if="choice == 'PROJECT'">
             <q-select
               outlined
               dense
               :rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
-              class="inputgreen"
               label="โครงการ/หลักสูตรการฝึกอบรม"
               :options="projectOp"
               option-label="projectName"
@@ -392,7 +365,7 @@ function filterOptionFn(val: string, update: Function) {
               map-options
               hide-bottom-space
               use-input
-              :readonly="!formData.year"
+              readonly
               v-model="projectName"
               @update:model-value="getProjectDetail(projectName)"
               @filter="filterOptionFn"
@@ -406,19 +379,70 @@ function filterOptionFn(val: string, update: Function) {
               </template>
             </q-select>
           </div>
-          <div class="col-12">
+          <div class="col-12 row q-col-gutter-x-sm">
-            <q-input
+            <div
-              v-model="formData.name"
+              :class="
-              readonly
+                props.type == 'REQUEST' ||
-              outlined
+                (props.type == 'KPI' && choice == 'MANUAL')
-              dense
+                  ? 'col-12'
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา'}`,]"
+                  : 'col-9'
-              lazy-rules
+              "
-              hide-bottom-space
-              class="inputgreen"
-              label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
             >
-            </q-input>
+              <q-input
+                v-model="formData.name"
+                readonly
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา'}`,]"
+                lazy-rules
+                hide-bottom-space
+                label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
+              >
+              </q-input>
+            </div>
+            <div class="col-3" v-if="choice == 'PROJECT'">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.year"
+                readonly
+                :locale="'th'"
+                autoApply
+                position="center"
+                year-picker
+                :alt-position="customPosition"
+                :enableTimePicker="false"
+                @update:model-value="getDataByYear(), (projectName = '')"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
+                    :model-value="
+                      formData.year === null
+                        ? null
+                        : Number(formData.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>
+            </div>
           </div>
           <div class="col-12">
             <span class="text-weight-medium">วิธีการพัฒนา</span>
@@ -523,7 +547,7 @@ function filterOptionFn(val: string, update: Function) {
                 label="10 การฝึกอบรมอื่นๆ"
               /> -->
           </div>
-          <div class="col-12">
+          <div class="col-12" v-if="props.type !== 'DEVELOP'">
             <q-input
               label="เป้าหมายการนำไปพัฒนางาน"
               v-model="formData.target"
@@ -531,13 +555,15 @@ function filterOptionFn(val: string, update: Function) {
               readonly
               type="textarea"
               dense
-              class="inputgreen"
               :rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
               lazy-rules
               hide-bottom-space
             ></q-input>
           </div>
-          <div class="col-12">
+          <div
+            class="col-12"
+            v-if="props.type !== 'DEVELOP' && props.type !== 'REQUEST'"
+          >
             <q-card bordered>
               <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
                 <div class="col-4 text-center">
@@ -553,7 +579,6 @@ function filterOptionFn(val: string, update: Function) {
                 </div>
                 <div class="col-8">
                   <q-input
-                    class="inputgreen"
                     v-model="formData.achievement10"
                     outlined
                     readonly
@@ -572,7 +597,6 @@ function filterOptionFn(val: string, update: Function) {
                 </div>
                 <div class="col-8">
                   <q-input
-                    class="inputgreen"
                     v-model="formData.achievement5"
                     outlined
                     readonly
@@ -591,7 +615,6 @@ function filterOptionFn(val: string, update: Function) {
                 </div>
                 <div class="col-8">
                   <q-input
-                    class="inputgreen"
                     v-model="formData.achievement0"
                     outlined
                     readonly
@@ -606,7 +629,10 @@ function filterOptionFn(val: string, update: Function) {
             </q-card>
           </div>
         </div>
-        <div class="row q-pa-sm justify-center">
+        <div
+          class="row q-pa-sm justify-center"
+          v-if="props.type !== 'DEVELOP' && props.type !== 'REQUEST'"
+        >
           <span class="text-body2 text-weight-bold">ผลการพัฒนา </span>
           <div class="text-primary q-pl-md">
             {{ formData.point }}