@ibiz-template/vue3-util 0.2.11 → 0.2.12

package/src/view/common/index.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import { registerViewProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { ViewProvider } from './view.provider';
+import { View } from './view';
+
+export { ViewProvider };
+
+export const IBizView = withInstall(View, function (v: App) {
+  v.component(View.name, View);
+  registerViewProvider('DEFAULT', () => new ViewProvider());
+});

package/src/view/common/view.provider.ts

@@ -0,0 +1,14 @@
+import { IViewProvider } from '@ibiz-template/runtime';
+
+/**
+ * 视图适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewProvider
+ * @implements {IViewProvider}
+ */
+export class ViewProvider implements IViewProvider {
+  component: string = 'IBizView';
+}

package/src/view/common/view.scss

@@ -0,0 +1,38 @@
+$view: (
+  bg-color: getCssVar(color, bg, 1),
+  border-radius: getCssVar(border-radius, medium),
+);
+
+// 视图默认撑满父容器
+@include b(view) {
+  @include set-component-css-var(view, $view);
+
+  width: 100%;
+  height: 100%;
+
+  .#{bem(view)} {
+    background-color: getCssVar(view, bg-color);
+    border-radius: getCssVar(view, border-radius);
+  }
+
+  // 看板视图样式
+  @include b(view-appportalview){
+    background-color: transparent;
+  }
+
+  &.has-top-message,&.has-bottom-message{
+    @include flex(column);
+
+    // 视图消息不压缩
+    > .#{bem(view-message)}{
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+
+    // 视图面板自适应
+    > .#{bem(control-viewlayoutpanel)}{
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+}

package/src/view/common/view.tsx

@@ -0,0 +1,180 @@
+import {
+  getControlsByView,
+  IModal,
+  IViewLayoutPanelController,
+  IViewProvider,
+  ViewController,
+} from '@ibiz-template/runtime';
+import { createUUID } from 'qx-util';
+import { IAppView } from '@ibiz/model-core';
+import {
+  defineComponent,
+  h,
+  PropType,
+  resolveComponent,
+  onActivated,
+  onDeactivated,
+  VNode,
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+} from 'vue';
+import './view.scss';
+import { useNamespace, useViewController } from '../../use';
+
+export const View = defineComponent({
+  name: 'IBizView',
+  props: {
+    context: Object as PropType<IContext>,
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    modelData: { type: Object as PropType<IAppView>, required: true },
+    modal: { type: Object as PropType<IModal> },
+    state: { type: Object as PropType<IData> },
+    provider: { type: Object as PropType<IViewProvider> },
+  },
+  setup() {
+    const ns = useNamespace('view');
+    const c = useViewController((...args) => new ViewController(...args));
+    // 视图部件模型在viewlayoutPanel里面。
+    const controls = getControlsByView(c.model);
+    const { viewType, sysCss, codeName } = c.model;
+    const typeClass = viewType!.toLowerCase();
+    const sysCssName = sysCss?.cssName;
+    const viewClassNames = computed(() => [
+      ns.b(),
+      true && ns.b(typeClass),
+      true && ns.m(codeName),
+      true && sysCssName,
+      c.state.viewMessages.TOP ? 'has-top-message' : '',
+      c.state.viewMessages.BOTTOM ? 'has-bottom-message' : '',
+    ]);
+
+    const onLayoutPanelCreated = (
+      controller: IViewLayoutPanelController,
+    ): void => {
+      c.setLayoutPanel(controller as IViewLayoutPanelController);
+    };
+
+    const container = ref<HTMLElement | null>(null);
+    // todo devtool抽全局
+    const key = createUUID();
+
+    // 临时实现从window上取
+    const devtool = (window as IData).devtool;
+    onMounted(() => {
+      if (devtool) {
+        devtool.registerView(key, c, container);
+      }
+    });
+
+    onUnmounted(() => {
+      if (devtool) {
+        devtool.unRegisterView(key);
+      }
+    });
+
+    onActivated(() => c.onActivated());
+
+    onDeactivated(() => c.onDeactivated());
+
+    const renderViewMessage = (position: 'TOP' | 'BOTTOM' | 'BODY') => {
+      if (c.state.isCreated) {
+        const viewMessages = c.state.viewMessages[position];
+        if (viewMessages?.length) {
+          return (
+            <view-message
+              class={[ns.e(`${position.toLowerCase()}-message`)]}
+              messages={viewMessages}
+            ></view-message>
+          );
+        }
+      }
+      return null;
+    };
+
+    return {
+      c,
+      controls,
+      viewClassNames,
+      container,
+      onLayoutPanelCreated,
+      renderViewMessage,
+    };
+  },
+  render() {
+    let layoutPanel = null;
+    if (this.c.state.isCreated) {
+      // 绘制部件插槽，外部插槽优先
+      const slots: IData = {
+        ...this.$slots,
+      };
+      if (this.controls?.length) {
+        this.controls.forEach(ctrl => {
+          const slotKey = ctrl.name! || ctrl.id!;
+          const ctrlProps = {
+            context: this.c.context,
+            params: this.c.params,
+          };
+          if (this.c.slotProps[slotKey]) {
+            Object.assign(ctrlProps, this.c.slotProps[slotKey]);
+          }
+          // 已经有插槽的不用自己绘制了。
+          const outCtrlSlot = slots[slotKey];
+          if (outCtrlSlot) {
+            slots[slotKey] = (): VNode => {
+              return outCtrlSlot(ctrlProps);
+            };
+            return;
+          }
+          const provider = this.c.providers[slotKey];
+          if (provider) {
+            slots[slotKey] = (): VNode => {
+              const comp = resolveComponent(provider.component) as string;
+              return h(comp, {
+                modelData: ctrl,
+                ...ctrlProps,
+                provider,
+              });
+            };
+          }
+        });
+      }
+
+      if (this.c.engines.length === 0) {
+        layoutPanel = (
+          <span style={'color:red;'}>
+            视图类型{this.modelData.viewType}暂未支持
+          </span>
+        );
+      } else {
+        // 绘制视图布局面板
+        const viewLayoutPanel = this.c.model.viewLayoutPanel!;
+        const provider = this.c.providers[viewLayoutPanel.name!];
+        layoutPanel = h(
+          resolveComponent(provider.component) as string,
+          {
+            modelData: viewLayoutPanel,
+            context: this.c.context,
+            params: this.c.params,
+            provider,
+            onControllerAppear: this.onLayoutPanelCreated,
+          },
+          slots,
+        );
+      }
+    }
+
+    return (
+      <div
+        ref='container'
+        class={this.viewClassNames}
+        v-loading={this.c.state.isLoading}
+      >
+        {this.renderViewMessage('TOP')}
+        {layoutPanel}
+        {this.renderViewMessage('BOTTOM')}
+      </div>
+    );
+  },
+});

package/src/view/index.ts

@@ -0,0 +1,4 @@
+export * from './app-redirect-view/app-redirect-view';
+export * from './common/index';
+export * from './todo-redirect/todo-redirect';
+export * from './portal-view/index';

package/src/view/portal-view/index.ts

@@ -0,0 +1,20 @@
+import { App } from 'vue';
+import { registerViewProvider, ViewType } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { PortalViewProvider } from './portal-view.provider';
+import { PortalView } from './portal-view';
+
+export { PortalViewProvider };
+
+export const IBizPortalView = withInstall(PortalView, function (v: App) {
+  v.component(PortalView.name, PortalView);
+  registerViewProvider(
+    ViewType.APP_PORTAL_VIEW,
+    () => new PortalViewProvider(),
+  );
+  registerViewProvider(ViewType.DE_PORTAL_VIEW, () => new PortalViewProvider());
+  registerViewProvider(
+    ViewType.DE_PORTAL_VIEW9,
+    () => new PortalViewProvider(),
+  );
+});

package/src/view/portal-view/portal-view.provider.ts

@@ -0,0 +1,14 @@
+import { IViewProvider } from '@ibiz-template/runtime';
+
+/**
+ * 应用门户视图,实体数据看板视图适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class ViewProvider
+ * @implements {IViewProvider}
+ */
+export class PortalViewProvider implements IViewProvider {
+  component: string = 'IBizPortalView';
+}

package/src/view/portal-view/portal-view.tsx

@@ -0,0 +1,79 @@
+import { IModal, ViewController } from '@ibiz-template/runtime';
+import { IAppPortalView } from '@ibiz/model-core';
+import { defineComponent, h, PropType, resolveComponent } from 'vue';
+import { useNamespace, useViewController } from '../../use';
+
+export const PortalView = defineComponent({
+  name: 'IBizPortalView',
+  props: {
+    context: Object as PropType<IContext>,
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    modelData: { type: Object as PropType<IAppPortalView>, required: true },
+    modal: { type: Object as PropType<IModal> },
+    state: { type: Object as PropType<IData> },
+  },
+  setup() {
+    const ns = useNamespace('view');
+    const c = useViewController((...args) => new ViewController(...args));
+    // 视图部件模型在viewlayoutPanel里面。
+    const controls = c.model.viewLayoutPanel?.controls || c.model.controls;
+
+    const { viewType, sysCss, codeName } = c.model;
+    const typeClass = viewType!.toLowerCase();
+    const sysCssName = sysCss?.cssName;
+    const viewClassNames = [
+      ns.b(),
+      true && ns.b(typeClass),
+      true && ns.m(codeName),
+      true && sysCssName,
+    ];
+
+    return { c, ns, controls, viewClassNames };
+  },
+  render() {
+    let content = null;
+    if (this.c.state.isCreated) {
+      // 绘制部件插槽，外部插槽优先
+      const slots: IData = {
+        ...this.$slots,
+      };
+      if (this.controls?.length) {
+        this.controls.forEach(ctrl => {
+          const slotKey = ctrl.name || ctrl.id!;
+          const crtlProps = {
+            context: this.c.context,
+            params: this.c.params,
+          };
+          if (this.c.slotProps[slotKey]) {
+            Object.assign(crtlProps, this.c.slotProps[slotKey]);
+          }
+          // 已经有插槽的不用自己绘制了。
+          const outCtrlSlot = slots[slotKey];
+          if (outCtrlSlot) {
+            slots[slotKey] = () => {
+              return outCtrlSlot(crtlProps);
+            };
+            return;
+          }
+          const provider = this.c.providers[slotKey];
+          if (provider) {
+            slots[slotKey] = () => {
+              const comp = resolveComponent(provider.component) as string;
+              return h(comp, {
+                modelData: ctrl,
+                ...crtlProps,
+              });
+            };
+          }
+        });
+      }
+
+      // 绘制内容区
+      if (slots.dashboard) {
+        content = slots.dashboard();
+      }
+    }
+
+    return <div class={this.viewClassNames}>{content}</div>;
+  },
+});

package/src/view/todo-redirect/todo-redirect.tsx

@@ -0,0 +1,51 @@
+import qs from 'qs';
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+
+export const TodoRedirect = defineComponent({
+  setup() {
+    const router = useRouter();
+
+    const { href } = window.location;
+
+    const i = href.lastIndexOf('?');
+
+    const queryStr: string = decodeURIComponent(
+      href.substring(i + 1, href.length),
+    );
+
+    if (!queryStr) {
+      throw new Error(`重定向参数不足无法跳转`);
+    }
+
+    const params = qs.parse(queryStr, { delimiter: ';' }) as IData;
+
+    const { apptype, todotype, todoid } = params;
+
+    const data: IData = { srfapptype: 'pc', srfapp: '' };
+
+    if (!apptype) {
+      data.todourltype = 'RouterUrl';
+    }
+
+    async function getLinkUrl(): Promise<void> {
+      const res = await ibiz.net.post(`/systodos/${todoid}/getlinkurl`, data);
+      let url: string = res.data.linkurl;
+      // apptype存在，带ip、端口等完整数据
+      if (apptype) {
+        window.location.href = url;
+      } else {
+        if (url.indexOf('/') !== 0) {
+          url = `/${url}`;
+        }
+        url += `;srfwf=${todotype}`;
+        router.push(`/index${url}`);
+      }
+    }
+
+    getLinkUrl();
+  },
+  render() {
+    return <div>待办列表重定向</div>;
+  },
+});