ข้อมูลหลัก => fix bug

2024-06-05 10:12:31 +07:00 · 2024-06-05 10:12:31 +07:00 · 0d04f6a3b5
commit 0d04f6a3b5
parent 0531cf2bb3
13 changed files with 336 additions and 320 deletions
--- a/src/modules/01_metadata/components/position/01ListPosition.vue
+++ b/src/modules/01_metadata/components/position/01ListPosition.vue
@ -1,53 +1,27 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
 import type {
  DataOption,
  FormPositionSelect,
-  ListMenu,
  RowDetailPositions,
 } from "@/modules/01_metadata/interface/request/position/index";
-import type { QTableProps } from "quasar";
+
 import DialogAddPosition from "@/modules/01_metadata/components/position/DialogAddPosition.vue";

-const editPosition = ref<boolean>(false);
-const modalAddPosition = ref<boolean>(false);
-const levelOpsMain = ref<DataOption[]>([]);
-const dataLevel = ref<any>();
-const levelOps = ref<DataOption[]>([]);
+import { useCounterMixin } from "@/stores/mixin";

-const isSpecial = ref<boolean>(false);
-const formPositionSelect = reactive<FormPositionSelect>({
-  positionId: "",
-  posTypeId: "",
-  positionName: "",
-  positionField: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveField: "",
-  positionArea: "",
-  isSpecial: false,
-});
+const $q = useQuasar();
+const rowsPositionSelect = ref<RowDetailPositions[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;

+/** Table*/
 const rows = ref<RowDetailPositions[]>([]);
-const listMenu = ref<ListMenu[]>([
-  {
-    label: "คัดลอก",
-    icon: "mdi-content-copy",
-    type: "copy",
-    color: "blue-6",
-  },
-  {
-    label: "ลบ",
-    icon: "delete",
-    type: "remove",
-    color: "red",
-  },
-]);
 const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
@ -133,17 +107,22 @@ const visibleColumns = ref<string[]>([
  "positionArea",
 ]);

-const $q = useQuasar();
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = mixin;
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  posTypeId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+  isSpecial: false,
+});
+const editPosition = ref<boolean>(false);
+const copyPosition = ref<boolean>(false);
+
+const modalAddPosition = ref<boolean>(false);

 /** input ค้นหา */
 const searchRef = ref<any>(null);
@ -175,13 +154,13 @@ function copyDetiail(data: RowDetailPositions) {
  formPositionSelect.positionExecutiveField = data.positionExecutiveField;
  formPositionSelect.positionArea = data.positionArea;
  modalAddPosition.value = true;
+  copyPosition.value = true;
 }
 /**
 * แก้ไขข้อมูล
 * @param data ข้อมูลตำแหน่ง
 */
 function editDetiail(data: RowDetailPositions) {
-  console.log(data);
  formPositionSelect.positionId = data.id;
  formPositionSelect.posTypeId = data.posTypeId;
  formPositionSelect.positionName = data.positionName;
@ -438,10 +417,14 @@ onMounted(() => {
      </template>
    </d-table>
  </div>
+
+  copyPosition
  <DialogAddPosition
    v-model:add-position="modalAddPosition"
    v-model:form-data="formPositionSelect"
    v-model:edit-check="editPosition"
+    v-model:copy-check="copyPosition"
+
    :get-data="searchInput"
  />
 </template>
--- a/src/modules/01_metadata/components/position/02ListType.vue
+++ b/src/modules/01_metadata/components/position/02ListType.vue
@ -162,6 +162,8 @@ onMounted(async () => {

 function closeDialog() {
  dialog.value = false;
+  posTypeName.value = "";
+  posTypeRank.value = null;
 }

 function onclickDetail(id: string) {
@ -322,6 +324,7 @@ async function onSubmit() {
              borderless
              :rules="[(val) => val.length > 0 || 'กรุณากรอกประเภทตำแหน่ง']"
              hide-bottom-space
+              class="inputgreen"
            />
          </div>
          <div class="col-12 q-ma-md">
@ -337,6 +340,8 @@ async function onSubmit() {
              :rules="[(val) => val != undefined || 'กรุณากรอกระดับตำแหน่ง']"
              hide-bottom-space
              mask="############"
+              class="inputgreen"
+
            />
          </div>
        </q-card-section>
--- a/src/modules/01_metadata/components/position/05ListLevelDetail.vue
+++ b/src/modules/01_metadata/components/position/05ListLevelDetail.vue
@ -375,101 +375,109 @@ onMounted(async () => {
      </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
-                lazy-rules
-                borderless
-                min="1"
-                bg-color="white"
-                :rules="[(val) => val > 0 || 'กรุณากรอกระดับ']"
-                hide-bottom-space
-                mask="############"
-              />
-            </div>
-
-            <div class="col-12">
-              <q-select
-                ref="posLevelAuthorityRef"
-                outlined
-                v-model="posLevelAuthority"
-                emit-value
-                map-options
-                :options="storeOption.posLevelAuthorityOption"
-                option-value="id"
-                label="ผู้มีอำนาจสั่งบรรจุ"
-                dense
-                lazy-rules
-                :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
-                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>
+  <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 || 'กรุณากรอกระดับตำแหน่ง']"
+              class="inputgreen"
+
+            />
+          </div>
+
+          <div class="col-12">
+            <q-input
+              ref="posLevelRankRef"
+              outlined
+              v-model="posLevelRank"
+              label="ระดับ"
+              dense
+              lazy-rules
+              borderless
+              min="1"
+              bg-color="white"
+              :rules="[(val) => val > 0 || 'กรุณากรอกระดับ']"
+              hide-bottom-space
+              mask="############"
+              class="inputgreen"
+
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posLevelAuthorityRef"
+              outlined
+              v-model="posLevelAuthority"
+              emit-value
+              map-options
+              :options="storeOption.posLevelAuthorityOption"
+              option-value="id"
+              label="ผู้มีอำนาจสั่งบรรจุ"
+              dense
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              class="inputgreen"
+
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posTypeIdRef"
+              v-model="posName"
+              label="ประเภทตำแหน่ง"
+              outlined
+              dense
+              bg-color="white"
+              options-cover
+              hide-bottom-space
+              readonly
+              class="inputgreen"
+
+            />
+          </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>
 </template>

 <style scoped lang="scss">
--- a/src/modules/01_metadata/components/position/DialogAddPosition.vue
+++ b/src/modules/01_metadata/components/position/DialogAddPosition.vue
@ -3,17 +3,19 @@ import { ref, reactive, watch, defineProps } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { QTableProps } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
+
 import type {
  DataOption,
  FormPositionSelectDialog,
-  FormPositionSelectRef,
  OptionType,
  OptionLevel,
  OptionExecutive,
 } from "@/modules/01_metadata/interface/request/position/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 import { useCounterMixin } from "@/stores/mixin";
+
 const executiveOpsMain = ref<DataOption[]>([]);
 const levelOps = ref<DataOption[]>([]);
 const levelOpsMain = ref<DataOption[]>([]);
@ -43,50 +45,31 @@ 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 positionFieldRef = ref<Object | null>(null);
-const positionTypeRef = ref<Object | null>(null);
-const positionLevelRef = ref<Object | null>(null);
-const positionExecutiveRef = ref<Object | null>(null);
-const positionExecutiveFieldRef = ref<Object | null>(null);
-const positionAreaRef = ref<Object | null>(null);
-
-const objectPositionSelectRef: FormPositionSelectRef = {
-  positionName: positionNameRef,
-  positionField: positionFieldRef,
-  positionType: positionTypeRef,
-  positionLevel: positionLevelRef,
-  positionExecutive: positionExecutiveRef,
-  positionExecutiveField: positionExecutiveFieldRef,
-  positionArea: positionAreaRef,
-};
+const copyCheck = defineModel<boolean>("copyCheck", { required: true });

 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 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();
-    }
+  // 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() {
-  console.log(formPositionSelect.positionExecutive);
-  console.log(formPositionSelect.positionArea);
  dialogConfirm(
    $q,
    async () => {
@ -197,7 +180,9 @@ async function fetchType() {
      messageError($q, err);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
    });
 }

@ -217,7 +202,9 @@ async function fetchExecutive() {
      messageError($q, err);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
    });
 }

@ -227,7 +214,7 @@ watch(
    if (modal.value == true) {
      fetchType();
      fetchExecutive();
-      if (formData.value) {
+      if (editCheck.value || copyCheck.value) {
        const dataList = formData.value;
        setTimeout(() => {
          updateSelectType(dataList.posTypeId);
@ -259,13 +246,15 @@ function updateSelectType(val: string) {
 function close() {
  modal.value = false;
  editCheck.value = false;
+  copyCheck.value = false;
+  clearFormPositionSelect();
 }
 </script>

 <template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 50vw">
-      <form @submit.prevent="validateFormPositionEdit">
+      <q-form greedy @submit.prevent="validateFormPositionEdit">
        <DialogHeader
          :tittle="`${editCheck ? 'แก้ไขข้อมูลตำแหน่ง' : 'เพิ่มข้อมูลตำแหน่ง'}`"
          :close="close"
@ -398,7 +387,7 @@ function close() {
        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn type="submit" :label="`บันทึก`" color="public" />
        </q-card-actions>
-      </form>
+      </q-form>
    </q-card>
  </q-dialog>
 </template>