เเก้ pop up

This commit is contained in:
setthawutttty 2023-10-02 13:58:56 +07:00
parent 244d5eb2c0
commit 932c7593be
2 changed files with 53 additions and 46 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onMounted, ref,watch } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
@ -11,13 +11,14 @@ import type { DataOption } from "@/modules/04_registry/components/profileType";
const $q = useQuasar();
const myForm = ref<any>();
const mixin = useCounterMixin();
const { date2Thai,showLoader,success,hideLoader,messageError,dialogConfirm } = mixin;
const { date2Thai,showLoader,success,hideLoader,messageError,dialogConfirm ,dateToISO} = mixin;
const files = ref<any>();
const filesReturn = ref<any>();
const OrganazationId = ref<string>("");
const OrganazationId2 = ref<string>("");
const OrgList = ref<DataOption[]>([]);
const Datereceive = ref<Date | null>(null);
const OrgList2 = ref<DataOption[]>([]);
const Datereceive = ref<Date | null>();
const Datereturn = ref<Date | null>();
const remark = ref<string>("")
const nullii = ref<any>(null)
@ -26,9 +27,10 @@ const props = defineProps({
personId: String,
close: Function,
fecthlistInsignia: Function,
fileCheck:String,
fileCheck2:String
});
dateCheckReceive:String,
dateCheckReturn:String,
dataModal:Object
})
// reset
const clearReceiveDate = () => {
Datereceive.value = null;
@ -48,25 +50,22 @@ const close = () => {
const SaveData = async (type:string,id:string) => {
await myForm.value.validate().then((result: boolean) => {
console.log(result)
if (result) {
console.log(1)
dialogConfirm($q,() => dataSave(type,id))
}else{
console.log(2)
}
})};
const dataSave = (type:string,id:string) => {
const formData = new FormData();
if(props.fileCheck === null){
formData.append("Datereceiveinsignia", Datereceive.value?.toString() ?? "");
formData.append("Docreceiveinsignia", files.value);
formData.append("Orgreceiveinsignia", nullii.value);
if(props.dateCheckReceive === null){
formData.append("Date", dateToISO(Datereceive.value ?? nullii));
formData.append("File", files.value);
formData.append("OrgId", OrganazationId.value);
} else {
formData.append("DateReturnInsignia", Datereturn.value?.toString() ?? "");
formData.append("DocReturnInsignia", filesReturn.value);
formData.append("OrgReturnInsignia", nullii.value);
formData.append("Date", dateToISO(Datereturn.value ?? nullii));
formData.append("File", filesReturn.value);
formData.append("OrgId", OrganazationId2.value);
}
showLoader();
http
@ -98,17 +97,14 @@ const fetchOrgList = async () => {
id: e.organizationId,
name: e.organizationName,
}));
// if (props.action == "editData") {
// OrgList.value = [
// {
// id: "00000000-0000-0000-0000-000000000000",
// name: "",
// },
// ...orgArr,
// ];
// } else {
OrgList.value = orgArr;
// }
OrgList2.value = [
{
id: "00000000-0000-0000-0000-000000000000",
name: "สำนักนายกรัฐมนตรี",
},
...orgArr,
];
})
.catch((err) => {
messageError($q, err);
@ -117,6 +113,15 @@ const fetchOrgList = async () => {
hideLoader();
});
};
watch(props,()=>{
if(props.dataModal){
Datereceive.value = props.dataModal.dateReceiveInsignia
Datereturn.value = props.dataModal.dateReturnInsignia
OrganazationId.value = props.dataModal.orgReceiveInsignia
OrganazationId2.value = props.dataModal.orgReturnInsignia
}
})
onMounted(()=>{
fetchOrgList()
})
@ -138,9 +143,9 @@ onMounted(()=>{
บเครองราชฯ
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="Datereceive" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0" :readonly="fileCheck !== null">
:enableTimePicker="false" week-start="0" :readonly="dateCheckReceive !== null">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -149,8 +154,8 @@ onMounted(()=>{
</template>
<template #trigger>
<q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : undefined
" :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="fileCheck !== null">
hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : null
" :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="dateCheckReceive !== null">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
@ -163,7 +168,7 @@ onMounted(()=>{
<div class="col-xs-12 col-sm-4">
<q-file outlined dense v-model="files" label="ไฟล์หลักฐานการรับ" lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="fileCheck !== null">
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="dateCheckReceive !== null">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -172,11 +177,11 @@ onMounted(()=>{
<div class="col-xs-12 col-sm-4">
<q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="fileCheck !== null"/>
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="dateCheckReceive !== null"/>
</div>
</div>
<div v-if="fileCheck !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div v-if="dateCheckReceive !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-12 q-mt-sm"><q-separator/></div>
<div class="col-12 text-weight-bold text-grey-7">
นเครองราชฯ
@ -184,7 +189,7 @@ onMounted(()=>{
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="Datereturn" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0" :readonly="fileCheck2 !== null">
:enableTimePicker="false" week-start="0" :readonly="dateCheckReturn !== null">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -194,7 +199,7 @@ onMounted(()=>{
<template #trigger>
<q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
hide-bottom-space :model-value="Datereturn != null ? date2Thai(Datereturn) : undefined
" :label="`${'วันที่คืน'}`" clearable @clear="clearReturnDate" :disable="fileCheck2 !== null">
" :label="`${'วันที่คืน'}`" clearable @clear="clearReturnDate" :disable="dateCheckReturn !== null">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
@ -205,16 +210,16 @@ onMounted(()=>{
</div>
<div class="col-xs-12 col-sm-4">
<q-file outlined dense v-model="filesReturn" label="ไฟล์หลักฐานการคืน" lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']" hide-bottom-space :disable="fileCheck2 !== null">
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']" hide-bottom-space :disable="dateCheckReturn !== null">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-sm-4">
<q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
<q-select hide-bottom-space :options="OrgList2" dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="OrganazationId2" lazy-rules :label="`หน่วยงานที่คืน` "
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']" :disable="fileCheck2 !== null"/>
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']" :disable="dateCheckReturn !== null"/>
</div>
</div>
</div>
@ -224,7 +229,7 @@ onMounted(()=>{
<q-separator />
<div class="q-px-md q-py-sm">
<div class="row justify-end">
<q-btn v-if="fileCheck2 === null" label="บันทึก" color="public" @click="SaveData(props.fileCheck === null ? 'receive':'return',props.personId as string)">
<q-btn v-if="dateCheckReturn === null" label="บันทึก" color="public" @click="SaveData(props.dateCheckReceive === null ? 'receive':'return',props.personId as string)">
<q-tooltip>นท</q-tooltip>
</q-btn>
</div>

View file

@ -42,9 +42,9 @@ const insigniaTypeFilter = ref<any>({
const filterInvoice = ref<any>(DataStore.invoiceTypeop);
const filterEmployee = ref<any>(DataStore.employeeClassOps);
const ModalDialog = ref<boolean>(false);
const dateReceiveInsignia = ref<Date>();
const fileCheck = ref<any>();
const fileCheck2 = ref<any>();
const dateCheckReceive = ref<any>();
const dateCheckReturn = ref<any>();
const dataModal = ref<any>([])
onMounted(async () => {
await fecthRound();
});
@ -436,9 +436,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
else return start + "-" + end + " ใน " + total;
};
const OpenModal = (data: any) => {
dataModal.value = data
ModalDialog.value = true;
fileCheck.value = data.docReceiveInsignia;
fileCheck2.value = data.docReturnInsignia;
dateCheckReceive.value = data.dateReceiveInsignia;
dateCheckReturn.value = data.dateReturnInsignia;
personId.value = data.id;
};
const filterSelector = (val: any, update: Function, name: any) => {
@ -865,8 +866,9 @@ const clearInsigniaFilters = (name: string) => {
<Dialogbody
:modal="ModalDialog"
:close="close"
:fileCheck="fileCheck"
:fileCheck2="fileCheck2"
:dateCheckReceive="dateCheckReceive"
:dateCheckReturn="dateCheckReturn"
:dataModal="dataModal"
:personId="personId"
:fecthlistInsignia="fecthlistInsignia"
/>