@ibiz-template/vue3-components 0.0.1-alpha.1 → 0.0.1-alpha.3

package/src/views/index-view/index-view-default.ts

@@ -1,168 +0,0 @@
-import { IndexViewController } from '@ibiz-template/runtime';
-import { ref, watch } from 'vue';
-import { useRouter, useRoute, RouteLocationNormalizedLoaded } from 'vue-router';
-
-export const getView2Value = (route: RouteLocationNormalizedLoaded) => {
-  const { view2, params2, params1 } = route.params;
-  if (!view2) {
-    return '';
-  }
-  // 清除params2里的srfnav
-  let _params2 = (params2 as String).replace(
-    /;srfnav=[^;=]*$|(?<=;)srfnav=[^;=]*;|^srfnav=[^;=]*;|^srfnav=[^;=]*$/g,
-    '',
-  );
-  _params2 = _params2 || ibiz.env.routePlaceholder;
-  return `/${params1}/${view2}/${_params2}`;
-};
-
-// 获取首页一级路径的空白地址
-export const getView1Value = (route: RouteLocationNormalizedLoaded) => {
-  const { view1, appContext } = route.params;
-  return `/${appContext}/${view1}/${ibiz.env.routePlaceholder}`;
-};
-
-export interface RouteMsg {
-  key: string;
-  fullPath: string;
-  modelPath?: string;
-  caption?: string;
-}
-
-export function useIndexRouteManage(controller: IndexViewController) {
-  const router = useRouter();
-  const route = useRoute();
-
-  /** 当前的路由标识，只由二级路由组成，二级路由一致则就是同一个视图 */
-  const currentKey = ref('');
-
-  /** 留一份首页的Path */
-  const indexPath = ref('');
-
-  /** key操作记录，只维护当前缓存的key，且每个key在集合里唯一，最新操作的排在最前面 */
-  const keyHistory = ref<string[]>([]);
-
-  /** 路由信息，每个key对应的全路由和标题之类的信息 */
-  const routeMsgs = ref<RouteMsg[]>([]);
-
-  /**
-   * 删除路由缓存数据
-   *
-   * @author lxm
-   * @date 2022-09-22 10:09:11
-   * @param {string[]} keys 要删除的keys
-   */
-  const deleteRouteCache = (keys: string[]) => {
-    keys.forEach(key => {
-      const index = keyHistory.value.indexOf(key);
-      if (index !== -1) {
-        keyHistory.value.splice(index, 1);
-        const msgIndex = routeMsgs.value.findIndex(item => item.key === key);
-        routeMsgs.value.splice(msgIndex, 1);
-      }
-    });
-  };
-
-  // 监听路由
-  watch(
-    () => route.path,
-    (newVal, oldVal) => {
-      // 只处理有二级路由，只有首页的时候不需要
-      if (newVal !== oldVal) {
-        // 当跳转到二级路由的时候清空缓存
-        if (route.matched.length <= 2) {
-          deleteRouteCache(keyHistory.value.splice(0));
-        }
-        currentKey.value = getView2Value(route);
-        indexPath.value = getView1Value(route);
-        // 更新或新建对应key的全路由信息,主要是三级路由变更时会用
-        const find = routeMsgs.value.find(
-          item => item.key === currentKey.value,
-        );
-        if (find) {
-          find.fullPath = route.fullPath;
-        } else {
-          // 全关闭后到首页只显示空白不需要加入到routeMsgs里
-          if (newVal === indexPath.value) {
-            return;
-          }
-          routeMsgs.value.push({
-            key: currentKey.value,
-            fullPath: route.fullPath,
-            modelPath: '',
-            caption: '',
-          });
-        }
-      }
-    },
-    { deep: true, immediate: true },
-  );
-
-  // 监听当前的key，维护数据
-  watch(
-    currentKey,
-    (newVal, oldVal) => {
-      if (newVal !== oldVal && newVal) {
-        const index = keyHistory.value.indexOf(newVal);
-        // 历史记录里没有的新建信息，放入开头
-        if (index === -1) {
-          keyHistory.value.unshift(newVal);
-        } else {
-          // 已存在的调整顺序至开头
-          keyHistory.value.splice(index, 1);
-          keyHistory.value.unshift(newVal);
-        }
-      }
-    },
-    { immediate: true },
-  );
-
-  /**
-   * 更新路由信息
-   *
-   * @author lxm
-   * @date 2022-09-01 16:09:51
-   * @param {string} key
-   * @param {IData} opts
-   */
-  const updateRouteMsg = (key: string, opts: Partial<RouteMsg>) => {
-    const find = routeMsgs.value.find(item => item.key === currentKey.value);
-    if (find) {
-      if (opts.caption) find.caption = opts.caption;
-      if (opts.modelPath) find.modelPath = opts.modelPath;
-    }
-  };
-
-  /**
-   * 关闭视图回调
-   *
-   * @author lxm
-   * @date 2022-09-22 10:09:59
-   * @param {string} [key=currentKey.value]
-   */
-  const closeView = (key: string = currentKey.value) => {
-    // 找出删除的key在历史记录里的位置
-    deleteRouteCache([key]);
-    const toKey = keyHistory.value[0];
-    if (!toKey) {
-      if (controller.model.blankMode) {
-        window.close();
-      } else {
-        currentKey.value = '';
-        router.push(indexPath.value);
-      }
-    } else {
-      const find = routeMsgs.value.find(item => item.key === toKey);
-      router.push(find!.fullPath);
-    }
-  };
-
-  return {
-    currentKey,
-    keyHistory,
-    routeMsgs,
-    updateRouteMsg,
-    closeView,
-    deleteRouteCache,
-  };
-}

