hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-08-08 11:53:58 +07:00
parent 41a0d80b64
commit 20e99fe23b
13 changed files with 1791 additions and 1319 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/modules/15_development/components/BasicInfo.vue
View file

@ -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, "บันทึกข้อมูลสำเร็จ");
props.nextStep();
isChangeData.value = false;
})
.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>

204
src/modules/15_development/components/Budget.vue
View file

@ -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 {
showLoader,
hideLoader,
diffDay,
date2Thai,
messageError,
dialogConfirm,
success,
} = useCounterMixin();
const { showLoader, hideLoader, messageError } = 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>({
dateStart: null, //วันที่เริ่มต้น
dateEnd: null, //วันที่สิ้นสุด
totalDate: null, //รวมระยะเวลา (วัน)
developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
const formData = reactive<FormBudget>({
budget: "",
budgetSub: "",
accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
issues: "", //ประเด็นความเสี่ยง
chance: null, //โอกาสที่จะเกิด
effects: null, //ผลกระทบจากการเกิด
riskLevel: "", //ระดับความเสี่ยง
riskManagement: "", //เเนวทางการบริหารความเสี่ยง
expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
accept: null,
receive: null,
approved: null,
budgetPay: null,
});
/** ดึงข้อมูล */
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)
.then(() => {
// fetchData();
// success($q, "บันทึกข้อมูลสำเร็จ");
step.value == "next" ? props.nextStep() : props.prevStep();
})
.put(config.API.developmentMainTab("tab7", projectId.value), formData)
.then(() => {})
.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>

591
src/modules/15_development/components/FollowResult.vue
View file

@ -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 {
FormIndicators,
FormProject,
} from "@/modules/15_development/interface/request/FollowResult";
import type { FormIndicators } 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: "",
});
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>("");
/** หัวตาราง */
/** ข้อมูล Table */
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: "โครงการที่เสนอขอ TN",
},
{
id: "NOOFFER",
name: "โครงการที่ไม่เสนอขอ TN",
name: "result",
align: "left",
label: "ผลการดำเนินการ",
sortable: true,
field: "result",
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;
formProject.isNoPass = data.isNoPass;
formProject.isOutBudget = data.isOutBudget;
formProject.isPassAllocate = data.isPassAllocate;
formProject.isPassNoAllocate = data.isPassNoAllocate;
formProject.project = data.project;
progressTracking.value = data.progressTracking;
projectEvaluation.value = data.projectEvaluation;
})
.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() {
// dialogConfirm($q, () => {
if (formProject.project === "NOOFFER") {
formProject.isNoPass = false;
formProject.isPassAllocate = false;
formProject.isPassNoAllocate = false;
} else {
formProject.isBudget = false;
formProject.isOutBudget = false;
}
showLoader();
http
.put(config.API.developmentMainTab("tab4", projectId.value), formProject)
.then(() => {
// fetchData();
// success($q, "บันทึกข้อมูลสำเร็จ");
step.value == "next" ? props.nextStep() : props.prevStep();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
// });
/**
* 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 = "";
}
/**
* function ไปยัง Tab ค่อไป
*/
function onNextTab() {
step.value == "next" ? props.nextStep() : props.prevStep();
}
/** fetchData in page */
onMounted(() => {
fetchData();
});
/**
* เรียก function ไปใช่หน้าหลัก
*/
defineExpose({
onSubmit,
});
</script>
<template>
<!--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">
ตัวชี้วัดความสำเร็จ
<q-btn
v-if="!checkRoutePermission"
dense
flat
round
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"
<q-form greedy @submit.prevent @validation-success="onNextTab">
<div class="q-pa-sm q-my-sm">
<q-card bordered style="border: 1px solid #d6dee1">
<div
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
>
ตัวชี้วัดความสำเร็จ
<q-btn
v-if="!checkRoutePermission"
dense
outlined
label="ประเภทโครงการ"
v-model="formProject.project"
:options="projectOp"
option-label="name"
option-value="id"
hide-bottom-space
map-options
emit-value
class="inputgreen"
/>
flat
round
color="primary"
icon="add"
@click="onClickAddIndicator()"
>
<q-tooltip>เพิ่มตัวชี้วัดความสำเร็จ</q-tooltip>
</q-btn>
</div>
<div v-if="formProject.project !== ''" class="col-12">
<div class="row" v-if="formProject.project == 'OFFER'">
<div class="col-12">
<q-checkbox
:disable="checkRoutePermission"
v-model="formProject.isPassAllocate"
label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
/>
</div>
<div class="col-12">
<q-checkbox
:disable="checkRoutePermission"
v-model="formProject.isPassNoAllocate"
label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/>
</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]"
>
<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 && 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-checkbox
:disable="checkRoutePermission"
v-model="formProject.isNoPass"
label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/>
</div>
</div>
<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>
<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>
<!-- การติดตามความก้าวหน้า -->
<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 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-card-actions>
</q-form>
</q-card>
</q-card-actions>
</q-form>
<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 || `${'กรุณากรอกค่าเป้าหมาย'}`,
]"
/>

117
src/modules/15_development/components/MainTab.vue
View file

@ -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" />
</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 :prev-step="prevStep" :next-step="nextStep" />
</q-tab-panel>
<q-tab-panel name="Budget" style="padding: 0px">
<Budget
:status="status"
:prev-step="prevStep"
<BasicInfo
ref="childBasicInfoRef"
: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>

975
src/modules/15_development/components/Other.vue
View file

File diff suppressed because it is too large Load diff

415
src/modules/15_development/components/ProjectDetail.vue
View file

@ -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() {
// dialogConfirm($q, async () => {
function onSubmit() {
showLoader();
await http
http
.put(config.API.developmentMainTab("tab3", projectId.value), {
developmentProjectTypes: formData.developmentProjectTypes,
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,
...formData,
reasonPlanned70: reasonPlanned70.value,
reasonPlanned20: reasonPlanned20.value,
reasonPlanned10: reasonPlanned10.value,
@ -307,16 +321,14 @@ async function onSubmit() {
reasonActual20: reasonActual20.value,
reasonActual10: reasonActual10.value,
})
.then(() => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// fetchData();
step.value == "next" ? props.nextStep() : props.prevStep();
})
.then(() => {})
.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
:readonly="checkRoutePermission"
dense
outlined
v-model="formData.developmentProjectTypes"
<div class="col-12 text-bold">ประเภทโครงการ</div>
<q-option-group
:disable="checkRoutePermission"
:options="projectTypeOp"
label="ประเภทโครงการ"
option-label="name"
option-value="id"
emit-value
map-options
multiple
class="inputgreen"
type="checkbox"
v-model="formData.developmentProjectTypes"
color="primary"
keep-color
@update:model-value="props.onCheckChangeData()"
/>
</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>

644
src/modules/15_development/components/Risk.vue
View file

@ -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[]>([]);
const budgetOp = ref<DataOption[]>([
/**
* ข้อมูล Table
*/
const rows = ref<ResRisk[]>([]);
const columns = ref<QTableProps["columns"]>([
{
id: "REGULATIONBUDGET",
name: "งบตามข้อบัญญัติ",
name: "issues",
align: "left",
label: "ประเด็นความเสี่ยง",
sortable: false,
field: "issues",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
id: "OUTSIDEBUDGET",
name: "เงินนอกงบประมาณ",
name: "chance",
align: "left",
label: "โอกาสที่จะเกิด",
sortable: false,
field: "chance",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
id: "BANGKOKBUDGET",
name: "ไม่ใช้งบประมาณ",
},
]);
const budgetSubOp = ref<DataOption[]>([
{
id: "MAINTENANCE",
name: "เงินบำรุง",
name: "effects",
align: "left",
label: "ผลกระทบจากการเกิด",
field: "effects",
sortable: false,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
id: "FUND",
name: "เงินกองทุน",
name: "riskLevel",
align: "left",
label: "ระดับความเสี่ยง",
sortable: false,
field: "riskLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
id: "SUBSIDY",
name: "เงินอุดหนุน",
name: "riskManagement",
align: "left",
label: "แนวทางการบริหารความเสี่ยง",
sortable: false,
field: "riskManagement",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** ดึงข้อมูล จังหวัด */
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, //จํานวนงบประมาณที่จ่ายจริง
/************ ความเสี่ยงของโครงการ ***************/
const modalRisk = ref<boolean>(false);
const riskId = ref<string>("");
const isEdit = ref<boolean>(false);
const formDataRisk = reactive<FormRisk>({
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;
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;
rows.value = data.developmentRisks;
expect.value = data.expect;
})
.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 ทุกครั้งที่พิมพ์ค่า
* ระดับความเสี่ยงของโครงการ option
*/
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) {
function calRiskLevel() {
if (formDataRisk.chance && formDataRisk.effects) {
const riskLevel =
(await Number(formData.chance)) * Number(formData.effects);
formData.riskLevel =
Number(formDataRisk.chance) * Number(formDataRisk.effects);
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)
.then(() => {
// fetchData();
// success($q, "บันทึกข้อมูลสำเร็จ");
step.value == "next" ? props.nextStep() : props.prevStep();
.put(config.API.developmentMainTab("tab8", projectId.value), {
expect: expect.value,
})
.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">
<div class="row q-pa-md q-col-gutter-sm">
<div class="col-12">
<span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
</div>
<q-form greedy @submit.prevent @validation-success="onNextTab">
<div class="q-pa-sm">
<!-- ความเสี่ยงของโครงการ -->
<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"
>
ความเสี่ยงของโครงการ
<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
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-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"
>
</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 />
<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="expect"
label="ประโยชน์ที่คาดว่าจะได้รับ"
type="textarea"
@update:model-value="props.onCheckChangeData()"
/>
</div>
</div>
</q-card-section>
</q-card>
</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>

41
src/modules/15_development/components/Target.vue
View file

@ -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 mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
const checkRoutePermission = ref<boolean>(
route.name == "developmentDetailPage"
);
const { showLoader, hideLoader, messageError, success, dialogConfirm } =
useCounterMixin();
/**
* 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"

4
src/modules/15_development/interface/index/Main.ts
View file

@ -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 {

1
src/modules/15_development/interface/request/FollowResult.ts
View file

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

19
src/modules/15_development/interface/request/Main.ts
View file

@ -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,
};

33
src/modules/15_development/interface/request/Other.ts
View file

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

17
src/modules/15_development/interface/response/Main.ts
View file

@ -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,
};