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

package/src/editor/text-box/ibiz-input/ibiz-input.tsx

@@ -0,0 +1,176 @@
+import { computed, defineComponent, ref, watch } from 'vue';
+import { debounce } from 'lodash-es';
+import {
+  getEditorEmits,
+  getInputProps,
+  useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-input.scss';
+
+export const IBizInput = defineComponent({
+  name: 'IBizInput',
+  props: getInputProps(),
+  emits: getEditorEmits(),
+  setup(props, { emit }) {
+    const ns = useNamespace('input');
+    const c = props.controller;
+    const editorModel = c.model;
+    const inputRef = ref();
+
+    // 文本域默认行数，仅在 textarea 类型下有效
+    const rows = ref(2);
+    if (editorModel.editorType === 'TEXTAREA_10') {
+      rows.value = 10;
+    }
+
+    // 类型
+    const type = computed(() => {
+      switch (editorModel.editorType) {
+        case 'TEXTBOX':
+          return 'text';
+        case 'PASSWORD':
+          return 'password';
+        case 'TEXTAREA':
+        case 'TEXTAREA_10':
+          return 'textarea';
+        default:
+          return 'string';
+      }
+    });
+
+    const currentVal = ref<string>('');
+
+    watch(
+      () => props.value,
+      (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          if (!newVal) {
+            currentVal.value = '';
+          } else {
+            currentVal.value = newVal;
+          }
+        }
+      },
+      { immediate: true },
+    );
+
+    let isDebounce = false;
+    let awaitSearch: () => void;
+    let blurCacheValue: string | undefined;
+    // 防抖值变更回调
+    const debounceChange = debounce(
+      (val: string | number) => {
+        // 拦截掉blur触发后change
+        if (blurCacheValue !== val) {
+          emit('change', val);
+        }
+        blurCacheValue = undefined;
+        isDebounce = false;
+        if (awaitSearch) {
+          awaitSearch();
+        }
+      },
+      300,
+      { leading: true },
+    );
+    // 值变更
+    const handleChange = (val: string | number) => {
+      isDebounce = true;
+      debounceChange(val);
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (e && e.code === 'Enter') {
+        if (isDebounce) {
+          awaitSearch = () => {
+            inputRef.value.$el.dispatchEvent(e);
+          };
+        }
+      }
+    };
+
+    /**
+     * blur时马上抛值变更
+     * @author lxm
+     * @date 2023-03-06 06:36:23
+     */
+    const handleBlur = (event: IData) => {
+      blurCacheValue = event.target.value;
+      emit('change', blurCacheValue);
+    };
+
+    // 自动聚焦
+    if (props.autoFocus) {
+      watch(inputRef, newVal => {
+        if (newVal) {
+          const input = newVal.$el.getElementsByTagName('input')[0];
+          input.focus();
+        }
+      });
+    }
+
+    return {
+      ns,
+      rows,
+      type,
+      currentVal,
+      handleChange,
+      handleKeyUp,
+      handleBlur,
+      inputRef,
+    };
+  },
+  render() {
+    const { unitName } = this.controller.model;
+
+    let content = null;
+    if (this.readonly) {
+      // 只读显示
+      content = `${this.currentVal}`;
+      // 当有值且单位存在时才显示单位
+      if (content && unitName) {
+        content += unitName;
+      }
+    } else {
+      // 编辑态显示
+      const slots: IData = {};
+      if (unitName) {
+        slots.suffix = () => {
+          return <i class={this.ns.e('unit')}>{unitName}</i>;
+        };
+      }
+
+      content = (
+        <el-input
+          ref='inputRef'
+          v-model={this.currentVal}
+          placeholder={this.controller.placeHolder}
+          type={this.type}
+          rows={this.rows}
+          onInput={this.handleChange}
+          onKeyup={this.handleKeyUp}
+          onBlur={this.handleBlur}
+          class={this.ns.b('input')}
+          disabled={this.disabled}
+          show-password={this.type === 'password'}
+          autocomplete='new-password'
+        >
+          {slots}
+        </el-input>
+      );
+    }
+
+    return (
+      <div
+        class={[
+          this.ns.b(),
+          this.ns.is('textarea', Object.is(this.type, 'textarea')),
+          this.disabled ? this.ns.m('disabled') : '',
+          this.readonly ? this.ns.m('readonly') : '',
+        ]}
+      >
+        {content}
+      </div>
+    );
+  },
+});

package/src/editor/text-box/index.ts

@@ -0,0 +1 @@
+export { IBizInput } from './ibiz-input/ibiz-input';

