ui รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
179a2b395e
commit
c084262a40
9 changed files with 1072 additions and 93 deletions
139
src/modules/15_development/components/BasicInfo.vue
Normal file
139
src/modules/15_development/components/BasicInfo.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
|
||||
|
||||
onMounted(() => {
|
||||
console.log("ข้อมูลเบื้องต้น");
|
||||
});
|
||||
|
||||
const formData = reactive<any>({
|
||||
year: new Date().getFullYear(),
|
||||
org: "",
|
||||
projectName: "",
|
||||
reason: "",
|
||||
objective: "",
|
||||
});
|
||||
|
||||
const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<div class="row col-12 q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(formData.year) + 543"
|
||||
: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-xs-10 col-sm-10 col-md-10">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.org"
|
||||
:options="options"
|
||||
label="ชื่อหน่วยงานที่รับผิดชอบ"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="formData.projectName"
|
||||
label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
|
||||
rows="6"
|
||||
type="textarea"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="formData.reason"
|
||||
label="หลักการและเหตุผล"
|
||||
rows="6"
|
||||
type="textarea"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกหลักการและเหตุผล'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="formData.objective"
|
||||
label="วัตถุประสงค์"
|
||||
rows="6"
|
||||
type="textarea"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกวัตถุประสงค์'}`,
|
||||
]"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<style scoped></style>
|
||||
57
src/modules/15_development/components/MainTab.vue
Normal file
57
src/modules/15_development/components/MainTab.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
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";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
|
||||
const tab = ref<string>("BasicInfo");
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
class="q-mr-sm"
|
||||
icon="mdi-arrow-left"
|
||||
color="primary"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
{{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
|
||||
</div>
|
||||
|
||||
<q-card flat bordered class="col-12">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
align="left"
|
||||
inline-label
|
||||
class="rounded-borders"
|
||||
indicator-color="primary"
|
||||
active-bg-color="teal-1"
|
||||
active-class="text-primary"
|
||||
>
|
||||
<q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
|
||||
<q-tab name="Target" label="เป้าหมาย" />
|
||||
<q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<div class="q-pa-sm" style="padding: 0px">
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel style="padding: 0px" name="BasicInfo">
|
||||
<BasicInfo />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="Target"> <Target /></q-tab-panel>
|
||||
<q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
12
src/modules/15_development/components/ProjectDetail.vue
Normal file
12
src/modules/15_development/components/ProjectDetail.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
console.log("ลักษณะโครงการ");
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>ลักษณะโครงการ</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
568
src/modules/15_development/components/Target.vue
Normal file
568
src/modules/15_development/components/Target.vue
Normal file
|
|
@ -0,0 +1,568 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, dialogConfirm, dialogRemove, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const columnsGroup = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "groupTarget",
|
||||
align: "left",
|
||||
label: "กลุ่มเป้าหมาย ",
|
||||
sortable: true,
|
||||
field: "groupTarget",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "ประเภท",
|
||||
sortable: true,
|
||||
field: "type",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "amount",
|
||||
align: "left",
|
||||
label: "จำนวน(คน)",
|
||||
sortable: true,
|
||||
field: "amount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columnsRelated = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "related",
|
||||
align: "left",
|
||||
label: "ผู้เกี่ยวข้อง ",
|
||||
sortable: true,
|
||||
field: "related",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "amount",
|
||||
align: "left",
|
||||
label: "จำนวน(คน)",
|
||||
sortable: true,
|
||||
field: "amount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const rows1 = ref<any>([
|
||||
{
|
||||
groupTarget: "ข้าราชการ",
|
||||
type: "บริหาร",
|
||||
amount: 20,
|
||||
},
|
||||
]);
|
||||
const rows2 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
|
||||
const rows3 = ref<any>([
|
||||
{
|
||||
groupTarget: "ข้าราชการ",
|
||||
type: "บริหาร",
|
||||
amount: 20,
|
||||
},
|
||||
]);
|
||||
const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
|
||||
const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
|
||||
|
||||
const modalGroupTarget = ref<boolean>(false);
|
||||
const modalRelate = ref<boolean>(false);
|
||||
|
||||
const formGroupTarget = reactive({
|
||||
groupTarget: "",
|
||||
groupTargetSub: "",
|
||||
position: "",
|
||||
posType: "",
|
||||
level: "",
|
||||
type: "",
|
||||
amount: null,
|
||||
});
|
||||
|
||||
const formGroupRelate = reactive({
|
||||
relate: "",
|
||||
amount: null,
|
||||
});
|
||||
|
||||
function onClickOpenDialog(type: string) {
|
||||
if (type === "group") {
|
||||
modalGroupTarget.value = true;
|
||||
} else {
|
||||
modalRelate.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmitGroup() {
|
||||
dialogConfirm($q, () => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
onClickCloseDialog();
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmitRelate() {
|
||||
dialogConfirm($q, () => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
onClickCloseDialog();
|
||||
});
|
||||
}
|
||||
|
||||
function onclickDelete() {
|
||||
dialogRemove($q, () => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
});
|
||||
}
|
||||
|
||||
function cleanFormData() {
|
||||
formGroupTarget.groupTarget = "";
|
||||
formGroupTarget.groupTargetSub = "";
|
||||
formGroupTarget.position = "";
|
||||
formGroupTarget.posType = "";
|
||||
formGroupTarget.level = "";
|
||||
formGroupTarget.type = "";
|
||||
formGroupTarget.amount = null;
|
||||
formGroupRelate.relate = "";
|
||||
formGroupRelate.amount = null;
|
||||
}
|
||||
|
||||
function onClickCloseDialog() {
|
||||
modalGroupTarget.value = false;
|
||||
modalRelate.value = false;
|
||||
cleanFormData();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log("เป้าหมาย");
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<!-- CARD เป้าหมายตามแผน -->
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||
เป้าหมายตามแผน
|
||||
<q-btn flat round dense icon="add" color="primary">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable v-close-popup @click="onClickOpenDialog('group')">
|
||||
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickOpenDialog('relate')"
|
||||
>
|
||||
<q-item-section>ผู้เกี่ยวข้อง</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-col-gutter-md q-pa-md">
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columnsGroup"
|
||||
:rows="rows1"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
hide-pagination
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="delete"
|
||||
color="red"
|
||||
@click="onclickDelete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columnsRelated"
|
||||
:rows="rows2"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
hide-pagination
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="delete"
|
||||
color="red"
|
||||
@click="onclickDelete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</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">
|
||||
เป้าหมายตามจริง
|
||||
<q-btn flat round dense icon="add" color="primary">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable v-close-popup @click="onClickOpenDialog('group')">
|
||||
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickOpenDialog('relate')"
|
||||
>
|
||||
<q-item-section>ผู้เกี่ยวข้อง</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-col-gutter-md q-pa-md">
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columnsGroup"
|
||||
:rows="rows3"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
hide-pagination
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="delete"
|
||||
color="red"
|
||||
@click="onclickDelete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columnsRelated"
|
||||
:rows="rows4"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
hide-pagination
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="delete"
|
||||
color="red"
|
||||
@click="onclickDelete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modalGroupTarget" persistent>
|
||||
<q-card style="width: 700px">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitGroup">
|
||||
<DialogHeader tittle="เพิ่มกลุ่มเป้าหมาย" :close="onClickCloseDialog" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formGroupTarget.groupTarget"
|
||||
:options="options"
|
||||
label="กลุ่มเป้าหมาย"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formGroupTarget.groupTargetSub"
|
||||
:options="options"
|
||||
label="กลุ่มเป้าหมายย่อย"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
v-model="formGroupTarget.position"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกตำแหน่ง'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
v-model="formGroupTarget.posType"
|
||||
label="ประเภทตำแหน่ง"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกประเภทตำแหน่ง'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
v-model="formGroupTarget.level"
|
||||
label="ระดับ"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกระดับ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-8">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
v-model="formGroupTarget.type"
|
||||
label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
v-model="formGroupTarget.amount"
|
||||
label="จำนวน(คน)"
|
||||
mask="#####"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<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>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modalRelate" persistent>
|
||||
<q-card style="width: 400px">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitRelate">
|
||||
<DialogHeader tittle="เพิ่มผู้เกี่ยวข้อง" :close="onClickCloseDialog" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-12 col-md-12">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formGroupRelate.relate"
|
||||
:options="options"
|
||||
label="ผู้เกี่ยวข้อง"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
v-model="formGroupRelate.amount"
|
||||
label="จำนวน(คน)"
|
||||
mask="#####"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<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>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
const mainPage = () => import("@/modules/15_development/views/MainPage.vue");
|
||||
const mainForm = () =>
|
||||
import("@/modules/15_development/components/MainTab.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
|
|
@ -11,4 +13,24 @@ export default [
|
|||
Role: "development",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/development/add",
|
||||
name: "developmentAdd",
|
||||
component: mainForm,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [1.1],
|
||||
Role: "development",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/development/:id",
|
||||
name: "developmentDetail",
|
||||
component: mainForm,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [1.1],
|
||||
Role: "development",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { reactive } from "vue";
|
||||
|
||||
// store
|
||||
export const useDevelopmentDataStore = defineStore("developmentDataStore", () => {
|
||||
return {};
|
||||
});
|
||||
// store
|
||||
export const useDevelopmentDataStore = defineStore(
|
||||
"developmentDataStore",
|
||||
() => {
|
||||
const formFilter = reactive({
|
||||
year: new Date().getFullYear(),
|
||||
keyword: "",
|
||||
});
|
||||
return {
|
||||
formFilter,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,199 @@
|
|||
<script setup lang="ts">
|
||||
import { useQuasar } from "quasar";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
/** importStore*/
|
||||
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const store = useDevelopmentDataStore();
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const { showLoader, hideLoader } = useCounterMixin();
|
||||
|
||||
/** หัวตาราง */
|
||||
const rows = ref<any>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "year",
|
||||
align: "left",
|
||||
label: "ปีงบประมาณ ",
|
||||
sortable: true,
|
||||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "org",
|
||||
align: "left",
|
||||
label: "หน่วยงานที่รับผิดชอบ",
|
||||
sortable: true,
|
||||
field: "org",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["year", "name", "org"]);
|
||||
|
||||
function fetchListProject() {
|
||||
showLoader();
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
year: 2567,
|
||||
name: "โครงการฝึกอบรมสำนักงานข้าราชการ",
|
||||
org: "สำนักงานข้าราชการ/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
year: 2567,
|
||||
name: "โครงการฝึกอบรม",
|
||||
org: "สำนักงานข้าราชการ/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร",
|
||||
},
|
||||
];
|
||||
rows.value = data;
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function onClickAddOrView(status: boolean = false, id: string = "") {
|
||||
status ? router.push(`development/${id}`) : router.push("development/add");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchListProject();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>development Page</template>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
|
||||
</div>
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<q-toolbar style="padding: 0px">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="store.formFilter.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(store.formFilter.year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-btn flat round dense icon="add" color="primary" @click="onClickAddOrView()">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="store.formFilter.keyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="store.formFilter.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="store.formFilter.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="store.formFilter.keyword = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="subject"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<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" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="onClickAddOrView(true, props.row.id)"
|
||||
>
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue