112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRouter } from 'vue-router';
|
|
import { computed } from 'vue';
|
|
import { toCurrency } from 'src/filters';
|
|
|
|
import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
|
|
|
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
|
import { toTimeFormat } from 'filters/date.js';
|
|
|
|
const { t } = useI18n();
|
|
const router = useRouter();
|
|
const { viewSummary } = useSummaryDialog();
|
|
|
|
defineProps({
|
|
rows: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
label: t('zoneClosingTable.id'),
|
|
name: 'id',
|
|
field: 'id',
|
|
sortable: true,
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: t('zoneClosingTable.name'),
|
|
name: 'name',
|
|
field: 'name',
|
|
sortable: true,
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: t('zoneClosingTable.agency'),
|
|
name: 'agency',
|
|
field: 'agencyModeName',
|
|
sortable: true,
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: t('zoneClosingTable.closing'),
|
|
name: 'close',
|
|
field: 'hour',
|
|
sortable: true,
|
|
align: 'left',
|
|
format: (val) => toTimeFormat(val),
|
|
},
|
|
{
|
|
label: t('zoneClosingTable.price'),
|
|
name: 'price',
|
|
field: 'price',
|
|
sortable: true,
|
|
align: 'left',
|
|
format: (val) => toCurrency(val),
|
|
},
|
|
{
|
|
name: 'actions',
|
|
align: 'left',
|
|
},
|
|
]);
|
|
|
|
const redirectToZoneSummary = (id) => {
|
|
router.push({ name: 'ZoneSummary', params: { id } });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="header">
|
|
<span>{{ t('zoneClosingTable.zones') }}</span>
|
|
</div>
|
|
<QTable
|
|
:rows="rows"
|
|
:columns="columns"
|
|
@row-click="(_, row) => redirectToZoneSummary(row.id)"
|
|
style="max-height: 400px"
|
|
>
|
|
<template #body-cell-actions="props">
|
|
<QTd :props="props">
|
|
<div class="table-actions">
|
|
<QIcon
|
|
name="preview"
|
|
size="sm"
|
|
color="primary"
|
|
@click.stop="viewSummary(props.row.id, ZoneSummary)"
|
|
>
|
|
<QTooltip>{{ t('zoneClosingTable.preview') }}</QTooltip>
|
|
</QIcon>
|
|
</div>
|
|
</QTd>
|
|
</template>
|
|
</QTable>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.header {
|
|
width: 100%;
|
|
height: 34px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
background-color: $primary;
|
|
}
|
|
</style>
|