@gct-paas/design 0.1.4-dev.1 → 0.1.4-dev.11

package/es/components/field-transfer/hooks/useTreeData.mjs

@@ -0,0 +1,165 @@
+import { ref, computed, reactive, watch } from 'vue';
+import { traverse, isGroupNode, findNode, traverseFilter, generateData } from '../utils/tree-tool.mjs';
+
+const MAX_ENABLE_COUNT = 5e6;
+const useTreeData = (useMultiLevelTHead, isResetData, draggable, maxEnableCount, onColumnsChange) => {
+  const leafKeys = ref([]);
+  const refOriginalLeafKeys = ref([]);
+  const refTotalFields = ref(0);
+  const multiple = computed(() => useMultiLevelTHead);
+  const root = reactive({
+    key: "0",
+    title: "root",
+    children: [],
+    level: 0,
+    type: "group",
+    parent: null
+  });
+  const onChangeTree = (columnsData, fields) => {
+    const keys = [];
+    function handle(items, parent) {
+      return items.map(({ id, ...restItem }) => {
+        const node = {
+          ...restItem,
+          key: id,
+          parent,
+          level: parent.level + 1,
+          isLeaf: restItem.type === "field"
+        };
+        if (!node.isLeaf) {
+          node.children = handle(node.children, node);
+        } else {
+          const fieldItem = fields.find((item) => item.id === id);
+          if (fieldItem) {
+            node.disabled = fieldItem.disabled;
+            if (fieldItem) {
+              node.disableCheckbox = fieldItem.disabled;
+              node.fieldType = fieldItem.type;
+              keys.push(id);
+              refTotalFields.value += 1;
+            }
+          }
+        }
+        return node;
+      });
+    }
+    root.children = handle(columnsData, root);
+    leafKeys.value = keys;
+    if (!isResetData) {
+      refOriginalLeafKeys.value = [...keys];
+    }
+  };
+  watch(
+    multiple,
+    (val) => {
+      if (!val) {
+        const result = [];
+        traverse((node) => {
+          if (!isGroupNode(node)) {
+            result.push({
+              ...node,
+              parent: root
+            });
+          }
+        }, root.children);
+        root.children = result;
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  const data = computed(() => root.children);
+  const refresh = () => {
+    root.children = [...root.children];
+  };
+  const handleColumnsChange = () => {
+    onColumnsChange?.(generateData(root.children));
+  };
+  const remainCount = computed(
+    () => (maxEnableCount ?? MAX_ENABLE_COUNT) - leafKeys.value.length
+  );
+  function getContainerNode() {
+    return root;
+  }
+  return {
+    data,
+    root,
+    leafKeys,
+    multiple,
+    draggable,
+    remainCount,
+    addTreeNodes(nodes, parent) {
+      const p = findNode(parent.key, root);
+      const newNodes = nodes.map(
+        (item) => ({
+          ...item,
+          level: p.level + 1,
+          parent: p
+        })
+      );
+      p.children.push(...newNodes);
+      const newLeafKeys = [...leafKeys.value];
+      nodes.forEach((item) => {
+        if (item.isLeaf) {
+          newLeafKeys.push(item.key);
+        }
+      });
+      leafKeys.value = newLeafKeys;
+      refresh();
+      setTimeout(() => {
+        newNodes.forEach((node) => {
+          if (node.isNew) {
+            node.isNew = false;
+          }
+        });
+      }, 500);
+      handleColumnsChange();
+    },
+    removeTreeNodesByKeys(keys) {
+      root.children = traverseFilter(
+        (node) => !keys.includes(node.key),
+        root.children
+      );
+      leafKeys.value = leafKeys.value.filter((key) => !keys.includes(key));
+      handleColumnsChange();
+    },
+    moveTreeNode(source, target, direction, asChildren = false) {
+      const sourceParent = findNode(source.parent.key, root);
+      let j = 0;
+      let targetParent = findNode(target.parent.key, root);
+      if (asChildren) {
+        if (isGroupNode(target)) {
+          targetParent = findNode(target.key, root);
+        } else {
+          j = targetParent.children.findIndex((item) => item.key === target.key);
+          j += 1;
+        }
+      } else {
+        j = targetParent.children.findIndex((item) => item.key === target.key);
+        j += direction === 1 ? 1 : -1;
+        j = Math.max(j, 0);
+      }
+      if (targetParent.level >= 3 && isGroupNode(source)) {
+        return;
+      }
+      const i = sourceParent.children.findIndex(
+        (item) => item.key === source.key
+      );
+      sourceParent.children.splice(i, 1);
+      if (source.parent === targetParent) {
+        targetParent.children.splice(i < j ? j - 1 : j, 0, source);
+      } else {
+        source.parent = targetParent;
+        source.level = targetParent.level + 1;
+        targetParent.children.splice(j, 0, source);
+      }
+      refresh();
+      handleColumnsChange();
+    },
+    getContainerNode,
+    onChangeTree
+  };
+};
+
+export { useTreeData };

package/es/components/field-transfer/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 使用方法
+ * @example
+ * import { useFieldTransfer } from '/@/components/FieldTransfer';
+ * const i18nInstance = useFieldTransfer();
+ * i18nInstance.open({
+ *   modelKey: '',
+ *   modalTitle: '',
+ *   isShowCascader: false,
+ *   data: [],
+ *   titles: ['aa', 'bb'],
+ *   containFieldType: [FIELD_TYPE.DATE_TIME, FIELD_TYPE.TEXT],
+ *   excludeFieldType: [FIELD_TYPE.DATE_TIME, FIELD_TYPE.TEXT],
+ *   excludeFieldKey: ['f_xxx', 'f_aaa'],
+ *   maxEnableCount: 5,
+ *   saveCallback: (params) => {
+ *      console.log('saveCallback', params);
+ *   },
+ *  });
+ */
+export { useFieldTransfer } from './useFieldTransfer';

package/es/components/field-transfer/less/AdvancedTransfer.css

@@ -0,0 +1,60 @@
+.advanced-transfer-container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  border: 1px solid #f0f0f0;
+  background-color: #fafafa;
+}
+.advanced-transfer-container .ant-transfer-list-body {
+  height: 340px;
+}
+.advanced-transfer-container .ant-transfer-list-body .field-title {
+  overflow: hidden;
+  color: #333;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.advanced-transfer-container .ant-transfer-list-body .field-title .field-icon {
+  margin-right: 4px;
+  color: var(--ant-primary-color);
+}
+.advanced-transfer-container .ant-transfer-customize-list .ant-transfer-list {
+  width: 1px;
+  background-color: #fff;
+}
+.advanced-transfer-container .ant-transfer-operation + .ant-transfer-list .ant-transfer-list-body-search-wrapper {
+  display: none;
+}
+.advanced-transfer-container .ant-transfer-list-body-customize-wrapper {
+  flex: 1;
+  overflow: auto;
+}
+.advanced-transfer-container .ant-transfer-list-content-item {
+  height: 44px;
+  border-bottom: 1px solid #eaedf1;
+}
+.advanced-transfer-container .ant-transfer-list-content-item:hover {
+  background-color: #e6eeff;
+}
+.advanced-transfer-container .ant-tree-treenode {
+  height: 44px;
+  border-bottom: 1px solid #eaedf1;
+}
+.advanced-transfer-container .ant-tree-list-holder-inner:first-child,
+.advanced-transfer-container .ant-transfer-list-content-item:first-child {
+  border-top: 1px solid #eaedf1;
+}
+.advanced-transfer-container .empty-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.advanced-transfer-container .ant-empty-image {
+  width: 90px;
+  height: 66px;
+}
+.advanced-transfer-container .ant-empty-description {
+  color: #A6A6A6;
+}

package/es/components/field-transfer/less/FieldCascader.css

@@ -0,0 +1,57 @@
+.field-cascader {
+  cursor: pointer;
+}
+.field-cascader:focus {
+  outline: none;
+}
+.field-cascader .bread {
+  color: #333;
+  display: inline-block;
+  line-height: 32px;
+}
+.field-cascader .bread .field-cascader-title {
+  color: #666;
+}
+.field-cascader .last-name {
+  color: #333;
+  margin-left: 4px;
+}
+.field-cascader .down-icon {
+  color: #bfbfbf;
+}
+.field-popup-cascader {
+  z-index: 3000;
+}
+.field-popup-cascader > div {
+  max-width: 60vw;
+}
+.field-popup-cascader .ant-cascader-menu-item {
+  padding: 0;
+  min-width: 160px;
+}
+.field-popup-cascader .ant-cascader-menu-item .ant-cascader-menu-item-content {
+  display: flex;
+  align-items: center;
+}
+.field-popup-cascader .ant-cascader-menu-item .field-ops {
+  padding-right: 0;
+  line-height: 32px;
+  padding-left: 16px;
+  flex: 1;
+}
+.field-popup-cascader .ant-cascader-menu-item .field-ops .field-ops-name .field-ops-desc {
+  color: rgba(0, 0, 0, 0.45);
+}
+.field-popup-cascader .ant-cascader-menu-item .iconfont {
+  font-size: 12px;
+  padding-right: 8px;
+  flex-shrink: 0;
+  color: rgba(0, 0, 0, 0.45);
+}
+.field-popup-cascader .ant-cascader-menu-item .ant-cascader-menu-item-expand-icon {
+  display: none;
+}
+.field-popup-cascader .ant-cascader-menu-item.ant-cascader-menu-item-disabled {
+  cursor: default;
+  color: #c3c3c3;
+}

package/es/components/field-transfer/less/TransferTree.css

@@ -0,0 +1,86 @@
+.transfer-tree-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-items: stretch;
+  height: 100%;
+  padding-top: 12px;
+}
+.transfer-tree-container .search-container {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+}
+.transfer-tree-container .search-container .search-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: #bfbfbf;
+  font-size: 14px;
+}
+.transfer-tree-container .tree-wrapper {
+  flex: 1;
+  padding-top: 12px;
+}
+.transfer-tree-container .tree-wrapper .empty-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.transfer-tree-container .ant-tree-treenode {
+  align-items: center;
+  padding: 0 12px;
+  transition: background 0.3s;
+}
+.transfer-tree-container .ant-tree-treenode:hover {
+  background-color: #e6eeff;
+}
+.transfer-tree-container .ant-tree-node-content-wrapper {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding-left: 0;
+}
+.transfer-tree-container .ant-tree-node-content-wrapper.ant-tree-node-selected {
+  background-color: transparent;
+}
+.transfer-tree-container .ant-tree-node-content-wrapper:hover {
+  background-color: transparent;
+}
+.transfer-tree-container .ant-tree-title {
+  flex: 1;
+  color: #333;
+}
+.transfer-tree-container .ant-tree-icon__customize {
+  color: var(--ant-primary-color);
+}
+.transfer-tree-container .ant-tree-treenode-disabled .ant-tree-icon__customize {
+  color: var(--ant-primary-color-disabled);
+}
+.transfer-tree-container .ant-tree-switcher-leaf-line,
+.transfer-tree-container .ant-tree-indent {
+  opacity: 0;
+}
+.transfer-tree-container .ant-tree-switcher {
+  display: none;
+  position: relative;
+  top: -1px;
+  align-self: center;
+  width: 20px;
+  background: transparent;
+  color: rgba(0, 0, 0, 0.45);
+}
+.transfer-tree-container .ant-tree-checkbox {
+  margin-top: 0;
+  margin-right: 4px;
+}
+.transfer-tree-container .ant-empty-image {
+  width: 90px;
+  height: 66px;
+}
+.transfer-tree-container .ant-empty-description {
+  color: #A6A6A6;
+}

