@ctzy-web-client/plugin-component-vue 1.0.0

package/src/filter-panel/use-filter-panel-item.js

@@ -0,0 +1,59 @@
+import {
+  inject,
+  watch,
+  computed,
+  unref,
+  onBeforeUnmount,
+  onMounted,
+  resolveComponent,
+} from 'vue';
+import { filterPanelKey } from 'web-base-client-vue';
+
+export const useFilterPanelItem = (props) => {
+  const filterPanelContext = inject(filterPanelKey);
+
+  const filterPanel = computed(() => filterPanelContext.filterPanel);
+
+  const column = computed(() => {
+    if (!unref(filterPanel)) {
+      return null;
+    }
+    return unref(filterPanel).getColumn(props.prop);
+  });
+
+  const value = computed({
+    get: () => {
+      if (!unref(column)) {
+        return null;
+      }
+      return unref(filterPanel).getFilterParam(unref(column));
+    },
+    set: (v) => {
+      if (!unref(column)) {
+        return;
+      }
+      unref(filterPanel).setFilterParam(unref(column), v);
+    },
+  });
+
+  const allowClose = computed(() => props.close || !!unref(column)?.closable);
+
+  const closeHandle = () => {
+    if (!unref(column)) {
+      return;
+    }
+    unref(filterPanel).closeColumn(unref(column));
+
+    unref(filterPanel).dataTable.refresh();
+  };
+
+  onMounted(() => {
+    unref(filterPanel).changeOriginFilterParams();
+  });
+
+  onBeforeUnmount(() => {
+    unref(filterPanel).changeOriginFilterParams();
+  });
+
+  return { value, column, allowClose, closeHandle };
+};

package/src/filter-panel/use-filter-panel.js

@@ -0,0 +1,203 @@
+import { useProp } from 'element-plus';
+import { useEventDispatcher, useService, useValue } from 'web-base-client-vue';
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  resolveComponent,
+  unref,
+  watch,
+  withCtx,
+} from 'vue';
+import { Observable } from 'rxjs';
+import { dataModelDB } from '../utils/db';
+
+export const useFilterPanel = (props, context) => {
+  const dataTable = useProp('dataTable');
+  const filterPanel = computed(() => unref(dataTable).filterPanel);
+
+  /** @type {import('dexie').Table} */
+  const filterPanelTable = dataModelDB.filterPanel;
+
+  const currentFilterColumns = computed(() =>
+    unref(filterPanel).getAppliedColumns()
+  );
+
+  const userService = useService('UserService');
+  const _userID = userService?.userInfo?.id || '0';
+
+  const searchParams = computed(() => unref(filterPanel)._filterParams);
+
+  const selectedColumnAttrNames = computed({
+    get: () => unref(filterPanel).getSelectedColumnAttrNames(),
+    set: (v) => {
+      const oldSelectedColumnAttrNames = selectedColumnAttrNames.value;
+      unref(filterPanel).setSelectedColumnAttrNames(v);
+
+      if (unref(filterPanel).ready) {
+        const existsOldAttrNames = oldSelectedColumnAttrNames.filter(
+          (attrName) => v.includes(attrName)
+        );
+        if (existsOldAttrNames.length < oldSelectedColumnAttrNames.length) {
+          unref(dataTable).refresh();
+        }
+      }
+    },
+  });
+  const closableColumns = computed(() =>
+    unref(filterPanel).getSearchClosableColumns()
+  );
+
+  const searchValue = computed({
+    get: () => unref(filterPanel).getSearchValue(),
+    set: (v) => unref(filterPanel).setSeachValue(v),
+  });
+
+  const isChange = computed(() => unref(filterPanel).isChange());
+
+  watch(
+    useProp('searchAttr'),
+    (searchAttr) => {
+      unref(filterPanel).setSearchAttr(searchAttr);
+    },
+    { immediate: true }
+  );
+
+  watch(
+    useProp('searchFields'),
+    (searchFields) => {
+      unref(filterPanel).setSearchFields(searchFields);
+    },
+    { immediate: true }
+  );
+
+  const handleFieldSearch = (value) => {
+    unref(filterPanel).fieldSearchValue = value;
+  };
+
+  const handleReset = () => {
+    unref(filterPanel).resetFilterParams();
+
+    context.emit('reset');
+  };
+
+  useEventDispatcher(filterPanel, 'params-change', () => {
+    const _filterPanel = unref(filterPanel);
+
+    context.emit('filter', {
+      ..._filterPanel.getFilterParams(),
+      [_filterPanel.getSearchAttr()]: _filterPanel.getSearchValue(),
+    });
+  });
+
+  const appName = useValue('AppName');
+
+  const selectedColumnChangeSubscription = new Observable((observer) =>
+    useEventDispatcher(
+      filterPanel,
+      'selected-column-change',
+      observer.next.bind(observer)
+    )
+  ).subscribe(async () => {
+    const _appName = unref(appName);
+    const _tableName = unref(dataTable).name;
+
+    let result = await filterPanelTable
+      .where('[app+tableName+userID]')
+      .equals([_appName, _tableName, _userID])
+      .toArray();
+
+    let filterPanelOrder = result.length ? result[0].order ?? [] : [];
+
+    const attrNames = unref(filterPanel).getSelectedColumnAttrNames();
+
+    attrNames.sort((a1, a2) => {
+      const index1 = filterPanelOrder.indexOf(a1);
+      const index2 = filterPanelOrder.indexOf(a2);
+
+      if (index1 === -1 && index2 === -1) {
+        return 1;
+      }
+
+      if (index1 === -1) {
+        return 1;
+      }
+
+      if (index2 === -1) {
+        return -1;
+      }
+
+      return index1 - index2;
+    });
+
+    filterPanelTable.put({
+      app: _appName,
+      tableName: _tableName,
+      userID: _userID,
+      order: attrNames,
+    });
+  });
+
+  const loadFilterPanelItemOrder = () => {
+    filterPanelTable
+      .where('[app+tableName+userID]')
+      .equals([unref(appName), unref(dataTable).name, _userID])
+      .toArray((res) => {
+        selectedColumnAttrNames.value = res[0]?.order ?? [];
+
+        // 因为设置值监听会有一个异步过程，所以等待一次tick
+        nextTick(() => {
+          unref(filterPanel).ready = true;
+          unref(filterPanel).changeOriginFilterParams();
+          unref(filterPanel).changeOriginSearchValue();
+        });
+      });
+  };
+
+  if (!unref(filterPanel).isInited) {
+    useEventDispatcher(filterPanel, 'initCompleted', loadFilterPanelItemOrder);
+  } else {
+    loadFilterPanelItemOrder();
+  }
+
+  onBeforeUnmount(() => {
+    selectedColumnChangeSubscription.unsubscribe();
+  });
+
+  const columns = computed(() => unref(filterPanel).getColumns());
+
+  const instance = getCurrentInstance();
+
+  watch(
+    computed(() => unref(columns).map((column) => column.componentTitle)),
+    withCtx(() => {
+      for (const column of unref(columns)) {
+        const component = resolveComponent(
+          column.component || 'BwaMultipleMenuCondition'
+        );
+
+        if (!component) {
+          unref(column).componentTitle = '';
+          return;
+        }
+
+        unref(column).componentTitle = component.__conditionTitle__;
+      }
+    }, instance),
+    { immediate: true }
+  );
+
+  return {
+    dataTable,
+    filterPanel,
+    currentFilterColumns,
+    searchParams,
+    selectedColumnAttrNames,
+    closableColumns,
+    handleFieldSearch,
+    searchValue,
+    isChange,
+    handleReset,
+  };
+};

package/src/hooks/use-data/index.js

