ui เปลี่ยนแปลงรอบการปฏิบัติของผู้ใช้งาน
This commit is contained in:
setthawutttty
parent
d2a50125a5
commit
f44399919c
7 changed files with 739 additions and 2 deletions
201
src/modules/09_leave/views/ChangeRoundMain.vue
Normal file
201
src/modules/09_leave/views/ChangeRoundMain.vue
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, useAttrs, onMounted, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
// ค้นหาในตาราง
|
||||
import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
|
||||
import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
|
||||
import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
|
||||
import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
|
||||
const dataStore = useChangeRoundDataStore();
|
||||
const modal = ref<boolean>(false);
|
||||
const editCheck = ref<string>("");
|
||||
const DataRow = ref<any>();
|
||||
const formData = reactive<dataPost>({
|
||||
cardId: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
});
|
||||
|
||||
|
||||
|
||||
function Openmodal(check: string, detail: any) {
|
||||
console.log(detail);
|
||||
DataRow.value = detail;
|
||||
modal.value = true;
|
||||
editCheck.value = check;
|
||||
}
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
}
|
||||
async function searchcardid(){
|
||||
const data = await dataStore.dataList.find((e) => e.cardId === formData.cardId)
|
||||
if(data){
|
||||
formData.firstName = data.firstName
|
||||
formData.lastName = data.lastName
|
||||
} else if(!data){
|
||||
formData.firstName = ''
|
||||
formData.lastName = ''
|
||||
dataStore.fetchDataForCardId('null','notClick')
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
dataStore.fetchDatainHistory([
|
||||
{
|
||||
id: "xxx1",
|
||||
roundStart: "08:30",
|
||||
roundEnd: "16:00",
|
||||
effectiveDate: new Date("2023-11-01T03:08:43.217"),
|
||||
reson: null,
|
||||
},
|
||||
{
|
||||
id: "xxx2",
|
||||
roundStart: "08:00",
|
||||
roundEnd: "16:30",
|
||||
effectiveDate: new Date("2023-11-01T03:08:43.217"),
|
||||
reson: null,
|
||||
},
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
เปลี่ยนแปลงรอบการปฏิบัติของผู้ใช้งาน
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row col-12 q-mb-sm">
|
||||
<q-card flat bordered class="bg-grey-2 col-12 q-pa-lg">
|
||||
<span>DataTest #cardId: 3514210651232 / 1231231231234</span>
|
||||
<div class="text-dark col-12 text-weight-bold text-subtitle1">
|
||||
ค้นหารายชื่อ
|
||||
</div>
|
||||
<div class="row justify-between q-gutter-y-sm">
|
||||
<q-input
|
||||
v-model="formData.cardId"
|
||||
outlined
|
||||
label="เลขบัตรประชาชน"
|
||||
class="bg-white col-6 col-md-4 inputgreen"
|
||||
dense
|
||||
maxlength="13"
|
||||
@keyup="searchcardid"
|
||||
/>
|
||||
<q-input
|
||||
v-model="formData.firstName"
|
||||
outlined
|
||||
readonly
|
||||
label="ชื่อ"
|
||||
class="bg-white col-5 col-md-3 inputgreen"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
v-model="formData.lastName"
|
||||
outlined
|
||||
readonly
|
||||
label="นามสกุล"
|
||||
class="bg-white col-6 col-md-3 inputgreen"
|
||||
dense
|
||||
/>
|
||||
<q-btn
|
||||
@click="
|
||||
dataStore.fetchDataForCardId(formData.cardId,'click')
|
||||
"
|
||||
for="#search"
|
||||
dense
|
||||
:disabled="!formData.cardId"
|
||||
unelevated
|
||||
color="primary"
|
||||
class="q-px-sm col-5 col-md-1"
|
||||
>ค้นหา</q-btn
|
||||
>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-if="formData.cardId && dataStore.checkCilck === true">
|
||||
<q-card flat bordered class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold">ไม่พบข้อมูลบัตรประชาชนนี้</q-card>
|
||||
</div>
|
||||
<div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="dataStore.columns"
|
||||
:rows="dataStore.rows"
|
||||
row-key="interrogated"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="dataStore.visibleColumns"
|
||||
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<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-th style="width: 200px" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td style="width: 150px">
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
icon="mdi-dots-vertical"
|
||||
color="grey-8"
|
||||
for="#cancel"
|
||||
dense
|
||||
round
|
||||
unelevated
|
||||
>
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="Openmodal('edit', props.row)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="Openmodal('history', props.row)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
<Dialogform
|
||||
:modal="modal"
|
||||
:closeDialog="closeDialog"
|
||||
:editCheck="editCheck"
|
||||
:DataRow="DataRow"
|
||||
/>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.q-table tbody td:before.no-background {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue