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

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useQuasar } 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,
} 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 isActive = ref<string>(""); // สถานะของรายการคำสั่ง
// options สถานะการใช้งาน
const activeOptions = ref<ActiveOptions[]>([
  {
    value: true,
    label: "Active",
  },
  {
    value: false,
    label: "InActive",
  },
]);

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

/**
 * ฟังก์ชั่นค้นหาคำสั่ง ตามสถานะ
 * @param val สถานะ true/false
 */
function searchByStatus(val: string) {
  console.log(val);
}

/** เปิด 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: ListTemplateSalary) {
  dataForm.id = data.id;
}

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

    {
      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,
    },
  ];
  // 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(() => {
  fetchOrderType();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    Template สำหรับลงในตำแหน่ง/เงินเดือน
  </div>
  <div class="row q-col-gutter-sm">
    <div class="col-12"></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>