hrms-mgt/src/modules/10_order/components/step/step01.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type {
  DataOption1,
  DataOption,
} from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

const mixin = useCounterMixin();
const {
  date2Thai,
  messageError,
  showLoader,
  hideLoader,
  success,
  dialogConfirm,
} = mixin;
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();
const router = useRouter();

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

const myForm = ref<QForm>();
const myForm2 = ref<QForm>();

//option
const typeOrderOption = ref<DataOption1[]>([]);
const byOrderOption = ref<DataOption1[]>([]);
const CommandOption = ref<DataOption1[]>([]);

//Main
const typeOrder = ref<any>([]);
const nameOrder = ref<string>("");
const command = ref<number | "">();
const dateYear = ref<number>(new Date().getFullYear());
const dateCommand = ref<Date>(new Date());
const byOrder = ref<string>("");
const nameCommand = ref<any>([]);
const positionCommand = ref<string>("");

//form  C-PM-01 - 04
const examRound = ref<string>("");
const examRoundOption = ref<DataOption1[]>([]);
const conclusionRegisterNo = ref<string>("");
const conclusionRegisterDate = ref<Date>(new Date());
// const registerOption = ref<DataOption1[]>([
//   {
//     name: "รับสมคัรสอบ ครั้งที่ 1",
//     id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
//   },
// ]);
const conclusionResultNo = ref<string>("");
const conclusionResultDate = ref<Date>(new Date());
// const announceOption = ref<DataOption1[]>([
//   {
//     name: "ผลการสอบแข่งขั้น ครั้งที่ 1",
//     id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
//   },
// ]);