@@ -0,0 +1,234 @@
+import {
+  useService,
+  HttpRequest,
+  useEventDispatcher,
+  useGlobalConfig,
+  filterPanelItemKey,
+} from 'web-base-client-vue';
+import { ElMessage, useProp } from 'element-plus';
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  onUnmounted,
+  ref,
+  unref,
+  watch,
+  inject,
+} from 'vue';
+import {
+  catchError,
+  combineLatest,
+  debounceTime,
+  filter,
+  from,
+  map,
+  mergeAll,
+  Observable,
+  of,
+  tap,
+} from 'rxjs';
+import { isEqual } from 'lodash';
+import { BehaviorSubject } from 'rxjs';
+
+export const dataProps = {
+  dataTable: {
+    type: Object,
+  },
+  itfInfo: {
+    type: Object,
+  },
+  labelAttr: {
+    type: String,
+  },
+  valueAttr: {
+    type: String,
+  },
+  searchAttr: {
+    type: String,
+  },
+  lazy: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export function useData(disabled, search) {
+  const httpRequest = useService(HttpRequest);
+
+  const data = ref([]);
+
+  const debounceDelay = useGlobalConfig('debounceDelay', 500);
+
+  const filterPanelItem = inject(filterPanelItemKey, null);
+
+  const _dataTable = useProp('dataTable');
+  const dataTable = ref(null);
+  const itfInfo = useProp('itfInfo');
+  const _labelAttr = useProp('labelAttr');
+  const labelAttr = computed(() => unref(_labelAttr) || 'label');
+  const _valueAttr = useProp('valueAttr');
+  const valueAttr = computed(() => unref(_valueAttr) || 'value');
+  const _searchAttr = useProp('searchAttr');
+  const searchAttr = computed(() => unref(_searchAttr) || 'search');
+  const lazy = useProp('lazy');
+
+  const loading = ref(false);
+
+  const searchAttrObserable = new Observable((observer) =>
+    watch(
+      searchAttr,
+      (value, oldValue) => {
+        observer.next([value, oldValue]);
+      },
+      { immediate: true }
+    )
+  );
+
+  const searchObserable = new Observable((observer) =>
+    watch(search, observer.next.bind(observer), { immediate: true })
+  ).pipe(debounceTime(unref(debounceDelay)));
+
+  const searchObservable = combineLatest([
+    searchAttrObserable,
+    searchObserable,
+  ]).pipe(
+    debounceTime(unref(debounceDelay)),
+    filter(() => !unref(disabled))
+  );
+
+  const disabledObservable = new Observable((observer) =>
+    watch(disabled, observer.next.bind(observer), { immediate: true })
+  );
+
+  if (unref(_dataTable)) {
+    dataTable.value = unref(_dataTable).clone();
+
+    const loadDataSubscription = new Observable((observer) =>
+      useEventDispatcher(
+        dataTable,
+        'load-successfully',
+        observer.next.bind(observer)
+      )
+    ).subscribe((res) => {
+      if (res.code != 0) {
+        data.value = [];
+        ElMessage.error(res.msg);
+        return;
+      }
+      data.value = (res.data || []).map((item) => ({
+        value: item[unref(valueAttr)],
+        label: item[unref(labelAttr)],
+      }));
+    });
+
+    const loadingSubscription = new Observable((observer) =>
+      watch(
+        computed(() => unref(dataTable).locking),
+        observer.next.bind(observer),
+        { immediate: true }
+      )
+    ).subscribe((locking) => {
+      loading.value = locking;
+    });
+
+    const searchSubscription = searchObservable.subscribe(
+      ([[searchAttr, oldSearchAttr], search]) => {
+        if (oldSearchAttr) {
+          unref(dataTable).removeParam(oldSearchAttr);
+        }
+
+        if (searchAttr) {
+          unref(dataTable).setParam(searchAttr, search);
+        }
+
+        unref(dataTable).refresh();
+      }
+    );
+
+    unref(dataTable).setParam(unref(searchAttr), '');
+
+    const disabledSubscription = disabledObservable
+      .pipe(filter((disabled) => !disabled))
+      .subscribe(() => {
+        unref(dataTable).refresh();
+      });
+
+    onBeforeUnmount(() => {
+      loadDataSubscription.unsubscribe();
+      loadingSubscription.unsubscribe();
+      searchSubscription.unsubscribe();
+      disabledSubscription.unsubscribe();
+    });
+  } else if (unref(itfInfo)) {
+    const _itfInfo = computed(() => ({
+      url: unref(itfInfo).url,
+      method: unref(itfInfo).method || 'POST',
+      options: unref(itfInfo).options || {},
+    }));
+
+    const inputParamsOberserble = new Observable((observer) => {
+      watch(
+        computed(() => unref(itfInfo).params),
+        (newVal = {}, oldVall) => {
+          if (!isEqual(oldVall, newVal)) {
+            observer.next(newVal);
+          }
+        },
+        { immediate: true }
+      );
+    });
+
+    const paramsObserable = combineLatest([
+      searchAttrObserable,
+      searchObserable,
+      inputParamsOberserble,
+    ]).pipe(
+      map(([[searchAttr], search, params]) => ({
+        ...params,
+        [searchAttr]: search,
+      }))
+    );
+
+    let inited = false;
+
+    const subscription = combineLatest([paramsObserable, disabledObservable])
+      .pipe(
+        tap(() => {
+          loading.value = true;
+        }),
+        debounceTime(unref(debounceDelay)),
+        filter(([_, disabled]) => {
+          return (!inited && !unref(lazy)) || !disabled;
+        }),
+        map(([params]) => ({ ...unref(_itfInfo), params })),
+        map(({ url, method, params, options }) =>
+          from(
+            unref(httpRequest)[method.toLowerCase()](url, params, options)
+          ).pipe(catchError(() => of({ code: 1, msg: '网络异常！' })))
+        ),
+        mergeAll()
+      )
+      .subscribe((result) => {
+        try {
+          inited = true;
+          if (result.code != 0) {
+            data.value = [];
+            ElMessage.error(result.msg);
+            return;
+          }
+
+          data.value = (result.data || []).map((item) => ({
+            value: item[unref(valueAttr)],
+            label: item[unref(labelAttr)],
+          }));
+        } finally {
+          loading.value = false;
+        }
+      });
+
+    onBeforeUnmount(subscription.unsubscribe.bind(subscription));
+  }
+
+  return { data, loading };
+}

package/src/index.js

@@ -0,0 +1,48 @@
+import { makeInstaller } from './make-installer';
+import components from './components';
+import plugins from './plugins';
+
+export const install = makeInstaller([...components, ...plugins]);
+export default { install };
+
+export { BwaDataForm, BwaDataFormItem } from './data-form';
+export {
+  BwaDataTable,
+  BwaDataTableColumn,
+  BwaDataColumnView,
+} from './data-table';
+export { BwaFilterPanel, BwaFilterpanelItem } from './filter-panel';
+
+export {
+  BwaAdvanceSelect,
+  BwaAdvanceOption,
+  BwaAdvanceOperation,
+} from './advance-select';
+
+export { BwaDateRange } from './date-range';
+
+export {
+  BwaApplicationSlot,
+  BwaBreadcrumbItem,
+  BwaHeaderToolsItem,
+} from './application-slot';
+
+export { BwaLayout } from './layout';
+
+export { BwaMenu } from './menu';
+
+export { BwaPanel } from './panel';
+
+export { BwaPanelTab } from './panel-tabs';
+
+export { BwaContextmenu, useContextmenu } from './contextmenu';
+
+export { BwaBreadcrumbSelect } from './breadcrumb-select';
+
+export { BwaDataTableSetting } from './datatable-settings';
+
+export { BwaDraglist } from './drag-list';
+
+export { BwaProgress, BwaProgressItem } from './progress';
+
+export { BwaDragable, BwaDragableItem, BwaDragableOperation } from './dragable';

package/src/layout/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import Layout from './layout.vue';
+
+export const BwaLayout = withInstall(Layout);
+
+export default BwaLayout;

package/src/layout/layout.vue

@@ -0,0 +1,74 @@
+<template>
+  <div :class="[ns.b(), 'justify-between']">
+    <ElScrollbar :class="ns.e('menu-wrapper')" height="100%">
+      <slot name="left-panel">
+        <BwaMenu
+          :class="ns.e('menu')"
+          :menus="menus"
+          :currentMenuID="currentMenuID"
+          :collapsed="isCollapsed"
+          @select="handleSelect"
+        />
+      </slot>
+
+      <slot name="left-panel-append"> </slot>
+    </ElScrollbar>
+
+    <div :class="ns.e('main')">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import { computed, ref, unref } from 'vue';
+import { useNamespace, useService } from 'web-base-client-vue';
+import BwaMenu from '../menu';
+
+defineOptions({
+  name: 'BwaLayout',
+});
+
+const router = useRouter();
+
+const ns = useNamespace('layout');
+
+const menuService = useService('MenuService');
+
+const isCollapsed = computed(() => unref(menuService)?.isCollapsed ?? false);
+
+const menus = computed(() => unref(menuService)?.getMenus() ?? []);
+const currentMenuID = computed(
+  () => unref(menuService)?.getCurrentMenu()?.id ?? ''
+);
+
+const handleSelect = (menu) => {
+  if (!menu) {
+    return;
+  }
+
+  switch (menu?.type) {
+    case 0:
+      unref(menuService).setCurrentMenuById(menu.id);
+      router.push(menu.path);
+      break;
+    case 1:
+      let openLink = '';
+
+      if (
+        path.toLowerCase().indexOf('https://') == 0 ||
+        path.toLowerCase().indexOf('http://') == 0
+      ) {
+        openLink = path;
+      } else if (path.startsWith('//')) {
+        openLink = location.protocol + path;
+      } else {
+        openLink = path;
+      }
+
+      window.open(openLink);
+      break;
+  }
+};
+</script>

package/src/make-installer.js

@@ -0,0 +1,36 @@
+import ElementPlus from 'element-plus';
+import * as icons from '@element-plus/icons';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import { provideGlobalConfig } from 'web-base-client-vue';
+
+const INSTALLED_KEY = Symbol('INSTALLED_KEY');
+
+export const makeInstaller = (components = []) => {
+  const install = (app, options) => {
+    if (app[INSTALLED_KEY]) {
+      return;
+    }
+
+    app[INSTALLED_KEY] = true;
+
+    options = { ...options, locale: zhCn };
+
+    app.use(ElementPlus, options);
+
+    app.use({
+      install: (app) => {
+        Object.keys(icons).forEach((key) =>
+          app.component(icons[key].name, icons[key])
+        );
+      },
+    });
+
+    components.forEach((component) => app.use(component));
+
+    if (options) {
+      provideGlobalConfig({ ...options, namespace: 'bwa' }, app, true);
+    }
+  };
+
+  return install;
+};

package/src/math/Rectangle.js

@@ -0,0 +1,28 @@
+export class Rectangle {
+  constructor(x, y, width, height) {
+    if (width < 0) {
+      x = x - (width = -width);
+    }
+
+    if (height < 0) {
+      y = y - (height = -height);
+    }
+
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.left = x;
+    this.top = y;
+    this.right = x + width;
+    this.bottom = y + height;
+    this.cx = x + width / 2;
+    this.cy = y + height / 2;
+  }
+
+  pointIn(x, y) {
+    return (
+      x >= this.left && x <= this.right && y >= this.top && y <= this.bottom
+    );
+  }
+}

package/src/menu/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import Menu from './menu.vue';
+
+export const BwaMenu = withInstall(Menu);
+
+export default BwaMenu;