hrms-mgt/src/modules/05_placement/components/PersonalDetail/Information/top.vue

<!-- ส่วนหัวของ ข้อมูลส่วนตัว และ ที่อยู่ -->
<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' : 'red'"
        @click="ClickCancel"
        icon="mdi-undo"
      >
        <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>
    </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>