hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

UI ออกคำสั่ง

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-10 18:03:01 +07:00
parent a750c4924c
commit 884fab1560
15 changed files with 1828 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

205
src/modules/18_command/components/Step/1_Detail.vue
View file

@ -1,5 +1,206 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
const store = useCommandDetail();
const formData = reactive({
commandNo: "",
commandYear: "",
commandName: "",
commandHeader: "",
commandCenter: "",
commandFooter: "",
});
const modalPreview = ref<boolean>(false);
</script>
<template>
<div>รายละเอียดคำสั่ง</div>
<q-card-section>
<div class="row q-col-gutter-sm">
<!-- คำสั่งเลขที่ -->
<div class="col-4 row">
<div class="col-6">
<q-input
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
v-model="formData.commandNo"
hide-bottom-space
:label="`${'คำสั่งเลขที่'}`"
/>
</div>
<label class="col-1 flex justify-center items-center text-bold">
/
</label>
<div class="col-5">
<q-input
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
v-model="formData.commandYear"
hide-bottom-space
:label="`${'พ.ศ.'}`"
mask="####"
/>
</div>
</div>
<!-- คำสั่งเรื่อง -->
<div class="col-8">
<q-input
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
v-model="formData.commandName"
hide-bottom-space
:label="`${'คำสั่งเรื่อง'}`"
/>
</div>
<!-- เนื้อหาคำสั่งส่วนต้น -->
<div class="col-12">
<q-card bordered flat>
<div class="bg-grey-2 row q-py-sm q-px-md text-bold">
เนื้อหาคำสั่งส่วนต้น
</div>
<q-separator />
<q-card-section>
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandHeader"
borderless
hide-bottom-space
>
<template #control>
<q-editor
:readonly="store.readonly"
class="full-width"
v-model="formData.commandHeader"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
/>
</template>
</q-field>
</q-card-section>
</q-card>
</div>
<!-- เนื้อหาคำสั่งส่วนกลาง -->
<div class="col-12">
<q-card bordered flat>
<div class="bg-grey-2 row q-py-sm q-px-md text-bold">
เนื้อหาคำสั่งส่วนกลาง
</div>
<q-separator />
<q-card-section>
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandCenter"
borderless
hide-bottom-space
>
<template #control>
<q-editor
:readonly="store.readonly"
class="full-width"
v-model="formData.commandCenter"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
/>
</template>
</q-field>
</q-card-section>
</q-card>
</div>
<!-- เนื้อหาคำสั่งส่วนท้าย -->
<div class="col-12">
<q-card bordered flat>
<div class="bg-grey-2 row q-py-sm q-px-md text-bold">
เนื้อหาคำสั่งส่วนท้าย
</div>
<q-separator />
<q-card-section>
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandFooter"
borderless
hide-bottom-space
>
<template #control>
<q-editor
:readonly="store.readonly"
class="full-width"
v-model="formData.commandFooter"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
/>
</template>
</q-field>
</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-card-actions>
<DialogPerview v-model:modal="modalPreview" />
</template>