package/src/editor/text-box/text-box-provider.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IEditorProvider } from '@ibiz-template/runtime';
+import { ITextBox } from '@ibiz/model-core';
+import { TextBoxEditorController } from './text-box.controller';
+
+/**
+ * 输入框编辑器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class TextBoxEditorProvider
+ * @implements {EditorProvider}
+ */
+export class TextBoxEditorProvider implements IEditorProvider {
+  formEditor: string = 'IBizInput';
+
+  gridEditor: string = 'IBizGridInput';
+
+  constructor(editorType?: string) {
+    if (editorType === 'NUMBER') {
+      this.formEditor = 'IBizInputNumber';
+      this.gridEditor = 'IBizGridInputNumber';
+    }
+    if (editorType === 'IPADDRESSTEXTBOX') {
+      this.formEditor = 'IBizInputIP';
+      this.gridEditor = 'IBizInputIP';
+    }
+  }
+
+  async createController(
+    editorModel: ITextBox,
+    parentController: any,
+  ): Promise<TextBoxEditorController> {
+    const c = new TextBoxEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}

package/src/editor/text-box/text-box.controller.ts

@@ -0,0 +1,21 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { ITextBox } from '@ibiz/model-core';
+
+/**
+ * 输入框编辑器控制器
+ *
+ * @author lxm
+ * @date 2022-08-24 20:08:25
+ * @export
+ * @class TextBoxEditorController
+ * @extends {EditorController}
+ */
+export class TextBoxEditorController extends EditorController<ITextBox> {
+  /**
+   * 占位
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2022-08-25 14:33:14
+   */
+  public placeHolder = '请输入';
+}

package/src/index.ts

@@ -0,0 +1,57 @@
+import { App } from 'vue';
+import {
+  AppKeepAlive,
+  AppIcon,
+  AppRow,
+  AppCol,
+  AppUser,
+  AppRouterView,
+  TabPageExp,
+  QuickSearch,
+} from './common';
+import { IBizAppMenu, IBizGrid, IBizToolbar, IBizPanel } from './control';
+import { IBizForm, IBizSearchForm } from './control/form';
+import IBizEditor from './editor';
+import {
+  AppLayout,
+  ViewLayout,
+  ViewBase,
+  MDViewBase,
+  ControlLayout,
+  ControlBase,
+} from './layout';
+import { IBizIndexView, IBizView, IBizGridView } from './views';
+
+export * from './layout';
+export * from './views';
+export * from './control';
+export * from './common';
+
+export default {
+  install: (v: App) => {
+    v.use(IBizIndexView);
+    v.use(IBizView);
+    v.use(IBizAppMenu);
+    v.use(IBizGridView);
+    v.use(IBizGrid);
+    v.use(IBizToolbar);
+    v.use(IBizPanel);
+    v.use(IBizForm);
+    v.use(IBizSearchForm);
+    v.use(IBizEditor);
+    v.component('AppLayout', AppLayout);
+    v.component('ViewLayout', ViewLayout);
+    v.component('ViewBase', ViewBase);
+    v.component('MdViewBase', MDViewBase);
+    v.component('ControlLayout', ControlLayout);
+    v.component('ControlBase', ControlBase);
+    v.component('AppKeepAlive', AppKeepAlive);
+    v.component('AppIcon', AppIcon);
+    v.component('AppRow', AppRow);
+    v.component('AppCol', AppCol);
+    v.component('AppUser', AppUser);
+    v.component('AppRouterView', AppRouterView);
+    v.component('TabPageExp', TabPageExp);
+    v.component('QuickSearch', QuickSearch);
+  },
+};

package/src/layout/app-layout/app-layout.scss

@@ -0,0 +1,133 @@
+@include b(layout) {
+  @include set-component-css-var('layout', $app-layout);
+  @include set-component-css-var('layout-nav', $app-layout-nav);
+  @include set-component-css-var('layout-header', $app-layout-header);
+  @include set-component-css-var('layout-content', $app-layout-content);
+
+  justify-content: flex-start;
+  width: getCssVar('layout', 'width');
+  height: getCssVar('layout', 'height');
+  overflow: hidden;
+
+  @include e(logo) {
+    @include flex-center;
+
+    width: getCssVar('layout-nav', 'width');
+    height: getCssVar('layout-header', 'height');
+    cursor: pointer;
+  }
+
+  @include e(logo-caption) {
+    font-size: getCssVar('layout', 'caption-font-size');
+  }
+
+  @include when(collapse) {
+    @include b(layout-content) {
+      padding-left: getCssVar('layout-nav', 'collapse-width');
+    }
+  }
+
+  // 空白模式样式，隐藏侧边栏和切换图标
+  @include m(blank) {
+    &.#{bem('layout')} {
+      #{getCssVarName('layout-header', 'height')}: 0;
+    }
+
+    // 隐藏侧边栏
+    @include b(layout-nav) {
+      &.el-aside {
+        display: none;
+      }
+    }
+    @include b(layout-content) {
+      padding-left: 0;
+    }
+
+    // 隐藏切换图标
+    @include b(layout-header) {
+      display: none;
+    }
+  }
+}
+
+@include b(layout-nav) {
+  flex: 0 0 getCssVar('layout-nav', 'width') !important;
+  width: getCssVar('layout-nav', 'width') !important;
+  min-width: getCssVar('layout-nav', 'width') !important;
+  max-width: getCssVar('layout-nav', 'width') !important;
+
+  &.is-collapse {
+    flex: 0 0 getCssVar('layout-nav', 'collapse-width') !important;
+    width: getCssVar('layout-nav', 'collapse-width') !important;
+    min-width: getCssVar('layout-nav', 'collapse-width') !important;
+    max-width: getCssVar('layout-nav', 'collapse-width') !important;
+
+    > .el-menu--collapse {
+      width: 100%;
+    }
+  }
+
+  transition: all 0.25s;
+}
+
+@include b(layout-nav) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  background-color: getCssVar('layout-nav', 'bg-color');
+  box-shadow: getCssVar('layout-nav', 'box-shadow');
+}
+
+@include b(layout-header) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 14;
+  @include flex($horizontal: space-between);
+
+  width: 100%;
+  height: getCssVar('layout-header', 'height');
+  padding: 0;
+  line-height: getCssVar('layout-header', 'height');
+  color: getCssVar('layout-header', 'text-color');
+  background-color: getCssVar('layout-header', 'bg-color');
+  box-shadow: getCssVar('layout-header', 'box-shadow');
+  @include e(left) {
+    @include flex;
+  }
+
+  @include e(collapse-icon) {
+    @include flex-center;
+
+    width: 42px;
+    font-size: getCssVar('font-size', 'large');
+    cursor: pointer;
+
+    &:hover {
+      background: hsl(0deg 0% 100% / 5%);
+    }
+  }
+}
+
+@include b(layout-content) {
+  width: 100%;
+  padding-left: getCssVar('layout-nav', 'width');
+  background-color: getCssVar('layout-content', 'bg-color');
+  transition: all 0.2s ease-in-out;
+  @include e(main) {
+    height: calc(100% - getCssVar('layout-header', 'height'));
+    padding: getCssVar('layout-header', 'height') 0 0;
+
+    @include when(exp) {
+      > div:nth-child(2) {
+        height: calc(100% - 56px);
+      }
+    }
+  }
+
+  &.is-top {
+    padding-left: 0;
+  }
+}

