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

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-04-11 10:09:37 +07:00
commit f24057413e
13 changed files with 1067 additions and 705 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/interface/request/main/main.ts
View file

@ -743,6 +743,12 @@ const menuList = readonly<any[]>([
path: "developmentScholarship", path: "developmentScholarship",
role: "development", role: "development",
}, },
{
key: 14.5,
label: "ยุทธศาสตร์",
path: "developmentStrategic",
role: "development",
},
], ],
}, },
// { // {

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

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main"; import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
@ -13,6 +14,9 @@ const $q = useQuasar();
const store = useDevelopmentDataStore(); const store = useDevelopmentDataStore();
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin(); const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const formData = reactive<FormBasicinfo>({ const formData = reactive<FormBasicinfo>({
year: new Date().getFullYear(), year: new Date().getFullYear(),
org: "", org: "",
@ -28,105 +32,115 @@ function selectAgency() {
function updateAgency(name: string) { function updateAgency(name: string) {
formData.org = name; formData.org = name;
} }
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
</script> </script>
<template> <template>
<!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> --> <q-form greedy @submit.prevent @validation-success="onSubmit">
<div class="row col-12 q-col-gutter-md q-pa-md"> <div class="row col-12 q-col-gutter-md q-pa-md">
<div class="col-xs-6 col-sm-2 col-md-2"> <div class="col-xs-6 col-sm-2 col-md-2">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="store.formAddProject.year" v-model="store.formAddProject.year"
:locale="'th'" :locale="'th'"
autoApply autoApply
year-picker year-picker
:enableTimePicker="false" :enableTimePicker="false"
> >
<template #year="{ year }">{{ year + 543 }}</template> <template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{ <template #year-overlay-value="{ value }">{{
parseInt(value + 543) parseInt(value + 543)
}}</template> }}</template>
<template #trigger> <template #trigger>
<q-input <q-input
dense dense
lazy-rules lazy-rules
outlined outlined
class="inputgreen" class="inputgreen"
:model-value="Number(store.formAddProject.year) + 543" :model-value="Number(store.formAddProject.year) + 543"
:label="`${'ปีงบประมาณ'}`" :label="`${'ปีงบประมาณ'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-xs-10 col-sm-10 col-md-10"> <div class="col-xs-10 col-sm-10 col-md-10">
<q-input <q-input
dense dense
outlined outlined
class="inputgreen" class="inputgreen"
v-model="formData.org" v-model="formData.org"
inputgreen inputgreen
label="ชื่อหน่วยงานที่รับผิดชอบ" label="ชื่อหน่วยงานที่รับผิดชอบ"
hide-bottom-space hide-bottom-space
lazy-rules lazy-rules
@click="selectAgency" @click="selectAgency"
/> />
<!-- :rules="[ <!-- :rules="[
(val:string) => (val:string) =>
!!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`, !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
]" --> ]" -->
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-input
outlined outlined
class="inputgreen" class="inputgreen"
dense dense
v-model="store.formAddProject.projectName" v-model="store.formAddProject.projectName"
label="ชื่อโครงการ/กิจกรรม/หลักสูตร" label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
rows="6" rows="6"
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
:rules="[ :rules="[
(val:string) => (val:string) =>
!!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`, !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
]" ]"
/> />
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.reason"
label="หลักการและเหตุผล"
rows="6"
hide-bottom-space
type="textarea"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.objective"
label="วัตถุประสงค์"
rows="6"
hide-bottom-space
type="textarea"
/>
</div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.reason"
label="หลักการและเหตุผล"
rows="6"
hide-bottom-space
type="textarea"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
outlined
class="inputgreen"
dense
v-model="store.formAddProject.objective"
label="วัตถุประสงค์"
rows="6"
hide-bottom-space
type="textarea"
/>
</div>
</div>
<!-- <q-separator /> <q-separator />
<div class="text-right q-pa-sm"> <div class="text-right q-pa-sm">
<q-btn <q-btn
dense dense
@ -139,8 +153,8 @@ function updateAgency(name: string) {
> >
<q-tooltip>บันทึกข้อมูล</q-tooltip> <q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn> </q-btn>
</div> --> </div>
<!-- </q-form> --> </q-form>
<DialogSelectAgency <DialogSelectAgency
v-model:modal="modalDialogSelect" v-model:modal="modalDialogSelect"

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

@ -1,12 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from "vue"; import { ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { FormFollowResult } from "@/modules/15_development/interface/request/Main"; import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
import type { import type { DataOption } from "@/modules/15_development/interface/index/Main";
DataOption,
DataOptionCheckBox,
} from "@/modules/15_development/interface/index/Main";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore"; import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
@ -14,6 +12,8 @@ import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar(); const $q = useQuasar();
const store = useDevelopmentDataStore(); const store = useDevelopmentDataStore();
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin(); const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const projectOp = ref<DataOption[]>([ const projectOp = ref<DataOption[]>([
{ {
@ -25,14 +25,25 @@ const projectOp = ref<DataOption[]>([
name: "โครงการที่ไม่เสนอขอ TN", name: "โครงการที่ไม่เสนอขอ TN",
}, },
]); ]);
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
</script> </script>
<template> <template>
<div class="row q-pa-md q-col-gutter-sm"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<div class="col-12"> <div class="row q-pa-md q-col-gutter-sm">
<span class="text-weight-medium text-body1">ตัวชี้วัดความสำเร็จ</span> <div class="col-12">
</div> <span class="text-weight-medium text-body1">ตัวชี้วัดความสำเร็จ</span>
<div class="col-12 col-sm-6 col-md-4"> </div>
<!-- <q-select <div class="col-12 col-sm-6 col-md-4">
<!-- <q-select
dense dense
outlined outlined
label="ประเภทตัวชี้วัด" label="ประเภทตัวชี้วัด"
@ -42,147 +53,162 @@ const projectOp = ref<DataOption[]>([
option-value="id" option-value="id"
hide-bottom-space hide-bottom-space
/> --> /> -->
<q-input <q-input
dense dense
outlined outlined
class="inputgreen" class="inputgreen"
label="ประเภทตัวชี้วัด" label="ประเภทตัวชี้วัด"
v-model="store.formAddProject.metricType" v-model="store.formAddProject.metricType"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
<div class="col-12 col-sm-6 col-md-4"> <div class="col-12 col-sm-6 col-md-4">
<q-input <q-input
dense dense
outlined outlined
class="inputgreen" class="inputgreen"
label="ตัวชี้วัด" label="ตัวชี้วัด"
v-model="store.formAddProject.indicators" v-model="store.formAddProject.indicators"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
<div class="col-12 col-sm-6 col-md-4"> <div class="col-12 col-sm-6 col-md-4">
<q-input <q-input
dense dense
outlined outlined
class="inputgreen" class="inputgreen"
label="เป้าหมาย" label="เป้าหมาย"
v-model="store.formAddProject.target" v-model="store.formAddProject.target"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.calculation" v-model="store.formAddProject.calculation"
hide-bottom-space hide-bottom-space
label="วิธีการคำนวณ/เครื่องมือ" label="วิธีการคำนวณ/เครื่องมือ"
type="textarea" type="textarea"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.measuRement" v-model="store.formAddProject.measuRement"
hide-bottom-space hide-bottom-space
label="ระยะเวลาวัดผล" label="ระยะเวลาวัดผล"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.results" v-model="store.formAddProject.results"
hide-bottom-space hide-bottom-space
label="ผลการดำเนินการ" label="ผลการดำเนินการ"
type="textarea" type="textarea"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.obstacles" v-model="store.formAddProject.obstacles"
hide-bottom-space hide-bottom-space
label="ปัญหาอุปสรรค" label="ปัญหาอุปสรรค"
type="textarea" type="textarea"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.suggestions" v-model="store.formAddProject.suggestions"
hide-bottom-space hide-bottom-space
label="ข้อเสนอเเนะ" label="ข้อเสนอเเนะ"
type="textarea" type="textarea"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<span class="text-weight-medium text-body1" <span class="text-weight-medium text-body1"
>ประเภทของผลการพิจารณาความเหมาะสมโครงการ</span >ประเภทของผลการพิจารณาความเหมาะสมโครงการ</span
> >
</div> </div>
<div class="col-12 col-sm-6 col-md-4"> <div class="col-12 col-sm-6 col-md-4">
<q-select <q-select
dense dense
outlined outlined
label="ประเภทโครงการ" label="ประเภทโครงการ"
v-model="store.formAddProject.project" v-model="store.formAddProject.project"
:options="projectOp" :options="projectOp"
option-label="name" option-label="name"
option-value="id" option-value="id"
hide-bottom-space hide-bottom-space
map-options map-options
emit-value emit-value
class="inputgreen" class="inputgreen"
/> />
</div> </div>
<div v-if="store.formAddProject.project !== ''" class="col-12"> <div v-if="store.formAddProject.project !== ''" class="col-12">
<div class="row" v-if="store.formAddProject.project == 'OFFER'"> <div class="row" v-if="store.formAddProject.project == 'OFFER'">
<div class="col-12"> <div class="col-12">
<q-checkbox <q-checkbox
v-model="store.formAddProject.isPassAllocate" v-model="store.formAddProject.isPassAllocate"
label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ" label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<q-checkbox <q-checkbox
v-model="store.formAddProject.isPassNoAllocate" v-model="store.formAddProject.isPassNoAllocate"
label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ" label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<q-checkbox <q-checkbox
v-model="store.formAddProject.isNoPass" v-model="store.formAddProject.isNoPass"
label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ" label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
/> />
</div>
</div> </div>
</div> <div class="row" v-else>
<div class="row" v-else> <div class="col-12">
<div class="col-12"> <q-checkbox
<q-checkbox v-model="store.formAddProject.isBudget"
v-model="store.formAddProject.isBudget" label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ" />
/> </div>
</div> <div class="col-12">
<div class="col-12"> <q-checkbox
<q-checkbox v-model="store.formAddProject.isOutBudget"
v-model="store.formAddProject.isOutBudget" label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ" />
/> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <q-separator />
<div class="text-right q-pa-sm">
<q-btn
dense
unelevated
label="บันทึก"
id="onSubmit"
type="submit"
color="public"
class="q-px-md"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</div>
</q-form>
</template> </template>
<style scoped></style> <style scoped></style>

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

@ -36,19 +36,18 @@ const {
} = useCounterMixin(); } = useCounterMixin();
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม"); const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
const projectId = ref<string | null>( const projectId = ref<string>(route.params.id.toLocaleString());
route.params.id ? route.params.id.toLocaleString() : null
);
const tab = ref<string>("BasicInfo"); const tab = ref<string>("BasicInfo");
const status = ref<string>("ONGOING");
function fetchDataProject(id: string) { function fetchDataProject(id: string) {
showLoader(); showLoader();
http http
.get(config.API.developmentMainById(id)) .get(config.API.developmentMainById(id))
.then((res) => { .then((res) => {
const data: ResDataProject = res.data.result; const data: ResDataProject = res.data.result;
console.log(data);
/** ข้อมูลเบื้องต้น*/ /** ข้อมูลเบื้องต้น*/
status.value = data.status ? data.status : "ONGOING";
store.formAddProject.year = data.year; store.formAddProject.year = data.year;
store.formAddProject.projectName = data.projectName; store.formAddProject.projectName = data.projectName;
store.formAddProject.reason = data.reason; store.formAddProject.reason = data.reason;
@ -128,8 +127,8 @@ function fetchDataProject(id: string) {
store.formAddProject.approved = data.approved; store.formAddProject.approved = data.approved;
store.formAddProject.budgetPay = data.budgetPay; store.formAddProject.budgetPay = data.budgetPay;
store.formAddProject.issues = data.issues; store.formAddProject.issues = data.issues;
store.formAddProject.chance = data.chance; store.formAddProject.chance = Number(data.chance);
store.formAddProject.effects = data.effects; store.formAddProject.effects = Number(data.effects);
store.formAddProject.riskLevel = data.riskLevel; store.formAddProject.riskLevel = data.riskLevel;
store.formAddProject.riskManagement = data.riskManagement; store.formAddProject.riskManagement = data.riskManagement;
store.formAddProject.expect = data.expect; store.formAddProject.expect = data.expect;
@ -212,6 +211,28 @@ function onSubmit() {
} }
} }
function onFinish(id: string) {
dialogConfirm(
$q,
async () => {
showLoader();
http
.get(config.API.developmentMainById(id)) // change path
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการเสร็จสิ้นโครงการ",
"ต้องการยืนยันการเสร็จสิ้นโครงการนี้ใช่หรือไม่?"
);
}
onMounted(() => { onMounted(() => {
projectId.value && fetchDataProject(projectId.value); projectId.value && fetchDataProject(projectId.value);
}); });
@ -221,68 +242,77 @@ onUnmounted(() => {
}); });
</script> </script>
<template> <template>
<q-form greedy @submit.prevent @validation-success="onSubmit"> <!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
<q-btn <q-btn
flat flat
round round
dense dense
class="q-mr-sm" class="q-mr-sm"
icon="mdi-arrow-left" icon="mdi-arrow-left"
color="primary" color="primary"
@click="router.push('/development')" @click="router.push('/development')"
/> />
{{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }} {{ `${title}โครงการ/หลักสูตรการฝึกอบรม` }}
<q-space /> <q-space />
<q-btn <!-- <q-btn
dense dense
unelevated unelevated
label="บันทึก" label="บันทึก"
id="onSubmit" id="onSubmit"
type="submit" type="submit"
color="public" color="public"
class="q-px-md" class="q-px-md"
> >
<q-tooltip>บันทึกข้อมูล</q-tooltip> <q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn> </q-btn> -->
<!-- <q-btn unelevated label="บันทึก" color="public" @click="onSubmit"> <q-btn
<q-tooltip>บันทึกข้อมูล</q-tooltip> v-if="status === 'FINISH'"
</q-btn> --> unelevated
</div> label="เสร็จสิ้นโครงการ"
color="green"
@click="onFinish(projectId)"
>
<q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
</q-btn>
<q-badge v-else outline color="primary" class="q-px-sm q-py-xs"
>เสร็จสิ้นโครงการ</q-badge
>
</div>
<q-card flat bordered class="col-12"> <q-card flat bordered class="col-12">
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense dense
align="left" align="left"
inline-label inline-label
class="rounded-borders" class="rounded-borders"
indicator-color="primary" indicator-color="primary"
active-bg-color="teal-1" active-bg-color="teal-1"
active-class="text-primary" active-class="text-primary"
> >
<q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" /> <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
<q-tab name="Target" label="เป้าหมาย" /> <q-tab name="Target" label="เป้าหมาย" />
<q-tab name="ProjectDetail" label="ลักษณะโครงการ" /> <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
<q-tab name="FollowResult" label="การติดตามการประเมินผล" /> <q-tab name="FollowResult" label="การติดตามประเมินผล" />
<q-tab name="Other" label="อื่นๆ" /> <q-tab name="Other" label="อื่นๆ" />
<q-tab name="Record" label="บันทึกผล" /> <q-tab name="Record" label="บันทึกผล" />
</q-tabs> </q-tabs>
<q-separator /> <q-separator />
<div class="q-pa-sm" style="padding: 0px"> <div class="q-pa-sm" style="padding: 0px">
<q-tab-panels v-model="tab" animated> <q-tab-panels v-model="tab" animated>
<q-tab-panel style="padding: 0px" name="BasicInfo"> <q-tab-panel style="padding: 0px" name="BasicInfo">
<BasicInfo /> <BasicInfo />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="Target"> <Target /></q-tab-panel> <q-tab-panel name="Target"> <Target /></q-tab-panel>
<q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel> <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
<q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel> <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
<q-tab-panel name="Other"> <Other /> </q-tab-panel> <q-tab-panel name="Other"> <Other /> </q-tab-panel>
<q-tab-panel name="Record"> <Record /> </q-tab-panel> <q-tab-panel name="Record"> <Record /> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</div> </div>
</q-card> </q-card>
</q-form> <!-- </q-form> -->
</template> </template>
<style scoped></style> <style scoped></style>

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

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
@ -12,8 +13,17 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
const $q = useQuasar(); const $q = useQuasar();
const store = useDevelopmentDataStore(); const store = useDevelopmentDataStore();
const { showLoader, hideLoader, diffDay, date2Thai, messageError } = const {
useCounterMixin(); showLoader,
hideLoader,
diffDay,
date2Thai,
messageError,
dialogConfirm,
} = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const provinceOp = ref<DataOption[]>([]); const provinceOp = ref<DataOption[]>([]);
const provinceOpMain = ref<DataOption[]>([]); const provinceOpMain = ref<DataOption[]>([]);
@ -22,14 +32,14 @@ const budgetOp = ref<DataOption[]>([
id: "REGULATIONBUDGET", id: "REGULATIONBUDGET",
name: "งบตามข้อบัญญัติ", name: "งบตามข้อบัญญัติ",
}, },
{
id: "BANGKOKBUDGET",
name: "งบประมาณกรุงเทพมหานคร",
},
{ {
id: "OUTSIDEBUDGET", id: "OUTSIDEBUDGET",
name: "เงินนอกงบประมาณ", name: "เงินนอกงบประมาณ",
}, },
{
id: "BANGKOKBUDGET",
name: "ไม่ใช้งบประมาณ",
},
]); ]);
const budgetSubOp = ref<DataOption[]>([ const budgetSubOp = ref<DataOption[]>([
{ {
@ -106,340 +116,391 @@ const filterSelector = (val: string, update: Function) => {
}); });
}; };
const multiple = ref(null); async function calRiskLevel() {
if (store.formAddProject.chance && store.formAddProject.effects) {
const riskLevel =
(await store.formAddProject.chance) * store.formAddProject.effects;
store.formAddProject.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();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
onMounted(() => { onMounted(() => {
getProvince(); getProvince();
}); });
</script> </script>
<template> <template>
<div class="row q-pa-md q-col-gutter-sm"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<div class="col-12"> <div class="row q-pa-md q-col-gutter-sm">
<span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span> <div class="col-12">
</div> <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
<div class="col-12 col-sm-6 col-md-3"> </div>
<datepicker <div class="col-12 col-sm-6 col-md-3">
menu-class-name="modalfix" <datepicker
v-model="store.formAddProject.dateStart" menu-class-name="modalfix"
:locale="'th'" v-model="store.formAddProject.dateStart"
autoApply :locale="'th'"
:enableTimePicker="false" autoApply
week-start="0" :enableTimePicker="false"
@update:model-value="changeDateStart()" week-start="0"
> @update:model-value="changeDateStart()"
<template #year="{ year }">{{ year + 543 }}</template> >
<template #year-overlay-value="{ value }">{{ <template #year="{ year }">{{ year + 543 }}</template>
parseInt(value + 543) <template #year-overlay-value="{ value }">{{
}}</template> parseInt(value + 543)
<template #trigger> }}</template>
<q-input <template #trigger>
class="inputgreen" <q-input
dense class="inputgreen"
outlined dense
:model-value=" outlined
store.formAddProject.dateStart :model-value="
? date2Thai(store.formAddProject.dateStart) store.formAddProject.dateStart
: null ? date2Thai(store.formAddProject.dateStart)
" : null
:label="`${'วันที่เริ่มต้น'}`" "
> :label="`${'วันที่เริ่มต้น'}`"
<template v-slot:prepend> >
<q-icon <template v-slot:prepend>
name="event" <q-icon
class="cursor-pointer" name="event"
style="color: var(--q-primary)" class="cursor-pointer"
> style="color: var(--q-primary)"
</q-icon> >
</template> </q-icon>
</q-input> </template>
</template> </q-input>
</datepicker> </template>
</div> </datepicker>
<div class="col-12 col-sm-6 col-md-3"> </div>
<datepicker <div class="col-12 col-sm-6 col-md-3">
menu-class-name="modalfix" <datepicker
v-model="store.formAddProject.dateEnd" menu-class-name="modalfix"
:locale="'th'" v-model="store.formAddProject.dateEnd"
autoApply :locale="'th'"
:enableTimePicker="false" autoApply
week-start="0" :enableTimePicker="false"
:min-date="store.formAddProject.dateStart" week-start="0"
@update:model-value="changeDateEnd()" :min-date="store.formAddProject.dateStart"
> @update:model-value="changeDateEnd()"
<template #year="{ year }">{{ year + 543 }}</template> >
<template #year-overlay-value="{ value }">{{ <template #year="{ year }">{{ year + 543 }}</template>
parseInt(value + 543) <template #year-overlay-value="{ value }">{{
}}</template> parseInt(value + 543)
<template #trigger> }}</template>
<q-input <template #trigger>
dense <q-input
outlined dense
class="inputgreen" outlined
:model-value=" class="inputgreen"
store.formAddProject.dateEnd :model-value="
? date2Thai(store.formAddProject.dateEnd) store.formAddProject.dateEnd
: null ? date2Thai(store.formAddProject.dateEnd)
" : null
:label="`${'วันที่สิ้นสุด'}`" "
> :label="`${'วันที่สิ้นสุด'}`"
<template v-slot:prepend> >
<q-icon <template v-slot:prepend>
name="event" <q-icon
class="cursor-pointer" name="event"
style="color: var(--q-primary)" class="cursor-pointer"
> style="color: var(--q-primary)"
</q-icon> >
</template> </q-icon>
</q-input> </template>
</template> </q-input>
</datepicker> </template>
</div> </datepicker>
<div class="col-12 col-sm-6 col-md-3"> </div>
<q-input <div class="col-12 col-sm-6 col-md-3">
dense <q-input
outlined dense
class="inputgreen" outlined
label="รวมระยะเวลา (วัน)" class="inputgreen"
v-model="store.formAddProject.totalDate" label="รวมระยะเวลา (วัน)"
mask="#" v-model="store.formAddProject.totalDate"
reverse-fill-mask mask="#"
/> reverse-fill-mask
</div> />
</div>
<div class="col-12 q-mt-md"> <div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span> <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
</div> </div>
<div class="col-8"> <div class="col-8">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.address" v-model="store.formAddProject.address"
label="ที่อยู่" label="ที่อยู่"
/> />
</div> </div>
<div class="col-4"> <div class="col-4">
<q-select <q-select
outlined outlined
dense dense
v-model="store.formAddProject.provinceIds" v-model="store.formAddProject.provinceIds"
label="จังหวัด" label="จังหวัด"
:options="provinceOp" :options="provinceOp"
option-label="name" option-label="name"
option-value="id" option-value="id"
emit-value emit-value
map-options map-options
class="inputgreen" class="inputgreen"
use-input use-input
multiple multiple
@filter=" @filter="
(inputValue:string, doneFn:Function) => (inputValue:string, doneFn:Function) =>
filterSelector(inputValue, doneFn, ) filterSelector(inputValue, doneFn, )
" "
> >
<template v-slot:no-option> <template v-slot:no-option>
<q-item> <q-item>
<q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section> <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
</div> </div>
<div class="col-12 q-mt-md"> <div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">งบประมาณ</span> <span class="text-weight-medium text-body1">งบประมาณ</span>
</div> </div>
<div class="col-4"> <div class="col-4">
<q-select <q-select
outlined outlined
dense dense
v-model="store.formAddProject.budget" v-model="store.formAddProject.budget"
label="ประเภทงบประมาณ" label="ประเภทงบประมาณ"
:options="budgetOp" :options="budgetOp"
option-label="name" option-label="name"
option-value="id" option-value="id"
emit-value emit-value
map-options map-options
class="inputgreen" class="inputgreen"
/> />
</div> </div>
<div class="col-2"> <div class="col-2">
<q-select <q-select
v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'" v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'"
outlined outlined
dense dense
v-model="store.formAddProject.budgetSub" v-model="store.formAddProject.budgetSub"
label="ประเภทย่อย" label="ประเภทย่อย"
:options="budgetSubOp" :options="budgetSubOp"
option-label="name" option-label="name"
option-value="id" option-value="id"
emit-value emit-value
map-options map-options
class="inputgreen" class="inputgreen"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-x-sm"> <div class="row q-col-gutter-x-sm">
<div class="col-3"> <div class="col-3">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.accept" v-model="store.formAddProject.accept"
label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ" label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
mask="###,###,###,###,###" mask="###,###,###,###,###"
reverse-fill-mask reverse-fill-mask
/> />
</div> </div>
<div class="col-3"> <div class="col-3">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.receive" v-model="store.formAddProject.receive"
mask="###,###,###,###,###" mask="###,###,###,###,###"
reverse-fill-mask reverse-fill-mask
label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ" label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
/> />
</div> </div>
<div class="col-3"> <div class="col-3">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.approved" v-model="store.formAddProject.approved"
hide-bottom-space hide-bottom-space
mask="###,###,###,###,###" mask="###,###,###,###,###"
label="จํานวนงบประมาณที่ได้รับอนุมัติ" label="จํานวนงบประมาณที่ได้รับอนุมัติ"
reverse-fill-mask reverse-fill-mask
/> />
</div> </div>
<div class="col-3"> <div class="col-3">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.budgetPay" v-model="store.formAddProject.budgetPay"
mask="###,###,###,###,###" mask="###,###,###,###,###"
reverse-fill-mask reverse-fill-mask
label="จํานวนงบประมาณที่จ่ายจริง" label="จํานวนงบประมาณที่จ่ายจริง"
/> />
</div>
</div> </div>
</div> </div>
</div>
<div class="col-12 q-mt-md"> <div class="col-12 q-mt-md">
<span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span> <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.issues" v-model="store.formAddProject.issues"
label="ประเด็นความเสี่ยง" label="ประเด็นความเสี่ยง"
type="textarea" type="textarea"
/> />
</div> </div>
<div class="col-12"> <div class="col-3">
<q-input <q-select
outlined outlined
dense dense
class="inputgreen" class="inputgreen"
v-model="store.formAddProject.chance" v-model="store.formAddProject.chance"
label="โอกาสที่จะเกิด" label="โอกาสที่จะเกิด"
type="textarea" :options="[1, 2, 3, 4]"
/> @update:model-value="calRiskLevel"
</div> ></q-select>
<div class="col-12"> </div>
<q-input <div class="col-3">
outlined <q-select
dense outlined
class="inputgreen" dense
v-model="store.formAddProject.effects" class="inputgreen"
label="ผลกระทบจากการเกิด" v-model="store.formAddProject.effects"
type="textarea" label="ผลกระทบจากการเกิด"
/> :options="[1, 2, 3, 4]"
</div> @update:model-value="calRiskLevel"
<div class="col-12"> >
<q-input </q-select>
outlined </div>
dense <div class="col-6">
class="inputgreen" <q-input
v-model="store.formAddProject.riskLevel" readonly
label="ระดับความเสี่ยง" outlined
/> dense
</div> class="inputgreen"
<div class="col-12"> v-model="store.formAddProject.riskLevel"
<q-input label="ระดับความเสี่ยง"
outlined />
dense </div>
class="inputgreen" <div class="col-12">
v-model="store.formAddProject.riskManagement" <q-input
label="เเนวทางการบริหารความเสี่ยง" outlined
type="textarea" dense
/> class="inputgreen"
</div> v-model="store.formAddProject.riskManagement"
<div class="col-12 q-mt-md"> label="เเนวทางการบริหารความเสี่ยง"
<span class="text-weight-medium text-body1" type="textarea"
>ประโยชน์ที่คาดว่าจะได้รับ</span />
> </div>
</div> <div class="col-12 q-mt-md">
<div class="col-12"> <span class="text-weight-medium text-body1"
<q-input >ประโยชน์ที่คาดว่าจะได้รับ</span
outlined >
dense </div>
class="inputgreen" <div class="col-12">
v-model="store.formAddProject.expect" <q-input
label="ประโยชน์ที่คาดว่าจะได้รับ" outlined
type="textarea" dense
/> class="inputgreen"
</div> v-model="store.formAddProject.expect"
<div class="col-12 q-mt-md"> label="ประโยชน์ที่คาดว่าจะได้รับ"
<span class="text-weight-medium text-body1">ข้อมูลด้านวิชาการ</span> type="textarea"
</div> />
<div class="col-12"> </div>
<q-input <div class="col-12 q-mt-md">
outlined <span class="text-weight-medium text-body1">ข้อมูลด้านวิชาการ</span>
dense </div>
class="inputgreen" <div class="col-12">
v-model="store.formAddProject.topicAcademic" <q-input
label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน" outlined
/> dense
</div> class="inputgreen"
<div class="col-9"> v-model="store.formAddProject.topicAcademic"
<q-input label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
outlined />
dense </div>
class="inputgreen" <div class="col-9">
v-model="store.formAddProject.addressAcademic" <q-input
label="สถานที่ฝึกอบรม ศึกษาดูงาน" outlined
/> dense
</div> class="inputgreen"
<div class="col-3"> v-model="store.formAddProject.addressAcademic"
<q-select label="สถานที่ฝึกอบรม ศึกษาดูงาน"
outlined />
dense </div>
v-model="store.formAddProject.provinceActualId" <div class="col-3">
label="จังหวัด" <q-select
:options="provinceOp" outlined
option-label="name" dense
option-value="id" v-model="store.formAddProject.provinceActualId"
emit-value label="จังหวัด"
map-options :options="provinceOp"
class="inputgreen" option-label="name"
use-input option-value="id"
@filter=" emit-value
map-options
class="inputgreen"
use-input
@filter="
(inputValue:string, doneFn:Function) => (inputValue:string, doneFn:Function) =>
filterSelector(inputValue, doneFn, ) filterSelector(inputValue, doneFn, )
" "
><template v-slot:no-option> ><template v-slot:no-option>
<q-item> <q-item>
<q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section> <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
</q-item> </q-item>
</template></q-select </template></q-select
> >
</div>
</div> </div>
</div> <q-separator />
<div class="text-right q-pa-sm">
<q-btn
dense
unelevated
label="บันทึก"
id="onSubmit"
type="submit"
color="public"
class="q-px-md"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</div>
</q-form>
</template> </template>
<style scoped></style> <style scoped></style>

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

@ -1,12 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue"; import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
/**importType*/ /**importType*/
import type { DataOption } from "@/modules/15_development/interface/index/Main"; import type { DataOption } from "@/modules/15_development/interface/index/Main";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore"; import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
const $q = useQuasar();
const store = useDevelopmentDataStore(); const store = useDevelopmentDataStore();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
const projectTypeOp = ref<DataOption[]>([ const projectTypeOp = ref<DataOption[]>([
{ id: "STRATEGIC_PROJECT", name: "โครงการตามยุทธศาสตร์" }, { id: "STRATEGIC_PROJECT", name: "โครงการตามยุทธศาสตร์" },
@ -29,80 +36,106 @@ const projectTechniquesOp = ref<DataOption[]>([
{ id: "SPECIAL_LECTURE", name: "การบรรยายพิเศษ" }, { id: "SPECIAL_LECTURE", name: "การบรรยายพิเศษ" },
{ id: "STUDY_TRAINING", name: "การฝึกศึกษา" }, { id: "STUDY_TRAINING", name: "การฝึกศึกษา" },
]); ]);
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
// post
console.log("projectId===>", projectId.value);
hideLoader();
});
}
</script> </script>
<template> <template>
<div class="row q-pa-md q-col-gutter-sm"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<div class="col-12 col-sm-12 col-md-4"> <div class="row q-pa-md q-col-gutter-sm">
<q-select <div class="col-12 col-sm-12 col-md-4">
dense <q-select
outlined dense
v-model="store.formAddProject.projectType" outlined
:options="projectTypeOp" v-model="store.formAddProject.projectType"
label="ประเภทโครงการ" :options="projectTypeOp"
option-label="name" label="ประเภทโครงการ"
option-value="id" option-label="name"
emit-value option-value="id"
map-options emit-value
/> map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-select
dense
outlined
v-model="store.formAddProject.projectCharacteristics"
:options="projectCharacteristicsOp"
label="ลักษณะ"
option-label="name"
option-value="id"
emit-value
map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
dense
outlined
v-model="store.formAddProject.projectDay"
label="จำนวน (วัน)"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
v-if="store.formAddProject.projectCharacteristics !== 'GO_BACK'"
dense
outlined
v-model="store.formAddProject.projectNigth"
label="จำนวน (คืน)"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-select
dense
outlined
v-model="store.formAddProject.projectTechniques"
:options="projectTechniquesOp"
label="เทคนิควิธีการที่ใช้ในการพัฒนา"
option-label="name"
option-value="id"
emit-value
map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
dense
outlined
v-model="store.formAddProject.projectModal"
label="จำนวน (รุ่น)"
mask="#"
reverse-fill-mask
/>
</div>
</div> </div>
<div class="col-12 col-sm-6 col-md-4"> <q-separator />
<q-select <div class="text-right q-pa-sm">
<q-btn
dense dense
outlined unelevated
v-model="store.formAddProject.projectCharacteristics" label="บันทึก"
:options="projectCharacteristicsOp" id="onSubmit"
label="ลักษณะ" type="submit"
option-label="name" color="public"
option-value="id" class="q-px-md"
emit-value >
map-options <q-tooltip>บันทึกข้อมูล</q-tooltip>
/> </q-btn>
</div> </div>
<div class="col-12 col-sm-6 col-md-2"> </q-form>
<q-input
dense
outlined
v-model="store.formAddProject.projectDay"
label="จำนวน (วัน)"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
v-if="store.formAddProject.projectCharacteristics !== 'GO_BACK'"
dense
outlined
v-model="store.formAddProject.projectNigth"
label="จำนวน (คืน)"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-select
dense
outlined
v-model="store.formAddProject.projectTechniques"
:options="projectTechniquesOp"
label="เทคนิควิธีการที่ใช้ในการพัฒนา"
option-label="name"
option-value="id"
emit-value
map-options
/>
</div>
<div class="col-12 col-sm-6 col-md-2">
<q-input
dense
outlined
v-model="store.formAddProject.projectModal"
label="จำนวน (รุ่น)"
mask="#"
reverse-fill-mask
/>
</div>
</div>
</template> </template>
<style scoped></style> <style scoped></style>

29
src/modules/15_development/components/Record.vue
View file

@ -10,7 +10,7 @@ import { useQuasar } from "quasar";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const route = useRoute(); const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const id = ref<string>(route.params.id ? route.params.id.toString() : ""); const id = ref<string>(route.params.id.toString());
const { const {
success, success,
messageError, messageError,
@ -239,6 +239,21 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
}); });
} }
function sendRecordRegistry() {
// ส่งไปบันทึกที่ทะเบียนประวัติ
dialogConfirm(
$q,
async () => {
showLoader();
// post
console.log("projectId===>", id.value);
hideLoader();
},
"ยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติ",
"ต้องการยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติหรือไม่"
);
}
onMounted(() => { onMounted(() => {
// getData(); // getData();
}); });
@ -271,6 +286,18 @@ onMounted(() => {
> >
<q-tooltip>อัปโหลดไฟล์</q-tooltip> <q-tooltip>อัปโหลดไฟล์</q-tooltip>
</q-btn> </q-btn>
<q-btn
v-if="row.length > 0"
size="md"
icon="mdi-clipboard-account-outline"
round
flat
color="public"
@click="sendRecordRegistry()"
>
<q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติ</q-tooltip>
</q-btn>
<q-space /> <q-space />
<q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm"> <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
<template v-slot:append> <template v-slot:append>

9
src/modules/15_development/components/scholarship/DetailView.vue
View file

@ -411,7 +411,14 @@ onMounted(() => {
{{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }} {{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
</div> </div>
<q-space /> <q-space />
<div class="row" v-if="scholarshipId"> <q-icon
name="download"
class="cursor-pointer"
size="sm"
style="color: var(--q-primary)"
>
</q-icon>
<div class="row q-ml-md" v-if="scholarshipId">
<div class="q-gutter-sm" v-if="isStatus === 'PENDING'"> <div class="q-gutter-sm" v-if="isStatus === 'PENDING'">
<q-btn <q-btn
unelevated unelevated

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

@ -4,6 +4,7 @@ interface FormQueryListProject {
pageSize: number; pageSize: number;
org: string; org: string;
keyword: string; keyword: string;
status: string;
} }
interface FormBasicinfo { interface FormBasicinfo {
@ -171,8 +172,8 @@ interface FormAddProject {
approved: number | string | null; approved: number | string | null;
budgetPay: number | string | null; budgetPay: number | string | null;
issues: string; issues: string;
chance: string; chance: number;
effects: string; effects: number;
riskLevel: string; riskLevel: string;
riskManagement: string; riskManagement: string;
expect: string; expect: string;

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

@ -68,6 +68,7 @@ interface ResDataProject {
projectNigth: number | null; projectNigth: number | null;
projectTechniques: string; projectTechniques: string;
projectModal: number | null; projectModal: number | null;
status?: string;
} }
interface ResPeople { interface ResPeople {

25
src/modules/15_development/router.ts
View file

@ -7,14 +7,20 @@ const employeeHistory = () =>
import("@/modules/15_development/views/EmployeeHistory.vue"); import("@/modules/15_development/views/EmployeeHistory.vue");
const Scholarship = () => const Scholarship = () =>
import("@/modules/15_development/views/Scholarship.vue"); import("@/modules/15_development/views/Scholarship.vue");
const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue') const historyAdd = () =>
const historyEdit = () => import('@/modules/15_development/components/history/AddPage.vue') import("@/modules/15_development/components/history/AddPage.vue");
const historyEmployeeAdd = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue') const historyEdit = () =>
const historyEmployeeEdit = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue') import("@/modules/15_development/components/history/AddPage.vue");
const historyEmployeeAdd = () =>
import("@/modules/15_development/components/historyEmployee/AddPage.vue");
const historyEmployeeEdit = () =>
import("@/modules/15_development/components/historyEmployee/AddPage.vue");
const ScholarshipDetail = () => const ScholarshipDetail = () =>
import("@/modules/15_development/components/scholarship/DetailView.vue"); import("@/modules/15_development/components/scholarship/DetailView.vue");
// const historyAdd = () => // const historyAdd = () =>
// import("@/modules/15_development/components/history/AddPage.vue"); // import("@/modules/15_development/components/history/AddPage.vue");
const StrategicView = () =>
import("@/modules/15_development/views/Strategic.vue");
export default [ export default [
{ {
path: "/development", path: "/development",
@ -136,4 +142,15 @@ export default [
Role: "development", Role: "development",
}, },
}, },
{
path: "/development/strategic",
name: "developmentStrategic",
component: StrategicView,
meta: {
Auth: true,
Key: [1.6],
Role: "development",
},
},
]; ];

20
src/modules/15_development/views/MainPage.vue
View file

@ -86,6 +86,10 @@ const itemDownload = ref<ItemsMenu[]>([
}, },
]); ]);
const statusOpt = ref<DataOption[]>([
{ id: "ONGOING", name: "กำลังดำเนินการ" },
{ id: "FINISH", name: "เสร็จสิ้นโครงการ" },
]);
/** formQuery*/ /** formQuery*/
const formQuery = reactive<FormQueryListProject>({ const formQuery = reactive<FormQueryListProject>({
year: new Date().getFullYear(), year: new Date().getFullYear(),
@ -93,6 +97,7 @@ const formQuery = reactive<FormQueryListProject>({
pageSize: 10, pageSize: 10,
org: "1", org: "1",
keyword: "", keyword: "",
status: "ONGOING",
}); });
const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]); const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
@ -104,7 +109,7 @@ function fetchListProject() {
http http
.get( .get(
config.API.developmentMain + config.API.developmentMain +
`?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}` `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}`
) )
.then((res) => { .then((res) => {
const data = res.data.result.data; const data = res.data.result.data;
@ -203,6 +208,7 @@ onMounted(() => {
autoApply autoApply
year-picker year-picker
:enableTimePicker="false" :enableTimePicker="false"
style="width: 150px"
@update:model-value="fetchListProjectNew" @update:model-value="fetchListProjectNew"
> >
<template #year="{ year }">{{ year + 543 }}</template> <template #year="{ year }">{{ year + 543 }}</template>
@ -239,6 +245,18 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select
dense
outlined
v-model="formQuery.status"
:options="statusOpt"
label="สถานะโครงการ"
option-label="name"
option-value="id"
emit-value
map-options
@update:model-value="fetchListProjectNew"
/>
<q-select <q-select
dense dense
outlined outlined

121
src/modules/15_development/views/Strategic.vue Normal file
View file

@ -0,0 +1,121 @@
<script setup lang="ts">
import { ref, watch } from "vue";
const nodes = ref<any>([
{
orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
children: [
{
orgTreeName: "ยุทธศาสตร์ที่ 1",
children: [
{
orgTreeName: "ยุทธศาสตร์ที่ 2",
children: [
{
orgTreeName: "ยุทธศาสตร์ที่ 3",
children: [
{
orgTreeName: "ยุทธศาสตร์ที่ 4",
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
},
],
},
],
},
],
},
{
orgTreeName: "ยุทธศาสตร์ที่ 1",
children: [
{
orgTreeName: "ยุทธศาสตร์ที่ 2",
children: [
{
orgTreeName: "ยุทธศาสตร์ที่ 3",
children: [
{
orgTreeName: "ยุทธศาสตร์ที่ 4",
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
},
],
},
],
},
],
},
],
},
{
orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 2",
children: [
{
orgTreeName: "ยุทธศาสตร์ที่ 1",
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
},
],
},
]);
const filter = ref<string>("");
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");
const expanded = ref<Array<any>>([]);
const nodeId = ref<string>("");
function updateSelected(data: any) {
console.log(data);
nodeId.value = data.orgTreeName;
}
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
<q-card flat bordered class="q-pa-md">
<div class="row q-col-gutter-sm q-pl-sm">
<q-toolbar class="text-primary">
<q-btn dense flat round color="primary" icon="add">
<q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
</q-btn>
<q-input dense outlined v-model="filter" label="ค้นหา">
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
</q-toolbar>
</div>
<q-tree
class="q-pa-sm q-gutter-sm"
dense
:nodes="nodes"
node-key="orgTreeName"
label-key="orgTreeName"
:filter="filter"
:no-results-label="notFound"
:no-nodes-label="noData"
v-model:expanded="expanded"
>
<template v-slot:default-header="prop">
<q-item
clickable
:active="nodeId == prop.node.orgTreeName"
@click.stop="updateSelected(prop.node)"
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"
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
</div>
</q-item>
</template>
</q-tree>
</q-card>
</template>
<style scoped></style>