clone code

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

@@ -0,0 +1,106 @@
+<template>
+  <div class="flex items-center q-pb-md">
+    <div class="flex items-center" v-if="header != ''">
+      <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
+      <div class="text-weight-medium text-dark col-12 row items-center text-subtitle1">
+        {{ header }}
+      </div>
+    </div>
+    <div v-if="editData == true">
+      <div class="q-gutter-sm q-mx-sm" v-if="addData == true">
+        <q-btn
+          size="15px"
+          flat
+          dense
+          v-if="edit && !editOnly"
+          :color="!edit ? 'grey-7' : 'public'"
+          @click="save"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+      <div class="q-pl-sm" v-else>
+        <q-btn
+          size="12px"
+          flat
+          round
+          v-if="edit && !editOnly"
+          :color="!edit ? 'grey-7' : 'add'"
+          @click="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+    <q-space />
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: true,
+    required: true,
+  },
+  editData: {
+    type: Boolean,
+    defualt: true,
+    required: true,
+  },
+  editOnly: {
+    type: Boolean,
+    defualt: false,
+    required: true,
+  },
+  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"),
+  },
+  editBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+</script>
+<style scoped></style>