package/es/components/field-transfer/less/TreeItem.css

@@ -0,0 +1,29 @@
+.tree-item-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.tree-item-container:hover .operation-container {
+  opacity: 1;
+}
+.tree-item-container .tree-title {
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  width: 1px;
+}
+.tree-item-container .operation-container {
+  opacity: 0;
+  white-space: nowrap;
+  color: #8c8c8c;
+}
+.tree-item-container .operation-container .iconfont {
+  color: #bfbfbf;
+  margin: 0 4px;
+  font-size: 12px;
+}
+.tree-item-container .operation-container .iconfont:hover {
+  color: #595959;
+}

package/es/components/field-transfer/useFieldTransfer.d.ts

@@ -0,0 +1,47 @@
+import { FIELD_TYPE, CreateType } from '@gct-paas/core';
+export interface IFieldTransferProps {
+    /** 模型key */
+    modelKey: string;
+    /** 模态框标题 */
+    modalTitle?: string;
+    /** 是否显示级联选择 */
+    isShowCascader?: boolean;
+    /**提示消息 */
+    promptMessage?: string;
+    /** 选中的字段数组 */
+    data: IObject[];
+    /** 穿梭框标题集合 */
+    titles?: string[];
+    /** 包含的字段 */
+    containFieldType?: FIELD_TYPE[];
+    /** 包含的字段key */
+    containFieldKey?: string[];
+    /** 禁用的字段key */
+    disabledFieldKey?: string[];
+    /** 排除的字段 */
+    excludeFieldKey?: string[];
+    /** 排除的字段 */
+    excludeFieldType?: FIELD_TYPE[];
+    /**包含的字段创建类型 */
+    containCreateType?: CreateType[];
+    /**过滤函数 */
+    filterFieldByFunction?: (field: object) => boolean;
+    /** 最大选择个数 */
+    maxEnableCount?: number;
+    /** 是否支持拖拽 */
+    draggable?: boolean;
+    /**
+     * 子表的关联主键字段的父模型字段
+     */
+    childParentModelKey?: string;
+    width?: number;
+    saveCallback?: (params: IObject) => void;
+}
+export interface IFieldTransferOptions {
+    target?: any;
+    props?: Partial<IFieldTransferProps>;
+}
+export declare function useFieldTransfer(): {
+    open: (params: Partial<IFieldTransferProps> | Partial<IFieldTransferOptions>) => Promise<void>;
+    close: () => void;
+};

