138 lines
4.3 KiB
Vue
138 lines
4.3 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
|
import { useSession } from 'src/composables/useSession';
|
|
import { toDate } from 'filters/index';
|
|
import CmrFilter from './CmrFilter.vue';
|
|
|
|
const stateStore = useStateStore();
|
|
const { t } = useI18n();
|
|
const session = useSession();
|
|
const token = session.getToken();
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
name: 'cmrFk',
|
|
label: t('route.cmr.list.cmrFk'),
|
|
field: (row) => row.cmrFk,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'hasCmrDms',
|
|
label: t('route.cmr.list.hasCmrDms'),
|
|
field: (row) => row.hasCmrDms,
|
|
align: 'center',
|
|
sortable: true,
|
|
headerStyle: 'padding-left: 35px',
|
|
},
|
|
{
|
|
name: 'ticketFk',
|
|
label: t('route.cmr.list.ticketFk'),
|
|
field: (row) => row.ticketFk,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'clientFk',
|
|
label: t('route.cmr.list.clientFk'),
|
|
field: (row) => row.clientFk,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'country',
|
|
label: t('route.cmr.list.country'),
|
|
field: (row) => row.country,
|
|
align: 'left',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'shipped',
|
|
label: t('route.cmr.list.shipped'),
|
|
field: (row) => toDate(row.shipped),
|
|
align: 'center',
|
|
sortable: true,
|
|
headerStyle: 'padding-left: 33px',
|
|
},
|
|
]);
|
|
function getProjectUrl() {
|
|
return new URL(window.location).origin;
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="column items-center">
|
|
<div class="list">
|
|
<VnPaginate
|
|
data-key="CmrList"
|
|
:url="`Routes/getExternalCmrs`"
|
|
order="cmrFk DESC"
|
|
limit="null"
|
|
auto-load
|
|
>
|
|
<template #body="{ rows }">
|
|
<QTable
|
|
:columns="columns"
|
|
:rows="rows"
|
|
:dense="$q.screen.lt.md"
|
|
:pagination="{ rowsPerPage: null }"
|
|
hide-pagination
|
|
:grid="$q.screen.lt.md"
|
|
auto-load
|
|
>
|
|
<template #top>
|
|
<div v-if="rows.length">
|
|
{{ t('route.cmr.list.total', [rows.length]) }}
|
|
</div>
|
|
</template>
|
|
<template #body-cell-cmrFk="{ value }">
|
|
<QTd align="right" class="text-primary">
|
|
<a
|
|
:href="`${getProjectUrl()}/api/Routes/${value}/cmr?access_token=${token}`"
|
|
target="_blank"
|
|
>
|
|
<span class="text-primary">{{ value }}</span>
|
|
</a>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-hasCmrDms="{ value }">
|
|
<QTd align="center">
|
|
<QBadge
|
|
:id="value ? 'true' : 'false'"
|
|
:label="
|
|
value
|
|
? t('route.cmr.list.true')
|
|
: t('route.cmr.list.false')
|
|
"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
</VnPaginate>
|
|
</div>
|
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
|
<QScrollArea class="fit text-grey-8">
|
|
<CmrFilter data-key="CmrList" />
|
|
</QScrollArea>
|
|
</QDrawer>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.list {
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
}
|
|
.grid-style-transition {
|
|
transition: transform 0.28s, background-color 0.28s;
|
|
}
|
|
#true {
|
|
background-color: $positive;
|
|
}
|
|
#false {
|
|
background-color: $negative;
|
|
}
|
|
</style>
|