ปรับ ui ข้อมูลพื้นฐาน วินัย
This commit is contained in:
Tanyalak
parent
222a9b689b
commit
f2df09c28e
5 changed files with 129 additions and 123 deletions
|
|
@ -219,7 +219,7 @@ watch(props.data, async () => {
|
|||
</div>
|
||||
<div class="row col-12">
|
||||
<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
|
||||
for="#clickTime"
|
||||
|
|
@ -227,6 +227,7 @@ watch(props.data, async () => {
|
|||
v-model="formData.clickTime"
|
||||
label="ขยายเวลา"
|
||||
color="primary"
|
||||
dense
|
||||
class="text-weight-medium q-ml-sm"
|
||||
keep-color
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -370,7 +370,9 @@ watch(props.data, async () => {
|
|||
size="12px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="add"
|
||||
class="q-ml-sm"
|
||||
@click="popup()"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ const clickBack = () => {
|
|||
outlined
|
||||
v-model="channel"
|
||||
for="channel"
|
||||
hide-bottom-space
|
||||
label="กรอกชื่อช่องทาง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
|
||||
/>
|
||||
|
|
@ -78,17 +79,13 @@ const clickBack = () => {
|
|||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="checkSave"
|
||||
icon="mdi-content-save-outline"
|
||||
>
|
||||
<q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ const formData = reactive<FormData>({
|
|||
position: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
role: "",
|
||||
});
|
||||
|
||||
watch(props.data, async () => {
|
||||
|
|
@ -40,7 +39,6 @@ watch(props.data, async () => {
|
|||
formData.position = props.data.position;
|
||||
formData.phone = props.data.phone;
|
||||
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 phoneRef = ref<object | null>(null);
|
||||
const emailRef = ref<object | null>(null);
|
||||
const roleRef = ref<object | null>(null);
|
||||
const formRef: FormRef = {
|
||||
prefix: prefixRef,
|
||||
firstname: firstnameRef,
|
||||
|
|
@ -65,7 +62,6 @@ const formRef: FormRef = {
|
|||
position: positionRef,
|
||||
phone: phoneRef,
|
||||
email: emailRef,
|
||||
role: roleRef,
|
||||
};
|
||||
|
||||
function onValidate() {
|
||||
|
|
@ -85,117 +81,129 @@ function onValidate() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<form @submit.prevent.stop="onValidate" class="q-gutter-md">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<div v-if="data === null" class="row q-col-gutter-sm">
|
||||
<div class="col-3 row q-pa-md text-bold">
|
||||
<label>ค้นหาบุคคลากรที่อยู่ในระบบ</label>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="idCard"
|
||||
label="รหัสบัตรประชาชน"
|
||||
ref="idCardRef"
|
||||
for="idCardRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
color="primary"
|
||||
class="q-px-md q-py-sm"
|
||||
@click="addEmployee"
|
||||
label="เพิ่มบุคลากร"
|
||||
id="addCustomer"
|
||||
/>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12" v-if="data === null">
|
||||
<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-sm q-px-md">
|
||||
ค้นหาบุคคลากรที่อยู่ในระบบ
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-12 q-pa-sm row">
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="idCard"
|
||||
label="รหัสบัตรประชาชน"
|
||||
ref="idCardRef"
|
||||
for="idCardRef"
|
||||
hide-bottom-space
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-btn
|
||||
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 class="row q-px-md q-col-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.prefix"
|
||||
label="คำนำหน้า"
|
||||
ref="prefixRef"
|
||||
for="prefixRef"
|
||||
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ interface FormData {
|
|||
position: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
role: string;
|
||||
responsibilities:string
|
||||
}
|
||||
interface FormRef {
|
||||
|
|
@ -15,7 +14,6 @@ interface FormRef {
|
|||
position: object | null;
|
||||
phone: object | null;
|
||||
email: object | null;
|
||||
role: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue