@ibiz-template/vue3-components 0.7.40 → 0.7.41-alpha.0

package/es/editor/data-picker/ibiz-transfer-picker/ibiz-transfer-picker.d.ts

@@ -0,0 +1,97 @@
+import { Ref, VNode } from 'vue';
+import { PickerEditorController } from '../picker-editor.controller';
+import './ibiz-transfer-picker.scss';
+/**
+ * 穿梭框选择（扩展）
+ *
+ * @description 用于通过穿梭框样式区分未选数据和已选数据。基于`数据选择`编辑器进行扩展，编辑器样式代码名称为：TRANSFER_PICKER
+ * @primary
+ * @editorparams {"name":"titles","parameterType":"string[]","defaultvalue":"[\"可选列表\",\"已选列表\"]","description":"用于自定义列表标题，该值为字符串数组。其中下标为 0 的字符串对应穿梭框左侧列表的标题，下标为 1 的字符串对应穿梭框右侧列表的标题"}
+ * @editorparams {"name":"buttontexts","parameterType":"string[]","defaultvalue":"[\"删除\",\"添加\"]","description":"用于自定义按钮显示文字，该值为字符串数组。其中下标为 0 的字符串对应左侧按钮文字，下标为 1 的字符串对应右侧按钮文字"}
+ * @editorparams {"name":"remotesearch","parameterType":"boolean","defaultvalue":"false","description":"是否启用远程过滤搜索功能。左侧列表默认采用本地过滤搜索，若此值为 true，则会开启远程过滤搜索"}
+ * @ignoreprops autoFocus | overflowMode | controlParams
+ * @ignoreemits blur | focus | enter
+ */
+export declare const IBizTransferPicker: import("vue").DefineComponent<{
+    value: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<PickerEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<import("@ibiz-template/core").IApiData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}, {
+    c: PickerEditorController;
+    ns: import("@ibiz-template/core").Namespace;
+    ns2: import("@ibiz-template/core").Namespace;
+    items: Ref<import("@ibiz-template/core").IApiData[]>;
+    loading: Ref<boolean>;
+    curValue: Ref<string[]>;
+    valueText: import("vue").ComputedRef<string>;
+    editorRef: Ref<any>;
+    curIndexs: Ref<string[]>;
+    leftChecked: Ref<string[]>;
+    rightChecked: Ref<string[]>;
+    titles: string[];
+    buttonTexts: string[];
+    enableRemoteSearch: boolean;
+    onSearch: (...args: unknown[]) => Promise<void>;
+    filterMethod: (query: string, item: IData) => boolean;
+    onRightChange: (selectKeys: Array<string | number>) => void;
+    onLeftCheckChange: (selectKeys: Array<string | number>) => void;
+    onRightCheckChange: (selectKeys: Array<string | number>) => void;
+    renderContentItem: (h: (type: string, vNodeProps: IParams | null, children?: string) => VNode, option: IParams) => VNode;
+    onLeftAcSearch: (query: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: unknown, _name?: string | undefined, _ignore?: boolean | undefined) => boolean;
+    blur: (_event?: import("@ibiz-template/core").IApiData | undefined) => boolean;
+    focus: (_event?: import("@ibiz-template/core").IApiData | undefined) => boolean;
+    enter: (_event?: import("@ibiz-template/core").IApiData | undefined) => boolean;
+    infoTextChange: (_text: string) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<PickerEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<import("@ibiz-template/core").IApiData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}>> & {
+    onFocus?: ((_event?: import("@ibiz-template/core").IApiData | undefined) => any) | undefined;
+    onBlur?: ((_event?: import("@ibiz-template/core").IApiData | undefined) => any) | undefined;
+    onChange?: ((_value: unknown, _name?: string | undefined, _ignore?: boolean | undefined) => any) | undefined;
+    onInfoTextChange?: ((_text: string) => any) | undefined;
+    onEnter?: ((_event?: import("@ibiz-template/core").IApiData | undefined) => any) | undefined;
+}, {
+    disabled: boolean;
+    readonly: boolean;
+    autoFocus: boolean;
+}, {}>;

package/es/editor/data-picker/ibiz-transfer-picker/ibiz-transfer-picker.mjs

@@ -0,0 +1,279 @@
+import { ref, watch, computed, onMounted, mergeProps, createVNode, defineComponent } from 'vue';
+import { getDataPickerProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
+import { debounce } from '@ibiz-template/core';
+import { clone } from 'lodash-es';
+import './components/index.mjs';
+import './ibiz-transfer-picker.css';
+import { TransferSelect } from './components/transfer/transfer.mjs';
+
+"use strict";
+const IBizTransferPicker = /* @__PURE__ */ defineComponent({
+  name: "IBizTransferPicker",
+  props: getDataPickerProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("picker");
+    const ns2 = useNamespace("transfer-picker");
+    const c = props.controller;
+    const editorModel = c.model;
+    const curValue = ref([]);
+    const items = ref([]);
+    const selectItems = ref([]);
+    const loading = ref(false);
+    const editorRef = ref();
+    const curIndexs = ref([]);
+    const leftChecked = ref([]);
+    const rightChecked = ref([]);
+    const rightSelects = ref([]);
+    const valueType = c.model.valueType;
+    const valueSeparator = c.model.valueSeparator || ",";
+    let titles = [ibiz.i18n.t("editor.transferPicker.optionalList"), ibiz.i18n.t("editor.transferPicker.selectedList")];
+    let buttonTexts = [ibiz.i18n.t("app.delete"), ibiz.i18n.t("app.add")];
+    let enableRemoteSearch = false;
+    if (editorModel.editorParams) {
+      const {
+        editorParams
+      } = editorModel;
+      if (editorParams.titles) {
+        try {
+          titles = JSON.parse(editorParams.titles);
+        } catch (error) {
+          ibiz.log.info(error);
+        }
+      }
+      if (editorParams.buttontexts) {
+        try {
+          buttonTexts = JSON.parse(editorParams.buttontexts);
+        } catch (error) {
+          ibiz.log.info(error);
+        }
+      }
+      if (editorParams.remotesearch)
+        enableRemoteSearch = editorParams.remotesearch === "true";
+    }
+    watch(() => props.value, (newVal) => {
+      curValue.value = [];
+      selectItems.value = [];
+      if (newVal) {
+        if (valueType === "OBJECTS") {
+          newVal.forEach((item) => {
+            const _item = clone(item);
+            Object.assign(_item, {
+              [c.keyName]: item[c.objectIdField],
+              [c.textName]: item[c.objectNameField]
+            });
+            if (c.objectValueField) {
+              Object.assign(_item, {
+                ...item[c.objectValueField]
+              });
+              delete _item[c.objectValueField];
+            }
+            if (_item[c.keyName]) {
+              selectItems.value.push(_item);
+            }
+          });
+        } else if (c.objectIdField && valueSeparator) {
+          const values = newVal.split(valueSeparator);
+          values.forEach((value) => {
+            selectItems.value.push({
+              [c.keyName]: value
+            });
+          });
+        } else {
+          try {
+            selectItems.value = JSON.parse(newVal);
+          } catch (error) {
+            ibiz.log.error("SIMPLE\u7C7B\u578B\u5730\u5740\u680F\u503C\u683C\u5F0F".concat(newVal, "\u4E0D\u7B26\u5408JSON\u5B57\u7B26\u4E32\u8981\u6C42"));
+          }
+        }
+        selectItems.value.forEach((item) => {
+          curValue.value.push(item[c.keyName]);
+          const index = items.value.findIndex((i) => Object.is(i[c.keyName], item[c.keyName]));
+          if (index < 0) {
+            items.value.push({
+              [c.keyName]: item[c.keyName],
+              [c.textName]: item[c.textName]
+            });
+          }
+        });
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    watch(editorRef, (newVal) => {
+      if (props.autoFocus && newVal && newVal.focus) {
+        newVal.focus();
+      }
+    });
+    const handleRightChange = (result) => {
+      const selects = [];
+      if (result && Array.isArray(result)) {
+        result.forEach((select) => {
+          Object.assign(select, {
+            [c.keyName]: select[c.keyName] ? select[c.keyName] : select.srfkey,
+            [c.textName]: select[c.textName] ? select[c.textName] : select.srfmajortext
+          });
+          if (valueType === "OBJECTS") {
+            selects.push(c.handleObjectParams(select));
+          } else if (c.objectIdField) {
+            selects.push(select[c.keyName]);
+          } else {
+            selects.push({
+              [c.keyName]: select[c.keyName],
+              [c.textName]: select[c.textName]
+            });
+          }
+          const index = items.value.findIndex((item) => Object.is(item[c.keyName], select[c.keyName]));
+          if (index < 0) {
+            items.value.push(select);
+          }
+        });
+      }
+      let value = null;
+      if (selects.length > 0) {
+        if (valueType === "OBJECTS") {
+          value = selects;
+        } else {
+          value = c.objectIdField ? selects.join(valueSeparator) : JSON.stringify(selects);
+        }
+      }
+      emit("change", value);
+    };
+    const filterMethod = (query, item) => {
+      const textName = item[c.textName];
+      return !query || (textName == null ? void 0 : textName.toLowerCase().includes(query == null ? void 0 : query.toLowerCase()));
+    };
+    const onRightChange = (selectKeys) => {
+      const selects = selectKeys.map((key) => {
+        const selcetItem = items.value.find((item) => item[c.keyName] === key);
+        return selcetItem || {};
+      });
+      handleRightChange(selects);
+    };
+    const onLeftCheckChange = (selectKeys) => {
+      leftChecked.value = selectKeys;
+    };
+    const onRightCheckChange = (selectKeys) => {
+      rightChecked.value = selectKeys;
+    };
+    const getServiceData = async (query) => {
+      let data = [];
+      if (c.model.appDataEntityId) {
+        try {
+          const trimQuery = query.trim();
+          const res = await c.getServiceData(trimQuery, props.data);
+          if (res) {
+            data = res.data;
+          }
+        } catch (error) {
+          ibiz.log.error(error);
+        }
+      }
+      return data;
+    };
+    const onSearch = async (...args) => {
+      rightSelects.value = items.value.filter((item) => !!selectItems.value.find((item2) => item2[c.keyName] === item[c.keyName]));
+      const query = args[0] || "";
+      loading.value = true;
+      const data = await getServiceData(query);
+      if (data) {
+        items.value = [...rightSelects.value, ...data.filter((item) => !rightSelects.value.find((item2) => item2[c.keyName] === item[c.keyName]))];
+      }
+      rightChecked.value = [...rightChecked.value];
+      leftChecked.value = [...leftChecked.value];
+      loading.value = false;
+    };
+    const debounceSearch = debounce(onSearch, 1e3);
+    const onLeftAcSearch = (query) => {
+      debounceSearch(query);
+    };
+    const valueText = computed(() => {
+      return selectItems.value.map((item) => {
+        return item[c.textName];
+      }).join(",");
+    });
+    watch(valueText, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        emit("infoTextChange", newVal);
+      }
+    }, {
+      immediate: true
+    });
+    onMounted(() => {
+      if (c.objectNameField) {
+        items.value = [];
+        onSearch("");
+      }
+    });
+    const renderContentItem = (h, option) => {
+      return h("span", {
+        title: option[c.textName]
+      }, option[c.textName]);
+    };
+    return {
+      c,
+      ns,
+      ns2,
+      items,
+      loading,
+      curValue,
+      valueText,
+      editorRef,
+      curIndexs,
+      leftChecked,
+      rightChecked,
+      titles,
+      buttonTexts,
+      enableRemoteSearch,
+      onSearch,
+      filterMethod,
+      onRightChange,
+      onLeftCheckChange,
+      onRightCheckChange,
+      renderContentItem,
+      onLeftAcSearch
+    };
+  },
+  render() {
+    const editContent = createVNode("div", {
+      "class": [this.ns.e("autocomplete")]
+    }, [createVNode(TransferSelect, mergeProps({
+      "ref": "editorRef",
+      "modelValue": this.curValue,
+      "onUpdate:modelValue": ($event) => this.curValue = $event,
+      "data": this.items,
+      "readonly": this.readonly || this.disabled,
+      "left-default-checked": this.leftChecked,
+      "right-default-checked": this.rightChecked,
+      "props": {
+        key: this.c.keyName,
+        label: this.c.textName
+      },
+      "filterable": true,
+      "filter-placeholder": this.c.placeHolder,
+      "enableRemoteSearch": this.enableRemoteSearch,
+      "titles": this.titles,
+      "button-texts": this.buttonTexts,
+      "format": {
+        noChecked: "${total}",
+        hasChecked: "${checked}/${total}"
+      },
+      "target-order": this.enableRemoteSearch ? "push" : "original",
+      "loading": this.loading,
+      "filterMethod": this.filterMethod,
+      "renderContent": this.renderContentItem,
+      "onChange": this.onRightChange,
+      "onLeftCheckChange": this.onLeftCheckChange,
+      "onRightCheckChange": this.onRightCheckChange,
+      "onLeftAcSearch": this.onLeftAcSearch
+    }, this.$attrs), null)]);
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns2.b(), this.disabled ? this.ns.m("disabled") : ""]
+    }, [editContent]);
+  }
+});
+
+export { IBizTransferPicker };

