forked from verdnatura/salix-front
feat: accountRoles
This commit is contained in:
parent
5f607823b7
commit
f6d3e37787
|
|
@ -4,11 +4,11 @@ import { useRouter } from 'vue-router';
|
|||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toDate } from 'filters/index';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import AccountFilter from './AccountFilter.vue';
|
||||
import AccountFilter from '../AccountFilter.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
||||
import AccountSummary from './Card/AccountSummary.vue';
|
||||
import AccountSummary from '../Card/AccountSummary.vue';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const workers = ref();
|
||||
const states = ref();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData url="AccountStates" @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">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
<span>{{ formatFn(tag.value) }}</span>
|
||||
</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.accountResponsibleFk"
|
||||
@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.accountStateFk"
|
||||
@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>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
params:
|
||||
search: Contains
|
||||
clientFk: Customer
|
||||
clientName: Customer
|
||||
salesPersonFk: Salesperson
|
||||
attenderFk: Attender
|
||||
accountResponsibleFk: Responsible
|
||||
accountStateFk: State
|
||||
created: Created
|
||||
myTeam: My team
|
||||
es:
|
||||
params:
|
||||
search: Contiene
|
||||
clientFk: Cliente
|
||||
clientName: Cliente
|
||||
salesPersonFk: Comercial
|
||||
attenderFk: Asistente
|
||||
accountResponsibleFk: Responsable
|
||||
accountStateFk: Estado
|
||||
created: Creada
|
||||
Customer ID: ID cliente
|
||||
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>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
|
||||
import axios from 'axios';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
|
||||
const accountFilter = {
|
||||
fields: [
|
||||
'id',
|
||||
'clientFk',
|
||||
'created',
|
||||
'workerFk',
|
||||
'accountStateFk',
|
||||
'packages',
|
||||
'pickup',
|
||||
],
|
||||
include: [
|
||||
{
|
||||
relation: 'client',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const accountStates = ref([]);
|
||||
const accountStatesCopy = ref([]);
|
||||
const optionsList = ref([]);
|
||||
|
||||
const workersOptions = ref([]);
|
||||
|
||||
function setAccountStates(data) {
|
||||
accountStates.value = data;
|
||||
accountStatesCopy.value = data;
|
||||
}
|
||||
|
||||
async function getEnumValues() {
|
||||
optionsList.value = [{ id: null, description: t('account.basicData.null') }];
|
||||
const { data } = await axios.get(`Applications/get-enum-values`, {
|
||||
params: {
|
||||
schema: 'vn',
|
||||
table: 'account',
|
||||
column: 'pickup',
|
||||
},
|
||||
});
|
||||
for (let value of data)
|
||||
optionsList.value.push({
|
||||
id: value,
|
||||
description: t(`account.basicData.${value}`),
|
||||
});
|
||||
}
|
||||
|
||||
getEnumValues();
|
||||
|
||||
const statesFilter = {
|
||||
options: accountStates,
|
||||
filterFn: (options, value) => {
|
||||
const search = value.toLowerCase();
|
||||
|
||||
if (value === '') return accountStatesCopy.value;
|
||||
|
||||
return options.value.filter((row) => {
|
||||
const description = row.description.toLowerCase();
|
||||
|
||||
return description.indexOf(search) > -1;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<FetchData
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{ where: { role: 'salesPerson' } }"
|
||||
@on-fetch="(data) => (workersOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData url="AccountStates" @on-fetch="setAccountStates" auto-load />
|
||||
<FormModel
|
||||
:url="`Accounts/${route.params.id}`"
|
||||
:url-update="`Accounts/updateAccount/${route.params.id}`"
|
||||
:filter="accountFilter"
|
||||
model="account"
|
||||
auto-load
|
||||
>
|
||||
<template #form="{ data, validate, filter }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.client.name"
|
||||
:label="t('account.basicData.customer')"
|
||||
disable
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInputDate
|
||||
v-model="data.created"
|
||||
:label="t('account.basicData.created')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
:label="t('account.basicData.assignedTo')"
|
||||
v-model="data.workerFk"
|
||||
:options="workersOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
auto-load
|
||||
:rules="validate('account.accountStateFk')"
|
||||
>
|
||||
<template #before>
|
||||
<QAvatar color="orange">
|
||||
<QImg
|
||||
v-if="data.workerFk"
|
||||
:src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
|
||||
spinner-color="white"
|
||||
/>
|
||||
</QAvatar>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</div>
|
||||
<div class="col">
|
||||
<QSelect
|
||||
v-model="data.accountStateFk"
|
||||
:options="accountStates"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
:label="t('account.basicData.state')"
|
||||
map-options
|
||||
use-input
|
||||
@filter="(value, update) => filter(value, update, statesFilter)"
|
||||
:rules="validate('account.accountStateFk')"
|
||||
:input-debounce="0"
|
||||
>
|
||||
</QSelect>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QInput
|
||||
v-model.number="data.packages"
|
||||
:label="t('globals.packages')"
|
||||
:rules="validate('account.packages')"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<QSelect
|
||||
v-model="data.pickup"
|
||||
:options="optionsList"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
:label="t('account.basicData.pickup')"
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
>
|
||||
</QSelect>
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,488 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toDate, toCurrency } from 'src/filters';
|
||||
import CardSummary from 'components/ui/CardSummary.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import { getUrl } from 'src/composables/getUrl';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
||||
import VnTitle from 'src/components/common/VnTitle.vue';
|
||||
import axios from 'axios';
|
||||
import dashIfEmpty from 'src/filters/dashIfEmpty';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
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([
|
||||
{
|
||||
name: 'item',
|
||||
label: 'account.summary.item',
|
||||
field: (row) => row.sale.itemFk,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'landed',
|
||||
label: 'account.summary.landed',
|
||||
field: (row) => row.sale.ticket.landed,
|
||||
format: (value) => toDate(value),
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: 'account.summary.quantity',
|
||||
field: (row) => row.sale.quantity,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'accounted',
|
||||
label: 'account.summary.accounted',
|
||||
field: (row) => row.quantity,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
label: 'globals.description',
|
||||
field: (row) => row.sale.concept,
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
label: 'account.summary.price',
|
||||
field: (row) => row.sale.price,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'discount',
|
||||
label: 'account.summary.discount',
|
||||
field: (row) => row.sale.discount,
|
||||
format: (value) => `${value} %`,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
label: 'account.summary.total',
|
||||
field: ({ sale }) =>
|
||||
toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const STATE_COLOR = {
|
||||
pending: 'warning',
|
||||
incomplete: 'info',
|
||||
resolved: 'positive',
|
||||
canceled: 'negative',
|
||||
};
|
||||
function stateColor(code) {
|
||||
return STATE_COLOR[code];
|
||||
}
|
||||
|
||||
const developmentColumns = ref([
|
||||
{
|
||||
name: 'accountReason',
|
||||
label: 'account.summary.reason',
|
||||
field: (row) => row.accountReason.description,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'accountResult',
|
||||
label: 'account.summary.result',
|
||||
field: (row) => row.accountResult.description,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'accountResponsible',
|
||||
label: 'account.summary.responsible',
|
||||
field: (row) => row.accountResponsible.description,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'worker',
|
||||
label: 'account.summary.worker',
|
||||
field: (row) => row.worker?.user.nickname,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'accountRedelivery',
|
||||
label: 'account.summary.redelivery',
|
||||
field: (row) => row.accountRedelivery.description,
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
const accountDms = ref([]);
|
||||
const multimediaDialog = ref();
|
||||
const multimediaSlide = ref();
|
||||
|
||||
async function getAccountDms() {
|
||||
accountDmsFilter.value.where = { accountFk: entityId.value };
|
||||
await accountDmsRef.value.fetch();
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="AccountDms"
|
||||
: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 }})
|
||||
</template>
|
||||
<template #header-right>
|
||||
<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">
|
||||
<VnTitle
|
||||
:url="`#/account/${entityId}/basic-data`"
|
||||
:text="t('account.pageTitles.basicData')"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('account.summary.created')"
|
||||
:value="toDate(account.created)"
|
||||
/>
|
||||
<VnLv :label="t('account.summary.state')">
|
||||
<template #value>
|
||||
<QChip :color="stateColor(account.accountState.code)" dense>
|
||||
{{ account.accountState.description }}
|
||||
</QChip>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('globals.salesPerson')">
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="account.client?.salesPersonUser?.name"
|
||||
:worker-id="account.client?.salesPersonFk"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('account.summary.attendedBy')">
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
:name="account.worker?.user?.nickname"
|
||||
:worker-id="account.workerFk"
|
||||
/>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('account.summary.customer')">
|
||||
<template #value>
|
||||
<span class="link cursor-pointer">
|
||||
{{ account.client?.name }}
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('account.basicData.pickup')"
|
||||
:value="`${dashIfEmpty(account.pickup)}`"
|
||||
/>
|
||||
</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>
|
||||
</CardSummary>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-dialog__inner--minimized > div {
|
||||
max-width: 80%;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
.multimedia-container {
|
||||
flex: 1 0 21%;
|
||||
}
|
||||
.multimedia {
|
||||
transition: all 0.5s;
|
||||
opacity: 1;
|
||||
height: 250px;
|
||||
|
||||
.q-img {
|
||||
object-fit: cover;
|
||||
background-color: black;
|
||||
}
|
||||
video {
|
||||
object-fit: cover;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.multimedia:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
top: 1%;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.zindex {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.change-state {
|
||||
width: 10%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -51,7 +51,8 @@ export default {
|
|||
title: 'roles',
|
||||
icon: 'group',
|
||||
},
|
||||
component: () => import('src/pages/Account/AccountRoles.vue'),
|
||||
component: () =>
|
||||
import('src/pages/Account/AccountRole/AccountRoles.vue'),
|
||||
},
|
||||
{
|
||||
path: 'alias',
|
||||
|
|
|
|||
Loading…
Reference in New Issue