รายการประเภทตำแหน่ง: ปรับสไตล์/validate/ใส่catch

src/modules/01_metadataNew/components/position/05ListLevelDetail.vue

@@ -13,16 +13,23 @@ import config from "@/app.config";
 const store = usePositionDataStore();
 const storeOption = useMainOptionDataStore();
 const storeName = usePositionTypeDataStore();
-const router = useRouter();
+
 const mixin = useCounterMixin();
 
 const posName = defineModel<string>("posName", {
   required: true,
 });
 
-const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
-  mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = mixin;
 const $q = useQuasar();
+
 const columns = [
   {
     name: "no",
@@ -123,20 +130,15 @@ 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",
 ]);
 
 async function fetchData() {
@@ -165,9 +167,13 @@ async function addData() {
     })
     .then(() => {
       fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -182,9 +188,13 @@ async function editData(editId: string) {
     })
     .then(() => {
       fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -196,19 +206,12 @@ async function deleteData(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
-onMounted(async () => {
-  fetchName();
-  storeName.row.forEach((e) => {
-    if (e.id === id.value) {
-      posName.value = e.posTypeName ? e.posTypeName : "";
-    }
-  });
-  fetchData();
-});
-
 function closeDialog() {
   dialog.value = false;
 }
@@ -240,6 +243,11 @@ async function fetchName() {
     .get(config.API.orgPosType)
     .then(async (res) => {
       storeName.save(res.data.result);
+      storeName.row.forEach((e) => {
+        if (e.id === id.value) {
+          posName.value = e.posTypeName ? e.posTypeName : "";
+        }
+      });
     })
     .catch((err) => {
       messageError($q, err);
@@ -248,6 +256,11 @@ async function fetchName() {
       hideLoader();
     });
 }
+
+onMounted(async () => {
+  fetchName();
+  fetchData();
+});
 </script>
 
 <template>
@@ -398,13 +411,13 @@ async function fetchName() {
                 v-model="posLevelRank"
                 label="ระดับ"
                 dense
-                type="number"
                 lazy-rules
                 borderless
                 min="1"
                 bg-color="white"
-                :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+                :rules="[(val) => val != null || 'กรุณากรอกระดับ']"
                 hide-bottom-space
+                mask="############"
               />
             </div>