ui รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
179a2b395e
commit
c084262a40
9 changed files with 1072 additions and 93 deletions
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue