updated develop form

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

@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+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";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  showLoader,
+  hideLoader,
+  diffDay,
+  date2Thai,
+  messageError,
+  dialogConfirm,
+  success,
+} = useCounterMixin();
+const route = useRoute();
+const projectId = ref<string>(route.params.id.toLocaleString());
+const status = defineModel<string>("status", { required: true });
+
+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",
+    name: "งบตามข้อบัญญัติ",
+  },
+  {
+    id: "OUTSIDEBUDGET",
+    name: "เงินนอกงบประมาณ",
+  },
+  {
+    id: "BANGKOKBUDGET",
+    name: "ไม่ใช้งบประมาณ",
+  },
+]);
+const budgetSubOp = ref<DataOption[]>([
+  {
+    id: "MAINTENANCE",
+    name: "เงินบำรุง",
+  },
+  {
+    id: "FUND",
+    name: "เงินกองทุน",
+  },
+  {
+    id: "SUBSIDY",
+    name: "เงินอุดหนุน",
+  },
+]);
+
+/** ดึงข้อมูล จังหวัด */
+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>({
+  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: "", //จังหวัด(ข้อมูลวิชาการ)
+});
+
+/** ดึงข้อมูล */
+function fetchData() {
+  http
+    .get(config.API.developmentMainTab("tab5", 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();
+    });
+}
+
+/** ฟังชั่นเคลียค่าวันสิ้นสุดเมื่อวันสิ้นสุดมากกว่าวันเริ่ม */
+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, ""))
+      : 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)
+    .then(() => {
+      // fetchData();
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+      step.value == "next" ? props.nextStep() : props.prevStep();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // });
+}
+
+/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
+onMounted(() => {
+  fetchData();
+  getProvince();
+});
+</script>
+
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <div class="row q-pa-md q-col-gutter-sm">
+      <div class="col-3">
+        <q-select
+          :readonly="checkRoutePermission"
+          outlined
+          dense
+          v-model="formData.budget"
+          label="ประเภทงบประมาณ"
+          :options="budgetOp"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          class="inputgreen"
+        />
+      </div>
+      <div class="col-2">
+        <q-select
+          v-if="formData.budget === 'OUTSIDEBUDGET'"
+          outlined
+          dense
+          :readonly="checkRoutePermission"
+          v-model="formData.budgetSub"
+          label="ประเภทย่อย"
+          :options="budgetSubOp"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          class="inputgreen"
+        />
+      </div>
+      <div class="col-12">
+        <div class="row q-col-gutter-x-sm">
+          <div class="col-3">
+            <q-input
+              outlined
+              :readonly="checkRoutePermission"
+              dense
+              class="inputgreen"
+              v-model="formData.accept"
+              label="จํานวนงบประมาณที่ขอรับการจัดสรร ฯ"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              outlined
+              :readonly="checkRoutePermission"
+              dense
+              class="inputgreen"
+              v-model="formData.receive"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+              label="จํานวนงบประมาณที่ได้รับการจัดสรร ฯ"
+            />
+          </div>
+          <div v-if="status == 'FINISH'" class="col-3">
+            <q-input
+              outlined
+              :readonly="checkRoutePermission"
+              dense
+              class="inputgreen"
+              v-model="formData.approved"
+              hide-bottom-space
+              mask="###,###,###,###,###"
+              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
+              reverse-fill-mask
+            />
+          </div>
+          <div v-if="status == 'FINISH'" class="col-3">
+            <q-input
+              outlined
+              :readonly="checkRoutePermission"
+              dense
+              class="inputgreen"
+              v-model="formData.budgetPay"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+              label="จํานวนงบประมาณที่จ่ายจริง"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-separator />
+    <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-form>
+</template>
+
+<style scoped></style>

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

@@ -197,7 +197,10 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader :tittle="'เพิ่มรายชื่อ'" :close="onCloseDialog" />
+        <DialogHeader
+          :tittle="'เพิ่มรายชื่อผู้ผ่านการอบรม'"
+          :close="onCloseDialog"
+        />
         <q-separator />
         <q-card-section>
           <div class="row q-col-gutter-md">

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

@@ -54,6 +54,12 @@ 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"]>([
@@ -248,29 +254,30 @@ function onClickDeleteIndicator(id: string) {
 
 /** save Main data */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  // dialogConfirm($q, () => {
-    if (formProject.project === "NOOFFER") {
+  if (formProject.project === "NOOFFER") {
-      formProject.isNoPass = false;
+    formProject.isNoPass = false;
-      formProject.isPassAllocate = false;
+    formProject.isPassAllocate = false;
-      formProject.isPassNoAllocate = false;
+    formProject.isPassNoAllocate = false;
-    } else {
+  } else {
-      formProject.isBudget = false;
+    formProject.isBudget = false;
-      formProject.isOutBudget = false;
+    formProject.isOutBudget = false;
-    }
+  }
-    showLoader();
+  showLoader();
-    http
+  http
-      .put(config.API.developmentMainTab("tab4", projectId.value), formProject)
+    .put(config.API.developmentMainTab("tab4", projectId.value), formProject)
-      .then(() => {
+    .then(() => {
-        fetchData();
+      // fetchData();
-        success($q, "บันทึกข้อมูลสำเร็จ");
+      // success($q, "บันทึกข้อมูลสำเร็จ");
-      })
+      step.value == "next" ? props.nextStep() : props.prevStep();
-      .catch((err) => {
+    })
-        messageError($q, err);
+    .catch((err) => {
-      })
+      messageError($q, err);
-      .finally(() => {
+    })
-        hideLoader();
+    .finally(() => {
-      });
+      hideLoader();
-  });
+    });
+  // });
 }
 
 /** fetchData in page  */
