From fd8ac720cc42c07e733905a2a887ec390f4c8f29 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Mar 2024 15:46:47 +0700
Subject: [PATCH] delete componets

---
 .../position-employee/05ListLevelDetail.vue   | 516 ------------------
 .../position-employee/DialogAddPosition.vue   | 286 ----------
 2 files changed, 802 deletions(-)
 delete mode 100644 src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
 delete mode 100644 src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue

diff --git a/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue b/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
deleted file mode 100644
index 00a478e6f..000000000
--- a/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
+++ /dev/null
@@ -1,516 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
-import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
-import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
-import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
-
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const store = usePositionEmployeeDataStore();
-const storeName = usePositionTypeDataStore();
-const storeOption = useMainOptionDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-
-const posName = defineModel<string>("posName", {
-  required: true,
-});
-
-const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
-  mixin;
-const $q = useQuasar();
-const columns = [
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px; width:0px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevelName",
-    align: "left",
-    label: "ระดับชั้นงาน",
-    sortable: true,
-    field: "posLevelName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posTypeName",
-    align: "left",
-    label: "กลุ่มงาน",
-    sortable: true,
-    field: "posTypeName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  // {
-  //   name: "posLevelRank",
-  //   align: "left",
-  //   label: "ระดับของระดับตำแหน่ง",
-  //   sortable: true,
-  //   field: "posLevelRank",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  //   sort: (a: string, b: string) =>
-  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  // },
-  {
-    name: "posLevelAuthority",
-    align: "left",
-    label: "ผู้มีอำนาจสั่งบรรจุ",
-    sortable: true,
-    field: "posLevelAuthority",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "createdAt",
-    align: "center",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "lastUpdatedAt",
-    align: "center",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-] as const satisfies QTableProps["columns"];
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const dialogStatus = ref<string>("");
-const editId = ref<string>("");
-const posLevelName = ref<string>("");
-// const posLevelRank = ref<number>();
-const posLevelAuthority = ref<string>("");
-// const posTypeId = ref<null>();
-const posLevelNameRef = ref<QInput | null>(null);
-// const posLevelRankRef = ref<QInput | null>(null);
-const posTypeIdRef = ref<QInput | null>(null);
-// const name = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "no",
-  "posTypeName",
-  "posLevelName",
-  // "posLevelRank",
-  "posLevelAuthority",
-  //   "createdAt",
-  //   "lastUpdatedAt",
-  //   "lastUpdateFullName",
-]);
-
-const rows = ref<any>();
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgEmployeelevel)
-    .then(async (res) => {
-      rows.value = res.data.result;
-      // store.save(res.data.result, id.value);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http.post(config.API.orgEmployeelevel, {
-    posLevelName: posLevelName.value,
-    // posLevelRank: posLevelRank.value,
-    // posLevelAuthority:
-    //   posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-    posTypeId: id.value,
-    posLevelRank: 1,
-  });
-  fetchData();
-}
-
-async function editData(editId: string) {
-  await http.put(config.API.orgEmployeelevelById(editId), {
-    posLevelName: posLevelName.value,
-    // posLevelRank: posLevelRank.value,
-    posLevelAuthority:
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-    posTypeId: id.value,
-  });
-  fetchData();
-}
-
-async function deleteData(id: string) {
-  await http.delete(config.API.orgEmployeelevelById(id));
-  fetchData();
-}
-
-onMounted(async () => {
-  fetchName();
-  storeName.row.forEach((e) => {
-    if (e.id === id.value) {
-      posName.value = e.posTypeName ? e.posTypeName : "";
-    }
-  });
-  fetchData();
-});
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  posLevelNameRef.value?.validate();
-  // posLevelRankRef.value?.validate();
-  posTypeIdRef.value?.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (posLevelName.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
-
-async function fetchName() {
-  // showLoader();
-  // await http
-  //   .get(config.API.orgPosType)
-  //   .then(async (res) => {
-  //     storeName.save(res.data.result);
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-</script>
-
-<template>
-  <div class="q-pa-md">
-    <q-toolbar style="padding: 0">
-      <q-btn
-        flat
-        round
-        color="primary"
-        icon="add"
-        @click.stop="
-          () => {
-            dialogStatus = 'create';
-            dialog = true;
-            posLevelName = '';
-            // posLevelRank = undefined;
-            posLevelAuthority = '';
-          }
-        "
-      >
-        <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="row q-gutter-sm">
-        <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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
-          style="min-width: 150px"
-        />
-      </div>
-    </q-toolbar>
-
-    <d-table
-      ref="table"
-      :columns="columns"
-      :rows="rows"
-      :filter="filterKeyword"
-      row-key="name"
-      flat
-      bordered
-      :paging="true"
-      dense
-      class="custom-header-table"
-      :visible-columns="visibleColumns"
-    >
-      <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-bold">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.id">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="edit"
-              flat
-              dense
-              round
-              class="q-mr-xs"
-              size="12px"
-              icon="edit"
-              clickable
-              @click.stop="
-                () => {
-                  dialogStatus = 'edit';
-                  dialog = true;
-                  editId = props.row.id;
-                  posLevelName = props.row.posLevelName;
-                  // posLevelRank = props.row.posLevelRank;
-                  posLevelAuthority = props.row.posLevelAuthority;
-                }
-              "
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="12px"
-              icon="mdi-delete"
-              clickable
-              @click.stop="
-                dialogRemove($q, async () => await deleteData(props.row.id))
-              "
-              v-close-popup
-            >
-              <q-tooltip>ลบข้อมูล</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-    </d-table>
-
-    <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="width: 350px">
-        <form @submit.prevent="validateForm">
-          <q-card-section class="flex justify-between" style="padding: 0">
-            <dialog-header
-              :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-              :close="closeDialog"
-            />
-          </q-card-section>
-
-          <q-separator color="grey-4" />
-          <q-card-section class="row q-gutter-y-md">
-            <div class="col-12">
-              <q-input
-                outlined
-                ref="posLevelNameRef"
-                v-model="posLevelName"
-                label="ระดับชั้นงาน"
-                dense
-                lazy-rules
-                borderless
-                bg-color="white"
-                hide-bottom-space
-                :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
-              />
-            </div>
-
-            <!-- <div class="col-12">
-              <q-input
-                ref="posLevelRankRef"
-                outlined
-                v-model="posLevelRank"
-                label="ระดับ"
-                dense
-                type="number"
-                lazy-rules
-                borderless
-                min="1"
-                bg-color="white"
-                :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
-                hide-bottom-space
-              />
-            </div> -->
-
-            <div class="col-12">
-              <q-select
-                outlined
-                v-model="posLevelAuthority"
-                emit-value
-                map-options
-                :options="storeOption.posLevelAuthorityOption"
-                option-value="label"
-                label="ผู้มีอำนาจสั่งบรรจุ"
-                dense
-                lazy-rules
-                borderless
-                bg-color="white"
-                hide-bottom-space
-              />
-            </div>
-
-            <div class="col-12">
-              <q-select
-                ref="posTypeIdRef"
-                v-model="posName"
-                label="กลุ่มงาน"
-                outlined
-                dense
-                bg-color="white"
-                options-cover
-                hide-bottom-space
-                readonly
-              />
-            </div>
-          </q-card-section>
-
-          <q-card-actions align="right">
-            <q-btn
-              id="onSubmit"
-              type="submit"
-              dense
-              unelevated
-              label="บันทึก"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-card-actions>
-        </form>
-      </q-card>
-    </q-dialog>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$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;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $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>
diff --git a/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue b/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
deleted file mode 100644
index 25a8f0514..000000000
--- a/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, defineProps } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  DataOption,
-  FormPositionEmployeeSelectDialog,
-  FormPositionEmployeeSelectRef,
-  OptionType,
-  OptionLevel,
-} from "@/modules/01_metadataNew/interface/request/position/index";
-import { useCounterMixin } from "@/stores/mixin";
-const levelOps = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const typeOpsMain = ref<DataOption[]>([]);
-const dataLevel = ref<any>();
-const formPositionSelect = reactive<FormPositionEmployeeSelectDialog>({
-  positionId: "",
-  positionName: "",
-  positionType: "",
-  positionLevel: "",
-});
-const $q = useQuasar();
-const isSpecial = ref<boolean>(false);
-const props = defineProps({
-  getData: Function,
-});
-const { dialogConfirm, showLoader, success, hideLoader, messageError } =
-  useCounterMixin();
-
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const modal = defineModel<boolean>("addPosition", { required: true });
-const formData = defineModel<any>("formData", { required: true });
-const editCheck = defineModel<boolean>("editCheck", { required: true });
-
-const positionNameRef = ref<Object | null>(null);
-const positionTypeRef = ref<Object | null>(null);
-const positionLevelRef = ref<Object | null>(null);
-
-const objectPositionSelectRef: FormPositionEmployeeSelectRef = {
-  positionName: positionNameRef,
-  positionType: positionTypeRef,
-  positionLevel: positionLevelRef,
-};
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateFormPositionEdit() {
-  const hasError = [];
-  for (const key in objectPositionSelectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
-      const property = objectPositionSelectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (editCheck.value == true) {
-      saveSelectEdit();
-    } else {
-      onSubmitSelectEdit();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
-function saveSelectEdit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      // showLoader();
-      // const body = {
-      //   posDictName: formPositionSelect.positionName,
-      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-      // };
-      // await http
-      //   .put(config.API.orgPosPositionById(orgEmployeePosById.positionId), body)
-      //   .then(() => {
-      //     success($q, "เพิ่มข้อมูลสำเร็จ");
-      //     clearFormPositionSelect();
-      //     modal.value = false;
-      //     editCheck.value = false;
-      //     props.getData?.();
-      //   })
-      //   .catch((err) => {
-      //     messageError($q, err);
-      //   })
-      //   .finally(() => {
-      //     hideLoader();
-      //   });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-/** ฟังชั่น บันทึก */
-function onSubmitSelectEdit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      // showLoader();
-      // const body = {
-      //   posDictName: formPositionSelect.positionName,
-      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-      // };
-      // await http
-      //   .post(config.API.orgEmployeePos, body)
-      //   .then(() => {
-      //     success($q, "เพิ่มข้อมูลสำเร็จ");
-      //     clearFormPositionSelect();
-      //     modal.value = false;
-      //     editCheck.value = false;
-      //   })
-      //   .catch((err) => {
-      //     messageError($q, err);
-      //   })
-      //   .finally(() => {
-      //     hideLoader();
-      //   });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-
-async function clearFormPositionSelect() {
-  formPositionSelect.positionId = "";
-  formPositionSelect.positionName = "";
-  formPositionSelect.positionType = "";
-  formPositionSelect.positionLevel = "";
-}
-
-/**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-/** function เรียกรายการประเภทตำแหน่ง */
-async function fetchType() {
-  showLoader();
-  await http
-    .get(config.API.orgPosType)
-    .then((res) => {
-      const data = res.data.result;
-      dataLevel.value = data;
-      typeOpsMain.value = data.map((e: OptionType) => ({
-        id: e.id,
-        name: e.posTypeName,
-      }));
-      typeOps.value = typeOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value == true) {
-      fetchType();
-      if (formData.value) {
-        const dataList = formData.value;
-        setTimeout(() => {
-          updateSelectType(dataList.posTypeId);
-        }, 1000);
-        formPositionSelect.positionId = dataList.positionId;
-        formPositionSelect.positionName = dataList.positionName;
-        formPositionSelect.positionType = dataList.positionType;
-        formPositionSelect.positionLevel = dataList.positionLevel;
-      }
-    }
-  }
-);
-
-function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-    id: e.id,
-    name: e.posLevelName,
-  }));
-  levelOps.value = levelOpsMain.value;
-}
-
-function close() {
-  modal.value = false;
-  editCheck.value = false;
-}
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 50vw">
-      <form @submit.prevent="validateFormPositionEdit">
-        <DialogHeader
-          :tittle="`${
-            editCheck
-              ? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
-              : 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
-          }`"
-          :close="close"
-        />
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm col-12">
-            <div class="col-12">
-              <q-input
-                ref="positionNameRef"
-                v-model="formPositionSelect.positionName"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionName"
-                label="ชื่อตำแหน่ง"
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
-              />
-            </div>
-
-            <div class="col-6">
-              <q-select
-                ref="positionTypeRef"
-                :class="inputEdit(isReadonly)"
-                label="กลุ่มงาน"
-                v-model="formPositionSelect.positionType"
-                :options="typeOps"
-                emit-value
-                dense
-                @update:model-value="updateSelectType"
-                map-options
-                outlined
-                option-label="name"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
-              />
-            </div>
-
-            <div class="col-6">
-              <q-select
-                ref="positionLevelRef"
-                :class="inputEdit(isReadonly)"
-                label="ระดับชั้นงาน"
-                v-model="formPositionSelect.positionLevel"
-                :disable="formPositionSelect.positionType === ''"
-                :options="levelOps"
-                emit-value
-                dense
-                map-options
-                outlined
-                option-label="name"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn type="submit" :label="`บันทึก`" color="public" />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>