package/src/views/index-view/index-view-engine.ts

@@ -1,10 +0,0 @@
-import { PresetViewEngine, ViewController } from '@ibiz-template/runtime';
-import { IAppIndexView } from '@ibiz/model-core';
-
-export class IndexViewEngine extends PresetViewEngine {
-  protected declare controller: ViewController<IAppIndexView>;
-
-  init() {
-    this.controller.childNames.push('appmenu');
-  }
-}

package/src/views/index-view/index-view-exp.ts

@@ -1,261 +0,0 @@
-import { IndexViewController } from '@ibiz-template/runtime';
-import { ref, watch } from 'vue';
-import { useRouter, useRoute, RouteLocationNormalizedLoaded } from 'vue-router';
-import { IAppView } from '@ibiz/model-core';
-
-export interface RouteMsg {
-  key: string;
-  fullPath: string;
-  modelPath?: string;
-  caption?: string;
-  appView?: IAppView;
-}
-
-export const getView2Value = (route: RouteLocationNormalizedLoaded) => {
-  const { view2, params2, params1 } = route.params;
-  if (!view2) {
-    return '';
-  }
-  // 清除params2里的srfnav
-  let _params2 = (params2 as String).replace(
-    /;srfnav=[^;=]*$|(?<=;)srfnav=[^;=]*;|^srfnav=[^;=]*;|^srfnav=[^;=]*$/g,
-    '',
-  );
-  _params2 = _params2 || ibiz.env.routePlaceholder;
-  return `/${params1}/${view2}/${_params2}`;
-};
-
-// 获取首页一级路径的空白地址
-export const getView1Value = (route: RouteLocationNormalizedLoaded) => {
-  const { view1, appContext } = route.params;
-  return `/${appContext}/${view1}/${ibiz.env.routePlaceholder}`;
-};
-
-export function useIndexExpRouteManage(controller: IndexViewController) {
-  const router = useRouter();
-  const route = useRoute();
-
-  /** 当前的路由标识，只由二级路由组成，二级路由一致则就是同一个视图 */
-  const currentKey = ref('');
-
-  /** 留一份首页的Path */
-  const indexPath = ref('');
-
-  /** key操作记录，只维护当前缓存的key，且每个key在集合里唯一，最新操作的排在最前面 */
-  const keyHistory = ref<string[]>([]);
-
-  /** 路由信息，每个key对应的全路由和标题之类的信息 */
-  const routeMsgs = ref<RouteMsg[]>([]);
-
-  /**
-   * 删除路由缓存数据
-   *
-   * @author lxm
-   * @date 2022-09-22 10:09:11
-   * @param {string[]} keys 要删除的keys
-   */
-  const deleteRouteCache = (keys: string[]) => {
-    keys.forEach(key => {
-      const index = keyHistory.value.indexOf(key);
-      if (index !== -1) {
-        keyHistory.value.splice(index, 1);
-      }
-      const msgIndex = routeMsgs.value.findIndex(item => item.key === key);
-      if (msgIndex !== -1) {
-        routeMsgs.value.splice(msgIndex, 1);
-      }
-    });
-  };
-
-  // 监听路由
-  watch(
-    () => route.path,
-    (newVal, oldVal) => {
-      // 只处理有二级路由，只有首页的时候不需要,
-      if (newVal !== oldVal) {
-        currentKey.value = getView2Value(route);
-        indexPath.value = getView1Value(route);
-        // 更新或新建对应key的全路由信息,主要是三级路由变更时会用
-        const find = routeMsgs.value.find(
-          item => item.key === currentKey.value,
-        );
-        if (find) {
-          find.fullPath = route.fullPath;
-        } else {
-          // 全关闭后到首页只显示空白不需要加入到routeMsgs里
-          if (newVal === indexPath.value) {
-            return;
-          }
-          routeMsgs.value.push({
-            key: currentKey.value,
-            fullPath: route.fullPath,
-            modelPath: '',
-            caption: '',
-          });
-        }
-      }
-    },
-    { deep: true, immediate: true },
-  );
-
-  // 监听当前的key，维护数据
-  watch(
-    currentKey,
-    (newVal, oldVal) => {
-      if (newVal !== oldVal && newVal) {
-        const index = keyHistory.value.indexOf(newVal);
-        // 历史记录里没有的新建信息，放入开头
-        if (index === -1) {
-          keyHistory.value.unshift(newVal);
-        } else {
-          // 已存在的调整顺序至开头
-          keyHistory.value.splice(index, 1);
-          keyHistory.value.unshift(newVal);
-        }
-      }
-    },
-    { immediate: true },
-  );
-
-  /**
-   * 更新路由信息
-   *
-   * @author lxm
-   * @date 2022-09-01 16:09:51
-   * @param {string} key
-   * @param {IData} opts
-   */
-  const updateRouteMsg = async (key: string, opts: Partial<RouteMsg>) => {
-    const find = routeMsgs.value.find(item => item.key === currentKey.value);
-    if (find) {
-      if (opts.caption) find.caption = opts.caption;
-      if (opts.modelPath) {
-        find.modelPath = opts.modelPath;
-      }
-    }
-  };
-
-  /**
-   * 关闭视图回调
-   *
-   * @author lxm
-   * @date 2022-09-22 10:09:59
-   * @param {string} [key=currentKey.value]
-   */
-  const closeView = (key: string = currentKey.value) => {
-    // 找出删除的key在历史记录里的位置
-    deleteRouteCache([key]);
-    const toKey = keyHistory.value[0];
-    if (!toKey) {
-      if (controller.model.blankMode) {
-        window.close();
-      } else {
-        currentKey.value = '';
-        router.push(indexPath.value);
-      }
-    } else {
-      const find = routeMsgs.value.find(item => item.key === toKey);
-      router.push(find!.fullPath);
-    }
-  };
-
-  /**
-   * 处理标签页点击
-   *
-   */
-  const handleTabClick = (index: number) => {
-    const routeMsg = routeMsgs.value[index];
-    if (routeMsg) {
-      router.push(routeMsg.fullPath);
-    }
-  };
-
-  /**
-   * 跳转首页
-   *
-   */
-  const redirectToIndex = () => {
-    const fullPath = route.fullPath;
-    let index = fullPath.indexOf('/');
-    for (let i = 0; i < 2; i++) {
-      index = fullPath.indexOf('/', index + 1);
-    }
-    const path = `${fullPath.substring(0, index)}/-`;
-
-    router.push(path);
-  };
-
-  /**
-   * 跳转页面
-   *
-   */
-  const goToPage = () => {
-    if (keyHistory.value.length > 0) {
-      const currentMsg = routeMsgs.value.find(
-        item => item.key === keyHistory.value[0],
-      );
-      if (currentMsg) {
-        router.push(currentMsg.fullPath);
-      }
-    } else {
-      redirectToIndex();
-    }
-  };
-
-  /**
-   * 处理标签页删除
-   *
-   */
-  const handleTabDelete = (name: number) => {
-    const routeMsg = routeMsgs.value[name];
-    if (routeMsg) {
-      deleteRouteCache([routeMsg.key]);
-      goToPage();
-    }
-  };
-
-  /**
-   * 处理全部关闭标签页
-   *
-   */
-  const handleCloseAll = () => {
-    if (routeMsgs.value.length > 0) {
-      const allKeyArr: string[] = [];
-      routeMsgs.value.forEach(msg => {
-        allKeyArr.push(msg.key);
-      });
-      deleteRouteCache(allKeyArr);
-      goToPage();
-    }
-  };
-
-  /**
-   * 处理关闭其他标签页
-   *
-   */
-  const handleCloseOther = () => {
-    if (routeMsgs.value.length > 0) {
-      const allKeyArr: string[] = [];
-      routeMsgs.value.forEach(msg => {
-        if (msg.key !== currentKey.value) {
-          allKeyArr.push(msg.key);
-        }
-      });
-      deleteRouteCache(allKeyArr);
-      goToPage();
-    }
-  };
-
-  return {
-    currentKey,
-    keyHistory,
-    routeMsgs,
-    updateRouteMsg,
-    closeView,
-    deleteRouteCache,
-    handleTabClick,
-    handleTabDelete,
-    handleCloseAll,
-    handleCloseOther,
-  };
-}