package/src/layout/app-layout/app-layout.tsx

@@ -0,0 +1,149 @@
+import { computed, defineComponent, PropType, ref, useSlots } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useRouter, useRoute } from 'vue-router';
+import './app-layout.scss';
+import { IAppIndexView } from '@ibiz/model-core';
+
+export const AppLayout = defineComponent({
+  name: 'AppLayout',
+  props: {
+    modelData: { type: Object as PropType<IAppIndexView>, required: true },
+    // 视图是否完成加载
+    isComplete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const ns = useNamespace('layout');
+    const router = useRouter();
+    const route = useRoute();
+
+    // 菜单收缩变化
+    const isCollapse = ref(false);
+
+    const collapseMenus = () => {
+      isCollapse.value = !isCollapse.value;
+      emit('collapseChange', isCollapse.value);
+    };
+
+    const isBlank = computed(() => props.modelData.blankMode === true);
+
+    const menuAlign = computed(() => {
+      return props.modelData.mainMenuAlign || 'LEFT';
+    });
+
+    const redirectToIndex = () => {
+      const fullPath = route.fullPath;
+      let index = fullPath.indexOf('/');
+      for (let i = 0; i < 2; i++) {
+        index = fullPath.indexOf('/', index + 1);
+      }
+      const indexPath = `${fullPath.substring(0, index)}/-`;
+
+      router.push(indexPath);
+      setTimeout(() => {
+        window.location.reload();
+      });
+    };
+
+    const slots = useSlots();
+    // 是否存在多标签导航
+    const hasTabPageExp = computed(() => {
+      if (slots.tabPageExp) {
+        return true;
+      }
+      return false;
+    });
+
+    const renderLogo = () => {
+      return (
+        <div class={ns.e('logo')} onClick={redirectToIndex}>
+          {props.modelData.appIconPath ? (
+            <img
+              class={ns.e('logo-img')}
+              src={props.modelData.appIconPath}
+            ></img>
+          ) : null}
+          <div class={ns.e('logo-caption')}>{props.modelData.caption}</div>
+        </div>
+      );
+    };
+
+    return {
+      ns,
+      isCollapse,
+      isBlank,
+      collapseMenus,
+      menuAlign,
+      redirectToIndex,
+      renderLogo,
+      hasTabPageExp,
+    };
+  },
+  render() {
+    return this.isComplete ? (
+      <el-container
+        class={[
+          this.ns.b(),
+          this.isBlank ? this.ns.m('blank') : '',
+          this.ns.is('collapse', this.isCollapse),
+        ]}
+      >
+        {this.menuAlign === 'LEFT' ? (
+          <el-aside
+            hide-trigger
+            class={[this.ns.b('nav'), this.ns.is('collapse', this.isCollapse)]}
+            value={this.isCollapse}
+          >
+            {this.renderLogo()}
+            {this.$slots.menu && this.$slots.menu()}
+          </el-aside>
+        ) : null}
+        <el-container
+          class={[
+            this.ns.b('content'),
+            this.ns.is(this.menuAlign.toLowerCase(), true),
+          ]}
+        >
+          <el-header class={this.ns.b('header')}>
+            <div class={this.ns.be('header', 'left')}>
+              {this.renderLogo()}
+              {this.menuAlign === 'LEFT' ? (
+                <div class={this.ns.be('header', 'collapse-icon')}>
+                  {!this.isCollapse ? (
+                    <ion-icon
+                      src={'./assets/img/menu-fold.svg'}
+                      onClick={() => this.collapseMenus()}
+                    />
+                  ) : (
+                    <ion-icon
+                      src={'./assets/img/menu-unfold.svg'}
+                      onClick={() => this.collapseMenus()}
+                    />
+                  )}
+                </div>
+              ) : null}
+              {this.menuAlign === 'TOP'
+                ? this.$slots.menu && this.$slots.menu()
+                : null}
+            </div>
+            <div class={this.ns.be('header', 'right')}>
+              <app-user />
+            </div>
+          </el-header>
+          <el-main
+            class={[
+              this.ns.be('content', 'main'),
+              this.ns.is('exp', this.hasTabPageExp),
+            ]}
+          >
+            {this.$slots.tabPageExp && this.$slots.tabPageExp()}
+            {this.$slots.default && this.$slots.default()}
+          </el-main>
+          {/* <el-footer class={this.ns.b('footer')}>Footer</el-footer> */}
+        </el-container>
+      </el-container>
+    ) : null;
+  },
+});

