feat(VnTable): refs #6825 remove field prop. Add actions in table
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
c4441eed1f
commit
ac77fea3d7
|
|
@ -18,12 +18,12 @@ function stopEventPropagation(event) {
|
|||
<template>
|
||||
<span
|
||||
v-for="col of columns"
|
||||
:key="col.field"
|
||||
:key="col.name"
|
||||
@click="stopEventPropagation($event)"
|
||||
class="cursor-text"
|
||||
>
|
||||
<QChip
|
||||
v-if="col.chip.condition(row[col.field], row)"
|
||||
v-if="col.chip.condition(row[col.name], row)"
|
||||
:title="col.label"
|
||||
:class="
|
||||
col.chip.color
|
||||
|
|
@ -33,7 +33,7 @@ function stopEventPropagation(event) {
|
|||
dense
|
||||
square
|
||||
>
|
||||
<span v-if="!col.chip.icon">{{ row[col.field] }}</span>
|
||||
<span v-if="!col.chip.icon">{{ row[col.name] }}</span>
|
||||
<QIcon v-else :name="col.chip.icon" color="primary-light" />
|
||||
</QChip>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ const defaultComponents = {
|
|||
const value = computed(() => {
|
||||
return $props.column.format
|
||||
? $props.column.format($props.row, dashIfEmpty)
|
||||
: dashIfEmpty($props.row[$props.column.field]);
|
||||
: dashIfEmpty($props.row[$props.column.name]);
|
||||
});
|
||||
|
||||
const col = computed(() => {
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ const components = {
|
|||
attrs: {
|
||||
dense: true,
|
||||
class: 'q-pa-sm q-mt-md',
|
||||
'toggle-indeterminate': true,
|
||||
},
|
||||
forceAttrs: {
|
||||
label: $props.showTitle ? '' : $props.column.label,
|
||||
|
|
@ -89,7 +90,7 @@ const components = {
|
|||
async function addFilter(value) {
|
||||
if (value && typeof value === 'object') value = model.value;
|
||||
value = value == '' ? null : value;
|
||||
let field = columnFilter.value?.field ?? $props.column.field;
|
||||
let field = columnFilter.value?.name ?? $props.column.name;
|
||||
const toFilter = { [field]: value };
|
||||
|
||||
await arrayData.addFilter({ params: toFilter });
|
||||
|
|
@ -110,7 +111,7 @@ function alignRow() {
|
|||
{{ column.label }}
|
||||
</div>
|
||||
<div
|
||||
v-if="columnFilter !== false && column.field != 'tableActions'"
|
||||
v-if="columnFilter !== false && column.name != 'tableActions'"
|
||||
class="row no-wrap"
|
||||
:class="alignRow()"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ function splitColumns(columns) {
|
|||
};
|
||||
|
||||
for (const col of columns) {
|
||||
if (col.field == 'tableActions') splittedColumns.value.actions = col;
|
||||
if (col.name == 'tableActions') splittedColumns.value.actions = col;
|
||||
if (col.chip) splittedColumns.value.chips.push(col);
|
||||
if (col.isTitle) splittedColumns.value.title = col;
|
||||
if (col.create) splittedColumns.value.create.push(col);
|
||||
|
|
@ -104,9 +104,8 @@ function splitColumns(columns) {
|
|||
if (splittedColumns.value.columnChips.length)
|
||||
splittedColumns.value.columns.unshift({
|
||||
align: 'left',
|
||||
field: 'status',
|
||||
label: t('status'),
|
||||
name: 'status',
|
||||
name: 'tableStatus',
|
||||
columnFilter: false,
|
||||
});
|
||||
}
|
||||
|
|
@ -156,7 +155,7 @@ defineExpose({
|
|||
:data-key="$attrs['data-key']"
|
||||
v-for="col of splittedColumns.columns"
|
||||
:key="col.id"
|
||||
v-model="params[col.columnFilter?.field ?? col.field]"
|
||||
v-model="params[col.columnFilter?.name ?? col.name]"
|
||||
/>
|
||||
</template>
|
||||
<slot
|
||||
|
|
@ -197,13 +196,13 @@ defineExpose({
|
|||
<slot name="top-left"></slot>
|
||||
</template>
|
||||
<template #top-right>
|
||||
<QBtn
|
||||
<!-- <QBtn
|
||||
icon="visibility"
|
||||
title="asd"
|
||||
class="bg-vn-section-color q-mr-md"
|
||||
dense
|
||||
v-if="mode == 'table'"
|
||||
/>
|
||||
/> -->
|
||||
<QBtnToggle
|
||||
v-model="mode"
|
||||
toggle-color="primary"
|
||||
|
|
@ -225,11 +224,11 @@ defineExpose({
|
|||
:column="col"
|
||||
:show-title="true"
|
||||
:data-key="$attrs['data-key']"
|
||||
v-model="params[col.columnFilter?.field ?? col.field]"
|
||||
v-model="params[col.columnFilter?.name ?? col.name]"
|
||||
/>
|
||||
</QTh>
|
||||
</template>
|
||||
<template #body-cell-status="{ col, row }">
|
||||
<template #body-cell-tableStatus="{ col, row }">
|
||||
<QTd auto-width :class="`text-${col.align ?? 'left'}`">
|
||||
<VnTableChip :columns="splittedColumns.columnChips" :row="row">
|
||||
<template #afterChip>
|
||||
|
|
@ -248,11 +247,27 @@ defineExpose({
|
|||
:column="col"
|
||||
:row="row"
|
||||
:is-editable="false"
|
||||
v-model="row[col.field]"
|
||||
v-model="row[col.name]"
|
||||
component-prop="columnField"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-tableActions="{ col, row }">
|
||||
<QTd auto-width :class="`text-${col.align ?? 'left'} `">
|
||||
<QBtn
|
||||
v-for="(btn, index) of col.actions"
|
||||
:key="index"
|
||||
:title="btn.title"
|
||||
:icon="btn.icon"
|
||||
class="q-px-sm"
|
||||
flat
|
||||
:class="
|
||||
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
|
||||
"
|
||||
@click="btn.action(row)"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #item="{ row, colsMap }">
|
||||
<component
|
||||
:is="$props.redirect ? 'router-link' : 'span'"
|
||||
|
|
@ -289,17 +304,17 @@ defineExpose({
|
|||
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
|
||||
>
|
||||
<span
|
||||
:title="row[splittedColumns.title.field]"
|
||||
:title="row[splittedColumns.title.name]"
|
||||
@click="stopEventPropagation($event)"
|
||||
class="cursor-text"
|
||||
>{{ row[splittedColumns.title.field] }}</span
|
||||
>{{ row[splittedColumns.title.name] }}</span
|
||||
>
|
||||
</QCardSection>
|
||||
<!-- Fields -->
|
||||
<QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
|
||||
<div
|
||||
v-for="col of splittedColumns.visible"
|
||||
:key="col.field"
|
||||
:key="col.name"
|
||||
class="fields"
|
||||
>
|
||||
<VnLv :label="`${col.label}:`">
|
||||
|
|
@ -321,7 +336,8 @@ defineExpose({
|
|||
@click="stopEventPropagation($event)"
|
||||
>
|
||||
<QBtn
|
||||
v-for="(btn, index) of colsMap.tableActions.actions"
|
||||
v-for="(btn, index) of splittedColumns.actions
|
||||
.actions"
|
||||
:key="index"
|
||||
:title="btn.title"
|
||||
:icon="btn.icon"
|
||||
|
|
@ -357,11 +373,11 @@ defineExpose({
|
|||
<div class="grid-create">
|
||||
<VnTableColumn
|
||||
v-for="column of splittedColumns.create"
|
||||
:key="column.field"
|
||||
:key="column.name"
|
||||
:column="column"
|
||||
:row="{}"
|
||||
default="input"
|
||||
v-model="data[column.field]"
|
||||
v-model="data[column.name]"
|
||||
/>
|
||||
<slot name="more-create-dialog" :data="data" />
|
||||
</div>
|
||||
|
|
@ -478,6 +494,10 @@ defineExpose({
|
|||
}
|
||||
}
|
||||
}
|
||||
.sticky {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vn-label-value {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span v-for="toComponent of componentArray" :key="toComponent.field">
|
||||
<span v-for="toComponent of componentArray" :key="toComponent.name">
|
||||
<component
|
||||
v-if="toComponent?.component"
|
||||
:is="mix(toComponent).component"
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ const isLoading = ref(false);
|
|||
async function search() {
|
||||
store.filter.where = {};
|
||||
isLoading.value = true;
|
||||
console.log('params.value: ', params.value);
|
||||
const filter = { ...userParams.value, ...params.value };
|
||||
store.userParamsChanged = true;
|
||||
store.filter.skip = 0;
|
||||
|
|
|
|||
|
|
@ -7,281 +7,28 @@ import VnLocation from 'src/components/common/VnLocation.vue';
|
|||
import CustomerSummary from '../Card/CustomerSummary.vue';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
|
||||
import { QBtn, QIcon } from 'quasar';
|
||||
import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
|
||||
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
|
||||
|
||||
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toDate } from 'src/filters';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const stateStore = useStateStore();
|
||||
|
||||
onMounted(() => {
|
||||
const filteredColumns = columns.value.filter(
|
||||
(col) => col.name !== 'actions' && col.name !== 'customerStatus'
|
||||
);
|
||||
allColumnNames.value = filteredColumns.map((col) => col.name);
|
||||
});
|
||||
|
||||
const selectedCustomerId = ref(0);
|
||||
const selectedSalesPersonId = ref(0);
|
||||
const allColumnNames = ref([]);
|
||||
const visibleColumns = ref([]);
|
||||
const postcodesOptions = ref([]);
|
||||
const tableRef = ref();
|
||||
|
||||
const tableColumnComponents = {
|
||||
customerStatus: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: !prop.row.isActive
|
||||
? 'vn:disabled'
|
||||
: prop.row.isActive && prop.row.isFreezed
|
||||
? 'vn:frozen'
|
||||
: '',
|
||||
color: 'primary',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
id: {
|
||||
component: QBtn,
|
||||
props: () => ({ flat: true, color: 'blue' }),
|
||||
event: (prop) => {
|
||||
selectCustomerId(prop.row.id);
|
||||
},
|
||||
},
|
||||
name: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
socialName: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
fi: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
salesPersonFk: {
|
||||
component: QBtn,
|
||||
props: () => ({ flat: true, color: 'blue' }),
|
||||
event: (prop) => selectSalesPersonId(prop.row.salesPersonFk),
|
||||
},
|
||||
credit: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
creditInsurance: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
phone: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
mobile: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
street: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
countryFk: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
provinceFk: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
city: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
postcode: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
email: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
created: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
businessTypeFk: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
payMethodFk: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
sageTaxTypeFk: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
sageTransactionTypeFk: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
isActive: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.isActive ? 'check' : 'close',
|
||||
color: prop.row.isActive ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
isVies: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.isVies ? 'check' : 'close',
|
||||
color: prop.row.isVies ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
isTaxDataChecked: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.isTaxDataChecked ? 'check' : 'close',
|
||||
color: prop.row.isTaxDataChecked ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
isEqualizated: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.isEqualizated ? 'check' : 'close',
|
||||
color: prop.row.isEqualizated ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
isFreezed: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.isFreezed ? 'check' : 'close',
|
||||
color: prop.row.isFreezed ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
hasToInvoice: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.hasToInvoice ? 'check' : 'close',
|
||||
color: prop.row.hasToInvoice ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
hasToInvoiceByAddress: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.hasToInvoiceByAddress ? 'check' : 'close',
|
||||
color: prop.row.hasToInvoiceByAddress ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
isToBeMailed: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.isToBeMailed ? 'check' : 'close',
|
||||
color: prop.row.isToBeMailed ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
hasLcr: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.hasLcr ? 'check' : 'close',
|
||||
color: prop.row.hasLcr ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
hasCoreVnl: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.hasCoreVnl ? 'check' : 'close',
|
||||
color: prop.row.hasCoreVnl ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
hasSepaVnl: {
|
||||
component: QIcon,
|
||||
props: (prop) => ({
|
||||
name: prop.row.hasSepaVnl ? 'check' : 'close',
|
||||
color: prop.row.hasSepaVnl ? 'positive' : 'negative',
|
||||
size: 'sm',
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
actions: {
|
||||
component: CustomerExtendedListActions,
|
||||
props: (prop) => ({
|
||||
id: prop.row.id,
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
};
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const redirectToCreateView = (row) => {
|
||||
router.push({
|
||||
name: 'TicketList',
|
||||
query: {
|
||||
params: JSON.stringify({
|
||||
clientFk: row.id,
|
||||
}),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
field: 'id',
|
||||
label: t('customer.extendedList.tableVisibleColumns.id'),
|
||||
name: 'id',
|
||||
label: t('customer.extendedList.tableVisibleColumns.id'),
|
||||
chip: {
|
||||
condition: () => true,
|
||||
},
|
||||
isId: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
field: 'search',
|
||||
name: 'search',
|
||||
attrs: {
|
||||
url: 'Clients',
|
||||
fields: ['id', 'name'],
|
||||
|
|
@ -290,7 +37,6 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'name',
|
||||
label: t('customer.extendedList.tableVisibleColumns.name'),
|
||||
name: 'name',
|
||||
isTitle: true,
|
||||
|
|
@ -298,21 +44,19 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'socialName',
|
||||
name: 'socialName',
|
||||
label: t('customer.extendedList.tableVisibleColumns.socialName'),
|
||||
isTitle: true,
|
||||
create: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'fi',
|
||||
label: t('customer.extendedList.tableVisibleColumns.fi'),
|
||||
name: 'fi',
|
||||
create: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'salesPersonFk',
|
||||
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
|
||||
name: 'salesPersonFk',
|
||||
component: 'select',
|
||||
|
|
@ -329,19 +73,16 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'credit',
|
||||
label: t('customer.extendedList.tableVisibleColumns.credit'),
|
||||
name: 'credit',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'creditInsurance',
|
||||
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
|
||||
name: 'creditInsurance',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'phone',
|
||||
label: t('customer.extendedList.tableVisibleColumns.phone'),
|
||||
name: 'phone',
|
||||
cardVisible: true,
|
||||
|
|
@ -354,59 +95,50 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'mobile',
|
||||
label: t('customer.extendedList.tableVisibleColumns.mobile'),
|
||||
name: 'mobile',
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'street',
|
||||
label: t('customer.extendedList.tableVisibleColumns.street'),
|
||||
name: 'street',
|
||||
create: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'country',
|
||||
label: t('customer.extendedList.tableVisibleColumns.countryFk'),
|
||||
name: 'countryFk',
|
||||
name: 'country',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'province',
|
||||
label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
|
||||
name: 'provinceFk',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'city',
|
||||
label: t('customer.extendedList.tableVisibleColumns.city'),
|
||||
name: 'city',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'postcode',
|
||||
label: t('customer.extendedList.tableVisibleColumns.postcode'),
|
||||
name: 'postcode',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'email',
|
||||
label: t('customer.extendedList.tableVisibleColumns.email'),
|
||||
name: 'email',
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'created',
|
||||
label: t('customer.extendedList.tableVisibleColumns.created'),
|
||||
name: 'created',
|
||||
format: ({ created }) => toDate(created),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'businessTypeFk',
|
||||
label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
|
||||
name: 'businessTypeFk',
|
||||
create: true,
|
||||
|
|
@ -423,25 +155,21 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'payMethod',
|
||||
label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
|
||||
name: 'payMethodFk',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'sageTaxType',
|
||||
label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
|
||||
name: 'sageTaxTypeFk',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'sageTransactionType',
|
||||
label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
|
||||
name: 'sageTransactionTypeFk',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'isActive',
|
||||
label: t('customer.extendedList.tableVisibleColumns.isActive'),
|
||||
name: 'isActive',
|
||||
chip: {
|
||||
|
|
@ -453,21 +181,18 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'isVies',
|
||||
label: t('customer.extendedList.tableVisibleColumns.isVies'),
|
||||
name: 'isVies',
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'isTaxDataChecked',
|
||||
label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
|
||||
name: 'isTaxDataChecked',
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'isEqualizated',
|
||||
label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
|
||||
name: 'isEqualizated',
|
||||
component: 'checkbox',
|
||||
|
|
@ -475,7 +200,6 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'isFreezed',
|
||||
label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
|
||||
name: 'isFreezed',
|
||||
chip: {
|
||||
|
|
@ -487,49 +211,42 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'hasToInvoice',
|
||||
label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
|
||||
name: 'hasToInvoice',
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'hasToInvoiceByAddress',
|
||||
label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
|
||||
name: 'hasToInvoiceByAddress',
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'isToBeMailed',
|
||||
label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
|
||||
name: 'isToBeMailed',
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'hasLcr',
|
||||
label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
|
||||
name: 'hasLcr',
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'hasCoreVnl',
|
||||
label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
|
||||
name: 'hasCoreVnl',
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'hasSepaVnl',
|
||||
label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
|
||||
name: 'hasSepaVnl',
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
field: 'tableActions',
|
||||
label: '',
|
||||
name: 'tableActions',
|
||||
actions: [
|
||||
|
|
@ -548,18 +265,18 @@ const columns = computed(() => [
|
|||
},
|
||||
]);
|
||||
|
||||
const stopEventPropagation = (event, col) => {
|
||||
if (!['id', 'salesPersonFk'].includes(col.name)) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const redirectToCreateView = (row) => {
|
||||
router.push({
|
||||
name: 'TicketList',
|
||||
query: {
|
||||
params: JSON.stringify({
|
||||
clientFk: row.id,
|
||||
}),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const navigateToTravelId = (id) => router.push({ path: `/customer/${id}` });
|
||||
|
||||
const selectCustomerId = (id) => (selectedCustomerId.value = id);
|
||||
|
||||
const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
|
||||
|
||||
function handleLocation(data, location) {
|
||||
const { town, code, provinceFk, countryFk } = location ?? {};
|
||||
data.postcode = code;
|
||||
|
|
@ -570,45 +287,6 @@ function handleLocation(data, location) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#actions-append">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<QBtn
|
||||
flat
|
||||
@click="stateStore.toggleRightDrawer()"
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</div>
|
||||
</Teleport></template
|
||||
>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<CustomerExtendedListFilter
|
||||
v-if="visibleColumns.length !== 0"
|
||||
data-key="CustomerExtendedList"
|
||||
:visible-columns="visibleColumns"
|
||||
/>
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<!-- <VnSubToolbar>
|
||||
<template #st-actions>
|
||||
<TableVisibleColumns
|
||||
:all-columns="allColumnNames"
|
||||
table-code="clientsDetail"
|
||||
labels-traductions-path="customer.extendedList.tableVisibleColumns"
|
||||
@on-config-saved="
|
||||
visibleColumns = ['customerStatus', ...$event, 'actions']
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</VnSubToolbar> -->
|
||||
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="CustomerExtendedList"
|
||||
|
|
@ -621,18 +299,6 @@ function handleLocation(data, location) {
|
|||
formInitialData: {
|
||||
active: true,
|
||||
isEqualizated: false,
|
||||
name: 'FFFF',
|
||||
socialName: 'FFFFFF',
|
||||
fi: '58233369H',
|
||||
salesPersonFk: 15,
|
||||
street: 'FASD',
|
||||
businessTypeFk: 'individual',
|
||||
email: 'adddssssd@asd.es',
|
||||
userName: 'asdasdax',
|
||||
postcode: '46680',
|
||||
city: 'Algemesi',
|
||||
provinceFk: 1,
|
||||
countryFk: 1,
|
||||
},
|
||||
}"
|
||||
order="id DESC"
|
||||
|
|
@ -660,52 +326,6 @@ function handleLocation(data, location) {
|
|||
>
|
||||
</VnLocation>
|
||||
</template>
|
||||
<!-- redirect="customer" -->
|
||||
<!--
|
||||
default-mode="table"
|
||||
<template #body-cell="{ col, value }">
|
||||
<QTd @click="stopEventPropagation($event, col)">
|
||||
{{ value }}
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-id="props">
|
||||
<QTd @click="stopEventPropagation($event, props.col)">
|
||||
<component
|
||||
:is="tableColumnComponents[props.col.name].component"
|
||||
class="col-content"
|
||||
v-bind="tableColumnComponents[props.col.name].props(props)"
|
||||
@click="tableColumnComponents[props.col.name].event(props)"
|
||||
>
|
||||
<CustomerDescriptorProxy :id="props.row.id" />
|
||||
{{ props.row.id }}
|
||||
</component>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-salesPersonFk="props">
|
||||
<QTd @click="stopEventPropagation($event, props.col)">
|
||||
<component
|
||||
v-if="props.row.salesPerson"
|
||||
class="col-content"
|
||||
:is="tableColumnComponents[props.col.name].component"
|
||||
v-bind="tableColumnComponents[props.col.name].props(props)"
|
||||
@click="tableColumnComponents[props.col.name].event(props)"
|
||||
>
|
||||
<WorkerDescriptorProxy :id="props.row.salesPersonFk" />
|
||||
{{ props.row.salesPerson }}
|
||||
</component>
|
||||
<span class="col-content" v-else>-</span>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-actions="props">
|
||||
<QTd @click="stopEventPropagation($event, props.col)">
|
||||
<component
|
||||
:is="tableColumnComponents[props.col.name].component"
|
||||
class="col-content"
|
||||
v-bind="tableColumnComponents[props.col.name].props(props)"
|
||||
@click="tableColumnComponents[props.col.name].event(props)"
|
||||
/>
|
||||
</QTd>
|
||||
</template> -->
|
||||
</VnTable>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue