hrms-mgt/src/modules/05_placement/components/PersonalList/CardPosition.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";

/** importType*/
import type { QTableProps } from "quasar";
import type {
  Positions,
  FormPosType,
  FormPosLevel,
} from "@/modules/05_placement/interface/response/SelectOrg";
import type { DataPositionNo } from "@/modules/05_placement/interface/index/SelectOrg";
import { useSelectOrgStore } from "@/modules/05_placement/stores/storeSelect";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

/** use*/
const { date2Thai } = useCounterMixin();

const store = useSelectOrgStore();

/** props*/
const selected = defineModel("selectedPos", { required: true }); //ตำแหน่งที่เลือก
const positionId = defineModel<string>("positionId", { required: true }); //id ตำแหน่งที่เลือก
const seletcId = defineModel<string>("seletcId", { required: true }); // ตำแหน่งที่เลือก
const date = defineModel<Date>("datePos", { required: true }); //วันยที่รายงานคัว
const positionData = defineModel<any[]>("position", { required: true }); //ข้อมูลรายการตำแหน่งเลขที่
const isAll = defineModel<boolean>("isAll", { required: true }); //แสดงตำแหน่งทั้งหมด
const isBlank = defineModel<boolean>("isBlank", { required: true }); //แสดงเฉพาะตำแหน่งว่าง
const isPosition = defineModel<string>("isPosition", { required: true });
// const isPositionOld = defineModel<boolean>("isPositionOld", { required: true }); //แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม
const posType = defineModel<FormPosType>("posType", { required: true }); //ประเภทตำแหน่ง
const posLevel = defineModel<string>("posLevel", { required: true }); //ระดับตำแหน่ง
const optionPosType = defineModel<FormPosType[]>("optionPosType", {
  required: true,
});
const optionPosLevel = defineModel<FormPosLevel[]>("optionPosLevel", {
  required: true,
});
const bmaOfficer = defineModel<string>("bmaOfficer", { required: true });

const positionRows = ref<DataPositionNo[]>(positionData.value);

const props = defineProps({
  fetchDataTable: Function,
  onPosType: Function,
  nodeId: String,
  nodeLevel: Number,
});

//Table
const filters = ref<string>(""); //คำค้นหา
const rowsPosition = ref<Positions[]>([]); //รายการตำแหน่ง
const columns = ref<QTableProps["columns"]>([
  {
    name: "isPosition",
    align: "left",
    label: "",
    sortable: true,
    field: "isPosition",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posMasterNo",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: true,
    field: "posMasterNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionName",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    field: "positionName",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posTypeName",
    align: "left",
    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "posTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevelName",
    align: "left",
    label: "ระดับตำแหน่ง",
    sortable: true,
    field: "posLevelName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionIsSelected",
    align: "left",
    label: "คนครอง",
    sortable: true,
    field: "positionIsSelected",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const columnsPostition = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionName",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "positionName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionField",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionField",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posTypeName",
    align: "left",
    label: "ประเภทตำเเหน่ง",
    sortable: true,
    field: "posTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevelName",
    align: "left",
    label: "ระดับตำแหน่ง",
    sortable: true,
    field: "posLevelName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posExecutiveName",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "posExecutiveName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionExecutiveField",
    align: "left",
    label: "ด้านทางการบริหาร",
    sortable: true,
    field: "positionExecutiveField",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionArea",
    align: "left",
    label: "ด้าน/สาขา",
    sortable: true,
    field: "positionArea",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "isPosition",
  "no",
  "posMasterNo",
  "positionName",
  "posTypeName",
  "posLevelName",
  "positionIsSelected",
]);

/**
 * function เลือกตำแหน่งเลขที่
 * @param id เลชที่ตำแหน่ง
 */
async function onClickSelectPos(id: string) {
  positionId.value = id;
  selected.value = [];
  const position = positionRows.value.find((e: DataPositionNo) => e.id === id);

  // หาตำแหน่ง
  if (position) {
    rowsPosition.value = position.positions;
    if (seletcId.value) {
      selected.value = rowsPosition.value.filter(
        (e) => e.id === seletcId.value
      );
    }
  }
}

// function onPositionOld() {
//   props.fetchDataTable?.(props.nodeId, props.nodeLevel);
//   if (isPositionOld.value == false) {
//     posType.value.id = "";
//     posType.value.posTypeName = "";
//     posType.value.posTypeRank = null;
//     posType.value.posLevels = [];
//     posLevel.value = "";
//   }
// }

// เช็คว่าถ้ามีการปรับ filter ระบบจะนำข้อมูลไปเช็ค filter แสดงเฉพาะตำแหน่งที่ตรงกับการสอบใหม่อีกครั้ง
watch(positionData, (newVal, oldVal) => {
  if (newVal != oldVal) {
    positionRows.value = positionData.value;
  }
});

/**
 * ทำงานเมื่อ Components ถูกเรียกใช้งาน
 */
onMounted(async () => {
  if (positionId.value) {
    setTimeout(async () => {
      await onClickSelectPos(positionId.value);
    }, 1000);
  } else {
    positionRows.value = positionData.value;
  }
});
</script>

<template>
  <div class="column q-col-gutter-sm">
    <!-- เลือกตำแหน่งเลขที่ -->
    <div class="col-7">
      <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
        <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เลือกตำแหน่งเลขที่
        </div>

        <!-- <div class="col-12">
          <div class="row q-gutter-sm no-wrap">
            <div>
              <q-radio
                keep-color
                v-model="isPosition"
                val="exam"
                label="แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ"
                color="primary"
                :disable="bmaOfficer == 'บุคคลภายนอก'"
              >
                <q-tooltip>แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ</q-tooltip>
              </q-radio>
            </div>

            <div>
              <q-radio
                keep-color
                v-model="isPosition"
                val="select"
                label="แสดงตำแหน่งที่ตรงกับประเภทและระดับ"
                color="primary"
                :disable="bmaOfficer == 'บุคคลภายนอก'"
              >
                <q-tooltip>แสดงตำแหน่งที่ตรงกับประเภทและระดับ</q-tooltip>
              </q-radio>
            </div>

            <div class="col-2">
              <q-select
                v-if="isPosition == 'select'"
                v-model="posType"
                :options="optionPosType"
                option-label="posTypeName"
                label="ประเภทตำแหน่ง"
                dense
                outlined
                @update:model-value="props.onPosType?.()"
              >
              </q-select>
            </div>
            <div class="col-2">
              <q-select
                v-if="isPosition == 'select'"
                :readonly="posType == null"
                v-model="posLevel"
                :options="optionPosLevel"
                option-label="posLevelName"
                option-value="id"
                label="ระดับตำแหน่ง"
                dense
                outlined
                emit-value
                map-options
                @update:model-value="
                  props.fetchDataTable?.(props.nodeId, props.nodeLevel)
                "
              >
              </q-select>
            </div>
          </div>
        </div> -->
        <div class="col-12 q-pa-sm">
          <q-toolbar style="padding: 0px">
            <div>
              <q-checkbox
                keep-color
                v-model="isBlank"
                label="แสดงเฉพาะตำแหน่งว่าง"
                color="primary"
              >
                <q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
              </q-checkbox>
              <q-checkbox
                keep-color
                v-model="isAll"
                label="แสดงตำแหน่งทั้งหมด"
                color="primary"
              >
                <q-tooltip
                  >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
                >
              </q-checkbox>
            </div>
            <q-space />

            <div class="row q-gutter-md">
              <div>
                <q-input outlined dense v-model="filters" label="ค้นหา">
                  <template v-slot:append>
                    <q-icon name="search" color="grey-5" />
                  </template>
                </q-input>
              </div>
              <div>
                <q-select
                  v-model="visibleColumns"
                  multiple
                  outlined
                  dense
                  options-dense
                  :display-value="$q.lang.table.columns"
                  emit-value
                  map-options
                  :options="columns"
                  option-value="name"
                  style="min-width: 140px"
                />
              </div>
            </div>
          </q-toolbar>

          <d-table
            ref="table"
            :columns="columns"
            :rows="positionRows"
            :filter="filters"
            row-key="id"
            flat
            bordered
            :paging="true"
            dense
            :rows-per-page-options="[10, 25, 50, 100]"
            class="tableTb"
            :visible-columns="visibleColumns"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  <span class="text-weight-medium">{{ col.label }}</span>
                </q-th>
              </q-tr>
            </template>
            <template v-slot:body="props">
              <q-tr :props="props" class="cursor-pointer">
                <q-td
                  v-for="col in props.cols"
                  :key="col.name"
                  :props="props"
                  @click="onClickSelectPos(props.row.id)"
                  :class="{
                    'bg-blue-2': props.row.id === positionId,
                    'text-red': props.row.isCondition === true,
                  }"
                >
                  <div v-if="col.name == 'no'">
                    {{ props.rowIndex + 1 }}
                  </div>
                  <div v-else-if="col.name === 'posMasterNo'">
                    {{
                      props.row.isSit
                        ? col.value + " " + "(นั่งทับตำแหน่ง)"
                        : col.value
                    }}
                  </div>
                  <div v-else-if="col.name === 'isPosition'">
                    <div v-if="col.value">
                      <q-icon name="done" color="primary" size="24px">
                        <q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
                      </q-icon>
                    </div>
                  </div>

                  <div v-else>
                    {{ col.value ? col.value : "-" }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </d-table>
        </div>
      </q-card>
    </div>

    <!-- เลือกตำแหน่ง -->
    <div class="col-5">
      <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
        <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เลือกตำแหน่ง
        </div>
        <div class="col-12"><q-separator /></div>
        <q-tab-panels
          v-model="positionId"
          animated
          swipeable
          vertical
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel
            v-for="(item, index) in positionData"
            :key="index"
            :name="item.id"
          >
            <div class="col-12">
              <q-toolbar style="padding: 0px">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="date"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                  :min-date="date"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      ref="dateRef"
                      outlined
                      dense
                      hide-bottom-space
                      :model-value="date != null ? date2Thai(date) : 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>
              </q-toolbar>
              <d-table
                ref="table"
                :columns="columnsPostition"
                :rows="rowsPosition"
                row-key="id"
                flat
                bordered
                :paging="true"
                dense
                :rows-per-page-options="[10, 25, 50, 100]"
                class="tableTb"
                selection="single"
                v-model:selected="selected"
              >
                <template v-slot:header-selection="scope">
                  <q-checkbox
                    keep-color
                    color="primary"
                    dense
                    v-model="scope.checkBox"
                  />
                </template>
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th auto-width />
                    <q-th
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <span class="text-weight-medium">{{ col.label }}</span>
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props" class="cursor-pointer">
                    <q-td>
                      <q-checkbox
                        keep-color
                        color="primary"
                        dense
                        v-model="props.selected"
                      />
                    </q-td>
                    <q-td
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <div v-if="col.name == 'no'">
                        {{ props.rowIndex + 1 }}
                      </div>
                      <div v-else-if="col.name === 'posMasterNo'">
                        {{
                          props.row.isSit
                            ? col.value + " " + "(นั่งทับตำแหน่ง)"
                            : col.value
                        }}
                      </div>

                      <div v-else>
                        {{ col.value ? col.value : "-" }}
                      </div>
                    </q-td>
                  </q-tr>
                </template>
              </d-table>
            </div>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>

<style scoped></style>