136 lines
2.4 KiB
Vue
136 lines
2.4 KiB
Vue
<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"></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>
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
header: {
|
|
type: String,
|
|
default: "ข้อความ",
|
|
required: true,
|
|
},
|
|
iconAdd: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
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"),
|
|
},
|
|
addleave: {
|
|
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"),
|
|
},
|
|
addEmployee: {
|
|
type: Boolean,
|
|
defualt: false,
|
|
},
|
|
});
|
|
|
|
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();
|
|
};
|
|
|
|
const addleave = () => {
|
|
props.addleave();
|
|
};
|
|
</script>
|
|
<style scoped></style>
|