Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

...

Bloque de código
languagejs
import fwjsSimplePagefromfwjsServicePage '@/app/shared/components/fwjsServicePage.vue';

...

Bloque de código
languagexml
<fwjs-service-page
  mainServiceId:inferIcon="20601_16600true"
  :mainServiceName="$t('mis_tramites_titulo')"
  :serviceName="$t('tramites_activos_titulo')"
  :breadcrumbs="breadcrumbs"
  :loading="loading"
  subicon="fad fa-list-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 título -->
  </template> 

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

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

...

PropiedadTipoDefaultDescripción
mainServiceNameString
Nombre del servicio principal. 
serviceNameString
Nombre del servicio.
loadingBooleanfalseBoolean que indica si se está esperando a que se complete la carga inicial de la pantalla.
breadcrumbsArray


Migas de pan del servicio.

La miga de pan será un objeto con la siguiente estructura:

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


iconString


Icono del servicio.
subiconString


Subicono del servicio.
categoryNumber

0

Identificador de la categoría del servicio.
categoryNameString


Nombre de la categoría del servicio.

inferIconBooleanmainServiceIdString

false

Boolean que indica si se debe inferir el icono Identificador del servicio principal. Si se indica, se recuperará de la API el icono, subicono y nombre de categoría.Internamente, para inferir el icono, se llama al método que recupera los datos del servicio a partir de la URL. 

Slots

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

...

Ancla
Peculiaridades
Peculiaridades
Peculiaridades

1. Nombre  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 del servicio principal en la propiedad "mainServiceName".

...

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:

Bloque de código
languagejs
titlemis-tramites (module.routes.js)
collapsetrue
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".

...