// C-PM-05 - 06
const conclusion1 = ref<string>("");
const conclusionDate1 = ref<Date>(new Date());
const conclusion1Option = ref<DataOption1[]>([
  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const conclusion2 = ref<string>("");
const conclusionDate2 = ref<Date>(new Date());
const conclusion2Option = ref<DataOption1[]>([
  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const meeting = ref<string>("");
const dateMeeting = ref<Date>(new Date());
const meetingOption = ref<DataOption1[]>([
  { name: "การประชุมครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);

// C-PM-07
const conclusionRelocation1 = ref<string>("");
const conclusionRelocationDate1 = ref<Date>(new Date());
const RelocationOption1 = ref<DataOption1[]>([
  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const conclusionRelocation2 = ref<string>("");
const conclusionRelocationDate2 = ref<Date>(new Date());
const RelocationOption2 = ref<DataOption1[]>([
  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);

//  C-PM-08 && 14
const conclusion = ref<string>("");
const conclusionDate = ref<Date>(new Date());
const conclusionOption = ref<DataOption1[]>([
  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const conclusionLeave = ref<string>("");
const conclusionLeaveDate = ref<Date>(new Date());
const LeaveOption = ref<DataOption1[]>([
  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const conclusionReceive = ref<string>("");
const conclusionReceiveDate = ref<Date>(new Date());
const ReceiveOption = ref<DataOption1[]>([
  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);

// C-PM-09
const organizations = ref<string>("");
const organizationsOption = ref<DataOption1[]>([
  { name: "หน่วยงานที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const order = ref<string>("");
const orderDate = ref<Date>(new Date());
const orderOption = ref<DataOption1[]>([
  { name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const book = ref<string>("");
const bookDate = ref<Date>(new Date());
const bookOption = ref<DataOption1[]>([
  { name: "หนังสือ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);

// C-PM-10
const organizationsOld = ref<string>("");
const organizationsOldOption = ref<DataOption1[]>([
  { name: "หน่วยงานที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const orderOld = ref<string>("");
const orderOldDate = ref<Date>(new Date());
const orderOldOption = ref<DataOption1[]>([
  { name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const locationname = ref<string>("");
const experimentOc = ref<string>("");
const experimentformDate = ref<Date>(new Date());
const experimenttoDate = ref<Date>(new Date());
const chairman = ref<string>("");
const chairmanOption = ref<DataOption1[]>([
  { name: "ประธาน ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
]);
const director = ref<string>("");
const directorOption = ref<DataOption1[]>([
  { name: "กรรมการ 1 ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
  { name: "กรรมการ 2 ", id: "3fa85f64-5717-4562-e24k-2c963f66afa6" },
]);
const director2 = ref<string>("");
const director2Option = ref<DataOption1[]>([
  { name: "กรรมการ 1 ", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
  { name: "กรรมการ 2 ", id: "3fa85f64-5717-4562-e24k-2c963f66afa6" },
]);

// C-PM-11-12
const committeeOc = ref<string>("");
const committeeOcOption = ref<DataOption1[]>([
  {
    name: "หน่วยงาน (อนุสนธิคำสั่ง) ",
    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
  },
]);
const committeeOrder = ref<string>("");
const committeeOrderOption = ref<DataOption1[]>([
  {
    name: "คำสั่ง (อนุสนธิคำสั่ง) ",
    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
  },
]);
const committeeDate = ref<Date>(new Date());

// C-PM-13
const receiveOc = ref<string>("");
const receiveOcOption = ref<DataOption1[]>([
  {
    name: "คำสั่งโอน ",
    id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
  },
]);

// C-PM-16
const orderNumber = ref<string>();
const orderNumberDate = ref<Date>(new Date());

onMounted(async () => {
  if (orderId) {
    fecthTypeOption("hasData");
  } else {
    fecthTypeOption("noData");
  }
});

watch(byOrder, async () => {
  await http
    .get(config.API.approverOC(byOrder.value))
    .then((res: any) => {
      CommandOption.value = res.data.result;
      // console.log(CommandOption.value);
    })
    .catch((e: any) => {
      console.log(e);
    });
});

watch(nameCommand, async () => {
  if (positionCommand.value === "" || positionCommand.value === undefined) {
    positionCommand.value = nameCommand.value.positionName;
  }
});
const fecthTypeOption = async (actions: string) => {
  showLoader();
  await http
    .get(config.API.typeOrder())
    .then((res) => {
      typeOrderOption.value = res.data.result.map((e: any) => ({
        id: e.id,
        name: e.name,
        category: e.category,
        commandCode: e.commandCode,
        fullname: e.commandCode + "   " + e.name,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      if (actions == "hasData") {
        await fetchdetailOrder();
      }
      await fecthCommand();
      hideLoader();
    });
};

const fetchdetailOrder = async () => {
  let orderIdString = orderId.toString();
  await http
    .get(config.API.detailOrder(orderIdString))
    .then((res: any) => {
      // console.log(typeOrderOption.value);

      const data = res.data.result;
      typeOrder.value = typeOrderOption.value.find(
        (e) => e.id === data.orderTypeValue
      );
      nameOrder.value = data.orderTitle;
      command.value = data.orderNo;
      dateYear.value = Number(data.orderYear);
      dateCommand.value = data.orderDate;
      byOrder.value = data.orderBy;
      nameCommand.value = data.signatoryBy;
      positionCommand.value = data.signatoryPosition;
      // console.log("nameCommand===>",nameCommand.value);

      examRound.value = data.examRound;
      conclusionRegisterNo.value = data.conclusionRegisterNo;
      conclusionRegisterDate.value = data.conclusionRegisterDate;
      conclusionResultNo.value = data.conclusionResultNo;
      conclusionResultDate.value = data.conclusionResultDate;
      fecthExamRoundOption(data.orderTypeCode);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      await fecthCommand();
      hideLoader();
    });
};
const fecthCommand = async () => {
  await http
    .get(config.API.organizationsOrder())
    .then((res: any) => {
      console.log(res);
      byOrderOption.value = res.data.result;
    })
    .catch((e: any) => {
      console.log(e);
    });
};
const selectCMP = (selectOrder: any) => {
  fecthExamRoundOption(selectOrder.commandCode);
};
const fecthExamRoundOption = async (commandCode: string) => {
  await http
    .get(config.API.examroundOrder(commandCode))
    .then((res) => {
      examRoundOption.value = res.data.result;
    })
    .catch((e) => {
      console.log(e);
    });
};

const submit = async () => {
  let signBy = null;
  if (!nameCommand.value.length) {
    signBy = await nameCommand.value.name;
  } else {
    const name2 = await CommandOption.value.find(
      (x: any) => x.id == nameCommand.value.id
    );
    signBy = await name2?.name;
    console.log("signBy", signBy);
  }

  const orderByOrganizationName = await byOrderOption.value.find(
    (x: any) => x.id == byOrder.value
  )?.name;

  const formdata = {
    orderTypeValue: typeOrder.value.id,
    orderTitle: nameOrder.value,
    orderNo:
      command.value == undefined || command.value == "" ? "" : command.value,
    orderYear: dateYear.value,
    orderDate: dateCommand.value,
    orderBy: byOrder.value,
    orderByOrganizationName: orderByOrganizationName,
    registerPosition: "",
    signatoryBy: signBy,
    signatoryPosition: positionCommand.value,
  };
  if (
    typeOrder.value.commandCode == "C-PM-01" ||
    typeOrder.value.commandCode == "C-PM-02" ||
    typeOrder.value.commandCode == "C-PM-03" ||
    typeOrder.value.commandCode == "C-PM-04"
  ) {
    Object.assign(formdata, {
      examRound: examRound.value,
      conclusionRegisterNo: conclusionRegisterNo.value,
      conclusionRegisterDate: conclusionRegisterDate.value,
      conclusionResultNo: conclusionResultNo.value.toString(),
      conclusionResultDate: conclusionResultDate.value,
    });
  } else if (
    typeOrder.value.commandCode == "C-PM-05" ||
    typeOrder.value.commandCode == "C-PM-06"
  ) {
    Object.assign(formdata, {
      conclusionMeetingNo: meeting.value,
      conclusionMeetingDate: dateMeeting.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-08") {
    Object.assign(formdata, {
      conclusionReturnNo: conclusionReceive.value,
      conclusionReturnDate: conclusionReceiveDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-09") {
    Object.assign(formdata, {
      sourceOrganizationName: organizations.value,
      conclusionReturnNo: order.value,
      conclusionReturnDate: orderDate.value,
      militaryCommandNo: book.value,
      militaryCommandDate: bookDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-10") {
    Object.assign(formdata, {
      placementCommandIssuer: organizationsOld.value,
      placementCommandNo: orderOld.value,
      placementCommandDate: orderOldDate.value,
      placementPositionName: locationname.value,
      placementOrganizationName: experimentOc.value,
      probationStartDate: experimentformDate.value,
      probationEndDate: experimenttoDate.value,
      chairManFullName: chairman.value,
      member1FullName: director.value,
      member2FullName: director2.value,
    });
  } else if (
    typeOrder.value.commandCode == "C-PM-11" ||
    typeOrder.value.commandCode == "C-PM-12"
  ) {
    Object.assign(formdata, {
      placementCommandIssuer: committeeOc.value,
      placementCommandNo: committeeOrder.value,
      placementCommandDate: committeeDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-13") {
    Object.assign(formdata, {
      receiveOrganizationName: receiveOc.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-14") {
    Object.assign(formdata, {
      transferOrganizationName: "",
      conclusionReceiveNo: conclusionReceive.value,
      conclusionReceiveDate: conclusionReceiveDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-16") {
    Object.assign(formdata, {
      govAidCommandNo: orderNumber.value,
      govAidCommandDate: orderNumberDate.value,
    });
  } else if (
    typeOrder.value.commandCode == "C-PM-18" ||
    typeOrder.value.commandCode == "C-PM-19" ||
    typeOrder.value.commandCode == "C-PM-20"
  ) {
    Object.assign(formdata, {
      fault: "",
      guiltyBasis: "",
      conclusionFireNo: "",
      conclusionFireDate: new Date(),
      conclusionFireResolution: "",
    });
  }

  console.log(formdata);

  await myForm.value!.validate().then((result: boolean) => {
    if (result) {
      dialogConfirm($q, () => {
        if (!orderId) {
          createListOrder(formdata, typeOrder.value.commandCode);
        } else {
          let orderIdString = orderId.toString();
          updateOrder(formdata, orderIdString, typeOrder.value.commandCode);
        }
      });
    }
  });
};
const createListOrder = async (formData: Object, type: string) => {
  showLoader();
  await http
    .post(config.API.orderCPM(type), formData)
    .then((res) => {
      const data = res.data.result;
      localStorage.setItem("orderId", data.id);
      router.push(`/order/detail/${data.id}?step=${2}`);
      next();
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
const updateOrder = async (formData: Object, orderId: string, type: string) => {
  showLoader();
  await http
    .put(config.API.orderCPMUpdate(type, orderId), formData)
    .then((res) => {
      console.log(res);
      next();
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
 * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
 */
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
<template>
  <div style="max-height: 68vh; overflow-y: scroll">
    <!-- Main -->
    <q-form ref="myForm" class="q-pa-md">
      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
        <div class="col-xs-12 col-md-6">
          <q-select
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="typeOrder"
            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
            hide-bottom-space
            :label="`${'ประเภทคำสั่ง'}`"
            map-options
            option-label="fullname"
            :options="typeOrderOption"
            option-value="id"
            use-input
            input-debounce="0"
            @update:model-value="selectCMP(typeOrder)"
          />
        </div>
        <div class="col-xs-12 col-md-6">
          <q-input
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="nameOrder"
            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
            :label="`${'คำสั่งเรื่อง'}`"
            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"
              hide-bottom-space
              :label="`${'คำสั่งเลขที่'}`"
            />
          </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"
            >
              <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 || `${'กรุณาเลือกคำสั่งโดย'}`]"
            emit-value
            hide-bottom-space
            :label="`${'คำสั่งโดย'}`"
            map-options
            option-label="name"
            :options="byOrderOption"
            option-value="id"
            use-input
            input-debounce="0"
            @update:model-value="(nameCommand = ''), (positionCommand = '')"
          />
        </div>
        <div class="col-xs-12 col-md-6">
          <selector
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="nameCommand"
            :rules="[(val: string) => !!val || `${'กรุณาเลือกผู้มีอำนาจลงนาม'}`]"
            hide-bottom-space
            :label="`${'ผู้มีอำนาจลงนาม'}`"
            map-options
            option-label="name"
            :options="CommandOption"
            option-value="id"
            use-input
            input-debounce="0"
          >
            <template v-if="CommandOption.length === 0" v-slot:no-option>
              <q-item>
                <q-item-section class="text-primary">
                  กรุณาเลือกคำสั่งโดยก่อน
                </q-item-section>
              </q-item>
            </template>
          </selector>

          <!-- <q-input
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="nameCommand"
            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
            :label="`${'ผู้มีอำนาจลงนาม'}`"
            hide-bottom-space
          /> -->
        </div>
        <div class="col-xs-12 col-md-6">
          <q-input
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="positionCommand"
            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
            hide-bottom-space
            disable
          />
        </div>
        <div class="col-12">
          <q-separator v-if="typeOrder.commandCode" />
        </div>

        <!-- C-PM-01-04 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="
            typeOrder.commandCode === 'C-PM-01' ||
            typeOrder.commandCode === 'C-PM-02' ||
            typeOrder.commandCode === 'C-PM-03' ||
            typeOrder.commandCode === 'C-PM-04'
          "
        >
          <div class="col-xs-12 col-md-12">
            <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="examRound"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
              hide-bottom-space
              :label="`${'รอบการสอบ'}`"
              emit-value
              map-options
              option-label="examRoundName"
              :options="examRoundOption"
              option-value="examRoundValue"
              use-input
              input-debounce="0"
            />
          </div>

          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusionRegisterNo"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`,
              ]"
              :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionRegisterNo"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
              hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" emit-value map-options
              option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionRegisterDate"
              :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="
                    conclusionRegisterDate != null
                      ? date2Thai(conclusionRegisterDate)
                      : 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">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusionResultNo"
              :rules="[
                (val) =>
                  !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`,
              ]"
              :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionResultNo"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
              hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" emit-value map-options
              option-label="name" :options="announceOption" option-value="id" use-input input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionResultDate"
              :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="
                    conclusionResultDate != null
                      ? date2Thai(conclusionResultDate)
                      : 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>

        <!-- C-PM-05-06 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="
            typeOrder.commandCode === 'C-PM-05' ||
            typeOrder.commandCode === 'C-PM-06'
          "
        >
          <!-- <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusion1"
              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]"
              :label="`${'มติ กก. ครั้งที่'}`"
              hide-bottom-space
            /> -->

          <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusion1"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]" hide-bottom-space
              :label="`${'มติ กก. ครั้งที่'}`" emit-value map-options option-label="name" :options="conclusion1Option"
              option-value="id" use-input input-debounce="0" /> -->
          <!-- </div> -->
          <!-- <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionDate1"
              :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="
                    conclusionDate1 != null ? date2Thai(conclusionDate1) : 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">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusion2"
              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]"
              :label="`${'มติ กก. ครั้งที่'}`"
              hide-bottom-space
            /> -->

          <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusion2" :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ '}`]" hide-bottom-space :label="`${'มติ กก. ครั้งที่ '}`" emit-value map-options option-label="name" :options="conclusion2Option" option-value="id" use-input input-debounce="0" /> -->
          <!-- </div> -->
          <!-- <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionDate2"
              :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="
                    conclusionDate2 != null ? date2Thai(conclusionDate2) : 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">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="meeting"
              :rules="[(val) => !!val || `${'กรุณากรอกการประชุม ครั้งที่'}`]"
              :label="`${'การประชุม ครั้งที่'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="meeting"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกการประชุม ครั้งที่ '}`]" hide-bottom-space
              :label="`${'การประชุมครั้งที่ '}`" emit-value map-options option-label="name" :options="meetingOption"
              option-value="id" use-input input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateMeeting"
              :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="
                    dateMeeting != null ? date2Thai(dateMeeting) : 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>

        <!-- C-PM-07 -->
        <!-- <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder.commandCode === 'C-PM-07'"
        >
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusionRelocation1"
              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]"
              :label="`${'มติ กก. ครั้งที่'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionRelocationDate1"
              :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="
                    conclusionRelocationDate1 != null
                      ? date2Thai(conclusionRelocationDate1)
                      : 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">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusionRelocation2"
              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]"
              :label="`${'มติ กก. ครั้งที่'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionRelocationDate2"
              :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="
                    conclusionRelocationDate2 != null
                      ? date2Thai(conclusionRelocationDate2)
                      : 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> -->

        <!-- C-PM-08 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder.commandCode === 'C-PM-08'"
        >
          <!-- <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusion"
              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]"
              :label="`${'มติ กก. ครั้งที่'}`"
              hide-bottom-space
            />
          </div> -->
          <!-- <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionDate"
              :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="
                    conclusionDate != null ? date2Thai(conclusionDate) : 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">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusionLeave"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง ออกจากราชการ)'}`,
              ]"
              :label="`${'มติ กก. ครั้งที่ (เรื่อง ออกจากราชการ)'}`"
              hide-bottom-space
            />
          </div> -->
          <!-- <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionLeaveDate"
              :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="
                    conclusionLeaveDate != null
                      ? date2Thai(conclusionLeaveDate)
                      : 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">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusionReceive"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`,
              ]"
              :label="`${'มติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
              :rules="[(val: string) => !!val || `${'มติ กก. ครั้งที่ (กลับเข้าราชการ)'}`]" hide-bottom-space
              :label="`${'มติ กก. ครั้งที่ (กลับเข้าราชการ)'}`" emit-value map-options option-label="name"
              :options="ReceiveOption" option-value="id" use-input input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionReceiveDate"
              :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="
                    conclusionReceiveDate != null
                      ? date2Thai(conclusionReceiveDate)
                      : 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>

        <!-- C-PM-09 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder.commandCode === 'C-PM-09'"
        >
          <div class="col-xs-12 col-md-12">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="organizations"
              :rules="[(val) => !!val || `${'กรุณากกรอกหน่วยงาน'}`]"
              :label="`${'หน่วยงาน'}`"
              hide-bottom-space
            />
            <!-- <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="organizations"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
              hide-bottom-space
              :label="`${'ชื่อหน่วยงาน'}`"
              emit-value
              map-options
              option-label="name"
              :options="organizationsOption"
              option-value="id"
              use-input
              input-debounce="0"
            /> -->
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="order"
              :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่'}`]"
              :label="`${'คำสั่งที่'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="order"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งที่'}`]" hide-bottom-space :label="`${'คำสั่งที่'}`"
              emit-value map-options option-label="name" :options="orderOption" option-value="id" use-input
              input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="orderDate"
              :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="orderDate != null ? date2Thai(orderDate) : 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="book"
              :rules="[(val: string) => !!val || `${'กรุณาเลือก หนังสือสำนักงาน ก.พ. ที่ นร'}`]"
              hide-bottom-space
              :label="`${'หนังสือสำนักงาน ก.พ. ที่ นร'}`"
              emit-value
              map-options
              option-label="name"
              :options="bookOption"
              option-value="id"
              use-input
              input-debounce="0"
            /> -->
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="book"
              :rules="[
                (val) => !!val || `${'กรุณากกรอกหนังสือสำนักงาน ก.พ. ที่ นร'}`,
              ]"
              :label="`${'หนังสือสำนักงาน ก.พ. ที่ นร'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="bookDate"
              :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="bookDate != null ? date2Thai(bookDate) : 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>

        <!-- C-PM-10 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder.commandCode === 'C-PM-10'"
        >
          <div class="col-xs-12 col-md-4">
            <!-- <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="organizationsOld"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน (ต้นทาง)'}`]"
              hide-bottom-space
              :label="`${'ชื่อหน่วยงาน (ต้นทาง)'}`"
              emit-value
              map-options
              option-label="name"
              :options="organizationsOldOption"
              option-value="id"
              use-input
              input-debounce="0"
            /> -->
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="organizationsOld"
              :rules="[(val) => !!val || `${'กรุณากรอกหน่วยงาน  (ต้นทาง)'}`]"
              :label="`${'ชื่อหน่วยงาน (ต้นทาง'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="orderOld"
              :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่ (ต้นทาง)'}`]"
              :label="`${'คำสั่งที่ (ต้นทาง)'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="orderOld"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งที่ (ต้นทาง)'}`]" hide-bottom-space
              :label="`${'คำสั่งที่ (ต้นทาง)'}`" emit-value map-options option-label="name" :options="orderOldOption"
              option-value="id" use-input input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="orderOldDate"
              :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="
                    orderOldDate != null ? date2Thai(orderOldDate) : 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-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="locationname"
              :rules="[(val) => !!val || `${'กรุณากรอกให้ดำรงตำแหน่ง ณ'}`]"
              :label="`${'ให้ดำรงตำแหน่ง ณ'}`"
              hide-bottom-space
            />
          </div>

          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="experimentOc"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกหน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`,
              ]"
              :label="`${'หน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-md-4"></div>

          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="experimentformDate"
              :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="
                    experimentformDate != null
                      ? date2Thai(experimentformDate)
                      : 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-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="experimenttoDate"
              :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="
                    experimenttoDate != null
                      ? date2Thai(experimenttoDate)
                      : 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-md-4"></div>

          <div class="col-xs-12 col-md-4">
            <!-- <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="chairman"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกประธาน'}`]"
              hide-bottom-space
              :label="`${'ประธาน'}`"
              emit-value
              map-options
              option-label="name"
              :options="chairmanOption"
              option-value="id"
              use-input
              input-debounce="0"
            /> -->
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="chairman"
              :rules="[(val) => !!val || `${'กรุณากรอกชื่อประธาน)'}`]"
              :label="`${'ประธาน'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <!-- <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="director"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกกรรมการ'}`]"
              hide-bottom-space
              :label="`${'กรรมการ'}`"
              emit-value
              map-options
              option-label="name"
              :options="directorOption"
              option-value="id"
              use-input
              input-debounce="0"
            /> -->
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="director"
              :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ)'}`]"
              :label="`${'กรรมการ'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <!-- <selector
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="director2"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกกรรมการ'}`]"
              hide-bottom-space
              :label="`${'กรรมการ'}`"
              emit-value
              map-options
              option-label="name"
              :options="director2Option"
              option-value="id"
              use-input
              input-debounce="0"
            /> -->
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="director2"
              :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ)'}`]"
              :label="`${'กรรมการ'}`"
              hide-bottom-space
            />
          </div>
        </div>

        <!-- C-PM-11 - 12 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="
            typeOrder.commandCode === 'C-PM-11' ||
            typeOrder.commandCode === 'C-PM-12'
          "
        >
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="committeeOc"
              :rules="[
                (val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`,
              ]"
              :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="committeeOc"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน (อนุสนธิคำสั่ง)'}`]" hide-bottom-space
              :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`" emit-value map-options option-label="name"
              :options="committeeOcOption" option-value="id" use-input input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="committeeOrder"
              :rules="[(val) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]"
              :label="`${'อนุสนธิคำสั่งที่'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="committeeOrder"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]" hide-bottom-space
              :label="`${'อนุสนธิคำสั่งที่'}`" emit-value map-options option-label="name" :options="committeeOrderOption"
              option-value="id" use-input input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="committeeDate"
              :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="
                    committeeDate != null ? date2Thai(committeeDate) : 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>

        <!-- C-PM-13 -->
        <div
          class="row col-6 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder.commandCode === 'C-PM-13'"
        >
          <div class="col-xs-12 col-md-12">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="receiveOc"
              :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน'}`]"
              :label="`${'ชื่อหน่วยงาน'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="receiveOc"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]" hide-bottom-space
              :label="`${'ชื่อหน่วยงาน'}`" emit-value map-options option-label="name" :options="receiveOcOption"
              option-value="id" use-input input-debounce="0" /> -->
          </div>
        </div>

        <!-- C-PM-14 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder.commandCode === 'C-PM-14'"
        >
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="conclusionReceive"
              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]"
              :label="`${'มติ กก. ครั้งที่'}`"
              hide-bottom-space
            />

            <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="conclusionReceive"
              :rules="[(val: string) => !!val || `${'มติ กก. ครั้งที่ '}`]" hide-bottom-space
              :label="`${'มติ กก. ครั้งที่ '}`" emit-value map-options option-label="name" :options="ReceiveOption"
              option-value="id" use-input input-debounce="0" /> -->
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionReceiveDate"
              :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="
                    conclusionReceiveDate != null
                      ? date2Thai(conclusionReceiveDate)
                      : 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>

        <!-- C-PM-16 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder.commandCode === 'C-PM-16'"
        >
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="orderNumber"
              :rules="[
                (val) => !!val || `${'กรุณากรอกคำสั่งให้ช่วยราชการเลขที่'}`,
              ]"
              :label="`${'คำสั่งให้ช่วยราชการเลขที่'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="orderNumberDate"
              :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="
                    orderNumberDate != null ? date2Thai(orderNumberDate) : 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>
      </div>
    </q-form>
  </div>

  <q-separator />
  <div class="flex justify-end q-pa-sm q-gutter-sm">
    <q-btn unelevated label="บันทึก" color="public" @click="submit">
      <q-tooltip>บันทึก</q-tooltip>
    </q-btn>
  </div>
</template>

<style>
.q-field--with-bottom {
  padding-bottom: 0px;
}
</style>