package/src/views/index-view/index-view-provider.ts

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

package/src/views/index-view/index-view.tsx

@@ -1,249 +0,0 @@
-import { useViewController } from '@ibiz-template/vue3-util';
-import {
-  computed,
-  ComputedRef,
-  defineComponent,
-  onMounted,
-  PropType,
-  Ref,
-} from 'vue';
-import { IAppIndexView } from '@ibiz/model-core';
-import { ViewController } from '@ibiz-template/runtime';
-import { useIndexRouteManage } from './index-view-default';
-import { useIndexExpRouteManage } from './index-view-exp';
-
-export const IndexView = defineComponent({
-  name: 'IndexView',
-  props: {
-    context: Object as PropType<IContext>,
-    params: { type: Object as PropType<IParams>, default: () => ({}) },
-    modelData: { type: Object as PropType<IAppIndexView>, required: true },
-  },
-  setup(props) {
-    const c = useViewController((...args) => new ViewController(...args));
-    const menu = c.model.viewLayoutPanel!.controls!.find(item => {
-      return item.name === 'appmenu';
-    });
-
-    const isShowTabPageExp = true; // to test
-
-    // let onCreated: ((_neuron: ViewNeuron) => void) | null = null;
-    let onViewFound: ((_opts: IData) => void) | null = null;
-    let onMenuRouteChange: (() => void) | null = null;
-    let deleteRouteCache: ((_keys: string[]) => void) | null = null;
-    let handleTabClick: ((_index: number) => void) | null = null;
-    let handleTabDelete: ((_name: number) => void) | null = null;
-    let handleCloseAll: (() => void) | null = null;
-    let handleCloseOther: (() => void) | null = null;
-    let currentPath: ComputedRef<string> | null = null;
-    let currentKey: Ref<string>;
-    let keyHistory: Ref<string[]>;
-    let routeMsgs: Ref<
-      {
-        key: string;
-        fullPath: string;
-        modelPath?: string | undefined;
-        caption?: string | undefined;
-      }[]
-    >;
-
-    if (isShowTabPageExp) {
-      const {
-        currentKey: _currentKey,
-        keyHistory: _keyHistory,
-        routeMsgs: _routeMsgs,
-        updateRouteMsg,
-        closeView,
-        deleteRouteCache: _deleteRouteCache,
-        handleTabClick: _handleTabClick,
-        handleTabDelete: _handleTabDelete,
-        handleCloseAll: _handleCloseAll,
-        handleCloseOther: _handleCloseOther,
-      } = useIndexExpRouteManage(c);
-
-      currentKey = _currentKey;
-      keyHistory = _keyHistory;
-      routeMsgs = _routeMsgs;
-      deleteRouteCache = _deleteRouteCache;
-      handleTabClick = _handleTabClick;
-      handleTabDelete = _handleTabDelete;
-      handleCloseAll = _handleCloseAll;
-      handleCloseOther = _handleCloseOther;
-
-      // 视图初始化，监听事件
-      // onCreated = (neuron: ViewNeuron) => {
-      //   const key = currentKey.value;
-      //   neuron.on('onCloseView', () => {
-      //     closeView(key);
-      //   });
-      //   neuron.on('onSetTitle', event => {
-      //     updateRouteMsg(key, { caption: event.title });
-      //   });
-      // };
-
-      onViewFound = (opts: IData) => {
-        updateRouteMsg(currentKey.value, opts);
-      };
-
-      // 后退按钮触发事件,删除上一个路由的缓存
-      window.onpopstate = () => {
-        deleteRouteCache!([keyHistory.value[1]]);
-      };
-
-      currentPath = computed(() => {
-        const routeMsg = routeMsgs.value.find(
-          (item: { key: string }) => item.key === currentKey.value,
-        );
-        return routeMsg?.modelPath || '';
-      });
-    } else {
-      const {
-        currentKey: _currentKey,
-        keyHistory: _keyHistory,
-        routeMsgs: _routeMsgs,
-        updateRouteMsg,
-        closeView,
-        deleteRouteCache: _deleteRouteCache,
-      } = useIndexRouteManage(c);
-
-      currentKey = _currentKey;
-      keyHistory = _keyHistory;
-      routeMsgs = _routeMsgs;
-      deleteRouteCache = _deleteRouteCache;
-
-      // // 视图初始化，监听事件
-      // onCreated = (neuron: ViewNeuron) => {
-      //   const key = currentKey.value;
-      //   neuron.on('onCloseView', () => {
-      //     closeView(key);
-      //   });
-      //   neuron.on('onSetTitle', event => {
-      //     updateRouteMsg(key, { caption: event.title });
-      //   });
-      // };
-
-      onViewFound = (opts: IData) => {
-        updateRouteMsg(currentKey.value, opts);
-      };
-
-      onMenuRouteChange = () => {
-        deleteRouteCache!(keyHistory.value.slice(1));
-      };
-
-      // 后退按钮触发事件,删除上一个路由的缓存
-      window.onpopstate = () => {
-        deleteRouteCache!([keyHistory.value[1]]);
-      };
-
-      currentPath = computed(() => {
-        const routeMsg = routeMsgs.value.find(
-          (item: { key: string }) => item.key === currentKey.value,
-        );
-        return routeMsg?.modelPath || '';
-      });
-    }
-
-    onMounted(() => {
-      setTimeout(() => {
-        const el = document.querySelector('.app-loading-x') as HTMLDivElement;
-        if (el) {
-          el.style.display = 'none';
-        }
-      }, 300);
-    });
-
-    // 菜单收缩变化
-    const isCollapse = (collapse: boolean) => {
-      // c.state.isCollapse = collapse;
-      return false;
-    };
-
-    return {
-      c,
-      // onCreated,
-      menu,
-      onViewFound,
-      onMenuRouteChange,
-      deleteRouteCache,
-      handleTabClick,
-      handleTabDelete,
-      handleCloseAll,
-      handleCloseOther,
-      currentPath,
-      currentKey,
-      keyHistory,
-      routeMsgs,
-      isShowTabPageExp,
-      isCollapse,
-    };
-  },
-  render() {
-    return (
-      <app-layout
-        is-complete={true}
-        modelData={this.c.model}
-        onCollapseChange={this.isCollapse}
-      >
-        {{
-          menu: () => {
-            if (true) {
-              if (this.$slots.appmenu) {
-                return this.$slots.appmenu();
-              }
-              if (this.menu) {
-                return (
-                  <control-shell
-                    current-path={this.currentPath}
-                    modelData={this.menu}
-                    context={this.c.context}
-                    // collapse={this.c.state.isCollapse}
-                    mode={this.c.model.mainMenuAlign}
-                    onMenuRouteChange={this.onMenuRouteChange}
-                  ></control-shell>
-                );
-              }
-              return <div>菜单</div>;
-            }
-            return null;
-          },
-          tabPageExp: () => {
-            if (this.isShowTabPageExp) {
-              return (
-                <tab-page-exp
-                  route-msgs={this.routeMsgs}
-                  current-key={this.currentKey}
-                  onTabClick={this.handleTabClick}
-                  onTabDelete={this.handleTabDelete}
-                  onCloseAll={this.handleCloseAll}
-                  onCloseOther={this.handleCloseOther}
-                ></tab-page-exp>
-              );
-            }
-            return null;
-          },
-          default: () => {
-            if (this.currentKey) {
-              return (
-                <app-router-view
-                  manualKey={this.currentKey}
-                  // onNeuronInit={this.onCreated}
-                  onViewFound={this.onViewFound}
-                >
-                  {({ Component }: { Component: string }) => {
-                    return (
-                      Component && (
-                        <appKeepAlive keyList={this.keyHistory}>
-                          <Component />
-                        </appKeepAlive>
-                      )
-                    );
-                  }}
-                </app-router-view>
-              );
-            }
-          },
-        }}
-      </app-layout>
-    );
-  },
-});