134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { QTableProps } from 'quasar';
|
|
import KebabAction from 'components/shared/KebabAction.vue';
|
|
import DeleteButton from './button/DeleteButton.vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
rows: QTableProps['rows'];
|
|
columns: QTableProps['columns'];
|
|
flat?: boolean;
|
|
bordered?: boolean;
|
|
grid?: boolean;
|
|
hideHeader?: boolean;
|
|
buttomDownload?: boolean;
|
|
buttonDelete?: boolean;
|
|
hidePagination?: boolean;
|
|
|
|
imgColumn?: string;
|
|
customColumn?: string[];
|
|
}>(),
|
|
{
|
|
row: () => [],
|
|
column: () => [],
|
|
flat: false,
|
|
bordered: false,
|
|
grid: false,
|
|
hideHeader: false,
|
|
buttomDownload: false,
|
|
imgColumn: '',
|
|
customColumn: () => [],
|
|
},
|
|
);
|
|
|
|
defineEmits<{
|
|
(e: 'view', index: number): void;
|
|
(e: 'edit', index: number): void;
|
|
(e: 'delete', index: number): void;
|
|
(e: 'toggleStatus', row: typeof props.rows): void;
|
|
(e: 'download', index: number): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<q-table
|
|
v-bind="props"
|
|
class="full-height"
|
|
:no-data-label="$t('general.noDataTable')"
|
|
:hide-pagination
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr
|
|
style="background-color: hsla(var(--info-bg) / 0.07)"
|
|
:props="props"
|
|
>
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span v-if="col.label === 'nameEmployee'">
|
|
{{ $t('fullname') }}
|
|
</span>
|
|
|
|
<span v-if="col.label !== ''">
|
|
{{ $t(col.label) }}
|
|
</span>
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:body-cell-order="props">
|
|
<q-td class="text-center">
|
|
{{ props.rowIndex + 1 }}
|
|
</q-td>
|
|
</template>
|
|
|
|
<template v-slot:[`body-cell-${imgColumn}`]="props">
|
|
<q-td>
|
|
<slot name="img-column" :props="props"></slot>
|
|
{{ props.row[imgColumn] }}
|
|
</q-td>
|
|
</template>
|
|
|
|
<template
|
|
v-for="col in customColumn"
|
|
:key="col"
|
|
v-slot:[`body-cell-${col}`]="props"
|
|
>
|
|
<slot :name="`body-cell-${col}`" :props="props"></slot>
|
|
</template>
|
|
|
|
<template v-slot:body-cell-action="props">
|
|
<q-td class="text-center row items-center">
|
|
<slot name="button" :props="props"></slot>
|
|
<DeleteButton iconOnly v-if="buttonDelete" />
|
|
|
|
<q-btn
|
|
v-if="!buttonDelete"
|
|
icon="mdi-eye-outline"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop="$emit('view', props.rowIndex)"
|
|
/>
|
|
|
|
<q-btn
|
|
v-if="buttomDownload && props.row.id !== undefined"
|
|
icon="mdi-download-outline"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop="$emit('download', props.rowIndex)"
|
|
/>
|
|
|
|
<KebabAction
|
|
v-if="!buttonDelete"
|
|
hide-toggle
|
|
:id-name="props.row.code"
|
|
:status="props.row.status"
|
|
@view="$emit('view', props.rowIndex)"
|
|
@edit="$emit('edit', props.rowIndex)"
|
|
@delete="$emit('delete', props.rowIndex)"
|
|
@change-status="$emit('toggleStatus', props.row)"
|
|
/>
|
|
</q-td>
|
|
|
|
<slot name="dialog" :index="props.rowIndex" :row="props.row"></slot>
|
|
</template>
|
|
</q-table>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(i.q-icon.mdi.mdi-alert.q-table__bottom-nodata-icon) {
|
|
color: #ffc224 !important;
|
|
}
|
|
</style>
|