refactor: refs #8316 used VnSection and VnCardBeta
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
93047ab179
commit
0b15c28449
|
|
@ -1,38 +1,12 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import VnCard from 'components/common/VnCard.vue';
|
||||
import VnCardBeta from 'components/common/VnCardBeta.vue';
|
||||
import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
|
||||
import OrderFilter from './OrderFilter.vue';
|
||||
import OrderSearchbar from './OrderSearchbar.vue';
|
||||
import OrderCatalogFilter from './OrderCatalogFilter.vue';
|
||||
const config = {
|
||||
OrderCatalog: OrderCatalogFilter,
|
||||
};
|
||||
const route = useRoute();
|
||||
|
||||
const routeName = computed(() => route.name);
|
||||
const customRouteRedirectName = computed(() => {
|
||||
const route = config[routeName.value];
|
||||
if (route) return null;
|
||||
return 'OrderList';
|
||||
});
|
||||
const customFilterPanel = computed(() => {
|
||||
const filterPanel = config[routeName.value] ?? OrderFilter;
|
||||
return filterPanel;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VnCard
|
||||
<VnCardBeta
|
||||
data-key="Order"
|
||||
base-url="Orders"
|
||||
:descriptor="OrderDescriptor"
|
||||
:filter-panel="customFilterPanel"
|
||||
:search-data-key="customRouteRedirectName"
|
||||
>
|
||||
<template #searchbar>
|
||||
<OrderSearchbar />
|
||||
</template>
|
||||
</VnCard>
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,15 +8,14 @@ import { useRoute } from 'vue-router';
|
|||
|
||||
import axios from 'axios';
|
||||
import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
|
||||
import OrderSearchbar from './Card/OrderSearchbar.vue';
|
||||
import OrderFilter from './Card/OrderFilter.vue';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
|
||||
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnSection from 'src/components/common/VnSection.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
|
@ -24,6 +23,8 @@ const tableRef = ref();
|
|||
const agencyList = ref([]);
|
||||
const route = useRoute();
|
||||
const addressOptions = ref([]);
|
||||
const dataKey='OrderList';
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -178,117 +179,126 @@ const getDateColor = (date) => {
|
|||
if (difference < 0) return 'bg-success';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<OrderSearchbar />
|
||||
<RightMenu>
|
||||
<VnSection
|
||||
:data-key="dataKey"
|
||||
:columns="columns"
|
||||
prefix="order"
|
||||
:array-data-props="{
|
||||
url: 'Orders/filter',
|
||||
order: ['landed DESC', 'clientFk ASC', 'id DESC'],
|
||||
exprBuilder,
|
||||
}"
|
||||
>
|
||||
<template #right-panel>
|
||||
<OrderFilter data-key="OrderList" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="OrderList"
|
||||
url="Orders/filter"
|
||||
:order="['landed DESC', 'clientFk ASC', 'id DESC']"
|
||||
:create="{
|
||||
urlCreate: 'Orders/new',
|
||||
title: t('module.cerateOrder'),
|
||||
onDataSaved: (url) => {
|
||||
tableRef.redirect(`${url}/catalog`);
|
||||
},
|
||||
formInitialData: {
|
||||
active: true,
|
||||
addressId: null,
|
||||
clientFk: null,
|
||||
},
|
||||
}"
|
||||
:user-params="{ showEmpty: false }"
|
||||
:columns="columns"
|
||||
:right-search="false"
|
||||
redirect="order"
|
||||
>
|
||||
<template #column-clientFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row?.clientName }}
|
||||
<CustomerDescriptorProxy :id="row?.clientFk" />
|
||||
</span>
|
||||
</template>
|
||||
<template #column-salesPersonFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row?.name }}
|
||||
<WorkerDescriptorProxy :id="row?.salesPersonFk" />
|
||||
</span>
|
||||
</template>
|
||||
<template #column-landed="{ row }">
|
||||
<span v-if="getDateColor(row.landed)">
|
||||
<QChip :class="getDateColor(row.landed)" dense square>
|
||||
{{ toDate(row?.landed) }}
|
||||
</QChip>
|
||||
</span>
|
||||
</template>
|
||||
<template #more-create-dialog="{ data }">
|
||||
<VnSelect
|
||||
url="Clients"
|
||||
:include="{ relation: 'addresses' }"
|
||||
v-model="data.clientFk"
|
||||
:label="t('module.customer')"
|
||||
@update:model-value="(id) => fetchClientAddress(id, data)"
|
||||
<template #body>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
:data-key="dataKey"
|
||||
:create="{
|
||||
urlCreate: 'Orders/new',
|
||||
title: t('module.cerateOrder'),
|
||||
onDataSaved: (url) => {
|
||||
tableRef.redirect(`${url}/catalog`);
|
||||
},
|
||||
formInitialData: {
|
||||
active: true,
|
||||
addressId: null,
|
||||
clientFk: null,
|
||||
},
|
||||
}"
|
||||
:user-params="{ showEmpty: false }"
|
||||
:columns="columns"
|
||||
:right-search="false"
|
||||
redirect="order"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt.name }}
|
||||
</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ `#${scope.opt.id}` }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<template #column-clientFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row?.clientName }}
|
||||
<CustomerDescriptorProxy :id="row?.clientFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnSelect
|
||||
v-model="data.addressId"
|
||||
:options="addressOptions"
|
||||
:label="t('module.address')"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
@update:model-value="() => fetchAgencies(data)"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel
|
||||
:class="{
|
||||
'color-vn-label': !scope.opt?.isActive,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
`${
|
||||
!scope.opt?.isActive
|
||||
? t('basicData.inactive')
|
||||
: ''
|
||||
} `
|
||||
}}
|
||||
{{ scope.opt?.nickname }}: {{ scope.opt?.street }},
|
||||
{{ scope.opt?.city }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<template #column-salesPersonFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row?.name }}
|
||||
<WorkerDescriptorProxy :id="row?.salesPersonFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInputDate
|
||||
v-model="data.landed"
|
||||
:label="t('module.landed')"
|
||||
@update:model-value="() => fetchAgencies(data)"
|
||||
/>
|
||||
<VnSelect
|
||||
v-model="data.agencyModeId"
|
||||
:label="t('module.agency')"
|
||||
:options="agencyList"
|
||||
option-value="agencyModeFk"
|
||||
option-label="agencyMode"
|
||||
/>
|
||||
<template #column-landed="{ row }">
|
||||
<span v-if="getDateColor(row.landed)">
|
||||
<QChip :class="getDateColor(row.landed)" dense square>
|
||||
{{ toDate(row?.landed) }}
|
||||
</QChip>
|
||||
</span>
|
||||
</template>
|
||||
<template #more-create-dialog="{ data }">
|
||||
<VnSelect
|
||||
url="Clients"
|
||||
:include="{ relation: 'addresses' }"
|
||||
v-model="data.clientFk"
|
||||
:label="t('module.customer')"
|
||||
@update:model-value="(id) => fetchClientAddress(id, data)"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt.name }}
|
||||
</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ `#${scope.opt.id}` }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnSelect
|
||||
v-model="data.addressId"
|
||||
:options="addressOptions"
|
||||
:label="t('module.address')"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
@update:model-value="() => fetchAgencies(data)"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel
|
||||
:class="{
|
||||
'color-vn-label': !scope.opt?.isActive,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
`${
|
||||
!scope.opt?.isActive
|
||||
? t('basicData.inactive')
|
||||
: ''
|
||||
} `
|
||||
}}
|
||||
{{ scope.opt?.nickname }}: {{ scope.opt?.street }},
|
||||
{{ scope.opt?.city }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInputDate
|
||||
v-model="data.landed"
|
||||
:label="t('module.landed')"
|
||||
@update:model-value="() => fetchAgencies(data)"
|
||||
/>
|
||||
<VnSelect
|
||||
v-model="data.agencyModeId"
|
||||
:label="t('module.agency')"
|
||||
:options="agencyList"
|
||||
option-value="agencyModeFk"
|
||||
option-label="agencyMode"
|
||||
/>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
</VnTable>
|
||||
</VnSection>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -21,3 +21,6 @@ lines:
|
|||
image: Image
|
||||
params:
|
||||
tagGroups: Tags
|
||||
order:
|
||||
search: Search orders
|
||||
searchInfo: You can search orders by ticket id
|
||||
|
|
|
|||
|
|
@ -21,3 +21,6 @@ lines:
|
|||
image: Imagen
|
||||
params:
|
||||
tagGroups: Tags
|
||||
order:
|
||||
search: Buscar pedido
|
||||
searchInfo: Buscar pedidos por el número de ticket
|
||||
|
|
|
|||
|
|
@ -1,35 +1,102 @@
|
|||
import { RouterView } from 'vue-router';
|
||||
|
||||
const orderCard = {
|
||||
name: 'OrderCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/Order/Card/OrderCard.vue'),
|
||||
redirect: { name: 'OrderSummary' },
|
||||
meta: {
|
||||
menu: [
|
||||
'OrderBasicData',
|
||||
'OrderCatalog',
|
||||
'OrderVolume',
|
||||
'OrderLines',
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'summary',
|
||||
name: 'OrderSummary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
icon: 'launch',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderSummary.vue'),
|
||||
},
|
||||
{
|
||||
path: 'basic-data',
|
||||
name: 'OrderBasicData',
|
||||
meta: {
|
||||
title: 'basicData',
|
||||
icon: 'vn:settings',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderBasicData.vue'),
|
||||
},
|
||||
{
|
||||
path: 'catalog',
|
||||
name: 'OrderCatalog',
|
||||
meta: {
|
||||
title: 'catalog',
|
||||
icon: 'vn:basket',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderCatalog.vue'),
|
||||
},
|
||||
{
|
||||
path: 'volume',
|
||||
name: 'OrderVolume',
|
||||
meta: {
|
||||
title: 'volume',
|
||||
icon: 'vn:volume',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderVolume.vue'),
|
||||
},
|
||||
{
|
||||
path: 'line',
|
||||
name: 'OrderLines',
|
||||
meta: {
|
||||
title: 'lines',
|
||||
icon: 'vn:lines',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderLines.vue'),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default {
|
||||
path: '/order',
|
||||
name: 'Order',
|
||||
path: '/order',
|
||||
meta: {
|
||||
title: 'order',
|
||||
icon: 'vn:basket',
|
||||
moduleName: 'Order',
|
||||
keyBinding: 'o',
|
||||
menu: ['OrderList'],
|
||||
},
|
||||
component: RouterView,
|
||||
redirect: { name: 'OrderMain' },
|
||||
menus: {
|
||||
main: ['OrderList'],
|
||||
card: ['OrderBasicData', 'OrderCatalog', 'OrderVolume', 'OrderLines'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'OrderMain',
|
||||
path: '',
|
||||
component: () => import('src/components/common/VnModule.vue'),
|
||||
redirect: { name: 'OrderList' },
|
||||
redirect: { name: 'OrderIndexMain' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'OrderList',
|
||||
meta: {
|
||||
title: 'orderList',
|
||||
icon: 'view_list',
|
||||
},
|
||||
path: '',
|
||||
name: 'OrderIndexMain',
|
||||
redirect: { name: 'OrderList' },
|
||||
component: () => import('src/pages/Order/OrderList.vue'),
|
||||
children: [
|
||||
{
|
||||
name: 'OrderList',
|
||||
path: 'list',
|
||||
meta: {
|
||||
title: 'orderList',
|
||||
icon: 'view_list',
|
||||
},
|
||||
},
|
||||
orderCard,
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
|
|
@ -42,58 +109,5 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'OrderCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/Order/Card/OrderCard.vue'),
|
||||
redirect: { name: 'OrderSummary' },
|
||||
children: [
|
||||
{
|
||||
name: 'OrderSummary',
|
||||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
icon: 'launch',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderSummary.vue'),
|
||||
},
|
||||
{
|
||||
name: 'OrderBasicData',
|
||||
path: 'basic-data',
|
||||
meta: {
|
||||
title: 'basicData',
|
||||
icon: 'vn:settings',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderBasicData.vue'),
|
||||
},
|
||||
{
|
||||
name: 'OrderCatalog',
|
||||
path: 'catalog',
|
||||
meta: {
|
||||
title: 'catalog',
|
||||
icon: 'vn:basket',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderCatalog.vue'),
|
||||
},
|
||||
{
|
||||
name: 'OrderVolume',
|
||||
path: 'volume',
|
||||
meta: {
|
||||
title: 'volume',
|
||||
icon: 'vn:volume',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderVolume.vue'),
|
||||
},
|
||||
{
|
||||
name: 'OrderLines',
|
||||
path: 'line',
|
||||
meta: {
|
||||
title: 'lines',
|
||||
icon: 'vn:lines',
|
||||
},
|
||||
component: () => import('src/pages/Order/Card/OrderLines.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
Loading…
Reference in New Issue