forked from verdnatura/salix-front
feat accountRoutes
This commit is contained in:
parent
2cb402d3d4
commit
c045b0d1f4
|
|
@ -25,78 +25,19 @@ const salixUrl = ref();
|
||||||
const entityId = computed(() => {
|
const entityId = computed(() => {
|
||||||
return $props.id || route.params.id;
|
return $props.id || route.params.id;
|
||||||
});
|
});
|
||||||
|
|
||||||
const filter = {
|
const filter = {
|
||||||
include: [
|
where: { id: entityId },
|
||||||
{
|
fields: ['id', 'nickname', 'name', 'role'],
|
||||||
relation: 'client',
|
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
|
||||||
scope: {
|
|
||||||
include: [
|
|
||||||
{ relation: 'salesPersonUser' },
|
|
||||||
{
|
|
||||||
relation: 'accountsRatio',
|
|
||||||
scope: {
|
|
||||||
fields: ['accountingRate'],
|
|
||||||
limit: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
relation: 'accountState',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
relation: 'ticket',
|
|
||||||
scope: {
|
|
||||||
include: [
|
|
||||||
{ relation: 'zone' },
|
|
||||||
{
|
|
||||||
relation: 'address',
|
|
||||||
scope: {
|
|
||||||
include: { relation: 'province' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
relation: 'worker',
|
|
||||||
scope: {
|
|
||||||
include: { relation: 'user' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const STATE_COLOR = {
|
|
||||||
pending: 'warning',
|
|
||||||
incomplete: 'info',
|
|
||||||
resolved: 'positive',
|
|
||||||
canceled: 'negative',
|
|
||||||
};
|
|
||||||
function stateColor(code) {
|
|
||||||
return STATE_COLOR[code];
|
|
||||||
}
|
|
||||||
const data = ref(useCardDescription());
|
|
||||||
const setData = (entity) => {
|
|
||||||
if (!entity) return;
|
|
||||||
data.value = useCardDescription(entity.client.name, entity.id);
|
|
||||||
state.set('AccountDescriptor', entity);
|
|
||||||
};
|
|
||||||
onMounted(async () => {
|
|
||||||
salixUrl.value = await getUrl('');
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CardDescriptor
|
<CardDescriptor
|
||||||
ref="descriptor"
|
ref="descriptor"
|
||||||
:url="`Accounts/${entityId}`"
|
:url="`VnUsers/preview`"
|
||||||
:filter="filter"
|
:filter="filter"
|
||||||
module="Account"
|
module="Account"
|
||||||
:title="data.title"
|
|
||||||
:subtitle="data.subtitle"
|
|
||||||
@on-fetch="setData"
|
@on-fetch="setData"
|
||||||
data-key="accountData"
|
data-key="accountData"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,256 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import CrudModel from 'components/CrudModel.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
|
import { tMobile } from 'composables/tMobile';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const accountDevelopmentForm = ref();
|
||||||
|
const accountReasons = ref([]);
|
||||||
|
const accountResults = ref([]);
|
||||||
|
const accountResponsibles = ref([]);
|
||||||
|
const accountRedeliveries = ref([]);
|
||||||
|
const workers = ref([]);
|
||||||
|
const selected = ref([]);
|
||||||
|
const saveButtonRef = ref();
|
||||||
|
|
||||||
|
const developmentsFilter = {
|
||||||
|
fields: [
|
||||||
|
'id',
|
||||||
|
'accountFk',
|
||||||
|
'accountReasonFk',
|
||||||
|
'accountResultFk',
|
||||||
|
'accountResponsibleFk',
|
||||||
|
'workerFk',
|
||||||
|
'accountRedeliveryFk',
|
||||||
|
],
|
||||||
|
where: {
|
||||||
|
accountFk: route.params.id,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
name: 'accountReason',
|
||||||
|
label: t('Reason'),
|
||||||
|
field: (row) => row.accountReasonFk,
|
||||||
|
sortable: true,
|
||||||
|
options: accountReasons.value,
|
||||||
|
required: true,
|
||||||
|
model: 'accountReasonFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'description',
|
||||||
|
tabIndex: 1,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'accountResult',
|
||||||
|
label: t('Result'),
|
||||||
|
field: (row) => row.accountResultFk,
|
||||||
|
sortable: true,
|
||||||
|
options: accountResults.value,
|
||||||
|
required: true,
|
||||||
|
model: 'accountResultFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'description',
|
||||||
|
tabIndex: 2,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'accountResponsible',
|
||||||
|
label: t('Responsible'),
|
||||||
|
field: (row) => row.accountResponsibleFk,
|
||||||
|
sortable: true,
|
||||||
|
options: accountResponsibles.value,
|
||||||
|
required: true,
|
||||||
|
model: 'accountResponsibleFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'description',
|
||||||
|
tabIndex: 3,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'worker',
|
||||||
|
label: t('Worker'),
|
||||||
|
field: (row) => row.workerFk,
|
||||||
|
sortable: true,
|
||||||
|
options: workers.value,
|
||||||
|
model: 'workerFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'nickname',
|
||||||
|
tabIndex: 4,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'accountRedelivery',
|
||||||
|
label: t('Redelivery'),
|
||||||
|
field: (row) => row.accountRedeliveryFk,
|
||||||
|
sortable: true,
|
||||||
|
options: accountRedeliveries.value,
|
||||||
|
required: true,
|
||||||
|
model: 'accountRedeliveryFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'description',
|
||||||
|
tabIndex: 5,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="AccountReasons"
|
||||||
|
order="description"
|
||||||
|
@on-fetch="(data) => (accountReasons = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="AccountResults"
|
||||||
|
order="description"
|
||||||
|
@on-fetch="(data) => (accountResults = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="AccountResponsibles"
|
||||||
|
order="description"
|
||||||
|
@on-fetch="(data) => (accountResponsibles = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="AccountRedeliveries"
|
||||||
|
order="description"
|
||||||
|
@on-fetch="(data) => (accountRedeliveries = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Workers/search"
|
||||||
|
:where="{ active: 1 }"
|
||||||
|
order="name ASC"
|
||||||
|
@on-fetch="(data) => (workers = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<CrudModel
|
||||||
|
data-key="AccountDevelopments"
|
||||||
|
url="AccountDevelopments"
|
||||||
|
model="accountDevelopment"
|
||||||
|
:filter="developmentsFilter"
|
||||||
|
ref="accountDevelopmentForm"
|
||||||
|
:data-required="{ accountFk: route.params.id }"
|
||||||
|
v-model:selected="selected"
|
||||||
|
auto-load
|
||||||
|
@save-changes="$router.push(`/account/${route.params.id}/action`)"
|
||||||
|
:default-save="false"
|
||||||
|
>
|
||||||
|
<template #body="{ rows }">
|
||||||
|
<QTable
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
row-key="$index"
|
||||||
|
selection="multiple"
|
||||||
|
v-model:selected="selected"
|
||||||
|
:grid="$q.screen.lt.md"
|
||||||
|
table-header-class="text-left"
|
||||||
|
>
|
||||||
|
<template #body-cell="{ row, col }">
|
||||||
|
<QTd
|
||||||
|
auto-width
|
||||||
|
@keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
|
||||||
|
>
|
||||||
|
<VnSelect
|
||||||
|
v-model="row[col.model]"
|
||||||
|
:options="col.options"
|
||||||
|
:option-value="col.optionValue"
|
||||||
|
:option-label="col.optionLabel"
|
||||||
|
:autofocus="col.tabIndex == 1"
|
||||||
|
input-debounce="0"
|
||||||
|
hide-selected
|
||||||
|
>
|
||||||
|
<template #option="scope" v-if="col.name == 'worker'">
|
||||||
|
<QItem v-bind="scope.itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
|
||||||
|
<QItemLabel caption>
|
||||||
|
{{ scope.opt?.nickname }}
|
||||||
|
{{ scope.opt?.code }}
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #item="props">
|
||||||
|
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
|
||||||
|
<QCard
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
@keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
|
||||||
|
>
|
||||||
|
<QCardSection>
|
||||||
|
<QCheckbox v-model="props.selected" dense />
|
||||||
|
</QCardSection>
|
||||||
|
<QSeparator />
|
||||||
|
<QList dense>
|
||||||
|
<QItem v-for="col in props.cols" :key="col.name">
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
:label="col.label"
|
||||||
|
v-model="props.row[col.model]"
|
||||||
|
:options="col.options"
|
||||||
|
:option-value="col.optionValue"
|
||||||
|
:option-label="col.optionLabel"
|
||||||
|
dense
|
||||||
|
input-debounce="0"
|
||||||
|
:autofocus="col.tabIndex == 1"
|
||||||
|
hide-selected
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</QList>
|
||||||
|
</QCard>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</QTable>
|
||||||
|
</template>
|
||||||
|
<template #moreAfterActions>
|
||||||
|
<QBtn
|
||||||
|
:label="tMobile('globals.save')"
|
||||||
|
ref="saveButtonRef"
|
||||||
|
color="primary"
|
||||||
|
icon="save"
|
||||||
|
:disable="!accountDevelopmentForm?.hasChanges"
|
||||||
|
@click="accountDevelopmentForm?.onSubmit"
|
||||||
|
:title="t('globals.save')"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</CrudModel>
|
||||||
|
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
||||||
|
<QBtn
|
||||||
|
fab
|
||||||
|
color="primary"
|
||||||
|
icon="add"
|
||||||
|
@keydown.tab.prevent="saveButtonRef.$el.focus()"
|
||||||
|
@click="accountDevelopmentForm.insert()"
|
||||||
|
/>
|
||||||
|
</QPageSticky>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.grid-style-transition {
|
||||||
|
transition: transform 0.28s, background-color 0.28s;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Reason: Motivo
|
||||||
|
Result: Consecuencia
|
||||||
|
Responsible: Responsable
|
||||||
|
Worker: Trabajador
|
||||||
|
Redelivery: Devolución
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,256 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import CrudModel from 'components/CrudModel.vue';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import VnSelect from 'components/common/VnSelect.vue';
|
||||||
|
import { tMobile } from 'composables/tMobile';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const accountDevelopmentForm = ref();
|
||||||
|
const accountReasons = ref([]);
|
||||||
|
const accountResults = ref([]);
|
||||||
|
const accountResponsibles = ref([]);
|
||||||
|
const accountRedeliveries = ref([]);
|
||||||
|
const workers = ref([]);
|
||||||
|
const selected = ref([]);
|
||||||
|
const saveButtonRef = ref();
|
||||||
|
|
||||||
|
const developmentsFilter = {
|
||||||
|
fields: [
|
||||||
|
'id',
|
||||||
|
'accountFk',
|
||||||
|
'accountReasonFk',
|
||||||
|
'accountResultFk',
|
||||||
|
'accountResponsibleFk',
|
||||||
|
'workerFk',
|
||||||
|
'accountRedeliveryFk',
|
||||||
|
],
|
||||||
|
where: {
|
||||||
|
accountFk: route.params.id,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
name: 'accountReason',
|
||||||
|
label: t('Reason'),
|
||||||
|
field: (row) => row.accountReasonFk,
|
||||||
|
sortable: true,
|
||||||
|
options: accountReasons.value,
|
||||||
|
required: true,
|
||||||
|
model: 'accountReasonFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'description',
|
||||||
|
tabIndex: 1,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'accountResult',
|
||||||
|
label: t('Result'),
|
||||||
|
field: (row) => row.accountResultFk,
|
||||||
|
sortable: true,
|
||||||
|
options: accountResults.value,
|
||||||
|
required: true,
|
||||||
|
model: 'accountResultFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'description',
|
||||||
|
tabIndex: 2,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'accountResponsible',
|
||||||
|
label: t('Responsible'),
|
||||||
|
field: (row) => row.accountResponsibleFk,
|
||||||
|
sortable: true,
|
||||||
|
options: accountResponsibles.value,
|
||||||
|
required: true,
|
||||||
|
model: 'accountResponsibleFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'description',
|
||||||
|
tabIndex: 3,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'worker',
|
||||||
|
label: t('Worker'),
|
||||||
|
field: (row) => row.workerFk,
|
||||||
|
sortable: true,
|
||||||
|
options: workers.value,
|
||||||
|
model: 'workerFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'nickname',
|
||||||
|
tabIndex: 4,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'accountRedelivery',
|
||||||
|
label: t('Redelivery'),
|
||||||
|
field: (row) => row.accountRedeliveryFk,
|
||||||
|
sortable: true,
|
||||||
|
options: accountRedeliveries.value,
|
||||||
|
required: true,
|
||||||
|
model: 'accountRedeliveryFk',
|
||||||
|
optionValue: 'id',
|
||||||
|
optionLabel: 'description',
|
||||||
|
tabIndex: 5,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="AccountReasons"
|
||||||
|
order="description"
|
||||||
|
@on-fetch="(data) => (accountReasons = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="AccountResults"
|
||||||
|
order="description"
|
||||||
|
@on-fetch="(data) => (accountResults = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="AccountResponsibles"
|
||||||
|
order="description"
|
||||||
|
@on-fetch="(data) => (accountResponsibles = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="AccountRedeliveries"
|
||||||
|
order="description"
|
||||||
|
@on-fetch="(data) => (accountRedeliveries = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Workers/search"
|
||||||
|
:where="{ active: 1 }"
|
||||||
|
order="name ASC"
|
||||||
|
@on-fetch="(data) => (workers = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<CrudModel
|
||||||
|
data-key="AccountDevelopments"
|
||||||
|
url="AccountDevelopments"
|
||||||
|
model="accountDevelopment"
|
||||||
|
:filter="developmentsFilter"
|
||||||
|
ref="accountDevelopmentForm"
|
||||||
|
:data-required="{ accountFk: route.params.id }"
|
||||||
|
v-model:selected="selected"
|
||||||
|
auto-load
|
||||||
|
@save-changes="$router.push(`/account/${route.params.id}/action`)"
|
||||||
|
:default-save="false"
|
||||||
|
>
|
||||||
|
<template #body="{ rows }">
|
||||||
|
<QTable
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
row-key="$index"
|
||||||
|
selection="multiple"
|
||||||
|
v-model:selected="selected"
|
||||||
|
:grid="$q.screen.lt.md"
|
||||||
|
table-header-class="text-left"
|
||||||
|
>
|
||||||
|
<template #body-cell="{ row, col }">
|
||||||
|
<QTd
|
||||||
|
auto-width
|
||||||
|
@keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
|
||||||
|
>
|
||||||
|
<VnSelect
|
||||||
|
v-model="row[col.model]"
|
||||||
|
:options="col.options"
|
||||||
|
:option-value="col.optionValue"
|
||||||
|
:option-label="col.optionLabel"
|
||||||
|
:autofocus="col.tabIndex == 1"
|
||||||
|
input-debounce="0"
|
||||||
|
hide-selected
|
||||||
|
>
|
||||||
|
<template #option="scope" v-if="col.name == 'worker'">
|
||||||
|
<QItem v-bind="scope.itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
|
||||||
|
<QItemLabel caption>
|
||||||
|
{{ scope.opt?.nickname }}
|
||||||
|
{{ scope.opt?.code }}
|
||||||
|
</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #item="props">
|
||||||
|
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
|
||||||
|
<QCard
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
@keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
|
||||||
|
>
|
||||||
|
<QCardSection>
|
||||||
|
<QCheckbox v-model="props.selected" dense />
|
||||||
|
</QCardSection>
|
||||||
|
<QSeparator />
|
||||||
|
<QList dense>
|
||||||
|
<QItem v-for="col in props.cols" :key="col.name">
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelect
|
||||||
|
:label="col.label"
|
||||||
|
v-model="props.row[col.model]"
|
||||||
|
:options="col.options"
|
||||||
|
:option-value="col.optionValue"
|
||||||
|
:option-label="col.optionLabel"
|
||||||
|
dense
|
||||||
|
input-debounce="0"
|
||||||
|
:autofocus="col.tabIndex == 1"
|
||||||
|
hide-selected
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</QList>
|
||||||
|
</QCard>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</QTable>
|
||||||
|
</template>
|
||||||
|
<template #moreAfterActions>
|
||||||
|
<QBtn
|
||||||
|
:label="tMobile('globals.save')"
|
||||||
|
ref="saveButtonRef"
|
||||||
|
color="primary"
|
||||||
|
icon="save"
|
||||||
|
:disable="!accountDevelopmentForm?.hasChanges"
|
||||||
|
@click="accountDevelopmentForm?.onSubmit"
|
||||||
|
:title="t('globals.save')"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</CrudModel>
|
||||||
|
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
||||||
|
<QBtn
|
||||||
|
fab
|
||||||
|
color="primary"
|
||||||
|
icon="add"
|
||||||
|
@keydown.tab.prevent="saveButtonRef.$el.focus()"
|
||||||
|
@click="accountDevelopmentForm.insert()"
|
||||||
|
/>
|
||||||
|
</QPageSticky>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.grid-style-transition {
|
||||||
|
transition: transform 0.28s, background-color 0.28s;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Reason: Motivo
|
||||||
|
Result: Consecuencia
|
||||||
|
Responsible: Responsable
|
||||||
|
Worker: Trabajador
|
||||||
|
Redelivery: Devolución
|
||||||
|
</i18n>
|
||||||
|
|
@ -27,22 +27,6 @@ const $props = defineProps({
|
||||||
});
|
});
|
||||||
|
|
||||||
const entityId = computed(() => $props.id || route.params.id);
|
const entityId = computed(() => $props.id || route.params.id);
|
||||||
const AccountStates = ref([]);
|
|
||||||
const accountUrl = ref();
|
|
||||||
const salixUrl = ref();
|
|
||||||
const accountDmsRef = ref();
|
|
||||||
const accountDmsFilter = ref({
|
|
||||||
include: [
|
|
||||||
{
|
|
||||||
relation: 'dms',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
salixUrl.value = await getUrl('');
|
|
||||||
accountUrl.value = salixUrl.value + `account/${entityId.value}/`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const detailsColumns = ref([
|
const detailsColumns = ref([
|
||||||
{
|
{
|
||||||
|
|
@ -97,16 +81,6 @@ const detailsColumns = ref([
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const STATE_COLOR = {
|
|
||||||
pending: 'warning',
|
|
||||||
incomplete: 'info',
|
|
||||||
resolved: 'positive',
|
|
||||||
canceled: 'negative',
|
|
||||||
};
|
|
||||||
function stateColor(code) {
|
|
||||||
return STATE_COLOR[code];
|
|
||||||
}
|
|
||||||
|
|
||||||
const developmentColumns = ref([
|
const developmentColumns = ref([
|
||||||
{
|
{
|
||||||
name: 'accountReason',
|
name: 'accountReason',
|
||||||
|
|
@ -139,115 +113,43 @@ const developmentColumns = ref([
|
||||||
sortable: true,
|
sortable: true,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const accountDms = ref([]);
|
|
||||||
const multimediaDialog = ref();
|
|
||||||
const multimediaSlide = ref();
|
|
||||||
|
|
||||||
async function getAccountDms() {
|
const filter = {
|
||||||
accountDmsFilter.value.where = { accountFk: entityId.value };
|
where: { id: entityId },
|
||||||
await accountDmsRef.value.fetch();
|
fields: ['id', 'nickname', 'name', 'role'],
|
||||||
}
|
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
|
||||||
|
};
|
||||||
function setAccountDms(data) {
|
|
||||||
accountDms.value = [];
|
|
||||||
data.forEach((media) => {
|
|
||||||
accountDms.value.push({
|
|
||||||
isVideo: media.dms.contentType == 'video/mp4',
|
|
||||||
url: `/api/Accounts/${media.dmsFk}/downloadFile?access_token=${token}`,
|
|
||||||
dmsFk: media.dmsFk,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function openDialog(dmsId) {
|
|
||||||
multimediaSlide.value = dmsId;
|
|
||||||
multimediaDialog.value = true;
|
|
||||||
}
|
|
||||||
async function changeState(value) {
|
|
||||||
await axios.patch(`Accounts/updateAccount/${entityId.value}`, {
|
|
||||||
accountStateFk: value,
|
|
||||||
});
|
|
||||||
router.go(route.fullPath);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<FetchData
|
<CardSummary ref="summary" :url="`VnUsers/preview`" :filter="filter">
|
||||||
url="AccountDms"
|
<!-- <template #header="{ entity: { account } }">
|
||||||
:filter="accountDmsFilter"
|
|
||||||
@on-fetch="(data) => setAccountDms(data)"
|
|
||||||
ref="accountDmsRef"
|
|
||||||
/>
|
|
||||||
<FetchData
|
|
||||||
url="AccountStates"
|
|
||||||
@on-fetch="(data) => (AccountStates = data)"
|
|
||||||
auto-load
|
|
||||||
/>
|
|
||||||
<CardSummary
|
|
||||||
ref="summary"
|
|
||||||
:url="`Accounts/${entityId}/getSummary`"
|
|
||||||
:entity-id="entityId"
|
|
||||||
@on-fetch="getAccountDms"
|
|
||||||
>
|
|
||||||
<template #header="{ entity: { account } }">
|
|
||||||
{{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
|
{{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
|
||||||
</template>
|
</template> -->
|
||||||
<template #header-right>
|
<template #body="{ entity: { account } }">
|
||||||
<QBtnDropdown
|
|
||||||
side
|
|
||||||
top
|
|
||||||
color="black"
|
|
||||||
text-color="white"
|
|
||||||
:label="t('ticket.summary.changeState')"
|
|
||||||
>
|
|
||||||
<QList>
|
|
||||||
<QVirtualScroll
|
|
||||||
style="max-height: 300px"
|
|
||||||
:items="AccountStates"
|
|
||||||
separator
|
|
||||||
v-slot="{ item, index }"
|
|
||||||
>
|
|
||||||
<QItem
|
|
||||||
:key="index"
|
|
||||||
dense
|
|
||||||
clickable
|
|
||||||
v-close-popup
|
|
||||||
@click="changeState(item.id)"
|
|
||||||
>
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel>{{ item.description }}</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</QVirtualScroll>
|
|
||||||
</QList>
|
|
||||||
</QBtnDropdown>
|
|
||||||
</template>
|
|
||||||
<template #body="{ entity: { account, salesAccounted, developments } }">
|
|
||||||
<QCard class="vn-one">
|
<QCard class="vn-one">
|
||||||
<VnTitle
|
{{ account }}
|
||||||
:url="`#/account/${entityId}/basic-data`"
|
<!-- <VnTitle :text="t('account.pageTitles.basicData')" /> -->
|
||||||
:text="t('account.pageTitles.basicData')"
|
<!-- <VnLv
|
||||||
/>
|
|
||||||
<VnLv
|
|
||||||
:label="t('account.summary.created')"
|
:label="t('account.summary.created')"
|
||||||
:value="toDate(account.created)"
|
:value="toDate(account.created)"
|
||||||
/>
|
/> -->
|
||||||
<VnLv :label="t('account.summary.state')">
|
<!-- <VnLv :label="t('account.summary.state')">
|
||||||
<template #value>
|
<template #value>
|
||||||
<QChip :color="stateColor(account.accountState.code)" dense>
|
<QChip :color="stateColor(account.accountState.code)" dense>
|
||||||
{{ account.accountState.description }}
|
{{ account.accountState.description }}
|
||||||
</QChip>
|
</QChip>
|
||||||
</template>
|
</template>
|
||||||
</VnLv>
|
</VnLv> -->
|
||||||
<VnLv :label="t('globals.salesPerson')">
|
<!-- <VnLv :label="t('globals.salesPerson')">
|
||||||
<template #value>
|
<template #value>
|
||||||
<VnUserLink
|
<VnUserLink
|
||||||
:name="account.client?.salesPersonUser?.name"
|
:name="account.client?.salesPersonUser?.name"
|
||||||
:worker-id="account.client?.salesPersonFk"
|
:worker-id="account.client?.salesPersonFk"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</VnLv>
|
</VnLv> -->
|
||||||
<VnLv :label="t('account.summary.attendedBy')">
|
<!-- <VnLv :label="t('account.summary.attendedBy')">
|
||||||
<template #value>
|
<template #value>
|
||||||
<VnUserLink
|
<VnUserLink
|
||||||
:name="account.worker?.user?.nickname"
|
:name="account.worker?.user?.nickname"
|
||||||
|
|
@ -265,178 +167,8 @@ async function changeState(value) {
|
||||||
<VnLv
|
<VnLv
|
||||||
:label="t('account.basicData.pickup')"
|
:label="t('account.basicData.pickup')"
|
||||||
:value="`${dashIfEmpty(account.pickup)}`"
|
:value="`${dashIfEmpty(account.pickup)}`"
|
||||||
/>
|
/> -->
|
||||||
</QCard>
|
</QCard>
|
||||||
<QCard class="vn-three">
|
|
||||||
<VnTitle
|
|
||||||
:url="`#/account/${entityId}/notes`"
|
|
||||||
:text="t('account.summary.notes')"
|
|
||||||
/>
|
|
||||||
</QCard>
|
|
||||||
<QCard class="vn-two" v-if="salesAccounted.length > 0">
|
|
||||||
<VnTitle
|
|
||||||
:url="`#/account/${entityId}/lines`"
|
|
||||||
:text="t('account.summary.details')"
|
|
||||||
/>
|
|
||||||
<QTable
|
|
||||||
:columns="detailsColumns"
|
|
||||||
:rows="salesAccounted"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
:rows-per-page-options="[0]"
|
|
||||||
hide-bottom
|
|
||||||
>
|
|
||||||
<template #header="props">
|
|
||||||
<QTr :props="props">
|
|
||||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
{{ t(col.label) }}
|
|
||||||
</QTh>
|
|
||||||
</QTr>
|
|
||||||
</template>
|
|
||||||
<template #body="props">
|
|
||||||
<QTr :props="props">
|
|
||||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
<span v-if="col.name != 'description'">{{
|
|
||||||
t(col.value)
|
|
||||||
}}</span>
|
|
||||||
<QBtn
|
|
||||||
v-if="col.name == 'description'"
|
|
||||||
flat
|
|
||||||
color="blue"
|
|
||||||
>{{ col.value }}</QBtn
|
|
||||||
>
|
|
||||||
|
|
||||||
</QTh>
|
|
||||||
</QTr>
|
|
||||||
</template>
|
|
||||||
</QTable>
|
|
||||||
</QCard>
|
|
||||||
<QCard class="vn-two" v-if="accountDms.length > 0">
|
|
||||||
<VnTitle
|
|
||||||
:url="`#/account/${entityId}/photos`"
|
|
||||||
:text="t('account.summary.photos')"
|
|
||||||
/>
|
|
||||||
<div class="container">
|
|
||||||
<div
|
|
||||||
class="multimedia-container"
|
|
||||||
v-for="(media, index) of accountDms"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="relative-position">
|
|
||||||
<QIcon
|
|
||||||
name="play_circle"
|
|
||||||
color="primary"
|
|
||||||
size="xl"
|
|
||||||
class="absolute-center zindex"
|
|
||||||
v-if="media.isVideo"
|
|
||||||
@click.stop="openDialog(media.dmsFk)"
|
|
||||||
>
|
|
||||||
<QTooltip>Video</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
<QCard class="multimedia relative-position">
|
|
||||||
<QImg
|
|
||||||
:src="media.url"
|
|
||||||
class="rounded-borders cursor-pointer fit"
|
|
||||||
@click="openDialog(media.dmsFk)"
|
|
||||||
v-if="!media.isVideo"
|
|
||||||
>
|
|
||||||
</QImg>
|
|
||||||
<video
|
|
||||||
:src="media.url"
|
|
||||||
class="rounded-borders cursor-pointer fit"
|
|
||||||
muted="muted"
|
|
||||||
v-if="media.isVideo"
|
|
||||||
@click="openDialog(media.dmsFk)"
|
|
||||||
/>
|
|
||||||
</QCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</QCard>
|
|
||||||
<QCard class="vn-two" v-if="developments.length > 0">
|
|
||||||
<VnTitle
|
|
||||||
:url="accountUrl + 'development'"
|
|
||||||
:text="t('account.summary.development')"
|
|
||||||
/>
|
|
||||||
<QTable
|
|
||||||
:columns="developmentColumns"
|
|
||||||
:rows="developments"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
:rows-per-page-options="[0]"
|
|
||||||
hide-bottom
|
|
||||||
>
|
|
||||||
<template #header="props">
|
|
||||||
<QTr :props="props">
|
|
||||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
{{ t(col.label) }}
|
|
||||||
</QTh>
|
|
||||||
</QTr>
|
|
||||||
</template>
|
|
||||||
</QTable>
|
|
||||||
</QCard>
|
|
||||||
<QCard class="vn-max">
|
|
||||||
<VnTitle
|
|
||||||
:url="accountUrl + 'action'"
|
|
||||||
:text="t('account.summary.actions')"
|
|
||||||
/>
|
|
||||||
<div id="slider-container" class="q-px-xl q-py-md">
|
|
||||||
<QSlider
|
|
||||||
v-model="account.responsibility"
|
|
||||||
label
|
|
||||||
:label-value="t('account.summary.responsibility')"
|
|
||||||
label-always
|
|
||||||
color="var()"
|
|
||||||
markers
|
|
||||||
:marker-labels="[
|
|
||||||
{ value: 1, label: t('account.summary.company') },
|
|
||||||
{ value: 5, label: t('account.summary.person') },
|
|
||||||
]"
|
|
||||||
:min="1"
|
|
||||||
:max="5"
|
|
||||||
readonly
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</QCard>
|
|
||||||
<QDialog
|
|
||||||
v-model="multimediaDialog"
|
|
||||||
transition-show="slide-up"
|
|
||||||
transition-hide="slide-down"
|
|
||||||
>
|
|
||||||
<QToolbar class="absolute zindex close-button">
|
|
||||||
<QSpace />
|
|
||||||
<QBtn icon="close" color="primary" round dense v-close-popup />
|
|
||||||
</QToolbar>
|
|
||||||
<QCarousel
|
|
||||||
swipeable
|
|
||||||
animated
|
|
||||||
v-model="multimediaSlide"
|
|
||||||
arrows
|
|
||||||
class="fit"
|
|
||||||
>
|
|
||||||
<QCarouselSlide
|
|
||||||
v-for="media of accountDms"
|
|
||||||
:key="media.dmsFk"
|
|
||||||
:name="media.dmsFk"
|
|
||||||
>
|
|
||||||
<QImg
|
|
||||||
:src="media.url"
|
|
||||||
class="fit"
|
|
||||||
fit="scale-down"
|
|
||||||
v-if="!media.isVideo"
|
|
||||||
/>
|
|
||||||
<video
|
|
||||||
class="q-ma-none fit"
|
|
||||||
v-if="media.isVideo"
|
|
||||||
controls
|
|
||||||
muted
|
|
||||||
autoplay
|
|
||||||
>
|
|
||||||
<source :src="media.url" type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
</QCarouselSlide>
|
|
||||||
</QCarousel>
|
|
||||||
</QDialog>
|
|
||||||
</template>
|
</template>
|
||||||
</CardSummary>
|
</CardSummary>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -9,4 +9,8 @@ account:
|
||||||
samba: Samba
|
samba: Samba
|
||||||
acls: ACLs
|
acls: ACLs
|
||||||
connections: Connections
|
connections: Connections
|
||||||
|
inheritedRoles: Inherited Roles
|
||||||
|
privileges: Privileges
|
||||||
|
mailAlias: Mail Alias
|
||||||
|
mailForwarding: Mail Forwarding
|
||||||
search: Search user
|
search: Search user
|
||||||
|
|
|
||||||
|
|
@ -9,4 +9,9 @@ account:
|
||||||
samba: Samba
|
samba: Samba
|
||||||
acls: ACLs
|
acls: ACLs
|
||||||
connections: Conexiones
|
connections: Conexiones
|
||||||
|
inheritedRoles: Roles heredados
|
||||||
|
privileges: Privilegios
|
||||||
|
mailAlias: Alias de correo
|
||||||
|
mailForwarding: Reenvío de correo
|
||||||
|
|
||||||
search: Buscar usuario
|
search: Buscar usuario
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,9 @@ export default {
|
||||||
],
|
],
|
||||||
card: [
|
card: [
|
||||||
'AccountBasicData',
|
'AccountBasicData',
|
||||||
|
'AccountInheritedRoles',
|
||||||
'AccountMailForwarding',
|
'AccountMailForwarding',
|
||||||
|
'AccountMailAlias',
|
||||||
'AccountPrivileges',
|
'AccountPrivileges',
|
||||||
'AccountLog',
|
'AccountLog',
|
||||||
],
|
],
|
||||||
|
|
@ -146,21 +148,41 @@ export default {
|
||||||
import('src/pages/Account/Card/AccountBasicData.vue'),
|
import('src/pages/Account/Card/AccountBasicData.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'AccountMailForwarding',
|
name: 'AccountInheritedRoles',
|
||||||
path: 'mailForwarding',
|
path: 'inherited-oles',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'pda',
|
title: 'inheritedRoles',
|
||||||
icon: 'phone_android',
|
icon: 'group',
|
||||||
|
},
|
||||||
|
component: () =>
|
||||||
|
import('src/pages/Account/Card/AccountInheritedRoles.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AccountMailForwarding',
|
||||||
|
path: 'mail-forwarding',
|
||||||
|
meta: {
|
||||||
|
title: 'mailForwarding',
|
||||||
|
icon: 'forward',
|
||||||
},
|
},
|
||||||
component: () =>
|
component: () =>
|
||||||
import('src/pages/Account/Card/AccountMailForwarding.vue'),
|
import('src/pages/Account/Card/AccountMailForwarding.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'AccountMailAlias',
|
||||||
|
path: 'mail-alias',
|
||||||
|
meta: {
|
||||||
|
title: 'mailAlias',
|
||||||
|
icon: 'email',
|
||||||
|
},
|
||||||
|
component: () =>
|
||||||
|
import('src/pages/Account/Card/AccountMailAlias.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'AccountPrivileges',
|
name: 'AccountPrivileges',
|
||||||
path: 'privileges',
|
path: 'privileges',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'notifications',
|
title: 'privileges',
|
||||||
icon: 'notifications',
|
icon: 'badge',
|
||||||
},
|
},
|
||||||
component: () =>
|
component: () =>
|
||||||
import('src/pages/Account/Card/AccountPrivileges.vue'),
|
import('src/pages/Account/Card/AccountPrivileges.vue'),
|
||||||
|
|
@ -170,7 +192,7 @@ export default {
|
||||||
path: 'log',
|
path: 'log',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'log',
|
title: 'log',
|
||||||
icon: 'vn:log',
|
icon: 'history',
|
||||||
},
|
},
|
||||||
component: () => import('src/pages/Account/Card/AccountLog.vue'),
|
component: () => import('src/pages/Account/Card/AccountLog.vue'),
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue