2b758e57f8
* feat: receipt #173 * chore: clean up --------- Co-authored-by: nwpptrs <jay02499@gmail.com> Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { QTableSlots } from 'quasar';
|
|
import { columns } from './constants';
|
|
|
|
import { Receipt } from 'src/stores/payment/types';
|
|
import { useReceipt } from 'src/stores/payment';
|
|
|
|
const receiptStore = useReceipt();
|
|
|
|
type Data = Receipt;
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
rows: Data[];
|
|
readonly?: boolean;
|
|
flat?: boolean;
|
|
bordered?: boolean;
|
|
grid?: boolean;
|
|
hideHeader?: boolean;
|
|
buttonDownload?: boolean;
|
|
buttonDelete?: boolean;
|
|
hidePagination?: boolean;
|
|
inTable?: boolean;
|
|
hideView?: boolean;
|
|
btnSelected?: boolean;
|
|
|
|
imgColumn?: string;
|
|
customColumn?: string[];
|
|
}>(),
|
|
{
|
|
row: () => [],
|
|
flat: false,
|
|
bordered: false,
|
|
grid: false,
|
|
hideHeader: false,
|
|
buttonDownload: false,
|
|
imgColumn: '',
|
|
customColumn: () => [],
|
|
},
|
|
);
|
|
|
|
defineEmits<{
|
|
(e: 'preview' | 'view', data: Data): void;
|
|
(e: 'edit' | 'delete' | 'download', data: Data, index: number): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<q-table
|
|
:rows-per-page-options="[0]"
|
|
:rows="rows.map((data, i) => ({ ...data, _index: i }))"
|
|
:columns
|
|
:grid
|
|
bordered
|
|
flat
|
|
hide-pagination
|
|
selection="multiple"
|
|
card-container-class="q-col-gutter-sm"
|
|
class="full-width"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr
|
|
style="background-color: hsla(var(--info-bg) / 0.07)"
|
|
:props="props"
|
|
>
|
|
<q-th v-for="col in columns" :key="col.name" :props="props">
|
|
{{ $t(col.label) }}
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template
|
|
v-slot:body="props: {
|
|
row: Receipt & { _index: number };
|
|
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
|
>
|
|
<q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
|
|
<q-td v-for="col in columns" :align="col.align">
|
|
<!-- NOTE: custom column will starts with # -->
|
|
<template v-if="!col.name.startsWith('#')">
|
|
<span>
|
|
{{
|
|
typeof col.field === 'string'
|
|
? props.row[col.field as keyof Receipt]
|
|
: col.field(props.row)
|
|
}}
|
|
</span>
|
|
</template>
|
|
<template v-if="col.name === '#order'">
|
|
{{
|
|
col.field(props.row) +
|
|
(receiptStore.page - 1) * receiptStore.pageSize
|
|
}}
|
|
</template>
|
|
<template v-if="col.name === '#action'">
|
|
<q-btn
|
|
:id="`btn-preview-${props.row.invoice.quotation.workName}`"
|
|
flat
|
|
dense
|
|
rounded
|
|
icon="mdi-play-box-outline"
|
|
size="12px"
|
|
:title="$t('preview.doc')"
|
|
@click.stop="$emit('preview', props.row)"
|
|
/>
|
|
|
|
<q-btn
|
|
:id="`btn-eye-${props.row.invoice.quotation.workName}`"
|
|
icon="mdi-eye-outline"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop="$emit('view', props.row)"
|
|
/>
|
|
</template>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:item="props: { row: Receipt }">
|
|
<slot name="grid" :item="props" />
|
|
</template>
|
|
</q-table>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(i.q-icon.mdi.mdi-alert.q-table__bottom-nodata-icon) {
|
|
color: #ffc224 !important;
|
|
}
|
|
</style>
|