@@ -424,19 +431,34 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <q-separator v-if="!checkRoutePermission" />
+      <q-separator />
-      <q-card-actions align="right">
+      <q-card-actions align="center">
-        <q-btn
+        <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
-          v-if="!checkRoutePermission"
+          <q-btn
-          unelevated
+            rounded
-          label="บันทึก"
+            label="ก่อนหน้า"
-          id="onSubmit"
+            icon="mdi-chevron-left"
-          type="submit"
+            id="onSubmit"
-          color="public"
+            type="submit"
-          class="q-px-md"
+            color="public"
-        >
+            class="q-mr-xs"
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+            style="width: 120px"
-        </q-btn>
+            @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>

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

@@ -16,6 +16,8 @@ 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();
@@ -25,12 +27,36 @@ const store = useDevelopmentDataStore();
 const { success, showLoader, hideLoader, messageError, dialogConfirm } =
   useCounterMixin();
 
-const checkRoutePermission = ref<boolean>(route.name == 'developmentDetailPage')
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 const projectId = ref<string>(route.params.id.toLocaleString());
 const tab = ref<string>("BasicInfo");
 const status = ref<string>("ONGOING");
+const step = ref<string[]>([
+  "BasicInfo",
+  "Target",
+  "ProjectDetail",
+  "Budget",
+  "Risk",
+  "FollowResult",
+  "Other",
+  "Result",
+]);
 
