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

updata page main

Browse source
This commit is contained in:
watcharanondh 2023-06-06 16:38:00 +07:00
parent 99714c555e
commit 63dbc9e078
1 changed files with 145 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

149
src/modules/05_placement/views/Main.vue
View file

@ -1,12 +1,153 @@
<script setup lang="ts"></script> <script setup lang="ts">
import { ref, useAttrs } from 'vue';
const attrs = ref<any>(useAttrs());
const fiscalyear = ref<string>("");
const filter = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterRef.value.focus();
};
const inputvisible = ref<string[]>([]);
interface DataOption {
id: number;
name: string;
}
const fiscalyearOP = ref<DataOption[]>([
{id: 1, name: "2566"},
{id: 2, name: "2565"},
{id: 3, name: "2564"},
]);
</script>
<template> <template>
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
บรรจุ แต่งตั้ง ย้าย โอน รายการสอบแข่งขัน / คัดเลือก
</div> </div>
<div> <div>
<q-card flat bordered class="col-12 q-mt-sm"> </q-card> <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
option-label="name"
:options="fiscalyearOP"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
/>
</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="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
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="inputvisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
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="fiscalyear"
label="ครั้งที่"
dense
clearable
emit-value
map-options
option-label="name"
:options="fiscalyearOP"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
<q-select
v-model="fiscalyear"
label="ประเภทการสอบ"
dense
clearable
emit-value
map-options
option-label="name"
:options="fiscalyearOP"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
</div>
</div>
</q-card>
</div>
</q-card>
</div> </div>
</template> </template>
<style lang="scss" scope></style> <style lang="scss" scope>
.filter-card {
background-color: #EDEDED;
}
</style>