แก้ไขฟอร์มการลา
This commit is contained in:
AnandaTon
parent
ec460a55f5
commit
37a0f984c3
4 changed files with 591 additions and 847 deletions
|
|
@ -1,235 +1,164 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { QForm } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { ref, onMounted } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useRouter, useRoute } from "vue-router"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import type { QForm } from "quasar"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
|
||||
import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
|
||||
import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
|
||||
import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
|
||||
import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
|
||||
import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
|
||||
import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
|
||||
import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
|
||||
import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
|
||||
import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
|
||||
import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
|
||||
import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
|
||||
import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
|
||||
import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue"
|
||||
import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue"
|
||||
import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue"
|
||||
import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue"
|
||||
import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue"
|
||||
import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue"
|
||||
import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue"
|
||||
import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue"
|
||||
import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue"
|
||||
import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue"
|
||||
import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue"
|
||||
import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue"
|
||||
import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue"
|
||||
|
||||
const dataStore = useLeaveStore();
|
||||
const { fetchLeaveType } = dataStore;
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
|
||||
const dataStore = useLeaveStore()
|
||||
const { fetchLeaveType } = dataStore
|
||||
const mixin = useCounterMixin()
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const myform = ref<QForm | null>(null);
|
||||
const $q = useQuasar();
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const myform = ref<QForm | null>(null)
|
||||
const $q = useQuasar()
|
||||
|
||||
const model = ref<string>("");
|
||||
const modelSpecific = ref<string>("");
|
||||
const model = ref<string>("")
|
||||
const modelSpecific = ref<string>("")
|
||||
|
||||
/**
|
||||
* ดึงค่าประเภทการลาจาก Api
|
||||
*/
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await fetchLeaveType(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then(async res => {
|
||||
const data = res.data.result
|
||||
await fetchLeaveType(data)
|
||||
})
|
||||
.catch(err => {
|
||||
messageError($q, err)
|
||||
})
|
||||
}
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
return {
|
||||
"full-width cursor-pointer ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit(postData: FormData) {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveUser(), postData)
|
||||
.then(() => {
|
||||
// router.push(`/leave/edit/${id}`);
|
||||
router.push("/leave");
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader()
|
||||
await http
|
||||
.post(config.API.leaveUser(), postData)
|
||||
.then(res => {
|
||||
router.push(`/leave/edit/${res.data.result.id}`)
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (dataStore.options.length == 0) {
|
||||
await fectOptionType();
|
||||
}
|
||||
});
|
||||
if (dataStore.options.length == 0) {
|
||||
await fectOptionType()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle text-white col-12 row items-center">
|
||||
<q-btn
|
||||
to="/leave"
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<div>สร้างใบลา</div>
|
||||
</div>
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle text-white col-12 row items-center">
|
||||
<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
|
||||
<div>สร้างใบลา</div>
|
||||
</div>
|
||||
|
||||
<q-form ref="myform" class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon
|
||||
name="mdi-numeric-1-circle"
|
||||
size="20px"
|
||||
color="primary"
|
||||
/>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
เลือกประเภทการลา
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-py-sm q-px-lg">
|
||||
<div class="row">
|
||||
<q-select
|
||||
dense
|
||||
class="col-12 col-sm-6 col-md-4 inputgreen"
|
||||
outlined
|
||||
v-model="model"
|
||||
:options="dataStore.options"
|
||||
option-value="code"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทใบลา :"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, null),
|
||||
(modelSpecific = ''),
|
||||
dataStore.fetchProfile()
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<q-form ref="myform" class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
|
||||
</div>
|
||||
<div class="q-py-sm q-px-lg">
|
||||
<div class="row">
|
||||
<q-select
|
||||
dense
|
||||
class="col-12 col-sm-6 col-md-4 inputgreen"
|
||||
outlined
|
||||
v-model="model"
|
||||
:options="dataStore.options"
|
||||
option-value="code"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทใบลา :"
|
||||
@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = ''), dataStore.fetchProfile()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-sm">
|
||||
<div
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
v-if="model === 'LV-006' || model === 'LV-008'"
|
||||
>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="modelSpecific"
|
||||
:options="
|
||||
model === 'LV-006'
|
||||
? dataStore.optionsOrdination
|
||||
: dataStore.optionsSpecific
|
||||
"
|
||||
option-value="code"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทการลา :"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, modelSpecific)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="modelSpecific"
|
||||
:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
|
||||
option-value="code"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทการลา :"
|
||||
@update:model-value="dataStore.typeConvert(model, modelSpecific)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon
|
||||
name="mdi-numeric-2-circle"
|
||||
size="20px"
|
||||
color="primary"
|
||||
/>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ข้อมูลการลา
|
||||
</div>
|
||||
</div>
|
||||
<FormPart2 :model="model" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
|
||||
</div>
|
||||
<FormPart2 :model="model" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<SickForm
|
||||
v-if="model === 'LV-001' || model === 'LV-002'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
|
||||
<HelpWifeBirthForm
|
||||
v-if="model === 'LV-004'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
|
||||
<OrdinationForm
|
||||
v-if="model === 'LV-006' && modelSpecific == 'b1'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<HajjForm
|
||||
v-if="model === 'LV-006' && modelSpecific == 'b2'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<MilitaryForm
|
||||
v-if="model === 'LV-007'"
|
||||
style="width: 100%"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<StudyForm
|
||||
v-if="model === 'LV-008' && modelSpecific === 's1'"
|
||||
style="width: 100%"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<TrainForm
|
||||
v-if="
|
||||
model === 'LV-008' &&
|
||||
modelSpecific != 's1' &&
|
||||
modelSpecific != ''
|
||||
"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<WorkInternationalForm
|
||||
v-if="model === 'LV-009'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<FollowSpouseForm
|
||||
v-if="model === 'LV-010'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<RehabilitationForm
|
||||
v-if="model === 'LV-011'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<SickForm v-if="model === 'LV-001' || model === 'LV-002'" :on-submit="onSubmit" />
|
||||
<FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
|
||||
<HelpWifeBirthForm v-if="model === 'LV-004'" :on-submit="onSubmit" />
|
||||
<VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
|
||||
<OrdinationForm v-if="model === 'LV-006' && modelSpecific == 'b1'" :on-submit="onSubmit" />
|
||||
<HajjForm v-if="model === 'LV-006' && modelSpecific == 'b2'" :on-submit="onSubmit" />
|
||||
<MilitaryForm v-if="model === 'LV-007'" style="width: 100%" :on-submit="onSubmit" />
|
||||
<StudyForm v-if="model === 'LV-008' && modelSpecific === 's1'" style="width: 100%" :on-submit="onSubmit" />
|
||||
<TrainForm v-if="model === 'LV-008' && modelSpecific != 's1' && modelSpecific != ''" :on-submit="onSubmit" />
|
||||
<WorkInternationalForm v-if="model === 'LV-009'" :on-submit="onSubmit" />
|
||||
<FollowSpouseForm v-if="model === 'LV-010'" :on-submit="onSubmit" />
|
||||
<RehabilitationForm v-if="model === 'LV-011'" :on-submit="onSubmit" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue