หมายเหตุแนวนอน/ตั้ง
This commit is contained in:
Kittapath
parent
653cd846db
commit
acbec63df7
5 changed files with 802 additions and 286 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref,watch } from "vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
|
|
@ -11,7 +11,15 @@ 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 ,dateToISO} = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
showLoader,
|
||||
success,
|
||||
hideLoader,
|
||||
messageError,
|
||||
dialogConfirm,
|
||||
dateToISO,
|
||||
} = mixin;
|
||||
const files = ref<any>();
|
||||
const filesReturn = ref<any>();
|
||||
const OrganazationId = ref<string>("");
|
||||
|
|
@ -20,17 +28,17 @@ const OrgList = ref<DataOption[]>([]);
|
|||
const OrgList2 = ref<DataOption[]>([]);
|
||||
const Datereceive = ref<Date | null>();
|
||||
const Datereturn = ref<Date | null>();
|
||||
const remark = ref<string>("")
|
||||
const nullii = ref<any>(null)
|
||||
const remark = ref<string>("");
|
||||
const nullii = ref<any>(null);
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
personId: String,
|
||||
close: Function,
|
||||
fecthlistInsignia: Function,
|
||||
dateCheckReceive:String,
|
||||
dateCheckReturn:String,
|
||||
dataModal:Object
|
||||
})
|
||||
dateCheckReceive: String,
|
||||
dateCheckReturn: String,
|
||||
dataModal: Object,
|
||||
});
|
||||
// reset วันที่ประกาศราชกิจจานุเบกษา
|
||||
const clearReceiveDate = () => {
|
||||
Datereceive.value = null;
|
||||
|
|
@ -40,36 +48,36 @@ const clearReturnDate = () => {
|
|||
};
|
||||
const close = () => {
|
||||
props.close?.();
|
||||
Datereceive.value = null
|
||||
files.value = null
|
||||
OrganazationId.value = ''
|
||||
Datereturn.value = null
|
||||
filesReturn.value = null
|
||||
OrganazationId2.value = ''
|
||||
Datereceive.value = null;
|
||||
files.value = null;
|
||||
OrganazationId.value = "";
|
||||
Datereturn.value = null;
|
||||
filesReturn.value = null;
|
||||
OrganazationId2.value = "";
|
||||
};
|
||||
|
||||
const SaveData = async (type:string,id:string) => {
|
||||
await myForm.value.validate().then((result: boolean) => {
|
||||
const SaveData = async (type: string, id: string) => {
|
||||
await myForm.value.validate().then((result: boolean) => {
|
||||
if (result) {
|
||||
dialogConfirm($q,() => dataSave(type,id))
|
||||
}else{
|
||||
}
|
||||
|
||||
})};
|
||||
const dataSave = (type:string,id:string) => {
|
||||
const formData = new FormData();
|
||||
if(props.dateCheckReceive === null){
|
||||
formData.append("Date", dateToISO(Datereceive.value ?? nullii));
|
||||
formData.append("File", files.value);
|
||||
formData.append("OrgId", OrganazationId.value);
|
||||
dialogConfirm($q, () => dataSave(type, id));
|
||||
} else {
|
||||
formData.append("Date", dateToISO(Datereturn.value ?? nullii));
|
||||
formData.append("File", filesReturn.value);
|
||||
formData.append("OrgId", OrganazationId2.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
const dataSave = (type: string, id: string) => {
|
||||
const formData = new FormData();
|
||||
if (props.dateCheckReceive === null) {
|
||||
formData.append("Date", dateToISO(Datereceive.value ?? nullii));
|
||||
formData.append("File", files.value);
|
||||
formData.append("OrgId", OrganazationId.value);
|
||||
} else {
|
||||
formData.append("Date", dateToISO(Datereturn.value ?? nullii));
|
||||
formData.append("File", filesReturn.value);
|
||||
formData.append("OrgId", OrganazationId2.value);
|
||||
}
|
||||
showLoader();
|
||||
http
|
||||
.put(config.API.requestinsignia(type,id), formData)
|
||||
http
|
||||
.put(config.API.requestinsignia(type, id), formData)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -77,17 +85,17 @@ const dataSave = (type:string,id:string) => {
|
|||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
Datereceive.value = null
|
||||
files.value = null
|
||||
OrganazationId.value = ''
|
||||
Datereturn.value = null
|
||||
filesReturn.value = null
|
||||
OrganazationId2.value = ''
|
||||
Datereceive.value = null;
|
||||
files.value = null;
|
||||
OrganazationId.value = "";
|
||||
Datereturn.value = null;
|
||||
filesReturn.value = null;
|
||||
OrganazationId2.value = "";
|
||||
props.close?.();
|
||||
hideLoader();
|
||||
props.fecthlistInsignia?.()
|
||||
props.fecthlistInsignia?.();
|
||||
});
|
||||
}
|
||||
};
|
||||
const fetchOrgList = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
|
|
@ -99,12 +107,12 @@ const fetchOrgList = async () => {
|
|||
}));
|
||||
OrgList.value = orgArr;
|
||||
OrgList2.value = [
|
||||
{
|
||||
id: "00000000-0000-0000-0000-000000000000",
|
||||
name: "สำนักนายกรัฐมนตรี",
|
||||
},
|
||||
...orgArr,
|
||||
];
|
||||
{
|
||||
id: "00000000-0000-0000-0000-000000000000",
|
||||
name: "สำนักนายกรัฐมนตรี",
|
||||
},
|
||||
...orgArr,
|
||||
];
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -113,123 +121,237 @@ 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
|
||||
watch(props, () => {
|
||||
if (props.dataModal) {
|
||||
Datereceive.value = props.dataModal.dateReceiveInsignia;
|
||||
Datereturn.value = props.dataModal.dateReturnInsignia;
|
||||
OrganazationId.value = props.dataModal.orgReceiveInsignia;
|
||||
OrganazationId2.value =
|
||||
Datereturn.value != null
|
||||
? props.dataModal.orgReturnInsignia == null ||
|
||||
props.dataModal.orgReturnInsignia == "-"
|
||||
? "00000000-0000-0000-0000-000000000000"
|
||||
: props.dataModal.orgReturnInsignia
|
||||
: "-";
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
onMounted(()=>{
|
||||
fetchOrgList()
|
||||
})
|
||||
onMounted(() => {
|
||||
fetchOrgList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<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-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">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<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">
|
||||
รับเครื่องราชฯ
|
||||
</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="dateCheckReceive !== null">
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
|
||||
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>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<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="dateCheckReceive !== 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"
|
||||
emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="dateCheckReceive !== null"/>
|
||||
</div>
|
||||
รับเครื่องราชฯ
|
||||
</div>
|
||||
|
||||
<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">
|
||||
คืนเครื่องราชฯ
|
||||
</div>
|
||||
<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="dateCheckReturn !== null">
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<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="dateCheckReturn !== null">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</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="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="OrgList2" dense borderless option-label="name" option-value="id"
|
||||
emit-value map-options outlined v-model="OrganazationId2" lazy-rules :label="`หน่วยงานที่คืน` "
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']" :disable="dateCheckReturn !== null"/>
|
||||
</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="dateCheckReceive !== null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
|
||||
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>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<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="dateCheckReceive !== 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"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
v-model="OrganazationId"
|
||||
lazy-rules
|
||||
:label="`หน่วยงานที่รับ`"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
|
||||
:disable="dateCheckReceive !== null"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
คืนเครื่องราชฯ
|
||||
</div>
|
||||
<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="dateCheckReturn !== null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<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="dateCheckReturn !== null"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</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="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="OrgList2"
|
||||
dense
|
||||
borderless
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
v-model="OrganazationId2"
|
||||
lazy-rules
|
||||
:label="`หน่วยงานที่คืน`"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
|
||||
:disable="dateCheckReturn !== null"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<q-separator />
|
||||
<div class="q-px-md q-py-sm">
|
||||
<div class="row justify-end">
|
||||
<q-btn v-if="dateCheckReturn === null" label="บันทึก" color="public" @click="SaveData(props.dateCheckReceive === 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue