ปรับ ui ข้อมูลพื้นฐาน วินัย

This commit is contained in:
Tanyalak 2023-11-07 13:01:28 +07:00
parent 222a9b689b
commit f2df09c28e
5 changed files with 129 additions and 123 deletions

View file

@ -219,7 +219,7 @@ watch(props.data, async () => {
</div> </div>
<div class="row col-12"> <div class="row col-12">
<q-card bordered class="row col-12" style="border:1px solid #d6dee1;"> <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
<div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"> <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
นทบสวน นทบสวน
<q-checkbox <q-checkbox
for="#clickTime" for="#clickTime"
@ -227,6 +227,7 @@ watch(props.data, async () => {
v-model="formData.clickTime" v-model="formData.clickTime"
label="ขยายเวลา" label="ขยายเวลา"
color="primary" color="primary"
dense
class="text-weight-medium q-ml-sm" class="text-weight-medium q-ml-sm"
keep-color keep-color
/> />

View file

@ -370,7 +370,9 @@ watch(props.data, async () => {
size="12px" size="12px"
flat flat
round round
dense
color="add" color="add"
class="q-ml-sm"
@click="popup()" @click="popup()"
icon="mdi-plus" icon="mdi-plus"
> >

View file

@ -71,6 +71,7 @@ const clickBack = () => {
outlined outlined
v-model="channel" v-model="channel"
for="channel" for="channel"
hide-bottom-space
label="กรอกชื่อช่องทาง" label="กรอกชื่อช่องทาง"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
/> />
@ -78,17 +79,13 @@ const clickBack = () => {
</div> </div>
</div> </div>
<q-separator /> <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 <q-btn
flat label="บันทึก"
round
color="public" color="public"
@click="checkSave" @click="checkSave"
icon="mdi-content-save-outline"
> >
<q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</q-card> </q-card>

View file

@ -29,7 +29,6 @@ const formData = reactive<FormData>({
position: "", position: "",
phone: "", phone: "",
email: "", email: "",
role: "",
}); });
watch(props.data, async () => { watch(props.data, async () => {
@ -40,7 +39,6 @@ watch(props.data, async () => {
formData.position = props.data.position; formData.position = props.data.position;
formData.phone = props.data.phone; formData.phone = props.data.phone;
formData.email = props.data.email; formData.email = props.data.email;
formData.role = props.data.role;
}); });
// //
@ -57,7 +55,6 @@ const lastnameRef = ref<object | null>(null);
const positionRef = ref<object | null>(null); const positionRef = ref<object | null>(null);
const phoneRef = ref<object | null>(null); const phoneRef = ref<object | null>(null);
const emailRef = ref<object | null>(null); const emailRef = ref<object | null>(null);
const roleRef = ref<object | null>(null);
const formRef: FormRef = { const formRef: FormRef = {
prefix: prefixRef, prefix: prefixRef,
firstname: firstnameRef, firstname: firstnameRef,
@ -65,7 +62,6 @@ const formRef: FormRef = {
position: positionRef, position: positionRef,
phone: phoneRef, phone: phoneRef,
email: emailRef, email: emailRef,
role: roleRef,
}; };
function onValidate() { function onValidate() {
@ -85,117 +81,129 @@ function onValidate() {
} }
</script> </script>
<template> <template>
<form @submit.prevent.stop="onValidate" class="q-gutter-md"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md"> <q-card bordered>
<div v-if="data === null" class="row q-col-gutter-sm"> <div class="col-12 row q-pa-md">
<div class="col-3 row q-pa-md text-bold"> <div class="row q-col-gutter-md">
<label>นหาบคคลากรทอยในระบบ</label> <div class="row col-12" v-if="data === null">
</div> <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
<div class="col-6"> <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
<q-input นหาบคคลากรทอยในระบบ
dense </div>
outlined <div class="col-12"><q-separator /></div>
v-model="idCard" <div class="col-xs-12 q-pa-sm row">
label="รหัสบัตรประชาชน" <div class="col-6">
ref="idCardRef" <q-input
for="idCardRef" dense
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" outlined
/> v-model="idCard"
</div> label="รหัสบัตรประชาชน"
<div class="col-2"> ref="idCardRef"
<q-btn for="idCardRef"
unelevated hide-bottom-space
dense :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
color="primary" />
class="q-px-md q-py-sm" </div>
@click="addEmployee" <div class="col-2">
label="เพิ่มบุคลากร" <q-btn
id="addCustomer" unelevated
/> dense
color="primary"
class="q-px-md q-py-sm q-ml-sm"
@click="addEmployee"
label="เพิ่มบุคลากร"
id="addCustomer"
/>
</div>
</div>
</q-card>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.prefix"
label="คำนำหน้า"
ref="prefixRef"
for="prefixRef"
hide-bottom-space
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.firstname"
label="ชื่อ"
ref="firstnameRef"
for="firstnameRef"
hide-bottom-space
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.lastname"
label="นามสกุล"
ref="lastnameRef"
for="lastnameRef"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.position"
label="ตำแหน่ง"
ref="positionRef"
for="positionRef"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.phone"
label="เบอร์โทร"
ref="phoneRef"
for="phoneRef"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.email"
label="อีเมล"
ref="emailRef"
hide-bottom-space
for="emailRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
/>
</div>
</div> </div>
</div> </div>
<q-separator />
<div class="row q-px-md q-col-gutter-sm"> <div class="row col-12 q-pa-sm">
<div class="col-3"> <q-space />
<q-input <q-btn
dense for="ButtonOnSubmit"
outlined id="formSubmit"
v-model="formData.prefix" color="secondary"
label="คำนำหน้า" label="บันทึก"
ref="prefixRef" type="submit"
for="prefixRef" ><q-tooltip>บทกขอม</q-tooltip></q-btn
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" >
/> </div>
</div> </q-card>
<div class="col-3"> </form>
<q-input
dense
outlined
v-model="formData.firstname"
label="ชื่อ"
ref="firstnameRef"
for="firstnameRef"
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.lastname"
label="นามสกุล"
ref="lastnameRef"
for="lastnameRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.position"
label="ตำแหน่ง"
ref="positionRef"
for="positionRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.phone"
label="เบอร์โทร"
ref="phoneRef"
for="phoneRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
v-model="formData.email"
label="อีเมล"
ref="emailRef"
for="emailRef"
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
/>
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
for="ButtonOnSubmit"
id="formSubmit"
color="secondary"
label="บันทึก"
type="submit"
><q-tooltip>บทกขอม</q-tooltip></q-btn
>
</div>
</q-card>
</form>
</template> </template>

View file

@ -5,7 +5,6 @@ interface FormData {
position: string; position: string;
phone: string; phone: string;
email: string; email: string;
role: string;
responsibilities:string responsibilities:string
} }
interface FormRef { interface FormRef {
@ -15,7 +14,6 @@ interface FormRef {
position: object | null; position: object | null;
phone: object | null; phone: object | null;
email: object | null; email: object | null;
role: object | null;
[key: string]: any; [key: string]: any;
} }