เพิ้ม แก้ไข รายการโครงการ

src/modules/15_development/components/FollowResult.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 
 import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
@@ -8,9 +8,11 @@ import type {
   DataOptionCheckBox,
 } from "@/modules/15_development/interface/index/Main";
 
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
+const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const formData = reactive<FormFollowResult>({
@@ -22,7 +24,7 @@ const formData = reactive<FormFollowResult>({
   results: "",
   obstacles: "",
   suggestions: "",
-  project: '',
+  project: "",
 });
 
 const group = ref<any[]>([]);
@@ -42,11 +44,11 @@ const metricTypeOp = ref<DataOption[]>([
 ]);
 const projectOp = ref<DataOption[]>([
   {
-    id: "true",
+    id: "OFFER",
     name: "โครงการที่ เสนอขอ TN",
   },
   {
-    id: "false",
+    id: "NOOFFER",
     name: "โครงการที่ ไม่ เสนอขอ TN",
   },
 ]);
@@ -54,193 +56,188 @@ const projectOp = ref<DataOption[]>([
 const optionsTNFirst = ref<DataOptionCheckBox[]>([
   {
     label: "ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ",
-    value: "id1",
+    value: store.formAddProject.isPassAllocate,
   },
   {
     label:
       "ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: "id2",
+    value: store.formAddProject.isPassNoAllocate,
   },
   {
     label: "ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: "id3",
+    value: store.formAddProject.isNoPass,
   },
 ]);
 const optionsTNSecon = ref<DataOptionCheckBox[]>([
   {
     label: "แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ",
-    value: "id1",
+    value: store.formAddProject.isBudget,
   },
   {
     label: "แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: "id2",
+    value: store.formAddProject.isOutBudget,
   },
 ]);
 
-const options = ref<any>([
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-]);
-function onSubmit() {
-  dialogConfirm($q, () => {});
-}
+watchEffect(() => {});
 
 onMounted(() => {
-  console.log("ข้อมูลเบื้องต้น");
+  optionsTNFirst.value.forEach((checkbox, index) => {
+    if (index === 0) checkbox.value = store.formAddProject.isPassAllocate;
+    else if (index === 1)
+      checkbox.value = store.formAddProject.isPassNoAllocate;
+    else if (index === 2) checkbox.value = store.formAddProject.isNoPass;
+  });
 });
 </script>
 <template>
+  <div class="row q-pa-md q-col-gutter-sm">
+    <div class="col-12">
+      <span class="text-weight-medium text-body1">ตัวชี้วัดความสำเร็จ</span>
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <!-- <q-select
+        dense
+        outlined
+        label="ประเภทตัวชี้วัด"
+        v-model="store.formAddProject.metricType"
+        :options="metricTypeOp"
+        option-label="name"
+        option-value="id"
+        hide-bottom-space
+      /> -->
+      <q-input
+        dense
+        outlined
+        label="ประเภทตัวชี้วัด"
+        v-model="store.formAddProject.metricType"
+        hide-bottom-space
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-input
+        dense
+        outlined
+        label="ตัวชี้วัด"
+        v-model="store.formAddProject.indicators"
+        hide-bottom-space
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-input
+        dense
+        outlined
+        label="เป้าหมาย"
+        v-model="store.formAddProject.target"
+        hide-bottom-space
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.calculation"
+        hide-bottom-space
+        label="วิธีการคำนวณ/เครื่องมือ"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.measuRement"
+        hide-bottom-space
+        label="ระยะเวลาวัดผล"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.results"
+        hide-bottom-space
+        label="ผลการดำเนิน"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.obstacles"
+        hide-bottom-space
+        label="ปัญหาอุปสรรค"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.suggestions"
+        hide-bottom-space
+        label="ข้อเสนอเเนะ"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <span class="text-weight-medium text-body1"
+        >ประเภทของผลการพิจารณาความเหมาะสมโครงการ</span
+      >
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-select
+        dense
+        outlined
+        label="ประเภทโครงการ"
+        v-model="store.formAddProject.project"
+        :options="projectOp"
+        option-label="name"
+        option-value="id"
+        hide-bottom-space
+        map-options
+        emit-value
+      />
+    </div>
+    <div v-if="store.formAddProject.project !== ''" class="col-12">
+      <div class="row" v-if="store.formAddProject.project == 'OFFER'">
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isPassAllocate"
+            label="ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ"
+          />
+        </div>
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isPassNoAllocate"
+            label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+          />
+        </div>
 
-    <div class="row q-pa-md q-col-gutter-sm">
-      <div class="col-12">
-        <span class="text-weight-medium text-body1">ตัวชี้วัดความสำเร็จ</span>
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isNoPass"
+            label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+          />
+        </div>
       </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-select
-          dense
-          outlined
-          label="ประเภทตัวชี้วัด"
-          v-model="formData.metricType"
-          :options="metricTypeOp"
-          option-label="name"
-          option-value="id"
-          hide-bottom-space
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกประเภทตัวชี้วัด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-input
-          dense
-          outlined
-          label="ตัวชี้วัด"
-          v-model="formData.indicators"
-          hide-bottom-space
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกตัวชี้วัด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-input
-          dense
-          outlined
-          label="เป้าหมาย"
-          v-model="formData.target"
-          hide-bottom-space
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกเป้าหมาย'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.calculation"
-          hide-bottom-space
-          label="วิธีการคำนวณ/เครื่องมือ"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกวิธีการคำนวณ/เครื่องมือ'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.measuRement"
-          hide-bottom-space
-          label="ระยะเวลาวัดผล"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกระยะเวลาวัดผล'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.results"
-          hide-bottom-space
-          label="ผลการดำเนิน"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกผลการดำเนิน'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.obstacles"
-          hide-bottom-space
-          label="ปัญหาอุปสรรค"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกปัญหาอุปสรรค'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.suggestions"
-          hide-bottom-space
-          label="ข้อเสนอเเนะ"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกข้อเสนอเเนะ'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <span class="text-weight-medium text-body1"
-          >ประเภทของผลการพิจารณาความเหมาะสมโครงการ</span
-        >
-      </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-select
-          dense
-          outlined
-          label="ประเภทโครงการ"
-          v-model="formData.project"
-          :options="projectOp"
-          option-label="name"
-          option-value="id"
-          hide-bottom-space
-          map-options
-          emit-value
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกประเภทโครงการ'}`,
-          ]"
-        />
-      </div>
-      <div v-if="formData.project !== ''" class="col-12">
-        <q-option-group
-          :options="
-            formData.project !== 'false' ? optionsTNFirst : optionsTNSecon
-          "
-          type="checkbox"
-          v-model="group"
-        />
+      <div class="row" v-else>
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isBudget"
+            label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
+          />
+        </div>
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isOutBudget"
+            label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+          />
+        </div>
       </div>
     </div>
-
-
+  </div>
 </template>
 
 <style scoped></style>

src/modules/15_development/components/MainTab.vue

@@ -78,6 +78,43 @@ function fetchDataProject(id: string) {
       }));
       store.formAddProject.actualGoals = actualGoals;
       store.formAddProject.actualPeoples = actualPeoples;
+
+      /** การติดตามผลดารประเมิน*/
+      store.formAddProject.metricType = data.metricType;
+      store.formAddProject.indicators = data.indicators;
+      store.formAddProject.target = data.target;
+      store.formAddProject.calculation = data.calculation;
+      store.formAddProject.measuRement = data.measuRement;
+      store.formAddProject.results = data.results;
+      store.formAddProject.obstacles = data.obstacles;
+      store.formAddProject.suggestions = data.suggestions;
+      store.formAddProject.project = data.project;
+      store.formAddProject.isPassAllocate = data.isPassAllocate;
+      store.formAddProject.isPassNoAllocate = data.isPassNoAllocate;
+      store.formAddProject.isNoPass = data.isNoPass;
+      store.formAddProject.isBudget = data.isBudget;
+      store.formAddProject.isOutBudget = data.isOutBudget;
+
+      /** อื่นๆ*/
+      store.formAddProject.dateStart = data.dateStart;
+      store.formAddProject.dateEnd = data.dateEnd;
+      store.formAddProject.totalDate = data.totalDate;
+      store.formAddProject.address = data.address;
+      store.formAddProject.provinceId = data.provinceId;
+      store.formAddProject.budget = data.budget;
+      store.formAddProject.accept = data.accept;
+      store.formAddProject.receive = data.receive;
+      store.formAddProject.approved = data.approved;
+      store.formAddProject.budgetPay = data.budgetPay;
+      store.formAddProject.issues = data.issues;
+      store.formAddProject.chance = data.chance;
+      store.formAddProject.effects = data.effects;
+      store.formAddProject.riskLevel = data.riskLevel;
+      store.formAddProject.riskManagement = data.riskManagement;
+      store.formAddProject.expect = data.expect;
+      store.formAddProject.topicAcademic = data.topicAcademic;
+      store.formAddProject.addressAcademic = data.addressAcademic;
+      store.formAddProject.provinceActualId = data.provinceActualId;
     })
     .catch((err) => {
       messageError($q, err);
@@ -96,6 +133,35 @@ function onSubmit() {
   } else {
     dialogConfirm($q, async () => {
       showLoader();
+      /** การติดตามผลดารประเมิน*/
+      if (store.formAddProject.project === "OFFER") {
+        store.formAddProject.isBudget = false;
+        store.formAddProject.isOutBudget = false;
+      } else {
+        store.formAddProject.isPassAllocate = false;
+        store.formAddProject.isPassNoAllocate = false;
+        store.formAddProject.isNoPass = false;
+      }
+
+      /** อื่นๆ*/
+      store.formAddProject.totalDate = Number(store.formAddProject.totalDate);
+      store.formAddProject.accept =
+        typeof store.formAddProject.accept === "string"
+          ? Number(store.formAddProject.accept.replace(/,/g, ""))
+          : store.formAddProject.accept;
+      store.formAddProject.receive =
+        typeof store.formAddProject.receive === "string"
+          ? Number(store.formAddProject.receive.replace(/,/g, ""))
+          : store.formAddProject.receive;
+      store.formAddProject.approved =
+        typeof store.formAddProject.approved === "string"
+          ? Number(store.formAddProject.approved.replace(/,/g, ""))
+          : store.formAddProject.approved;
+      store.formAddProject.budgetPay =
+        typeof store.formAddProject.budgetPay === "string"
+          ? Number(store.formAddProject.budgetPay.replace(/,/g, ""))
+          : store.formAddProject.budgetPay;
+
       const url = projectId.value
         ? config.API.developmentMainById(projectId.value)
         : config.API.developmentMain;

src/modules/15_development/components/Other.vue

@@ -2,14 +2,17 @@
 import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { FormFollowOther } from "@/modules/15_development/interface/request/Main";
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 const $q = useQuasar();
+const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
   useCounterMixin();
 
@@ -24,29 +27,29 @@ const formData = reactive<FormFollowOther>({
   receive: null,
   approved: null,
   budgetPay: null,
-  issues:'',
-  chance:'',
-  effects:'',
-  riskLevel:'',
-  riskManagement:'',
-  benefits:'',
-  topicsIssues:'',
-  trainingStudy:'',
+  issues: "",
+  chance: "",
+  effects: "",
+  riskLevel: "",
+  riskManagement: "",
+  benefits: "",
+  topicsIssues: "",
+  trainingStudy: "",
 });
 
 const provinceOp = ref<DataOption[]>([]);
 const budgetOp = ref<DataOption[]>([
   {
-    id: "id1",
-    name: "งบ1",
+    id: "REGULATIONBUDGET",
+    name: "งบตามข้อบัญญัติ",
   },
   {
-    id: "id2",
-    name: "งบ2",
+    id: "BANGKOKBUDGET",
+    name: "งบประมาณกรุงเทพมหานคร",
   },
   {
-    id: "id3",
-    name: "งบ3",
+    id: "OUTSIDEBUDGET",
+    name: "เงินนอกงบประมาณ",
   },
 ]);
 
@@ -82,338 +85,272 @@ onMounted(() => {
 });
 </script>
 <template>
+  <div class="row q-pa-md q-col-gutter-sm">
+    <div class="col-12">
+      <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
+    </div>
+    <div class="col-12 col-sm-6 col-md-3">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="store.formAddProject.dateStart"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            outlined
+            :model-value="
+              store.formAddProject.dateStart
+                ? date2Thai(store.formAddProject.dateStart)
+                : null
+            "
+            :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-12 col-sm-6 col-md-3">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="store.formAddProject.dateEnd"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            outlined
+            :model-value="
+              store.formAddProject.dateEnd
+                ? date2Thai(store.formAddProject.dateEnd)
+                : null
+            "
+            :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-12 col-sm-6 col-md-3">
+      <q-input
+        dense
+        outlined
+        label="รวมระยะเวลา (วัน)"
+        v-model="store.formAddProject.totalDate"
+        mask="#"
+        reverse-fill-mask
+      />
+    </div>
 
-    <div class="row q-pa-md q-col-gutter-sm">
-      <div class="col-12">
-        <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
-      </div>
-      <div class="col-12 col-sm-6 col-md-3">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formData.dateStart"
-          :locale="'th'"
-          autoApply
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              outlined
-              :model-value="
-                formData.dateStart ? date2Thai(formData.dateStart) : null
-              "
-              :label="`${'วันที่เริ่มต้น'}`"
-              hide-bottom-space
-              :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 col-sm-6 col-md-3">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formData.dateEnd"
-          :locale="'th'"
-          autoApply
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              outlined
-              :model-value="
-                formData.dateEnd ? date2Thai(formData.dateEnd) : null
-              "
-              :label="`${'วันที่สิ้นสุด'}`"
-              hide-bottom-space
-              :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 col-sm-6 col-md-3">
-        <q-input
-          dense
-          outlined
-          label="รวมระยะเวลา (วัน)"
-          v-model="formData.totalDate"
-        />
-      </div>
-
-      
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
-      </div>
-      <div class="col-8">
-        <q-input
-          outlined
-          dense
-          v-model="formData.address"
-          hide-bottom-space
-          label="ที่อยู่"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกที่อยู่'}`,
-          ]"
-        />
-      </div>
-      <div class="col-4">
-        <q-select
-          outlined
-          dense
-          v-model="formData.province"
-          hide-bottom-space
-          label="จังหวัด"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกจังหวัด'}`,
-          ]"
-          :options="provinceOp"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        />
-      </div>
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">งบประมาณ</span>
-      </div>
-      <div class="col-4">
-        <q-select
-          outlined
-          dense
-          v-model="formData.budget"
-          hide-bottom-space
-          label="ประเภทงบประมาณ"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกประเภทงบประมาณ'}`,
-          ]"
-          :options="budgetOp"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        />
-      </div>
-      <div class="col-12">
-        <div class="row q-col-gutter-x-sm">
-          <div class="col-3">
-            <q-input
-              outlined
-              dense
-              v-model="formData.accept"
-              hide-bottom-space
-              label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
-              mask="###,###,###,###"
-                reverse-fill-mask
-              :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ขอรับการจัดสรรฯ'}`,
-          ]"
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              outlined
-              dense
-              v-model="formData.receive"
-              hide-bottom-space
-              mask="###,###,###,###"
-                reverse-fill-mask
-              label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
-              :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับการจัดสรรฯ'}`,
-          ]"
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              outlined
-              dense
-              v-model="formData.approved"
-              hide-bottom-space
-              mask="###,###,###,###"
-                reverse-fill-mask
-              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
-              :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับอนุมัติ'}`,
-          ]"
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              outlined
-              dense
-              v-model="formData.budgetPay"
-              hide-bottom-space
-              mask="###,###,###,###"
-                reverse-fill-mask
-              label="จํานวนงบประมาณที่จ่ายจริง"
-              :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกจํานวนงบประมาณที่จ่ายจริง'}`,
-          ]"
-            />
-          </div>
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
+    </div>
+    <div class="col-8">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.address"
+        label="ที่อยู่"
+      />
+    </div>
+    <div class="col-4">
+      <q-select
+        outlined
+        dense
+        v-model="store.formAddProject.provinceId"
+        label="จังหวัด"
+        :options="provinceOp"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1">งบประมาณ</span>
+    </div>
+    <div class="col-4">
+      <q-select
+        outlined
+        dense
+        v-model="store.formAddProject.budget"
+        label="ประเภทงบประมาณ"
+        :options="budgetOp"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12">
+      <div class="row q-col-gutter-x-sm">
+        <div class="col-3">
+          <q-input
+            outlined
+            dense
+            v-model="store.formAddProject.accept"
+            label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
+            mask="###,###,###,###,###"
+            reverse-fill-mask
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            outlined
+            dense
+            v-model="store.formAddProject.receive"
+            mask="###,###,###,###,###"
+            reverse-fill-mask
+            label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            outlined
+            dense
+            v-model="store.formAddProject.approved"
+            hide-bottom-space
+            mask="###,###,###,###,###"
+            label="จํานวนงบประมาณที่ได้รับอนุมัติ"
+            reverse-fill-mask
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            outlined
+            dense
+            v-model="store.formAddProject.budgetPay"
+            mask="###,###,###,###,###"
+            reverse-fill-mask
+            label="จํานวนงบประมาณที่จ่ายจริง"
+          />
         </div>
