hrms-mgt/src/modules/11_discipline/components/1_Complaint/Popup.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";

const $q = useQuasar();

import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
const complainstStore = useComplainstDataStore();

const mixin = useCounterMixin();
const { dialogConfirm, success } = mixin;

const props = defineProps({
  modal: {
    type: Boolean,
    require: true,
  },
  close: {
    type: Function,
    require: true,
  },
});

/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "idcard",
    align: "left",
    label: "เลขบัตรประชาชน",
    sortable: true,
    field: "idcard",
    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",
  },
  {
    name: "positionNo",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: true,
    field: "positionNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionLevel",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "positionLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "salary",
    align: "left",
    label: "เงินเดือน",
    sortable: true,
    field: "salary",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "organization",
    align: "left",
    label: "หน่วยงาน",
    sortable: true,
    field: "organization",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
/** หัวข้อที่เเสดงในตาราง */
const visibleColumns = ref<string[]>([
  "no",
  "idcard",
  "name",
  "positionNo",
  "position",
  "positionLevel",
  "salary",
  "organization",
]);

const selected = ref<any>([]);
const inspectionResults = ref<string>("");
const inputRef = ref<any>(null);

function onclickSend() {
  inputRef.value.validate();
  if (!inputRef.value.hasError) {
    dialogConfirm(
      $q,
      async () => {
        success($q, "ส่งข้อมูลไปสืบสวนสำเร็จ");
        console.log(selected.value);

        props.close?.();
      },
      "ยืนยันการส่งไปสืบสวน",
      "ต้องการยืนยันการส่งไปสืบสวนหรือไม่"
    );
  }
}

function onClickClose() {
  props.close?.();
}

watch([() => props.modal], () => {
  inspectionResults.value = props.modal ? "" : "";
  selected.value.push(complainstStore.rowsAdd);
});
</script>
<template>
  <q-dialog v-model="props.modal">
    <q-card style="width: 700px; max-width: 80vw">
      <q-toolbar class="q-py-md">
        <q-toolbar-title class="header-text">มีมูลส่งไปสืบสวน </q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="onClickClose"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
      <q-separator />

      <q-card-section class="q-pt-none q-mt-md">
        <d-table
          ref="table"
          :columns="columns"
          :rows="complainstStore.rowsAdd"
          row-key="id"
          flat
          bordered
          :paging="true"
          dense
          class="custom-header-table"
          :visible-columns="visibleColumns"
          selection="multiple"
          v-model:selected="selected"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width>
                <q-checkbox
                  keep-color
                  color="primary"
                  dense
                  v-model="props.selected"
                />
              </q-th>
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                style="color: #000000; font-weight: 500"
              >
                <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>
                  {{ col.value }}
                </div>
              </q-td>
            </q-tr>
          </template>
        </d-table>
        <div class="col-xs-12 col-sm-12 q-mt-sm">
          <q-input
            for="inputInspectionResults"
            ref="inputRef"
            dense
            outlined
            hide-bottom-space
            v-model="inspectionResults"
            :rules="[(val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน']"
            lazy-rules
            label="ผลการตรวจสอบเรื่องร้องเรียน"
            type="textarea"
            rows="5"
          />
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn label="มีมูลส่งไปสืบสวน" color="public" @click="onclickSend" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>