package/es/editor/data-picker/index.d.ts

@@ -4,5 +4,6 @@ export { IBizPickerDropDown } from './ibiz-picker-dropdown/ibiz-picker-dropdown'
 export { IBizPickerLink } from './ibiz-picker-link/ibiz-picker-link';
 export { IBizPickerEmbedView } from './ibiz-picker-embed-view/ibiz-picker-embed-view';
 export { IBizPickerSelectView } from './ibiz-picker-select-view/ibiz-picker-select-view';
+export { IBizTransferPicker } from './ibiz-transfer-picker/ibiz-transfer-picker';
 export * from './picker-editor.controller';
 export * from './picker-editor.provider';

package/es/editor/data-picker/index.mjs

@@ -4,6 +4,7 @@ export { IBizPickerDropDown } from './ibiz-picker-dropdown/ibiz-picker-dropdown.
 export { IBizPickerLink } from './ibiz-picker-link/ibiz-picker-link.mjs';
 export { IBizPickerEmbedView } from './ibiz-picker-embed-view/ibiz-picker-embed-view.mjs';
 export { IBizPickerSelectView } from './ibiz-picker-select-view/ibiz-picker-select-view.mjs';
+export { IBizTransferPicker } from './ibiz-transfer-picker/ibiz-transfer-picker.mjs';
 export { PickerEditorController } from './picker-editor.controller.mjs';
 export { DataPickerEditorProvider } from './picker-editor.provider.mjs';
 

package/es/editor/data-picker/picker-editor.provider.mjs

@@ -32,6 +32,9 @@ class DataPickerEditorProvider {
       case "PICKUPVIEW":
         componentName = "IBizPickerEmbedView";
         break;
+      case "TRANSFER_PICKER":
+        componentName = "IBizTransferPicker";
+        break;
       default:
     }
     this.formEditor = componentName;

package/es/editor/dropdown-list/dropdown-list-editor.provider.mjs

@@ -19,6 +19,9 @@ class DropDownListEditorProvider {
       case "VIRTUALIZED_LIST":
         componentName = "IBizVirtualizedList";
         break;
+      case "TREE_PICKER":
+        componentName = "IBizTreePicker";
+        break;
       default:
     }
     this.formEditor = componentName;

package/es/editor/dropdown-list/ibiz-tree-picker/ibiz-tree-picker.css

@@ -0,0 +1 @@
+.ibiz-tree-picker{--ibiz-tree-picker-font-size:var(--ibiz-editor-default-text-size);display:flex;flex-direction:column;width:100%;height:100%;max-height:100%}.ibiz-tree-picker__search .el-input{--el-input-height:var(--ibiz-height-control-default);--el-font-size-base:var(--ibiz-tree-picker-font-size);margin:var(--ibiz-spacing-tight) 0}.ibiz-tree-picker__tree{--ibiz-font-size-regular:var(--ibiz-tree-picker-font-size);height:100%;overflow:auto}.ibiz-tree-picker__tree .el-checkbox.el-checkbox.el-checkbox .el-checkbox__inner{width:var(--ibiz-tree-picker-font-size);height:var(--ibiz-tree-picker-font-size)}

package/es/editor/dropdown-list/ibiz-tree-picker/ibiz-tree-picker.d.ts

@@ -0,0 +1,93 @@
+import { Ref } from 'vue';
+import { DropDownListEditorController } from '../dropdown-list-editor.controller';
+import './ibiz-tree-picker.scss';
+/**
+ * 树形多选（扩展）
+ *
+ * @description 用于以树形样式呈现选择项，支持搜索过滤、全选、取消全选、全展开及全收起功能，常用于绘制树形结构的代码表数据。基于`下拉列表框（多选）`编辑器进行扩展，编辑器样式代码名称为：TREE_PICKER
+ * @primary
+ * @editorparams {"name":"showtoolbar","parameterType":"boolean","defaultvalue":"false","description":"是否显示头部工具栏。默认不显示，若此值为 true，则会在头部呈现快捷工具栏，该工具栏可用于执行全选、取消全选、全展开以及全收起操作"}
+ * @ignoreprops autoFocus | overflowMode | controlParams
+ * @ignoreemits blur | focus | enter | infoTextChange
+ */
+export declare const IBizTreePicker: import("vue").DefineComponent<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DropDownListEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<import("@ibiz-template/core").IApiData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    c: DropDownListEditorController;
+    items: Ref<readonly import("@ibiz-template/core").IApiData[]>;
+    treeRef: Ref<any>;
+    filterText: Ref<string>;
+    treeNodes: Ref<import("@ibiz-template/core").IApiData[]>;
+    isCancel: Ref<boolean>;
+    defaultCheckedKeys: Ref<string[]>;
+    expandedKeys: Ref<string[]>;
+    showToolbar: boolean;
+    onNodeExpand: (...args: IData[]) => void;
+    onNodeCollapse: (...args: IData[]) => void;
+    filterNode: (value: string, data: IData) => boolean;
+    customNodeClass: (data: IData) => string | null;
+    onAllExpand: () => void;
+    onAllCollapse: () => void;
+    onAllSelect: () => void;
+    onAllCancel: () => void;
+    onCheck: (...args: IData[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: unknown, _name?: string | undefined, _ignore?: boolean | undefined) => boolean;
+    blur: (_event?: import("@ibiz-template/core").IApiData | undefined) => boolean;
+    focus: (_event?: import("@ibiz-template/core").IApiData | undefined) => boolean;
+    enter: (_event?: import("@ibiz-template/core").IApiData | undefined) => boolean;
+    infoTextChange: (_text: string) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DropDownListEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<import("@ibiz-template/core").IApiData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}>> & {
+    onFocus?: ((_event?: import("@ibiz-template/core").IApiData | undefined) => any) | undefined;
+    onBlur?: ((_event?: import("@ibiz-template/core").IApiData | undefined) => any) | undefined;
+    onChange?: ((_value: unknown, _name?: string | undefined, _ignore?: boolean | undefined) => any) | undefined;
+    onInfoTextChange?: ((_text: string) => any) | undefined;
+    onEnter?: ((_event?: import("@ibiz-template/core").IApiData | undefined) => any) | undefined;
+}, {
+    disabled: boolean;
+    readonly: boolean;
+    autoFocus: boolean;
+}, {}>;