เครื่องราชอิสริยาภรณ์ => ปรับ form Dialog
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
5450ad5e87
commit
e8976a3d82
7 changed files with 276 additions and 290 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
divdiv<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -238,53 +238,43 @@ async function fectDataByid(id: string) {
|
|||
}
|
||||
|
||||
/** function บักทึกผล*/
|
||||
async function clickSave() {
|
||||
let body = {
|
||||
citizanId: cardid.value, // เลขประจำตัวประชาชน
|
||||
insigniaId: brand.value, // insigniaID
|
||||
number: Advertise.value,
|
||||
issue: issue.value,
|
||||
dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
|
||||
organizationOrganizationSend: affiliationRequest.value,
|
||||
organizationOrganizationReceive: affiliationReceived.value,
|
||||
date: announceDate.value, // วันที่กิจนุเบก
|
||||
volumeNo: volume.value, // เล่ม
|
||||
section: episode.value, //ตอนที่
|
||||
page: duty.value, //หน้าที่
|
||||
no: announced.value,
|
||||
datePayment: invoiceDate.value, //วันที่จ่าย
|
||||
typePayment: payment.value, // รูปแบบการจ่าย
|
||||
address: addressPayment.value, //ที่อยู่
|
||||
};
|
||||
// เช็คค่าว่าง
|
||||
await myForm.value!.validate().then((result: boolean) => {
|
||||
if (result) {
|
||||
dialogConfirm($q, async () => {
|
||||
await addNote(body);
|
||||
});
|
||||
async function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
if (props.roundId !== undefined) {
|
||||
showLoader();
|
||||
let body = {
|
||||
citizanId: cardid.value, // เลขประจำตัวประชาชน
|
||||
insigniaId: brand.value, // insigniaID
|
||||
number: Advertise.value,
|
||||
issue: issue.value,
|
||||
dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
|
||||
organizationOrganizationSend: affiliationRequest.value,
|
||||
organizationOrganizationReceive: affiliationReceived.value,
|
||||
date: announceDate.value, // วันที่กิจนุเบก
|
||||
volumeNo: volume.value, // เล่ม
|
||||
section: episode.value, //ตอนที่
|
||||
page: duty.value, //หน้าที่
|
||||
no: announced.value,
|
||||
datePayment: invoiceDate.value, //วันที่จ่าย
|
||||
typePayment: payment.value, // รูปแบบการจ่าย
|
||||
address: addressPayment.value, //ที่อยู่
|
||||
};
|
||||
http
|
||||
.put(config.API.noteAdd(props.roundId), body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.close?.();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** function เพิ่มแก้ ข้อมูลบันทึกผล*/
|
||||
async function addNote(body: any) {
|
||||
if (props.roundId !== undefined) {
|
||||
await http
|
||||
.put(config.API.noteAdd(props.roundId), body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
if (props.close) {
|
||||
props.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** function หาเลขประจำตัวประชาชน*/
|
||||
function searchcardid() {
|
||||
if (cardid.value.length === 13) {
|
||||
|
|
@ -317,12 +307,16 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 900px" class="q-pb-md">
|
||||
<DialogHeader tittle="บันทึกผล" :close="props.close" />
|
||||
<q-separator />
|
||||
|
||||
<q-form ref="myForm">
|
||||
<div class="q-pa-md bg-grey-1">
|
||||
<q-card style="min-width: 900px" >
|
||||
<q-form
|
||||
ref="myForm"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onSubmit"
|
||||
>
|
||||
<DialogHeader tittle="บันทึกผล" :close="props.close" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="col-4">
|
||||
<q-select
|
||||
|
|
@ -343,6 +337,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
@update:model-value="selectType"
|
||||
:disable="status !== ''"
|
||||
lazy-rules
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 text-weight-bold text-grey">
|
||||
|
|
@ -421,6 +416,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
v-model="Advertise"
|
||||
lazy-rules
|
||||
label="หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์"
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
|
|
@ -440,6 +436,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
:readonly="false"
|
||||
use-input
|
||||
:borderless="false"
|
||||
class="inputgreen"
|
||||
style="min-width: 150px"
|
||||
:rules="[
|
||||
(val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
|
||||
|
|
@ -472,6 +469,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
borderless
|
||||
outlined
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
receivedate != null ? date2Thai(receivedate) : undefined
|
||||
|
|
@ -493,6 +491,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
<q-input
|
||||
:disable="disbleStatus || status == 'DONE'"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกทะเบียนฐานนันดร']"
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
dense
|
||||
borderless
|
||||
|
|
@ -508,6 +507,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
disbleStatus || status == 'DONE' || status == 'PENDING'
|
||||
"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
|
|
@ -523,6 +523,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
disbleStatus || status == 'DONE' || status == 'PENDING'
|
||||
"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
dense
|
||||
borderless
|
||||
|
|
@ -560,6 +561,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
borderless
|
||||
outlined
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
announceDate != null ? date2Thai(announceDate) : undefined
|
||||
|
|
@ -660,6 +662,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
borderless
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
invoiceDate != null ? date2Thai(invoiceDate) : undefined
|
||||
"
|
||||
|
|
@ -684,7 +687,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
:disable="disbleStatus"
|
||||
hide-bottom-space
|
||||
:options="paymentOp"
|
||||
class="col-xs-12 col-sm-6"
|
||||
class="inputgreen"
|
||||
dense
|
||||
borderless
|
||||
option-label="label"
|
||||
|
|
@ -701,27 +704,24 @@ const filterSelector = (val: any, update: Function, name: any) => {
|
|||
<q-input
|
||||
:disable="disbleStatus"
|
||||
label="ที่อยู่ที่จ่าย"
|
||||
class="bg-white"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
outlined
|
||||
v-model="addressPayment"
|
||||
type="textarea"
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<q-separator />
|
||||
<div class="q-pa-md">
|
||||
<div class="row justify-end">
|
||||
<q-btn label="บันทึก" @click="clickSave" color="public"
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" type="submit" color="public"
|
||||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
div
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
|
|
@ -74,53 +75,41 @@ function close() {
|
|||
* @param type receive,return
|
||||
* @param id personId
|
||||
*/
|
||||
async function SaveData(type: string, id: string) {
|
||||
await myForm.value.validate().then((result: boolean) => {
|
||||
if (result) {
|
||||
dialogConfirm($q, () => dataSave(type, id));
|
||||
async function onSubmit(type: string, id: string) {
|
||||
dialogConfirm($q, () => {
|
||||
const formData = new FormData();
|
||||
if (props.dateCheckReceive === null) {
|
||||
formData.append("Date", dateToISO((Datereceive.value as Date) ?? nullii));
|
||||
formData.append("File", files.value);
|
||||
formData.append("OrgId", OrganazationId.value);
|
||||
} else {
|
||||
formData.append("Date", dateToISO((Datereturn.value as Date) ?? nullii));
|
||||
formData.append("File", filesReturn.value);
|
||||
formData.append("OrgId", OrganazationId2.value);
|
||||
}
|
||||
showLoader();
|
||||
http
|
||||
.put(config.API.requestinsignia(type, id), formData)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
Datereceive.value = null;
|
||||
files.value = null;
|
||||
OrganazationId.value = "";
|
||||
Datereturn.value = null;
|
||||
filesReturn.value = null;
|
||||
OrganazationId2.value = "";
|
||||
props.fecthlistInsignia?.();
|
||||
props.close?.();
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function บันทึกข้อมูล
|
||||
* @param type receive,return
|
||||
* @param id personId
|
||||
*/
|
||||
function dataSave(type: string, id: string) {
|
||||
const formData = new FormData();
|
||||
if (props.dateCheckReceive === null) {
|
||||
formData.append("Date", dateToISO((Datereceive.value as Date) ?? nullii));
|
||||
formData.append("File", files.value);
|
||||
formData.append("OrgId", OrganazationId.value);
|
||||
} else {
|
||||
formData.append("Date", dateToISO((Datereturn.value as Date) ?? nullii));
|
||||
formData.append("File", filesReturn.value);
|
||||
formData.append("OrgId", OrganazationId2.value);
|
||||
}
|
||||
showLoader();
|
||||
http
|
||||
.put(config.API.requestinsignia(type, id), formData)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
Datereceive.value = null;
|
||||
files.value = null;
|
||||
OrganazationId.value = "";
|
||||
Datereturn.value = null;
|
||||
filesReturn.value = null;
|
||||
OrganazationId2.value = "";
|
||||
props.fecthlistInsignia?.();
|
||||
props.close?.();
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** function เรียกหน่วยงาน*/
|
||||
async function fetchOrgList() {
|
||||
showLoader();
|
||||
|
|
@ -175,23 +164,32 @@ watch(props, () => {
|
|||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 900px">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
>รับ-คืนเครื่องราชฯ</q-toolbar-title
|
||||
>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="close"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<q-separator />
|
||||
|
||||
<q-form ref="myForm">
|
||||
<div class="q-pa-md bg-grey-1">
|
||||
<q-form
|
||||
ref="myForm"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="
|
||||
onSubmit(
|
||||
props.dateCheckReceive === null ? 'receive' : 'return',
|
||||
props.personId as string
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
>รับ-คืนเครื่องราชฯ</q-toolbar-title
|
||||
>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="close"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="col-12 text-weight-bold text-grey-7">
|
||||
รับเครื่องราชฯ
|
||||
|
|
@ -220,18 +218,20 @@ watch(props, () => {
|
|||
outlined
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
Datereceive != null ? date2Thai(Datereceive) : null
|
||||
"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
:disable="dateCheckReceive !== null"
|
||||
>
|
||||
<template v-if="Datereceive" v-slot:append>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="Datereceive = null"
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
|
|
@ -285,6 +285,7 @@ watch(props, () => {
|
|||
:label="`หน่วยงานที่รับ`"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
|
||||
:disable="dateCheckReceive !== null"
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -319,6 +320,7 @@ watch(props, () => {
|
|||
dense
|
||||
borderless
|
||||
outlined
|
||||
class="inputgreen"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
|
|
@ -389,30 +391,24 @@ watch(props, () => {
|
|||
:label="`หน่วยงานที่คืน`"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
|
||||
:disable="dateCheckReturn !== null"
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<div class="q-px-md q-py-sm">
|
||||
<div class="row justify-end">
|
||||
<q-separator v-if="dateCheckReturn === null" />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
v-if="dateCheckReturn === null"
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="
|
||||
SaveData(
|
||||
props.dateCheckReceive === null ? 'receive' : 'return',
|
||||
props.personId as string
|
||||
)
|
||||
"
|
||||
type="submit"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue