hrms-mgt/src/modules/05_placement/components/pass/Table.vue

<script setup lang="ts">
import { ref, reactive } from "vue";
import Table from "@/modules/05_placement/components/pass/TableView.vue";
import { useQuasar, QForm } from "quasar";
import type { TableName } from "@/modules/05_placement/interface/request/placement";
import { usePlacementDataStore } from "@/modules/05_placement/store";
import type { QTableProps } from "quasar";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const editvisible = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
const visibleColumns = ref<String[]>([]);
const store = usePlacementDataStore();
const filter = ref<string>("");
const { placementData } = store;
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const modal = ref<boolean>(false); //modal add detail
const modal_right = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const Name = ref<string>();
const positionMasterUserNote = ref<string>();
const $q = useQuasar(); // show dialog
const files = ref<File[]>([]);
const appointModal = ref<boolean>(false);
const appoint = ref<any>({
  Code: '',
  UnitName: '',
  PositionNo: '',
  PositionType: '',
  PositionManage: '',
  PositionTypeManage: '',
  PositionLine: '',
  Major: '',
  PositionLevel: ''
});


const saveAppoint = () => {
  console.log("save appoint===>", appoint.value);
}

const savePostpone = () => {
  const dataPost = { note: positionMasterUserNote.value, files: files }
  console.log("save postpone===>", dataPost);
  positionMasterUserNote.value = '';
  modal_right.value = false;
}

const saveDisclaim = () => {
  const dataPost = { note: positionMasterUserNote.value }
  console.log("save disclaim===>", dataPost);
  positionMasterUserNote.value = '';
  modal_right.value = false;
}

const clickEditRow = () => {
  editRow.value = true;
};
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
const selectData = (props: TableName) => {
  itemtest.value = props
  if (editvisible.value == true) {
    editRow.value = false;
    modalEdit.value = true;
    modal.value = false;
    edit.value = true;
  } else {
    editRow.value = false;
    modalEdit.value = true;
    modal.value = true;
    edit.value = true;
  }
};

const getNumFile = ref(0);
const editDetail = (props: TableName, action: "cancel" | "wait") => {

  if (action === "cancel") {
    getNumFile.value = 0;
    editRow.value = false;
    modalEdit.value = false;
    modal_right.value = true;
    edit.value = true;
    Name.value = props.fullName;
  } else if (action === "wait") {
    getNumFile.value = 1;
    editRow.value = false;
    modalEdit.value = true;
    modal_right.value = true;
    edit.value = true;
    Name.value = props.fullName;
  }

};
placementData.mappingPosition.columns.length == 0
  ? (visibleColumns.value = [
    "position",
    "Name",
    "ExamOrder",
    "Unit",
    "ReportingDate",
    "BMAOfficer",
    "Status",
    "checkList",
  ])
  : (visibleColumns.value = placementData.mappingPosition.columns);
const columns = ref<QTableProps["columns"]>([
  {
    name: "position",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Name",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "Name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "ExamOrder",
    align: "left",
    label: "ลำดับที่สอบได้",
    sortable: true,
    field: "ExamOrder",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Unit",
    align: "left",
    label: "หน่วยงานที่รับการบรรจุ",
    sortable: true,
    field: "Unit",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "ReportingDate",
    align: "left",
    label: "วันที่รายงานตัว",
    sortable: true,
    field: "ReportingDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "BMAOfficer",
    align: "left",
    label: "ข้าราชการฯ กทม.",
    sortable: true,
    field: "BMAOfficer",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Status",
    align: "left",
    label: "สถานะการบรรจุ",
    sortable: true,
    field: "Status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

const rows = ref<TableName[]>([
  {
    profileID: "4016500103241",
    position: 1,
    fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 1,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "-", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "สละสิทธิ์",
    checkList: null,
    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
        scoreAFull: 200,
        scoreA: 133,
        scoreBFull: 200,
        scoreB: 149,
        scoreCFull: 100,
        scoreC: 0,
        scoreSumFull: 500,
        scoreSum: 282,
        examResult: "ผ่าน"
    },
  },
  {
    profileID: "4016500092355",
    position: 2,
    fullName: "นางสาวรัชภรณ์ ภักดี",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 2,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "", //วันที่รายงานตัว
    BMAOfficer: false,
    Status: "ยังไม่บรรจุ",
    checkList: null,
    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
        scoreAFull: 200,
        scoreA: 133,
        scoreBFull: 200,
        scoreB: 149,
        scoreCFull: 100,
        scoreC: 0,
        scoreSumFull: 500,
        scoreSum: 282,
        examResult: "ผ่าน"
    },
  },
  {
    profileID: "4016500086436",
    position: 3,
    fullName: "นางสาวภาพรรณ ลออ",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 3,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "ยังไม่บรรจุ",
    checkList: null,
    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
        scoreAFull: 200,
        scoreA: 133,
        scoreBFull: 200,
        scoreB: 149,
        scoreCFull: 100,
        scoreC: 0,
        scoreSumFull: 500,
        scoreSum: 282,
        examResult: "ผ่าน"
    },
  },

  {
    profileID: "4016500073585",
    position: 4,
    fullName: "นางกติมา พนมเทียน",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 4,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.1)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
        scoreAFull: 200,
        scoreA: 133,
        scoreBFull: 200,
        scoreB: 149,
        scoreCFull: 100,
        scoreC: 0,
        scoreSumFull: 500,
        scoreSum: 282,
        examResult: "ผ่าน"
    },
  },

  {
    profileID: "4016500053234",
    position: 5,
    fullName: "นางสาววิยฎา ทองเอียด",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 5,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.2)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
        scoreAFull: 200,
        scoreA: 133,
        scoreBFull: 200,
        scoreB: 149,
        scoreCFull: 100,
        scoreC: 0,
        scoreSumFull: 500,
        scoreSum: 282,
        examResult: "ผ่าน"
    },
  },
  {
    profileID: "4016500042345",
    position: 6,
    fullName: "นายศรุณ เจริญเมือง",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "ชาย",
    ExamOrder: 6,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.3)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
        scoreAFull: 200,
        scoreA: 133,
        scoreBFull: 200,
        scoreB: 149,
        scoreCFull: 100,
        scoreC: 0,
        scoreSumFull: 500,
        scoreSum: 282,
        examResult: "ผ่าน"
    },
  },
  {
    profileID: "401650002245",
    position: 7,
    fullName: "นายอภินัน บอบู่",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "ชาย",
    ExamOrder: 7,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.4)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "บรรจุเเล้ว",
    checkList: null,
    address: "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
        scoreAFull: 200,
        scoreA: 133,
        scoreBFull: 200,
        scoreB: 149,
        scoreCFull: 100,
        scoreC: 0,
        scoreSumFull: 500,
        scoreSum: 282,
        examResult: "ผ่าน"
    },
  },
]);

const itemtest = ref<object>({});

const clickCancel = async () => {
  editvisible.value = false;
};

const openAppointModal = (value: any) => {
  appointModal.value = true
  editRow.value = true;
};

const clickClose = async () => {
  if (editRow.value == true) {
    $q.dialog({
      title: `ข้อมูลมีการแก้ไข`,
      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
      cancel: "ยกเลิก",
      ok: "ยืนยัน",
      persistent: true,
    }).onOk(async () => {
      modal_right.value = false;
      modal.value = false;
      appointModal.value = false;
    });
  } else {
    modal_right.value = false;
    modal.value = false;
    appointModal.value = false;
  }
};

const save = () => {
  console.log("rows===>", rows.value)
}

</script>
<template>
            <q-form ref="myForm">
              <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
                v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
                :boss="true" :saveNoDraft="true" :add="save">
                <template #columns="props">
                  <q-tr :props="props">
                    <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>

                    <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
                      class="cursor-pointer">
                      <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
                        <div>
                          <q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
                          <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
                        </div>
                      </div>
                      <div v-else-if="col.name == 'Name'" class="table_ellipsis">
                        {{ col.value }}
                        <p>{{ props.row.fullName }}</p>
                      </div>
                      <div v-else-if="col.name == 'Unit'" class="table_ellipsis">

                        <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
                          <div @click="openAppointModal">
                            <q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
                              <template v-slot:prepend>
                                <q-icon name="bookmark" color="primary" />
                              </template>
                            </q-input>
                          </div>
                        </div>
                        <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
                        <div v-else>
                          {{ props.row.examResult }}
                          <p>{{ col.value }}</p>
                        </div>
                      </div>
                      <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
                        <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
                          <datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
                            v-model="props.row.ReportingDate">
                            <template #year="{ year }">
                              {{ year + 543 }}
                            </template>
                            <template #year-overlay-value="{ value }">
                              {{ parseInt(value + 543) }}
                            </template>
                            <template #trigger>
                              <q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
                                <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 v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
                        <div v-else>
                          {{ mixin.date2Thai(col.value) }}
                        </div>
                      </div>
                      <div v-else class="table_ellipsis">
                        {{ col.value }}
                      </div>
                    </q-td>
                    <q-td auto-width>
                      <div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
                        <div></div>
                      </div>
                      <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
                        <q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
                          @click="editDetail(props.row, 'wait')" />
                        <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
                          @click="editDetail(props.row, 'cancel')" />
                      </div>
                      <div v-else align="right">
                        <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
                          @click="editDetail(props.row, 'cancel')" />
                      </div>
                    </q-td>
                  </q-tr>
                </template>
              </Table>
            </q-form>

            <q-dialog v-model="appointModal" persistent>
              <q-card style="width: 800px">
                <q-form ref="myForm">
                  <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
                  <q-separator />
                  <q-card-section>

                    <div class="row q-col-gutter-xs">
                      <div class="col">
                        <q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
                      </div>
                      <div class="col">
                        <q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
                      </div>
                    </div>

                    <div class="row q-col-gutter-xs q-pt-xs">
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
                      </div>
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
                      </div>
                    </div>

                    <div class="row q-col-gutter-xs q-pt-xs">
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
                      </div>
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
                      </div>
                    </div>

                    <div class="row q-col-gutter-xs q-pt-xs">
                      <div class="col">
                        <q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
                      </div>
                      <div class="col">
                        <q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
                      </div>
                    </div>

                    <div class="row q-col-gutter-xs q-pt-xs">
                      <div class="col-6">
                        <q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
                      </div>
                    </div>

                  </q-card-section>

                  <q-separator />
                  <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
                </q-form>
              </q-card>
            </q-dialog>

            <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose"/>

  <q-dialog v-model="modal_right" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
              :borderless="!edit" v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`"
              @update:modelValue="clickEditRow" type="textarea" />
            <q-file v-if="getNumFile == 1" v-model="files" dense :label="'เลือกไฟล์เอกสารหลักฐาน'" outlined use-chips
              multiple class="q-py-sm">
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
            </q-file>
            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit"
          :save="modalEdit ? savePostpone : saveDisclaim" />
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.q-table p {
  margin-bottom: 0;
  color: #818181;
}
</style>