package/es/components/field-transfer/useFieldTransfer.mjs

@@ -0,0 +1,51 @@
+import { ref, unref } from 'vue';
+import { has } from 'lodash-es';
+import _sfc_main from './components/modal-wrapper.vue.mjs';
+import { OverlayContainer } from '@gct-paas/core';
+
+function useFieldTransfer() {
+  let app = null;
+  let instance = null;
+  const modalKey = ref("");
+  async function open(params) {
+    let props;
+    let target = document.body;
+    if (has(params, "target") || has(params, "props")) {
+      const options = params;
+      props = options.props || {};
+      target = options.target || document.body;
+    } else {
+      props = params;
+    }
+    modalKey.value = `field-transfer-modal-${Math.random().toString(16).substring(8)}`;
+    const propsData = {
+      width: 740,
+      modalKey: unref(modalKey),
+      destroyCallback: close,
+      ...props
+    };
+    if (!app) {
+      const container = document.createElement("div");
+      container.id = unref(modalKey);
+      const t = unref(target);
+      t?.appendChild(container);
+      app = await OverlayContainer.createVueApp(_sfc_main, propsData);
+      instance = app.mount(container);
+    }
+    instance.open();
+  }
+  function close() {
+    document.querySelector(`#${unref(modalKey)}`).remove();
+    if (app) {
+      app.unmount();
+      app = null;
+      instance = null;
+    }
+  }
+  return {
+    open,
+    close
+  };
+}
+
+export { useFieldTransfer };

