ระบบการพัฒนา => รายการโครงการปรับการแสดงผลแบบฟอร์ม

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

@@ -16,12 +16,18 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+const { showLoader, hideLoader, messageError } = mixin;
 
-const projectId = ref<string>(route.params.id.toLocaleString());
+/**
+ * props
+ */
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
 const props = defineProps({
   nextStep: { type: Function, required: true },
+  onCheckChangeData: { type: Function, required: true },
 });
+
+const projectId = ref<string>(route.params.id.toLocaleString());
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
@@ -73,19 +79,20 @@ function fetchData(id: string) {
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
 }
 
-/** function บันทึกข้อมูล*/
+/**
+ * function บันทึกข้อมูล
+ */
 function onSubmit() {
-  // dialogConfirm($q, () => {
   showLoader();
   http
     .put(config.API.developmentMainTab("tab1", projectId.value), formData)
     .then(() => {
       fetchData(projectId.value);
-      // success($q, "บันทึกข้อมูลสำเร็จ");
+      isChangeData.value = false;
-      props.nextStep();
     })
     .catch((err) => {
       messageError($q, err);
@@ -93,10 +100,11 @@ function onSubmit() {
     .finally(() => {
       hideLoader();
     });
-  // });
 }
 
-/** function fetch หา Id หน่วยงานที่ Active*/
+/**
+ * function fetch หา Id หน่วยงานที่ Active
+ */
 function fetchActive() {
   showLoader();
   http
@@ -138,16 +146,33 @@ function updateSelected(data: DataTree) {
   formData.node = data.orgLevel;
   formData.nodeId = data.orgTreeId;
   formData.orgRevisionId = data.orgRevisionId;
+  props.onCheckChangeData();
 }
 
-/** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
+/**
+ * function ไปยัง Tab ค่อไป
+ */
+function onNextTab() {
+  props.nextStep();
+}
+
+/**
+ * ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น
+ */
 onMounted(async () => {
   fetchActive();
 });
+
+/**
+ * เรียก function ไปใช่หน้าหลัก
+ */
+defineExpose({
+  onSubmit,
+});
 </script>
 
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+  <q-form greedy @submit.prevent @validation-success="onNextTab">
     <q-card bordered class="col-12 row caedNone">
       <div class="col-xs-12 col-sm-3 row">
         <div class="col-12 row no-wrap">
@@ -229,6 +254,7 @@ onMounted(async () => {
                   year-picker
                   :enableTimePicker="false"
                   :readonly="checkRoutePermission"
+                  @update:model-value="props.onCheckChangeData()"
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -268,6 +294,7 @@ onMounted(async () => {
                   rows="6"
                   type="textarea"
                   hide-bottom-space
+                  @update:model-value="props.onCheckChangeData()"
                   :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
@@ -285,6 +312,7 @@ onMounted(async () => {
                   rows="6"
                   hide-bottom-space
                   type="textarea"
+                  @update:model-value="props.onCheckChangeData()"
                 />
               </div>
               <div class="col-xs-12 col-sm-12 col-md-12">
@@ -298,6 +326,7 @@ onMounted(async () => {
                   rows="6"
                   hide-bottom-space
                   type="textarea"
+                  @update:model-value="props.onCheckChangeData()"
                 />
               </div>
             </div>

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

@@ -5,36 +5,41 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * importType
+ */
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
-import type { FormData } from "@/modules/15_development/interface/request/Other";
+import type { FormBudget } from "@/modules/15_development/interface/request/Main";
 
+/**
+ * importstor
+ */
 import { useCounterMixin } from "@/stores/mixin";
 
+/**
+ * use
+ */
 const $q = useQuasar();
-const {
+const { showLoader, hideLoader, messageError } = useCounterMixin();
-  showLoader,
-  hideLoader,
-  diffDay,
-  date2Thai,
-  messageError,
-  dialogConfirm,
-  success,
-} = useCounterMixin();
 const route = useRoute();
-const projectId = ref<string>(route.params.id.toLocaleString());
+
+/**
+ * props
+ */
 const status = defineModel<string>("status", { required: true });
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+  onCheckChangeData: { type: Function, required: true },
+});
+const projectId = ref<string>(route.params.id.toLocaleString());
 
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
-const props = defineProps({
-  prevStep: { type: Function, required: true },
-  nextStep: { type: Function, required: true },
-});
 const step = ref<string>("");
 
-const provinceOp = ref<DataOption[]>([]);
-const provinceOpMain = ref<DataOption[]>([]);
 const budgetOp = ref<DataOption[]>([
   {
     id: "REGULATIONBUDGET",
@@ -64,149 +69,42 @@ const budgetSubOp = ref<DataOption[]>([
   },
 ]);
 
-/** ดึงข้อมูล จังหวัด */
-const getProvince = async () => {
-  showLoader();
-  http
-    .get(config.API.province)
-    .then((res) => {
-      const data = res.data.result;
-
-      provinceOp.value = data.map((item: DataOption) => ({
-        id: item.id,
-        name: item.name,
-      }));
-      provinceOpMain.value = provinceOp.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
 /** ตัวแปร */
-const formData = reactive<FormData>({
+const formData = reactive<FormBudget>({
-  dateStart: null, //วันที่เริ่มต้น
+  budget: "",
-  dateEnd: null, //วันที่สิ้นสุด
-  totalDate: null, //รวมระยะเวลา (วัน)
-  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
-  budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
   budgetSub: "",
-  accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  accept: null,
-  receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  receive: null,
-  approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
+  approved: null,
-  budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
+  budgetPay: null,
-  issues: "", //ประเด็นความเสี่ยง
-  chance: null, //โอกาสที่จะเกิด
-  effects: null, //ผลกระทบจากการเกิด
-  riskLevel: "", //ระดับความเสี่ยง
-  riskManagement: "", //เเนวทางการบริหารความเสี่ยง
-  expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
-  topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
-  addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
-  provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
 });
 
 /** ดึงข้อมูล */
 function fetchData() {
+  showLoader();
   http
-    .get(config.API.developmentMainTab("tab5", projectId.value))
+    .get(config.API.developmentMainTab("tab7", projectId.value))
     .then((res) => {
       const data = res.data.result;
-      formData.dateStart = data.dateStart;
-      formData.dateEnd = data.dateEnd;
-      formData.totalDate = data.totalDate;
-      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
-        address: e.address,
-        provinceId: e.provinceId,
-      }));
       formData.budget = data.budget;
       formData.budgetSub = data.budgetSub;
       formData.accept = data.accept;
       formData.receive = data.receive;
       formData.approved = data.approved;
       formData.budgetPay = data.budgetPay;
-      formData.issues = data.issues;
-      formData.chance = Number(data.chance);
-      formData.effects = Number(data.effects);
-      formData.riskLevel = data.riskLevel;
-      formData.riskManagement = data.riskManagement;
-      formData.expect = data.expect;
-      formData.topicAcademic = data.topicAcademic;
-      formData.addressAcademic = data.addressAcademic;
-      formData.provinceActualId = data.provinceActualId;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
 }
 
-/** ฟังชั่นเคลียค่าวันสิ้นสุดเมื่อวันสิ้นสุดมากกว่าวันเริ่ม */
-function changeDateStart() {
-  if (formData.dateStart !== null && formData.dateEnd !== null) {
-    const startDate = new Date(formData.dateStart);
-    const endDate = new Date(formData.dateEnd);
-    if (startDate > endDate) {
-      formData.dateEnd = null;
-      formData.totalDate = null;
-    } else {
-      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
-    }
-  }
-}
-
-/** ฟังชั่น เก็บค่า ระยะกี่วันจากวันเริ่ม */
-function changeDateEnd() {
-  formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
-}
-
-/**
- * Fuction Filter จังหวัด
- * @param val ค่าตัวพิมพ์ค้นหา
- * @param update ทุกครั้งที่พิมพ์ค่า
- */
-const filterSelector = (val: string, update: Function) => {
-  update(() => {
-    provinceOp.value = provinceOpMain.value.filter(
-      (v: DataOption) => v.name.indexOf(val) > -1
-    );
-  });
-};
-
-/** ระดับความเสี่ยงของโครงการ option */
-async function calRiskLevel() {
-  if (formData.chance && formData.effects) {
-    const riskLevel =
-      (await Number(formData.chance)) * Number(formData.effects);
-    formData.riskLevel =
-      riskLevel == 1
-        ? "น้อยมาก"
-        : riskLevel == 2
-        ? "น้อย"
-        : riskLevel == 3 || riskLevel == 4 || riskLevel == 6
-        ? "ปานกลาง"
-        : riskLevel == 5 || riskLevel == 8 || riskLevel == 9 || riskLevel == 10
-        ? "สูง"
-        : riskLevel == 12 ||
-          riskLevel == 15 ||
-          riskLevel == 16 ||
-          riskLevel == 20 ||
-          riskLevel == 25
-        ? "สูงมาก"
-        : "";
-  }
-}
-
 /** บันทึกข้อมูล */
 function onSubmit() {
-  // dialogConfirm($q, async () => {
   showLoader();
-  formData.totalDate = Number(formData.totalDate);
   formData.accept =
     typeof formData.accept === "string"
       ? Number(formData.accept.replace(/,/g, ""))
@@ -223,32 +121,42 @@ function onSubmit() {
     typeof formData.budgetPay === "string"
       ? Number(formData.budgetPay.replace(/,/g, ""))
       : formData.budgetPay;
-
   http
-    .put(config.API.developmentMainTab("tab5", projectId.value), formData)
+    .put(config.API.developmentMainTab("tab7", projectId.value), formData)
-    .then(() => {
+    .then(() => {})
-      // fetchData();
-      // success($q, "บันทึกข้อมูลสำเร็จ");
-      step.value == "next" ? props.nextStep() : props.prevStep();
-    })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
-  // });
 }
 
-/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
+/**
+ * function ไปยัง Tab ค่อไป
+ */
+function onNextTab() {
+  step.value == "next" ? props.nextStep() : props.prevStep();
+}
+
+/**
+ * ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์
+ */
 onMounted(() => {
   fetchData();
-  getProvince();
+});
+
+/**
+ * เรียก function ไปใช่หน้าหลัก
+ */
+defineExpose({
+  onSubmit,
 });
 </script>
 
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+  <q-form greedy @submit.prevent @validation-success="onNextTab">
     <div class="row q-pa-md q-col-gutter-sm">
       <div class="col-3">
         <q-select
@@ -263,6 +171,9 @@ onMounted(() => {
           emit-value
           map-options
           class="inputgreen"
+          @update:model-value="
+            props.onCheckChangeData(), (formData.budgetSub = '')
+          "
         />
       </div>
       <div class="col-2">
@@ -279,6 +190,7 @@ onMounted(() => {
           emit-value
           map-options
           class="inputgreen"
+          @update:model-value="props.onCheckChangeData()"
         />
       </div>
       <div class="col-12">
@@ -293,6 +205,7 @@ onMounted(() => {
               label="จํานวนงบประมาณที่ขอรับการจัดสรร ฯ"
               mask="###,###,###,###,###"
               reverse-fill-mask
+              @update:model-value="props.onCheckChangeData()"
             />
           </div>
           <div class="col-3">
@@ -305,6 +218,7 @@ onMounted(() => {
               mask="###,###,###,###,###"
               reverse-fill-mask
               label="จํานวนงบประมาณที่ได้รับการจัดสรร ฯ"
+              @update:model-value="props.onCheckChangeData()"
             />
           </div>
           <div v-if="status == 'FINISH'" class="col-3">
@@ -318,6 +232,7 @@ onMounted(() => {
               mask="###,###,###,###,###"
               label="จํานวนงบประมาณที่ได้รับอนุมัติ"
               reverse-fill-mask
+              @update:model-value="props.onCheckChangeData()"
             />
           </div>
           <div v-if="status == 'FINISH'" class="col-3">
@@ -330,6 +245,7 @@ onMounted(() => {
               mask="###,###,###,###,###"
               reverse-fill-mask
               label="จํานวนงบประมาณที่จ่ายจริง"
+              @update:model-value="props.onCheckChangeData()"
             />
           </div>
         </div>

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

@@ -5,21 +5,60 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
-import type {
+import type { FormIndicators } from "@/modules/15_development/interface/request/FollowResult";
-  FormIndicators,
-  FormProject,
-} from "@/modules/15_development/interface/request/FollowResult";
 import type { DevelopmentEvaluations } from "@/modules/15_development/interface/response/FollowResult";
 
+/**
+ * importComponents
+ */
 import DialogHeader from "@/components/DialogHeader.vue";
 
+/**
+ * importStore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 
+/**
+ * use
+ */
+const $q = useQuasar();
+const route = useRoute();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+  messageError,
+  success,
+} = useCounterMixin();
+
+/**
+ * props
+ */
+const status = defineModel<string>("status", { required: true });
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+  onCheckChangeData: { type: Function, required: true },
+});
+
+const projectId = ref<string>(route.params.id.toLocaleString());
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
+const step = ref<string>("");
+
+/***** ตัวชี้วัดความสำเร็จ ******/
 const modalDialog = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const indicatorId = ref<string>("");
+const typeAction = ref<string>("");
 const formIndicators = reactive<FormIndicators>({
   indicators: "",
   target: null,
@@ -29,38 +68,9 @@ const formIndicators = reactive<FormIndicators>({
   results: "",
   obstacles: "",
   suggestions: "",
+  result: "",
 });
-
+/** ข้อมูล Table */
-const formProject = reactive<FormProject>({
-  isBudget: false,
-  isNoPass: false,
-  isOutBudget: false,
-  isPassAllocate: false,
-  isPassNoAllocate: false,
-  project: "",
-});
-
-const $q = useQuasar();
-const {
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-  messageError,
-  success,
-} = useCounterMixin();
-const route = useRoute();
-const projectId = ref<string>(route.params.id.toLocaleString());
-const checkRoutePermission = ref<boolean>(
-  route.name == "developmentDetailPage"
-);
-const status = defineModel<string>("status", { required: true });
-const props = defineProps({
-  prevStep: { type: Function, required: true },
-  nextStep: { type: Function, required: true },
-});
-const step = ref<string>("");
-/** หัวตาราง */
 const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
   {
@@ -109,27 +119,17 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px ; ",
   },
-]);
-
-const visibleColumns = ref<string[]>([
-  "indicators",
-  "target",
-  "metricType",
-  "calculation",
-  "measuRement",
-]);
-
-const projectOp = ref<DataOption[]>([
   {
-    id: "OFFER",
+    name: "result",
-    name: "โครงการที่เสนอขอ TN",
+    align: "left",
-  },
+    label: "ผลการดำเนินการ",
-  {
+    sortable: true,
-    id: "NOOFFER",
+    field: "result",
-    name: "โครงการที่ไม่เสนอขอ TN",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px ; ",
   },
 ]);
-
+// ประเภทตัวชี้วัด
 const metricTypeOp = ref<DataOption[]>([
   {
     id: "1",
@@ -145,7 +145,12 @@ const metricTypeOp = ref<DataOption[]>([
   },
 ]);
 
-/** ดึงข้อมูลตัวชี้วัด */
+const progressTracking = ref<string>(""); //การติดตามความก้าวหน้า
+const projectEvaluation = ref<string>(""); // การประเมินผลโครงการ
+
+/**
+ * ดึงข้อมูลการติดตามผลและการประเมิน
+ */
 function fetchData() {
   showLoader();
   http
@@ -153,18 +158,35 @@ function fetchData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data.developmentEvaluations;
-      formProject.isBudget = data.isBudget;
+      progressTracking.value = data.progressTracking;
-      formProject.isNoPass = data.isNoPass;
+      projectEvaluation.value = data.projectEvaluation;
-      formProject.isOutBudget = data.isOutBudget;
-      formProject.isPassAllocate = data.isPassAllocate;
-      formProject.isPassNoAllocate = data.isPassNoAllocate;
-      formProject.project = data.project;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
+    });
+}
+
+/**
+ * บันทึก การติดตามความก้าวหน้า,การประเมินผลโครงการ
+ */
+function onSubmit() {
+  showLoader();
+  http
+    .put(config.API.developmentMainTab("tab4", projectId.value), {
+      progressTracking: progressTracking.value,
+      projectEvaluation: projectEvaluation.value,
+    })
+    .then(() => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+      isChangeData.value = false;
     });
 }
 
@@ -175,9 +197,11 @@ function fetchData() {
  */
 function onClickAddIndicator(
   statusEdit: boolean = false,
-  data: DevelopmentEvaluations | null = null
+  data: DevelopmentEvaluations | null = null,
+  type: string = ""
 ) {
   isEdit.value = statusEdit;
+  typeAction.value = type;
   if (statusEdit) {
     if (data) {
       indicatorId.value = data.id;
@@ -194,20 +218,9 @@ function onClickAddIndicator(
   modalDialog.value = true;
 }
 
-/** close Dialog and Clear */
+/**
-function closeDialog() {
+ * บันทึกตัวชี้วัดความสำเร็จ
-  modalDialog.value = false;
+ */
-  formIndicators.indicators = "";
-  formIndicators.target = null;
-  formIndicators.metricType = "";
-  formIndicators.calculation = "";
-  formIndicators.measuRement = "";
-  formIndicators.results = "";
-  formIndicators.obstacles = "";
-  formIndicators.suggestions = "";
-}
-
-/** dialog form save data  */
 function onSubmitIndicators() {
   formIndicators.target = formIndicators.target
     ? Number(formIndicators.target)
@@ -233,7 +246,9 @@ function onSubmitIndicators() {
   });
 }
 
-/** data delete */
+/**
+ * ลบตัวชี้วัดความสำเร็จ
+ */
 function onClickDeleteIndicator(id: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -252,216 +267,216 @@ function onClickDeleteIndicator(id: string) {
   });
 }
 
-/** save Main data */
+/**
-function onSubmit() {
+ * close Dialog and Clear
-  // dialogConfirm($q, () => {
+ */
-  if (formProject.project === "NOOFFER") {
+function closeDialog() {
-    formProject.isNoPass = false;
+  modalDialog.value = false;
-    formProject.isPassAllocate = false;
+  formIndicators.indicators = "";
-    formProject.isPassNoAllocate = false;
+  formIndicators.target = null;
-  } else {
+  formIndicators.metricType = "";
-    formProject.isBudget = false;
+  formIndicators.calculation = "";
-    formProject.isOutBudget = false;
+  formIndicators.measuRement = "";
-  }
+  formIndicators.results = "";
-  showLoader();
+  formIndicators.obstacles = "";
-  http
+  formIndicators.suggestions = "";
-    .put(config.API.developmentMainTab("tab4", projectId.value), formProject)
+}
-    .then(() => {
+
-      // fetchData();
+/**
-      // success($q, "บันทึกข้อมูลสำเร็จ");
+ * function ไปยัง Tab ค่อไป
-      step.value == "next" ? props.nextStep() : props.prevStep();
+ */
-    })
+function onNextTab() {
-    .catch((err) => {
+  step.value == "next" ? props.nextStep() : props.prevStep();
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-  // });
 }
 
 /** fetchData in page  */
 onMounted(() => {
   fetchData();
 });
+
+/**
+ * เรียก function ไปใช่หน้าหลัก
+ */
+defineExpose({
+  onSubmit,
+});
 </script>
 
 <template>
-  <!--CARD ตัวชี้วัดความสำเร็จ -->
+  <q-form greedy @submit.prevent @validation-success="onNextTab">
-  <q-card bordered style="border: 1px solid #d6dee1" class="q-mt-md">
+    <div class="q-pa-sm q-my-sm">
-    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+      <q-card bordered style="border: 1px solid #d6dee1">
-      ตัวชี้วัดความสำเร็จ
+        <div
-      <q-btn
+          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-        v-if="!checkRoutePermission"
+        >
-        dense
+          ตัวชี้วัดความสำเร็จ
-        flat
+          <q-btn
-        round
+            v-if="!checkRoutePermission"
-        color="primary"
-        icon="add"
-        @click="onClickAddIndicator()"
-      >
-        <q-tooltip>เพิ่มตัวชี้วัดความสำเร็จ</q-tooltip>
-      </q-btn>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="col-12 q-pa-md">
-      <d-table
-        for="table"
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        row-key="id"
-        flat
-        bordered
-        dense
-        class="custom-header-table"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        :visible-columns="visibleColumns"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width />
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td>
-              <q-btn
-                v-if="!checkRoutePermission"
-                dense
-                flat
-                round
-                color="edit"
-                icon="edit"
-                @click="onClickAddIndicator(true, props.row)"
-              >
-                <q-tooltip>แก้ไขตัวชี้วัดความสำเร็จ</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="!checkRoutePermission"
-                dense
-                flat
-                round
-                color="red"
-                icon="delete"
-                @click="onClickDeleteIndicator(props.row.id)"
-              >
-                <q-tooltip>ลบ</q-tooltip>
-              </q-btn>
-            </q-td>
-
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div>
-                {{ col.value ? col.value : "-" }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-
-  <!--CARD ประเภทโครงการ -->
-  <q-card bordered style="border: 1px solid #d6dee1" class="q-mt-md">
-    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-      ประเภทโครงการ
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <div class="row q-pa-md q-col-gutter-sm">
-        <div class="col-12 col-sm-6 col-md-4">
-          <q-select
-            :readonly="checkRoutePermission"
             dense
-            outlined
+            flat
-            label="ประเภทโครงการ"
+            round
-            v-model="formProject.project"
+            color="primary"
-            :options="projectOp"
+            icon="add"
-            option-label="name"
+            @click="onClickAddIndicator()"
-            option-value="id"
+          >
-            hide-bottom-space
+            <q-tooltip>เพิ่มตัวชี้วัดความสำเร็จ</q-tooltip>
-            map-options
+          </q-btn>
-            emit-value
-            class="inputgreen"
-          />
         </div>
-        <div v-if="formProject.project !== ''" class="col-12">
+        <div class="col-12"><q-separator /></div>
-          <div class="row" v-if="formProject.project == 'OFFER'">
+        <div class="col-12 q-pa-md">
-            <div class="col-12">
+          <d-table
-              <q-checkbox
+            for="table"
-                :disable="checkRoutePermission"
+            ref="table"
-                v-model="formProject.isPassAllocate"
+            :columns="columns"
-                label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
+            :rows="rows"
-              />
+            row-key="id"
-            </div>
+            flat
-            <div class="col-12">
+            bordered
-              <q-checkbox
+            dense
-                :disable="checkRoutePermission"
+            class="custom-header-table"
-                v-model="formProject.isPassNoAllocate"
+            :rows-per-page-options="[10, 25, 50, 100]"
-                label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+          >
-              />
+            <template v-slot:header="props">
-            </div>
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td>
+                  <q-btn
+                    v-if="!checkRoutePermission && status === 'FINISH'"
+                    dense
+                    flat
+                    round
+                    color="public"
+                    icon="mdi-content-save-edit-outline"
+                    @click="onClickAddIndicator(true, props.row, 'result')"
+                  >
+                    <q-tooltip>แก้ไขตัวชี้วัดความสำเร็จ</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="!checkRoutePermission"
+                    dense
+                    flat
+                    round
+                    color="edit"
+                    icon="edit"
+                    @click="onClickAddIndicator(true, props.row)"
+                  >
+                    <q-tooltip>แก้ไขตัวชี้วัดความสำเร็จ</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="!checkRoutePermission"
+                    dense
+                    flat
+                    round
+                    color="red"
+                    icon="delete"
+                    @click="onClickDeleteIndicator(props.row.id)"
+                  >
+                    <q-tooltip>ลบ</q-tooltip>
+                  </q-btn>
+                </q-td>
 
-            <div class="col-12">
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <q-checkbox
+                  <div>
-                :disable="checkRoutePermission"
+                    {{ col.value ? col.value : "-" }}
-                v-model="formProject.isNoPass"
+                  </div>
-                label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+                </q-td>
-              />
+              </q-tr>
-            </div>
+            </template>
-          </div>
+          </d-table>
-          <div class="row" v-else>
-            <div class="col-12">
-              <q-checkbox
-                :disable="checkRoutePermission"
-                v-model="formProject.isBudget"
-                label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
-              />
-            </div>
-            <div class="col-12">
-              <q-checkbox
-                :disable="checkRoutePermission"
-                v-model="formProject.isOutBudget"
-                label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
-              />
-            </div>
-          </div>
         </div>
+      </q-card>
+
+      <!-- การติดตามความก้าวหน้า -->
+      <q-card bordered class="col-12 q-my-sm q-mt-md">
+        <div
+          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        >
+          การติดตามความก้าวหน้า
+        </div>
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                outlined
+                :readonly="checkRoutePermission"
+                dense
+                class="inputgreen"
+                v-model="progressTracking"
+                label="การติดตามความก้าวหน้า"
+                type="textarea"
+                @update:model-value="props.onCheckChangeData()"
+              />
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+
+      <!-- การประเมินผลโครงการ -->
+      <q-card bordered class="col-12 q-my-sm q-mt-md">
+        <div
+          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        >
+          การประเมินผลโครงการ
+        </div>
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                outlined
+                :readonly="checkRoutePermission"
+                dense
+                class="inputgreen"
+                v-model="projectEvaluation"
+                label="การประเมินผลโครงการ"
+                type="textarea"
+                @update:model-value="props.onCheckChangeData()"
+              />
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+    <!--CARD ตัวชี้วัดความสำเร็จ -->
+    <q-separator />
+
+    <q-card-actions align="center">
+      <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
+        <q-btn
+          rounded
+          label="ก่อนหน้า"
+          icon="mdi-chevron-left"
+          id="onSubmit"
+          type="submit"
+          color="public"
+          class="q-mr-xs"
+          style="width: 120px"
+          @click="step = 'prev'"
+        >
+        </q-btn>
+        <q-btn
+          rounded
+          label="ถัดไป"
+          icon-right="mdi-chevron-right"
+          id="onSubmit"
+          type="submit"
+          color="public"
+          class="q-ml-xs"
+          style="width: 120px"
+          @click="step = 'next'"
+        >
+        </q-btn>
       </div>
-      <q-separator />
+    </q-card-actions>
-      <q-card-actions align="center">
+  </q-form>
-        <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
-          <q-btn
-            rounded
-            label="ก่อนหน้า"
-            icon="mdi-chevron-left"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-mr-xs"
-            style="width: 120px"
-            @click="step = 'prev'"
-          >
-          </q-btn>
-          <q-btn
-            rounded
-            label="ถัดไป"
-            icon-right="mdi-chevron-right"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-ml-xs"
-            style="width: 120px"
-            @click="step = 'next'"
-          >
-          </q-btn>
-        </div>
-      </q-card-actions>
-    </q-form>
-  </q-card>
 
   <q-dialog v-model="modalDialog" persistent>
     <q-card style="width: 900px; max-width: 80vw">
@@ -472,7 +487,30 @@ onMounted(() => {
         />
         <q-separator />
         <q-card-section>
-          <div class="row q-col-gutter-sm">
+          <div
+            class="row q-col-gutter-sm"
+            v-if="status === 'FINISH' && typeAction === 'result'"
+          >
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                class="inputgreen"
+                label="ผลการดำเนิดการ"
+                v-model="formIndicators.result"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณากรอกผลการดำเนิดการ'}`,
+      
+                ]"
+                type="textarea"
+              />
+            </div>
+          </div>
+
+          <div class="row q-col-gutter-sm" v-else>
             <div class="col-12">
               <q-input
                 dense
@@ -481,6 +519,7 @@ onMounted(() => {
                 label="ชื่อตัวชี้วัด"
                 v-model="formIndicators.indicators"
                 hide-bottom-space
+                lazy-rules
                 :rules="[
                   (val:string) =>
                     !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
@@ -501,6 +540,7 @@ onMounted(() => {
                 map-options
                 class="inputgreen"
                 hide-bottom-space
+                lazy-rules
                 :rules="[
                   (val:string) =>
                     !!val || `${'กรุณาเลือกประเภทตัวชี้วัด'}`,
@@ -514,14 +554,15 @@ onMounted(() => {
                 dense
                 outlined
                 class="inputgreen"
-                label="เป้าหมาย"
+                label="ค่าเป้าหมาย"
                 v-model="formIndicators.target"
                 mask="#"
                 reverse-fill-mask
                 hide-bottom-space
+                lazy-rules
                 :rules="[
                   (val:string) =>
-                    !!val || `${'กรุณากรอกเป้าหมาย'}`,
+                    !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
       
                 ]"
               />

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -9,6 +9,8 @@ import config from "@/app.config";
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue"; // ข้อมูลเบื้องต้น
 import Target from "@/modules/15_development/components/Target.vue"; // เป้าหมาย
 import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue"; // ลักษณะโครงการ
+import Budget from "@/modules/15_development/components/Budget.vue"; // งบประมาณ
+import Risk from "@/modules/15_development/components/Risk.vue"; //ความเสี่ยง
 import FollowResult from "@/modules/15_development/components/FollowResult.vue"; // การติดตามประเมินผล
 import Other from "@/modules/15_development/components/Other.vue"; // อื่นๆ
 // import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
@@ -16,8 +18,6 @@ import Other from "@/modules/15_development/components/Other.vue"; // อื่
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-import Budget from "@/modules/15_development/components/Budget.vue";
-import Risk from "@/modules/15_development/components/Risk.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -105,6 +105,45 @@ function onFinish(id: string) {
 onMounted(() => {
   projectId.value && getStatus(projectId.value);
 });
+
+const isChangeData = ref<boolean>(false);
+/**
+ * function เช็คการแกไข้ข้อมูล
+ */
+function onCheckChangeData() {
+  isChangeData.value = true;
+}
+
+const childBasicInfoRef = ref<InstanceType<typeof BasicInfo> | null>(null);
+const childProjectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(
+  null
+);
+const childBudgetRef = ref<InstanceType<typeof Budget> | null>(null);
+const childRiskRef = ref<InstanceType<typeof Risk> | null>(null);
+const childFollowResultRef = ref<InstanceType<typeof FollowResult> | null>(
+  null
+);
+const childOtherRef = ref<InstanceType<typeof Other> | null>(null);
+
+watch(tab, (newValue, oldValue) => {
+  console.log(`Count changed from ${oldValue} to ${newValue}`);
+  if (isChangeData.value) {
+    // เรียกใช้ฟังก์ชันของ component ลูก
+    if (oldValue === "BasicInfo") {
+      childBasicInfoRef.value?.onSubmit();
+    } else if (oldValue === "ProjectDetail") {
+      childProjectDetailRef.value?.onSubmit();
+    } else if (oldValue === "Budget") {
+      childBudgetRef.value?.onSubmit();
+    } else if (oldValue === "Risk") {
+      childRiskRef.value?.onSubmit();
+    } else if (oldValue === "FollowResult") {
+      childFollowResultRef.value?.onSubmit();
+    } else if (oldValue === "Other") {
+      childOtherRef.value?.onSubmit();
+    }
+  }
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -166,34 +205,72 @@ onMounted(() => {
     <q-separator />
     <div class="q-pa-sm" style="padding: 0px">
       <q-tab-panels v-model="tab" animated>
+        <!-- ข้อมูลเบื้องต้น -->
         <q-tab-panel style="padding: 0px" name="BasicInfo">
-          <BasicInfo :next-step="nextStep" />
+          <BasicInfo
-        </q-tab-panel>
+            ref="childBasicInfoRef"
-        <q-tab-panel name="Target">
-          <Target :prev-step="prevStep" :next-step="nextStep"
-        /></q-tab-panel>
-        <q-tab-panel name="ProjectDetail" style="padding: 0px">
-          <ProjectDetail :prev-step="prevStep" :next-step="nextStep" />
-        </q-tab-panel>
-        <q-tab-panel name="Budget" style="padding: 0px">
-          <Budget
-            :status="status"
-            :prev-step="prevStep"
             :next-step="nextStep"
+            :onCheckChangeData="onCheckChangeData"
+            v-model:isChangeData.value="isChangeData"
           />
         </q-tab-panel>
-        <q-tab-panel name="Risk" style="padding: 0px">
+
-          <Risk :status="status" :prev-step="prevStep" :next-step="nextStep" />
+        <!-- เป้าหมาย -->
+        <q-tab-panel name="Target">
+          <Target :prev-step="prevStep" :next-step="nextStep" />
         </q-tab-panel>
-        <q-tab-panel name="FollowResult">
+
-          <FollowResult
+        <!-- ลักษณะโครงการ -->
+        <q-tab-panel name="ProjectDetail" style="padding: 0px">
+          <ProjectDetail
+            ref="childProjectDetailRef"
+            :prev-step="prevStep"
+            :next-step="nextStep"
+            :onCheckChangeData="onCheckChangeData"
+            v-model:isChangeData.value="isChangeData"
+          />
+        </q-tab-panel>
+
+        <!-- งบประมาณ -->
+        <q-tab-panel name="Budget" style="padding: 0px">
+          <Budget
+            ref="childBudgetRef"
             :status="status"
             :prev-step="prevStep"
             :next-step="nextStep"
+            :onCheckChangeData="onCheckChangeData"
+            v-model:isChangeData.value="isChangeData"
+          />
+        </q-tab-panel>
+
+        <!-- ความเสี่ยงและประโยชน์ที่จะได้รับ -->
+        <q-tab-panel name="Risk" style="padding: 0px">
+          <Risk
+            ref="childRiskRef"
+            :prev-step="prevStep"
+            :next-step="nextStep"
+            :onCheckChangeData="onCheckChangeData"
+            v-model:isChangeData.value="isChangeData"
+          />
+        </q-tab-panel>
+        <q-tab-panel name="FollowResult" style="padding: 0px">
+          <FollowResult
+            ref="childFollowResultRef"
+            :status="status"
+            :prev-step="prevStep"
+            :next-step="nextStep"
+            :onCheckChangeData="onCheckChangeData"
+            v-model:isChangeData.value="isChangeData"
           />
         </q-tab-panel>
         <q-tab-panel name="Other" style="padding: 0px">
-          <Other :status="status" :prev-step="prevStep" />
+          <Other
+            ref="childOtherRef"
+            :status="status"
+            :prev-step="prevStep"
+            :onCheckChangeData="onCheckChangeData"
+            v-model:isChangeData.value="isChangeData"
+          />
         </q-tab-panel>
         <!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
       </q-tab-panels>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, computed } from "vue";
+import { onMounted, reactive, ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -8,6 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type {
   DataOptionTechnique,
   FormProjectDetail,
+  DataOption,
 } from "@/modules/15_development/interface/index/Main";
 import type { DataStrategic } from "@/modules/15_development/interface/response/Main";
 
@@ -16,10 +17,13 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
 const props = defineProps({
   prevStep: { type: Function, required: true },
   nextStep: { type: Function, required: true },
+  onCheckChangeData: { type: Function, required: true },
 });
+
 const step = ref<string>("");
 const reasonPlanned70 = ref<string>("");
 const reasonPlanned20 = ref<string>("");
@@ -52,16 +56,19 @@ const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
-const { showLoader, hideLoader, dialogConfirm, messageError, success } =
+const { showLoader, hideLoader, messageError, date2Thai, diffDay } =
   useCounterMixin();
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
-const projectTypeOp = ref<String[]>([
+const projectTypeOp = ref<any[]>([
-  "โครงการตามยุทธศาสตร์",
+  { label: "โครงการตามยุทธศาสตร์", value: "โครงการตามยุทธศาสตร์" },
-  "โครงการตามภารกิจประจำของหน่วยงาน",
+  {
-  "โครงการใหม่",
+    label: "โครงการตามภารกิจประจำของหน่วยงาน",
-  "โครงการต่อเนื่อง",
+    value: "โครงการตามภารกิจประจำของหน่วยงาน",
+  },
+  { label: "โครงการใหม่", value: "โครงการใหม่" },
+  { label: "โครงการต่อเนื่อง", value: "โครงการต่อเนื่อง" },
 ]);
 
 /** option */
@@ -169,6 +176,10 @@ const formData = reactive<FormProjectDetail>({
   strategyChildPlannedNode: 0, //node ยุทธศาสตร์เป้าหมายตามแผน
   strategyChildActualId: null, //id ยุทธศาสตร์เป้าหมายตามจริง
   strategyChildActualNode: 0, //node ยุทธศาสตร์เป้าหมายตามจริง
+  dateStart: null, //วันที่เริ่มต้น
+  dateEnd: null, //วันที่สิ้นสุด
+  totalDate: null, //รวมระยะเวลา (วัน)
+  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
 });
 
 const nodes = ref<any>([]);
@@ -179,6 +190,25 @@ const noData = ref<string>("ไม่มีข้อมูล");
 const expanded = ref<Array<string | null>>([]);
 const expanded2 = ref<Array<string | null>>([]);
 
+/**
+ * ดึงข้อมูล จังหวัด
+ */
+function fetchProvince() {
+  http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result;
+      provinceOp.value = data.map((item: DataOption) => ({
+        id: item.id,
+        name: item.name,
+      }));
+      provinceOpMain.value = provinceOp.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
 /** ดึงข้อมูลทั้งหมด */
 function fetchData() {
   showLoader();
@@ -186,7 +216,6 @@ function fetchData() {
     .get(config.API.developmentMainTab("tab3", projectId.value))
     .then((res) => {
       const data = res.data.result;
-
       formData.developmentProjectTypes = data.developmentProjectTypes;
       formData.projectModal = data.projectModal;
       formData.isBackPlanned = data.isBackPlanned;
@@ -205,6 +234,13 @@ function fetchData() {
         data.developmentProjectTechniqueActuals;
       formData.projectModalPlanned = data.projectModalPlanned;
       formData.projectModalActual = data.projectModalActual;
+      // formData.dateStart = data.dateStart;
+      // formData.dateEnd = data.dateEnd;
+      // formData.totalDate = data.totalDate;
+      // formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
+      //   address: e.address,
+      //   provinceId: e.provinceId,
+      // }));
 
       const arrayExpanded = [
         data.strategyChild1Planned,
@@ -250,6 +286,7 @@ function fetchData() {
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
 }
 
@@ -267,39 +304,16 @@ function fetchTree() {
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
 }
 
 /** Main save */
-async function onSubmit() {
+function onSubmit() {
-  // dialogConfirm($q, async () => {
   showLoader();
-  await http
+  http
     .put(config.API.developmentMainTab("tab3", projectId.value), {
-      developmentProjectTypes: formData.developmentProjectTypes,
+      ...formData,
-      projectModal: formData.projectModal,
-      isBackPlanned: formData.isBackPlanned,
-      isHoldPlanned: formData.isHoldPlanned,
-      projectDayBackPlanned: formData.isBackPlanned
-        ? formData.projectDayBackPlanned
-        : null,
-      projectDayHoldPlanned: formData.projectDayHoldPlanned,
-      projectNigthHoldPlanned: formData.projectNigthHoldPlanned,
-      developmentProjectTechniquePlanneds:
-        formData.developmentProjectTechniquePlanneds,
-      isBackActual: formData.isBackActual,
-      isHoldActual: formData.isHoldActual,
-      projectDayBackActual: formData.projectDayBackActual,
-      projectDayHoldActual: formData.projectDayHoldActual,
-      projectNigthHoldActual: formData.projectNigthHoldActual,
-      developmentProjectTechniqueActuals:
-        formData.developmentProjectTechniqueActuals,
-      projectModalActual: formData.projectModalActual,
-      projectModalPlanned: formData.projectModalPlanned,
-      strategyChildPlannedId: formData.strategyChildPlannedId,
-      strategyChildPlannedNode: formData.strategyChildPlannedNode,
-      strategyChildActualId: formData.strategyChildActualId,
-      strategyChildActualNode: formData.strategyChildActualNode,
       reasonPlanned70: reasonPlanned70.value,
       reasonPlanned20: reasonPlanned20.value,
       reasonPlanned10: reasonPlanned10.value,
@@ -307,16 +321,14 @@ async function onSubmit() {
       reasonActual20: reasonActual20.value,
       reasonActual10: reasonActual10.value,
     })
-    .then(() => {
+    .then(() => {})
-      // success($q, "บันทึกข้อมูลสำเร็จ");
-      // fetchData();
-      step.value == "next" ? props.nextStep() : props.prevStep();
-    })
     .catch((err) => {
       messageError($q, err);
       hideLoader();
+    })
+    .finally(() => {
+      isChangeData.value = false;
     });
-  // });
 }
 
 /**
@@ -333,36 +345,89 @@ function updateSelected(data: DataStrategic, type: string) {
     formData.strategyChildActualNode = data.level;
   }
 }
-/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
+
-onMounted(() => {
+const provinceOp = ref<DataOption[]>([]);
+const provinceOpMain = ref<DataOption[]>([]);
+
+/** เพิ่มข้อมูลสถานที่ดำเนินการ */
+function onClickAddLocation() {
+  const data = {
+    address: "",
+    provinceId: "",
+  };
+  formData.developmentAddresss.push(data);
+}
+
+/** ลบข้อมูล */
+function onClickDeleteLocation(index: number) {
+  formData.developmentAddresss.splice(index, 1);
+}
+
+/**
+ * Fuction Filter จังหวัด
+ * @param val ค่าตัวพิมพ์ค้นหา
+ * @param update ทุกครั้งที่พิมพ์ค่า
+ */
+const filterSelector = (val: string, update: Function) => {
+  update(() => {
+    provinceOp.value = provinceOpMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
+watch(
+  () => [formData.dateStart, formData.dateEnd],
+  () => {
+    if (formData.dateStart && formData.dateEnd) {
+      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
+    }
+  }
+);
+
+/**
+ * function ไปยัง Tab ค่อไป
+ */
+function onNextTab() {
+  step.value == "next" ? props.nextStep() : props.prevStep();
+}
+/**
+ * ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์
+ */
+onMounted(async () => {
+  fetchProvince();
   fetchData();
   fetchTree();
 });
+
+/**
+ * เรียก function ไปใช่หน้าหลัก
+ */
+defineExpose({
+  onSubmit,
+});
 </script>
 
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+  <q-form greedy @submit.prevent @validation-success="onNextTab">
     <div class="row q-pa-sm">
       <div class="col-12">
-        <q-select
+        <div class="col-12 text-bold">ประเภทโครงการ</div>
-          :readonly="checkRoutePermission"
+        <q-option-group
-          dense
+          :disable="checkRoutePermission"
-          outlined
-          v-model="formData.developmentProjectTypes"
           :options="projectTypeOp"
-          label="ประเภทโครงการ"
+          type="checkbox"
-          option-label="name"
+          v-model="formData.developmentProjectTypes"
-          option-value="id"
+          color="primary"
-          emit-value
+          keep-color
-          map-options
+          @update:model-value="props.onCheckChangeData()"
-          multiple
-          class="inputgreen"
         />
       </div>
 
+      <!-- ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์/แผน -->
       <q-card bordered class="col-12 q-my-sm">
         <div
-          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
+          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
         >
           ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์/แผน
         </div>
@@ -373,7 +438,7 @@ onMounted(() => {
             <div class="col-6">
               <q-card bordered class="col-12">
                 <div
-                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
                 >
                   ยุทธศาสตร์/แผน
                 </div>
@@ -413,7 +478,10 @@ onMounted(() => {
                     <template v-slot:default-header="prop">
                       <q-item
                         clickable
-                        @click.stop="updateSelected(prop.node, '1')"
+                        @click.stop="
+                          updateSelected(prop.node, '1'),
+                            props.onCheckChangeData()
+                        "
                         :active="
                           formData.strategyChildPlannedId == prop.node.id
                         "
@@ -434,7 +502,7 @@ onMounted(() => {
             <div class="col-6">
               <q-card bordered class="col-12">
                 <div
-                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
                 >
                   ยุทธศาสตร์/แผน
                 </div>
@@ -473,7 +541,10 @@ onMounted(() => {
                     <template v-slot:default-header="prop">
                       <q-item
                         clickable
-                        @click.stop="updateSelected(prop.node, '2')"
+                        @click.stop="
+                          updateSelected(prop.node, '2'),
+                            props.onCheckChangeData()
+                        "
                         :active="formData.strategyChildActualId == prop.node.id"
                         active-class="my-list-link text-primary text-weight-medium"
                         class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
@@ -493,9 +564,201 @@ onMounted(() => {
         </q-card-section>
       </q-card>
 
+      <!-- เวลาและสถานที่ดำเนินการ -->
       <q-card bordered class="col-12 q-my-sm">
         <div
-          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
+          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        >
+          เวลาและสถานที่ดำเนินการ
+        </div>
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12 text-bold">ระยะเวลาดำเนินการ</div>
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-12 col-sm-6 col-md-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.dateStart"
+                  :locale="'th'"
+                  autoApply
+                  :readonly="checkRoutePermission"
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :max-date="formData.dateEnd"
+                  @update:model-value="props.onCheckChangeData()"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      class="inputgreen"
+                      dense
+                      :readonly="checkRoutePermission"
+                      outlined
+                      :model-value="
+                        formData.dateStart
+                          ? date2Thai(formData.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="formData.dateEnd"
+                  :locale="'th'"
+                  :readonly="checkRoutePermission"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :min-date="formData.dateStart"
+                  @update:model-value="props.onCheckChangeData()"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      :readonly="checkRoutePermission"
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formData.dateEnd ? date2Thai(formData.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
+                  :readonly="checkRoutePermission"
+                  outlined
+                  class="inputgreen"
+                  label="รวมระยะเวลา (วัน)"
+                  v-model="formData.totalDate"
+                  mask="#"
+                  reverse-fill-mask
+                  @update:model-value="props.onCheckChangeData()"
+                />
+              </div>
+            </div>
+
+            <div class="col-12 q-mt-md">
+              <span class="text-bold">สถานที่ดำเนินการ</span>
+              <q-btn
+                v-if="!checkRoutePermission"
+                dense
+                flat
+                round
+                color="primary"
+                icon="add"
+                @click="onClickAddLocation"
+              >
+                <q-tooltip>เพิ่มสถานที่ดำเนินการ</q-tooltip>
+              </q-btn>
+            </div>
+
+            <div
+              class="col-12"
+              v-for="(item, index) in formData.developmentAddresss"
+            >
+              <div class="row q-col-gutter-sm">
+                <div class="col-8">
+                  <q-input
+                    :readonly="checkRoutePermission"
+                    outlined
+                    dense
+                    class="inputgreen"
+                    v-model="formData.developmentAddresss[index].address"
+                    label="ชื่อสถานที่"
+                    @update:model-value="props.onCheckChangeData()"
+                  />
+                </div>
+                <div class="col-3">
+                  <q-select
+                    :readonly="checkRoutePermission"
+                    outlined
+                    dense
+                    v-model="formData.developmentAddresss[index].provinceId"
+                    label="จังหวัด"
+                    :options="provinceOp"
+                    option-label="name"
+                    option-value="id"
+                    emit-value
+                    map-options
+                    class="inputgreen"
+                    use-input
+                    @update:model-value="props.onCheckChangeData()"
+                    @filter="
+                  (inputValue:string, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, )
+                    
+                "
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่พบข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+                <div class="col-1 text-center">
+                  <q-btn
+                    v-if="index !== 0 && !checkRoutePermission"
+                    dense
+                    flat
+                    round
+                    color="red"
+                    icon="delete"
+                    @click="
+                      onClickDeleteLocation(index), props.onCheckChangeData()
+                    "
+                  >
+                    <q-tooltip>ลบ</q-tooltip></q-btn
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+
+      <!-- รูปแบบโครงการ -->
+      <q-card bordered class="col-12 q-my-sm">
+        <div
+          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
         >
           รูปแบบโครงการ
         </div>
@@ -517,6 +780,7 @@ onMounted(() => {
                   value="GO_BLACK"
                   label="ไป-กลับ"
                   v-model="formData.isBackPlanned"
+                  @update:model-value="props.onCheckChangeData()"
                 ></q-checkbox>
               </div>
               <div class="col-12 col-md-4">
@@ -531,6 +795,7 @@ onMounted(() => {
                   mask="#"
                   reverse-fill-mask
                   class="inputgreen"
+                  @update:model-value="props.onCheckChangeData()"
                 />
               </div>
             </div>
@@ -546,6 +811,7 @@ onMounted(() => {
                   value="HOLD"
                   label="พักค้าง"
                   v-model="formData.isHoldPlanned"
+                  @update:model-value="props.onCheckChangeData()"
                 ></q-checkbox>
               </div>
               <div class="col-12 col-md-4">
@@ -560,6 +826,7 @@ onMounted(() => {
                   mask="#"
                   reverse-fill-mask
                   class="inputgreen"
+                  @update:model-value="props.onCheckChangeData()"
                 />
               </div>
               <div class="col-12 col-md-4">
@@ -574,6 +841,7 @@ onMounted(() => {
                   mask="#"
                   class="inputgreen"
                   reverse-fill-mask
+                  @update:model-value="props.onCheckChangeData()"
                 />
               </div>
             </div>
@@ -599,11 +867,13 @@ onMounted(() => {
                     v-model="formData.developmentProjectTechniquePlanneds"
                     :options="projectTechniquesOp1"
                     type="checkbox"
+                    @update:model-value="props.onCheckChangeData()"
                   />
                   <div class="row" v-if="checkOtherBox11">
                     <div class="offset-4 col-8 q-mt-sm relative-position">
                       <div class="other_custom_input">
                         <q-input
+                          @update:model-value="props.onCheckChangeData()"
                           v-model="reasonPlanned70"
                           dense
                           :readonly="
@@ -633,6 +903,7 @@ onMounted(() => {
                     v-model="formData.developmentProjectTechniquePlanneds"
                     :options="projectTechniquesOp2"
                     type="checkbox"
+                    @update:model-value="props.onCheckChangeData()"
                   />
                   <div class="row" v-if="checkOtherBox12">
                     <div class="offset-4 col-8 q-mt-sm relative-position">
@@ -647,6 +918,7 @@ onMounted(() => {
                           outlined
                           class="inputgreen"
                           label="กรุณาระบุ"
+                          @update:model-value="props.onCheckChangeData()"
                         ></q-input>
                       </div>
                     </div>
@@ -667,6 +939,7 @@ onMounted(() => {
                     v-model="formData.developmentProjectTechniquePlanneds"
                     :options="projectTechniquesOp3"
                     type="checkbox"
+                    @update:model-value="props.onCheckChangeData()"
                   />
                   <div class="row" v-if="checkOtherBox13">
                     <div class="offset-4 col-8 q-mt-sm relative-position">
@@ -681,6 +954,7 @@ onMounted(() => {
                           outlined
                           class="inputgreen"
                           label="กรุณาระบุ"
+                          @update:model-value="props.onCheckChangeData()"
                         ></q-input>
                       </div>
                     </div>
@@ -700,6 +974,7 @@ onMounted(() => {
                 mask="#"
                 reverse-fill-mask
                 class="inputgreen"
+                @update:model-value="props.onCheckChangeData()"
               />
             </div>
 
@@ -855,6 +1130,7 @@ onMounted(() => {
                               outlined
                               class="inputgreen"
                               label="กรุณาระบุ"
+                              @update:model-value="props.onCheckChangeData()"
                             ></q-input>
                           </div>
                         </div>
@@ -872,6 +1148,7 @@ onMounted(() => {
                     label="จำนวน (รุ่น)"
                     mask="#"
                     reverse-fill-mask
+                    @update:model-value="props.onCheckChangeData()"
                   />
                 </div>
               </div>
@@ -908,20 +1185,6 @@ onMounted(() => {
       >
       </q-btn>
     </div>
-    <!-- <q-separator v-if="!checkRoutePermission" />
-
-    <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
-      <q-btn
-        unelevated
-        label="บันทึก"
-        id="onSubmit"
-        type="submit"
-        color="public"
-        class="q-px-md"
-      >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn>
-    </div> -->
   </q-form>
 </template>
 

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

@@ -5,184 +5,147 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { DataOption } from "@/modules/15_development/interface/index/Main";
+/**
-import type { FormData } from "@/modules/15_development/interface/request/Other";
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { FormRisk } from "@/modules/15_development/interface/request/Main";
+import type { ResRisk } from "@/modules/15_development/interface/response/Main";
 
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importstore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 
+/**
+ * use
+ */
 const $q = useQuasar();
+const route = useRoute();
 const {
   showLoader,
   hideLoader,
-  diffDay,
-  date2Thai,
   messageError,
   dialogConfirm,
   success,
+  dialogRemove,
 } = useCounterMixin();
-const route = useRoute();
+
+/**
+ * props
+ */
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+  onCheckChangeData: { type: Function, required: true },
+});
+
 const projectId = ref<string>(route.params.id.toLocaleString());
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
-const status = defineModel<string>("status", { required: true });
-const props = defineProps({
-  prevStep: { type: Function, required: true },
-  nextStep: { type: Function, required: true },
-});
 const step = ref<string>("");
 
-const provinceOp = ref<DataOption[]>([]);
+/**
-const provinceOpMain = ref<DataOption[]>([]);
+ * ข้อมูล Table
-const budgetOp = ref<DataOption[]>([
+ */
+const rows = ref<ResRisk[]>([]);
+const columns = ref<QTableProps["columns"]>([
   {
-    id: "REGULATIONBUDGET",
+    name: "issues",
-    name: "งบตามข้อบัญญัติ",
+    align: "left",
+    label: "ประเด็นความเสี่ยง",
+    sortable: false,
+    field: "issues",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
-    id: "OUTSIDEBUDGET",
+    name: "chance",
-    name: "เงินนอกงบประมาณ",
+    align: "left",
+    label: "โอกาสที่จะเกิด",
+    sortable: false,
+    field: "chance",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
-    id: "BANGKOKBUDGET",
+    name: "effects",
-    name: "ไม่ใช้งบประมาณ",
+    align: "left",
-  },
+    label: "ผลกระทบจากการเกิด",
-]);
+    field: "effects",
-const budgetSubOp = ref<DataOption[]>([
+    sortable: false,
-  {
+    headerStyle: "font-size: 14px",
-    id: "MAINTENANCE",
+    style: "font-size: 14px",
-    name: "เงินบำรุง",
   },
   {
-    id: "FUND",
+    name: "riskLevel",
-    name: "เงินกองทุน",
+    align: "left",
+    label: "ระดับความเสี่ยง",
+    sortable: false,
+    field: "riskLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
-    id: "SUBSIDY",
+    name: "riskManagement",
-    name: "เงินอุดหนุน",
+    align: "left",
+    label: "แนวทางการบริหารความเสี่ยง",
+    sortable: false,
+    field: "riskManagement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
 ]);
 
-/** ดึงข้อมูล จังหวัด */
+/************ ความเสี่ยงของโครงการ  ***************/
-const getProvince = async () => {
+const modalRisk = ref<boolean>(false);
-  showLoader();
+const riskId = ref<string>("");
-  http
+const isEdit = ref<boolean>(false);
-    .get(config.API.province)
+const formDataRisk = reactive<FormRisk>({
-    .then((res) => {
-      const data = res.data.result;
-
-      provinceOp.value = data.map((item: DataOption) => ({
-        id: item.id,
-        name: item.name,
-      }));
-      provinceOpMain.value = provinceOp.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/** ตัวแปร */
-const formData = reactive<FormData>({
-  dateStart: null, //วันที่เริ่มต้น
-  dateEnd: null, //วันที่สิ้นสุด
-  totalDate: null, //รวมระยะเวลา (วัน)
-  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
-  budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
-  budgetSub: "",
-  accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
-  receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
-  approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
-  budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
   issues: "", //ประเด็นความเสี่ยง
   chance: null, //โอกาสที่จะเกิด
   effects: null, //ผลกระทบจากการเกิด
   riskLevel: "", //ระดับความเสี่ยง
   riskManagement: "", //เเนวทางการบริหารความเสี่ยง
-  expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
-  topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
-  addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
-  provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
 });
 
-/** ดึงข้อมูล */
+const expect = ref<string>(""); //ประโยชน์ที่คาดว่าจะได้รับ
+
+/**
+ * ดึงข้อมูล ความเสี่ยงประโยชน์ที่คาดว่าจะได้รับ
+ */
 function fetchData() {
   http
-    .get(config.API.developmentMainTab("tab5", projectId.value))
+    .get(config.API.developmentMainTab("tab8", projectId.value))
     .then((res) => {
       const data = res.data.result;
-      formData.dateStart = data.dateStart;
+      rows.value = data.developmentRisks;
-      formData.dateEnd = data.dateEnd;
+      expect.value = data.expect;
-      formData.totalDate = data.totalDate;
-      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
-        address: e.address,
-        provinceId: e.provinceId,
-      }));
-      formData.budget = data.budget;
-      formData.budgetSub = data.budgetSub;
-      formData.accept = data.accept;
-      formData.receive = data.receive;
-      formData.approved = data.approved;
-      formData.budgetPay = data.budgetPay;
-      formData.issues = data.issues;
-      formData.chance = Number(data.chance);
-      formData.effects = Number(data.effects);
-      formData.riskLevel = data.riskLevel;
-      formData.riskManagement = data.riskManagement;
-      formData.expect = data.expect;
-      formData.topicAcademic = data.topicAcademic;
-      formData.addressAcademic = data.addressAcademic;
-      formData.provinceActualId = data.provinceActualId;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
 }
 
-/** ฟังชั่นเคลียค่าวันสิ้นสุดเมื่อวันสิ้นสุดมากกว่าวันเริ่ม */
-function changeDateStart() {
-  if (formData.dateStart !== null && formData.dateEnd !== null) {
-    const startDate = new Date(formData.dateStart);
-    const endDate = new Date(formData.dateEnd);
-    if (startDate > endDate) {
-      formData.dateEnd = null;
-      formData.totalDate = null;
-    } else {
-      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
-    }
-  }
-}
-
-/** ฟังชั่น เก็บค่า ระยะกี่วันจากวันเริ่ม */
-function changeDateEnd() {
-  formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
-}
-
 /**
- * Fuction Filter จังหวัด
+ * ระดับความเสี่ยงของโครงการ option
- * @param val ค่าตัวพิมพ์ค้นหา
- * @param update ทุกครั้งที่พิมพ์ค่า
  */
-const filterSelector = (val: string, update: Function) => {
+function calRiskLevel() {
-  update(() => {
+  if (formDataRisk.chance && formDataRisk.effects) {
-    provinceOp.value = provinceOpMain.value.filter(
-      (v: DataOption) => v.name.indexOf(val) > -1
-    );
-  });
-};
-
-/** ระดับความเสี่ยงของโครงการ option */
-async function calRiskLevel() {
-  if (formData.chance && formData.effects) {
     const riskLevel =
-      (await Number(formData.chance)) * Number(formData.effects);
+      Number(formDataRisk.chance) * Number(formDataRisk.effects);
-    formData.riskLevel =
+    formDataRisk.riskLevel =
       riskLevel == 1
         ? "น้อยมาก"
         : riskLevel == 2
@@ -201,146 +164,235 @@ async function calRiskLevel() {
   }
 }
 
-/** เพิ่มข้อมูล */
+/**
-function onClickAddLocation() {
+ * บันทึกข้อมูลประโยชน์ที่คาดว่าจะได้รับ
-  const data = {
+ */
-    address: "",
-    provinceId: "",
-  };
-  formData.developmentAddresss.push(data);
-}
-
-/** ลบข้อมูล */
-function onClickDeleteLocation(index: number) {
-  formData.developmentAddresss.splice(index, 1);
-}
-
-/** บันทึกข้อมูล */
 function onSubmit() {
-  // dialogConfirm($q, async () => {
   showLoader();
-  formData.totalDate = Number(formData.totalDate);
-  formData.accept =
-    typeof formData.accept === "string"
-      ? Number(formData.accept.replace(/,/g, ""))
-      : formData.accept;
-  formData.receive =
-    typeof formData.receive === "string"
-      ? Number(formData.receive.replace(/,/g, ""))
-      : formData.receive;
-  formData.approved =
-    typeof formData.approved === "string"
-      ? Number(formData.approved.replace(/,/g, ""))
-      : formData.approved;
-  formData.budgetPay =
-    typeof formData.budgetPay === "string"
-      ? Number(formData.budgetPay.replace(/,/g, ""))
-      : formData.budgetPay;
-
   http
-    .put(config.API.developmentMainTab("tab5", projectId.value), formData)
+    .put(config.API.developmentMainTab("tab8", projectId.value), {
-    .then(() => {
+      expect: expect.value,
-      // fetchData();
-      // success($q, "บันทึกข้อมูลสำเร็จ");
-      step.value == "next" ? props.nextStep() : props.prevStep();
     })
+    .then(() => {})
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
-  // });
 }
 
-/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
+/**
+ * เพิ่มความเสี่ยงของโครงการ
+ * @param status เพิ่ม,แก่ไข
+ * @param data ข้อมูลความเสี่ยงของโครงการ
+ */
+function onClickAddRisk(status: boolean = false, data: ResRisk | null = null) {
+  modalRisk.value = true;
+  isEdit.value = status;
+  if (data) {
+    riskId.value = data.id;
+    formDataRisk.issues = data.issues; //ประเด็นความเสี่ยง
+    formDataRisk.chance = data.chance; //โอกาสที่จะเกิด
+    formDataRisk.effects = data.effects; //ผลกระทบจากการเกิด
+    formDataRisk.riskLevel = data.riskLevel; //ระดับความเสี่ยง
+    formDataRisk.riskManagement = data.riskManagement; //เเนวทางการบริหารความเสี่ยง
+  }
+}
+
+/**
+ * ปืด popup ข้อมูลความเสี่ยงของโครงการ
+ */
+function onCloseDialog() {
+  modalRisk.value = false;
+  formDataRisk.issues = "";
+  formDataRisk.chance = null;
+  formDataRisk.effects = null;
+  formDataRisk.riskLevel = "";
+  formDataRisk.riskManagement = "";
+}
+
+/**
+ * ยืนยันการบันทึกข้อมูลความเสี่ยงของโครงการ
+ */
+function onSubmitRisk() {
+  const id = isEdit.value ? riskId.value : projectId.value;
+  const path = isEdit.value ? "tab8_1_edit" : "tab8_1_add";
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.developmentMainTab(path, id), formDataRisk)
+      .then(() => {
+        fetchData();
+        onCloseDialog();
+        success($q, "เพิ่มข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
+
+/**
+ *  ยืนยันการลบข้อมูลความเสี่ยงของโครงการ
+ * @param id  ความเสี่ยงของโครงการ
+ */
+function onDeleteRisk(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.developmentMainTab("tab8_1", id))
+      .then(() => {
+        fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function ไปยัง Tab ค่อไป
+ */
+function onNextTab() {
+  step.value == "next" ? props.nextStep() : props.prevStep();
+}
+
+/**
+ * ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์
+ */
 onMounted(() => {
   fetchData();
-  getProvince();
+});
+
+/**
+ * เรียก function ไปใช่หน้าหลัก
+ */
+defineExpose({
+  onSubmit,
 });
 </script>
 
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+  <q-form greedy @submit.prevent @validation-success="onNextTab">
-    <div class="row q-pa-md q-col-gutter-sm">
+    <div class="q-pa-sm">
-      <div class="col-12">
+      <!-- ความเสี่ยงของโครงการ -->
-        <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
+      <q-card bordered class="col-12 q-my-sm">
-      </div>
+        <div
+          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        >
+          ความเสี่ยงของโครงการ
+          <q-btn
+            flat
+            round
+            color="primary"
+            icon="add"
+            @click="onClickAddRisk()"
+          >
+            <q-tooltip>เพิ่มข้มมูล</q-tooltip>
+          </q-btn>
+        </div>
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                :paging="true"
+                row-key="id"
+                flat
+                bordered
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width />
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props">
+                    <q-td>
+                      <q-btn
+                        v-if="!checkRoutePermission"
+                        dense
+                        flat
+                        round
+                        color="edit"
+                        icon="edit"
+                        @click="onClickAddRisk(true, props.row)"
+                      >
+                        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                      </q-btn>
+                      <q-btn
+                        v-if="!checkRoutePermission"
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="delete"
+                        @click="onDeleteRisk(props.row.id)"
+                      >
+                        <q-tooltip>ลบ</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
 
-      <div class="col-12">
+      <!-- ประโยชน์ที่คาดว่าจะได้รับ -->
-        <q-input
+      <q-card bordered class="col-12 q-my-sm q-mt-md">
-          outlined
+        <div
-          :readonly="checkRoutePermission"
+          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-          dense
-          class="inputgreen"
-          v-model="formData.issues"
-          label="ประเด็นความเสี่ยง"
-          type="textarea"
-        />
-      </div>
-      <div class="col-3">
-        <q-select
-          outlined
-          dense
-          class="inputgreen"
-          :readonly="checkRoutePermission"
-          v-model="formData.chance"
-          label="โอกาสที่จะเกิด"
-          :options="[1, 2, 3, 4]"
-          @update:model-value="calRiskLevel"
-        ></q-select>
-      </div>
-      <div class="col-3">
-        <q-select
-          :readonly="checkRoutePermission"
-          outlined
-          dense
-          class="inputgreen"
-          v-model="formData.effects"
-          label="ผลกระทบจากการเกิด"
-          :options="[1, 2, 3, 4]"
-          @update:model-value="calRiskLevel"
         >
-        </q-select>
+          ประโยชน์ที่คาดว่าจะได้รับ
-      </div>
+        </div>
-      <div class="col-6">
+        <q-separator />
-        <q-input
+        <q-card-section>
-          readonly
+          <div class="row col-12 q-col-gutter-sm">
-          outlined
+            <div class="col-12">
-          dense
+              <q-input
-          class="inputgreen"
+                outlined
-          v-model="formData.riskLevel"
+                :readonly="checkRoutePermission"
-          label="ระดับความเสี่ยง"
+                dense
-        />
+                class="inputgreen"
-      </div>
+                v-model="expect"
-      <div class="col-12">
+                label="ประโยชน์ที่คาดว่าจะได้รับ"
-        <q-input
+                type="textarea"
-          outlined
+                @update:model-value="props.onCheckChangeData()"
-          :readonly="checkRoutePermission"
+              />
-          dense
+            </div>
-          class="inputgreen"
+          </div>
-          v-model="formData.riskManagement"
+        </q-card-section>
-          label="เเนวทางการบริหารความเสี่ยง"
+      </q-card>
-          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
-          :readonly="checkRoutePermission"
-          dense
-          class="inputgreen"
-          v-model="formData.expect"
-          label="ประโยชน์ที่คาดว่าจะได้รับ"
-          type="textarea"
-        />
-      </div>
     </div>
+
     <q-separator />
     <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
@@ -369,6 +421,108 @@ onMounted(() => {
       </q-btn>
     </div>
   </q-form>
+
+  <q-dialog v-model="modalRisk" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmitRisk">
+        <DialogHeader
+          :tittle="
+            isEdit ? 'แก้ไขความเสี่ยงของโครงการ' : 'เพิ่มความเสี่ยงของโครงการ'
+          "
+          :close="onCloseDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                outlined
+                :readonly="checkRoutePermission"
+                dense
+                class="inputgreen"
+                v-model="formDataRisk.issues"
+                label="ประเด็นความเสี่ยง"
+                type="textarea"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณากรอกประเด็นความเสี่ยง'}`,
+      
+                ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-select
+                outlined
+                dense
+                class="inputgreen"
+                :readonly="checkRoutePermission"
+                v-model="formDataRisk.chance"
+                label="โอกาสที่จะเกิด"
+                :options="[1, 2, 3, 4]"
+                @update:model-value="calRiskLevel"
+                lazy-rules
+                hide-bottom-space
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณาเลือกโอกาสที่จะเกิด'}`,
+      
+                ]"
+              ></q-select>
+            </div>
+            <div class="col-3">
+              <q-select
+                :readonly="checkRoutePermission"
+                outlined
+                dense
+                class="inputgreen"
+                v-model="formDataRisk.effects"
+                hide-bottom-space
+                label="ผลกระทบจากการเกิด"
+                :options="[1, 2, 3, 4]"
+                @update:model-value="calRiskLevel"
+                lazy-rules
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณาเลือกผลกระทบจากการเกิด'}`,
+      
+                ]"
+              >
+              </q-select>
+            </div>
+            <div class="col-6">
+              <q-input
+                readonly
+                outlined
+                dense
+                class="formDataRisk"
+                v-model="formDataRisk.riskLevel"
+                label="ระดับความเสี่ยง"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                :readonly="checkRoutePermission"
+                dense
+                class="inputgreen"
+                v-model="formDataRisk.riskManagement"
+                label="เเนวทางการบริหารความเสี่ยง"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" type="submit" color="public"> </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

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

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
+
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 import type {
@@ -19,27 +22,45 @@ import type {
   ResActualGoals,
 } from "@/modules/15_development/interface/response/Main";
 
+/**
+ * importComponents
+ */
 import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
-const $q = useQuasar();
+const { showLoader, hideLoader, messageError, success, dialogConfirm } =
-const mixin = useCounterMixin();
+  useCounterMixin();
-const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
+
-const checkRoutePermission = ref<boolean>(
+/**
-  route.name == "developmentDetailPage"
+ * props
-);
+ */
 const props = defineProps({
   prevStep: { type: Function, required: true },
   nextStep: { type: Function, required: true },
 });
+
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
+
 const plannedGoals = ref<ResPlannedGoals[]>([]);
 const plannedPeoples = ref<ResPeople[]>([]);
 const actualGoals = ref<ResActualGoals[]>([]);
 const actualPeoples = ref<ResPeople[]>([]);
 
-const groupTargetData: any = reactive({
+const groupTargetData = reactive({
   targetData: [{}],
 });
 
@@ -484,7 +505,7 @@ onMounted(() => {
 <template>
   <!-- CARD เป้าหมายตามแผน -->
   <q-card bordered style="border: 1px solid #d6dee1">
-    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
       เป้าหมายตามแผน
       <q-btn
         v-if="store.projectStatus !== 'FINISH' && !checkRoutePermission"

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

@@ -87,6 +87,10 @@ interface FormProjectDetail {
   strategyChildPlannedNode: number | null; //node ยุทธศาสตร์เป้าหมายตามแผน
   strategyChildActualId?: string | null; //id ยุทธศาสตร์เป้าหมายตามจริง
   strategyChildActualNode: number | null; //node ยุทธศาสตร์เป้าหมายตามจริง
+  dateStart: Date | null; //วันที่เริ่มต้น
+  dateEnd: Date | null; //วันที่สิ้นสุด
+  totalDate: number | null; //รวมระยะเวลา (วัน)
+  developmentAddresss: [{ address: string; provinceId: string }]; //ที่อยู่ ,จังหวัด
 }
 
 interface DataHistory {

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

@@ -7,6 +7,7 @@ interface FormIndicators {
   results: string;
   obstacles: string;
   suggestions: string;
+  result: string;
 }
 
 interface FormProject {

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

@@ -240,6 +240,23 @@ interface FormProject {
   orgRevisionId: string | null;
 }
 
+interface FormBudget {
+  budget: string;
+  budgetSub: string;
+  accept: number | string | null; //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  receive: number | string | null; //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  approved: number | string | null; //จํานวนงบประมาณที่ได้รับอนุมัติ
+  budgetPay: number | string | null; //จํานวนงบประมาณที่จ่ายจริง
+}
+
+interface FormRisk {
+  issues: string; //ประเด็นความเสี่ยง
+  chance: null | number; //โอกาสที่จะเกิด
+  effects: null | number; //ผลกระทบจากการเกิด
+  riskLevel: string; //ระดับความเสี่ยง
+  riskManagement: string; //เเนวทางการบริหารความเสี่ยง
+}
+
 export type {
   FormQueryListProject,
   FormAddProject,
@@ -253,4 +270,6 @@ export type {
   FormAddHistoryEmployee,
   FormGroupTargetPlannedGoal,
   FormProject,
+  FormBudget,
+  FormRisk,
 };

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

@@ -1,23 +1,18 @@
 interface FormData {
-  dateStart: Date | null; //วันที่เริ่มต้น
+  isBudget: boolean;
-  dateEnd: Date | null; //วันที่สิ้นสุด
+  isNoPass: boolean;
-  totalDate: number | null; //รวมระยะเวลา (วัน)
+  isOutBudget: boolean;
-  developmentAddresss: [{ address: string; provinceId: string }]; //ที่อยู่ ,จังหวัด
+  isPassAllocate: boolean;
-  budget: string; //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+  isPassNoAllocate: boolean;
-  budgetSub: string;
+  project: string;
-  accept: number | string | null; //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  obstacle: string;
-  receive: number | string | null; //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  suggestion: string;
-  approved: number | string | null; //จํานวนงบประมาณที่ได้รับอนุมัติ
+}
-  budgetPay: number | string | null; //จํานวนงบประมาณที่จ่ายจริง
+
-  issues: string; //ประเด็นความเสี่ยง
+interface FormAcademic {
-  chance: number | null; //โอกาสที่จะเกิด
+  topicAcademic: string;
-  effects: number | null; //ผลกระทบจากการเกิด
+  addressAcademic: string;
-  riskLevel: string; //ระดับความเสี่ยง
-  riskManagement: string; //เเนวทางการบริหารความเสี่ยง
-  expect: string; //ประโยชน์ที่คาดว่าจะได้รับ
-  topicAcademic: string; //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
-  addressAcademic: string; //สถานที่ฝึกอบรม ศึกษาดูงาน
   provinceActualId: string;
 }
 
-export type { FormData };
+export type { FormData, FormAcademic };

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

@@ -188,6 +188,22 @@ interface ResPrefix {
   name: string;
 }
 
+interface ResRisk {
+  chance: number;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  developmentId: string;
+  effects: number;
+  id: string;
+  issues: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  riskLevel: string;
+  riskManagement: string;
+}
+
 export type {
   ResGroup,
   ResLevel,
@@ -201,4 +217,5 @@ export type {
   DataTree,
   ResHistory,
   ResPrefix,
+  ResRisk,
 };