ทะเบียนประวัติ: แก้ไขUI
This commit is contained in:
Oat
parent
24302d01d7
commit
da3e6ee370
6 changed files with 464 additions and 234 deletions
BIN
src/assets/registry-banner.png
Normal file
BIN
src/assets/registry-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 486 KiB |
|
|
@ -1,96 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { QTableColumn } from "quasar";
|
||||
|
||||
const rows = [
|
||||
{
|
||||
no: 1,
|
||||
citizenId: "1231231231234",
|
||||
fullName: "นางสาวกัณฐิมา กานสิน",
|
||||
posNo: "สกก.1",
|
||||
position: "นักบริหาร",
|
||||
posPath: "บริหาร",
|
||||
posType: "บริหาร",
|
||||
posLevel: "ชำนาญการพิเศษ",
|
||||
posOc: "ฝ่ายบริหารงานทั่วไป",
|
||||
year: 2566,
|
||||
salary: "40,000",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
citizenId: "5555555555555",
|
||||
fullName: "นายธามไทย คนคูเมือง",
|
||||
posNo: "สกก.5",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
posPath: "จัดการงานทั่วไป",
|
||||
posType: "วิชาการ",
|
||||
posLevel: "ปฏิบัติการ",
|
||||
posOc: "ฝ่ายบริหารงานทั่วไป",
|
||||
year: 2566,
|
||||
salary: "25,000",
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
citizenId: "0000000000000",
|
||||
fullName: "นายชัชชาติ สิทธิพงศ์",
|
||||
posNo: "สกก.5",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
posPath: "จัดการงานทั่วไป",
|
||||
posType: "วิชาการ",
|
||||
posLevel: "ปฏิบัติการ",
|
||||
posOc: "ฝ่ายบริหารงานทั่วไป",
|
||||
year: 2566,
|
||||
salary: "25,000",
|
||||
},
|
||||
] satisfies Record<string, any>[];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<q-card
|
||||
v-for="row in rows"
|
||||
:key="row.fullName"
|
||||
style="max-width: 300px"
|
||||
class="q-mr-md"
|
||||
>
|
||||
<div class="flex justify-center q-py-md q-px-md">
|
||||
<q-item-section avatar class="q-pa-none">
|
||||
<img
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="col-4 img-info q-mt-md"
|
||||
style="width: 120px; height: 120px; border-radius: 50%"
|
||||
/>
|
||||
<div class="text-weight-medium q-mt-md">{{ row.fullName }}</div>
|
||||
<div class="text-weight-light full-width text-center">
|
||||
{{ row.citizenId }}
|
||||
</div>
|
||||
</q-item-section>
|
||||
<div class="bg-grey-3 q-my-md q-py-md" style="height: 20%; width: 100%">
|
||||
<div class="row q-pl-md">
|
||||
<div class="col">
|
||||
<div class="text-weight-light">ตำแหน่งเลขที่</div>
|
||||
<div class="text-weight-medium">{{ row.posNo }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-weight-light">ตำแหน่ง</div>
|
||||
<div class="text-weight-medium">{{ row.position }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-pl-md q-pt-md">
|
||||
<div class="col">
|
||||
<div class="text-weight-light">ประเภท</div>
|
||||
<div class="text-weight-medium">{{ row.posType }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-weight-light">ระดับชั้นงาน</div>
|
||||
<div class="text-weight-medium">{{ row.posLevel }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<q-separator class="q-mb-sm" color="black" />
|
||||
<span style="font-size: 16px; font-weight: bold">ดูเพิ่มเติม</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,23 +1,94 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, reactive } from "vue";
|
||||
import SearchBanner from "@/assets/registry-banner.png";
|
||||
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
|
||||
import type { FormData } from "@/modules/04_registryNew/interface/index/form";
|
||||
|
||||
const search = ref<string>("");
|
||||
const dropdownInput = ref<boolean>(false);
|
||||
const name = ref<string>("");
|
||||
const citizenId = ref<number>();
|
||||
const retireYear = ref<number>();
|
||||
const retireYear = ref<number | null>(null);
|
||||
const year = ref<number>();
|
||||
const level = ref<number>();
|
||||
const searchType = ref<string>("fullName");
|
||||
const posLevel = ref<string>("");
|
||||
const posExecutive = ref<string>("");
|
||||
const posType = ref<string>("");
|
||||
const type = ref<string>("");
|
||||
const posNo = ref<string>("");
|
||||
const posOc = ref<string>("");
|
||||
|
||||
const formData = reactive<FormData>({
|
||||
citizenId: "",
|
||||
fullName: "",
|
||||
posLevel: "",
|
||||
posOc: "",
|
||||
posPath: "",
|
||||
retireYear: null,
|
||||
type: "",
|
||||
year: null,
|
||||
isShowRetire: false,
|
||||
isProbation: false,
|
||||
});
|
||||
|
||||
const employeeClassOps = ref<DataOption[]>([
|
||||
{ id: "officer", name: "ข้าราชการ กทม.สามัญ" },
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
]);
|
||||
|
||||
const posLevelMock = ref<DataOption[]>([
|
||||
{ id: "officer", name: "1" },
|
||||
{ id: "perm", name: "2" },
|
||||
{ id: "temp", name: "3" },
|
||||
]);
|
||||
|
||||
const searchTypeOption = ref<DataOption[]>([
|
||||
{ id: "fullName", name: "ชื่อ-นามสกุล" },
|
||||
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
||||
{ id: "posNo", name: "ตำแหน่งเลขที่" },
|
||||
{ id: "position", name: "ตำแหน่งสายงาน" },
|
||||
]);
|
||||
|
||||
const TypeOption = ref<DataOption[]>([
|
||||
{ id: "1", name: "ข้าราชการ กทม.สามัญ" },
|
||||
{ id: "2", name: "ลูกจ้างประจำ" },
|
||||
{ id: "3", name: "ลููกจ้างชั่วคราว" },
|
||||
]);
|
||||
|
||||
const posTypeOption = ref<DataOption[]>([
|
||||
{ id: "1", name: "ทั่วไป" },
|
||||
{ id: "2", name: "วิชาการ" },
|
||||
{ id: "3", name: "อำนวยการ" },
|
||||
{ id: "4", name: "บริหาร" },
|
||||
]);
|
||||
|
||||
const posLevelOption = ref<DataOption[]>([
|
||||
{ id: "1", name: "ชำนาญงาน" },
|
||||
{ id: "2", name: "ปฏิบัติงาน" },
|
||||
{ id: "3", name: "อาวุโส" },
|
||||
{ id: "4", name: "ทักษะพิเศษ" },
|
||||
]);
|
||||
|
||||
const posExecutiveOption = ref<DataOption[]>([
|
||||
{ id: "1", name: "นักบริหาร" },
|
||||
{ id: "2", name: "ผู้ช่วยหัวหน้าสำนักงาน" },
|
||||
{ id: "3", name: "ผู้ช่วยหัวหน้าสำนักงานก.ก." },
|
||||
{ id: "4", name: "นักการช่าง" },
|
||||
]);
|
||||
|
||||
const isActive1 = ref<boolean>(false);
|
||||
const isActive2 = ref<boolean>(false);
|
||||
|
||||
function onSubmit() {
|
||||
dropdownInput.value = false;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="column full-width justify-center items-center inline-block bg-primary q-py-xl q-px-xl"
|
||||
class="column full-width justify-center items-center inline-block q-py-xl q-px-xl banner"
|
||||
style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem"
|
||||
:style="{
|
||||
background: `url('${SearchBanner}') center center no-repeat`,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
|
|
@ -31,6 +102,160 @@ const isActive2 = ref<boolean>(false);
|
|||
ค้นหาข้อมูลทะเบียนประวัติ
|
||||
</span>
|
||||
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="searchType"
|
||||
:options="searchTypeOption"
|
||||
emit-value
|
||||
dense
|
||||
emit-option
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
style="border-radius: 0.4rem; background-color: whitesmoke"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="search"
|
||||
clearable
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<!-- <template v-slot:append>
|
||||
<q-btn
|
||||
outlined
|
||||
color="blue"
|
||||
icon="filter_list"
|
||||
dense
|
||||
size="12px"
|
||||
@click="() => (dropdownInput = !dropdownInput)"
|
||||
/>
|
||||
</template> -->
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<q-btn color="blue" unelevated label="ค้นหา" @click="onSubmit" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select
|
||||
rounded
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
clearable
|
||||
emit-option
|
||||
class="custom-select"
|
||||
label-color="white"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
v-model="type"
|
||||
:options="TypeOption"
|
||||
label="ประเภทตำแหน่ง"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select
|
||||
rounded
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
clearable
|
||||
emit-option
|
||||
class="custom-select"
|
||||
label-color="white"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
v-model="posType"
|
||||
:options="posTypeOption"
|
||||
label="ประเภทตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select
|
||||
rounded
|
||||
dense
|
||||
emit-value
|
||||
emit-option
|
||||
label-color="white"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
outlined
|
||||
class="custom-select"
|
||||
clearable
|
||||
v-model="posLevel"
|
||||
:options="posLevelOption"
|
||||
label="ระดับตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select
|
||||
rounded
|
||||
outlined
|
||||
label-color="white"
|
||||
emit-value
|
||||
dense
|
||||
emit-option
|
||||
class="custom-select"
|
||||
clearable
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
v-model="posExecutive"
|
||||
:options="posExecutiveOption"
|
||||
label="ตำแหน่งทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<datepicker
|
||||
class="col-2"
|
||||
menu-class-name="modalfix"
|
||||
v-model="retireYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
clearable
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="inputgreen cursor-pointer custom-select"
|
||||
hide-bottom-space
|
||||
rounded
|
||||
label-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:model-value="retireYear === null ? null : retireYear + 543"
|
||||
:label="`${'ปีเกษียณ'}`"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="retireYear !== null"
|
||||
name="close"
|
||||
@click="retireYear = null"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
|
||||
<div
|
||||
class="flex full-width items-center bg-white"
|
||||
|
|
@ -38,7 +263,7 @@ const isActive2 = ref<boolean>(false);
|
|||
>
|
||||
<div
|
||||
v-if="dropdownInput"
|
||||
class="full-width bg-white q-pa-md"
|
||||
class="full-width bg-white q-px-md q-pt-sm q-pb-md"
|
||||
style="
|
||||
top: 85%;
|
||||
position: absolute;
|
||||
|
|
@ -57,42 +282,88 @@ const isActive2 = ref<boolean>(false);
|
|||
>
|
||||
<div class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="name"
|
||||
label="ข้าราชการ กทม.สามัญ"
|
||||
v-model="formData.type"
|
||||
label="ประเภท"
|
||||
class="bg-white"
|
||||
clearable
|
||||
:options="employeeClassOps"
|
||||
emit-value
|
||||
emit-option
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="citizenId"
|
||||
v-model="formData.citizenId"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
class="bg-white"
|
||||
clearable
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="citizenId"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
clearable
|
||||
v-model="formData.fullName"
|
||||
label="ชื่อ - นามสกุล"
|
||||
class="bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-gutter-md">
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="retireYear"
|
||||
label="ปีเกษียณ"
|
||||
class="bg-white"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-2 bg-white"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.retireYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
clearable
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="inputgreen cursor-pointer"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:model-value="
|
||||
formData.retireYear === null
|
||||
? null
|
||||
: formData.retireYear + 543
|
||||
"
|
||||
:label="`${'ปีเกษียณ'}`"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="formData.retireYear !== null"
|
||||
name="close"
|
||||
@click="formData.retireYear = null"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
|
|
@ -101,15 +372,24 @@ const isActive2 = ref<boolean>(false);
|
|||
v-model="year"
|
||||
label="อายุราชการ (ปี)"
|
||||
class="bg-white"
|
||||
clearable
|
||||
mask="###"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="level"
|
||||
label="ระดับ"
|
||||
v-model="formData.posLevel"
|
||||
label="ประเภท"
|
||||
class="bg-white"
|
||||
:options="posLevelMock"
|
||||
emit-value
|
||||
emit-option
|
||||
clearable
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
map-options
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
|
|
@ -119,11 +399,13 @@ const isActive2 = ref<boolean>(false);
|
|||
v-model="posNo"
|
||||
label="ตำแหน่งเลขที่"
|
||||
class="bg-white"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
clearable
|
||||
dense
|
||||
v-model="posOc"
|
||||
label="ตำแหน่งทางการบริหาร"
|
||||
|
|
@ -134,125 +416,35 @@ const isActive2 = ref<boolean>(false);
|
|||
</div>
|
||||
<div
|
||||
class="flex q-mt-xs"
|
||||
style="align-content: flex-end; flex-direction: row-reverse"
|
||||
style="
|
||||
align-content: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
gap: 0.5rem;
|
||||
"
|
||||
>
|
||||
<div class="q-pa-sm bg-white weight-medium">
|
||||
<div class="row no-wrap items-center q-my-sm">
|
||||
<label class="toggle-control">
|
||||
<input type="checkbox" dense v-model="isActive1" @change="" />
|
||||
<span class="control"></span>
|
||||
</label>
|
||||
<p class="q-ma-none">แสดงข้อมูลผู้พ้นจากราชการ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pa-sm bg-white weight-medium">
|
||||
<div class="row no-wrap items-center q-my-sm q-mr-lg">
|
||||
<label class="toggle-control">
|
||||
<input type="checkbox" dense v-model="isActive2" @change="" />
|
||||
<span class="control"></span>
|
||||
</label>
|
||||
<p class="q-ma-none">แสดงข้อมูลผู้พ้นจากราชการ</p>
|
||||
</div>
|
||||
</div>
|
||||
<q-toggle
|
||||
v-model="formData.isShowRetire"
|
||||
color="primary"
|
||||
label="แสดงข้อมูลผู้พ้นจากราชการ"
|
||||
/>
|
||||
<q-toggle
|
||||
v-model="formData.isProbation"
|
||||
color="primary"
|
||||
label="ทดลองปฏิบัติหน้าที่ราชการ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-icon
|
||||
class="q-mx-md"
|
||||
round
|
||||
flat
|
||||
color="grey"
|
||||
name="search"
|
||||
size="20px"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
placeholder="ค้นหา"
|
||||
v-model="search"
|
||||
dense
|
||||
style="flex-grow: 1"
|
||||
borderless
|
||||
/>
|
||||
<q-btn
|
||||
class="q-mr-md"
|
||||
outline
|
||||
color="blue"
|
||||
icon="filter_list"
|
||||
dense
|
||||
size="12px"
|
||||
@click="() => (dropdownInput = !dropdownInput)"
|
||||
/>
|
||||
</div>
|
||||
<q-btn class="q-ml-lg q-px-lg" color="blue" unelevated label="ค้นหา" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.border_custom {
|
||||
border-radius: 6px !important;
|
||||
border: 1px solid #e1e1e1;
|
||||
<style lang="scss" scoped>
|
||||
:deep(.custom-select.q-field--outlined .q-field__control::before) {
|
||||
border: 2px solid #ffffff !important;
|
||||
}
|
||||
$toggle-background-color-on: #06884d;
|
||||
$toggle-background-color-off: darkgray;
|
||||
$toggle-control-color: white;
|
||||
$toggle-width: 40px;
|
||||
$toggle-height: 25px;
|
||||
$toggle-gutter: 3px;
|
||||
$toggle-radius: 50%;
|
||||
$toggle-control-speed: 0.15s;
|
||||
$toggle-control-ease: ease-in;
|
||||
|
||||
// These are our computed variables
|
||||
// change at your own risk.
|
||||
$toggle-radius: $toggle-height / 2;
|
||||
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
|
||||
|
||||
.toggle-control {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: $toggle-width;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
user-select: none;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
input:checked ~ .control {
|
||||
background-color: $toggle-background-color-on;
|
||||
|
||||
&:after {
|
||||
left: $toggle-width - $toggle-control-size - $toggle-gutter;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -15px;
|
||||
height: $toggle-height;
|
||||
width: $toggle-width;
|
||||
border-radius: $toggle-radius;
|
||||
background-color: $toggle-background-color-off;
|
||||
transition: background-color $toggle-control-speed $toggle-control-ease;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: $toggle-gutter;
|
||||
top: $toggle-gutter;
|
||||
width: $toggle-control-size;
|
||||
height: $toggle-control-size;
|
||||
border-radius: $toggle-radius;
|
||||
background: $toggle-control-color;
|
||||
transition: left $toggle-control-speed $toggle-control-ease;
|
||||
}
|
||||
}
|
||||
:deep(.custom-select.q-field--outlined .q-field__control) {
|
||||
color: white !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import type { QTableColumn } from "quasar";
|
|||
|
||||
const visibleColumns = defineModel<string[]>("visibleColumns");
|
||||
|
||||
const mode = defineModel<string>("mode");
|
||||
|
||||
const props = defineProps<{
|
||||
columns: QTableColumn[];
|
||||
}>();
|
||||
|
|
@ -34,6 +36,58 @@ const rows = [
|
|||
year: 2566,
|
||||
salary: "25,000",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
fullName: "นายธามไทย คนคูเมือง",
|
||||
citizenId: "5555555555555",
|
||||
posNo: "สกก.5",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
posPath: "จัดการงานทั่วไป",
|
||||
posType: "วิชาการ",
|
||||
posLevel: "ปฏิบัติการ",
|
||||
posOc: "ฝ่ายบริหารงานทั่วไป",
|
||||
year: 2566,
|
||||
salary: "25,000",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
fullName: "นายธามไทย คนคูเมือง",
|
||||
citizenId: "5555555555555",
|
||||
posNo: "สกก.5",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
posPath: "จัดการงานทั่วไป",
|
||||
posType: "วิชาการ",
|
||||
posLevel: "ปฏิบัติการ",
|
||||
posOc: "ฝ่ายบริหารงานทั่วไป",
|
||||
year: 2566,
|
||||
salary: "25,000",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
fullName: "นายธามไทย คนคูเมือง",
|
||||
citizenId: "5555555555555",
|
||||
posNo: "สกก.5",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
posPath: "จัดการงานทั่วไป",
|
||||
posType: "วิชาการ",
|
||||
posLevel: "ปฏิบัติการ",
|
||||
posOc: "ฝ่ายบริหารงานทั่วไป",
|
||||
year: 2566,
|
||||
salary: "25,000",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
fullName: "นายธามไทย คนคูเมือง",
|
||||
citizenId: "5555555555555",
|
||||
posNo: "สกก.5",
|
||||
position: "นักจัดการงานทั่วไป",
|
||||
posPath: "จัดการงานทั่วไป",
|
||||
posType: "วิชาการ",
|
||||
posLevel: "ปฏิบัติการ",
|
||||
posOc: "ฝ่ายบริหารงานทั่วไป",
|
||||
year: 2566,
|
||||
salary: "25,000",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<!-- :filter="filterKeyword"
|
||||
|
|
@ -42,11 +96,13 @@ const rows = [
|
|||
<template>
|
||||
<d-table
|
||||
ref="table"
|
||||
:card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
|
||||
:columns="props.columns"
|
||||
:rows="rows"
|
||||
row-key="name"
|
||||
flat
|
||||
bordered
|
||||
:grid="mode === 'card'"
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table q-mx-lg"
|
||||
|
|
@ -60,8 +116,8 @@ const rows = [
|
|||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<template v-slot:body="props" v-if="mode === 'table'">
|
||||
<q-tr :props="props" class="cursor-pointer" v-if="mode === 'table'">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<template v-if="col.name == 'fullName'">
|
||||
<q-item v-ripple>
|
||||
|
|
@ -85,5 +141,69 @@ const rows = [
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:item="props" v-else>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||||
<q-card style="border: 0.5px solid #e4e4e4">
|
||||
<div class="flex justify-center q-pt-md q-px-md">
|
||||
<q-item-section avatar class="q-pa-none">
|
||||
<img
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="col-4 img-info q-mt-md"
|
||||
style="width: 120px; height: 120px; border-radius: 50%"
|
||||
/>
|
||||
<div class="text-weight-medium q-mt-md">
|
||||
{{ props.row.fullName }}
|
||||
</div>
|
||||
<div class="text-weight-light full-width text-center">
|
||||
{{ props.row.citizenId }}
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-card
|
||||
bordered
|
||||
class="q-my-md q-py-md full-width bg-grey-2"
|
||||
style="border: 0.5px solid #e4e4e4"
|
||||
>
|
||||
<div class="row q-pl-md">
|
||||
<div class="col">
|
||||
<div class="text-weight-light">ตำแหน่งเลขที่</div>
|
||||
<div class="text-weight-medium">{{ props.row.posNo }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-weight-light">ตำแหน่ง</div>
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.position }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-pl-md q-pt-md">
|
||||
<div class="col">
|
||||
<div class="text-weight-light">ประเภท</div>
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.posType }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-weight-light">ระดับชั้นงาน</div>
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.posLevel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<q-separator class="" color="" />
|
||||
<div class="see-more text-center q-py-md" style="width: 100%">
|
||||
<span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.see-more:hover {
|
||||
background-color: #089cfc;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
14
src/modules/04_registryNew/interface/index/form.ts
Normal file
14
src/modules/04_registryNew/interface/index/form.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
interface FormData {
|
||||
type: string,
|
||||
citizenId: string,
|
||||
fullName: string,
|
||||
retireYear: number | null,
|
||||
year: number | null,
|
||||
posPath: string,
|
||||
posLevel: string,
|
||||
posOc: string,
|
||||
isShowRetire: boolean,
|
||||
isProbation: boolean,
|
||||
}
|
||||
|
||||
export type { FormData }
|
||||
|
|
@ -178,7 +178,7 @@ const visibleColumns = ref<string[]>([
|
|||
v-model="mode"
|
||||
dense
|
||||
class="no-shadow"
|
||||
toggle-color="grey-5"
|
||||
toggle-color="grey-4"
|
||||
:options="[
|
||||
{ value: 'table', slot: 'table' },
|
||||
{ value: 'card', slot: 'card' },
|
||||
|
|
@ -205,11 +205,11 @@ const visibleColumns = ref<string[]>([
|
|||
</div>
|
||||
|
||||
<TableView
|
||||
v-if="mode === 'table'"
|
||||
:columns="columns"
|
||||
v-model:visibleColumns="visibleColumns"
|
||||
v-model:mode="mode"
|
||||
/>
|
||||
<CardView v-if="mode === 'card'" />
|
||||
<!-- <CardView v-if="mode === 'card'" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue