hrms-mgt/src/modules/18_command/components/Step/1_Detail.vue

<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>
  <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>