...

import fwjsSimplePagefromfwjsServicePage '@/app/shared/components/fwjsSimplePagefwjsServicePage.vue';

Ejemplo

<fwjs-simpleservice-page
  :titleinferIcon="true"
  :mainServiceName="$t('mis_tramites_titulo')"
  :breadcrumbsserviceName="breadcrumbs$t('tramites_activos_titulo')"
  :loadingbreadcrumbs="loadingbreadcrumbs"
  service-id:loading="20601_16600loading"
  subicon="fad fa-pluslist-ul"
>

   <template v-slot:menu>
    <!-- Contenido del menú lateral-->
  </template>

   <template v-slot:service-name>
	<!-- Si se indica, podrá personalizarse el h1 mostrado en el título -->
  </template> 

  <template v-slot:pageservice-description>
	<!-- Descripción de la página -->
  </template>

  <template v-slot:pageservice-content>
      <!-- Contenido de la página -->
  </template>
</fwjs-simpleservice-page>

Propiedades

{
	title: 'Título de la miga de pan',
	path: 'Path al que irá la miga de pan'
}

Slots

Este componente únicamente tiene los siguientes slots: menu, pageservice-titlename, service-description y pagey service-content.

• menu: En este se tendrán que establecer los enlaces del menú lateral.
• pageservice-titlename: Este slot no es obligatorio. Si se indica, el contenido del slot se establecerá en el punto 2 de la siguiente imagen.
• service-description: En este se establecerá una descripción del servicio que se va a integrar.
• pageservice-content: En este se establecerá el contenido de la página.

...

Ancla
Peculiaridades Peculiaridades

Peculiaridades

1.

...

 Nombre del servicio principal

Si el servicio que vamos a integrar formase parte de un grupo de servicios, se tendría que establecer el nombre de dicho grupo del servicio principal en la propiedad "titlemainServiceName".

El valor de la propiedad "titlemainServiceName" se utilizará en los puntos identificados con un 1 en la imagen anterior. Se usará también en el punto 2 cuando no se establezca la propiedad propiedad "subtitleserviceName".

2. Subtítulo del servicio

Si el servicio que vamos a integrar formase parte de un grupo de servicios, se tendría que establecer el nombre del servicio concreto en la propiedad "subtitleserviceName".

El valor de la propiedad "subtitleserviceName" se utilizará en los puntos identificados con un 2 en la imagen anterior. También se establecerá en el header de la página para evitar problemas de accesibilidad.

...

Hay dos maneras de pintar el icono en la pantalla del servicio que queramos integrar:

Utilizar las propiedades "icon", "category" y "categoryName"

...

Lo ideal sería recuperarlas de portal-api. De modo que, si el icono cambiase, la pantalla se haría eco del cambio.

Utilizar la propiedad "

...

inferIcon"

...

Internamente, recuperará la información del icono y categoría del servicio, llamando

...

al método que recupera la información del servicio partiendo de su URL en portal-api.

Para que infiera correctamente el icono, es necesario modificar el module.routes.js, añadiendo la propiedad "main: true" al route principal del servicio. Por ejemplo, el servicio "Mis trámites" tiene las siguientes rutas:

export default [
  {
    path: '/mis-tramites/',
    name: 'ConsultaMisTramites',
    component: MisTramites,
    meta: {
      requiresAuth: true,
      group: 'eadmin',
      application: 'mis-tramites',
      main: true,
    },
  },
  {
    path: '/mis-tramites/:idAplicacion/:idTramite/',
    name: 'DetalleTramite',
    component: DetalleTramite,
    meta: {
      requiresAuth: true,
      group: 'eadmin',
      application: 'mis-tramites',
    },
  },
  {
    path: '/mis-tramites/nuevo-tramite/',
    name: 'NuevoTramite',
    component: NuevoTramite,
    meta: {
      requiresAuth: true,
      group: 'eadmin',
      application: 'mis-tramites',
    },
  },
];

Cuando se accede a la URL de la tarjeta definida en apium para este servicio, lleva a ruta cuyo name es "ConsultaMisTramites". Por lo tanto, esa sería la principal ("main: true") del servicio de "Mis trámites" (application: "mis-tramites"). 

4. Subicono del servicio

Si el servicio que vamos a integrar formase parte de un grupo de servicios, tendríamos que establecer un icono que resumiese el servicio concreto en la propiedad "subicon".

...

7. Descripción del servicio

En el slot "service-description", se establecerá una pequeña descripción del servicio que se va a integrar (2 o 3 líneas).

8. Contenido del servicio

En el slot "pageservice-content", se establecerá el contenido del servicio que se va a integrar.

...