hrms-admin/src/modules/05_command/views/salaryLists.vue

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

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

import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/modules/05_command/stores/main";

import type {
  ActiveOptions,
  ListTemplateSalary,
  DateOption,
} from "@/modules/05_command/interface/index/Main";

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

const $q = useQuasar();
const mixin = useCounterMixin();
const store = useDataStore();
const {
  dialogConfirm,
  success,
  showLoader,
  hideLoader,
  dialogRemove,
  messageError,
} = mixin;

const filter = ref<string>(""); // ตัวแปร ฟิลเตอร์
const listOrder = ref<DateOption[]>([]);
const activeOrderId = ref<string>(""); // ตัวแปรเก็บ id เพื่อเอาไป = class

const dataForm = reactive<ListTemplateSalary>({
  id: null,
  name: "",
  status: false,
});
const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
const dialogForm = ref<boolean>(false); // model คำสั่ง

const rows = ref<ListTemplateSalary[]>([]);
const visibleColumns = ref<String[]>(["no", "name", "status"]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    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: "status",
    align: "center",
    label: "สถานะการใช้งาน",
    sortable: false,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/** เปิด dialog */
function onDialogAdd() {
  isEdit.value = false;
  dialogForm.value = true;
}
/**
 * เปิด dialog Edit
 * @param data ข้อมูลคำสั่ง
 */
function onDialogEdit(data: ListTemplateSalary) {
  dataForm.id = data.id;
  dataForm.name = data.name;
  dataForm.status = data.status;

  isEdit.value = true;
  dialogForm.value = true;
}

/**
 * ลบ คำสั่ง
 * @param id id คำสั่ง
 */
function onDelete(id: string) {
  dialogRemove($q, () => {
    // http
    //   .delete(config.API.)
    //   .then((res) => {})
    //   .catch((e) => {
    //     messageError($q, e);
    //   })
    //   .finally(() => {});
  });
}

/** ปิด dialog */
function closeDialog() {
  dataForm.id = null;
  dataForm.name = "";
  dataForm.status = false;

  isEdit.value = false;
  dialogForm.value = false;
}

/** บันทึกข้อมูล dialog */
function onSubmit() {
  dialogConfirm($q, () => {});
}

/** เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */
function selectInbox(data: DateOption) {
  activeOrderId.value = data.id;

  fetchSalaryList();
}

/**
 * ฟังก์ชั่นดึงรายการประเภทคำสั่ง
 */
async function fetchSalaryList() {
  showLoader();
  setTimeout(() => {
    rows.value = [
      {
        id: 1,
        name: "เลื่อนเงินเดือน",
        status: true,
      },
      {
        id: 2,
        name: "เลื่อนเงินเดือน (ดีเด่น)",
        status: false,
      },
      {
        id: 3,
        name: "เลื่อนเงินเดือน (เพิ่มเติม)",
        status: false,
      },

      {
        id: 4,
        name: "ปรับเงินเดือน",
        status: true,
      },

      {
        id: 5,
        name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
        status: true,
      },
      {
        id: 6,
        name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
        status: true,
      },
      {
        id: 7,
        name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
        status: true,
      },
      {
        id: 8,
        name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
        status: true,
      },
      {
        id: 9,
        name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
        status: true,
      },
      {
        id: 10,
        name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
        status: true,
      },
      {
        id: 11,
        name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
        status: true,
      },
    ];
    hideLoader();
  }, 1000);
  // showLoader();
  // await http
  //   .get(config.API.commandType)
  //   .then(async (res) => {
  //     lists.value = res.data.result.map((item: any) => {
  //       return {
  //         id: item.id,
  //         name: item.name,
  //         status: true,
  //       };
  //     });
  //   })
  //   .catch((err) => {
  //     messageError($q, err);
  //   })
  //   .finally(() => {
  //     hideLoader();
  //   });
}

/** เริ่มเมื่อโหลดหน้านี้*/
onMounted(() => {
  const data = [
    { id: "1", name: "บรรจุ แต่งตั้ง" },
    { id: "2", name: "เงินเดือน" },
    { id: "3", name: "ลงโทษวินัย" },
  ];
  listOrder.value = data;
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    Template สำหรับลงในตำแหน่ง/เงินเดือน
  </div>
  <div class="row q-col-gutter-sm">
    <div class="col-3">
      <q-card bordered style="height: 100%">
        <div class="text-body1 q-pa-sm text-weight-medium">หมวดหมู่คำสั่ง</div>
        <q-separator />
        <q-card-section class="q-pa-sm">
          <q-scroll-area style="height: 70vh" class="scrollStyle">
            <q-list
              v-for="(item, index) in listOrder"
              :key="item.id"
              class="q-pr-sm"
            >
              <q-item
                clickable
                v-ripple
                :active="activeOrderId === item.id"
                active-class="my-menu_link"
                @click="selectInbox(item)"
              >
                <q-item-section>
                  <q-item-label>
                    {{ item.name }}
                  </q-item-label>
                </q-item-section>
              </q-item>
              <q-separator v-if="listOrder.length !== index + 1" />
            </q-list>
          </q-scroll-area>
        </q-card-section>
      </q-card>
    </div>
    <div class="col-9">
      <q-card bordered style="height: 100%">
        <div v-if="activeOrderId !== ''">
          <div class="row q-pa-sm q-col-gutter-sm">
            <div class="col-12">
              <div class="row q-gutter-sm">
                <q-btn
                  flat
                  dense
                  round
                  icon="add"
                  color="add"
                  @click="onDialogAdd"
                  ><q-tooltip>เพิ่มข้อมูล</q-tooltip>
                </q-btn>
                <q-space />
                <q-input
                  borderless
                  dense
                  debounce="300"
                  outlined
                  v-model="filter"
                  placeholder="ค้นหา"
                >
                  <template v-slot:append>
                    <q-icon name="search" v-if="filter == ''" />
                    <q-icon
                      name="clear"
                      v-else
                      class="cursor-pointer"
                      @click="filter = ''"
                    />
                  </template>
                </q-input>
                <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"
                  options-cover
                />
              </div>
            </div>
            <div class="col-12">
              <d-table
                ref="table"
                :columns="columns"
                :rows="rows"
                :filter="filter"
                row-key="id"
                flat
                bordered
                :paging="true"
                dense
                :visible-columns="visibleColumns"
              >
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th auto-width></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 auto-width>
                      <q-btn
                        flat
                        dense
                        round
                        icon="edit"
                        color="edit"
                        @click="onDialogEdit(props.row)"
                        ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
                      </q-btn>
                      <q-btn
                        flat
                        dense
                        round
                        icon="mdi-delete"
                        color="red"
                        @click="onDelete(props.row.id)"
                        ><q-tooltip>ลบข้อมูล</q-tooltip>
                      </q-btn>
                    </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 == 'status'">
                        <q-icon
                          :color="props.row.status ? 'green' : 'orange'"
                          :name="
                            props.row.status
                              ? 'mdi-check-circle'
                              : 'mdi-minus-circle'
                          "
                        />
                      </div>
                      <div v-else>
                        {{ col.value }}
                      </div>
                    </q-td>
                  </q-tr>
                </template>
              </d-table>
            </div>
          </div>
        </div>
        <div v-else style="height: auto; max-width: 100%; max-height: 90vh">
          <div
            class="absolute-center text-center text-grey-9"
            style="width: 100%"
          >
            <div class="column items-center">
              <q-icon
                name="mdi-hand-pointing-left"
                size="lg"
                color="primary"
              ></q-icon>
              <span>กรุณาเลือกรายการคำสั่ง</span>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>

  <q-dialog v-model="dialogForm" persistent>
    <q-card class="col-12" style="min-width: 30%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <Header
          :tittle="isEdit ? 'แก้ไขคำสั่ง' : 'เพิ่มคำสั่ง'"
          :close="closeDialog"
        />
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-input
                outlined
                dense
                v-model="dataForm.name"
                label="ชื่อคำสั่ง"
                class="inputgreen"
                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อคำสั่ง'}`,]"
                hide-bottom-space
              ></q-input>
            </div>
            <div class="col-12">
              <div class="row items-center justify-between border_custom">
                <p class="q-ma-none">สถานะการใช้งาน</p>
                <label :class="`toggle-control`">
                  <input type="checkbox" v-model="dataForm.status" />
                  <span class="control"></span>
                </label>
              </div>
            </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 scoped lang="scss">
:deep(.scrollStyle .q-scrollarea__bar) {
  background-color: #909090;
  border-radius: 10px;
  width: 5px;
  opacity: 0.1;
  right: 0px;
}
:deep(.scrollStyle .q-scrollarea__thumb) {
  background-color: #909090;
  border-radius: 10px;
  width: 5px;
  opacity: 0.5;
  right: 0px;
}
.my-menu_link {
  background: #ebf9f7 !important;
  border-radius: 5px;
  color: #1bb19ab8 !important;
}

.my-menu-link .q-hoverable {
  border-radius: 5px;
}

.my-link {
  font-size: 0.75rem;
  padding: 2px;
  min-height: 10px !important;
}

.my-link:hover {
  border-radius: 5px;
}

.border_custom {
  border-radius: 5px !important;
  border: 1px solid #c8d3db;
  height: 40px;
  padding: 0 12px;
}
$toggle-background-color-on: #06884d;
$toggle-background-color-off: darkgray;
$toggle-control-color: white;
$toggle-width: 40px;
$toggle-height: 25px;
$toggle-gutter: 3px;
$toggle-radius: 50%;
$toggle-control-speed: 0.15s;
$toggle-control-ease: ease-in;
$toggle-radius: calc($toggle-height / 2);
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);

.toggle-control {
  display: block;
  position: relative;
  padding-left: $toggle-width;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  input:checked ~ .control {
    background-color: $toggle-background-color-on;

    &:after {
      left: $toggle-width - $toggle-control-size - $toggle-gutter;
    }
  }

  .control {
    position: absolute;
    top: -7px;
    left: -15px;
    height: $toggle-height;
    width: $toggle-width;
    border-radius: $toggle-radius;
    background-color: $toggle-background-color-off;
    transition: background-color $toggle-control-speed $toggle-control-ease;

    &:after {
      content: "";
      position: absolute;
      left: $toggle-gutter;
      top: $toggle-gutter;
      width: $toggle-control-size;
      height: $toggle-control-size;
      border-radius: $toggle-radius;
      background: $toggle-control-color;
      transition: left $toggle-control-speed $toggle-control-ease;
    }
  }
}
</style>