128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
|
<q-card-actions class="text-primary q-py-sm">
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-menu-left"
|
|
@click="clickPrevious"
|
|
v-if="modalEdit == true"
|
|
:disable="previous == false"
|
|
:color="!previous ? 'grey-7' : 'public'"
|
|
/>
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-menu-right"
|
|
@click="clickNext"
|
|
v-if="modalEdit == true"
|
|
:disable="next == false"
|
|
:color="!next ? 'grey-7' : 'public'"
|
|
/>
|
|
<q-space />
|
|
<div v-if="editBtn">
|
|
<q-btn
|
|
v-if="!editvisible"
|
|
flat
|
|
round
|
|
:disabled="editvisible"
|
|
:color="editvisible ? 'grey-7' : 'primary'"
|
|
@click="edit"
|
|
icon="mdi-pencil-outline"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
<div v-else>
|
|
<!-- <q-btn
|
|
flat
|
|
round
|
|
:disabled="!editvisible"
|
|
:outline="!editvisible"
|
|
:color="!editvisible ? 'grey-7' : 'red'"
|
|
@click="cancel()"
|
|
icon="mdi-undo"
|
|
v-if="modalEdit == true"
|
|
>
|
|
<q-tooltip>ยกเลิก</q-tooltip>
|
|
</q-btn> -->
|
|
<q-btn
|
|
flat
|
|
round
|
|
:disabled="!editvisible"
|
|
:color="!editvisible ? 'grey-7' : 'public'"
|
|
@click="checkSave"
|
|
icon="mdi-content-save-outline"
|
|
>
|
|
<q-tooltip>บันทึก</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-card-actions>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, useAttrs } from 'vue'
|
|
|
|
const props = defineProps({
|
|
editvisible: Boolean,
|
|
next: Boolean,
|
|
previous: Boolean,
|
|
modalEdit: Boolean,
|
|
editBtn: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
clickNext: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
clickPrevious: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
cancel: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
edit: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
save: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
validate: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
}
|
|
})
|
|
const emit = defineEmits(['update:editvisible', 'update:next', 'update:previous'])
|
|
|
|
const updateEdit = (value: Boolean) => {
|
|
emit('update:editvisible', value)
|
|
}
|
|
const cancel = async () => {
|
|
props.cancel()
|
|
}
|
|
const edit = async () => {
|
|
updateEdit(!props.editvisible)
|
|
props.edit()
|
|
}
|
|
const checkSave = () => {
|
|
props.validate()
|
|
props.save()
|
|
// if (myForm.value !== null) {
|
|
// myForm.value.validate().then((success) => {
|
|
// if (success) {
|
|
// }
|
|
// });
|
|
// }
|
|
}
|
|
|
|
const clickNext = async () => {
|
|
await props.clickNext()
|
|
}
|
|
|
|
const clickPrevious = async () => {
|
|
await props.clickPrevious()
|
|
}
|
|
</script>
|