106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
Vue
<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>
|