Refactoring code module 03_recruiting

src/modules/03_recruiting/components/Table1.vue

@@ -1,3 +1,91 @@
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const editBtn = ref<boolean>(false);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  inputfilter: String,
+  name: String,
+  icon: String,
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  inputvisible: Array,
+  editvisible: Boolean,
+  headerShow: {
+    type: Boolean,
+    default: true,
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  iconLeft: {
+    type: Boolean,
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+function paginationLabel(start: string, end: string, total: string) {
+  return start + "-" + end + " ใน " + total;
+}
+
+function checkAddLeave() {
+  props.addleave();
+}
+
+function checkAdd() {
+  props.add();
+}
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
 <template>
   <div class="q-pb-sm row">
     <HeaderTop
@@ -84,106 +172,7 @@
     </template>
   </q-table>
 </template>
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
-import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 
-const attrs = ref<any>(useAttrs());
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const editBtn = ref<boolean>(false);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-
-const props = defineProps({
-  inputfilter: String,
-  name: String,
-  icon: String,
-  iconAdd: {
-    type: String,
-    default: null,
-  },
-  inputvisible: Array,
-  editvisible: Boolean,
-  headerShow: {
-    type: Boolean,
-    default: true,
-  },
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  iconLeft: {
-    type: Boolean,
-  },
-  edit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  addleave: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-
-const updateEdit = (value: Boolean) => {
-  emit("update:editvisible", value);
-};
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
-
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
-
-const checkAddLeave = () => {
-  props.addleave();
-};
-
-const checkAdd = () => {
-  props.add();
-};
-
-const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
-
-const cancel = async () => {
-  updateEdit(!props.editvisible);
-  props.cancel();
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
-</script>
 <style lang="scss">
 .icon-color {
   color: #4154b3;