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

<template>
  <div class="q-px-md q-pb-md">
    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
      <q-space />
      <div class="items-center" style="display: flex">
        <div
          class="row items-center"
          style="display: flex"
          v-if="publicData == false && publicNoBtn == false"
        ></div>

        <q-input
          standout
          dense
          :model-value="inputfilter"
          ref="filterRef"
          @update:model-value="updateInput"
          outlined
          debounce="300"
          placeholder="ค้นหา"
          style="max-width: 200px"
          class="q-ml-sm"
        >
          <template v-slot:append>
            <q-icon v-if="inputfilter == ''" name="search" />
            <q-icon
              v-if="inputfilter !== ''"
              name="clear"
              class="cursor-pointer"
              @click="resetFilter"
            />
          </template>
        </q-input>
        <!-- แสดง table ใน คอลัมน์ -->
        <q-select
          :model-value="inputvisible"
          @update:model-value="updateVisible"
          :display-value="$q.lang.table.columns"
          multiple
          outlined
          dense
          :options="attrs.columns"
          options-dense
          option-value="name"
          map-options
          emit-value
          style="min-width: 150px"
          class="gt-xs q-ml-sm"
        />
      </div>
    </div>

    <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
      <span class="text-subtitle1">{{ titleText }}</span>
      <q-btn
        flat
        round
        color="primary"
        @click="refresh"
        icon="mdi-refresh"
        v-if="props.refreshBtn"
      >
        <q-tooltip>อัปเดตข้อมูล</q-tooltip>
      </q-btn>
      <q-space />
      <div class="items-center" style="display: flex">
        <!-- ค้นหาข้อความใน table -->
        <q-input
          standout
          dense
          :model-value="inputfilter"
          ref="filterRef"
          @update:model-value="updateInput"
          outlined
          debounce="300"
          placeholder="ค้นหา"
          style="max-width: 200px"
          class="q-ml-sm"
        >
          <template v-slot:append>
            <q-icon v-if="inputfilter == ''" name="search" />
            <q-icon
              v-if="inputfilter !== ''"
              name="clear"
              class="cursor-pointer"
              @click="resetFilter"
            />
          </template>
        </q-input>
        <!-- แสดงคอลัมน์ใน table -->
        <q-select
          :model-value="inputvisible"
          @update:model-value="updateVisible"
          :display-value="$q.lang.table.columns"
          multiple
          outlined
          dense
          :options="attrs.columns"
          options-dense
          option-value="name"
          map-options
          emit-value
          style="min-width: 150px"
          class="gt-xs q-ml-sm"
        />
      </div>
    </div>
    <q-table
      ref="table"
      flat
      bordered
      class="custom-header-table"
      v-bind="attrs"
      virtual-scroll
      :virtual-scroll-sticky-size-start="48"
      dense
      :pagination-label="paginationLabel"
      v-model:pagination="pagination"
    >
      <template v-slot:pagination="scope">
        <q-pagination
          v-model="pagination.page"
          color="primary"
          :max="scope.pagesNumber"
          :max-pages="5"
          size="sm"
          boundary-links
          direction-links
        ></q-pagination>
      </template>
      <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-th auto-width v-if="history == true" />
        </q-tr>
      </template>
      <template #body="props">
        <slot v-bind="props" name="columns"></slot>
      </template>
    </q-table>
  </div>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage } = mixin;
const editvisible = ref<boolean>(false);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const table = ref<any>(null);
const filterRef = ref<any>(null);
const modalPublish = ref<boolean>(false);
const modalDelete = ref<boolean>(false);
const props = defineProps({
  inputfilter: String,
  inputvisible: Array,
  inputvisibleFilter: String,
  editvisible: Boolean,
  titleText: String,
  optionsFilter: {
    type: Array,
    defualt: [],
  },
  boss: {
    type: Boolean,
    defualt: false,
  },
  saveNoDraft: {
    type: Boolean,
    defualt: false,
  },
  history: {
    type: Boolean,
    defualt: false,
  },
  paging: {
    type: Boolean,
    defualt: false,
  },
  nornmalData: {
    type: Boolean,
    defualt: false,
  },
  nextPageVisible: {
    type: Boolean,
    defualt: false,
  },
  publicData: {
    type: Boolean,
    defualt: true,
    required: false,
  },
  updateData: {
    type: Boolean,
    defualt: true,
    required: false,
  },
  publicNoBtn: {
    type: Boolean,
    defualt: false,
  },
  refreshBtn: {
    type: Boolean,
    defualt: false,
  },
  add: {
    type: Function,
    default: () => console.log("not function"),
  },
  edit: {
    type: Function,
    default: () => console.log("not function"),
  },
  save: {
    type: Function,
    default: () => console.log("not function"),
  },
  deleted: {
    type: Function,
    default: () => console.log("not function"),
  },
  cancel: {
    type: Function,
    default: () => console.log("not function"),
  },
  publish: {
    type: Function,
    default: () => console.log("not function"),
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
  refresh: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const pagination = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});
const paginationLabel = (start: string, end: string, total: string) => {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
};
const refresh = () => props.refresh();
const initialPagination = ref<any>({
  //   descending: false,
  rowsPerPage: props.paging == true ? 25 : 0,
});

const emit = defineEmits([
  "update:inputfilter",
  "update:inputvisible",
  "update:editvisible",
  "update:titleText",
  "update:inputvisibleFilter",
]);

const updateEdit = (value: any) => {
  emit("update:editvisible", value);
};
const updateInput = (value: any) => {
  emit("update:inputfilter", value);
};
const updateVisible = (value: any) => {
  emit("update:inputvisible", value);
};
const updateVisibleFilter = (value: any) => {
  emit("update:inputvisibleFilter", value);
};

const checkSave = () => {
  props.validate();
  props.save();
  //   if (myForm.value !== null) {
  //     myForm.value.validate().then((success) => {
  //       if (success) {
  //       }
  //     });
  //   }
};
const clickEdit = () => {
  updateEdit(!props.editvisible);
  editvisible.value = !editvisible.value;
  props.edit();
};
const clickCancel = () => {
  updateEdit(!props.editvisible);
  editvisible.value = !editvisible.value;
  props.cancel();
};
const publishModal = () => {
  props.validate();
  const filter = attrs.value.rows.filter((r: any) => r.name == "");

  if (filter.length == 0 || attrs.value.rows.length == 0) {
    // modalPublish.value = true;
    dialogMessage(
      $q,
      "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
      "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
      "public",
      "เผยแพร่",
      "public",
      props.publish,
      undefined
    );
  }
};

const DeleteModal = () => {
  //   modalDelete.value = true;
  dialogMessage(
    $q,
    "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
    "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
    "mdi-file-remove-outline",
    "ลบบันทึก",
    "red",
    props.deleted,
    undefined
  );
};

const edit = async () => {
  updateEdit(!props.editvisible);
  props.edit();
};

const add = async () => {
  //   if (myForm.value !== null) {
  //     myForm.value.validate();
  //   }
  props.validate();
  props.add();
  await table.value.lastPage();
  await table.value.scrollTo(attrs.value.rows.length - 1);
};

const deleted = async () => {
  // const deletedF = () => {
  if (props.publicNoBtn === false) {
    updateEdit(false);
  }
  props.deleted();
};

const resetFilter = () => {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  emit("update:inputfilter", "");
  filterRef.value.focus();
};
</script>
<style lang="scss">
.icon-color {
  color: #4154b3;
}

.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>