update: 添加分页导航视图

modules/ibizlab-generator-core/src/main/java/cn/ibizlab/codegen/model/PageModel.java

@@ -9,6 +9,7 @@ import lombok.experimental.Accessors;
 import net.ibizsys.model.app.view.IPSAppView;
 import net.ibizsys.model.control.IPSControl;
 import net.ibizsys.model.control.expbar.IPSExpBar;
+import net.ibizsys.model.control.expbar.IPSTabExpPanel;
 import net.ibizsys.model.control.toolbar.IPSDETBUIActionItem;
 import net.ibizsys.model.control.toolbar.IPSDEToolbar;
 import net.ibizsys.model.view.IPSUIAction;
@@ -51,7 +52,7 @@ public class PageModel extends BaseModel{
                 }
                 String ctrlType = ctrl.getControl().getControlType();
                 //  树导航栏获取数据部件
-                if ("TREEEXPBAR".equals(ctrlType) || "DASHBOARD".equals(ctrlType)) {
+                if ("TREEEXPBAR".equals(ctrlType) || "DASHBOARD".equals(ctrlType) || "TABEXPPANEL".equals(ctrlType)) {
                     List<IPSControl> controls = new ArrayList<>();
                     switch (ctrlType) {
                         case "TREEEXPBAR":
@@ -60,6 +61,9 @@ public class PageModel extends BaseModel{
                         case "DASHBOARD":
                             controls = ((IPSDashboard)item).getPSControls();
                             break;
+                        case "TABEXPPANEL":
+                            controls = ((IPSTabExpPanel)item).getPSControls();
+                            break;
                     }
                     if (controls.size() > 0) {
                         for (IPSControl control : controls) {

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/views/index.ts

@@ -10,4 +10,5 @@ export * from './mpickup-view'
 export * from './pickup-grid-view'
 export * from './tree-exp-view'
 export * from './tree-view'
-export * from './portal-view'
\ No newline at end of file
+export * from './portal-view'
+export * from './tab-exp-view'

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/views/main-view/main-view.ts

@@ -52,19 +52,6 @@ export class MainView extends ViewBase {
     AppActionService.getInstance().execute(uIAction, inputParam);
   }
 
-  /**
-   * 处理部件事件
-   *
-   * @param {IActionParam} actionParam
-   * @memberof MainView
-   */
-  public onCtrlEvent(actionParam: IActionParam) { 
-    const { tag, action, data } = actionParam;
-    if (Object.is(action, 'closeView')) {
-      this.closeView();
-    }
-  }
-
   /**
    * @description 安装视图所有功能模块的方法
    * 
@@ -76,7 +63,6 @@ export class MainView extends ViewBase {
       ...superParams,
       xDataControl: this.xDataControl,
       onToolbarEvent: this.onToolbarEvent.bind(this),
-      onCtrlEvent: this.onCtrlEvent.bind(this),
     };
   }
 }

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/views/tab-exp-view/index.ts

+export * from './tab-exp-view-prop';
+export * from './tab-exp-view-state';
+export { TabExpView } from './tab-exp-view';
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/views/tab-exp-view/tab-exp-view-prop.ts

+import { ExpViewProps } from "@core";
+
+/**
+ * @description 树导航视图props
+ * @export
+ * @interface TabExpViewProps
+ * @extends {ExpViewProps}
+ */
+export interface TabExpViewProps extends ExpViewProps {}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/views/tab-exp-view/tab-exp-view-state.ts

+import { ExpViewState } from "@core";
+
+/**
+ * @description 树导航视图状态
+ * @export
+ * @interface TabExpViewState
+ * @extends {ExpViewState}
+ */
+export interface TabExpViewState extends ExpViewState {}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/views/tab-exp-view/tab-exp-view.ts

+import { ExpView } from "@core";
+import { TabExpViewProps } from "./tab-exp-view-prop";
+import { TabExpViewState } from "./tab-exp-view-state";
+
+/**
+ * @description 分页导航视图
+ * @export
+ * @class TabExpView
+ * @extends {ExpView}
+ */
+export class TabExpView extends ExpView {
+
+  /**
+   * @description 视图状态
+   * @type {TabExpViewState}
+   * @memberof TabExpView
+   */
+  public declare state: TabExpViewState;
+
+  /**
+   * @description 安装视图所有功能模块的方法
+   * @return {*} 
+   * @memberof TabExpView
+   */
+  public moduleInstall() {
+    const superParams = super.moduleInstall();
+    return {
+      ...superParams
+    };
+  }
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/views/view-base/view-base.ts

@@ -204,6 +204,18 @@ export class ViewBase {
    */
   public useCounterService() { }
 
+  /**
+   * 处理部件事件
+   *
+   * @param {IActionParam} actionParam
+   * @memberof ViewBase
+   */
+   public onCtrlEvent(actionParam: IActionParam) { 
+    const { tag, action, data } = actionParam;
+    if (Object.is(action, 'closeView')) {
+      this.closeView();
+    }
+  }
 
   /**
    * @description 安装视图所有功能模块的方法
@@ -224,7 +236,8 @@ export class ViewBase {
     // 处理视图初始化
     this.useViewInit();
     return {
-      state: this.state
+      state: this.state,
+      onCtrlEvent: this.onCtrlEvent.bind(this),
     };
   }
 }

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/control-base/control-base.ts

@@ -82,6 +82,14 @@ export class ControlBase {
     this.emit('ctrlEvent', { tag: this.props.name, action: 'closeView', data: undefined });
   }
 
+  /**
+   * 处理部件事件
+   *
+   * @param {IActionParam} actionParam
+   * @memberof ControlBase
+   */
+  public onCtrlEvent(actionParam: IActionParam) {}
+
   /**
    * @description 安装部件所有功能模块的方法
    * @param {ControlPropsBase} props 传入的Props
@@ -94,7 +102,8 @@ export class ControlBase {
     this.useControlContextParams();
     return {
       state: this.state,
-      getData: this.getData
+      getData: this.getData.bind(this),
+      onCtrlEvent: this.onCtrlEvent.bind(this),
     };
   }
 }

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/index.ts

@@ -13,3 +13,5 @@ export * from './quick-search-form-control'
 export * from './searchbar-control'
 export * from './dashboard-control'
 export * from './portlet-control'
+export * from './tab-exp-panel-control'
+export * from './tab-view-panel-control'

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/searchbar-control/searchbar-control.ts

@@ -20,8 +20,8 @@ export class SearchBarControl extends MainControl {
    * @param {SearchBarControlProps} props
    * @memberof SearchBarControl
    */
-  public setState(props: SearchBarControlState) {
-    super.setState(props);
+  public setState() {
+    super.setState();
     this.state.filterFields = Object.values(this.state.detailsModel);
     this.state.filterItems = [];
   }
@@ -33,8 +33,8 @@ export class SearchBarControl extends MainControl {
    * @return {*}
    * @memberof SearchBarControl [emit] 事件
    */
-  public moduleInstall(props: SearchBarControlProps, emit?: Function) {
-    const superParams = super.moduleInstall(props, emit);
+  public moduleInstall() {
+    const superParams = super.moduleInstall();
     return {
       ...superParams,
       state: this.state,

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tab-exp-panel-control/index.ts

+export * from './tab-exp-panel-control-prop'
+export * from './tab-exp-panel-control-state'
+export * from './tab-exp-panel-control'
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tab-exp-panel-control/tab-exp-panel-control-prop.ts

+import { IParam, MainControlProps } from "@core";
+
+/**
+ * @description 搜索栏部件的props
+ * @export
+ * @interface TabExpPanelControlProps
+ * @extends {MainControlProps}
+ */
+export interface TabExpPanelControlProps extends MainControlProps {
+
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tab-exp-panel-control/tab-exp-panel-control-state.ts

+import { IParam, MainControlState } from '@core';
+
+/**
+ * @description 搜索栏部件状态
+ * @export
+ * @interface TabExpPanelControlState
+ * @extends {MainControlState}
+ */
+export interface TabExpPanelControlState extends MainControlState {
+  
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tab-exp-panel-control/tab-exp-panel-control.ts

+import { UIUtil, deepCopy, IActionParam, IParam, MainControl, TabExpPanelControlState, TabExpPanelControlProps } from '@core';
+
+/**
+ * @description 分页导航部件
+ * @export
+ * @class TabExpPanelControl
+ * @extends {MainControl}
+ */
+export class TabExpPanelControl extends MainControl {
+
+  /**
+   * @description 部件状态
+   * @type {TabExpPanelControlState}
+   * @memberof TabExpPanelControl
+   */
+  public declare state: TabExpPanelControlState;
+
+  /**
+   * @description 安装部件所有功能模块的方法
+   * @param {TabExpPanelControlProps} props 
+   * @param {Function} [emit]
+   * @return {*}
+   * @memberof TabExpPanelControl [emit] 事件
+   */
+  public moduleInstall() {
+    const superParams = super.moduleInstall();
+    return {
+      ...superParams,
+      state: this.state,
+    };
+  }
+
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tab-view-panel-control/index.ts

+export * from './tab-view-panel-control-prop'
+export * from './tab-view-panel-control-state'
+export * from './tab-view-panel-control'
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tab-view-panel-control/tab-view-panel-control-prop.ts

+import { MainControlProps } from "@core";
+
+/**
+ * @description 选择视图面板部件参数
+ * @export
+ * @interface TabViewPanelControlProps
+ * @extends {MainControlProps}
+ */
+export interface TabViewPanelControlProps extends MainControlProps {
+
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tab-view-panel-control/tab-view-panel-control-state.ts

+import { IParam, MainControlState } from '@core';
+
+/**
+ * @description 选择视图面板通讯对象
+ * @export
+ * @interface TabViewPanelControlState
+ * @extends {MainControlState}
+ */
+export interface TabViewPanelControlState extends MainControlState {
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/widgets/tab-view-panel-control/tab-view-panel-control.ts

+import { IActionParam, MainControl } from '@core';
+import { TabViewPanelControlProps } from './tab-view-panel-control-prop';
+import { TabViewPanelControlState } from './tab-view-panel-control-state';
+
+/**
+ * @description 分页视图面板部件
+ * @export
+ * @class TabViewPanelControl
+ * @extends {MainControl}
+ */
+export class TabViewPanelControl extends MainControl {
+
+  /**
+   * @description 部件状态
+   * @type {FormControlState}
+   * @memberof TabViewPanelControl
+   */
+  public declare state: TabViewPanelControlState;
+
+  /**
+   * @description 安装部件所有功能模块的方法
+   * @return {*} 
+   * @memberof TabViewPanelControl
+   */
+  public moduleInstall() {
+    const superParams = super.moduleInstall();
+    return {
+      ...superParams,
+    };
+  }
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/router/index.ts.hbs

@@ -18,7 +18,13 @@ const routes = [
         {{#if appEntityResource.appDataEntity.allPSAppViews}}
             {{#each appEntityResource.appDataEntity.allPSAppViews as |appView|}}
             {{#if (eq appView.getRefFlag true)}}
-            {{#if (or (eq appView.viewType 'DEEDITVIEW') (eq appView.viewType 'DEGRIDVIEW') (eq appView.viewType 'DETREEEXPVIEW') (eq appView.viewType 'DETREEVIEW'))}}
+            {{#if (or 
+              (eq appView.viewType 'DEEDITVIEW') 
+              (eq appView.viewType 'DEGRIDVIEW') 
+              (eq appView.viewType 'DETREEEXPVIEW') 
+              (eq appView.viewType 'DETREEVIEW') 
+              (eq appView.viewType 'DETABEXPVIEW')
+            ) }}
             {
               path: "{{appEntityResource.path}}/views/{{lowerCase appView.codeName}}",
               meta: {

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/views/{{appModules}}/{{pages@DETABEXPVIEW}}/index.ts.hbs

+import {{page.codeName}} from "./{{spinalCase page.codeName}}.vue";
+
+export default {{page.codeName}};

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/views/{{appModules}}/{{pages@DETABEXPVIEW}}/{{pages@DETABEXPVIEW}}-state.ts.hbs

+export const viewState = {
+{{> @macro/front-end/views/view-base-config.hbs}}
+};
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/views/{{appModules}}/{{pages@DETABEXPVIEW}}/{{pages@DETABEXPVIEW}}.vue.hbs

+<script setup lang="ts">
+import { Subject } from 'rxjs';
+import { PickupView, IActionParam, IParam, IContext } from '@core';
+import { viewState } from './{{spinalCase page.codeName}}-state';
+{{#page.ctrls}}
+{{#eq controlType "TABEXPPANEL"}}
+import { {{codeName}}TabExpPanel } from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-tab-exp-panel';
+{{/eq}}
+{{/page.ctrls}}
+// props声明和默认值处理
+interface Props {
+  context?: IContext;
+  viewParams?: IParam;
+  openType?: "ROUTE" | "MODAL" | "EMBED";
+  viewSubject?: Subject<IActionParam>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  openType:'ROUTE',
+  viewSubject: () => new Subject<IActionParam>()
+})
+
+// emit声明
+interface ViewEmit {
+  (name: "viewEvent", value: IActionParam): void;
+}
+
+const emit = defineEmits<ViewEmit>();
+
+// 安装功能模块，提供状态和能力方法
+const { state, onCancel, onConfirm, onCtrlEvent, selectData } = new PickupView(viewState, props, emit).moduleInstall();
+</script>
+
+<template>
+    <AppPickupViewLayout :class="['app-tab-exp-view', state.viewSysCss]">
+        <template #caption>
+          <AppIconText class="app-view__caption" size="large" :text="state.viewCaption" />
+        </template>
+        {{#page.ctrls}}
+            {{#eq controlType "TOOLBAR"}}
+            <template v-slot:toolbar>
+              <AppToolbar
+                mode="button"
+                name="{{lowerCase codeName}}"
+                :actionModel="state.viewToolbarModel"
+                @onToolbarEvent="onToolbarEvent"/>
+            </template>
+            {{/eq}}
+            {{#eq controlType "TABEXPPANEL"}}
+            <{{codeName}}TabExpPanel
+              name="{{name}}"
+              :context="state.context"
+              :viewParams="state.viewParams"
+              :viewSubject="state.viewSubject"
+              @onCtrlEvent="onCtrlEvent"
+            ></{{codeName}}TabExpPanel>
+            {{/eq}}
+          {{/page.ctrls}}
+    </AppPickupViewLayout>
+</template>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@PICKUPVIEWPANEL}}-pickup-view-panel/{{ctrls@PICKUPVIEWPANEL}}-pickup-view-panel.vue.hbs

@@ -45,6 +45,8 @@ defineExpose({ state, name: '{{ctrl.name}}' });
   <div class="app-pickup-view-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
   {{#if ctrl.embeddedPSAppDEView}}
     <{{ctrl.embeddedPSAppDEView.codeName}}
+      :context="state.context"
+      :viewParams="state.viewParams"
       :isShowButton="state.isShowButton" 
       :selectedData="state.selectedData"
       :viewSubject="state.viewSubject"

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TABEXPPANEL}}-tab-exp-panel/index.ts.hbs

+import {{ctrl.codeName}}TabExpPanel from "./{{spinalCase ctrl.codeName}}-tab-exp-panel.vue";
+
+export { {{ctrl.codeName}}TabExpPanel };

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TABEXPPANEL}}-tab-exp-panel/{{ctrls@TABEXPPANEL}}-tab-exp-panel-state.ts.hbs

+export const ctrlState = {
+  controlCodeName: '{{ctrl.codeName}}',
+  controlName: '{{ctrl.name}}',
+  data: {},
+};
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TABEXPPANEL}}-tab-exp-panel/{{ctrls@TABEXPPANEL}}-tab-exp-panel.vue.hbs

+<script setup lang="ts">
+import { Subject } from 'rxjs';
+import { IActionParam, IParam, ControlAction, TabExpPanelControl, IContext } from '@core';
+import { ctrlState } from './{{spinalCase ctrl.codeName}}-tab-exp-panel-state';
+{{#each ctrl.psControls as |viewPanel| }}
+import { {{codeName}}TabViewPanel } from '@widgets/{{spinalCase viewPanel.psAppDataEntity.codeName}}/{{spinalCase codeName}}-tab-view-panel';
+{{/each}}
+interface Props {
+  name:string,
+  context: IContext;
+  viewParams?: IParam;
+  showBusyIndicator?: boolean;
+  selectedData?: string;
+  viewSubject: Subject<IActionParam>;
+}
+
+const props = withDefaults(defineProps < Props > (), {
+  viewSubject: () => new Subject < IActionParam > (),
+  showBusyIndicator: true,
+})
+
+// emit声明
+interface CtrlEmit {
+  (name: "onCtrlEvent", value: IActionParam): void;
+}
+
+const emit = defineEmits <CtrlEmit> ();
+
+// 安装功能模块，提供状态和能力方法
+const { state, onCtrlEvent } = new TabExpPanelControl(ctrlState, props, emit).moduleInstall();
+
+// 暴露内部状态及能力
+defineExpose({ state, name: '{{ctrl.name}}' });
+</script>
+
+<template>
+
+  <div class="app-tab-exp-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
+  {{#if ctrl.psControls}}
+    <a-tabs class="app-tab-exp-panel__tabs">
+      {{#each ctrl.psControls as |viewPanel| }}
+      <a-tab-pane {{#if viewPanel.psSysCss}}class="{{viewPanel.psSysCss.cssName}}"{{/if}} key="{{viewPanel.codeName}}">
+        <template #tab>
+          <AppIconText {{#if viewPanel.psSysImage}}{{#if viewPanel.psSysImage.cssClass}}:iconClass="{{viewPanel.psSysImage.cssClass}}" {{/if}}{{#if viewPanel.psSysImage.imagePath}}:imgPath="{{viewPanel.psSysImage.imagePath}}" {{/if}}{{/if}}text="{{viewPanel.caption}}"/>
+        </template>
+        <{{viewPanel.codeName}}TabViewPanel
+          name="{{name}}"
+          :context="state.context"
+          :viewParams="state.viewParams"
+          :viewSubject="state.viewSubject"
+          @onCtrlEvent="onCtrlEvent"
+        />
+      </a-tab-pane>
+      {{/each}}
+    </a-tabs>
+  {{else}}
+    <div class="app-tab-exp-panel--empty">视图不存在，请配置分页视图</div>
+  {{/if}}
+  </div>
+</template>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TABVIEWPANEL}}-tab-view-panel/index.ts.hbs

+import {{ctrl.codeName}}TabViewPanel from "./{{spinalCase ctrl.codeName}}-tab-view-panel.vue";
+
+export { {{ctrl.codeName}}TabViewPanel };

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TABVIEWPANEL}}-tab-view-panel/{{ctrls@TABVIEWPANEL}}-tab-view-panel-state.ts.hbs

+export const ctrlState = {
+  controlCodeName: '{{ctrl.codeName}}',
+  controlName: '{{ctrl.name}}',
+  data: {},
+};
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@TABVIEWPANEL}}-tab-view-panel/{{ctrls@TABVIEWPANEL}}-tab-view-panel.vue.hbs

+<script setup lang="ts">
+import { Subject } from 'rxjs';
+import { IActionParam, IParam, ControlAction, TabViewPanelControl, IContext } from '@core';
+import { ctrlState } from './{{spinalCase ctrl.codeName}}-tab-view-panel-state';
+{{#if ctrl.embeddedPSAppDEView}}
+import {{ctrl.embeddedPSAppDEView.codeName}} from '@views/{{spinalCase ctrl.embeddedPSAppDEView.psAppModule.codeName}}/{{spinalCase ctrl.embeddedPSAppDEView.codeName}}';
+{{/if}}
+interface Props {
+  name:string,
+  context: IContext;
+  viewParams?: IParam;
+  showBusyIndicator?: boolean;
+  viewSubject: Subject<IActionParam>;
+}
+
+const props = withDefaults(defineProps < Props > (), {
+  viewSubject: () => new Subject < IActionParam > (),
+  showBusyIndicator: true,
+})
+
+// emit声明
+interface CtrlEmit {
+  (name: "onCtrlEvent", value: IActionParam): void;
+}
+
+const emit = defineEmits <CtrlEmit> ();
+
+// 安装功能模块，提供状态和能力方法
+const { state, onViewEvent } = new TabViewPanelControl(ctrlState, props, emit).moduleInstall();
+
+// 暴露内部状态及能力
+defineExpose({ state, name: '{{ctrl.name}}' });
+</script>
+
+<template>
+
+  <div class="app-tab-view-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
+  {{#if ctrl.embeddedPSAppDEView}}
+    <{{ctrl.embeddedPSAppDEView.codeName}}
+      :context="state.context"
+      :viewParams="state.viewParams"
+      :viewSubject="state.viewSubject"
+      @viewEvent="onViewEvent"
+    />
+    {{else}}
+    <div class="app-tab-view-panel--empty">视图不存在，请配置选择视图</div>
+    {{/if}}
+  </div>
+</template>
\ No newline at end of file