hrms-mgt/src/modules/05_placement/components/OrderPlacement/step/step01.vue

<template>
  <div>
    <div class="q-pa-md" style="max-height: 68vh; overflow-y: scroll">
      <q-form ref="myForm">
        <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
          <div class="col-xs-12 col-md-6">
            <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="typeOrder"
              :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
              hide-bottom-space
              :label="`${'ประเภทคำสั่ง'}`"
              @update:modelValue="clickEditRow"
              emit-value
              map-options
              option-label="name"
              :options="typeOrderOption"
              option-value="id"
              use-input
              input-debounce="0"
              @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
                      ) "
            />
          </div>

          <div class="col-xs-12 col-md-6">
            <!-- :readonly="!edit"
                :borderless="!edit" -->
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="nameOrder"
              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
              :label="`${'คำสั่งเรื่อง'}`"
              @update:modelValue="clickEditRow"
              hide-bottom-space
            />
          </div>

          <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
            <div class="col-6">
              <q-input
                :class="getClass(true)"
                outlined
                dense
                lazy-rules
                v-model="command"
                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
                :label="`${'คำสั่ง'}`"
                @update:modelValue="clickEditRow"
                hide-bottom-space
                type="number"
              />
            </div>
            <label class="col-1 flex justify-center items-center text-bold"
              >/</label
            >
            <div class="col-5">
              <datepicker
                v-model="dateYear"
                :locale="'th'"
                autoApply
                year-picker
                :enableTimePicker="false"
                @update:modelValue="clickEditRow"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    :model-value="dateYear + 543"
                    :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                    :label="`${'พ.ศ.'}`"
                    dense
                    outlined
                  >
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
          <div class="col-xs-5 col-md-3">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateCommand"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    dateCommand != null ? date2Thai(dateCommand) : null
                  "
                  :label="`${'วันที่มีผลออกคำสั่ง'}`"
                  :rules="[
                    (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
                  ]"
                >
                  <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 class="col-xs-12 col-md-6">
            <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="byOrder"
              :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
              hide-bottom-space
              :label="`${'คำสั่งโดย'}`"
              @update:modelValue="clickEditRow"
              emit-value
              map-options
              option-label="name"
              :options="byOrderOption"
              option-value="id"
              use-input
              input-debounce="0"
              @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
                      ) "
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <!-- :readonly="!edit"
                :borderless="!edit" -->
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="nameCommand"
              :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
              :label="`${'ผู้มีอำนาจลงนาม'}`"
              @update:modelValue="clickEditRow"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <!-- :readonly="!edit"
                :borderless="!edit" -->
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="positionCommand"
              :rules="[
                (val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`,
              ]"
              :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
              @update:modelValue="clickEditRow"
              hide-bottom-space
            />
          </div>
          <div class="col-12">
            <q-separator />
          </div>
          <div class="col-xs-12 col-md-6">
            <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="test"
              :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
              hide-bottom-space
              :label="`${'รอบการสอบ'}`"
              @update:modelValue="clickEditRow"
              emit-value
              map-options
              option-label="name"
              :options="testOption"
              option-value="id"
              use-input
              input-debounce="0"
              @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
                      ) "
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="position"
              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
              hide-bottom-space
              :label="`${'ตำแหน่งรับสมัคร'}`"
              @update:modelValue="clickEditRow"
              emit-value
              map-options
              option-label="name"
              :options="positionOption"
              option-value="id"
              use-input
              input-debounce="0"
              @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
                      ) "
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="register"
              :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
              hide-bottom-space
              :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
              @update:modelValue="clickEditRow"
              emit-value
              map-options
              option-label="name"
              :options="registerOption"
              option-value="id"
              use-input
              input-debounce="0"
              @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
                      ) "
            />
          </div>

          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateRegister"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    dateRegister != null ? date2Thai(dateRegister) : null
                  "
                  :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
                  :rules="[
                    (val) =>
                      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
                  ]"
                >
                  <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 class="col-xs-12 col-md-6">
            <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="announce"
              :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
              hide-bottom-space
              :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
              @update:modelValue="clickEditRow"
              emit-value
              map-options
              option-label="name"
              :options="announceOption"
              option-value="id"
              use-input
              input-debounce="0"
              @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
                      ) "
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateAnnounce"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
                  "
                  :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
                  :rules="[
                    (val) =>
                      !!val ||
                      `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
                  ]"
                >
                  <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>
      </q-form>
    </div>
    <q-separator />
    <div class="flex justify-end q-pa-sm q-gutter-sm">
      <q-btn
        unelevated
        label="บันทึก"
        color="public"
        @click="next"
      ><!-- icon="mdi-content-save-outline"
        <q-tooltip>บันทึก</q-tooltip> -->
      </q-btn>
      <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
        <q-tooltip>ย้อนกลับ</q-tooltip>
      </q-btn> -->
      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
        <q-tooltip>ต่อไป</q-tooltip>
      </q-btn> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { DataOption } from "@/modules/05_placement/interface/index/Main.ts";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";

const mixin = useCounterMixin();
const { date2Thai } = mixin;

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const next = () => props.next();
const previous = () => props.previous();

const myForm = ref<QForm>();

const editRow = ref<boolean>(false);

const nameOrder = ref<string>("");
const nameCommand = ref<string>("");
const positionCommand = ref<string>("");
const dateYear = ref<number>(new Date().getFullYear());
const command = ref<string>("");
const dateCommand = ref<Date>(new Date());
const dateRegister = ref<Date>(new Date());
const dateAnnounce = ref<Date>(new Date());

const typeOrder = ref<string>("");
const typeOrderOption = ref<DataOption[]>([]);
const typeOrderOptionFilter = ref<DataOption[]>([]);

const byOrder = ref<string>("");
const byOrderOption = ref<DataOption[]>([]);
const byOrderOptionFilter = ref<DataOption[]>([]);

const register = ref<string>("");
const registerOption = ref<DataOption[]>([]);
const registerOptionFilter = ref<DataOption[]>([]);

const announce = ref<string>("");
const announceOption = ref<DataOption[]>([]);
const announceOptionFilter = ref<DataOption[]>([]);

const position = ref<string>("");
const positionOption = ref<DataOption[]>([]);
const positionOptionFilter = ref<DataOption[]>([]);

const test = ref<string>("");
const testOption = ref<DataOption[]>([]);
const testOptionFilter = ref<DataOption[]>([]);

const clickEditRow = () => (editRow.value = true);

const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "typeOrderOption":
      update(() => {
        typeOrderOption.value = typeOrderOptionFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "byOrderOption":
      update(() => {
        byOrderOption.value = byOrderOptionFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "registerOption":
      update(() => {
        registerOption.value = registerOptionFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "announceOption":
      update(() => {
        announceOption.value = announceOptionFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    case "positionOption":
      update(() => {
        positionOption.value = positionOptionFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "testOption":
      update(() => {
        testOption.value = testOptionFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    default:
      break;
  }
};

const submit = async () => {
  await myForm.value!.validate().then((result: boolean) => {
    if (result == false) {
    }
  });
};

/**
 * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
 * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
 */
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
<style>
.q-field--with-bottom {
  padding-bottom: 0px;
}
</style>