+function prevStep() {
+  const index = step.value.indexOf(tab.value);
+  if (index > 0) {
+    tab.value = step.value[index - 1];
+  }
+}
+function nextStep() {
+  const index = step.value.indexOf(tab.value);
+  if (index < step.value.length - 1) {
+    tab.value = step.value[index + 1];
+  }
+}
 /**
  * function fetch สถานะ Project
  * @param id projectId
@@ -91,7 +117,11 @@ onMounted(() => {
       color="primary"
       @click="router.push('/development')"
     />
-    {{ checkRoutePermission ? 'รายละเอียดโครงการ/หลักสูตรการฝึกอบรม':`${title}โครงการ/หลักสูตรการฝึกอบรม` }}
+    {{
+      checkRoutePermission
+        ? "รายละเอียดโครงการ/หลักสูตรการฝึกอบรม"
+        : `${title}โครงการ/หลักสูตรการฝึกอบรม`
+    }}
     <q-space />
     <div v-if="!checkRoutePermission"></div>
     <q-btn
@@ -103,7 +133,11 @@ onMounted(() => {
     >
       <q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
     </q-btn>
-    <q-badge v-else-if="status !== 'ONGOING' || !checkRoutePermission" outline color="primary" class="q-px-sm q-py-xs"
+    <q-badge
+      v-else-if="status !== 'ONGOING' || !checkRoutePermission"
+      outline
+      color="primary"
+      class="q-px-sm q-py-xs"
       >เสร็จสิ้นโครงการ</q-badge
     >
   </div>
@@ -122,23 +156,44 @@ onMounted(() => {
       <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
       <q-tab name="Target" label="เป้าหมาย" />
       <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
+      <q-tab name="Budget" label="งบประมาณ" />
+      <q-tab name="Risk" label="ความเสี่ยงและประโยชน์ที่จะได้รับ" />
       <q-tab name="FollowResult" label="การติดตามประเมินผล" />
       <q-tab name="Other" label="อื่นๆ" />
+      <!-- v-if="status !== 'ONGOING'" -->
       <!-- <q-tab name="Record" label="บันทึกผล" /> -->
     </q-tabs>
     <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 />
+          <BasicInfo :next-step="nextStep" />
         </q-tab-panel>
-        <q-tab-panel name="Target"> <Target /></q-tab-panel>
+        <q-tab-panel name="Target">
+          <Target :prev-step="prevStep" :next-step="nextStep"
+        /></q-tab-panel>
         <q-tab-panel name="ProjectDetail" style="padding: 0px">
-          <ProjectDetail />
+          <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"
+          />
+        </q-tab-panel>
+        <q-tab-panel name="Risk" style="padding: 0px">
+          <Risk :status="status" :prev-step="prevStep" :next-step="nextStep" />
+        </q-tab-panel>
+        <q-tab-panel name="FollowResult">
+          <FollowResult
+            :status="status"
+            :prev-step="prevStep"
+            :next-step="nextStep"
+          />
         </q-tab-panel>
-        <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
         <q-tab-panel name="Other" style="padding: 0px">
-          <Other :status="status" />
+          <Other :status="status" :prev-step="prevStep" />
         </q-tab-panel>
         <!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
       </q-tab-panels>

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

@@ -25,6 +25,10 @@ const projectId = ref<string>(route.params.id.toLocaleString());
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+});
+
 const status = defineModel<string>("status", { required: true });
 const provinceOp = ref<DataOption[]>([]);
 const provinceOpMain = ref<DataOption[]>([]);
@@ -211,39 +215,40 @@ function onClickDeleteLocation(index: number) {
 
 /** บันทึกข้อมูล */
 function onSubmit() {
-  dialogConfirm($q, async () => {
+  // dialogConfirm($q, async () => {
-    showLoader();
+  showLoader();
-    formData.totalDate = Number(formData.totalDate);
+  formData.totalDate = Number(formData.totalDate);
-    formData.accept =
+  formData.accept =
-      typeof formData.accept === "string"
+    typeof formData.accept === "string"
-        ? Number(formData.accept.replace(/,/g, ""))
+      ? Number(formData.accept.replace(/,/g, ""))
-        : formData.accept;
+      : formData.accept;
-    formData.receive =
+  formData.receive =
-      typeof formData.receive === "string"
+    typeof formData.receive === "string"
-        ? Number(formData.receive.replace(/,/g, ""))
+      ? Number(formData.receive.replace(/,/g, ""))
-        : formData.receive;
+      : formData.receive;
-    formData.approved =
+  formData.approved =
-      typeof formData.approved === "string"
+    typeof formData.approved === "string"
-        ? Number(formData.approved.replace(/,/g, ""))
+      ? Number(formData.approved.replace(/,/g, ""))
-        : formData.approved;
+      : formData.approved;
-    formData.budgetPay =
+  formData.budgetPay =
-      typeof formData.budgetPay === "string"
+    typeof formData.budgetPay === "string"
-        ? Number(formData.budgetPay.replace(/,/g, ""))
+      ? Number(formData.budgetPay.replace(/,/g, ""))
-        : formData.budgetPay;
+      : formData.budgetPay;
 
-    http
+  http
-      .put(config.API.developmentMainTab("tab5", projectId.value), formData)
+    .put(config.API.developmentMainTab("tab5", projectId.value), formData)
-      .then(() => {
+    .then(() => {
-        fetchData();
+      // fetchData();
-        success($q, "บันทึกข้อมูลสำเร็จ");
+      // success($q, "บันทึกข้อมูลสำเร็จ");
-      })
+      props.prevStep();
-      .catch((err) => {
+    })
-        messageError($q, err);
+    .catch((err) => {
-      })
+      messageError($q, err);
-      .finally(() => {
+    })
-        hideLoader();
+    .finally(() => {
-      });
+      hideLoader();
-  });
+    });
+  // });
 }
 
 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
