update layout & remove no

This commit is contained in:
Warunee Tamkoo 2023-10-19 17:10:40 +07:00
parent 2f2ce58212
commit 47ce78e31c
3 changed files with 28 additions and 31 deletions

View file

@ -30,7 +30,7 @@ const formData = reactive<FormData>({
}); });
watch(props.data, async () => { watch(props.data, async () => {
console.log("data==>", props.data) // console.log("data==>", props.data)
formData.prefix = props.data.prefix formData.prefix = props.data.prefix
formData.firstname = props.data.firstname formData.firstname = props.data.firstname
formData.lastname = props.data.lastname formData.lastname = props.data.lastname
@ -88,45 +88,46 @@ function onValidate() {
<q-card bordered> <q-card bordered>
<div class="row q-pa-md q-col-gutter-sm"> <div class="row q-pa-md q-col-gutter-sm">
<div class="col-md-3 row q-pa-md text-bold"> <div class="col-3 row q-pa-md text-bold">
<label>นหาบคคลากรทอยในระบบ</label> <label>นหาบคคลากรทอยในระบบ</label>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<q-input dense outlined v-model="idCard" label="รหัสบัตรประชาชน" ref="idCardRef" <q-input dense outlined v-model="idCard" label="รหัสบัตรประชาชน" ref="idCardRef" for="idCardRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" /> :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" />
</div> </div>
<div class="col-md-2"> <div class="col-2">
<q-btn unelevated dense color="primary" class="q-px-md q-py-sm" @click="addEmployee" label="เพิ่มบุคลากร" /> <q-btn unelevated dense color="primary" class="q-px-md q-py-sm" @click="addEmployee" label="เพิ่มบุคลากร"
id="addCustomer" />
</div> </div>
</div> </div>
<div class="row q-px-md q-col-gutter-sm"> <div class="row q-px-md q-col-gutter-sm">
<div class="col-md-3"> <div class="col-3">
<q-input dense outlined v-model="formData.prefix" label="คำนำหน้า" ref="prefixRef" <q-input dense outlined v-model="formData.prefix" label="คำนำหน้า" ref="prefixRef" for="prefixRef"
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" /> :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" />
</div> </div>
<div class="col-md-3"> <div class="col-3">
<q-input dense outlined v-model="formData.firstname" label="ชื่อ" ref="firstnameRef" <q-input dense outlined v-model="formData.firstname" label="ชื่อ" ref="firstnameRef" for="firstnameRef"
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]" /> :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]" />
</div> </div>
<div class="col-md-3"> <div class="col-3">
<q-input dense outlined v-model="formData.lastname" label="นามสกุล" ref="lastnameRef" <q-input dense outlined v-model="formData.lastname" label="นามสกุล" ref="lastnameRef" for="lastnameRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]" /> :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]" />
</div> </div>
<div class="col-md-3"> <div class="col-3">
<q-input dense outlined v-model="formData.position" label="ตำแหน่ง" ref="positionRef" <q-input dense outlined v-model="formData.position" label="ตำแหน่ง" ref="positionRef" for="positionRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" /> :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" />
</div> </div>
<div class="col-md-3"> <div class="col-3">
<q-input dense outlined v-model="formData.phone" label="เบอร์โทร" ref="phoneRef" <q-input dense outlined v-model="formData.phone" label="เบอร์โทร" ref="phoneRef" for="phoneRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]" /> :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]" />
</div> </div>
<div class="col-md-3"> <div class="col-3">
<q-input dense outlined v-model="formData.responsibilities" label="หน้าที่" ref="responsibilitiesRef" <q-input dense outlined v-model="formData.responsibilities" label="หน้าที่" ref="responsibilitiesRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]" /> for="responsibilitiesRef" :rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]" />
</div> </div>
<div class="col-md-3"> <div class="col-3">
<q-input dense outlined v-model="formData.email" label="อีเมล" ref="emailRef" <q-input dense outlined v-model="formData.email" label="อีเมล" ref="emailRef" for="emailRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]" /> :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]" />
</div> </div>
</div> </div>
@ -134,7 +135,7 @@ function onValidate() {
<q-separator /> <q-separator />
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<q-space /> <q-space />
<q-btn type="submit" flat round color="public" icon="mdi-content-save-outline"> <q-btn type="submit" flat round color="public" icon="mdi-content-save-outline" id="formSubmit">
<q-tooltip>นทกขอม</q-tooltip> <q-tooltip>นทกขอม</q-tooltip>
</q-btn> </q-btn>
</div> </div>

View file

@ -13,8 +13,6 @@ const $q = useQuasar();
const dataStore = useDisciplineDirectorDataStore() const dataStore = useDisciplineDirectorDataStore()
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
date2Thai,
success,
messageError, messageError,
showLoader, showLoader,
hideLoader, hideLoader,
@ -26,7 +24,6 @@ onMounted(() => {
// get store // get store
dataStore.fetchData([ dataStore.fetchData([
{ {
no: 1,
name: "นางเกสินี เจียรสุมัย", name: "นางเกสินี เจียรสุมัย",
position: "ครู", position: "ครู",
responsibilities: "ประธาน", responsibilities: "ประธาน",
@ -34,7 +31,6 @@ onMounted(() => {
phone: "0800808080", phone: "0800808080",
}, },
{ {
no: 2,
name: "นายสรวิชญ์ พลสิทธิ์", name: "นายสรวิชญ์ พลสิทธิ์",
position: "ทดลองงาน", position: "ทดลองงาน",
responsibilities: "เลขานุการ", responsibilities: "เลขานุการ",
@ -123,11 +119,12 @@ function clickDelete(id: string) {
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="$router.push(`/discipline/director/${props.row.no}`)"> <q-td v-for="col in props.cols" :key="col.name" :props="props"
<!-- <div v-if="col.name == 'phone'"> @click="$router.push(`/discipline/director/${props.row.no}`)">
{{ props.rowIndex + 1 }} <div v-if="col.name == 'no'">
</div> --> {{ props.rowIndex + 1 }}
<div> </div>
<div v-else>
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>

View file

@ -1,5 +1,4 @@
interface DirectorRows { interface DirectorRows {
no: number;
name: string; name: string;
position: string; position: string;
responsibilities: string; responsibilities: string;