-      </div>
-
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
-      </div>
-
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.issues"
-          hide-bottom-space
-          label="ประเด็นความเสี่ยง"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกประเด็นความเสี่ยง'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.chance"
-          hide-bottom-space
-          label="โอกาศที่จะเกิด"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกโอกาศที่จะเกิด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.effects"
-          hide-bottom-space
-          label="ผลกระทบจากการเกิด"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกผลกระทบจากการเกิด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskLevel"
-          hide-bottom-space
-          label="ระดับความเสี่ยง"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกระดับความเสี่ยง'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskManagement"
-          hide-bottom-space
-          label="เเนวทางการบริหารความเสี่ยง"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกเเนวทางการบริหารความเสี่ยง'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">ประโยชน์ที่คาดว่าจะได้รับ</span>
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskManagement"
-          hide-bottom-space
-          label="ประโยชน์ที่คาดว่าจะได้รับ"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกประโยชน์ที่คาดว่าจะได้รับ'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">ข้อมูลด้านวิชาการ</span>
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskManagement"
-          hide-bottom-space
-          label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกหัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskManagement"
-          hide-bottom-space
-          label="สถานที่ฝึกอบรม ศึกษาดูงาน"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกสถานที่ฝึกอบรม ศึกษาดูงาน'}`,
-          ]"
-        />
       </div>
     </div>
 
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
+    </div>
+
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.issues"
+        label="ประเด็นความเสี่ยง"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.chance"
+        label="โอกาสที่จะเกิด"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.effects"
+        label="ผลกระทบจากการเกิด"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.riskLevel"
+        label="ระดับความเสี่ยง"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.riskManagement"
+        label="เเนวทางการบริหารความเสี่ยง"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1"
+        >ประโยชน์ที่คาดว่าจะได้รับ</span
+      >
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.expect"
+        label="ประโยชน์ที่คาดว่าจะได้รับ"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1">ข้อมูลด้านวิชาการ</span>
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.topicAcademic"
+        label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
+      />
+    </div>
+    <div class="col-9">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.addressAcademic"
+        label="สถานที่ฝึกอบรม ศึกษาดูงาน"
+      />
+    </div>
+    <div class="col-3">
+      <q-select
+        outlined
+        dense
+        v-model="store.formAddProject.provinceActualId"
+        label="จังหวัด(ข้อมูลวิชาการ)"
+        :options="provinceOp"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

src/modules/15_development/interface/index/Main.ts

@@ -5,7 +5,7 @@ interface DataOption {
 
 interface DataOptionCheckBox {
   label: string;
-  value: string;
+  value: boolean;
 }
 
 interface FormFilter {
@@ -13,7 +13,7 @@ interface FormFilter {
   pageSize: number;
   keyword: string;
   type: string;
-  year:number
+  year: number;
   posType: string;
   posLevel: string;
   retireYear: string | null;
@@ -36,4 +36,10 @@ interface NewPagination {
   sortBy: string;
 }
 
-export type { DataOption, DataOptionCheckBox, ItemsMenu, NewPagination ,FormFilter};
+export type {
+  DataOption,
+  DataOptionCheckBox,
+  ItemsMenu,
+  NewPagination,
+  FormFilter,
+};

src/modules/15_development/interface/request/Main.ts

@@ -81,7 +81,7 @@ interface FormAddHistory {
 }
 
 interface FormAddHistoryProject {
-  id:string
+  id: string;
   project: string;
   year: string;
   trainingStart: string;
@@ -121,10 +121,10 @@ interface FormAddProject {
   address: string;
   provinceId: string | null;
   budget: string;
-  accept: number | null;
-  receive: number | null;
-  approved: number | null;
-  budgetPay: number | null;
+  accept: number | string | null;
+  receive: number | string | null;
+  approved: number | string | null;
+  budgetPay: number | string | null;
   issues: string;
   chance: string;
   effects: string;

src/modules/15_development/store/developmentStore.ts

@@ -94,6 +94,43 @@ export const useDevelopmentDataStore = defineStore(
       formAddProject.plannedPeoples = [];
       formAddProject.actualGoals = [];
       formAddProject.actualPeoples = [];
+
+      /** การติดตามผลดารประเมิน*/
+      formAddProject.metricType = "";
+      formAddProject.indicators = "";
+      formAddProject.target = "";
+      formAddProject.calculation = "";
+      formAddProject.measuRement = "";
+      formAddProject.results = "";
+      formAddProject.obstacles = "";
+      formAddProject.suggestions = "";
+      formAddProject.project = "";
+      formAddProject.isPassAllocate = false;
+      formAddProject.isPassNoAllocate = false;
+      formAddProject.isNoPass = false;
+      formAddProject.isBudget = false;
+      formAddProject.isOutBudget = false;
+
+      /** อื่นๆ*/
+      formAddProject.dateStart = null;
+      formAddProject.dateEnd = null;
+      formAddProject.totalDate = null;
+      formAddProject.address = "";
+      formAddProject.provinceId = null;
+      formAddProject.budget = "";
+      formAddProject.accept = null;
+      formAddProject.receive = null;
+      formAddProject.approved = null;
+      formAddProject.budgetPay = null;
+      formAddProject.issues = "";
+      formAddProject.chance = "";
+      formAddProject.effects = "";
+      formAddProject.riskLevel = "";
+      formAddProject.riskManagement = "";
+      formAddProject.expect = "";
+      formAddProject.topicAcademic = "";
+      formAddProject.addressAcademic = "";
+      formAddProject.provinceActualId = null;
     }
 
     const visibleColumns = ref<string[]>([]);

src/modules/15_development/views/MainPage.vue

@@ -301,4 +301,11 @@ onMounted(() => {
   </q-card>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.table_ellipsis {
+  max-width: 400px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>