package/es/components/field-transfer/utils/tree-tool.d.ts

@@ -0,0 +1,6 @@
+import { ColumnItem, TreeNodeGroup, TreeNode } from '../types/index.d';
+export declare function isGroupNode(node: TreeNode): node is TreeNodeGroup;
+export declare function generateData(nodes: TreeNode[]): ColumnItem[];
+export declare function traverse(handler: (node: TreeNode) => void, items: TreeNode[]): void;
+export declare function findNode(key: string, root: TreeNodeGroup): TreeNode | undefined;
+export declare function traverseFilter(handler: (node: TreeNode) => boolean, items: TreeNode[]): TreeNode[];

package/es/components/field-transfer/utils/tree-tool.mjs

@@ -0,0 +1,73 @@
+function isGroupNode(node) {
+  return node.type === "group";
+}
+function generateData(nodes) {
+  return nodes.map((node) => {
+    if (isGroupNode(node)) {
+      return {
+        width: node.width,
+        id: node.key,
+        title: node.title,
+        type: node.type,
+        children: generateData(node.children || [])
+      };
+    }
+    return {
+      width: node.width,
+      id: node.key,
+      title: node.title,
+      type: node.type,
+      modelKey: node.modelKey
+    };
+  });
+}
+function traverse(handler, items) {
+  items.forEach((node) => {
+    handler(node);
+    if (isGroupNode(node)) {
+      traverse(handler, node.children);
+    }
+  });
+}
+function findNode(key, root) {
+  let result;
+  const handler = (items) => {
+    return items.some((node) => {
+      if (node.key === key) {
+        result = node;
+        return true;
+      }
+      if (isGroupNode(node)) {
+        return handler(node.children);
+      }
+      return false;
+    });
+  };
+  if (root.key === key) {
+    return root;
+  }
+  handler(root.children);
+  return result;
+}
+function traverseFilter(handler, items) {
+  const result = [];
+  items.forEach((node) => {
+    if (isGroupNode(node)) {
+      const children = traverseFilter(handler, node.children);
+      if (children.length === 0 && !handler(node)) {
+        return;
+      }
+      result.push({
+        ...node,
+        children
+      });
+      return;
+    }
+    if (handler(node)) {
+      result.push(node);
+    }
+  });
+  return result;
+}
+
+export { findNode, generateData, isGroupNode, traverse, traverseFilter };

package/es/components/icon/downleft-icon.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    Icon: import('@ant-design/icons-vue/lib/components/Icon').IconType;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/icon/downleft-icon.vue.mjs

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue';
+import Icon from '@ant-design/icons-vue';
+
+const _sfc_main = defineComponent({
+  name: "DownleftIcon",
+  components: {
+    Icon
+  }
+});
+
+export { _sfc_main as default };

package/es/components/icon/downleft-icon.vue2.mjs

@@ -0,0 +1,27 @@
+import _sfc_main from './downleft-icon.vue.mjs';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon = resolveComponent("icon");
+  return openBlock(), createBlock(_component_icon, null, {
+    component: withCtx(() => [..._cache[0] || (_cache[0] = [
+      createElementVNode("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        viewBox: "0 0 1024 1024"
+      }, [
+        createElementVNode("path", {
+          d: "M128 128h768a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64z m32 64a32 32 0 0 0-32 32v576a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V224a32 32 0 0 0-32-32H160z m64 320h192a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H224a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32z",
+          fill: "#000000",
+          "p-id": "4633"
+        })
+      ], -1)
+    ])]),
+    _: 1
+  });
+}
+const DownleftIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { DownleftIcon as default };

package/es/components/icon/downright-icon.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    Icon: import('@ant-design/icons-vue/lib/components/Icon').IconType;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/icon/downright-icon.vue.mjs

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue';
+import Icon from '@ant-design/icons-vue';
+
+const _sfc_main = defineComponent({
+  name: "DownrightIcon",
+  components: {
+    Icon
+  }
+});
+
+export { _sfc_main as default };

package/es/components/icon/downright-icon.vue2.mjs

@@ -0,0 +1,27 @@
+import _sfc_main from './downright-icon.vue.mjs';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon = resolveComponent("icon");
+  return openBlock(), createBlock(_component_icon, null, {
+    component: withCtx(() => [..._cache[0] || (_cache[0] = [
+      createElementVNode("svg", {
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        viewBox: "0 0 1024 1024"
+      }, [
+        createElementVNode("path", {
+          d: "M128 128h768a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64z m32 64a32 32 0 0 0-32 32v576a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V224a32 32 0 0 0-32-32H160z m448 320h192a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32h-192a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32z",
+          fill: "#000000",
+          "p-id": "4921"
+        })
+      ], -1)
+    ])]),
+    _: 1
+  });
+}
+const DownrightIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { DownrightIcon as default };