hrms-mgt/src/modules/05_placement/components/probation/FormAssign.vue

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { ref, computed, watch, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";

import config from "@/app.config";
const $q = useQuasar();
const val1 = ref([
  {
    id: 1,
    text: "1.รัฐธรรมนูญ",
    checked: false,
  },
]);
const status = ref<boolean>(true);

const dataEdit = async (id: string) => {
  showLoader();
  const data = putDataEdit(id);
  await http
    .put(config.API.saveEditAssign(id), data)
    .then((res) => {
      // console.log("success put==>",res)
      // console.log("save")
    })
    .catch((e) => { })
    .finally(async () => {
      status.value = false
      getAssign()
      hideLoader();
    });


}
const saveEdit = (id: string) => {
  dialogConfirm($q, () => dataEdit(id))
}
const edit = () => {
  status.value = true;
  // console.log(status.value);
};
const cancel = () => {
  status.value = false;
};
const router = useRouter();
const mixin = useCounterMixin();
const {
  date2Thai,
  notifyError,
  dateToISO,
  success,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
  dialogMessageNotify,
  modalWarning
} = mixin;
const filterData = (options: any[], excludedGroups: any[]) => {
  return options.filter(
    (item) => !excludedGroups.some((group) => group && group.id === item.id)
  );
};
const filtermantor = (options: any[], excludedGroups: any[]) => {
  return options.filter(
    (item) => !excludedGroups.some((group) => group && group.id === item.id)
  );
};
const filterMain = (options: any[], excludedGroups: any[]) => {
  return options.filter(
    (item) => !excludedGroups.some((group) => group && group.id === item.id)
  );
};
const route = useRoute();
const checkValidate = ref<boolean>(false);
const myForm = ref<any>(null);
const fullnameFoot = ref<string>("");
const positionFoot = ref<string>("");
const caretakerFoot = ref<string>("");
const caretakerFoot2 = ref<string>("");
const id = ref<number>();
const personalId = route.params.personalId as string;
const fullname = ref<string>();
const knowledge_skill_map_no = ref<string[]>([]);
const round_no = ref<number>();
const date_start = ref<Date>();
const date_finish = ref<Date>();
const behavior_desc = ref<string>();
const other_desc = ref<object>({});
const other4_desc = ref<string>();
const Other5 = ref<string>();
const other5_no1_desc = ref<object>({});
const other5_no2_desc = ref<object>({});
const experimenter_dated = ref<Date>();
const createdAt = ref<Date>();
const updatedAt = ref<Date>();
const group = ref<any | null>(null);
const group2 = ref<any | null>(null);
const group3 = ref<any | null>(null);
const main = ref<any>();
const main2 = ref<any>();
const main3 = ref<any>();
const main4 = ref<any>();
const main5 = ref<any>();
const assignId = ref<string>(route.params.form as string);
const Other = ref<string>("");
const commander = ref<string>("");
const chairman = ref<string>("");

const date1 = ref<Date>();
const date2 = ref<Date>();
const date3 = ref<Date>();
const date4 = ref<Date>();

const OPmain = ref<
  Array<{
    id: number;
    title: string;
    description: string;
    level: number;
  }>
>([]);

const OPgroup = ref<
  Array<{
    id: number;
    title: string;
    description: string;
    level: number;
  }>
>([]);
const clearDateExam = () => {
  date_start.value = undefined;
};
const clearDateExam2 = () => {
  date_finish.value = undefined;
};
const isDatePicker2Readonly = computed(() => {
  return date_start.value === undefined;
});
const routeName = router.currentRoute.value.name;
const name = ref<string>("");
const position = ref<string>("");

const monthSelect = ref<number | string>();

const caretaker1 = ref<string>("");
const caretaker2 = ref<string>("");
const OPcaretaker = ref<
  Array<{
    id: string;
    prefix: string;
    firstName: string;
    lastName: string;
    name: string;
    citizenId: number;
    isDirector: boolean;
  }>[]
>([]);

const OPcommander = ref<
  Array<{
    id: string;
    prefix: string;
    firstName: string;
    lastName: string;
    name: string;
    citizenId: number;
    isDirector: boolean;
  }>[]
>([]);
const OPchairman = ref<
  Array<{
    id: string;
    prefix: string;
    firstName: string;
    lastName: string;
    name: string;
    citizenId: number;
    isDirector: boolean;
  }>[]
>([]);
interface MonthOption {
  value: number;
  label: string;
}
const monthOp: MonthOption[] = [];

//-----------------(3.1)-----------//
const activityCount = ref<number>(2);
const activityDataArray = ref<any[]>([]);
const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
const addActivity = () => {
  activityCount.value++;
};
const deleteactivity = (item: number) => {
  activity_desc.value.splice(item, 1);
  goal_desc.value.splice(item, 1);
  if (activityCount.value > 2) {
    activityCount.value--;
  }
};
const activityArray = computed(() => {
  return Array(activityCount.value).fill("");
});
const resetActivity = () => {
  activityCount.value = 2;
  activity_desc.value = Array(activityCount.value).fill("");
  goal_desc.value = Array(activityCount.value).fill("");
};
//-----------------(3.2)-----------//

const knowledgeCount = ref<number>(3);
const knowledge = ref<any[]>([]);
const OPknowledge = ref<
  Array<{
    id: number;
    title: number;
    description: string;
    level: string;
  }>
>([]);
const addKnowledge = () => {
  if (knowledgeCount.value < 6) {
    knowledgeCount.value++;
  }
};

const knowledgeArray = computed(() => {
  return Array(knowledgeCount.value).fill("");
});
const getOpknowledge = (index: number) => {
  return OPknowledge;
};

const deleteknowledge = (item: number) => {
  knowledge.value.splice(item, 1);
  if (knowledgeCount.value > 3) {
    knowledgeCount.value--;
  }
};
const checked = ref<boolean>(false);
const productivityCount = ref<number>(1);
const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const deleteProductivitys = (item: number) => {
  output_desc.value.splice(item, 1);
  indicator_desc.value.splice(item, 1);
  if (productivityCount.value > 1) {
    productivityCount.value--;
  }
};
const addProductivity = () => {
  productivityCount.value++;
};
const ProductivityArray = computed(() => {
  return Array(productivityCount.value).fill("");
});
interface CheckboxItem {
  id: number;
  parent_id: number;
  description: string;
  status_select: number;
  checked: number;
}

const checkRule = ref<CheckboxItem[]>([]);
const getUser = async () => {
  await http.get(config.API.userPlacement(personalId)).then((res: any) => {
    const data = res.data.result;
    OPcaretaker.value = data.caregiver.map((item: any) => ({
      id: item.id,
      prefix: item.prefix,
      firstName: item.firstName,
      lastName: item.lastName,
      name: item.prefix + "" + item.firstName + " " + item.lastName,
      citizenId: item.citizenId,
      isDirector: item.isDirector,
    }));
    OPcommander.value = data.commander.map((item: any) => ({
      id: item.id,
      prefix: item.prefix,
      firstName: item.firstName,
      lastName: item.lastName,
      name: item.prefix + "" + item.firstName + " " + item.lastName,
      citizenId: item.citizenId,
      isDirector: item.isDirector,
    }));
    OPchairman.value = data.chairman.map((item: any) => ({
      id: item.id,
      prefix: item.prefix,
      firstName: item.firstName,
      lastName: item.lastName,
      name: item.prefix + "" + item.firstName + " " + item.lastName,
      citizenId: item.citizenId,
      isDirector: item.isDirector,
    }));
  });
};
const getAssignNew = async (id: string) => {
  await http.get(config.API.newAssign(id)).then((res: any) => {
    const data = res.data.data;
    const monthOption = {
      value: data.assign_month,
      label: `${data.assign_month} เดือน`,
    };
    // console.log("Assign-New", data);
    monthOp.push(monthOption);
    monthSelect.value = `${data.assign_month} เดือน`;
    // OPcaretaker.value = data.mentors;
    // OPcommander.value = [data.commander];
    // OPchairman.value = [data.chairman];
    fullname.value = data.person.name;
    position.value = data.person.OrganizationOrganization;
  });
};
const getcompetency = async (id: string) => {
  await http.get(config.API.competencyOptions(id)).then((res: any) => {
    const data = res.data.data;
    OPmain.value = data;
    main.value = data[0];
    main2.value = data[1];
    main3.value = data[2];
    main4.value = data[3];
    main5.value = data[4];
  });
};
const getCompetencyGroup = async (id: string) => {
  await http.get(config.API.competencyGroupOptions(id)).then((res: any) => {
    const data = res.data.data;
    OPgroup.value = data;
    group.value = data[0];
    group2.value = data[1];
    group3.value = data[2];
  });
};
const getKnowledge = async (id: string) => {
  await http.get(config.API.knowledgeOptions(id)).then((res: any) => {
    OPknowledge.value = res.data.data;
  });
};
const getSkill = async (id: string) => {
  await http.get(config.API.skillOptions(id)).then((res: any) => {
    const skillData = res.data.data;
    OPcomputer.value = [skillData.computer];
    OPenglish.value = [skillData.english];
    OPinfomation.value = [skillData.information];
    OPresourse.value = [skillData.resourse];
    skill.value = skillData.computer;
    skill2.value = skillData.english;
    skill3.value = skillData.information;
    skill4.value = skillData.resourse;
  });
};
const getLaw = async (id: string) => {
  await http.get(config.API.lawOptions(id)).then((res: any) => {
    checkRule.value = res.data.data;
  });
};

const postDateTime = async () => {
  await http
    .post(config.API.calculateDate(), {
      month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
      start_date: dateToISO(date_start.value as Date),
    })
    .then(async (res) => {
      const result = res.data;
      date_finish.value = result.finish_date;
    })
    .catch((e) => { })
    .finally(async () => {
      hideLoader();
    });
};
const putDataEdit = (id: string) => {
  const GUID = personalId;
  const assign_job = activityArray.value.map((item, index) => {
    const activityDesc = activity_desc.value[index]?.trim();
    const goalDesc = goal_desc.value[index]?.trim();

    if (activityDesc !== "" && goalDesc !== "") {
      return {
        activity_desc: activityDesc,
        goal_desc: goalDesc,
      };
    } else {
      return null;
    }
  });
  const know_ledge = knowledge.value.map((item) => ({
    level: item ? item.level : null,
  }));

  const Productivity_assign = ProductivityArray.value.map((item, index) => {
    const outputDesc = output_desc.value[index]?.trim();
    const indicatorDesc = indicator_desc.value[index]?.trim();

    if (outputDesc !== "" && indicatorDesc !== "") {
      return {
        output_desc: outputDesc,
        indicator_desc: indicatorDesc,
      };
    } else {
      return null;
    }
  });

  const allGroup = [];
  if (group.value) allGroup.push({ level: group.value.level });
  if (group2.value) allGroup.push({ level: group2.value.level });
  if (group3.value) allGroup.push({ level: group3.value.level });

  const allSkills = [];
  if (skill.value) allSkills.push({ level: skill.value.level });
  if (skill2.value) allSkills.push({ level: skill2.value.level });
  if (skill3.value) allSkills.push({ level: skill3.value.level });
  if (skill4.value) allSkills.push({ level: skill4.value.level });

  const allCompetency = [];
  if (main.value) allCompetency.push({ level: main.value.level });
  if (main2.value) allCompetency.push({ level: main2.value.level });
  if (main3.value) allCompetency.push({ level: main3.value.level });
  if (main4.value) allCompetency.push({ level: main4.value.level });
  if (main5.value) allCompetency.push({ level: main5.value.level });

  const assign_director = [
    {
      personal_id: caretaker1.value.personal_id,
      role: "mentor",
      dated: date2.value instanceof Date ? dateToISO(date2.value) : dateToISO(new Date(date2.value)),
    },
    {
      personal_id: caretaker2.value.personal_id,
      role: "mentor",
      dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
    },
    {
      personal_id: commander.value.personal_id,
      role: "commander",
      dated: date4.value instanceof Date ? dateToISO(date4.value) : dateToISO(new Date(date4.value)),
    },
    {
      personal_id: chairman.value.personal_id,
      role: "chairman",
    },
  ];
  const data = {
    personal_id: GUID,
    fullname: fullname.value,
    position: position.value,
    monthSelect:
      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
    date_start:
      date_start.value instanceof Date
        ? dateToISO(date_start.value)
        : new Date(),
    date_finish:
      date_finish.value instanceof Date
        ? dateToISO(date_finish.value)
        : dateToISO(new Date(date_finish.value)),
    // caretaker_1: caretaker1.value,
    // caretaker_2: caretaker2.value,
    assign_knowledges: know_ledge,
    assign_jobs: assign_job.filter((item) => item !== null),
    other_desc: OtherLaw.value,
    assign_skill: allSkills,
    assign_competency: allCompetency,
    assign_competency_group: allGroup,
    other4_desc: Other.value,
    other5_no1_desc: Other5.value,
    assign_outputs: Productivity_assign.filter((item) => item !== null),
    // commander: commander.value,
    assign_director: assign_director,
    experimenter_dated: date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
    // date_2: date2.value instanceof Date ? dateToISO(date2.value) : new Date(),
    // date_3: date3.value instanceof Date ? dateToISO(date3.value) : new Date(),
    // date_4: date4.value instanceof Date ? dateToISO(date4.value) : new Date(),
    // caretaker_foot: caretakerFoot.value,
    // caretaker_foot2: caretakerFoot2.value,
    assign_law: checkRule.value
      .filter((item) => item.checked === 1)
      .map((item) => ({
        id: item.id,
        checked: item.checked,
      })),
  };
  return data;
};
const putData = (id: string) => {
  const GUID = personalId;
  const assign_job = activityArray.value.map((item, index) => {
    const activityDesc = activity_desc.value[index]?.trim();
    const goalDesc = goal_desc.value[index]?.trim();

    if (activityDesc !== "" && goalDesc !== "") {
      return {
        activity_desc: activityDesc,
        goal_desc: goalDesc,
      };
    } else {
      return null;
    }
  });
  const know_ledge = knowledge.value.map((item) => ({
    level: item ? item.level : null,
  }));

  const Productivity_assign = ProductivityArray.value.map((item, index) => {
    const outputDesc = output_desc.value[index]?.trim();
    const indicatorDesc = indicator_desc.value[index]?.trim();

    if (outputDesc !== "" && indicatorDesc !== "") {
      return {
        output_desc: outputDesc,
        indicator_desc: indicatorDesc,
      };
    } else {
      return null;
    }
  });

  const allGroup = [];
  if (group.value) allGroup.push({ level: group.value.level });
  if (group2.value) allGroup.push({ level: group2.value.level });
  if (group3.value) allGroup.push({ level: group3.value.level });

  const allSkills = [];
  if (skill.value) allSkills.push({ level: skill.value.level });
  if (skill2.value) allSkills.push({ level: skill2.value.level });
  if (skill3.value) allSkills.push({ level: skill3.value.level });
  if (skill4.value) allSkills.push({ level: skill4.value.level });

  const allCompetency = [];
  if (main.value) allCompetency.push({ level: main.value.level });
  if (main2.value) allCompetency.push({ level: main2.value.level });
  if (main3.value) allCompetency.push({ level: main3.value.level });
  if (main4.value) allCompetency.push({ level: main4.value.level });
  if (main5.value) allCompetency.push({ level: main5.value.level });

  const assign_director = [
    {
      personal_id: caretaker1.value.id,
      role: "mentor",
      dated: date2.value instanceof Date ? dateToISO(date2.value) : dateToISO(new Date(date2.value)),
    },
    {
      personal_id: commander.value.id,
      role: "commander",
      dated: date4.value instanceof Date ? dateToISO(date4.value) : dateToISO(new Date(date4.value)),
    },
    {
      personal_id: chairman.value.id,
      role: "chairman",
    },
  ];
  if (caretaker2.value) {
  assign_director.push({
    personal_id: caretaker2.value.id,
    role: "mentor",
    dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
  });
}
  const data = {
    personalId: GUID,
    fullname: fullname.value,
    position: position.value,
    monthSelect:
      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
    date_start:
      date_start.value instanceof Date
        ? dateToISO(date_start.value)
        : new Date(),
    date_finish:
      date_finish.value instanceof Date
        ? dateToISO(date_finish.value)
        : dateToISO(new Date(date_finish.value)),
    // caretaker_1: caretaker1.value,
    // caretaker_2: caretaker2.value,
    assign_knowledges: know_ledge,
    assign_jobs: assign_job.filter((item) => item !== null),
    other_desc: OtherLaw.value,
    assign_skill: allSkills,
    assign_competency: allCompetency,
    assign_competency_group: allGroup,
    other4_desc: Other.value,
    other5_no1_desc: Other5.value,
    assign_outputs: Productivity_assign.filter((item) => item !== null),
    // commander: commander.value,
    assign_director: assign_director,
    experimenter_dated:
      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
    // date_2: date2.value instanceof Date ? dateToISO(date2.value) : new Date(),
    // date_3: date3.value instanceof Date ? dateToISO(date3.value) : new Date(),
    // date_4: date4.value instanceof Date ? dateToISO(date4.value) : new Date(),
    // caretaker_foot: caretakerFoot.value,
    // caretaker_foot2: caretakerFoot2.value,
    assign_law: checkRule.value
      .filter((item) => item.checked === 1)
      .map((item) => ({
        id: item.id,
        checked: item.checked,
      })),
  };
  return data;
};

const saveData = (id: string) => {
  dialogConfirm($q, async () => await DataSave(id));
};
const DataSave = async (id: string) => {
  await myForm.value.validate().then((result: boolean) => {
    if (result) {
      const data = putData(id);
      http
        .post(config.API.saveFinish(id), data)
        .then((res) => {
          router.push(`/probation/detail/${id}`);
        })
        .catch((e) => { })
        .finally(() => {
          hideLoader();
        });
    } else {
      dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
    }
  });
};
const OtherLaw = ref<string>("");

const skill = ref<any>();
const skill2 = ref<any>();
const skill3 = ref<any>();
const skill4 = ref<any>();
const OPcomputer = ref<
  Array<{
    id: number;
    title: string;
    level: number;
    level_description: string;
  }>
>([]);
const OPenglish = ref<
  Array<{
    id: number;
    title: string;
    level: number;
    level_description: string;
  }>
>([]);
const OPinfomation = ref<
  Array<{
    id: number;
    title: string;
    level: number;
    level_description: string;
  }>
>([]);
const OPresourse = ref<
  Array<{
    id: number;
    title: string;
    level: number;
    level_description: string;
  }>
>([]);
const skillIds = [1, 2, 3, 4];

const getAssign = async () => {
  await http.get(config.API.probationsGetAssign(assignId.value)).then((res) => {
    status.value = false;
    const data = res.data.data;
    // console.log("ASSIGN-list ==>", data);
    fullname.value = data.profile.name;
    position.value = data.profile.OrganizationOrganization;
    date_start.value = data.assign.date_start;
    date_finish.value = data.assign.date_finish;
    date1.value = data.assign.experimenter_dated;
    date2.value = data.mentors[0].dated;
    date3.value = data.mentors[1].dated;
    date4.value = data.commander.dated;
    activity_desc.value = data.jobs.map((job: any) => job.activity_desc);
    goal_desc.value = data.jobs.map((job: any) => job.goal_desc);
    activityCount.value = data.jobs.length;
    caretaker1.value = data.mentors[0];
    caretaker2.value = data.mentors[1];
    chairman.value = data.chairman;
    commander.value = data.commander;
    knowledge.value = data.knowledges.map((id: any) => id.id);
    knowledgeCount.value = data.knowledges.length;
    other_desc.value = data.assign.other_desc;
    other4_desc.value = data.assign.other4_desc;
    other5_no1_desc.value = data.assign.other5_no1_desc;
    const skills = data.skills.map((skills: any) => ({
      id: skills.id,
      title: skills.title,
      level: skills.level,
      level_description: skills.description,
    }));
    [skill.value, skill2.value, skill3.value, skill4.value] = skills;

    main.value = data.competencys[0];
    main2.value = data.competencys[1];
    main3.value = data.competencys[2];
    main4.value = data.competencys[3];
    main5.value = data.competencys[4];

    group.value = data.competency_groups[0];
    group2.value = data.competency_groups[1];
    group3.value = data.competency_groups[2];

    output_desc.value = data.outputs.map((output: any) => output.output_desc);
    indicator_desc.value = data.outputs.map(
      (output: any) => output.indicator_desc
    );
    productivityCount.value = data.outputs.length;

    checkRule.value = data.laws.map((law: any) => ({
      id: law.id,
      checked: law.selected,
      description: law.description,
      status_select: law.status_select,
    }));
    // console.log(
    //   "🚀 ~ file: FormAssign.vue:2009 ~ awaithttp.get ~ checkRule:",
    //   checkRule.value
    // );
  });
};
onMounted(async () => {
  await getUser();
  await getLaw(personalId);
  await getcompetency(personalId);
  await getCompetencyGroup(personalId);
  await getSkill(personalId);
  await getKnowledge(personalId);
  await getAssignNew(personalId);
  await getAssign();
});
watch(
  () => [monthSelect.value, date_start.value],
  () => {
    if (monthSelect.value !== undefined && date_start.value !== undefined) {
      postDateTime();
    }
  }
);
watch(knowledge.value, () => {
  knowledge.value.forEach((item) => {
    OPknowledge.value = OPknowledge.value.filter((e) => e.id != item.id);
  });
});
</script>

<template>
  <q-form ref="myForm">
    <div class="q-pa-sm">
      <div class="toptitle text-dark col-12 row items-center">
        <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)"
          v-if="routeName == 'probationWorkAdd'" />
        <div v-if="routeName == 'probationWorkAdd'">
          เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div v-else class="col-12 row q-gutter-md">
          <div>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
          <!-- <q-space /> -->
          <div v-if="status == false">
            <q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
            </q-btn>
          </div>
          <div v-else>
            <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
              <q-tooltip>ยกเลิก</q-tooltip>
            </q-btn>
            <q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)" icon="mdi-content-save-outline">
              <q-tooltip>บันทึกข้อมูล</q-tooltip>
            </q-btn>
          </div>
        </div>
      </div>
      <div class="col-12 text-dark">
        <div class="row col-12">
          <div class="row col-12 q-gutter-lg">
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
                ผู้ทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-xs-12 col-sm-6">
                  <q-input :rules="[(val) => !!val || 'กรุณากรอกชื่อ']" hide-bottom-space :readonly="status != true" dense
                    borderless :outlined="status == true" v-model="fullname" label="ชื่อ-สกุล" />
                </div>
                <div class="col-xs-12 col-sm-6">
                  <q-input :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']" hide-bottom-space :readonly="status != true"
                    dense borderless :outlined="status == true" v-model="position" label="ตำแหน่ง" />
                </div>
                <div class="col-12 row">
                  <div class="col-12 text-top0 items-center">
                    ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
                  </div>
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-xs-12 col-sm-4">
                      <q-select :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']" hide-bottom-space :options="monthOp"
                        class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless option-label="label"
                        option-value="value" :outlined="status == true" v-model="monthSelect" :label="`ระยะเวลากี่เดือน`" />
                    </div>
                    <div class="col-xs-12 col-sm-4">
                      <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
                        :enableTimePicker="false" week-start="0" :readonly="status != true">
                        <template #year="{ year }">
                          {{ year + 543 }}
                        </template>
                        <template #year-overlay-value="{ value }">
                          {{ parseInt(value + 543) }}
                        </template>
                        <template #trigger>
                          <q-input dense borderless :readonly="status != true" :outlined="status == true"
                            :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
                            class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : undefined
                              " :label="`${'ตั้งเเต่วันที่'}`" clearable @clear="clearDateExam">
                          </q-input>
                        </template>
                      </datepicker>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                      <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
                        :readonly="isDatePicker2Readonly || status != true" :enableTimePicker="false" week-start="0">
                        <template #year="{ year }">
                          {{ year + 543 }}
                        </template>
                        <template #year-overlay-value="{ value }">
                          {{ parseInt(value + 543) }}
                        </template>
                        <template #trigger>
                          <q-input hide-bottom-space dense borderless :outlined="status == true" readonly class="full-width datepicker"
                            :model-value="date_finish != null
                                ? date2Thai(date_finish)
                                : undefined
                              " :label="`${'ถึงวันที่'}`" clearable @clear="clearDateExam2">
                          </q-input>
                        </template>
                      </datepicker>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
                ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
              </div>

              <div v-if="status == true" class="col-12 row q-col-gutter-md">
                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
                  :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
                  dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
                  :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
                <q-select clearable 
                  :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
                  hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless
                  :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
              </div>
              <div v-else class="col-12 row q-col-gutter-md">
                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
                  :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
                  dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
                  :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
                <q-select  clearable
                  :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
                  hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless
                  :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <!-- 3.1 -->
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
                ผลการปฏิบัติงาน
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
                <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
                  @click="addActivity" />
              </div>
              <div class="col-12 row q-gutter-sm">
                <q-card v-for="(item, index) in activityArray" :key="index" flat bordered
                  class="col-12 q-pa-sm bg-grey-1">
                  <div class="col-12 row q-col-gutter-sm">
                    <div class="col-xs-12 col-sm-6">
                      <q-input :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        " hide-bottom-space :readonly="status != true" dense borderless :outlined="status == true"
                        class="bg-white" type="textarea" v-model="activity_desc[index]"
                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
                    </div>
                    <div class="col-xs-12 col-sm-5">
                      <q-input :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        " hide-bottom-space :readonly="status != true" dense borderless :outlined="status == true"
                        class="bg-white" type="textarea" v-model="goal_desc[index]"
                        label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
                    </div>
                    <!-- delete -->
                    <div v-if="index > 1" class="col-xs-12 col-sm-1 flex justify-center items-center">
                      <q-btn flat round color="red" icon="mdi-trash-can-outline" @click="deleteactivity(index)"
                        v-if="status == true" />
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <!-- 3.2 -->
            <div class="col-12 row">
              <div class="col-12 text-top2">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
              </div>
              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                <div class="row col-12 q-gutter-lg">
                  <div class="col-12 row">
                    <div class="col-12 text-top2 row items-center">
                      ความรู้ความสามารถในการปฏิบัติงาน
                      <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
                        @click="addKnowledge" />
                    </div>
                    <div v-for="(item, index) in knowledgeArray" :key="index" class="col-12 row q-col-gutter-sm">
                      <div class="col-11 q-my-xs">
                        <q-select :option-label="(item) => `${item.title}-${item.description}`
                          " option-value="id" map-options :rules="index < 3? [(val) => !!val || 'กรุณาเลือกความสามารถ']: []" 
                          hide-bottom-space :options="OPknowledge" class="bg-white" :readonly="status != true" dense
                          borderless :outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
                            }`" />
                      </div>
                      <div v-if="index > 2" class="col-xs-12 col-sm-1 flex justify-center items-center">
                        <q-btn v-if="status == true" flat round color="red" icon="mdi-trash-can-outline"
                          @click="deleteknowledge(index)" />
                      </div>
                    </div>
                  </div>

                  <div class="col-12 row">
                    <div class="col-12 text-top2 row items-center">
                      ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
                      <!-- <q-btn
                      v-if="status == true"
                      round
                      color="primary"
                      dense
                      icon="mdi-plus"
                      flat
                      class="q-ml-sm"
                    /> -->
                    </div>
                    <q-card flat bordered class="col-12 q-pa-md" style="max-height: 500px; overflow-y: scroll">
                      <div class="example-row-column-width">
                        <div class="bg-grey-3 q-py-xs">
                          <div class="row" v-for="(item, index) in checkRule" :key="item.id">
                            <div v-if="index === 0" class="col-1 text-center">
                              <q-checkbox :true-value="1" :false-value="0" v-if="item.status_select === 1"
                                v-model="item.checked" dense :disable="status != true" />
                            </div>
                            <div v-if="index === 0" class="col-11">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div v-if="index === 1" class="row bg-grey-2 q-py-xs borderCheck">
                            <div class="col-1"></div>
                            <div class="col-10">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div v-if="index === 2" class="row bg-grey-2 q-py-xs borderCheck">
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div v-else-if="index > 2 && index < 9" class="row borderCheck border_y q-py-xs">
                            <div class="col-1 text-center">
                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
                                :disable="status != true" />
                            </div>
                            <div class="col-9 q-pl-xl">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div v-if="index === 9" class="row bg-grey-2 q-py-xs borderCheck">
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div v-else-if="index > 9 && index < 16" class="row borderCheck border_y q-py-xs">
                            <div class="col-1 text-center">
                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
                                :disable="status != true" />
                            </div>
                            <div class="col-9 q-pl-xl">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div v-if="index === 16" class="row bg-grey-2 q-py-xs borderCheck">
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div v-else-if="index > 16 && index < 19" class="row borderCheck border_y q-py-xs">
                            <div class="col-1 text-center">
                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
                                :disable="status != true" />
                            </div>
                            <div class="col-9 q-pl-xl">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div v-if="index === 19" class="row bg-grey-2 q-py-xs borderCheck">
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div v-else-if="index > 19 && index < 30" class="row borderCheck border_y q-py-xs">
                            <div class="col-1 text-center">
                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
                                :disable="status != true" />
                            </div>
                            <div class="col-9 q-pl-xl">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <!-- <div class="row q-mt-xs bg-grey-3 q-py-xs">
                        <div class="col-1 text-center"></div>
                        <div class="col-11">
                          3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                        </div>
                      </div>
                      <div class="row border_y borderCheck">
                        <div class="col-1 text-center"></div>
                        <div class="q-py-sm col-10" style="min-width: 300px">
                          <q-input
                            hide-bottom-space
                            dense
                            outlined
                            lazy-rules
                            v-model="ruleNote"
                            :label="`${'กรอกกฎหมายอื่นๆ'}`"
                            type="textarea"
                          />
                        </div>
                      </div> -->
                      </div>
                    </q-card>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">
                      กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                    </div>
                    <div class="col-12 row q-col-gutter-md">
                      <div class="col-12">
                        <q-input class="bg-white" :readonly="status != true" dense borderless :outlined="status == true"
                          v-model="OtherLaw" type="textarea" />
                      </div>
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">ทักษะ</div>
                    <div class="col-12 row q-col-gutter-sm">
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) =>
                            `${item.title} - ${item.level_description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" 
                          :options="OPcomputer" class="bg-white" :readonly="status != true" dense borderless
                          map-options :outlined="status == true" v-model="skill" label="ด้านที่ 1">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.level_description }}
                            </div>
                          </template></q-select>
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select ellipsis-2-lines :option-label="(item) =>
                            `${item.title} - ${item.level_description}`
                          " option-value="id" map-options hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" 
                          :options="OPenglish" class="bg-white" :readonly="status != true" dense borderless
                          :outlined="status == true" v-model="skill2" label="ด้านที่ 2">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.level_description }}
                            </div>
                          </template></q-select>
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) =>
                            `${item.title} - ${item.level_description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" 
                          :options="OPinfomation" class="bg-white" :readonly="status != true" dense map-options
                          borderless :outlined="status == true" v-model="skill3" label="ด้านที่ 3">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.level_description }}
                            </div>
                          </template></q-select>
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) =>
                            `${item.title} - ${item.level_description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" 
                          :options="OPresourse" class="bg-white" :readonly="status != true" dense map-options
                          borderless :outlined="status == true" v-model="skill4" label="ด้านที่ 4">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.level_description }}
                            </div>
                          </template></q-select>
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="col-12 row">
              <div class="col-12 text-top2">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
              </div>
              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                <div class="row col-12 q-gutter-lg">
                  <div class="col-12 row">
                    <div class="col-12 text-top2">สมรรถนะหลัก</div>
                    <div class="col-12 row q-col-gutter-sm">
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain, [main2, main3, main4, main5])
                            " class="bg-white" :readonly="status != true" dense borderless map-options
                          :outlined="status == true" v-model="main" label="ตัวที่ 1">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template></q-select>
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain, [main, main3, main4, main5])
                            " class="bg-white" :readonly="status != true" dense borderless map-options
                          :outlined="status == true" v-model="main2" label="ตัวที่ 2">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template></q-select>
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain, [main, main2, main4, main5])
                            " class="bg-white" :readonly="status != true" dense map-options borderless
                          :outlined="status == true" v-model="main3" label="ตัวที่ 3">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template></q-select>
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain, [main, main2, main3, main5])
                            " class="bg-white" :readonly="status != true" dense borderless map-options
                          :outlined="status == true" v-model="main4" label="ตัวที่ 4">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template></q-select>
                      </div>

                      <div class="col-xs-12 col-sm-6">
                        <q-select hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']" :options="filterMain(OPmain, [main, main2, main3, main4])
                          " :option-label="(item) => `${item.title} - ${item.description}`" 
                          option-value="id" class="bg-white" :readonly="status != true" dense map-options borderless
                          :outlined="status == true" v-model="main5" label="ตัวที่ 5">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template></q-select>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
                    <div class="col-12 row q-col-gutter-sm">
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]" 
                          :options="filterData(OPgroup, [group2, group3])" class="bg-white"
                          :readonly="status != true" dense borderless map-options :outlined="status == true"
                          v-model="group" label="ตัวที่ 1">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template></q-select>
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]" 
                          :options="filterData(OPgroup, [group, group3])" class="bg-white"
                          :readonly="status != true" dense borderless map-options :outlined="status == true"
                          v-model="group2" label="ตัวที่ 2">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template></q-select>
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
                          " option-value="id" map-options hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]" 
                          :options="filterData(OPgroup, [group, group2])" class="bg-white"
                          :readonly="status != true" dense borderless :outlined="status == true" v-model="group3"
                          label="ตัวที่ 3">
                          <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template></q-select>
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span class="text-weight-regular q-pl-sm">
                  ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย
                  )</span>
              </div>
              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                <div class="row col-12 q-gutter-lg">
                  <div class="col-12 row">
                    <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
                    <div class="col-12 row q-col-gutter-md">
                      <div class="col-12 column q-ml-md">
                        <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
                        <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
                        <li>
                          ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
                          เอาใจใส่เป็นมาตรฐานเดียวกัน
                        </li>
                        <li>
                          ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ
                          ขยันหมั่นเพียร
                        </li>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">
                      ความมีคุณธรรมจริยธรรม ได้แก่
                    </div>
                    <div class="col-12 row q-col-gutter-md">
                      <div class="col-12 column q-ml-md">
                        <li>
                          อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
                        </li>
                        <li>
                          มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต
                        </li>
                        <li>
                          ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
                          อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
                          และพระมหากษัตริย์
                        </li>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
                    <div class="col-12 row q-col-gutter-md">
                      <div class="col-12 column q-ml-md">
                        <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
                        <li>
                          แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
                        </li>
                        <li>
                          ไม่กระทำการใด ๆ
                          อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
                        </li>
                        <li>
                          ไม่กระทำการใด ๆ
                          อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
                        </li>
                        <li>
                          ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
                        </li>
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="col-12 row">
              <div class="col-12 text-top2">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.5 อื่น ๆ (ถ้ามี)
              </div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-12">
                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="Other" />
                </div>
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
                <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
                  @click="addProductivity" />
              </div>
              <div class="col-12 row q-gutter-md">
                <q-card v-for="(item, index) in ProductivityArray" :key="index" flat bordered
                  class="col-12 q-pa-sm bg-grey-1">
                  <div class="col-12 row q-col-gutter-sm">
                    <div class="col-xs-12 col-sm-6">
                      <q-input hide-bottom-space :rules="index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        " class="bg-white" type="textarea" :readonly="status != true" dense borderless
                        :outlined="status == true" v-model="output_desc[index]"
                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)" />
                    </div>
                    <div class="col-xs-12 col-sm-5">
                      <q-input :rules="index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        " hide-bottom-space class="bg-white" type="textarea" :readonly="status != true" dense
                        borderless :outlined="status == true" v-model="indicator_desc[index]"
                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)" />
                    </div>
                    <div v-if="index > 0" class="col-xs-12 col-sm-1 flex justify-center items-center">
                      <q-btn flat v-if="status == true" round color="red" icon="mdi-trash-can-outline"
                        @click="deleteProductivitys(index)" />
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
                การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row">
                <div class="col-12 text-top2">
                  ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
                  ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
                </div>
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
                </div>
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  4.2
                  การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
                </div>
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  4.3
                  การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
                </div>
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
                </div>
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
                การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                5.1
                ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
              </div>
              <div class="col-12 row q-gutter-md">
                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                  <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
                      <li>ทักษะที่ ก.ก. กำหนด</li>
                      <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
                      <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
                      <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
                      <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                      <li>
                        อื่นๆ (ถ้ามี)
                        <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="Other5"
                          label="กรอกอื่นๆ" />
                      </li>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                5.3
                ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
              </div>
              <div class="col-12 row q-gutter-md">
                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>
                        บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
                      </li>
                      <li>
                        แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
                      </li>
                      <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
              </div>
              <div class="col-12 row q-gutter-md">
                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
                      <div class="q-pl-lg">
                        ส่วนที่ 1
                        คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
                      </div>
                      <div class="q-pl-lg">
                        ส่วนที่ 2
                        คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
                      </div>
                      <div class="q-pl-lg">
                        มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ
                        60
                      </div>
                      <li>
                        สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
                      </li>
                      <div class="q-pl-lg">
                        คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
                      </div>
                      <div>
                        <span style="text-decoration: underline">หมายเหตุ</span>
                        ให้นำคะแนนรวมทั้ง 2
                        ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
                        จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
                      </div>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row">
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  ผู้ทดลองปฏิบัติหน้าที่ราชการ
                </div>
              </div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-xs-12 col-sm-4">
                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="fullname"
                    label="ชื่อ-สกุล" />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="position"
                    label="ตำแหน่ง" />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <datepicker menu-class-name="modalfix" v-model="date1" :locale="'th'" autoApply
                    :readonly="status != true" 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 hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :readonly="status != true" dense borderless :outlined="status == true"
                        class="full-width datepicker" :model-value="date1 != null ? date2Thai(date1) : null"
                        label="ลงวันที่">
                        <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>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row q-col-gutter-md">
                <q-select v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker2])" option-value="id"
                  option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
                  :outlined="status == true" v-model="caretaker1" label="ผู้ดูแลคนที่ 1" />
                <q-select v-else :options="filtermantor(OPcaretaker, [caretaker2])" option-value="id" option-label="name"
                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
                  v-model="caretaker1" label="ผู้ดูแลคนที่ 1" />
                <div class="col-xs-12 col-sm-4">
                  <datepicker menu-class-name="modalfix" v-model="date2" :locale="'th'" autoApply borderless
                    :enableTimePicker="false" :readonly="status != true" week-start="0">
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :readonly="status != true" dense borderless :outlined="status == true"
                        class="full-width datepicker" :model-value="date2 != null ? date2Thai(date2) : null"
                        label="ลงวันที่">
                        <template v-slot:prepend>
                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>
                <q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
                  option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
                  :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
                <q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
                  class="col-xs-12 col-sm-8" :readonly="status != true " dense borderless :outlined="status == true"
                  v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
                <div class="col-xs-12 col-sm-4">
                  <datepicker menu-class-name="modalfix" v-model="date3" :locale="'th'" autoApply borderless
                    :enableTimePicker="false" week-start="0" :readonly="status != true | !caretaker2">
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input  hide-bottom-space
                      
                      :disable="!caretaker2"
                        :readonly="status != true" dense s borderless :outlined="status == true"
                        class="full-width datepicker" :model-value="date3 != null ? date2Thai(date3) : null"
                        label="ลงวันที่">
                        <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>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                ผู้บังคับบัญชาผู้มอบหมายงาน
              </div>
              <div class="col-12 row q-col-gutter-md">
                <q-select v-if="status == true" :options="OPcommander" option-value="id" option-label="name"
                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
                  v-model="commander" label="ผู้บังคับบัญชา" />
                <q-select v-else :options="OPcommander" option-value="id" option-label="name" class="col-xs-12 col-sm-8"
                  :readonly="status != true" dense borderless :outlined="status == true" v-model="commander"
                  label="ผู้บังคับบัญชา" />
                <div class="col-xs-12 col-sm-4">
                  <datepicker menu-class-name="modalfix" v-model="date4" :locale="'th'" autoApply borderless
                    :readonly="status != true" :enableTimePicker="false" week-start="0">
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :readonly="status != true" dense borderless :outlined="status == true"
                        class="full-width datepicker" :model-value="date4 != null ? date2Thai(date4) : null"
                        label="ลงวันที่">
                        <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>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                ประธานกรรมการ
              </div>
              <div class="col-12 row q-col-gutter-md">
                <q-select v-if="status == true" :options="OPchairman" option-value="id" option-label="name"
                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
                  v-model="chairman" label="ประธานกรรมการ" />
                <q-select v-else :options="OPchairman" option-value="id" option-label="name" class="col-xs-12 col-sm-8"
                  :readonly="status != true" dense borderless :outlined="status == true" v-model="chairman"
                  label="ประธานกรรมการ" />
              </div>
            </div>
          </div>
        </div>
        <q-separator v-show="routeName == 'probationWorkAdd'" />
        <div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
          <q-btn unelevated label="บันทึก" color="public" @click="saveData(personalId)" />
        </div>
      </div>
    </div>
  </q-form>
</template>
<style lang="scss" scoped>
.border_y {
  border-left: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
}

.borderCheck {
  border-bottom: 1px solid #d8d8d8;
}

.text-top2 {
  font-weight: 500;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.text-Hd {
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 5px;
  color: #02a998;
}

.bin {
  align-items: center;
  justify-content: center;
}

.q-item span {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>