@@ -423,7 +428,7 @@ onMounted(() => {
       </div>
       <div class="col-4">
         <q-select
-        :readonly="checkRoutePermission"
+          :readonly="checkRoutePermission"
           outlined
           dense
           v-model="formData.budget"
@@ -534,7 +539,7 @@ onMounted(() => {
       </div>
       <div class="col-3">
         <q-select
-        :readonly="checkRoutePermission"
+          :readonly="checkRoutePermission"
           outlined
           dense
           class="inputgreen"
@@ -631,17 +636,30 @@ onMounted(() => {
         >
       </div>
     </div>
-    <q-separator v-if="!checkRoutePermission"/>
+    <q-separator />
-    <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
+    <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
-        unelevated
+        rounded
-        label="บันทึก"
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
         id="onSubmit"
         type="submit"
         color="public"
-        class="q-px-md"
+        class="q-mr-xs"
+        style="width: 120px"
+      >
+      </q-btn>
+      <q-btn
+        disabled
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
       >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
     </div>
   </q-form>

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

@@ -16,6 +16,11 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+});
+const step = ref<string>("");
 const reasonPlanned70 = ref<string>("");
 const reasonPlanned20 = ref<string>("");
 const reasonPlanned10 = ref<string>("");
@@ -267,50 +272,51 @@ function fetchTree() {
 
 /** Main save */
 async function onSubmit() {
-  dialogConfirm($q, async () => {
+  // dialogConfirm($q, async () => {
-    showLoader();
+  showLoader();
-    await http
+  await http
-      .put(config.API.developmentMainTab("tab3", projectId.value), {
+    .put(config.API.developmentMainTab("tab3", projectId.value), {
-        developmentProjectTypes: formData.developmentProjectTypes,
+      developmentProjectTypes: formData.developmentProjectTypes,
-        projectModal: formData.projectModal,
+      projectModal: formData.projectModal,
-        isBackPlanned: formData.isBackPlanned,
+      isBackPlanned: formData.isBackPlanned,
-        isHoldPlanned: formData.isHoldPlanned,
+      isHoldPlanned: formData.isHoldPlanned,
-        projectDayBackPlanned: formData.isBackPlanned
+      projectDayBackPlanned: formData.isBackPlanned
-          ? formData.projectDayBackPlanned
+        ? formData.projectDayBackPlanned
-          : null,
+        : null,
-        projectDayHoldPlanned: formData.projectDayHoldPlanned,
+      projectDayHoldPlanned: formData.projectDayHoldPlanned,
-        projectNigthHoldPlanned: formData.projectNigthHoldPlanned,
+      projectNigthHoldPlanned: formData.projectNigthHoldPlanned,
-        developmentProjectTechniquePlanneds:
+      developmentProjectTechniquePlanneds:
-          formData.developmentProjectTechniquePlanneds,
+        formData.developmentProjectTechniquePlanneds,
-        isBackActual: formData.isBackActual,
+      isBackActual: formData.isBackActual,
-        isHoldActual: formData.isHoldActual,
+      isHoldActual: formData.isHoldActual,
-        projectDayBackActual: formData.projectDayBackActual,
+      projectDayBackActual: formData.projectDayBackActual,
-        projectDayHoldActual: formData.projectDayHoldActual,
+      projectDayHoldActual: formData.projectDayHoldActual,
-        projectNigthHoldActual: formData.projectNigthHoldActual,
+      projectNigthHoldActual: formData.projectNigthHoldActual,
-        developmentProjectTechniqueActuals:
+      developmentProjectTechniqueActuals:
-          formData.developmentProjectTechniqueActuals,
+        formData.developmentProjectTechniqueActuals,
-        projectModalActual: formData.projectModalActual,
+      projectModalActual: formData.projectModalActual,
-        projectModalPlanned: formData.projectModalPlanned,
+      projectModalPlanned: formData.projectModalPlanned,
-        strategyChildPlannedId: formData.strategyChildPlannedId,
+      strategyChildPlannedId: formData.strategyChildPlannedId,
-        strategyChildPlannedNode: formData.strategyChildPlannedNode,
+      strategyChildPlannedNode: formData.strategyChildPlannedNode,
-        strategyChildActualId: formData.strategyChildActualId,
+      strategyChildActualId: formData.strategyChildActualId,
-        strategyChildActualNode: formData.strategyChildActualNode,
+      strategyChildActualNode: formData.strategyChildActualNode,
-        reasonPlanned70: reasonPlanned70.value,
+      reasonPlanned70: reasonPlanned70.value,
-        reasonPlanned20: reasonPlanned20.value,
+      reasonPlanned20: reasonPlanned20.value,
-        reasonPlanned10: reasonPlanned10.value,
+      reasonPlanned10: reasonPlanned10.value,
-        reasonActual70: reasonActual70.value,
+      reasonActual70: reasonActual70.value,
-        reasonActual20: reasonActual20.value,
+      reasonActual20: reasonActual20.value,
-        reasonActual10: reasonActual10.value,
+      reasonActual10: reasonActual10.value,
-      })
+    })
-      .then(() => {
+    .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
+      // success($q, "บันทึกข้อมูลสำเร็จ");
-        fetchData();
+      // fetchData();
-      })
+      step.value == "next" ? props.nextStep() : props.prevStep();
-      .catch((err) => {
+    })
-        messageError($q, err);
+    .catch((err) => {
-        hideLoader();
+      messageError($q, err);
-      });
+      hideLoader();
-  });
+    });
+  // });
 }
 
 /**
@@ -874,7 +880,35 @@ onMounted(() => {
         </q-card-section>
       </q-card>
     </div>
-    <q-separator v-if="!checkRoutePermission" />
+
+    <q-separator />
+    <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 v-if="!checkRoutePermission" />
 
     <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
@@ -887,7 +921,7 @@ onMounted(() => {
       >
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
-    </div>
+    </div> -->
   </q-form>
 </template>
 

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

@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+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";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  showLoader,
+  hideLoader,
+  diffDay,
+  date2Thai,
+  messageError,
+  dialogConfirm,
+  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 provinceOp = ref<DataOption[]>([]);
+const provinceOpMain = ref<DataOption[]>([]);
+const budgetOp = ref<DataOption[]>([
+  {
+    id: "REGULATIONBUDGET",
+    name: "งบตามข้อบัญญัติ",
+  },
+  {
+    id: "OUTSIDEBUDGET",
+    name: "เงินนอกงบประมาณ",
+  },
+  {
+    id: "BANGKOKBUDGET",
+    name: "ไม่ใช้งบประมาณ",
+  },
+]);
+const budgetSubOp = ref<DataOption[]>([
+  {
+    id: "MAINTENANCE",
+    name: "เงินบำรุง",
+  },
+  {
+    id: "FUND",
+    name: "เงินกองทุน",
+  },
+  {
+    id: "SUBSIDY",
+    name: "เงินอุดหนุน",
+  },
+]);
+
+/** ดึงข้อมูล จังหวัด */
+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>({
+  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: "", //จังหวัด(ข้อมูลวิชาการ)
+});
+
+/** ดึงข้อมูล */
+function fetchData() {
+  http
+    .get(config.API.developmentMainTab("tab5", 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();
+    });
+}
+
+/** ฟังชั่นเคลียค่าวันสิ้นสุดเมื่อวันสิ้นสุดมากกว่าวันเริ่ม */
+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 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)
+    .then(() => {
+      // fetchData();
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+      step.value == "next" ? props.nextStep() : props.prevStep();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // });
+}
+
+/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
+onMounted(() => {
+  fetchData();
+  getProvince();
+});
+</script>
+
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <div class="row q-pa-md q-col-gutter-sm">
+      <div class="col-12">
+        <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
+      </div>
+
+      <div class="col-12">
+        <q-input
+          outlined
+          :readonly="checkRoutePermission"
+          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 class="col-6">
+        <q-input
+          readonly
+          outlined
+          dense
+          class="inputgreen"
+          v-model="formData.riskLevel"
+          label="ระดับความเสี่ยง"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          :readonly="checkRoutePermission"
+          dense
+          class="inputgreen"
+          v-model="formData.riskManagement"
+          label="เเนวทางการบริหารความเสี่ยง"
+          type="textarea"
+        />
+      </div>
+      <div class="col-12 q-mt-md">
+        <span class="text-weight-medium text-body1"
+          >ประโยชน์ที่คาดว่าจะได้รับ</span
+        >
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          :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
+        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-form>
+</template>
+
+<style scoped></style>

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

@@ -30,6 +30,10 @@ const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+});
 const plannedGoals = ref<ResPlannedGoals[]>([]);
 const plannedPeoples = ref<ResPeople[]>([]);
 const actualGoals = ref<ResActualGoals[]>([]);
@@ -802,7 +806,7 @@ onMounted(() => {
             <q-tr :props="props">
               <q-td>
                 <q-btn
-                v-if="!checkRoutePermission"
+                  v-if="!checkRoutePermission"
                   round
                   flat
                   color="primary"
@@ -834,6 +838,33 @@ onMounted(() => {
     </div>
   </q-card>
 
+  <q-card v-if="!checkRoutePermission" bordered>
+    <div class="text-center q-pa-sm">
+      <q-btn
+        rounded
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
+        id="onSubmit"
+        color="public"
+        class="q-mr-xs"
+        style="width: 120px"
+        @click="props.prevStep()"
+      >
+      </q-btn>
+      <q-btn
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
+        @click="props.nextStep()"
+      >
+      </q-btn>
+    </div>
+  </q-card>
+
   <q-dialog v-model="modalGroupTarget" persistent>
     <q-card style="width: 700px">
       <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
@@ -876,7 +907,12 @@ onMounted(() => {
                 v-model="formGroupTarget.groupTargetSub"
                 :options="
                   formGroupTarget.groupTarget === 'OFFICER'
-                    ? groupSubOp.slice(0, 2)
+                    ? groupSubOp.filter(
+                        (v) =>
+                          v.id === 'OFFICER' ||
+                          v.id === 'TEACHER' ||
+                          v.id === 'EDUCATIONAL'
+                      )
                     : groupSubOp.slice(2, 5)
                 "
                 label="กลุ่มเป้าหมายย่อย"
@@ -1051,7 +1087,12 @@ onMounted(() => {
                 v-model="formGroupTarget.groupTargetSub"
                 :options="
                   formGroupTarget.groupTarget === 'OFFICER'
-                    ? groupSubOp.slice(0, 2)
+                    ? groupSubOp.filter(
+                        (v) =>
+                          v.id === 'OFFICER' ||
+                          v.id === 'TEACHER' ||
+                          v.id === 'EDUCATIONAL'
+                      )
                     : groupSubOp.slice(2, 5)
                 "
                 label="กลุ่มเป้าหมายย่อย"

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

@@ -572,7 +572,7 @@ onMounted(() => {
                     icon="mdi-content-save-edit-outline"
                     @click.pervent="onRedirectToRecordPage(props.row.id)"
                   >
-                    <q-tooltip>บันทึกผล</q-tooltip></q-btn
+                    <q-tooltip>บันทึกผู้ผ่านการอบรม</q-tooltip></q-btn
                   >
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">

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

@@ -161,7 +161,7 @@ onMounted(() => {
       color="primary"
       @click="router.go(-1)"
     />
-    {{ `บันทึกผล${title}` }}
+    {{ `บันทึกผู้ผ่านการอบรม ${title}` }}
   </div>
   <q-card flat bordered>
     <q-toolbar class="q-pa-md">
@@ -220,7 +220,7 @@ onMounted(() => {
         color="primary"
         @click="modalAddPerson = true"
       >
-        <q-tooltip>เพิ่ม</q-tooltip>
+        <q-tooltip>เพิ่มรายชื่อผู้ผ่านการอบรม</q-tooltip>
       </q-btn>
     </q-toolbar>
   </q-card>