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

addlist ทดลองงาน

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-08-03 10:12:01 +07:00
parent c752bfede6
commit c46f453f34
1 changed files with 391 additions and 316 deletions
Download patch file Download diff file Expand all files Collapse all files

705
src/modules/05_placement/components/probation/MainProbation.vue
View file

@ -1,87 +1,96 @@
<template> <template>
<div class="toptitle text-dark col-12 row items-center">รายการผู้ทดลองปฏิบัติหน้าที่ราชการ</div> <div class="toptitle text-dark col-12 row items-center">
<q-card flat bordered class="col-12 q-mt-sm q-pa-md"> รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
<div class="row q-col-gutter-sm"> </div>
<div class="row col-12 q-col-gutter-sm"> <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div> <div class="row q-col-gutter-sm">
<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus"> <div class="row col-12 q-col-gutter-sm">
<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip> <div>
</q-btn> <q-btn
</div> @click="modal = true"
<q-space /> size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input <q-input
class="col-xs-12 col-sm-3 col-md-2" class="col-xs-12 col-sm-3 col-md-2"
standout standout
dense dense
v-model="filterKeyword" v-model="filterKeyword"
ref="filterRef" ref="filterRef"
outlined outlined
debounce="300" debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" /> <q-icon v-if="filterKeyword == ''" name="search" />
<q-icon <q-icon
v-if="filterKeyword !== ''" v-if="filterKeyword !== ''"
name="clear" name="clear"
class="cursor-pointer" class="cursor-pointer"
@click="resetFilter" @click="resetFilter"
/> />
</template> </template>
</q-input> </q-input>
<q-select <q-select
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
outlined outlined
dense dense
options-dense options-dense
:display-value="$q.lang.table.columns" :display-value="$q.lang.table.columns"
emit-value emit-value
map-options map-options
:options="columns" :options="columns"
option-value="name" option-value="name"
options-cover options-cover
style="min-width: 150px" style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2" class="col-xs-12 col-sm-3 col-md-2"
/> />
</div> </div>
<div class="col-12"> <div class="col-12">
<q-table <q-table
ref="table" ref="table"
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
:filter="filterKeyword" :filter="filterKeyword"
row-key="Order" row-key="Order"
flat flat
bordered bordered
:paging="true" :paging="true"
dense dense
class="custom-header-table" class="custom-header-table"
v-bind="attrs" v-bind="attrs"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" :pagination-label="paginationLabel"
v-model:pagination="pagination" v-model:pagination="pagination"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span> <span class="text-weight-medium">{{ col.label }}</span>
</q-th> </q-th>
</q-tr> </q-tr>
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"> <q-tr
<q-td :props="props"
v-for="col in props.cols" class="cursor-pointer"
:key="col.name" @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"
:props="props" >
> <q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'"> <div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</div> </div>
<!-- <div v-else-if="col.name == 'status'"> <!-- <div v-else-if="col.name == 'status'">
<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange"> <q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip> <q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
</q-icon> </q-icon>
@ -92,136 +101,151 @@
<q-tooltip>ผ่านการทดลองงาน</q-tooltip> <q-tooltip>ผ่านการทดลองงาน</q-tooltip>
</q-icon> </q-icon>
</div> --> </div> -->
<div v-else> <div v-else>
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
<template v-slot:pagination="scope"> <template v-slot:pagination="scope">
<q-pagination <q-pagination
v-model="pagination.page" v-model="pagination.page"
active-color="primary" active-color="primary"
color="dark" color="dark"
:max="scope.pagesNumber" :max="scope.pagesNumber"
:max-pages="5" :max-pages="5"
size="sm" size="sm"
boundary-links boundary-links
direction-links direction-links
></q-pagination> ></q-pagination>
</template> </template>
</q-table> </q-table>
</div> </div>
</div> </div>
</q-card> </q-card>
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="width: 900px; max-width: 80vw;"> <q-card style="width: 900px; max-width: 80vw">
<q-form ref="myForm"> <q-form ref="myForm">
<DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" /> <DialogHeader
<q-separator /> tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
<q-card-section class="q-pa-md q-col-gutter-sm"> :close="clickClose"
<q-input />
class="col-12" <q-separator />
standout <q-card-section class="q-pa-md q-col-gutter-sm">
dense <q-input
v-model="filterKeyword2" class="col-12"
ref="filterRef2" standout
outlined dense
debounce="300" v-model="filterKeyword2"
placeholder="ค้นหา" ref="filterRef2"
> outlined
<template v-slot:append> debounce="300"
<q-icon v-if="filterKeyword2 == ''" name="search" /> placeholder="ค้นหา"
<q-icon >
v-if="filterKeyword2 !== ''" <template v-slot:append>
name="clear" <q-icon v-if="filterKeyword2 == ''" name="search" />
class="cursor-pointer" <q-icon
@click="resetFilter2" v-if="filterKeyword2 !== ''"
/> name="clear"
</template> class="cursor-pointer"
</q-input> @click="resetFilter2"
<div class="col-12"> />
<q-table </template>
ref="table2" </q-input>
:columns="columns2" <div class="col-12">
:rows="rows2" <q-table
:filter="filterKeyword2" ref="table2"
row-key="Order" :columns="columns2"
flat :rows="rows2"
bordered :filter="filterKeyword2"
:paging="true" row-key="Order"
dense flat
class="custom-header-table" bordered
v-bind="attrs" :paging="true"
:visible-columns="visibleColumns2" dense
:pagination-label="paginationLabel" class="custom-header-table"
v-model:pagination="pagination" v-bind="attrs"
> :pagination-label="paginationLabel"
<template v-slot:header="props"> v-model:pagination="pagination"
<q-tr :props="props"> >
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <template v-slot:header="props">
<span class="text-weight-medium">{{ col.label }}</span> <q-tr :props="props">
</q-th> <q-th
<q-th auto-width /> v-for="col in props.cols"
</q-tr> :key="col.name"
</template> :props="props"
<template v-slot:body="props"> >
<q-tr :props="props" class="cursor-pointer"> <span class="text-weight-medium">{{ col.label }}</span>
<q-td </q-th>
v-for="col in props.cols" <q-th auto-width />
:key="col.name" </q-tr>
:props="props" </template>
> <template v-slot:body="props">
<div v-if="col.name == 'no'"> <q-tr :props="props" class="cursor-pointer">
{{ props.rowIndex + 1 }} <q-td
</div> v-for="col in props.cols"
<div v-else> :key="col.name"
{{ col.value }} :props="props"
</div> >
</q-td> <div v-if="col.name == 'no'">
<q-td auto-width> {{ props.rowIndex + 1 }}
<q-btn </div>
dense <div v-else>
class="q-px-md" {{ col.value }}
outline </div>
color="primary" </q-td>
v-close-popup <q-td auto-width>
label="เพิ่ม" <q-btn
> dense
</q-btn> class="q-px-md"
</q-td> outline
</q-tr> color="primary"
</template> label="เพิ่ม"
<template v-slot:pagination="scope"> @click="clickAdd(props.row.id)"
<q-pagination >
v-model="pagination.page" </q-btn>
active-color="primary" </q-td>
color="dark" </q-tr>
:max="scope.pagesNumber" </template>
:max-pages="5" <template v-slot:pagination="scope">
size="sm" <q-pagination
boundary-links v-model="pagination.page"
direction-links active-color="primary"
></q-pagination> color="dark"
</template> :max="scope.pagesNumber"
</q-table> :max-pages="5"
</div> size="sm"
</q-card-section> boundary-links
</q-form> direction-links
</q-card> ></q-pagination>
</q-dialog> </template>
</q-table>
</div>
</q-card-section>
</q-form>
</q-card>
</q-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue"; import { ref, useAttrs, onMounted, watch } from "vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { FormMainProbation, FormMainProbation2 } from "@/modules/05_placement/interface/request/Main"; import type {
FormMainProbation,
FormMainProbation2,
} from "@/modules/05_placement/interface/request/Main";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue"; import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import router from "@/router"; import router from "@/router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
const $q = useQuasar(); //ใช้ noti quasar const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader } = mixin;
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "desc",
@ -233,7 +257,7 @@ const pagination = ref({
const visibleColumns = ref<string[]>([ const visibleColumns = ref<string[]>([
"no", "no",
"name", "name",
"position", "position",
"level", "level",
"institution", "institution",
"time", "time",
@ -261,7 +285,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "position", name: "position",
align: "left", align: "left",
label: "ตำแหน่งในสายงาน", label: "ตำแหน่งในสายงาน",
@ -270,7 +294,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "level", name: "level",
align: "left", align: "left",
label: "ระดับ", label: "ระดับ",
@ -279,7 +303,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "institution", name: "institution",
align: "left", align: "left",
label: "สังกัด", label: "สังกัด",
@ -288,7 +312,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "time", name: "time",
align: "center", align: "center",
label: "ครั้งที่ทดลองงาน", label: "ครั้งที่ทดลองงาน",
@ -297,7 +321,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "orderNum", name: "orderNum",
align: "center", align: "center",
label: "เลขที่คําสั่งบรรจุแต่งตั้ง", label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
@ -314,69 +338,61 @@ const columns = ref<QTableProps["columns"]>([
field: "status", field: "status",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
} },
]); ]);
// ข้อมูลตาราง (จำลอง) // ข้อมูลตาราง (จำลอง)
const rows = ref<FormMainProbation[]>([ const rows = ref<FormMainProbation[]>([
{ {
no:"1", no: "1",
name: "นายสมคิด ยอดใจ ", name: "นายสมคิด ยอดใจ ",
position: "นักวิชาการพัสดุ", position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ", level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒", institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
time: "1", time: "1",
status: "อยู่ระหว่างการทดลองงาน", status: "อยู่ระหว่างการทดลองงาน",
orderNum: "11/2566", orderNum: "11/2566",
}, },
{ {
no:"2", no: "2",
name: "นายเกียรติศักดิ์ บัณฑิต", name: "นายเกียรติศักดิ์ บัณฑิต",
position: "นักวิชาการพัสดุ", position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ", level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒", institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
time: "1", time: "1",
status: "อยู่ระหว่างการทดลองงาน", status: "อยู่ระหว่างการทดลองงาน",
orderNum: "11/2566", orderNum: "11/2566",
}, },
{ {
no:"3", no: "3",
name: "นางสาวกัณฐิมา กาฬสินธุ์", name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป", position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ", level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร", institution: "กลุ่มงานช่วยนักบริหาร",
time: "1", time: "1",
status: "อยู่ระหว่างการทดลองงาน", status: "อยู่ระหว่างการทดลองงาน",
orderNum: "11/2566", orderNum: "11/2566",
}, },
{ {
no:"4", no: "4",
name: "นางสาวเมขลา กระจ่างมนตรี", name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป", position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ", level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร", institution: "กลุ่มงานช่วยนักบริหาร",
time: "1", time: "1",
status: "ไม่ผ่านการทดลอง", status: "ไม่ผ่านการทดลอง",
orderNum: "11/2566", orderNum: "11/2566",
}, },
{ {
no:"5", no: "5",
name: "นางสาวฐิติรัตน์ พงษ์ศิริ", name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
position: "นักจัดการงานทั่วไป", position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ", level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร", institution: "กลุ่มงานช่วยนักบริหาร",
time: "1", time: "1",
status: "ผ่านการทดลองงาน", status: "ผ่านการทดลองงาน",
orderNum: "11/2566", orderNum: "11/2566",
} },
]);
const visibleColumns2 = ref<string[]>([
"no",
"name",
"position",
"level",
"institution"
]); ]);
// หัวตาราง2 // หัวตาราง2
@ -388,18 +404,18 @@ const columns2 = ref<QTableProps["columns"]>([
sortable: true, sortable: true,
field: "no", field: "no",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px" style: "font-size: 14px",
}, },
{ {
name: "name", name: "fullname",
align: "left", align: "left",
label: "ชื่อ-สกุล", label: "ชื่อ-สกุล",
sortable: true, sortable: true,
field: "name", field: "fullname",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "position", name: "position",
align: "left", align: "left",
label: "ตำแหน่งในสายงาน", label: "ตำแหน่งในสายงาน",
@ -408,7 +424,7 @@ const columns2 = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "level", name: "level",
align: "left", align: "left",
label: "ระดับ", label: "ระดับ",
@ -417,56 +433,104 @@ const columns2 = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "institution", name: "organizationOrganization",
align: "left", align: "left",
label: "สังกัด", label: "สังกัด",
sortable: true, sortable: true,
field: "institution", field: "organizationOrganization",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
} },
]); ]);
// ข้อมูลตาราง (จำลอง) // ข้อมูลตาราง (จำลอง)
const rows2 = ref<FormMainProbation2[]>([ const rows2 = ref<FormMainProbation2[]>([
{ // {
no:"1", // no: "1",
name: "นายใจดี ยอดใจ ", // name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ", // position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ", // level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒", // institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
}, // },
{ // {
no:"2", // no: "2",
name: "นายจักกริน บัณฑิต", // name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ", // position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ", // level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒", // institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
}, // },
{ // {
no:"3", // no: "3",
name: "นางสาวกัณฐิมา กาฬสินธุ์", // name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป", // position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ", // level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร", // institution: "กลุ่มงานช่วยนักบริหาร",
}, // },
{ // {
no:"4", // no: "4",
name: "นางสาวเมขลา กระจ่างมนตรี", // name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป", // position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ", // level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร", // institution: "กลุ่มงานช่วยนักบริหาร",
}, // },
{ // {
no:"5", // no: "5",
name: "นางสาวฐิติรัตน์ พงษ์ศิริ", // name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
position: "นักจัดการงานทั่วไป", // position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ", // level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร", // institution: "กลุ่มงานช่วยนักบริหาร",
} // },
]); ]);
onMounted(async () => {});
watch(modal, () => {
if (modal.value === true) {
fecthOrganiz();
}
});
const fecthOrganiz = async () => {
showLoader();
await http
.get(config.API.profileOrganizRoot)
.then((res) => {
console.log(res);
let id = res.data.result[0].id;
if (id !== "") {
findlist(id);
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const findlist = async (id: string) => {
let data = [
{ criteriaType: "is_retire", criteriaValue: "false" },
{ criteriaType: "is_probation", criteriaValue: "true" },
];
await http
.post(config.API.profileSearchNewOcIdType(id, "all"), {
criterias: data,
})
.then((res) => {
console.log("res:", res);
rows2.value = res.data.result.map((e: any) => ({
id: e.id,
fullname: e.fullname,
position: e.position,
level: e.positionEmployeeLevel,
organizationOrganization: e.oc,
}));
});
};
const clickDelete = (id: string) => { const clickDelete = (id: string) => {
$q.dialog({ $q.dialog({
title: "ยืนยันการลบข้อมูล", title: "ยืนยันการลบข้อมูล",
@ -476,17 +540,29 @@ const clickDelete = (id: string) => {
color: "negative", color: "negative",
}, },
persistent: true, persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = (id: string) => {
$q.dialog({
title: "ยืนยันการเพิ่มข้อมูล",
message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
}) })
.onOk(async () => { .onOk(async () => {
console.log("เพิ่ม:", id);
}) })
.onCancel(() => {}) .onCancel(() => {})
.onDismiss(() => {}); .onDismiss(() => {});
}; };
const clickAdd = () => {
modal.value = true
};
const clickClose = async () => { const clickClose = async () => {
modal.value = false; modal.value = false;
}; };
@ -513,7 +589,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total; if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total; else return start + "-" + end + " ใน " + total;
}; };
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>