ปรับ interfeac
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
09b1b9f492
commit
cfc073e30c
16 changed files with 462 additions and 277 deletions
|
|
@ -1,12 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import type { FormData, FormRef } from "@/modules/11_discipline/interface/request/director";
|
||||
import type {
|
||||
FormData,
|
||||
FormRef,
|
||||
} from "@/modules/11_discipline/interface/request/director";
|
||||
|
||||
// รับ props มาจาก page หลัก
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
|
|
@ -16,7 +19,7 @@ const props = defineProps({
|
|||
|
||||
// ข้อมูลรหัสบัตรประชาชน
|
||||
const idCard = ref<string>("");
|
||||
const idCardRef = ref<any>(null)
|
||||
const idCardRef = ref<any>(null);
|
||||
|
||||
// ข้อมูลทั้งก้อน form
|
||||
const formData = reactive<FormData>({
|
||||
|
|
@ -30,31 +33,31 @@ const formData = reactive<FormData>({
|
|||
});
|
||||
|
||||
watch(props.data, async () => {
|
||||
console.log("data==>", props.data)
|
||||
formData.prefix = props.data.prefix
|
||||
formData.firstname = props.data.firstname
|
||||
formData.lastname = props.data.lastname
|
||||
formData.position = props.data.position
|
||||
formData.phone = props.data.phone
|
||||
formData.responsibilities = props.data.responsibilities
|
||||
formData.email = props.data.email
|
||||
console.log("data==>", props.data);
|
||||
formData.prefix = props.data.prefix;
|
||||
formData.firstname = props.data.firstname;
|
||||
formData.lastname = props.data.lastname;
|
||||
formData.position = props.data.position;
|
||||
formData.phone = props.data.phone;
|
||||
formData.responsibilities = props.data.responsibilities;
|
||||
formData.email = props.data.email;
|
||||
});
|
||||
|
||||
// เพิ่มบุคลากร
|
||||
function addEmployee() {
|
||||
if (idCardRef.value.validate()) {
|
||||
console.log("idCard===>", idCard.value)
|
||||
console.log("idCard===>", idCard.value);
|
||||
}
|
||||
}
|
||||
|
||||
// ตรวจสอบข้อมูลก่อนส่งไปยัง api
|
||||
const prefixRef = ref<object | null>(null)
|
||||
const firstnameRef = ref<object | null>(null)
|
||||
const lastnameRef = ref<object | null>(null)
|
||||
const positionRef = ref<object | null>(null)
|
||||
const phoneRef = ref<object | null>(null)
|
||||
const responsibilitiesRef = ref<object | null>(null)
|
||||
const emailRef = ref<object | null>(null)
|
||||
const prefixRef = ref<object | null>(null);
|
||||
const firstnameRef = ref<object | null>(null);
|
||||
const lastnameRef = ref<object | null>(null);
|
||||
const positionRef = ref<object | null>(null);
|
||||
const phoneRef = ref<object | null>(null);
|
||||
const responsibilitiesRef = ref<object | null>(null);
|
||||
const emailRef = ref<object | null>(null);
|
||||
const formRef: FormRef = {
|
||||
prefix: prefixRef,
|
||||
firstname: firstnameRef,
|
||||
|
|
@ -62,7 +65,7 @@ const formRef: FormRef = {
|
|||
position: positionRef,
|
||||
phone: phoneRef,
|
||||
responsibilities: responsibilitiesRef,
|
||||
email: emailRef
|
||||
email: emailRef,
|
||||
};
|
||||
|
||||
function onValidate() {
|
||||
|
|
@ -77,69 +80,127 @@ function onValidate() {
|
|||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
props.onSubmit()
|
||||
props.onSubmit();
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<form @submit.prevent.stop="onValidate" class="q-gutter-md">
|
||||
<div class="col-12">
|
||||
|
||||
<q-card bordered>
|
||||
|
||||
<div class="row q-pa-md q-col-gutter-sm">
|
||||
<div class="col-md-3 row q-pa-md text-bold">
|
||||
<label>ค้นหาบุคคลากรที่อยู่ในระบบ</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<q-input dense outlined v-model="idCard" label="รหัสบัตรประชาชน" ref="idCardRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="idCard"
|
||||
label="รหัสบัตรประชาชน"
|
||||
ref="idCardRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-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="เพิ่มบุคลากร"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-px-md q-col-gutter-sm">
|
||||
<div class="col-md-3">
|
||||
<q-input dense outlined v-model="formData.prefix" label="คำนำหน้า" ref="prefixRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.prefix"
|
||||
label="คำนำหน้า"
|
||||
ref="prefixRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<q-input dense outlined v-model="formData.firstname" label="ชื่อ" ref="firstnameRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.firstname"
|
||||
label="ชื่อ"
|
||||
ref="firstnameRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<q-input dense outlined v-model="formData.lastname" label="นามสกุล" ref="lastnameRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.lastname"
|
||||
label="นามสกุล"
|
||||
ref="lastnameRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<q-input dense outlined v-model="formData.position" label="ตำแหน่ง" ref="positionRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.position"
|
||||
label="ตำแหน่ง"
|
||||
ref="positionRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<q-input dense outlined v-model="formData.phone" label="เบอร์โทร" ref="phoneRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.phone"
|
||||
label="เบอร์โทร"
|
||||
ref="phoneRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<q-input dense outlined v-model="formData.responsibilities" label="หน้าที่" ref="responsibilitiesRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.responsibilities"
|
||||
label="หน้าที่"
|
||||
ref="responsibilitiesRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<q-input dense outlined v-model="formData.email" label="อีเมล" ref="emailRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.email"
|
||||
label="อีเมล"
|
||||
ref="emailRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<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"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue