ui รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
179a2b395e
commit
c084262a40
9 changed files with 1072 additions and 93 deletions
|
|
@ -1,14 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, watch } from "vue";
|
import { ref, reactive, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
import type {
|
import type { ObjectSalaryRef } from "@/modules/13_salary/interface/index/Main";
|
||||||
ObjectSalaryRef,
|
|
||||||
} from "@/modules/13_salary/interface/index/Main";
|
|
||||||
|
|
||||||
|
|
||||||
import Header from "@/components/DialogHeader.vue";
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
|
@ -32,7 +29,7 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
defult: '',
|
defult: "",
|
||||||
},
|
},
|
||||||
isActive: {
|
isActive: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
@ -74,13 +71,9 @@ const ObjectRef: ObjectSalaryRef = {
|
||||||
endDate: endDateRef,
|
endDate: endDateRef,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const documentFile = ref<any>(null);
|
const documentFile = ref<any>(null);
|
||||||
const itemsDocument = ref<any>([]);
|
const itemsDocument = ref<any>([]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function fetchDocumentFile(id: string) {
|
async function fetchDocumentFile(id: string) {
|
||||||
await http
|
await http
|
||||||
.get(config.API.salaryChartFile(id))
|
.get(config.API.salaryChartFile(id))
|
||||||
|
|
@ -89,9 +82,9 @@ async function fetchDocumentFile(id: string) {
|
||||||
itemsDocument.value = list;
|
itemsDocument.value = list;
|
||||||
})
|
})
|
||||||
.catch((err) => {})
|
.catch((err) => {})
|
||||||
.finally(()=>{
|
.finally(() => {
|
||||||
hideLoader()
|
hideLoader();
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
|
|
@ -291,12 +284,9 @@ async function downloadFile(url: string, type: string, fileName: string) {
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<div class="col-xs-12 col-md-3">
|
<div class="col-xs-12 col-md-3">
|
||||||
|
<div class="row col-12 q-col-gutter-y-sm">
|
||||||
|
<div class="col-12 row">
|
||||||
|
<div v-if="!props.isActive" class="full-width">
|
||||||
<div class="row col-12 q-col-gutter-y-sm">
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div v-if="!props.isActive" class="full-width">
|
|
||||||
<q-file
|
<q-file
|
||||||
v-if="props.typeAction === 'edit'"
|
v-if="props.typeAction === 'edit'"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
|
|
@ -324,68 +314,58 @@ async function downloadFile(url: string, type: string, fileName: string) {
|
||||||
</template>
|
</template>
|
||||||
</q-file>
|
</q-file>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="itemsDocument.length > 0" class="col-xs-12 row">
|
|
||||||
<q-list
|
|
||||||
class="full-width rounded-borders"
|
|
||||||
bordered
|
|
||||||
separator
|
|
||||||
>
|
|
||||||
<q-item
|
|
||||||
v-for="file in itemsDocument"
|
|
||||||
:key="file.id"
|
|
||||||
clickable
|
|
||||||
v-ripple
|
|
||||||
>
|
|
||||||
<q-item-section>{{ file.name }}</q-item-section>
|
|
||||||
<q-item-section avatar>
|
|
||||||
<div class="row q-col-gutter-md">
|
|
||||||
<div>
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
size="12px"
|
|
||||||
color="blue"
|
|
||||||
icon="mdi-download-outline"
|
|
||||||
@click="onClickDonwload(file.name)"
|
|
||||||
>
|
|
||||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
<div v-if="!props.isActive">
|
|
||||||
<q-btn
|
|
||||||
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
size="12px"
|
|
||||||
color="red"
|
|
||||||
icon="mdi-delete-outline"
|
|
||||||
@click="onClickDeleteFile(file.name)"
|
|
||||||
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" v-else>
|
|
||||||
<q-card class="q-pa-md" bordered>
|
|
||||||
ไม่มีรายการเอกสาร
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-if="itemsDocument.length > 0" class="col-xs-12 row">
|
||||||
|
<q-list class="full-width rounded-borders" bordered separator>
|
||||||
|
<q-item
|
||||||
|
v-for="file in itemsDocument"
|
||||||
|
:key="file.id"
|
||||||
|
clickable
|
||||||
|
v-ripple
|
||||||
|
>
|
||||||
|
<q-item-section>{{ file.name }}</q-item-section>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div>
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
size="12px"
|
||||||
|
color="blue"
|
||||||
|
icon="mdi-download-outline"
|
||||||
|
@click="onClickDonwload(file.name)"
|
||||||
|
>
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div v-if="!props.isActive">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
size="12px"
|
||||||
|
color="red"
|
||||||
|
icon="mdi-delete-outline"
|
||||||
|
@click="onClickDeleteFile(file.name)"
|
||||||
|
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12" v-else>
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ interface DataOption {
|
||||||
interface DataOptionShort {
|
interface DataOptionShort {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
shortCode: string
|
shortCode: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NewPagination {
|
interface NewPagination {
|
||||||
|
|
@ -23,9 +23,13 @@ interface ItemsMenu {
|
||||||
type: string;
|
type: string;
|
||||||
}
|
}
|
||||||
interface ObjectSalaryRef {
|
interface ObjectSalaryRef {
|
||||||
name: object | null;
|
salaryType: object | null;
|
||||||
|
// name: object | null;
|
||||||
posTypId: object | null;
|
posTypId: object | null;
|
||||||
posLevelId: object | null;
|
posLevelId: object | null;
|
||||||
|
date: object | null;
|
||||||
|
startDate: object | null;
|
||||||
|
endDate: object | null;
|
||||||
|
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
@ -42,16 +46,16 @@ interface ObjectSalaryRateRef {
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FormData{
|
interface FormData {
|
||||||
name:string
|
name: string;
|
||||||
posTypeId:string
|
posTypeId: string;
|
||||||
posLevelId:string
|
posLevelId: string;
|
||||||
isActive:boolean
|
isActive: boolean;
|
||||||
date:Date |null
|
date: Date | null;
|
||||||
startDate:Date |null
|
startDate: Date | null;
|
||||||
endDate:Date |null
|
endDate: Date | null;
|
||||||
details:string
|
details: string;
|
||||||
isSpecial:boolean
|
isSpecial: boolean;
|
||||||
}
|
}
|
||||||
export type {
|
export type {
|
||||||
DataOption,
|
DataOption,
|
||||||
|
|
|
||||||
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 mainPage = () => import("@/modules/15_development/views/MainPage.vue");
|
||||||
|
const mainForm = () =>
|
||||||
|
import("@/modules/15_development/components/MainTab.vue");
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
|
|
@ -11,4 +13,24 @@ export default [
|
||||||
Role: "development",
|
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 { defineStore } from "pinia";
|
||||||
|
import { reactive } from "vue";
|
||||||
|
|
||||||
// store
|
// store
|
||||||
export const useDevelopmentDataStore = defineStore("developmentDataStore", () => {
|
export const useDevelopmentDataStore = defineStore(
|
||||||
return {};
|
"developmentDataStore",
|
||||||
});
|
() => {
|
||||||
|
const formFilter = reactive({
|
||||||
|
year: new Date().getFullYear(),
|
||||||
|
keyword: "",
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
formFilter,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,199 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useQuasar } from "quasar";
|
import { ref, onMounted } from "vue";
|
||||||
|
import { useQuasar, type QTableProps } from "quasar";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
|
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
/** use*/
|
/** use*/
|
||||||
|
const store = useDevelopmentDataStore();
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const router = useRouter();
|
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>
|
</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>
|
<style scoped></style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue