เเก้ pop up
This commit is contained in:
parent
244d5eb2c0
commit
932c7593be
2 changed files with 53 additions and 46 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue