hrms-mgt/src/modules/11_discipline/components/2_InvestigateFacts/DialogSendTerminate.vue

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";

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

import DialogHeader from "@/components/DialogHeader.vue";

const modal = defineModel<boolean>("modal", { required: true });

const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { dialogMessageNotify, showLoader, hideLoader, success, messageError } =
  mixin;

const checkRoutePermisson = ref<boolean>(
  route.name == "disciplineInvestigatefactsDetail"
);

const props = defineProps({
  rows: {
    type: Array,
    default: [],
  },
  columns: {
    type: Array,
    default: [],
  },
  visibleColumns: {
    type: Array,
    default: [],
  },
  fetchData: Function,
});

const remark = ref<string>("");
const selected = ref<any[]>([]);
const file = ref<any>(null);
const pagination = ref<any>({
  descending: false,
  rowsPerPage: 25,
});

function close() {
  modal.value = false;
  file.value = null;
  selected.value = [];
  remark.value = "";
}

function onSubmit() {
  if (selected.value.length !== 0) {
    const body = new FormData();
    selected.value
      .map((items: any) => items.id)
      .forEach((items: any) => {
        body.append("id", items);
      });
    body.append("file", file.value);
    body.append("remark", remark.value);
    showLoader();
    http
      .post(config.API.investigateReport(), body)
      .then((res) => {
        close();
        props.fetchData?.();
        success($q, "ส่งรายชื่อไปยุติเรื่อง สำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  } else {
    dialogMessageNotify($q, "กรุณาเลือกรายชื่ออย่างน้อย 1 คน");
  }
}
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 80%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader :tittle="'ส่งรายชื่อไปยุติเรื่อง'" :close="close" />
        <q-separator />

        <q-card-section class="scroll" style="max-height: 70vh">
          <div class="row q-col-gutter-sm">
            <div class="col-12 col-md-8">
              <q-card bordered>
                <q-card-section class="bg-grey-2 text-weight-medium q-pa-sm"
                  >รายชื่อ</q-card-section
                >
                <q-separator />
                <q-card-section class="q-pa-xs">
                  <q-table
                    :columns="props.columns"
                    :rows="rows"
                    row-key="personId"
                    flat
                    bordered
                    :paging="false"
                    :rows-per-page-options="[10, 25, 50, 100]"
                    dense
                    class="my-sticky-custom"
                    :visible-columns="props.visibleColumns"
                    selection="multiple"
                    v-model:selected="selected"
                    v-model:pagination="pagination"
                  >
                    <template v-slot:header-selection="scope">
                      <q-checkbox
                        keep-color
                        color="primary"
                        dense
                        v-model="scope.selected"
                      />
                    </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>
                            {{ col.value ? col.value : "-" }}
                          </div>
                        </q-td>
                      </q-tr>
                    </template>
                  </q-table>
                </q-card-section>
              </q-card>
            </div>
            <div class="col-12 col-md-4">
              <q-card
                bordered
                class="row col-12"
                style="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>
                <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
                  <div v-if="!checkRoutePermisson" class="col-12 row">
                    <q-file
                      class="col-12"
                      for="#evidenceFiles"
                      outlined
                      dense
                      lazy-rules
                      hide-bottom-space
                      :rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเอกสารที่เกี่ยวข้อง'}`,]"
                      v-model="file"
                      label="เอกสารที่เกี่ยวข้องกับการยุติเรื่อง"
                    >
                      <template v-slot:prepend>
                        <q-icon name="attach_file" color="primary" />
                      </template>
                    </q-file>
                  </div>

                  <!-- <div class="col-xs-12 row">
                    <q-list
                      class="full-width rounded-borders"
                      bordered
                      separator
                    >
                      <q-item
                        v-for="file in props.data
                          .disciplineInvestigateRelevantDocs"
                        :key="file.id"
                        clickable
                        v-ripple
                      >
                        <q-item-section>{{ file.fileName }}</q-item-section>
                        <q-item-section avatar>
                          <div class="row">
                            <div>
                              <q-btn
                                dense
                                flat
                                round
                                color="blue"
                                icon="mdi-download"
                                @click="
                                  downloadRenameFileByLink(
                                    file.pathName,
                                    file.fileName
                                  )
                                "
                              >
                                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                              </q-btn>
                            </div>
                            <div>
                              <q-btn
                                v-if="!isReadonly && !checkRoutePermisson"
                                dense
                                flat
                                round
                                color="red"
                                icon="mdi-delete"
                                @click="deleteFileRelevant(file.id)"
                                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                              >
                            </div>
                          </div>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </div> -->

                  <div class="col-12" v-else>
                    <q-card class="q-pa-md" bordered>
                      ไม่มีรายการเอกสาร
                    </q-card>
                  </div>
                  <div class="col-12">
                    <q-input
                      dense
                      outlined
                      label="หมายเหตุ"
                      type="textarea"
                      v-model="remark"
                    ></q-input>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss">
.my-sticky-custom {
  max-height: 60vh;
  .q-table tr:nth-child(odd) td {
    background: white;
  }
  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }
  td:first-child,
  td:nth-child(2) {
    background-color: #fff;
    z-index: 1;
    position: sticky;
  }

  td:first-child {
    left: 0;
  }

  td:nth-child(2) {
    left: 44px;
  }

  tr th {
    position: sticky;
    z-index: 2;
    background: #ecebeb;
  }

  thead tr:last-child th {
    top: 48px;
    z-index: 3;
  }

  thead tr:first-child th {
    top: 0;
    z-index: 1;
  }

  tr:first-child th:first-child {
    z-index: 3;
  }

  tr:first-child th:nth-child(2) {
    z-index: 3;
  }

  th:first-child {
    position: sticky;
    left: 0;
  }

  th:nth-child(2) {
    position: sticky;

    left: 44px; // ต้องเท่ากับหรือตามความกว้างคอลัมน์แรก
  }

  tbody {
    scroll-margin-top: 48px;
  }
}
</style>