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

Component สำหรับค้นหาคนในทะเบียนประวัติ

Browse source
This commit is contained in:
setthawutttty 2023-11-14 16:46:07 +07:00
parent b49cdaf913
commit 0fd4474daf
1 changed files with 360 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

360
src/components/Dialogs/AddPersonal.vue Normal file
View file

@ -0,0 +1,360 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
interface typeOp {
id: string;
name: string;
}
interface tableType {
id: string;
cardId: string;
prefix: string;
firstName: string;
lastName: string;
position: string;
level: string;
degree: string;
oc: string;
fullName: string;
}
const rows = ref<tableType[]>([]);
const type = ref<string>("001");
const search = ref<string>("");
const selected = ref<any>([]);
const dataObject = ref<any>([]);
const typeOps = ref<typeOp[]>([
{ id: "001", name: "เลขประจำตัวประชาชน" },
{ id: "002", name: "ชื่อ" },
{ id: "003", name: "นามสกุล" },
]);
/** หัวข้อที่เเสดงในตาราง */
const visibleColumns = ref<string[]>([
"no",
"cardId",
"fullName",
"position",
"level",
]);
/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "cardId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "cardId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** รับค่ามาจาก หน้าหลัก */
const props = defineProps({
modal: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
desc: {
type: String,
default: "",
},
close: {
type: Function,
default: () => console.log("not function"),
},
save: {
type: Function,
default: () => console.log("not function"),
},
});
/** ปิด dialog */
async function close() {
console.log("close");
props.close();
}
/** เปิด dialog ยืนยัน */
function savePost() {
dialogConfirm($q, () => saveData());
}
/** save data หลังจาก ยืนยัน */
function saveData() {
console.log("save #in component", selected.value);
props.save();
}
/** input ค้นหา */
function searchInput() {
const data = dataObject.value;
if (type.value === "001") {
rows.value = data.filter((item: any) => item.cardId === search.value);
} else if (type.value === "002") {
rows.value = data.filter((item: any) => item.firstName === search.value);
} else if (type.value === "003") {
rows.value = data.filter((item: any) => item.lastName === search.value);
}
}
/** update ตาราง เมื่อ input ว่าง */
function updateInput() {
if (!search.value) {
rows.value = dataObject.value;
}
}
/** update เมื่อเปลี่ยน option */
function updateSelect() {
rows.value = dataObject.value;
search.value = "";
}
/** เรียกข้อมูลเมื่อเริ่มโหลด หน้า dialog mock */
onMounted(() => {
const data = [
{
id: "001",
cardId: "0000000000001",
prefix: "นาง",
firstName: "ศิรินภา",
lastName: "คงน้อย",
position: "ตำเเหน่ง1",
level: "level1",
degree: "ป.ตรี",
oc: "สำนักงาน 1",
fullName: "นางศิรินภา คงน้อย",
},
{
id: "002",
cardId: "0000000000002",
prefix: "นาย",
firstName: "แก้ว",
lastName: "คำ",
position: "ตำแหน่ง2",
level: "level2",
degree: "ป.โท",
oc: "สำนักงาน 2",
fullName: "นางแก้ว คำ",
},
{
id: "003",
cardId: "0000000000003",
prefix: "นาย",
firstName: "ภัทรานุย",
lastName: "คงนอย",
position: "ตำแหน่ง2",
level: "level3",
degree: "ป.เอก",
oc: "สำนักงาน 3",
fullName: "นางภัทรานุย คงนอย",
},
];
dataObject.value = data;
rows.value = data;
});
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="min-width: 60vw">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">{{
props.title
}}</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<q-card-section class="q-pa-md bg-grey-1">
<div class="row col-12 q-col-gutter-sm items-start">
<div class="col-12 col-sm-6 col-md-4">
<q-select
v-model="type"
:options="typeOps"
emit-value
dense
@update:model-value="updateSelect"
map-options
outlined
option-label="name"
option-value="id"
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-input
v-model="search"
outlined
clearable
@update:model-value="updateInput"
dense
:label="
type === '001'
? 'ค้นหาจากเลขบัตรประชาชน'
: type === '002'
? 'ค้นหาจากชื่อ'
: type === '003'
? 'ค้นหาจากนามสกุล'
: ''
"
/>
</div>
<div class="col-12 col-sm-6 col-md-4">
<q-btn
color="public"
label="ค้นหา"
class="full-width"
style="padding: 7px 0 7px 0"
@click="searchInput()"
>
</q-btn>
</div>
</div>
<div class="full-width q-mt-sm">
<d-table
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.checkBox"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th class="text-center">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-th>
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<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">
<td class="text-center">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card-section>
<q-separator />
<div class="row justify-end q-px-md q-py-sm items-center">
<q-btn
dense
push
unelevated
color="positive"
id="onSubmit"
class="q-px-md q-py-xs"
@click="savePost"
>
<q-icon left name="add" />
<div>เพิ่ม</div>
<!-- icon="mdi-content-save-outline" -->
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</div>
</q-card>
</q-dialog>
</template>