hrms-admin/src/modules/05_command/components/FormTemplate.vue

<script setup lang="ts">
import { watch, ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/modules/05_command/stores/main";

const $q = useQuasar();
const mixin = useCounterMixin();
const {
  dialogConfirm,
  success,
  showLoader,
  hideLoader,
  dialogRemove,
  messageError,
} = mixin;
const store = useDataStore();

const commandId = defineModel<string>("commandId", { required: true });
const type = defineModel<string>("type", { required: true });

const textHeader = ref<string>("");
const textBody = ref<string>("");
const textFooter = ref<string>("");

const fetchData = async () => {
  textHeader.value = "";
  textBody.value = "";
  textFooter.value = "";
};

const onSave = () => {
  console.log("textHeader===>", textHeader.value);
  console.log("textBody===>", textBody.value);
  console.log("textFooter===>", textFooter.value);
};

function clearFormat(type: string) {
  switch (type) {
    case "textHeader":
      textHeader.value = textHeader.value.replace(/<\/?[^>]+(>|$)/g, "");
      break;
    case "textBody":
      textBody.value = textBody.value.replace(/<\/?[^>]+(>|$)/g, "");
      break;
    case "textFooter":
      textFooter.value = textFooter.value.replace(/<\/?[^>]+(>|$)/g, "");
      break;

    default:
      break;
  }
}

const handleInput = (event: any, type: string) => {
  if (event.inputType === "insertFromPaste") {
    clearFormat(type);
  }
};

watch(
  () => commandId.value,
  (newValue, oldValue) => {
    if (newValue && newValue !== oldValue) {
      fetchData();
    }
  }
);
</script>

<template>
  <q-card>
    <q-card-section class="q-pt-none">
      <div class="row items-center q-col-gutter-sm">
        <div class="col-12">
          <q-input
            type="textarea"
            class="full-width inputgreen cursor-pointer"
            hide-bottom-space
            outlined
            dense
            lazy-rules
            v-model="textHeader"
            label="เนื้อหาคำสั่งส่วนต้น"
          />
          <!-- <q-label>เนื้อหาคำสั่งส่วนต้น</q-label>
          <q-field
            class="q_field_p_none"
            ref="fieldRef"
            v-model="textHeader"
            borderless
            hide-bottom-space
          >
            <template #control>
              <q-editor
                class="full-width"
                v-model="textHeader"
                min-height="5rem"
                :toolbar="store.toolbarOptions"
                @input="(e:any) => handleInput(e, 'textHeader')"
              />
            </template>
          </q-field> -->
        </div>

        <div class="col-12">
          <q-input
            type="textarea"
            class="full-width inputgreen cursor-pointer"
            hide-bottom-space
            outlined
            dense
            lazy-rules
            v-model="textBody"
            label="เนื้อหาคำสั่งส่วนกลาง"
          />

          <!-- <q-label>เนื้อหาคำสั่งส่วนกลาง</q-label>
          <q-field
            class="q_field_p_none"
            ref="fieldRef"
            v-model="textBody"
            borderless
            hide-bottom-space
          >
            <template #control>
              <q-editor
                class="full-width"
                v-model="textBody"
                min-height="5rem"
                :toolbar="store.toolbarOptions"
                @input="(e:any) => handleInput(e, 'textBody')"
              />
            </template>
          </q-field> -->
        </div>

        <div class="col-12">
          <q-input
            type="textarea"
            class="full-width inputgreen cursor-pointer"
            hide-bottom-space
            outlined
            dense
            lazy-rules
            v-model="textFooter"
            label="เนื้อหาคำสั่งส่วนท้าย"
          />
          <!-- <q-label>เนื้อหาคำสั่งส่วนท้าย</q-label>
          <q-field
            class="q_field_p_none"
            ref="fieldRef"
            v-model="textFooter"
            borderless
            hide-bottom-space
          >
            <template #control>
              <q-editor
                class="full-width"
                v-model="textFooter"
                min-height="5rem"
                :toolbar="store.toolbarOptions"
                @input="(e:any) => handleInput(e, 'textFooter')"
              />
            </template>
          </q-field> -->
        </div>
      </div>
    </q-card-section>
    <q-card-section align="right">
      <q-btn
        for="#submitForm"
        unelevated
        dense
        class="q-px-md items-center"
        color="light-blue-10"
        label="บันทึก"
        @click="onSave"
      />
    </q-card-section>
  </q-card>
</template>