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

ปรับ css drawer, ระบบบรรจุ

Browse source
This commit is contained in:
Tanyalak 2023-06-27 13:43:38 +07:00
parent 5144effebd
commit cf0ada2c67
9 changed files with 275 additions and 266 deletions
Download patch file Download diff file Expand all files Collapse all files

349
src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
View file

@ -1,10 +1,11 @@
<template>
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่งบรรจุ</div>
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-md">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-10 col-sm-3 col-md-2"
v-model="fiscalyear"
label="ปีงบประมาณ"
dense
@ -21,21 +22,21 @@
:hide-dropdown-icon="false"
@update:model-value="searchfiscalyear"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-6">
<q-btn
size="12px"
flat
round
color="add"
@click="clickAdd"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<div>
<q-btn
size="12px"
flat
round
color="add"
@click="clickAdd"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
@ -43,7 +44,6 @@
outlined
debounce="300"
placeholder="ค้นหา"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
@ -55,9 +55,8 @@
/>
</template>
</q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="visibleColumns"
multiple
outlined
@ -70,162 +69,160 @@
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
<q-card bordered class="col-12 filter-card">
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
<q-select
v-model="OrderType"
label="ประเภท"
dense
emit-value
map-options
option-label="name"
:options="OrderTypeOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
<q-select
v-model="OrderStatus"
label="สถานะ"
dense
emit-value
map-options
option-label="name"
:options="OrderStatusOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
</div>
</div>
</q-card>
</div>
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
<q-table
ref="table"
:columns="columns"
:rows="UpdataData"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="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
key="Order"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.Order }}
</q-td>
<q-td
key="OrderNum"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderNum }}
</q-td>
<q-td
key="OrderDate"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderDate }}
</q-td>
<q-td
key="OrderBy"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderBy }}
</q-td>
<q-td
key="Signer"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.Signer }}
</q-td>
<q-td
key="OrderStatus"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-icon
v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
name="hourglass_top"
color="orange"
class="text-h5"
/>
<q-icon
v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
name="mdi-check"
color="positive"
class="text-h5"
/>
</q-td>
<q-td auto-width>
<q-btn
<div class="col-12">
<q-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderType"
label="ประเภท"
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
emit-value
map-options
option-label="name"
:options="OrderTypeOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderStatus"
label="สถานะ"
dense
emit-value
map-options
option-label="name"
:options="OrderStatusOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
</div>
</q-card>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="UpdataData"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="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
key="Order"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
{{ props.row.Order }}
</q-td>
<q-td
key="OrderNum"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderNum }}
</q-td>
<q-td
key="OrderDate"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderDate }}
</q-td>
<q-td
key="OrderBy"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.OrderBy }}
</q-td>
<q-td
key="Signer"
:props="props"
@click="redirectToPage(props.row.Order)"
>
{{ props.row.Signer }}
</q-td>
<q-td
key="OrderStatus"
:props="props"
@click="redirectToPage(props.row.Order)"
>
<q-icon
v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
name="mdi-timer-sand"
color="orange"
class="text-h6"
/>
<q-icon
v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
name="mdi-check"
color="positive"
class="text-h6"
/>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</div>
@ -324,7 +321,7 @@ const columns = ref<QTableProps["columns"]>([
},
{
name: "OrderStatus",
align: "left",
align: "center",
label: "สถานะคำสั่ง",
sortable: false,
field: "OrderStatus",
@ -698,7 +695,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
<style lang="scss" scope>
.filter-card {
background-color: #ededed;
background-color: #f1f1f1b0;
}
.toggle-expired-account {

2
src/modules/05_placement/components/exams_other/Main.vue
View file

@ -373,7 +373,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
<style lang="scss" scope>
.filter-card {
background-color: #EDEDED;
background-color: #f1f1f1b0;
}
.toggle-expired-account {

124
src/modules/05_placement/components/exams_sorkorcho/Main.vue
View file

@ -293,88 +293,74 @@ const paginationLabel = (start: string, end: string, total: string) => {
<div class="toptitle text-dark col-12 row items-center">
รายการสอบแข่งขัน / คัดเลือก
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select v-model="fiscalyear" label="ปีงบประมาณ" dense clearable emit-value map-options :options="fiscalyearOP"
option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
:outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-md">
<div class="row col-12 q-col-gutter-sm">
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense clearable emit-value map-options :options="fiscalyearOP"
option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
:outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา">
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template>
</q-input>
<q-select class="col-xs-12 col-sm-3 col-md-2" 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 />
</div>
<div class="col-xs-12 col-sm-3 col-md-6"></div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-input standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
class="q-ml-sm">
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template>
</q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<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"
class="gt-xs q-ml-sm" />
</div>
</div>
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
<q-card bordered class="col-12 filter-card">
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
<q-select v-model="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
<div class="col-12">
<q-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
:outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
</div>
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
<q-select v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
:options="examTypeOP" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
:outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-toggle v-model="expiredAccount" class="toggle-expired-account" color="blue" label="แสดงบัญชีหมดอายุ"
<q-toggle class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account" v-model="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ"
@update:model-value="searchFilterTable" />
</div>
</div>
</q-card>
</div>
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
<q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="id" flat bordered
dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
:pagination-label="paginationLabel">
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
<q-td key="id" :props="props">
{{ props.row.id }}
</q-td>
<q-td key="examRound" :props="props">
{{ props.row.examRound }}
</q-td>
<q-td key="examOrder" :props="props">
{{ props.row.examOrder }}
</q-td>
<q-td key="fiscalYear" :props="props">
{{ props.row.fiscalYear + 543 }}
</q-td>
<q-td key="numberofCandidates" :props="props">
{{ props.row.numberofCandidates }}
</q-td>
<q-td key="examType" :props="props">
{{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
</q-td>
<q-td key="accountExpirationDate" :props="props">
{{ textDate(props.row.accountExpirationDate) }}
</q-td>
</q-tr>
</template>
</q-table>
</q-card>
</div>
<div class="col-12">
<q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="id" flat bordered
dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
:pagination-label="paginationLabel">
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
<q-td key="id" :props="props">
{{ props.row.id }}
</q-td>
<q-td key="examRound" :props="props">
{{ props.row.examRound }}
</q-td>
<q-td key="examOrder" :props="props">
{{ props.row.examOrder }}
</q-td>
<q-td key="fiscalYear" :props="props">
{{ props.row.fiscalYear + 543 }}
</q-td>
<q-td key="numberofCandidates" :props="props">
{{ props.row.numberofCandidates }}
</q-td>
<q-td key="examType" :props="props">
{{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
</q-td>
<q-td key="accountExpirationDate" :props="props">
{{ textDate(props.row.accountExpirationDate) }}
</q-td>
</q-tr>
</template>
</q-table>
</div>
</div>
</q-card>
</div>
</template>
<style lang="scss" scope>
.filter-card {
background-color: #EDEDED;
background-color: #f1f1f1b0;
}
.toggle-expired-account {

9
src/modules/05_placement/components/pass/Detail.vue
View file

@ -56,14 +56,13 @@ const AddTablePosition = defineAsyncComponent(
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
</div>
<q-space />
<div class="q-py-md row col-12">
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-pa-md">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<div class="" v-for="item in itemTop" :key="item.id" :style="$q.screen.lt.md ? '' : sizeCard(5)" :class="$q.screen.lt.sm ? 'col-4' : ''">
<div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm">
<div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm">
<div class="col-12 row items-center q-pa-sm">
<div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
{{ item.num }}
@ -77,7 +76,7 @@ const AddTablePosition = defineAsyncComponent(
</div>
</div>
</div>
</div>
</q-card>
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<div>

22
src/modules/05_placement/components/pass/Table.vue
View file

@ -1201,17 +1201,24 @@ const listKeyId = (data: any) => {
v-if="props.row.Status !== 'สละสิทธิ์' &&
props.row.Status !== 'บรรจุเเล้ว'
"
icon="density_medium"
size="xs"
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list style="min-width: 100px">
<q-list dense style="min-width: 100px">
<q-item
v-if="props.row.Status === 'ยังไม่บรรจุ'"
clickable
v-close-popup
@click="openAppointModal"
>
<q-item-section style="min-width: 0px;" avatar class="q-py-sm">
<q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
</q-item-section>
<q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
</q-item>
<q-separator />
@ -1221,6 +1228,9 @@ const listKeyId = (data: any) => {
v-close-popup
@click="editDetail(props.row, 'wait')"
>
<q-item-section style="min-width: 0px;" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
</q-item-section>
<q-item-section>ขอผ่อนผัน</q-item-section>
</q-item>
<q-item
@ -1229,6 +1239,9 @@ const listKeyId = (data: any) => {
v-close-popup
@click="editDetail(props.row, 'waitInfo')"
>
<q-item-section style="min-width: 0px;" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-details-outline" />
</q-item-section>
<q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
</q-item>
<q-separator />
@ -1240,6 +1253,9 @@ const listKeyId = (data: any) => {
v-close-popup
@click="editDetail(props.row, 'cancel')"
>
<q-item-section style="min-width: 0px;" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section>
<q-item-section>สละสิทธิ์</q-item-section>
</q-item>
</q-list>