@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.8

package/lib/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.cjs

@@ -0,0 +1,332 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-picker-select-view.css');
+var ramda = require('ramda');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizPickerSelectView = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizPickerSelectView",
+  props: vue3Util.getDataPickerProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("picker-select-view");
+    const c = props.controller;
+    const editorModel = c.model;
+    const singleSelect = vue.ref(true);
+    if (editorModel.editorParams) {
+      if (editorModel.editorParams.multiple) {
+        singleSelect.value = !c.toBoolean(editorModel.editorParams.multiple);
+      }
+    }
+    const keySet = vue.ref([]);
+    const items = vue.ref([]);
+    let selectedData = [];
+    const queryValue = vue.ref("");
+    const visible = vue.ref(false);
+    const pickViewWidth = vue.ref("auto");
+    const context = vue.ref(ramda.clone(c.context));
+    const params = vue.ref(ramda.clone(c.params));
+    const onInputChange = () => {
+      context.value = {
+        query: queryValue.value,
+        ...context.value
+      };
+    };
+    const triggerMenu = (show) => {
+      if (props.disabled) {
+        return;
+      }
+      if (!show) {
+        visible.value = !visible.value;
+      } else {
+        visible.value = show;
+      }
+    };
+    const {
+      componentRef: editorRef
+    } = vue3Util.useFocusAndBlur(() => emit("focus"), () => emit("blur"));
+    vue.watch(() => props.value, (newVal) => {
+      if (singleSelect.value) {
+        if (c.model.valueType === "OBJECT") {
+          queryValue.value = newVal ? newVal[c.objectNameField] : null;
+        } else {
+          queryValue.value = newVal || "";
+        }
+        if (!props.data || !c.valueItem || !props.data[c.valueItem]) {
+          ibiz.log.error("\u503C\u9879\u5F02\u5E38");
+        } else {
+          selectedData = [{
+            srfkey: props.data[c.valueItem],
+            srfmajortext: props.value
+          }];
+          params.value.selectedData = selectedData;
+        }
+      } else {
+        keySet.value = [];
+        const selectItems = [];
+        if (newVal) {
+          if (!props.data || !c.valueItem || !props.data[c.valueItem]) {
+            ibiz.log.error("\u503C\u9879\u5F02\u5E38");
+          } else {
+            const tempValue = props.data[c.valueItem].split(",");
+            const tempText = newVal.split(",");
+            tempValue.forEach((srfkey, index) => {
+              selectItems.push({
+                srfmajortext: tempText[index],
+                srfkey
+              });
+            });
+            items.value = [];
+            selectItems.forEach((item) => {
+              keySet.value.push(item.srfkey);
+              const index = items.value.findIndex((i) => Object.is(i.srfkey, item.srfkey));
+              if (index < 0) {
+                items.value.push({
+                  srfmajortext: item.srfmajortext,
+                  srfkey: item.srfkey
+                });
+              }
+            });
+          }
+        }
+        selectedData = selectItems;
+        params.value.selectedData = selectedData;
+      }
+    }, {
+      immediate: false,
+      deep: true
+    });
+    vue.onMounted(() => {
+      if (editorRef.value) {
+        pickViewWidth.value = `${editorRef.value.offsetWidth}px`;
+      }
+    });
+    const onClear = () => {
+      const dataItems = c.dataItems;
+      if (dataItems == null ? void 0 : dataItems.length) {
+        dataItems.forEach((dataItem) => {
+          emit("change", null, dataItem.id);
+        });
+      }
+      if (c.valueItem) {
+        emit("change", null, c.valueItem);
+      }
+      emit("change", null);
+    };
+    const onViewDataChange = (event) => {
+      if (event.length === 0) {
+        onClear();
+        return;
+      }
+      if (singleSelect.value) {
+        visible.value = false;
+        if (c.valueItem) {
+          const tempValue = event[0][c.keyName] ? event[0][c.keyName] : event[0].srfkey;
+          emit("change", tempValue, c.valueItem);
+        }
+        const tempText = event[0][c.textName] ? event[0][c.textName] : event[0].srfmajortext;
+        if (c.model.valueType === "OBJECT") {
+          emit("change", c.handleObjectParams(event[0]));
+        } else {
+          emit("change", tempText);
+        }
+      } else {
+        let tempValue = "";
+        let tempText = "";
+        if (event && Array.isArray(event)) {
+          items.value = [];
+          event.forEach((select) => {
+            const srfkey = select[c.keyName] ? select[c.keyName] : select.srfkey;
+            tempValue += `${srfkey},`;
+            const srfmajortext = select[c.textName] ? select[c.textName] : select.srfmajortext;
+            tempText += `${srfmajortext},`;
+            const index = items.value.findIndex((item) => Object.is(item.srfkey, srfkey));
+            if (index < 0) {
+              items.value.push({
+                srfmajortext,
+                srfkey
+              });
+            }
+          });
+        }
+        tempValue = tempValue.substring(0, tempValue.length - 1);
+        tempText = tempText.substring(0, tempText.length - 1);
+        if (c.valueItem) {
+          emit("change", tempValue, c.valueItem);
+        }
+        emit("change", tempText);
+      }
+    };
+    const openLinkView = async (e) => {
+      e.stopPropagation();
+      const res = await c.openLinkView(props.data);
+      if (res) {
+        onViewDataChange(res);
+      }
+    };
+    const onSelectChange = (selects) => {
+      const val = [];
+      if (selects.length > 0) {
+        selects.forEach((select) => {
+          const index = items.value.findIndex((item) => Object.is(item.srfkey, select));
+          if (index >= 0) {
+            val.push(items.value[index]);
+          }
+        });
+      }
+      let tempValue = "";
+      let tempText = "";
+      val.forEach((select) => {
+        const srfkey = select[c.keyName] ? select[c.keyName] : select.srfkey;
+        tempValue += `${srfkey},`;
+        const srfmajortext = select[c.textName] ? select[c.textName] : select.srfmajortext;
+        tempText += `${srfmajortext},`;
+      });
+      tempValue = tempValue.substring(0, tempValue.length - 1);
+      tempText = tempText.substring(0, tempText.length - 1);
+      if (c.valueItem) {
+        emit("change", tempValue, c.valueItem);
+      }
+      emit("change", tempText);
+    };
+    const remoteMethod = (e) => {
+      queryValue.value = e;
+    };
+    const onSelectionChange = (event) => {
+      if (event.data) {
+        onViewDataChange(event.data);
+      }
+    };
+    const modal = new runtime.Modal({
+      mode: runtime.ViewMode.DRAWER,
+      viewUsage: 2,
+      dismiss: (_data) => {
+        onSelectionChange(_data);
+      }
+    });
+    const onFocus = (e) => {
+      emit("focus", e);
+    };
+    const onBlur = (e) => {
+      emit("blur", e);
+    };
+    const handleKeyUp = (e) => {
+      if (e && e.code === "Enter") {
+        emit("enter", e);
+      }
+    };
+    return {
+      ns,
+      c,
+      singleSelect,
+      keySet,
+      items,
+      queryValue,
+      visible,
+      pickViewWidth,
+      context,
+      params,
+      editorRef,
+      onInputChange,
+      triggerMenu,
+      onViewDataChange,
+      onClear,
+      openLinkView,
+      onSelectChange,
+      remoteMethod,
+      onSelectionChange,
+      modal,
+      onFocus,
+      onBlur,
+      handleKeyUp
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b()],
+      "ref": "editorRef"
+    }, [vue.createVNode(vue.resolveComponent("el-dropdown"), {
+      "trigger": "click",
+      "popper-class": this.ns.b("popper")
+    }, {
+      default: () => {
+        let _slot;
+        return this.singleSelect ? vue.createVNode(vue.resolveComponent("el-input"), {
+          "modelValue": this.queryValue,
+          "onUpdate:modelValue": ($event) => this.queryValue = $event,
+          "class": this.ns.b("input"),
+          "placeholder": this.c.placeHolder,
+          "disabled": this.disabled,
+          "readonly": this.readonly,
+          "onChange": this.onInputChange,
+          "onFocus": (e) => {
+            this.triggerMenu(true);
+            this.onFocus(e);
+          },
+          "onBlur": this.onBlur,
+          "onKeyup": this.handleKeyUp
+        }, {
+          suffix: () => {
+            return [this.queryValue && !this.disabled && !this.readonly && vue.createVNode("ion-icon", {
+              "onClick": this.onClear,
+              "name": "clear"
+            }, null), this.c.model.linkAppViewId && vue.createVNode("ion-icon", {
+              "onClick": this.openLinkView,
+              "name": "link-arrow"
+            }, null)];
+          }
+        }) : vue.createVNode(vue.resolveComponent("el-select"), {
+          "popper-class": "select",
+          "model-value": this.keySet,
+          "placeholder": this.c.placeHolder ? this.c.placeHolder : " ",
+          "multiple": true,
+          "filterable": true,
+          "remote": true,
+          "remote-method": this.remoteMethod,
+          "onChange": this.onSelectChange,
+          "onFocus": (e) => {
+            this.triggerMenu(true);
+            this.onFocus(e);
+          },
+          "onBlur": this.onBlur,
+          "onKeyup": this.handleKeyUp,
+          "disabled": this.disabled || this.readonly
+        }, _isSlot(_slot = this.items.map((item, index) => {
+          return vue.createVNode(vue.resolveComponent("el-option"), {
+            "key": item.srfkey + index,
+            "label": item.srfmajortext,
+            "value": item.srfkey
+          }, null);
+        })) ? _slot : {
+          default: () => [_slot]
+        });
+      },
+      dropdown: () => {
+        const viewShell = vue.resolveComponent("IBizViewShell");
+        return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, {
+          default: () => [this.c.pickupView && vue.h(viewShell, {
+            context: this.context,
+            params: this.params,
+            viewId: this.c.pickupView.id,
+            style: {
+              height: "100%",
+              width: this.pickViewWidth
+            },
+            onSelectionChange: this.onSelectionChange,
+            modal: this.modal
+          })]
+        });
+      }
+    })]);
+  }
+});
+
+exports.IBizPickerSelectView = IBizPickerSelectView;

package/lib/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.css

@@ -0,0 +1 @@
+.ibiz-picker-select-view{width:100%}.ibiz-picker-select-view .el-dropdown{width:100%}.ibiz-picker-select-view .el-select{width:100%}.ibiz-picker-select-view-popper.el-popper.el-dropdown__popper{max-height:500px;overflow:auto}.ibiz-picker-select-view-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background:var(--ibiz-color-primary-text)}.ibiz-picker-select-view-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background:var(--ibiz-color-primary-text)}

package/lib/editor/data-picker/index.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var ibizPicker = require('./ibiz-picker/ibiz-picker.cjs');
+var ibizMpicker = require('./ibiz-mpicker/ibiz-mpicker.cjs');
+var ibizPickerDropdown = require('./ibiz-picker-dropdown/ibiz-picker-dropdown.cjs');
+var ibizPickerLink = require('./ibiz-picker-link/ibiz-picker-link.cjs');
+var ibizPickerEmbedView = require('./ibiz-picker-embed-view/ibiz-picker-embed-view.cjs');
+var ibizPickerSelectView = require('./ibiz-picker-select-view/ibiz-picker-select-view.cjs');
+var pickerEditor_controller = require('./picker-editor.controller.cjs');
+var pickerEditor_provider = require('./picker-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizPicker = ibizPicker.IBizPicker;
+exports.IBizMPicker = ibizMpicker.IBizMPicker;
+exports.IBizPickerDropDown = ibizPickerDropdown.IBizPickerDropDown;
+exports.IBizPickerLink = ibizPickerLink.IBizPickerLink;
+exports.IBizPickerEmbedView = ibizPickerEmbedView.IBizPickerEmbedView;
+exports.IBizPickerSelectView = ibizPickerSelectView.IBizPickerSelectView;
+exports.PickerEditorController = pickerEditor_controller.PickerEditorController;
+exports.DataPickerEditorProvider = pickerEditor_provider.DataPickerEditorProvider;

package/lib/editor/data-picker/picker-editor.controller.cjs

@@ -0,0 +1,305 @@
+'use strict';
+
+var core = require('@ibiz-template/core');
+var runtime = require('@ibiz-template/runtime');
+var ramda = require('ramda');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class PickerEditorController extends runtime.EditorController {
+  constructor() {
+    super(...arguments);
+    /**
+     * 是否多选
+     */
+    __publicField(this, "multiple", false);
+    /**
+     *选择视图相关参数
+     */
+    __publicField(this, "pickupView", null);
+    /**
+     *链接视图相关参数
+     */
+    __publicField(this, "linkView", null);
+    /**
+     *值项
+     */
+    __publicField(this, "valueItem", "");
+    /**
+     * 主键属性名称
+     */
+    __publicField(this, "keyName", "srfkey");
+    /**
+     * 主文本属性名称
+     */
+    __publicField(this, "textName", "srfmajortext");
+    /**
+     * 数据集codeName
+     */
+    __publicField(this, "interfaceName", "");
+    /**
+     * 自填模式sort排序
+     */
+    __publicField(this, "sort", "");
+    /**
+     * 不支持AC（根据编辑器类型得）
+     */
+    __publicField(this, "noAC", false);
+    /**
+     * 不支持按钮（根据编辑器类型得）
+     */
+    __publicField(this, "noButton", false);
+    /**
+     * 实体自填模式模型
+     */
+    __publicField(this, "deACMode");
+    /**
+     * 自填数据项集合（已排除了value和text)
+     */
+    __publicField(this, "dataItems", []);
+    // 对象标识属性
+    __publicField(this, "objectIdField", "");
+    // 对象名称属性
+    __publicField(this, "objectNameField", "");
+    // 对象值属性
+    __publicField(this, "objectValueField", "");
+  }
+  async onInit() {
+    var _a, _b, _c, _d;
+    super.onInit();
+    this.initParams();
+    this.valueItem = ((_a = this.model.valueItemName) == null ? void 0 : _a.toLowerCase()) || "";
+    if (this.model.appDataEntityId) {
+      if (this.model.appDEDataSetId) {
+        this.interfaceName = this.model.appDEDataSetId;
+      }
+      if (this.model.appDEACModeId) {
+        this.deACMode = await runtime.getDeACMode(
+          this.model.appDEACModeId,
+          this.model.appDataEntityId,
+          this.context.srfappid
+        );
+        if (this.deACMode) {
+          const { minorSortAppDEFieldId, minorSortDir } = this.deACMode;
+          if (minorSortAppDEFieldId && minorSortDir) {
+            this.sort = `${minorSortAppDEFieldId.toLowerCase()},${minorSortDir.toLowerCase()}`;
+          }
+          if (this.deACMode.textAppDEFieldId) {
+            this.textName = this.deACMode.textAppDEFieldId;
+          }
+          if (this.deACMode.valueAppDEFieldId) {
+            this.keyName = this.deACMode.valueAppDEFieldId;
+          }
+          if (this.deACMode.deacmodeDataItems) {
+            this.dataItems = [];
+            this.deACMode.deacmodeDataItems.forEach(
+              (dataItem) => {
+                if (dataItem.id !== "value" && dataItem.id !== "text") {
+                  this.dataItems.push(dataItem);
+                }
+              }
+            );
+          }
+        }
+      }
+    }
+    const embedViewEditors = [
+      "PICKEREX_DROPDOWNVIEW",
+      "PICKEREX_DROPDOWNVIEW_LINK",
+      "PICKUPVIEW"
+    ];
+    if (this.model.editorType && embedViewEditors.includes(this.model.editorType)) {
+      this.initPickupViewParams();
+    }
+    this.objectIdField = (_b = this.model.objectIdField) == null ? void 0 : _b.toLowerCase();
+    this.objectNameField = (_c = this.model.objectNameField) == null ? void 0 : _c.toLowerCase();
+    this.objectValueField = (_d = this.model.objectValueField) == null ? void 0 : _d.toLowerCase();
+  }
+  /**
+   * 初始化noAc和noButton
+   */
+  initParams() {
+    switch (this.model.editorType) {
+      case "PICKEREX_NOAC":
+      case "PICKEREX_NOAC_LINK":
+        this.noAC = true;
+        break;
+      case "PICKEREX_NOBUTTON":
+        this.noButton = true;
+        break;
+      default:
+        this.noButton = false;
+        this.noAC = false;
+    }
+  }
+  /**
+   * 初始化选择视图相关参数
+   */
+  async initPickupViewParams() {
+    if (this.model.pickupAppViewId) {
+      this.pickupView = await ibiz.hub.config.view.get(
+        this.model.pickupAppViewId
+      );
+    }
+  }
+  /**
+   * 初始化链接视图相关参数
+   */
+  async initLinkViewParams() {
+    if (this.model.linkAppViewId) {
+      this.linkView = await ibiz.hub.config.view.get(this.model.linkAppViewId);
+    }
+  }
+  /**
+   * 加载实体数据集数据
+   *
+   * @param {string} query 模糊匹配字符串
+   * @param {IData} data 表单数据
+   * @returns {*}  {Promise<IHttpResponse<IData[]>>}
+   * @memberof PickerEditorController
+   */
+  async getServiceData(query, data) {
+    const { context, params } = this.handlePublicParams(
+      data,
+      this.context,
+      this.params
+    );
+    const fixedParams = {};
+    if (this.sort && !Object.is(this.sort, "")) {
+      Object.assign(fixedParams, { sort: this.sort });
+    }
+    if (query) {
+      Object.assign(fixedParams, { query });
+    }
+    Object.assign(fixedParams, { size: 1e3 });
+    const tempParams = ramda.mergeDeepLeft(params, fixedParams);
+    if (this.interfaceName) {
+      const app = ibiz.hub.getApp(this.context.srfappid);
+      const res = await app.deService.exec(
+        this.model.appDataEntityId,
+        this.interfaceName,
+        context,
+        tempParams
+      );
+      return res;
+    }
+    throw new core.RuntimeModelError(this.model, "\u8BF7\u914D\u7F6E\u5B9E\u4F53\u548C\u5B9E\u4F53\u6570\u636E\u96C6");
+  }
+  /**
+   * 打开数据选择视图
+   *
+   * @param {IData} data 数据对象
+   * @param {IData[]} selectedData 选中项集合
+   * @returns {*}  {(Promise<IData[] | undefined>)}
+   * @memberof PickerEditorController
+   */
+  async openPickUpView(data, selectedData) {
+    await this.initPickupViewParams();
+    const { context, params } = this.handlePublicParams(
+      data,
+      this.context,
+      this.params
+    );
+    if (selectedData) {
+      params.selectedData = selectedData;
+    }
+    if (!this.pickupView) {
+      throw new core.RuntimeModelError(this.model, "\u8BF7\u914D\u7F6E\u6570\u636E\u9009\u62E9\u89C6\u56FE");
+    }
+    const res = await ibiz.commands.execute(
+      runtime.OpenAppViewCommand.TAG,
+      this.pickupView.id,
+      context,
+      params,
+      { openMode: "POPUPMODAL" }
+    );
+    if (res && res.ok && res.data) {
+      return res.data;
+    }
+    ibiz.log.debug("\u6A21\u6001\u53D6\u6D88\u6216\u5173\u95ED\u5F02\u5E38", res);
+  }
+  /**
+   * 打开数据链接视图
+   */
+  async openLinkView(data) {
+    const tempContext = this.context.clone();
+    if (data[this.valueItem]) {
+      tempContext.srfkey = data[this.valueItem];
+    }
+    const { context, params } = this.handlePublicParams(
+      data,
+      tempContext,
+      this.params
+    );
+    const { linkAppViewId } = this.model;
+    if (!linkAppViewId) {
+      throw new core.RuntimeModelError(this.model, "\u8BF7\u914D\u7F6E\u6570\u636E\u94FE\u63A5\u89C6\u56FE");
+    }
+    return ibiz.commands.execute(
+      runtime.OpenAppViewCommand.TAG,
+      linkAppViewId,
+      context,
+      params
+    );
+  }
+  /**
+   * 计算回填数据
+   *
+   * @author lxm
+   * @date 2022-10-24 16:10:24
+   * @param {IData} data 选中数据
+   * @returns {*}  {Promise<Array<{ id: string; value: any }>>}
+   */
+  async calcFillDataItems(data) {
+    if (this.deACMode) {
+      if (this.dataItems.length === 0) {
+        return [];
+      }
+      const result = await Promise.all(
+        this.dataItems.map((item) => {
+          const value = data[item.appDEFieldId];
+          if (item.format) {
+          } else if (item.convertToCodeItemText && item.codeListId) {
+          } else if (item.customCode) {
+          }
+          return { id: item.id, value };
+        })
+      );
+      return result;
+    }
+    return [];
+  }
+  /**
+   * 处理对象数据类型抛值
+   * @param {IData} select
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-08-22 15:58:56
+   */
+  handleObjectParams(select) {
+    const object = {};
+    if (this.objectIdField) {
+      Object.assign(object, {
+        [this.objectIdField]: select[this.keyName]
+      });
+    }
+    if (this.objectNameField) {
+      Object.assign(object, {
+        [this.objectNameField]: select[this.textName]
+      });
+    }
+    if (this.objectValueField) {
+      Object.assign(object, {
+        [this.objectValueField]: ramda.clone(select)
+      });
+    }
+    return object;
+  }
+}
+
+exports.PickerEditorController = PickerEditorController;

package/lib/editor/data-picker/picker-editor.provider.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var pickerEditor_controller = require('./picker-editor.controller.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class DataPickerEditorProvider {
+  constructor(editorType) {
+    __publicField(this, "formEditor");
+    __publicField(this, "gridEditor");
+    let componentName = "IBizPicker";
+    switch (editorType) {
+      case "PICKEREX_TRIGGER":
+        componentName = "IBizPickerDropDown";
+        break;
+      case "PICKEREX_LINK":
+      case "PICKEREX_LINKONLY":
+        componentName = "IBizPickerLink";
+        break;
+      case "ADDRESSPICKUP":
+      case "ADDRESSPICKUP_AC":
+        componentName = "IBizMPicker";
+        break;
+      case "PICKEREX_DROPDOWNVIEW":
+      case "PICKEREX_DROPDOWNVIEW_LINK":
+        componentName = "IBizPickerSelectView";
+        break;
+      case "PICKUPVIEW":
+        componentName = "IBizPickerEmbedView";
+        break;
+      default:
+    }
+    this.formEditor = componentName;
+    this.gridEditor = componentName;
+  }
+  async createController(editorModel, parentController) {
+    const c = new pickerEditor_controller.PickerEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+exports.DataPickerEditorProvider = DataPickerEditorProvider;