package/src/layout/control-base/control-base.tsx

@@ -0,0 +1,37 @@
+import { ControlController } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { kebabCase } from 'lodash-es';
+import { defineComponent, PropType } from 'vue';
+
+export const ControlBase = defineComponent({
+  props: {
+    controller: {
+      type: Object as PropType<ControlController>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('control');
+    const { controlType, sysCss, codeName } = props.controller.model;
+    const typeClass = controlType!.toLowerCase();
+    const sysCssName = sysCss?.cssName;
+    const modelClass = kebabCase(codeName);
+
+    return { ns, typeClass, sysCssName, modelClass };
+  },
+  render() {
+    return (
+      <control-layout
+        modelData={this.controller.model}
+        class={[
+          this.ns.b(),
+          this.ns.b(this.typeClass),
+          this.ns.m(this.modelClass),
+          this.sysCssName,
+        ]}
+      >
+        {this.$slots.default?.()}
+      </control-layout>
+    );
+  },
+});

package/src/layout/control-layout/control-layout.scss

@@ -0,0 +1,4 @@
+@include b(control-layout) {
+  width: 100%;
+  height: 100%;
+}

package/src/layout/control-layout/control-layout.tsx

@@ -0,0 +1,29 @@
+import { defineComponent, PropType } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './control-layout.scss';
+import { IControl } from '@ibiz/model-core';
+
+/**
+ * 部件布局
+ */
+export const ControlLayout = defineComponent({
+  name: 'ControlLayout',
+  props: {
+    modelData: { type: Object as PropType<IControl>, required: true },
+  },
+  setup() {
+    const ns = useNamespace('control-layout');
+    return { ns };
+  },
+  render() {
+    return (
+      <div
+        class={{
+          [this.ns.b()]: true,
+        }}
+      >
+        {this.$slots.default?.()}
+      </div>
+    );
+  },
+});

package/src/layout/index.ts

@@ -0,0 +1,15 @@
+import { AppLayout } from './app-layout/app-layout';
+import { ControlLayout } from './control-layout/control-layout';
+import { ViewBase } from './view-base/view-base';
+import { MDViewBase } from './md-view-base/md-view-base';
+import { ViewLayout } from './view-layout/view-layout';
+import { ControlBase } from './control-base/control-base';
+
+export {
+  AppLayout,
+  ViewLayout,
+  ViewBase,
+  MDViewBase,
+  ControlLayout,
+  ControlBase,
+};