@farris/ui-vue/components/external-container/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as R, createVNode as v, inject as x, ref as F, createTextVNode as E, computed as j, provide as A, watch as $, onMounted as J, Fragment as O } from "vue";
import { resolveAppearance as q, createPropsResolver as z } from "../dynamic-resolver/index.esm.js";
import { DgControl as H, useDesignerComponent as L, FDesignerItem as K } from "../designer-canvas/index.esm.js";
import { FormSchemaRepositorySymbol as k } from "../common/index.esm.js";
import { BaseControlProperty as _ } from "../property-panel/index.esm.js";
import { FLoadingService as W } from "../loading/index.esm.js";
import { FNotifyService as D } from "../notify/index.esm.js";
import { FSchemaSelector as G } from "../schema-selector/index.esm.js";
const Q = /* @__PURE__ */ new Map([
  ["appearance", q]
]);
function X(a, n, e, t) {
  const o = e.parentComponentInstance;
  return o && t && (o.schema.type === H["list-nav"].type ? n.appearance = {
    class: "position-relative h-100"
  } : n.appearance = {
    class: "position-relative",
    style: "height:300px;flex-shrink: 0;"
  }), n;
}
const Y = "https://json-schema.org/draft/2020-12/schema", Z = "https://farris-design.gitee.io/external-container.schema.json", V = "external-container", ee = "A Farris Visual Component", te = "object", ne = {
  id: {
    description: "The unique identifier for a external-container",
    type: "string"
  },
  type: {
    description: "The type string of external-container",
    type: "string",
    default: "external-container"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string",
        default: ""
      }
    },
    default: {}
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  url: {
    description: "The url that load the schema from",
    type: "string"
  },
  externalComponent: {
    description: "The unique identifier for component",
    type: "object",
    default: {}
  }
}, oe = [
  "id",
  "type",
  "externalComponent"
], ae = {
  onCommunication: "通讯事件"
}, ie = {
  $schema: Y,
  $id: Z,
  title: V,
  description: ee,
  type: te,
  properties: ne,
  required: oe,
  events: ae
}, B = {
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" },
  componentType: { type: String, default: "" },
  url: { type: String, default: "" },
  schema: { type: Object },
  useIsolateJs: { type: Boolean, default: !1 },
  externalComponent: { type: Object, default: {} }
}, U = z(B, ie, Q, X), T = /* @__PURE__ */ R({
  name: "FExternalContainer",
  props: B,
  emits: [],
  setup(a, n) {
    return () => v("div", {
      class: a.customClass,
      style: a.customStyle
    }, [n.slots.default && n.slots.default()]);
  }
}), re = {
  convertFrom: (a, n) => {
    var e;
    return (e = a.externalComponent) == null ? void 0 : e.name;
  },
  convertTo: (a, n, e) => {
    e && (a.externalComponent || (a.externalComponent = {}), Object.assign(a.externalComponent, {
      id: e.id,
      nameSpace: e.nameSpace,
      code: e.code,
      name: e.name,
      fileName: e.fileName,
      bizobjectID: e.bizobjectID,
      relativePath: e.relativePath,
      projectName: e.projectName
    }));
  }
};
class se extends _ {
  constructor(n, e) {
    super(n, e);
  }
  getPropertyConfig(n, e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(n), this.propertyConfig.categories.appearance = this.getAppearanceConfig(n), this.propertyConfig.categories.content = this.getContentConfig(n), this.propertyConfig.categories.eventsEditor = this.getEventPropConfig(n), this.propertyConfig;
  }
  getContentConfig(n) {
    const e = this;
    return {
      description: "外部表单",
      title: "内容",
      properties: {
        externalComponent: {
          description: "引入的外部表单",
          title: "引入表单",
          type: "string",
          editor: {
            type: "schema-selector",
            title: "选择表单",
            requiredTip: "请选择表单",
            modalHeight: 600,
            modalWidth: 950,
            editorParams: {
              formBasicInfo: this.formSchemaUtils.getFormMetadataBasicInfo()
            },
            viewOptions: this.formSchemaUtils.designerMode === "PC_RTC" ? [
              { id: "total", title: "全部", type: "Card", dataSource: "Total", pagination: !0 }
            ] : [
              { id: "recommend", title: "推荐", type: "Card", dataSource: "Recommand", pagination: !0 },
              { id: "total", title: "全部", type: "Card", dataSource: "Total", pagination: !0 }
            ],
            repositoryToken: k,
            validateFunction: (t) => {
              if (t.id)
                return e.checkFormValidtion(t);
            }
          },
          $converter: re
        }
      },
      setPropertyRelates(t) {
        (t == null ? void 0 : t.propertyID) === "externalComponent" && e.syncCommunicationAfterFormChanged(t, n);
      }
    };
  }
  checkFormValidtion(n) {
    const e = this.designerHostService.formSchemaUtils.getFormMetadataBasicInfo(), t = W.show();
    return this.designerHostService.metadataService.getPickMetadata(e.relativePath, n).then((o) => {
      t.value.close();
      const m = JSON.parse(o == null ? void 0 : o.metadata.content).Contents, { templateId: u, name: c } = m.module;
      if (["list-component", "tree-component", "list-view-component"].includes(u))
        return !0;
      const g = `表单【${c}】不属于组件类模板，无法被引入到当前表单。`;
      return this.designerHostService.messagerService.warning(g), !1;
    }, (o) => {
      var p;
      return t.value.close(), this.designerHostService.messagerService.error(((p = o == null ? void 0 : o.response) == null ? void 0 : p.data.Message) || `查询表单【${n.name}】失败`), !1;
    });
  }
  getEventPropConfig(n) {
    const e = [
      {
        label: "onCommunication",
        name: "通讯事件"
      }
    ], t = this, o = t.eventsEditorUtils.formProperties(n, t.viewModelId, e);
    return {
      title: "事件",
      hideTitle: !0,
      properties: t.createBaseEventProperty(o),
      refreshPanelAfterChanged: !0,
      tabId: "commands",
      tabName: "交互",
      setPropertyRelates(m, u) {
        const c = m.propertyValue;
        delete n[t.viewModelId], c && (c.setPropertyRelates = this.setPropertyRelates, t.eventsEditorUtils.saveRelatedParameters(n, t.viewModelId, c.events, c));
      }
    };
  }
  /**
   * 切换外部表单后，删除已有的通讯配置（场景：已配置组件通讯，再切换外部表单）
   */
  syncCommunicationAfterFormChanged(n, e) {
    if (!e.onCommunication)
      return;
    const t = e.onCommunication.replace(/communication:/g, "").split(";");
    if (!(t != null && t.length))
      return;
    const o = this.designerHostService.formSchemaUtils.getFormSchema(), p = o.module.communications || [];
    let m = !1;
    if (t.map((u) => {
      const c = p.find((g) => g.id === u);
      c != null && c.source && c.source.formId !== e.externalComponent.id && (c.needDelete = !0, m = !0);
    }), o.module.communications = o.module.communications.filter((u) => !u.needDelete), m) {
      e.onCommunication = "";
      const u = new D();
      u.globalConfig = { position: "top-center" }, u.warning({ message: "切换引入表单后，请重新配置组件通讯。" });
    }
  }
}
function ce(a, n) {
  const e = a.schema;
  function t() {
    return !1;
  }
  function o() {
    return !0;
  }
  function p() {
    return !0;
  }
  function m() {
    return !0;
  }
  function u() {
    return "position:relative;padding:0 !important;border:0;overflow:hidden;";
  }
  function c(l) {
    return new se(l, n).getPropertyConfig(e, a.componentInstance.value);
  }
  function g() {
    n != null && n.formSchemaUtils && n.formSchemaUtils.externalFormSchema.delete(a.schema.id);
  }
  return { canAccepts: t, checkCanDeleteComponent: o, checkCanMoveComponent: p, hideNestedPaddingInDesginerView: m, getStyles: u, getPropsConfig: c, onRemoveComponent: g };
}
const le = /* @__PURE__ */ R({
  name: "FImportExteranlSchema",
  emits: ["close", "submit"],
  setup(a, n) {
    const e = x("designer-host-service");
    let t;
    const o = F(), p = new D();
    p.globalConfig = {
      position: "top-center"
    };
    const m = x("FLoadingService"), u = e.formSchemaUtils.getFormMetadataBasicInfo(), c = F();
    async function g(r) {
      const f = e.formSchemaUtils.getFormMetadataBasicInfo(), S = m.show();
      return e.metadataService.getPickMetadata(f.relativePath, r).then((C) => {
        var I;
        (I = S.value) == null || I.close();
        const s = JSON.parse(C == null ? void 0 : C.metadata.content).Contents, {
          templateId: b,
          name: d
        } = s.module;
        if (["list-component", "tree-component", "list-view-component"].includes(b))
          return !0;
        const y = `表单【${d}】不属于组件类模板，无法被引入到当前表单。`;
        return e.messagerService.warning(y), !1;
      }, (C) => {
        var i, s;
        return e.messagerService.error(((i = C == null ? void 0 : C.response) == null ? void 0 : i.data.Message) || `查询表单【${r.name}】失败`), (s = S.value) == null || s.close(), !1;
      });
    }
    async function l() {
      if (!o.value) {
        p.warning("请选择表单");
        return;
      }
      if (await g(o.value))
        return !0;
    }
    function h() {
      var f, S;
      const r = {
        id: o.value.id,
        nameSpace: o.value.nameSpace,
        code: o.value.code,
        name: o.value.name,
        fileName: o.value.fileName,
        bizobjectID: o.value.bizobjectID,
        relativePath: o.value.relativePath,
        projectName: o.value.projectName
      };
      n.emit("submit", r), (f = t == null ? void 0 : t.modalRef) != null && f.value.close && ((S = t == null ? void 0 : t.modalRef) == null || S.value.close());
    }
    function P() {
      var r, f;
      (r = t == null ? void 0 : t.modalRef) != null && r.value.close && ((f = t == null ? void 0 : t.modalRef) == null || f.value.close()), n.emit("close");
    }
    function w(r) {
      o.value = r != null && r.length ? r[0] : null;
    }
    function M() {
      const r = {
        formBasicInfo: u
      }, f = e.formSchemaUtils.designerMode === "PC_RTC" ? [{
        id: "total",
        title: "全部",
        type: "Card",
        dataSource: "Total",
        pagination: !0
      }] : [{
        id: "recommend",
        title: "推荐",
        type: "Card",
        dataSource: "Recommand",
        pagination: !0
      }, {
        id: "total",
        title: "全部",
        type: "Card",
        dataSource: "Total",
        pagination: !0
      }];
      return () => v(G, {
        ref: c,
        injectSymbolToken: k,
        "view-type": "Tabs",
        "view-options": f,
        editorParams: r,
        designerHostService: e,
        "show-footer": !0,
        onSelectionChange: w,
        "validate-function": l,
        onSubmit: h,
        onCancel: P
      }, {
        default: () => [E(" ")]
      });
    }
    function N(r) {
      r.stopPropagation(), o.value = "", t = e.modalService.open({
        title: "选择表单",
        width: 950,
        height: 600,
        fitContent: !1,
        showButtons: !1,
        render: M(),
        enableEsc: !1,
        draggable: !0
      });
    }
    return () => v("div", {
      class: "f-import-exteranl-component-button no-drag"
    }, [v("div", {
      class: "f-import-exteranl-component-button-center",
      onClick: N
    }, [v("div", {
      class: "f-icon f-icon-add mr-2"
    }, null), v("span", null, [E("引入已有表单")])])]);
  }
}), me = /* @__PURE__ */ R({
  name: "FExternalContainerDesign",
  props: B,
  emits: [],
  setup(a, n) {
    const e = F(), t = x("designer-host-service"), o = x("design-item-context"), p = ce(o, t), m = L(e, o, p), u = x("FMessageBoxService"), c = x("FLoadingService"), g = t.formSchemaUtils, l = F(a.externalComponent), h = F(), P = j(() => {
      var i, s;
      return (s = (i = h.value) == null ? void 0 : i.module) == null ? void 0 : s.components[0];
    }), w = j(() => !h.value);
    A("external-container-id", m.value.schema.id);
    function M(i) {
      const s = {
        id: l.value.id,
        code: l.value.code,
        name: i,
        fileName: l.value.fileName,
        nameSpace: l.value.nameSpace,
        content: h.value
      };
      g.externalFormSchema.set(m.value.schema.id, s);
    }
    function N(i) {
      var s;
      ((s = l.value) == null ? void 0 : s.name) !== i && (m.value.schema.externalComponent.name = i);
    }
    async function r() {
      var s;
      const i = t.formSchemaUtils.getFormMetadataBasicInfo();
      if ((s = l.value) != null && s.id) {
        const b = c == null ? void 0 : c.show({
          message: "数据加载中，请稍候..."
        });
        return t.metadataService.getPickMetadata(i.relativePath, l.value).then((d) => {
          var y;
          if ((y = d == null ? void 0 : d.metadata) != null && y.content) {
            const I = JSON.parse(d.metadata.content);
            h.value = I.Contents, M(d.metadata.name), N(d.metadata.name);
          } else
            u.error(`找不到元数据【${l.value.name}】(${l.value.id})。`);
          b.value.close();
        }, (d) => {
          var y;
          u.error(((y = d == null ? void 0 : d.response) == null ? void 0 : y.data.Message) || `查询表单【${l.value.name}】失败`), b.value.close();
        });
      }
    }
    $(() => a.externalComponent, async (i) => {
      var s;
      !l.value || !i || JSON.stringify(l.value) !== JSON.stringify(i) ? (l.value = i, await r(), (s = o == null ? void 0 : o.setupContext) == null || s.emit("dragEnd")) : l.value = i;
    }, {
      deep: !0
    }), J(() => {
      e.value.componentInstance = m, h.value || r();
    }), n.expose(m.value);
    function f() {
      return v(O, null, [v(K, {
        modelValue: P.value,
        "onUpdate:modelValue": (i) => P.value = i,
        "external-form-schema": h.value
      }, null)]);
    }
    async function S(i) {
      var s;
      m.value.schema.externalComponent = i, l.value = i, await r(), (s = o == null ? void 0 : o.setupContext) == null || s.emit("dragEnd");
    }
    function C() {
      return v(le, {
        onSubmit: S
      }, null);
    }
    return () => v("div", {
      ref: e,
      style: "height: inherit;"
    }, [w.value ? C() : f()]);
  }
}), Se = {
  install(a) {
    a.component(T.name, T);
  },
  register(a, n, e, t) {
    a["external-container"] = T, n["external-container"] = U;
  },
  registerDesigner(a, n, e) {
    a["external-container"] = me, n["external-container"] = U;
  }
};
export {
  T as FExternalContainer,
  me as FExternalContainerDesign,
  Se as default,
  B as externalContainerProps,
  U as propsResolver
};