รายการคำสั่ง ==> API
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
71be6d095f
commit
15b33b147a
14 changed files with 568 additions and 145 deletions
|
|
@ -1,27 +1,101 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
|
||||
|
||||
import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
|
||||
|
||||
import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const store = useCommandDetail();
|
||||
const { showLoader, hideLoader, success, messageError } = useCounterMixin();
|
||||
|
||||
const formData = reactive({
|
||||
commandNo: "",
|
||||
commandYear: "",
|
||||
commandName: "",
|
||||
commandHeader: "",
|
||||
commandCenter: "",
|
||||
commandFooter: "",
|
||||
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
|
||||
const props = defineProps({
|
||||
onCheckChangeData: { type: Function, required: true },
|
||||
});
|
||||
|
||||
const commandId = ref<string>(route.params.id.toString());
|
||||
const formData = reactive<FormDataDetail>({
|
||||
commandNo: "",
|
||||
commandYear: null,
|
||||
// commandName: "",
|
||||
detailHeader: "",
|
||||
detailBody: "",
|
||||
detailFooter: "",
|
||||
issue: null,
|
||||
});
|
||||
const modalPreview = ref<boolean>(false);
|
||||
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandAction(commandId.value, "tab1"))
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
formData.commandNo = data.commandNo;
|
||||
formData.commandYear = data.commandYear;
|
||||
formData.detailHeader = data.detailHeader;
|
||||
formData.detailBody = data.detailBody;
|
||||
formData.detailFooter = data.detailFooter;
|
||||
formData.issue = data.issue;
|
||||
isChangeData.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.commandAction(commandId.value, "tab1"), formData)
|
||||
.then(async () => {
|
||||
// await fetchData();
|
||||
// success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
/**
|
||||
* เรียก function ไปใช่หน้าหลัก
|
||||
*/
|
||||
defineExpose({
|
||||
onSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 row justify-end">
|
||||
<q-btn
|
||||
label="แสดงตัวอย่าง"
|
||||
color="info"
|
||||
icon="mdi-eye"
|
||||
@click.prevent="modalPreview = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- คำสั่งเลขที่ -->
|
||||
<div class="col-4 row">
|
||||
<div class="col-6">
|
||||
|
|
@ -33,22 +107,53 @@ const modalPreview = ref<boolean>(false);
|
|||
v-model="formData.commandNo"
|
||||
hide-bottom-space
|
||||
:label="`${'คำสั่งเลขที่'}`"
|
||||
@update:model-value="props.onCheckChangeData()"
|
||||
/>
|
||||
</div>
|
||||
<label class="col-1 flex justify-center items-center text-bold">
|
||||
/
|
||||
</label>
|
||||
<div class="col-5">
|
||||
<q-input
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.commandYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
:class="store.classInput(!store.readonly)"
|
||||
:readonly="store.readonly"
|
||||
outlined
|
||||
dense
|
||||
v-model="formData.commandYear"
|
||||
hide-bottom-space
|
||||
:label="`${'พ.ศ.'}`"
|
||||
mask="####"
|
||||
/>
|
||||
@update:model-value="props.onCheckChangeData()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:class="store.classInput(!store.readonly)"
|
||||
:readonly="store.readonly"
|
||||
:model-value="
|
||||
formData.commandYear == null
|
||||
? null
|
||||
: formData.commandYear + 543
|
||||
"
|
||||
:label="`${'พ.ศ.'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -59,9 +164,10 @@ const modalPreview = ref<boolean>(false);
|
|||
:readonly="store.readonly"
|
||||
outlined
|
||||
dense
|
||||
v-model="formData.commandName"
|
||||
v-model="formData.issue"
|
||||
hide-bottom-space
|
||||
:label="`${'คำสั่งเรื่อง'}`"
|
||||
@update:model-value="props.onCheckChangeData()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -76,15 +182,16 @@ const modalPreview = ref<boolean>(false);
|
|||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="formData.commandHeader"
|
||||
v-model="formData.detailHeader"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
@update:model-value="props.onCheckChangeData()"
|
||||
:readonly="store.readonly"
|
||||
class="full-width"
|
||||
v-model="formData.commandHeader"
|
||||
v-model="formData.detailHeader"
|
||||
min-height="5rem"
|
||||
:toolbar="[
|
||||
['left', 'center', 'right', 'justify'],
|
||||
|
|
@ -116,15 +223,16 @@ const modalPreview = ref<boolean>(false);
|
|||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="formData.commandCenter"
|
||||
v-model="formData.detailBody"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
@update:model-value="props.onCheckChangeData()"
|
||||
:readonly="store.readonly"
|
||||
class="full-width"
|
||||
v-model="formData.commandCenter"
|
||||
v-model="formData.detailBody"
|
||||
min-height="5rem"
|
||||
:toolbar="[
|
||||
['left', 'center', 'right', 'justify'],
|
||||
|
|
@ -156,15 +264,16 @@ const modalPreview = ref<boolean>(false);
|
|||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="formData.commandFooter"
|
||||
v-model="formData.detailFooter"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
@update:model-value="props.onCheckChangeData()"
|
||||
:readonly="store.readonly"
|
||||
class="full-width"
|
||||
v-model="formData.commandFooter"
|
||||
v-model="formData.detailFooter"
|
||||
min-height="5rem"
|
||||
:toolbar="[
|
||||
['left', 'center', 'right', 'justify'],
|
||||
|
|
@ -184,22 +293,13 @@ const modalPreview = ref<boolean>(false);
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row justify-end">
|
||||
<q-btn
|
||||
label="แสดงตัวอย่าง"
|
||||
color="info"
|
||||
icon="mdi-eye"
|
||||
@click.prevent="modalPreview = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right" v-if="!store.readonly">
|
||||
<q-btn label="บันทึก" color="public" />
|
||||
<q-btn label="บันทึก" color="public" @click="onSubmit" />
|
||||
</q-card-actions>
|
||||
|
||||
<DialogPerview v-model:modal="modalPreview" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue