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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as R, createVNode as h, inject as S, ref as y, createTextVNode as j, computed as D, provide as L, watch as H, onMounted as K, Fragment as W } from "vue";
import { resolveAppearance as Y, createPropsResolver as G } from "../dynamic-resolver/index.esm.js";
import { DgControl as Q, useDesignerComponent as V, FDesignerItem as X } from "../designer-canvas/index.esm.js";
import { FormSchemaRepositorySymbol as A, EVENT_PROPERTY_TAB_IDS as Z } from "../common/index.esm.js";
import { BaseControlProperty as ee } from "../property-panel/index.esm.js";
import { FLoadingService as te } from "../loading/index.esm.js";
import { FNotifyService as O } from "../notify/index.esm.js";
import { FSchemaSelector as ne } from "../schema-selector/index.esm.js";
const oe = /* @__PURE__ */ new Map([
  ["appearance", Y]
]);
function ae(a, n, e, t) {
  const o = e.parentComponentInstance;
  return o && t && (o.schema.type === Q["list-nav"].type ? n.appearance = {
    class: "position-relative h-100"
  } : n.appearance = {
    class: "position-relative",
    style: "height:300px;flex-shrink: 0;"
  }), n;
}
const re = "https://json-schema.org/draft/2020-12/schema", ie = "https://farris-design.gitee.io/external-container.schema.json", se = "external-container", ce = "A Farris Visual Component", le = "object", me = {
  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: {}
  }
}, ue = [
  "id",
  "type",
  "externalComponent"
], pe = {
  onCommunication: "通讯事件"
}, de = {
  $schema: re,
  $id: ie,
  title: se,
  description: ce,
  type: le,
  properties: me,
  required: ue,
  events: pe
}, U = {
  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: {} }
}, $ = G(U, de, oe, ae), B = /* @__PURE__ */ R({
  name: "FExternalContainer",
  props: U,
  emits: [],
  setup(a, n) {
    return () => h("div", {
      class: a.customClass,
      style: a.customStyle
    }, [n.slots.default && n.slots.default()]);
  }
}), fe = {
  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 ge extends ee {
  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: A,
            validateFunction: (t) => {
              if (t.id)
                return e.checkFormValidtion(t);
            }
          },
          $converter: fe
        }
      },
      setPropertyRelates(t) {
        (t == null ? void 0 : t.propertyID) === "externalComponent" && e.syncCommunicationAfterFormChanged(t, n);
      }
    };
  }
  checkFormValidtion(n) {
    const e = this.designerHostService.formSchemaUtils.getFormMetadataBasicInfo(), t = this.designerHostService.formSchemaUtils.getOptions(), o = te.show();
    return this.designerHostService.metadataService.getPickMetadata(e.relativePath, n).then((u) => {
      o.value.close();
      const p = JSON.parse(u == null ? void 0 : u.metadata.content).Contents, { templateId: s, name: g, id: i } = p.module;
      if (i === e.id)
        return this.designerHostService.messagerService.warning("不支持引入当前表单"), !1;
      if (this.designerHostService.formSchemaUtils.checkIfComposedForm(p)) {
        const C = `表单【${g}】嵌套了外部表单，系统仅支持组合表单一层嵌套，不支持多层级引入。`;
        return this.designerHostService.messagerService.warning(C), !1;
      }
      if ((t == null ? void 0 : t.combineFormMode) === "custom" || ["list-component", "tree-component", "list-view-component"].includes(s))
        return !0;
      const v = `表单【${g}】不属于组件类模板，在严格模式下无法被导入到当前表单。<br/><br/>请前往当前表单的配置页面将【表单组合模式】切换为自定义模式后，再引入表单【${g}】。`;
      return this.designerHostService.messagerService.warning(v), !1;
    }, (u) => {
      var c;
      return o.value.close(), this.designerHostService.messagerService.error(((c = u == null ? void 0 : u.response) == null ? void 0 : c.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: Z,
      tabName: "交互",
      setPropertyRelates(c, p) {
        const s = c.propertyValue;
        delete n[t.viewModelId], s && (s.setPropertyRelates = this.setPropertyRelates, t.eventsEditorUtils.saveRelatedParameters(n, t.viewModelId, s.events, s));
      }
    };
  }
  /**
   * 切换外部表单后，删除已有的通讯配置（场景：已配置组件通讯，再切换外部表单）
   */
  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(), u = o.module.communications || [];
    let c = !1;
    if (t.map((p) => {
      const s = u.find((g) => g.id === p);
      s != null && s.source && s.source.formId !== e.externalComponent.id && (s.needDelete = !0, c = !0);
    }), o.module.communications = o.module.communications.filter((p) => !p.needDelete), c) {
      e.onCommunication = "";
      const p = new O();
      p.globalConfig = { position: "top-center" }, p.warning({ message: "切换引入表单后，请重新配置组件通讯。" });
    }
  }
}
function ve(a, n) {
  const e = a.schema;
  function t() {
    return !1;
  }
  function o() {
    return !0;
  }
  function u() {
    return !0;
  }
  function c() {
    return !0;
  }
  function p() {
    return "position:relative;padding:0 !important;border:0;overflow:hidden;";
  }
  function s(i) {
    return new ge(i, n).getPropertyConfig(e, a.componentInstance.value);
  }
  function g() {
    n != null && n.formSchemaUtils && (n.formSchemaUtils.externalFormSchema.delete(a.schema.id), n == null || n.formSchemaUtils.recordIsComposedForm());
  }
  return { canAccepts: t, checkCanDeleteComponent: o, checkCanMoveComponent: u, hideNestedPaddingInDesginerView: c, getStyles: p, getPropsConfig: s, onRemoveComponent: g };
}
const he = /* @__PURE__ */ R({
  name: "FImportExteranlSchema",
  emits: ["close", "submit"],
  setup(a, n) {
    const e = S("designer-host-service");
    let t;
    const o = y(), u = new O();
    u.globalConfig = {
      position: "top-center"
    };
    const c = S("FLoadingService"), p = e.formSchemaUtils.getFormMetadataBasicInfo(), s = y();
    async function g(l) {
      var d;
      const {
        getFormMetadataBasicInfo: x,
        checkIfComposedForm: N,
        getOptions: T
      } = e.formSchemaUtils, r = x(), m = y(((d = T()) == null ? void 0 : d.combineFormMode) === "custom"), F = c.show();
      return e.metadataService.getPickMetadata(r.relativePath, l).then((f) => {
        var k;
        (k = F.value) == null || k.close();
        const b = JSON.parse(f == null ? void 0 : f.metadata.content).Contents, {
          templateId: J,
          name: E,
          id: q
        } = b.module;
        if (q === r.id)
          return e.messagerService.warning("不支持引入当前表单"), !1;
        if (N(b)) {
          const z = `表单【${E}】嵌套了外部表单，系统仅支持组合表单一层嵌套，不支持多层级引入。`;
          return e.messagerService.warning(z), !1;
        }
        if (m.value || ["list-component", "tree-component", "list-view-component"].includes(J))
          return !0;
        const _ = `表单【${E}】不属于组件类模板，在严格模式下无法被导入到当前表单。<br/><br/>请前往当前表单的配置页面将【表单组合模式】切换为自定义模式后，再引入表单【${E}】。`;
        return e.messagerService.warning(_), !1;
      }, (f) => {
        var P, b;
        return e.messagerService.error(((P = f == null ? void 0 : f.response) == null ? void 0 : P.data.Message) || `查询表单【${l.name}】失败`), (b = F.value) == null || b.close(), !1;
      });
    }
    async function i() {
      if (!o.value) {
        u.warning("请选择表单");
        return;
      }
      if (await g(o.value))
        return !0;
    }
    function v() {
      const l = {
        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", l), t != null && t.close && t.close();
    }
    function C() {
      t != null && t.close && (t == null || t.close()), n.emit("close");
    }
    function I(l) {
      o.value = l != null && l.length ? l[0] : null;
    }
    function w() {
      const l = {
        formBasicInfo: p
      }, x = 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 () => h(ne, {
        ref: s,
        injectSymbolToken: A,
        "view-type": "Tabs",
        "view-options": x,
        editorParams: l,
        designerHostService: e,
        "show-footer": !0,
        onSelectionChange: I,
        "validate-function": i,
        onSubmit: v,
        onCancel: C
      }, {
        default: () => [j(" ")]
      });
    }
    function M(l) {
      l.stopPropagation(), o.value = "", t = e.modalService.open({
        title: "选择表单",
        width: 950,
        height: 600,
        fitContent: !1,
        showButtons: !1,
        render: w(),
        enableEsc: !1,
        draggable: !0
      });
    }
    return () => h("div", {
      class: "f-import-exteranl-component-button no-drag"
    }, [h("div", {
      class: "f-import-exteranl-component-button-center",
      onClick: M
    }, [h("div", {
      class: "f-icon f-icon-add mr-2"
    }, null), h("span", null, [j("引入已有表单")])])]);
  }
}), Ce = /* @__PURE__ */ R({
  name: "FExternalContainerDesign",
  props: U,
  emits: [],
  setup(a, n) {
    const e = y(), t = S("designer-host-service"), o = S("design-item-context"), u = ve(o, t), c = V(e, o, u), p = S("FMessageBoxService"), s = S("FLoadingService"), g = t.formSchemaUtils, i = y(a.externalComponent), v = y(), C = D(() => {
      var r, m;
      return (m = (r = v.value) == null ? void 0 : r.module) == null ? void 0 : m.components[0];
    }), I = D(() => !v.value);
    L("external-container-id", c.value.schema.id);
    function w(r) {
      const m = {
        id: i.value.id,
        code: i.value.code,
        name: r,
        fileName: i.value.fileName,
        nameSpace: i.value.nameSpace,
        content: v.value
      };
      g.externalFormSchema.set(c.value.schema.id, m), g.recordIsComposedForm();
    }
    function M(r) {
      var m;
      ((m = i.value) == null ? void 0 : m.name) !== r && (c.value.schema.externalComponent.name = r);
    }
    async function l() {
      var m;
      const r = t.formSchemaUtils.getFormMetadataBasicInfo();
      if ((m = i.value) != null && m.id) {
        const F = s == null ? void 0 : s.show({
          message: "数据加载中，请稍候..."
        });
        return t.metadataService.getPickMetadata(r.relativePath, i.value).then((d) => {
          var f;
          if ((f = d == null ? void 0 : d.metadata) != null && f.content) {
            const P = JSON.parse(d.metadata.content);
            v.value = P.Contents, w(d.metadata.name), M(d.metadata.name);
          } else
            p.error(`找不到元数据【${i.value.name}】(${i.value.id})。`);
          F.value.close();
        }, (d) => {
          var f;
          p.error(((f = d == null ? void 0 : d.response) == null ? void 0 : f.data.Message) || `查询表单【${i.value.name}】失败`), F.value.close();
        });
      }
    }
    H(() => a.externalComponent, async (r) => {
      var m;
      !i.value || !r || JSON.stringify(i.value) !== JSON.stringify(r) ? (i.value = r, await l(), (m = o == null ? void 0 : o.setupContext) == null || m.emit("dragEnd")) : i.value = r;
    }, {
      deep: !0
    }), K(() => {
      e.value.componentInstance = c, v.value || l();
    }), n.expose(c.value);
    function x() {
      return h(W, null, [h(X, {
        modelValue: C.value,
        "onUpdate:modelValue": (r) => C.value = r,
        "external-form-schema": v.value
      }, null)]);
    }
    async function N(r) {
      var m;
      c.value.schema.externalComponent = r, i.value = r, await l(), (m = o == null ? void 0 : o.setupContext) == null || m.emit("dragEnd");
    }
    function T() {
      return h(he, {
        onSubmit: N
      }, null);
    }
    return () => h("div", {
      ref: e,
      style: "height: inherit;"
    }, [I.value ? T() : x()]);
  }
}), Me = {
  install(a) {
    a.component(B.name, B);
  },
  register(a, n, e, t) {
    a["external-container"] = B, n["external-container"] = $;
  },
  registerDesigner(a, n, e) {
    a["external-container"] = Ce, n["external-container"] = $;
  }
};
export {
  B as FExternalContainer,
  Ce as FExternalContainerDesign,
  Me as default,
  U as externalContainerProps,
  $ as propsResolver
};