2023-08-08 12:24:51 +00:00
|
|
|
<script setup>
|
2023-08-10 12:33:25 +00:00
|
|
|
import { computed, ref } from 'vue';
|
2023-08-08 12:24:51 +00:00
|
|
|
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';
|
2023-08-30 10:53:18 +00:00
|
|
|
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
|
|
|
|
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
|
2023-08-08 12:24:51 +00:00
|
|
|
|
|
|
|
const stateStore = useStateStore();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const session = useSession();
|
2023-08-09 12:26:13 +00:00
|
|
|
const token = session.getToken();
|
2023-08-08 12:24:51 +00:00
|
|
|
|
|
|
|
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,
|
2023-08-09 12:26:13 +00:00
|
|
|
align: 'center',
|
2023-08-08 12:24:51 +00:00
|
|
|
sortable: true,
|
2023-08-10 05:49:57 +00:00
|
|
|
headerStyle: 'padding-left: 35px',
|
2023-08-08 12:24:51 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
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,
|
2023-08-09 12:26:13 +00:00
|
|
|
align: 'left',
|
2023-08-08 12:24:51 +00:00
|
|
|
sortable: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'shipped',
|
|
|
|
label: t('route.cmr.list.shipped'),
|
|
|
|
field: (row) => toDate(row.shipped),
|
2023-08-09 12:26:13 +00:00
|
|
|
align: 'center',
|
2023-08-08 12:24:51 +00:00
|
|
|
sortable: true,
|
2023-08-10 05:49:57 +00:00
|
|
|
headerStyle: 'padding-left: 33px',
|
2023-08-08 12:24:51 +00:00
|
|
|
},
|
2023-08-30 10:53:18 +00:00
|
|
|
{
|
|
|
|
name: 'icons',
|
|
|
|
align: 'center',
|
|
|
|
field: (row) => row.cmrFk,
|
|
|
|
},
|
2023-08-08 12:24:51 +00:00
|
|
|
]);
|
2023-08-10 05:49:57 +00:00
|
|
|
function getProjectUrl() {
|
2023-08-10 12:10:57 +00:00
|
|
|
return new URL(window.location).origin;
|
|
|
|
}
|
2023-08-30 10:53:18 +00:00
|
|
|
function getCmrLink(cmrFk) {
|
|
|
|
return `${getProjectUrl()}/api/Routes/${cmrFk}/cmr?access_token=${token}`;
|
|
|
|
}
|
2023-08-08 12:24:51 +00:00
|
|
|
</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
|
2023-08-10 05:49:57 +00:00
|
|
|
:columns="columns"
|
|
|
|
:rows="rows"
|
|
|
|
:dense="$q.screen.lt.md"
|
|
|
|
:pagination="{ rowsPerPage: null }"
|
|
|
|
hide-pagination
|
|
|
|
:grid="$q.screen.lt.md"
|
|
|
|
auto-load
|
2023-08-08 12:24:51 +00:00
|
|
|
>
|
2023-08-10 12:10:57 +00:00
|
|
|
<template #top>
|
2023-08-11 05:45:54 +00:00
|
|
|
{{ `${t('route.cmr.list.total')}: ${rows.length}` }}
|
2023-08-10 12:10:57 +00:00
|
|
|
</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>
|
2023-08-30 10:53:18 +00:00
|
|
|
<template #body-cell-ticketFk="{ value }">
|
|
|
|
<QTd align="right" class="text-primary">
|
|
|
|
<span class="text-primary link">{{ value }}</span>
|
|
|
|
<TicketDescriptorProxy :id="value" />
|
|
|
|
</QTd>
|
|
|
|
</template>
|
|
|
|
<template #body-cell-clientFk="{ value }">
|
|
|
|
<QTd align="right" class="text-primary">
|
|
|
|
<span class="text-primary link">{{ value }}</span>
|
|
|
|
<CustomerDescriptorProxy :id="value" />
|
|
|
|
</QTd>
|
|
|
|
</template>
|
|
|
|
<template #body-cell-icons="{ value }">
|
|
|
|
<QTd align="center">
|
|
|
|
<a :href="getCmrLink(value)" target="_blank">
|
|
|
|
<QIcon
|
|
|
|
name="visibility"
|
|
|
|
color="primary"
|
|
|
|
size="2em"
|
|
|
|
class="q-mr-sm q-ml-sm"
|
|
|
|
/>
|
|
|
|
<QTooltip>
|
|
|
|
{{ t('route.cmr.list.viewCmr') }}
|
|
|
|
</QTooltip>
|
|
|
|
</a>
|
|
|
|
<a :href="getCmrLink(value)" download>
|
|
|
|
<QIcon
|
|
|
|
name="cloud_download"
|
|
|
|
color="primary"
|
|
|
|
size="2em"
|
|
|
|
class="q-mr-sm q-ml-sm"
|
|
|
|
/>
|
|
|
|
<QTooltip>
|
|
|
|
{{ t('route.cmr.list.downloadCmr') }}
|
|
|
|
</QTooltip>
|
|
|
|
</a>
|
|
|
|
</QTd>
|
|
|
|
</template>
|
2023-08-08 12:24:51 +00:00
|
|
|
</QTable>
|
|
|
|
</template>
|
|
|
|
</VnPaginate>
|
|
|
|
</div>
|
|
|
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
2023-08-10 12:10:57 +00:00
|
|
|
<QScrollArea class="fit text-grey-8">
|
|
|
|
<CmrFilter data-key="CmrList" />
|
|
|
|
</QScrollArea>
|
2023-08-08 12:24:51 +00:00
|
|
|
</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 {
|
2023-08-09 10:02:15 +00:00
|
|
|
background-color: $positive;
|
2023-08-08 12:24:51 +00:00
|
|
|
}
|
|
|
|
#false {
|
2023-08-09 10:02:15 +00:00
|
|
|
background-color: $negative;
|
2023-08-08 12:24:51 +00:00
|
|
|
}
|
2023-08-10 12:10:57 +00:00
|
|
|
</style>
|