ปรับ css และดีไซน์หน้า กรอกข้อมูลสมัครสอบ

This commit is contained in:
Tanyalak 2023-03-29 16:39:45 +07:00
parent dcad2fcb07
commit c299af578f
14 changed files with 1261 additions and 1378 deletions

View file

@ -1,58 +1,56 @@
<!-- tab ประวการทำงาน/กงาน -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<q-form ref="myForm">
<Table
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
v-model:editvisible="edit"
:add="clickAdd"
:edit="clickEdit"
:cancel="clickCancel"
:addData="false"
:editData="status == 'register' || status == 'rejectRegister'"
name="ประวัติการทำงาน/ฝึกงาน"
icon="mdi-briefcase"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'salary'" class="">
{{ col.value.toLocaleString('en-US') }}
</div>
<div v-else-if="col.name == 'duration'" class="">
{{ dateThaiRange(col.value) }}
</div>
<div v-else class="">
{{ col.value }}
</div>
</q-td>
<q-td auto-width v-if="edit === true">
<q-btn
color="red"
flat
dense
round
size="14px"
icon="mdi-trash-can-outline"
@click="checkDelete(props.row)"
/>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
</q-card>
<q-form ref="myForm">
<Table
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
v-model:editvisible="edit"
:add="clickAdd"
:edit="clickEdit"
:cancel="clickCancel"
:addData="false"
:editData="status == 'register' || status == 'rejectRegister'"
name="ประวัติการทำงาน/ฝึกงาน"
icon="mdi-briefcase"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'salary'" class="">
{{ col.value.toLocaleString('en-US') }}
</div>
<div v-else-if="col.name == 'duration'" class="">
{{ dateThaiRange(col.value) }}
</div>
<div v-else class="">
{{ col.value }}
</div>
</q-td>
<q-td auto-width v-if="edit === true">
<q-btn
color="red"
flat
dense
round
size="14px"
icon="mdi-trash-can-outline"
@click="checkDelete(props.row)"
/>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
@ -61,7 +59,7 @@
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
@ -75,7 +73,7 @@
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
@ -89,7 +87,7 @@
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
@ -104,7 +102,7 @@
type="number"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-6 col-md-6">
<datepicker
:readonly="!edit"
v-model="duration"
@ -131,7 +129,7 @@
:model-value="dateThaiRange(duration)"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
<q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>