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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as T, createVNode as v, inject as x, ref as P, createTextVNode as j, computed as E, provide as A, watch as $, onMounted as J, Fragment as O } from "vue";
import { resolveAppearance as q, createPropsResolver as L } from "../dynamic-resolver/index.esm.js";
import { DgControl as z, useDesignerComponent as H, 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 === z["list-nav"].type ? n.appearance = {
    class: "position-relative h-100"
  } : n.appearance = {
    class: "position-relative",
    style: "height:300px"
  }), 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: "ojbect",
    default: {}
  }
}, oe = [
  "id",
  "type",
  "externalComponent"
], ae = {
  onCommunication: "通讯事件"
}, ie = {
  $schema: Y,
  $id: Z,
  title: V,
  description: ee,
  type: te,
  properties: ne,
  required: oe,
  events: ae
}, R = {
  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 = L(R, ie, Q, X), N = /* @__PURE__ */ T({
  name: "FExternalContainer",
  props: R,
  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 l = JSON.parse(o == null ? void 0 : o.metadata.content).Contents, { templateId: m, name: r } = l.module;
      if (["list-component", "tree-component", "list-view-component"].includes(m))
        return !0;
      const g = `表单【${r}】不属于组件类模板，无法被引入到当前表单。`;
      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(l, m) {
        const r = l.propertyValue;
        delete n[t.viewModelId], r && (r.setPropertyRelates = this.setPropertyRelates, t.eventsEditorUtils.saveRelatedParameters(n, t.viewModelId, r.events, r));
      }
    };
  }
  /**
   * 切换外部表单后，删除已有的通讯配置（场景：已配置组件通讯，再切换外部表单）
   */
  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 l = !1;
    if (t.map((m) => {
      const r = p.find((g) => g.id === m);
      r != null && r.source && r.source.formId !== e.externalComponent.id && (r.needDelete = !0, l = !0);
    }), o.module.communications = o.module.communications.filter((m) => !m.needDelete), l) {
      e.onCommunication = "";
      const m = new D();
      m.globalConfig = { position: "top-center" }, m.warning({ message: "切换引入表单后，请重新配置组件通讯。" });
    }
  }
}
function ce(a, n) {
  const e = a.schema;
  function t() {
    return !1;
  }
  function o() {
    return !0;
  }
  function p() {
    return !0;
  }
  function l() {
    return !0;
  }
  function m() {
    return "position:relative;padding:0 !important;border:0;overflow:hidden;";
  }
  function r(s) {
    return new se(s, 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: l, getStyles: m, getPropsConfig: r, onRemoveComponent: g };
}
const le = /* @__PURE__ */ T({
  name: "FImportExteranlSchema",
  emits: ["close", "submit"],
  setup(a, n) {
    const e = x("designer-host-service");
    let t;
    const o = P(), p = new D();
    p.globalConfig = {
      position: "top-center"
    };
    const l = x("FLoadingService"), m = e.formSchemaUtils.getFormMetadataBasicInfo(), r = P();
    async function g(c) {
      const d = e.formSchemaUtils.getFormMetadataBasicInfo(), C = l.show();
      return e.metadataService.getPickMetadata(d.relativePath, c).then((i) => {
        var B;
        (B = C.value) == null || B.close();
        const S = JSON.parse(i == null ? void 0 : i.metadata.content).Contents, {
          templateId: f,
          name: y
        } = S.module;
        if (["list-component", "tree-component", "list-view-component"].includes(f))
          return !0;
        const M = `表单【${y}】不属于组件类模板，无法被引入到当前表单。`;
        return e.messagerService.warning(M), !1;
      }, (i) => {
        var u, S;
        return e.messagerService.error(((u = i == null ? void 0 : i.response) == null ? void 0 : u.data.Message) || `查询表单【${c.name}】失败`), (S = C.value) == null || S.close(), !1;
      });
    }
    async function s() {
      if (!o.value) {
        p.warning("请选择表单");
        return;
      }
      if (await g(o.value))
        return !0;
    }
    function h() {
      var d, C;
      const c = {
        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", c), (d = t == null ? void 0 : t.modalRef) != null && d.value.close && ((C = t == null ? void 0 : t.modalRef) == null || C.value.close());
    }
    function b() {
      var c, d;
      (c = t == null ? void 0 : t.modalRef) != null && c.value.close && ((d = t == null ? void 0 : t.modalRef) == null || d.value.close()), n.emit("close");
    }
    function I(c) {
      o.value = c != null && c.length ? c[0] : null;
    }
    function w() {
      const c = {
        formBasicInfo: m
      }, d = e.formSchemaUtils.designerMode === "PC_RTC" ? [{
        id: "total",
        title: "全部",
        type: "Card",
        dataSource: "Total",
        pagination: !1
      }] : [{
        id: "recommend",
        title: "推荐",
        type: "Card",
        dataSource: "Recommand",
        pagination: !1
      }, {
        id: "total",
        title: "全部",
        type: "Card",
        dataSource: "Total",
        pagination: !1
      }];
      return () => v(G, {
        ref: r,
        injectSymbolToken: k,
        "view-type": "Tabs",
        "view-options": d,
        editorParams: c,
        designerHostService: e,
        "show-footer": !0,
        onSelectionChange: I,
        "validate-function": s,
        onSubmit: h,
        onCancel: b
      }, {
        default: () => [j(" ")]
      });
    }
    function F(c) {
      c.stopPropagation(), o.value = "", t = e.modalService.open({
        title: "选择表单",
        width: 950,
        height: 600,
        fitContent: !1,
        showButtons: !1,
        render: w(),
        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: F
    }, [v("div", {
      class: "f-icon f-icon-add mr-2"
    }, null), v("span", null, [j("引入已有表单")])])]);
  }
}), me = /* @__PURE__ */ T({
  name: "FExternalContainerDesign",
  props: R,
  emits: [],
  setup(a, n) {
    const e = P(), t = x("designer-host-service"), o = x("design-item-context"), p = ce(o, t), l = H(e, o, p), m = x("FMessageBoxService"), r = x("FLoadingService"), g = t.formSchemaUtils, s = P(a.externalComponent), h = P(), b = E(() => {
      var i, u;
      return (u = (i = h.value) == null ? void 0 : i.module) == null ? void 0 : u.components[0];
    }), I = E(() => !h.value);
    A("external-container-id", l.value.schema.id);
    function w() {
      const i = {
        id: s.value.id,
        code: s.value.code,
        name: s.value.name,
        fileName: s.value.fileName,
        nameSpace: s.value.nameSpace,
        content: h.value,
        nameLanguage: s.value.nameLanguage
      };
      g.externalFormSchema.set(l.value.schema.id, i);
    }
    async function F() {
      var u;
      const i = t.formSchemaUtils.getFormMetadataBasicInfo();
      if ((u = s.value) != null && u.id) {
        const S = r == null ? void 0 : r.show({
          message: "数据加载中，请稍候..."
        });
        return t.metadataService.getPickMetadata(i.relativePath, s.value).then((f) => {
          var y;
          if ((y = f == null ? void 0 : f.metadata) != null && y.content) {
            const M = JSON.parse(f.metadata.content);
            h.value = M.Contents, w();
          } else
            m.error(`找不到元数据【${s.value.name}】(${s.value.id})。`);
          S.value.close();
        }, (f) => {
          var y;
          m.error(((y = f == null ? void 0 : f.response) == null ? void 0 : y.data.Message) || `查询表单【${s.value.name}】失败`), S.value.close();
        });
      }
    }
    $(() => a.externalComponent, async (i) => {
      var u;
      !s.value || !i || JSON.stringify(s.value) !== JSON.stringify(i) ? (s.value = i, await F(), (u = o == null ? void 0 : o.setupContext) == null || u.emit("dragEnd")) : s.value = i;
    }, {
      deep: !0
    }), J(() => {
      e.value.componentInstance = l, h.value || F();
    }), n.expose(l.value);
    function c() {
      return v(O, null, [v(K, {
        modelValue: b.value,
        "onUpdate:modelValue": (i) => b.value = i,
        "external-form-schema": h.value
      }, null)]);
    }
    async function d(i) {
      var u;
      l.value.schema.externalComponent = i, s.value = i, await F(), (u = o == null ? void 0 : o.setupContext) == null || u.emit("dragEnd");
    }
    function C() {
      return v(le, {
        onSubmit: d
      }, null);
    }
    return () => v("div", {
      ref: e,
      style: "height: inherit;"
    }, [I.value ? C() : c()]);
  }
}), Se = {
  install(a) {
    a.component(N.name, N);
  },
  register(a, n, e, t) {
    a["external-container"] = N, n["external-container"] = U;
  },
  registerDesigner(a, n, e) {
    a["external-container"] = me, n["external-container"] = U;
  }
};
export {
  N as FExternalContainer,
  me as FExternalContainerDesign,
  Se as default,
  R as externalContainerProps,
  U as propsResolver
};