feat: list use vnTable, fix descriptor
This commit is contained in:
parent
199d8fa237
commit
2340aaba0b
|
@ -56,7 +56,12 @@ onBeforeMount(async () => {
|
|||
skip: 0,
|
||||
});
|
||||
store = arrayData.store;
|
||||
entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
|
||||
entity = computed(() => {
|
||||
const data = Array.isArray(store.data) ? store.data[0] : store.data;
|
||||
emit('onFetch', data);
|
||||
return data;
|
||||
});
|
||||
|
||||
// It enables to load data only once if the module is the same as the dataKey
|
||||
if (!isSameDataKey.value || !route.params.id) await getData();
|
||||
watch(
|
||||
|
|
|
@ -627,69 +627,6 @@ ticket:
|
|||
landed: Landed
|
||||
warehouse: Warehouse
|
||||
agency: Agency
|
||||
claim:
|
||||
list:
|
||||
customer: Customer
|
||||
assignedTo: Assigned
|
||||
created: Created
|
||||
state: State
|
||||
rmaList:
|
||||
code: Code
|
||||
records: records
|
||||
card:
|
||||
claimId: Claim ID
|
||||
attendedBy: Attended by
|
||||
created: Created
|
||||
state: State
|
||||
ticketId: Ticket ID
|
||||
customerSummary: Customer summary
|
||||
claimedTicket: Claimed ticket
|
||||
saleTracking: Sale tracking
|
||||
ticketTracking: Ticket tracking
|
||||
commercial: Commercial
|
||||
province: Province
|
||||
zone: Zone
|
||||
customerId: client ID
|
||||
summary:
|
||||
customer: Customer
|
||||
assignedTo: Assigned
|
||||
attendedBy: Attended by
|
||||
created: Created
|
||||
state: State
|
||||
details: Details
|
||||
item: Item
|
||||
landed: Landed
|
||||
quantity: Quantity
|
||||
claimed: Claimed
|
||||
price: Price
|
||||
discount: Discount
|
||||
total: Total
|
||||
actions: Actions
|
||||
responsibility: Responsibility
|
||||
company: Company
|
||||
person: Employee/Customer
|
||||
notes: Notes
|
||||
photos: Photos
|
||||
development: Development
|
||||
reason: Reason
|
||||
result: Result
|
||||
responsible: Responsible
|
||||
worker: Worker
|
||||
redelivery: Redelivery
|
||||
changeState: Change state
|
||||
basicData:
|
||||
customer: Customer
|
||||
assignedTo: Assigned
|
||||
created: Created
|
||||
state: State
|
||||
pickup: Pick up
|
||||
null: No
|
||||
agency: Agency
|
||||
delivery: Delivery
|
||||
photo:
|
||||
fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}'
|
||||
noData: 'There are no images/videos, click here or drag and drop the file'
|
||||
dragDrop: Drag and drop it here
|
||||
invoiceOut:
|
||||
list:
|
||||
ref: Reference
|
||||
|
|
|
@ -625,69 +625,6 @@ ticket:
|
|||
landed: F. entrega
|
||||
warehouse: Almacén
|
||||
agency: Agencia
|
||||
claim:
|
||||
list:
|
||||
customer: Cliente
|
||||
assignedTo: Asignada a
|
||||
created: Creada
|
||||
state: Estado
|
||||
rmaList:
|
||||
code: Código
|
||||
records: registros
|
||||
card:
|
||||
claimId: ID reclamación
|
||||
attendedBy: Atendida por
|
||||
created: Creada
|
||||
state: Estado
|
||||
ticketId: ID ticket
|
||||
customerSummary: Resumen del cliente
|
||||
claimedTicket: Ticket reclamado
|
||||
saleTracking: Líneas preparadas
|
||||
ticketTracking: Estados del ticket
|
||||
commercial: Comercial
|
||||
province: Provincia
|
||||
zone: Zona
|
||||
customerId: ID del cliente
|
||||
summary:
|
||||
customer: Cliente
|
||||
assignedTo: Asignada a
|
||||
attendedBy: Atendida por
|
||||
created: Creada
|
||||
state: Estado
|
||||
details: Detalles
|
||||
item: Artículo
|
||||
landed: Entregado
|
||||
quantity: Cantidad
|
||||
claimed: Reclamado
|
||||
price: Precio
|
||||
discount: Descuento
|
||||
total: Total
|
||||
actions: Acciones
|
||||
responsibility: Responsabilidad
|
||||
company: Empresa
|
||||
person: Comercial/Cliente
|
||||
notes: Observaciones
|
||||
photos: Fotos
|
||||
development: Trazabilidad
|
||||
reason: Motivo
|
||||
result: Consecuencias
|
||||
responsible: Responsable
|
||||
worker: Trabajador
|
||||
redelivery: Devolución
|
||||
changeState: Cambiar estado
|
||||
basicData:
|
||||
customer: Cliente
|
||||
assignedTo: Asignada a
|
||||
created: Creada
|
||||
state: Estado
|
||||
pickup: Recogida
|
||||
null: No
|
||||
agency: Agencia
|
||||
delivery: Reparto
|
||||
photo:
|
||||
fileDescription: 'Reclamacion ID {claimId} del cliente {clientName} id {clientId}'
|
||||
noData: No hay imágenes/videos haz click aquí o arrastra y suelta el archivo
|
||||
dragDrop: Arrástralo y sueltalo aquí
|
||||
invoiceOut:
|
||||
list:
|
||||
ref: Referencia
|
||||
|
|
|
@ -33,8 +33,8 @@ const DEFAULT_MAX_RESPONSABILITY = 5;
|
|||
const DEFAULT_MIN_RESPONSABILITY = 1;
|
||||
const arrayData = useArrayData('claimData');
|
||||
const marker_labels = [
|
||||
{ value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
|
||||
{ value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
|
||||
{ value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.company') },
|
||||
{ value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.person') },
|
||||
];
|
||||
const multiplicatorValue = ref();
|
||||
const loading = ref(false);
|
||||
|
@ -209,12 +209,12 @@ async function post(query, params) {
|
|||
<QItem class="justify-between">
|
||||
<QItemLabel class="slider-container">
|
||||
<p class="text-primary">
|
||||
{{ t('claim.summary.actions') }}
|
||||
{{ t('claim.actions') }}
|
||||
</p>
|
||||
<QSlider
|
||||
class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
|
||||
v-model="claim.responsibility"
|
||||
:label-value="t('claim.summary.responsibility')"
|
||||
:label-value="t('claim.responsibility')"
|
||||
@change="(value) => save({ responsibility: value })"
|
||||
label-always
|
||||
color="primary"
|
||||
|
|
|
@ -0,0 +1,99 @@
|
|||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { useStateStore } from 'src/stores/useStateStore';
|
||||
import { toDate, toPercentage, toCurrency } from 'filters/index';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
const { t } = useI18n();
|
||||
const quasar = useQuasar();
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'id',
|
||||
label: t('Id item'),
|
||||
field: (row) => row.itemFk,
|
||||
},
|
||||
{
|
||||
name: 'ticketFk',
|
||||
label: t('Ticket'),
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'destination',
|
||||
label: t('Destination'),
|
||||
field: (row) => row.claimDestinationFk,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'Landed',
|
||||
label: t('Landed'),
|
||||
field: (row) => toDate(row.landed),
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('Quantity'),
|
||||
field: (row) => row.quantity,
|
||||
},
|
||||
{
|
||||
name: 'concept',
|
||||
label: t('Description'),
|
||||
field: (row) => row.concept,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
label: t('Price'),
|
||||
field: (row) => row.price,
|
||||
format: (value) => value,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'discount',
|
||||
label: t('Discount'),
|
||||
field: (row) => row.discount,
|
||||
format: (value) => toPercentage(value / 100),
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
label: t('Total'),
|
||||
field: (row) => row.total,
|
||||
format: (value) => value,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<VnTable
|
||||
data-key="ClaimEndsTable"
|
||||
url="ClaimEnds/filter"
|
||||
default-mode="table"
|
||||
:right-search="false"
|
||||
:column-search="false"
|
||||
:disable-option="{ card: true, table: true }"
|
||||
search-url="actions"
|
||||
:filter="{ where: { claimFk: $props.id } }"
|
||||
:columns="columns"
|
||||
:limit="0"
|
||||
auto-load
|
||||
/>
|
||||
</template>
|
|
@ -30,7 +30,7 @@ function setClaimStates(data) {
|
|||
}
|
||||
|
||||
async function getEnumValues() {
|
||||
optionsList.value = [{ id: null, description: t('claim.basicData.null') }];
|
||||
optionsList.value = [{ id: null, description: t('claim.null') }];
|
||||
const { data } = await axios.get(`Applications/get-enum-values`, {
|
||||
params: {
|
||||
schema: 'vn',
|
||||
|
@ -39,7 +39,7 @@ async function getEnumValues() {
|
|||
},
|
||||
});
|
||||
for (let value of data)
|
||||
optionsList.value.push({ id: value, description: t(`claim.basicData.${value}`) });
|
||||
optionsList.value.push({ id: value, description: t(`claim.${value}`) });
|
||||
}
|
||||
|
||||
getEnumValues();
|
||||
|
@ -77,17 +77,14 @@ const statesFilter = {
|
|||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<VnInput
|
||||
v-model="data.client.name"
|
||||
:label="t('claim.basicData.customer')"
|
||||
:label="t('claim.customer')"
|
||||
disable
|
||||
/>
|
||||
<VnInputDate
|
||||
v-model="data.created"
|
||||
:label="t('claim.basicData.created')"
|
||||
/>
|
||||
<VnInputDate v-model="data.created" :label="t('claim.created')" />
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<VnSelect
|
||||
:label="t('claim.basicData.assignedTo')"
|
||||
:label="t('claim.assignedTo')"
|
||||
v-model="data.workerFk"
|
||||
:options="workersOptions"
|
||||
option-value="id"
|
||||
|
@ -114,7 +111,7 @@ const statesFilter = {
|
|||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
:label="t('claim.basicData.state')"
|
||||
:label="t('claim.state')"
|
||||
map-options
|
||||
use-input
|
||||
@filter="(value, update) => filter(value, update, statesFilter)"
|
||||
|
@ -136,7 +133,7 @@ const statesFilter = {
|
|||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
:label="t('claim.basicData.pickup')"
|
||||
:label="t('claim.pickup')"
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toDate, toPercentage } from 'src/filters';
|
||||
import { toDateHourMinSec, toPercentage } from 'src/filters';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
|
||||
|
@ -52,7 +52,6 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<CardDescriptor
|
||||
ref="descriptor"
|
||||
:url="`Claims/${entityId}`"
|
||||
:filter="filter"
|
||||
module="Claim"
|
||||
|
@ -64,7 +63,7 @@ onMounted(async () => {
|
|||
<ClaimDescriptorMenu :claim="entity" />
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<VnLv v-if="entity.claimState" :label="t('claim.card.state')">
|
||||
<VnLv v-if="entity.claimState" :label="t('claim.state')">
|
||||
<template #value>
|
||||
<QBadge
|
||||
:color="stateColor(entity.claimState.code)"
|
||||
|
@ -75,8 +74,8 @@ onMounted(async () => {
|
|||
</QBadge>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" />
|
||||
<VnLv :label="t('claim.card.commercial')">
|
||||
<VnLv :label="t('claim.created')" :value="toDateHourMinSec(entity.created)" />
|
||||
<VnLv :label="t('claim.commercial')">
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="entity.client?.salesPersonUser?.name"
|
||||
|
@ -86,17 +85,17 @@ onMounted(async () => {
|
|||
</VnLv>
|
||||
<VnLv
|
||||
v-if="entity.worker"
|
||||
:label="t('claim.card.attendedBy')"
|
||||
:label="t('claim.attendedBy')"
|
||||
:value="entity.worker.user.name"
|
||||
>
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="entity.worker.user.nickname"
|
||||
:name="entity.worker.user.name"
|
||||
:worker-id="entity.worker.id"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.card.zone')">
|
||||
<VnLv :label="t('claim.zone')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.ticket?.zone?.name }}
|
||||
|
@ -105,10 +104,10 @@ onMounted(async () => {
|
|||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('claim.card.province')"
|
||||
:label="t('claim.province')"
|
||||
:value="entity.ticket?.address?.province?.name"
|
||||
/>
|
||||
<VnLv :label="t('claim.card.ticketId')">
|
||||
<VnLv :label="t('claim.ticketId')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.ticketFk }}
|
||||
|
@ -130,7 +129,7 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
|
||||
>
|
||||
<QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip>
|
||||
<QTooltip>{{ t('claim.customerSummary') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
size="md"
|
||||
|
@ -138,7 +137,7 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
:to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
|
||||
>
|
||||
<QTooltip>{{ t('claim.card.claimedTicket') }}</QTooltip>
|
||||
<QTooltip>{{ t('claim.claimedTicket') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
size="md"
|
||||
|
@ -146,7 +145,7 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
:href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
|
||||
>
|
||||
<QTooltip>{{ t('claim.card.saleTracking') }}</QTooltip>
|
||||
<QTooltip>{{ t('claim.saleTracking') }}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
size="md"
|
||||
|
@ -154,7 +153,7 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
:href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
|
||||
>
|
||||
<QTooltip>{{ t('claim.card.ticketTracking') }}</QTooltip>
|
||||
<QTooltip>{{ t('claim.ticketTracking') }}</QTooltip>
|
||||
</QBtn>
|
||||
</QCardActions>
|
||||
</template>
|
||||
|
|
|
@ -18,7 +18,7 @@ const claimId = computed(() => router.currentRoute.value.params.id);
|
|||
|
||||
const claimDms = ref([
|
||||
{
|
||||
dmsFk: 1,
|
||||
dmsFk: claimId,
|
||||
},
|
||||
]);
|
||||
const client = ref({});
|
||||
|
@ -113,7 +113,7 @@ async function create() {
|
|||
warehouseId: config.value.warehouseFk,
|
||||
companyId: config.value.companyFk,
|
||||
dmsTypeId: dmsType.value.id,
|
||||
description: t('claim.photo.fileDescription', {
|
||||
description: t('claim.fileDescription', {
|
||||
claimId: claimId.value,
|
||||
clientName: client.value.name,
|
||||
clientId: client.value.id,
|
||||
|
@ -177,7 +177,7 @@ function onDrag() {
|
|||
>
|
||||
<QIcon size="xl" name="file_download" />
|
||||
<h5>
|
||||
{{ t('claim.photo.dragDrop') }}
|
||||
{{ t('claim.dragDrop') }}
|
||||
</h5>
|
||||
</div>
|
||||
<div
|
||||
|
@ -188,7 +188,7 @@ function onDrag() {
|
|||
<QIcon size="xl" name="image"></QIcon>
|
||||
<QIcon size="xl" name="movie"></QIcon>
|
||||
<h5>
|
||||
{{ t('claim.photo.noData') }}
|
||||
{{ t('claim.noData') }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="multimediaParent bg-transparent" v-if="claimDms?.length && !dragFile">
|
||||
|
|
|
@ -16,19 +16,12 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const workers = ref();
|
||||
const states = ref();
|
||||
const states = ref([]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
|
||||
<FetchData
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{ where: { role: 'salesPerson' } }"
|
||||
@on-fetch="(data) => (workers = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
|
@ -36,156 +29,110 @@ const states = ref();
|
|||
</div>
|
||||
</template>
|
||||
<template #body="{ params, searchFn }">
|
||||
<QItem class="q-my-sm">
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
:label="t('Customer ID')"
|
||||
v-model="params.clientFk"
|
||||
lazy-rules
|
||||
is-outlined
|
||||
>
|
||||
<template #prepend>
|
||||
<QIcon name="badge" size="xs"></QIcon> </template
|
||||
></VnInput>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
:label="t('Client Name')"
|
||||
v-model="params.clientName"
|
||||
lazy-rules
|
||||
is-outlined
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers">
|
||||
<VnSelect
|
||||
:label="t('Salesperson')"
|
||||
v-model="params.salesPersonFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers">
|
||||
<VnSelect
|
||||
:label="t('Attender')"
|
||||
v-model="params.attenderFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers">
|
||||
<VnSelect
|
||||
:label="t('Responsible')"
|
||||
v-model="params.claimResponsibleFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="!states">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="states">
|
||||
<VnSelect
|
||||
:label="t('State')"
|
||||
v-model="params.claimStateFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="states"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
v-model="params.myTeam"
|
||||
:label="t('myTeam')"
|
||||
toggle-indeterminate
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<QExpansionItem :label="t('More options')" expand-separator>
|
||||
<!-- <QItem>
|
||||
<QItemSection>
|
||||
<qSelect
|
||||
:label="t('Item')"
|
||||
v-model="params.itemFk"
|
||||
:options="items"
|
||||
:loading="loading"
|
||||
@filter="filterFn"
|
||||
@virtual-scroll="onScroll"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem> -->
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnInputDate
|
||||
v-model="params.created"
|
||||
:label="t('Created')"
|
||||
is-outlined
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QExpansionItem>
|
||||
<div class="q-pa-sm q-gutter-y-sm">
|
||||
<VnInput
|
||||
:label="t('claim.customerId')"
|
||||
v-model="params.clientFk"
|
||||
lazy-rules
|
||||
is-outlined
|
||||
>
|
||||
<template #prepend> <QIcon name="badge" size="xs"></QIcon></template>
|
||||
</VnInput>
|
||||
<VnInput
|
||||
:label="t('Client Name')"
|
||||
v-model="params.clientName"
|
||||
lazy-rules
|
||||
is-outlined
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('Salesperson')"
|
||||
v-model="params.salesPersonFk"
|
||||
@update:model-value="searchFn()"
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{ where: { role: 'salesPerson' } }"
|
||||
:use-like="false"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
option-filter="firstName"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('claim.attendedBy')"
|
||||
v-model="params.attenderFk"
|
||||
@update:model-value="searchFn()"
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{ where: { role: 'salesPerson' } }"
|
||||
:use-like="false"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
option-filter="firstName"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('claim.state')"
|
||||
v-model="params.claimStateFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="states"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
/>
|
||||
<VnInputDate
|
||||
v-model="params.created"
|
||||
@update:model-value="searchFn()"
|
||||
:label="t('claim.created')"
|
||||
outlined
|
||||
rounded
|
||||
dense
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('Item')"
|
||||
v-model="params.itemFk"
|
||||
@update:model-value="searchFn()"
|
||||
url="Items/withName"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
sort-by="id DESC"
|
||||
outlined
|
||||
rounded
|
||||
dense
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
|
||||
<QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnSelect
|
||||
:label="t('claim.responsible')"
|
||||
v-model="params.claimResponsibleFk"
|
||||
@update:model-value="searchFn()"
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{ where: { role: 'salesPerson' } }"
|
||||
:use-like="false"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
option-filter="firstName"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
/>
|
||||
<QCheckbox
|
||||
v-model="params.myTeam"
|
||||
:label="t('myTeam')"
|
||||
@update:model-value="searchFn()"
|
||||
toggle-indeterminate
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
@ -201,7 +148,8 @@ en:
|
|||
claimResponsibleFk: Responsible
|
||||
claimStateFk: State
|
||||
created: Created
|
||||
myTeam: My team
|
||||
myTeam: My team
|
||||
itemFk: Item
|
||||
es:
|
||||
params:
|
||||
search: Contiene
|
||||
|
@ -212,14 +160,9 @@ es:
|
|||
claimResponsibleFk: Responsable
|
||||
claimStateFk: Estado
|
||||
created: Creada
|
||||
Customer ID: ID cliente
|
||||
myTeam: Mi equipo
|
||||
itemFk: Artículo
|
||||
Client Name: Nombre del cliente
|
||||
Salesperson: Comercial
|
||||
Attender: Asistente
|
||||
Responsible: Responsable
|
||||
State: Estado
|
||||
Item: Artículo
|
||||
Created: Creada
|
||||
More options: Más opciones
|
||||
myTeam: Mi equipo
|
||||
</i18n>
|
||||
|
|
|
@ -1,38 +1,81 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { toDate } from 'filters/index';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
import ClaimFilter from './ClaimFilter.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
||||
import ClaimSummary from './Card/ClaimSummary.vue';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
name: 'id',
|
||||
label: t('customer.extendedList.tableVisibleColumns.id'),
|
||||
chip: {
|
||||
condition: () => true,
|
||||
},
|
||||
isId: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('customer.extendedList.tableVisibleColumns.name'),
|
||||
name: 'clientName',
|
||||
isTitle: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('claim.customer'),
|
||||
name: 'clientFk',
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('claim.attendedBy'),
|
||||
name: 'attendedBy',
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('claim.created'),
|
||||
name: 'created',
|
||||
format: ({ created }) => toDate(created),
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
label: t('claim.state'),
|
||||
name: 'stateCode',
|
||||
chip: {
|
||||
condition: () => true,
|
||||
color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
actions: [
|
||||
{
|
||||
title: t('Client ticket list'),
|
||||
icon: 'preview',
|
||||
action: (row) => viewSummary(row.id, ClaimSummary),
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const STATE_COLOR = {
|
||||
pending: 'warning',
|
||||
managed: 'info',
|
||||
resolved: 'positive',
|
||||
pending: 'bg-warning',
|
||||
managed: 'bg-info',
|
||||
resolved: 'bg-positive',
|
||||
};
|
||||
function getApiUrl() {
|
||||
return new URL(window.location).origin;
|
||||
}
|
||||
function stateColor(code) {
|
||||
return STATE_COLOR[code];
|
||||
}
|
||||
function navigate(event, id) {
|
||||
if (event.ctrlKey || event.metaKey)
|
||||
return window.open(`${getApiUrl()}/#/claim/${id}/summary`);
|
||||
router.push({ path: `/claim/${id}` });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -46,78 +89,27 @@ function navigate(event, id) {
|
|||
<ClaimFilter data-key="ClaimList" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
data-key="ClaimList"
|
||||
url="Claims/filter"
|
||||
:order="['priority ASC', 'created DESC']"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<CardList
|
||||
:id="row.id"
|
||||
:key="row.id"
|
||||
:title="row.clientName"
|
||||
@click="navigate($event, row.id)"
|
||||
v-for="row of rows"
|
||||
>
|
||||
<template #list-items>
|
||||
<VnLv :label="t('claim.list.customer')">
|
||||
<template #value>
|
||||
<span class="link" @click.stop>
|
||||
{{ row.clientName }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.list.assignedTo')">
|
||||
<template #value>
|
||||
<span @click.stop>
|
||||
<VnUserLink
|
||||
:name="row.workerName"
|
||||
:worker-id="row.workerFk"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('claim.list.created')"
|
||||
:value="toDate(row.created)"
|
||||
/>
|
||||
<VnLv :label="t('claim.list.state')">
|
||||
<template #value>
|
||||
<QBadge
|
||||
text-color="black"
|
||||
:color="stateColor(row.stateCode)"
|
||||
dense
|
||||
>
|
||||
{{ row.stateDescription }}
|
||||
</QBadge>
|
||||
</template>
|
||||
</VnLv>
|
||||
</template>
|
||||
<template #actions>
|
||||
<QBtn
|
||||
:label="t('globals.description')"
|
||||
@click.stop
|
||||
outline
|
||||
style="margin-top: 15px"
|
||||
>
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</QBtn>
|
||||
<QBtn
|
||||
:label="t('components.smartCard.openSummary')"
|
||||
@click.stop="viewSummary(row.id, ClaimSummary)"
|
||||
color="primary"
|
||||
style="margin-top: 15px"
|
||||
/>
|
||||
</template>
|
||||
</CardList>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
</QPage>
|
||||
<VnTable
|
||||
data-key="ClaimList"
|
||||
url="Claims/filter"
|
||||
:order="['priority ASC', 'created DESC']"
|
||||
:columns="columns"
|
||||
redirect="claim"
|
||||
:right-search="false"
|
||||
auto-load
|
||||
>
|
||||
<template #column-clientFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row.clientName }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</span>
|
||||
</template>
|
||||
<template #column-attendedBy="{ row }">
|
||||
<span @click.stop>
|
||||
<VnUserLink :name="row.workerName" :worker-id="row.workerFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
|
|
|
@ -0,0 +1,46 @@
|
|||
claim:
|
||||
customer: Customer
|
||||
code: Code
|
||||
records: records
|
||||
claimId: Claim ID
|
||||
attendedBy: Attended by
|
||||
ticketId: Ticket ID
|
||||
customerSummary: Customer summary
|
||||
claimedTicket: Claimed ticket
|
||||
saleTracking: Sale tracking
|
||||
ticketTracking: Ticket tracking
|
||||
commercial: Commercial
|
||||
province: Province
|
||||
zone: Zone
|
||||
customerId: client ID
|
||||
assignedTo: Assigned
|
||||
created: Created
|
||||
details: Details
|
||||
item: Item
|
||||
landed: Landed
|
||||
quantity: Quantity
|
||||
claimed: Claimed
|
||||
price: Price
|
||||
discount: Discount
|
||||
total: Total
|
||||
actions: Actions
|
||||
responsibility: Responsibility
|
||||
company: Company
|
||||
person: Employee/Customer
|
||||
notes: Notes
|
||||
photos: Photos
|
||||
development: Development
|
||||
reason: Reason
|
||||
result: Result
|
||||
responsible: Responsible
|
||||
worker: Worker
|
||||
redelivery: Redelivery
|
||||
changeState: Change state
|
||||
state: State
|
||||
pickup: Pick up
|
||||
null: No
|
||||
agency: Agency
|
||||
delivery: Delivery
|
||||
fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}'
|
||||
noData: 'There are no images/videos, click here or drag and drop the file'
|
||||
dragDrop: Drag and drop it here
|
|
@ -1,2 +1,48 @@
|
|||
Search claim: Buscar reclamación
|
||||
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
|
||||
claim:
|
||||
customer: Cliente
|
||||
code: Código
|
||||
records: Registros
|
||||
claimId: ID de reclamación
|
||||
attendedBy: Atendido por
|
||||
ticketId: ID de ticket
|
||||
customerSummary: Resumen del cliente
|
||||
claimedTicket: Ticket reclamado
|
||||
saleTracking: Seguimiento de ventas
|
||||
ticketTracking: Seguimiento de tickets
|
||||
commercial: Comercial
|
||||
province: Provincia
|
||||
zone: Zona
|
||||
customerId: ID de cliente
|
||||
assignedTo: Asignado a
|
||||
created: Creado
|
||||
details: Detalles
|
||||
item: Artículo
|
||||
landed: Llegado
|
||||
quantity: Cantidad
|
||||
claimed: Reclamado
|
||||
price: Precio
|
||||
discount: Descuento
|
||||
total: Total
|
||||
actions: Acciones
|
||||
responsibility: Responsabilidad
|
||||
company: Empresa
|
||||
person: Empleado/Cliente
|
||||
notes: Notas
|
||||
photos: Fotos
|
||||
development: Trazabilidad
|
||||
reason: Razón
|
||||
result: Resultado
|
||||
responsible: Responsable
|
||||
worker: Trabajador
|
||||
redelivery: Reentrega
|
||||
changeState: Cambiar estado
|
||||
state: Estado
|
||||
pickup: Recoger
|
||||
null: No
|
||||
agency: Agencia
|
||||
delivery: Entrega
|
||||
fileDescription: 'ID de reclamación {claimId} del cliente {clientName} con ID {clientId}'
|
||||
noData: 'No hay imágenes/videos, haz clic aquí o arrastra y suelta el archivo'
|
||||
dragDrop: Arrastra y suelta aquí
|
||||
|
|
|
@ -131,7 +131,7 @@ const total = ref(null);
|
|||
color="primary"
|
||||
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
|
||||
>
|
||||
<QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip>
|
||||
<QTooltip>{{ t('claim.customerSummary') }}</QTooltip>
|
||||
</QBtn>
|
||||
</QCardActions>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue