ปรับ ui ข้อมูลพื้นฐาน วินัย
This commit is contained in:
parent
222a9b689b
commit
f2df09c28e
5 changed files with 129 additions and 123 deletions
|
|
@ -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
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue