@farris/ui-vue/components/event-parameter/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { reactive as L, computed as x, watch as F, ref as h, defineComponent as W, inject as X, createVNode as E, Fragment as Y, isVNode as Z } from "vue";
import { FDynamicFormGroup as ee } from "../dynamic-form/index.esm.js";
import { F_MODAL_SERVICE_TOKEN as te } from "../modal/index.esm.js";
import oe, { FTabPage as ae } from "../tabs/index.esm.js";
import O from "../tree-view/index.esm.js";
import re from "../textarea/index.esm.js";
import { useCommonUtils as ne } from "../common/index.esm.js";
import ie, { FLayoutPane as R } from "../layout/index.esm.js";
import { useI18n as N } from "vue-i18n";
var b = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Textbox = "Textbox", e.Numberbox = "Numberbox", e.Combolist = "Combolist", e.Select = "Select", e.Checkbox = "Checkbox", e.Switch = "Switch", e.Tags = "Tags", e.SortEditor = "SortEditor", e.FilterEditor = "FilterEditor", e.DataEditor = "DataEditor", e.MenuIdSelector = "MenuIdSelector", e.AppIdSelector = "AppIdSelector", e.ComboLookup = "ComboLookup", e.ConfigurationParameterEditor = "ConfigurationParameterEditor", e.FieldMappingEditor = "FieldMappingEditor", e.Custom = "Custom", e))(b || {});
const P = L({}), le = {
  /** 编辑器类型 */
  data: { type: Object, default: [] },
  /** 复选框组件id  */
  id: { type: String, default: "" },
  /** 视图模型 id */
  editable: { type: Boolean, default: !0 },
  /** 参数编辑器类型 */
  editorType: { type: String, default: "" },
  /** 参数编辑器控件源 */
  editorControlSource: { type: Object, default: {} },
  /** 组件标题 */
  label: { type: String, default: "" },
  defaultValue: { type: String, default: "" },
  /** 组件值 */
  modelValue: { type: [String, Boolean, Array, Number], default: "" },
  paramData: { type: Object, default: [] },
  /** 是否展示标题 */
  showLabel: { type: Boolean, default: !0 },
  /** ID字段 */
  idField: { type: String, default: "" },
  /** 文本字段 */
  textField: { type: String, default: "" },
  /** 是否只读 */
  readonly: { type: Boolean, default: !1 },
  /** 是否必填 */
  disabled: { type: Boolean, default: !1 },
  /** 通用参数编辑器字段数据 */
  fieldData: { type: Array, default: [] },
  /** 通用参数编辑器变量数据 */
  varData: { type: Array, default: [] },
  /** 通用参数编辑器表单数据 */
  formData: { type: Array, default: [] },
  /** 当前视图模型所绑定的实体节点的字段列表 */
  activeViewModelFieldData: { type: Array, default: [] },
  /** 是否在“参数编辑器”弹框中显示“表单组件”树 */
  showOutline: { type: Boolean, default: !0 },
  editor: { type: Object, default: { type: "Default" } },
  displayFormatter: { type: Function },
  /** 自定义行状态 */
  customRowStatus: { type: Function, default: null }
};
function ue(e) {
  function r(l) {
    return e.data.find((u) => u[e.idField || "id"] === l) ? l : "";
  }
  function d() {
    var l;
    P[((l = e.editor) == null ? void 0 : l.type) || e.editorType] = {
      type: "combo-list",
      componentProps: {
        data: e.data,
        editable: e.editable === "true",
        idField: e.idField || "id",
        textField: e.textField || "label",
        enableClear: !0
      },
      checkAndProcessBeforeAssign: r
    };
  }
  function c() {
  }
  return { createEditorProps: d, onValueChange: c };
}
function de(e) {
  function r(l) {
    return typeof l == "string" && l !== "" ? l === "true" : l;
  }
  function d() {
    var l;
    P[((l = e.editor) == null ? void 0 : l.type) || e.editorType] = {
      type: "switch",
      componentProps: {},
      convertEventParamValue2EditorValue: r
    };
  }
  function c() {
  }
  return { createEditorProps: d, onValueChange: c };
}
function B(e) {
  const r = x(() => e.editor.type === b.Default || e.editorType === b.Default);
  function d() {
    var l;
    P[((l = e.editor) == null ? void 0 : l.type) || e.editorType] = {
      type: "input-group",
      componentProps: {}
    };
  }
  function c() {
  }
  return { createEditorProps: d, shouldRenderAppendButton: r, onValueChange: c };
}
function ce(e) {
  const { t: r } = N(), d = x(() => e.editor.type === b.Default || e.editorType === b.Default);
  function c(u) {
    return e.data.find((p) => {
      const n = p;
      return n.children ? n.children.some((s) => {
        var y;
        return ((y = s.data) == null ? void 0 : y.id) === u;
      }) : !1;
    }) ? u : "";
  }
  function l() {
    var u;
    P[((u = e.editor) == null ? void 0 : u.type) || e.editorType] = {
      type: "combo-tree",
      componentProps: {
        data: e.data,
        placeholder: r("eventParameter.comboTree.placeholder"),
        enableSearch: !1,
        enableClear: !0,
        editable: !1,
        readonly: !1,
        disabled: !1,
        idField: e.idField || "id",
        textField: e.textField || "name",
        mapFields: { id: "selectId" },
        multiSelect: !1,
        // customRowStatus: (visualData: VisualData) => {
        //     if (visualData.raw.children && visualData.raw.children.length) {
        //         visualData.disabled = true;
        //     }
        //     return visualData;
        // },
        customRowStatus: e.customRowStatus,
        displayFormatter: e.displayFormatter
      },
      checkAndProcessBeforeAssign: c
    };
  }
  F(() => e.data, (u, a) => {
    var p, n, i;
    u !== a && ((n = P[((p = e.editor) == null ? void 0 : p.type) || e.editorType]) == null ? void 0 : n.type) === "combo-tree" && (P[((i = e.editor) == null ? void 0 : i.type) || e.editorType].componentProps.data = u);
  });
  function f() {
  }
  return { createEditorProps: l, shouldRenderAppendButton: d, onValueChange: f };
}
function se(e) {
  function r(l) {
    return l ? "" : "/api/runtime/sys/v1.0/functions/allfuncs";
  }
  function d() {
    var l;
    P[((l = e.editor) == null ? void 0 : l.type) || e.editorType] = {
      type: "menu-lookup",
      componentProps: {
        fetchNodeApi: r
      }
    };
  }
  function c() {
  }
  return { createEditorProps: d, onValueChange: c };
}
function fe(e) {
  const { t: r } = N();
  function d() {
    var p, n;
    const u = e.editorControlSource, a = (n = (p = u == null ? void 0 : u.context) == null ? void 0 : p.schema) == null ? void 0 : n.value;
    if (!a || typeof a != "string")
      return [];
    try {
      const i = JSON.parse(a);
      return Array.isArray(i) ? i.filter((s) => s.id !== "sync") : [];
    } catch (i) {
      return console.error(`${r("eventParameter.jsonEditor.error")}`, i), [];
    }
  }
  function c() {
    return Promise.resolve({
      parameterDescriptors: d(),
      formContextData: {
        fieldData: e.fieldData,
        varData: e.varData,
        formData: e.formData
      }
    });
  }
  function l() {
    var u;
    P[((u = e.editor) == null ? void 0 : u.type) || e.editorType] = {
      type: "json-editor",
      componentProps: {
        parameterDescriptors: d(),
        formContextData: {
          fieldData: e.fieldData,
          varData: e.varData,
          formData: e.formData
        },
        beforeOpen: c,
        dialogTitle: r("eventParameter.jsonEditor.dialogTitle"),
        keyColumnTitle: r("eventParameter.jsonEditor.keyColumnTitle"),
        valueColumnTitle: r("eventParameter.jsonEditor.valueColumnTitle"),
        addButtonText: r("eventParameter.jsonEditor.addButtonText"),
        keyColumnPlaceholder: r("eventParameter.jsonEditor.keyColumnPlaceholder")
      }
    };
  }
  function f() {
  }
  return { createEditorProps: l, onValueChange: f };
}
function me(e) {
  function r(n) {
    n.forEach((i) => {
      i.sortType === "1" ? i.sortType = "desc" : i.sortType === "0" && (i.sortType = "asc");
    });
  }
  function d(n) {
    n.forEach((i) => {
      i.sortType === "desc" ? i.sortType = "1" : i.sortType === "asc" && (i.sortType = "0");
    });
  }
  function c(n) {
    if (!n && typeof n != "string")
      return [];
    try {
      const i = JSON.parse(n);
      if (Array.isArray(i))
        return r(i), i;
    } catch {
      return [];
    }
    return [];
  }
  function l(n) {
    return typeof n == "string" ? n : !Array.isArray(n) || n.length === 0 ? "" : (d(n), JSON.stringify(n));
  }
  function f() {
    const n = e.activeViewModelFieldData || [], i = [];
    return n.forEach((s) => {
      var y;
      i.push(
        Object.assign({}, s, { id: s.path, parent: (y = s.parentNode) == null ? void 0 : y.path })
      );
    }), i;
  }
  function u() {
    const n = f(), i = c(e.modelValue), s = [], y = [], S = {};
    return Promise.resolve({ fieldList: n, conditionList: i, entities: s, variables: y, formContextData: S });
  }
  function a() {
    var n;
    P[((n = e.editor) == null ? void 0 : n.type) || e.editorType] = {
      type: "sort-condition-editor",
      componentProps: {
        fields: f(),
        beforeOpen: u
      },
      convertEditorValue2EventParamValue: l
    };
  }
  function p() {
  }
  return { createEditorProps: a, onValueChange: p };
}
function pe(e) {
  function r(a) {
    if (!a && typeof a != "string")
      return [];
    try {
      const p = JSON.parse(a);
      if (Array.isArray(p))
        return p;
    } catch {
      return [];
    }
    return [];
  }
  function d(a) {
    return typeof a == "string" ? a : !Array.isArray(a) || a.length === 0 ? "" : JSON.stringify(a);
  }
  function c() {
    const a = e.activeViewModelFieldData || [], p = [];
    return a.forEach((n) => {
      var i;
      p.push(
        Object.assign({}, n, { id: n.path, parent: (i = n.parentNode) == null ? void 0 : i.path })
      );
    }), p;
  }
  function l() {
    const a = c(), p = r(e.modelValue), n = [], i = [], s = {
      fieldData: e.fieldData,
      varData: e.varData
    };
    return Promise.resolve({ fieldList: a, conditionList: p, entities: n, variables: i, formContextData: s });
  }
  function f() {
    var a;
    P[((a = e.editor) == null ? void 0 : a.type) || e.editorType] = {
      type: "filter-condition-editor",
      componentProps: {
        fields: c(),
        singleValue: !1,
        beforeOpen: l
      },
      convertEditorValue2EventParamValue: d
    };
  }
  function u() {
  }
  return { createEditorProps: f, onValueChange: u };
}
function ve(e) {
  function r() {
    var c, l;
    P[((c = e.editor) == null ? void 0 : c.type) || e.editorType] = {
      type: "custom",
      componentProps: {},
      render: (l = e.editor) == null ? void 0 : l.customRender
    };
  }
  function d() {
  }
  return { createEditorProps: r, onValueChange: d };
}
function ye(e) {
  var V;
  const r = h(((V = e.editor) == null ? void 0 : V.type) || e.editorType), d = ue(e), c = de(e), l = B(e), f = ce(e), u = se(e), a = fe(e), p = me(e), n = pe(e), i = ve(e);
  function s() {
    const C = r.value;
    return C === b.Combolist || C === b.Select ? d.createEditorProps() : C === b.Checkbox || (C === b.MenuIdSelector ? u.createEditorProps() : C === b.ConfigurationParameterEditor ? a.createEditorProps() : C === b.SortEditor ? p.createEditorProps() : C === b.FilterEditor ? n.createEditorProps() : C === b.AppIdSelector || (C === b.ComboLookup ? f.createEditorProps() : C === b.Numberbox || (C === b.Switch ? c.createEditorProps() : C === b.Custom ? i.createEditorProps() : l.createEditorProps()))), P[r.value];
  }
  function y() {
    return "input-group";
  }
  function S() {
    return {};
  }
  return { getEditorConfig: s, getEditorType: y, getEditorMap: S };
}
function ge(e) {
  const { t: r } = N(), d = L([
    {
      id: "tabField",
      title: r("eventParameter.generalEditor.field"),
      treeConfigs: {
        id: "tabFieldTree",
        columns: [{ field: "name" }],
        data: e.fieldData,
        onSelectNode: () => {
        },
        componentRef: h()
      },
      visible: !0
    },
    {
      id: "tabVar",
      title: r("eventParameter.generalEditor.tabVar"),
      treeConfigs: {
        id: "tabVarTree",
        data: e.varData
      },
      visible: !0
    },
    {
      id: "tabForm",
      title: r("eventParameter.generalEditor.form"),
      treeConfigs: {
        id: "tabFormTree",
        data: e.formData
      },
      visible: !0
    }
  ]);
  F(() => e.fieldData, (f, u) => {
    f !== u && (d[0].treeConfigs.data = f);
  }), F(() => e.varData, (f, u) => {
    f !== u && (d[1].treeConfigs.data = f);
  }), F(() => e.formData, (f, u) => {
    f !== u && (d[2].treeConfigs.data = f);
  }), F(
    () => e.showOutline,
    () => {
      d[2].visible = !!e.showOutline;
    },
    { immediate: !0 }
  );
  function c(f) {
    f.forEach((u) => {
      Object.keys(u).forEach((a) => {
        a.indexOf("__fv") > -1 && delete u[a];
      });
    });
  }
  function l() {
    c(d[0].treeConfigs.data), c(d[1].treeConfigs.data), c(d[2].treeConfigs.data);
  }
  return { tabs: d, cleanTreeData: l };
}
function be(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Z(e);
}
const D = /* @__PURE__ */ W({
  name: "FEventParameter",
  props: le,
  emits: ["valueChange", "onBlur", "applicationSelectionChange", "componentSelectionChange", "parameterChanged", "update:modelValue", "update:parameterValue", "confirm"],
  setup(e, r) {
    const {
      isNull: d,
      isUndefined: c
    } = ne(), l = h(e.id);
    B(e);
    const f = h(), u = h("tabField"), a = h(), {
      getEditorConfig: p
    } = ye(e);
    F([() => e.editor, () => e.editorType, () => e.data], () => {
      a.value = p();
    }, {
      immediate: !0
    });
    function n() {
      return !d(e.defaultValue) && !c(e.defaultValue) && e.defaultValue !== "" && (d(e.modelValue) || c(e.modelValue) || e.modelValue === "") ? e.defaultValue : e.modelValue;
    }
    function i(t) {
      var o, v;
      return (o = a.value) != null && o.checkAndProcessBeforeAssign ? a.value.checkAndProcessBeforeAssign(t) : (v = a.value) != null && v.convertEventParamValue2EditorValue ? a.value.convertEventParamValue2EditorValue(t) : t;
    }
    const s = h(n());
    s.value = i(s.value);
    const y = h(s.value);
    F(() => e.modelValue, () => {
      const t = h(n());
      s.value = i(t.value);
    }), F(a, () => {
      s.value = i(s.value);
    }), F(() => e.data, () => {
      s.value = i(s.value);
    });
    const S = X(te), V = h([{
      field: "name",
      title: "",
      dataType: "string"
    }]), C = h({
      enable: !1
    }), _ = h({
      customRowStatus: (t) => (t.collapse, t.raw.hasChildren && (t.disabled = !0), t)
    }), J = h({
      customRowStatus: (t) => (t.layer === 0 && (t.disabled = !0), t)
    }), M = x(() => {
      var t, o;
      return {
        // 编辑器类型
        type: (t = a.value) == null ? void 0 : t.type,
        // 根据不同编辑器，设置不同编辑器的属性
        ...(o = a.value) == null ? void 0 : o.componentProps,
        readonly: e.readonly
      };
    }), {
      tabs: j,
      cleanTreeData: k
    } = ge(e);
    function U(t) {
      var o;
      (o = a.value) != null && o.convertEditorValue2EventParamValue && (t = a.value.convertEditorValue2EventParamValue(t)), r.emit("update:modelValue", t), r.emit("valueChange", t);
    }
    function A(t, o) {
      const v = o.selectionStart || 0, {
        selectionEnd: m
      } = o, g = m - v, I = g > 0, T = y.value && y.value.split("") || [];
      return I ? T.splice(v, g, t) : T.splice(v, 0, t), T.join("");
    }
    function $(t, o) {
      if (!t.data)
        return;
      const {
        data: v
      } = t;
      let m = t.parentNode, {
        label: g
      } = v;
      for (; m && m.parentNode; )
        m.data && (g = m.data.label + "/" + g), m = m.parentNode;
      return A(`{DATA~/${g}}`, o);
    }
    function H(t, o) {
      const {
        statePath: v
      } = t;
      let m = o.value;
      if (v) {
        const g = v.split("/");
        if (m = v, g.length === 3) {
          const T = `#{${g[1]}}`;
          g.splice(1, 1, T), m = g.join("/");
        }
        m = `{UISTATE~${m}}`;
      }
      return A(m, o);
    }
    function w(t, o, v) {
      const m = f.value.getTextareaElement();
      switch (t) {
        case "tabForm":
          y.value = A(`#{${v.data.id}}`, m);
          break;
        case "tabField":
          y.value = $(v, m);
          break;
        case "tabVar":
          y.value = H(v.data, m);
          break;
      }
      r.emit("paramChanged", {
        tabId: t,
        index: o,
        raw: v,
        value: s.value
      });
    }
    function G() {
      return j.forEach((t) => {
        t.treeConfigs.data.forEach((o) => {
          Object.prototype.hasOwnProperty.call(o, "__fv_visible__") && delete o.__fv_visible__;
        });
      }), () => {
        let t;
        return E(ie, {
          class: "nav-tree-panel"
        }, {
          default: () => [E(R, {
            position: "left",
            width: 300,
            resizable: !1
          }, {
            default: () => [E(oe, {
              activeId: u.value,
              "onUpdate:activeId": (o) => u.value = o
            }, be(t = j.map((o) => o.visible && E(ae, {
              key: o.id,
              id: o.id,
              title: o.title
            }, {
              default: () => [o.id === "tabField" && E(O, {
                rowNumber: C,
                columnOption: {
                  fitColumns: !0,
                  fitMode: "expand"
                },
                rowOption: _.value,
                hierarchy: {
                  collapseField: "collapse"
                },
                key: o.treeConfigs.id,
                data: o.treeConfigs.data,
                columns: V.value,
                fit: !0,
                height: 340,
                onDoubleClickRow: function(m, g) {
                  w(o.id, m, g);
                }
              }, null), o.id === "tabVar" && E(O, {
                columnOption: {
                  fitColumns: !0,
                  fitMode: "expand"
                },
                rowNumber: C,
                rowOption: J.value,
                key: o.treeConfigs.id,
                data: o.treeConfigs.data,
                fit: !0,
                height: 340,
                onDoubleClickRow: function(m, g) {
                  w(o.id, m, g);
                }
              }, null), o.id === "tabForm" && E(O, {
                columnOption: {
                  fitColumns: !0,
                  fitMode: "expand"
                },
                rowNumber: C,
                key: o.treeConfigs.id,
                data: o.treeConfigs.data,
                columns: V.value,
                fit: !0,
                height: 340,
                onDoubleClickRow: function(m, g) {
                  w(o.id, m, g);
                }
              }, null)]
            }))) ? t : {
              default: () => [t]
            })]
          }), E(R, {
            position: "center"
          }, {
            default: () => [E(re, {
              ref: f,
              modelValue: y.value,
              "onUpdate:modelValue": (o) => y.value = o,
              rows: 10,
              autoHeight: !0
            }, null)]
          })]
        });
      };
    }
    function z() {
      y.value = s.value;
      const t = S.open({
        title: "参数编辑器",
        width: 900,
        height: 500,
        fitContent: !1,
        showHeader: !0,
        showCloseButton: !0,
        draggable: !0,
        render: G(),
        onClosed: () => {
          k();
        },
        buttons: [{
          class: "btn btn-secondary",
          text: "取消",
          handle: () => {
            t.destroy(), k();
          }
        }, {
          class: "btn btn-primary",
          text: "确定",
          handle: () => {
            s.value = y.value, r.emit("update:modelValue", s.value), r.emit("confirm", s.value), t.destroy(), k();
          }
        }]
      });
    }
    function K() {
      return M.value.type === "input-group" ? E("span", {
        class: "f-icon f-icon-lookup",
        onClick: z,
        style: "margin-top: 2px;margin-right: 5px;color: rgba(0, 0, 0, .25)"
      }, null) : E(Y, null, null);
    }
    const q = () => {
      r.emit("update:modelValue", "");
    }, Q = () => f.value.elementRef;
    return r.expose({
      getInputRef: Q
    }), () => {
      var t, o;
      return ((t = a.value) == null ? void 0 : t.type) === "custom" && ((o = a.value) != null && o.render) ? a.value.render() : E(ee, {
        id: l.value,
        editor: M.value,
        modelValue: s.value,
        "onUpdate:modelValue": (v) => s.value = v,
        showLabel: !1,
        customClass: "f-event-parameter",
        onChange: U,
        onClear: q
      }, {
        groupTextTemplate: () => K()
      });
    };
  }
});
D.install = (e) => {
  e.component(D.name, D);
};
D.register = (e, r, d, c) => {
  e["event-parameter"] = D, r["event-parameter"] = D;
};
D.registerDesigner = (e, r, d) => {
  e["event-parameter"] = D, r["event-parameter"] = D;
};
export {
  b as EditorType,
  D as FEventParameter,
  D as default,
  P as editorMap,
  le as eventParameterProps
};