re-structure folder & route ในส่วนของบรรจุ

src/modules/05_placement/components/PersonalDetail/Information/top.vue

@@ -0,0 +1,120 @@
+<!-- ส่วนหัวของ ข้อมูลส่วนตัว และ ที่อยู่ -->
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+</script>
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" v-if="icon != ''" />
+      <div class="text-bold text-subtitle2 col-12 row items-center" v-if="header != ''">
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn size="12px" v-if="!edit" flat round :disabled="disable" :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit" icon="mdi-pencil-outline">
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round v-if="edit" :color="!edit ? 'grey-7' : 'public'" @click="save"
+        icon="mdi-content-save-outline">
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round v-if="edit" :color="!edit ? 'grey-7' : 'red'" @click="ClickCancel" icon="mdi-undo">
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else>
+      <q-btn size="12px" flat round :disabled="disable" color="add" @click="add" icon="mdi-plus">
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+    <q-btn color="info" flat dense round size="14px" icon="mdi-history" v-if="history" @click="historyClick">
+      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+
+<style scoped></style>