@kp-ui/lowcode 1.0.3 → 1.0.21

package/es/components/http-editor/index.vue2.js

@@ -0,0 +1,124 @@
+import r from "../../utils/i18n.js";
+import d from "../code-editor/index.vue.js";
+import { isArray as i } from "lodash-es";
+import { getHttp as l } from "../../utils/request/http.js";
+import n from "../code-editor/code-modal-editor.vue.js";
+import { getLocat as h, replaceVars as p } from "../../utils/util.js";
+const R = {
+  name: "http-editor",
+  inheritAttrs: !1,
+  mixins: [r],
+  inject: ["getGlobalDsv"],
+  components: {
+    CodeEditor: d,
+    CodeModalEditor: n
+  },
+  props: {
+    optionModel: Object,
+    drawerTitle: {
+      type: String,
+      default: ""
+    },
+    buttonName: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      default: "编辑接口配置"
+    }
+  },
+  data() {
+    return {
+      dataList: [],
+      paramsList: [],
+      formRules: {
+        url: [{
+          required: !0,
+          trigger: ["blur", "change"],
+          message: this.i18nt("designer.setting.fieldValueRequired")
+        }]
+      },
+      showDataSourceDialogFlag: !1,
+      dsvJson: `{
+  
+}`,
+      dsResultJson: "",
+      showTestDataSourceDialogFlag: !1
+    };
+  },
+  methods: {
+    editDataHandlerCode() {
+      this.$refs.CodeModalEditorRef.open(this.optionModel.dataHandlerCode);
+    },
+    editReqDataHandlerCode() {
+      this.$refs.CodeReqModalEditorRef.open(this.optionModel.dataReqHandlerCode);
+    },
+    addDataSource() {
+      this.showDataSourceDialogFlag = !0, this.dataList = Object.entries(this.optionModel.http.data).map(([t, a]) => ({
+        name: t,
+        value: a
+      })), this.paramsList = Object.entries(this.optionModel.http.params).map(([t, a]) => ({
+        name: t,
+        value: a
+      }));
+    },
+    saveHttpData() {
+      let t = {};
+      i(this.dataList) && this.dataList.length && (t = this.dataList.reduce((a, e) => (a[e.name] = e.value, a), {})), this.optionModel.http.data = t;
+    },
+    saveHttpParams() {
+      let t = {};
+      i(this.paramsList) && this.paramsList.length && (t = this.paramsList.reduce((a, e) => (a[e.name] = e.value, a), {})), this.optionModel.http.params = t;
+    },
+    saveDataSource() {
+      this.saveHttpData(), this.saveHttpParams(), this.showDataSourceDialogFlag = !1;
+    },
+    addRequestParam() {
+      this.paramsList.push({
+        name: "",
+        value: ""
+      });
+    },
+    deleteRequestParam(t) {
+      this.paramsList.splice(t, 1);
+    },
+    addRequestData() {
+      this.dataList.push({
+        name: "",
+        value: ""
+      });
+    },
+    deleteRequestData(t) {
+      this.dataList.splice(t, 1);
+    },
+    testDataSource() {
+      this.saveHttpData(), this.saveHttpParams();
+      const t = JSON.stringify(this.optionModel.http, null, "  "), a = {
+        fieldCode: this.optionModel.name,
+        ...h()
+      };
+      this.dsvJson = p(t, a), this.dsResultJson = "", this.showTestDataSourceDialogFlag = !0;
+    },
+    async doDataSourceRequest() {
+      const {
+        dataReqHandlerCode: t,
+        dataHandlerCode: a
+      } = this.optionModel;
+      try {
+        let e = JSON.parse(this.dsvJson);
+        if (t && (e = new Function("data", t).call(this, e)), !e) return;
+        let s = await l()(e);
+        a && (s = new Function("data", a).call(this, s)), this.$refs.dsResultEditor.setValue(JSON.stringify(s, null, "  "));
+      } catch (e) {
+        console.log("doDataSourceRequest: ", e);
+      }
+    },
+    clearRequestResult() {
+      this.$refs.dsResultEditor.setValue("");
+    }
+  }
+};
+export {
+  R as default
+};

package/es/components/svg-icon/FileIcon.js

@@ -0,0 +1,36 @@
+import { defineComponent as n, createVNode as e } from "vue";
+import o from "./index.vue.js";
+import t from "../../node_modules/.pnpm/@ant-design_icons-vue@7.0.1_vue@3.5.13_typescript@5.7.3_/node_modules/@ant-design/icons-vue/es/icons/FileOutlined.js";
+const u = /* @__PURE__ */ n({
+  name: "FileIcon",
+  props: {
+    file: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(r) {
+    return () => {
+      const l = r.file.fileType || "";
+      try {
+        if ([".xls", ".xlsx"].includes(l.toLowerCase()))
+          return e(o, {
+            "icon-class": "excel"
+          }, null);
+        if ([".doc", ".docx"].includes(l.toLowerCase()))
+          return e(o, {
+            "icon-class": "word"
+          }, null);
+        if ([".pdf"].includes(l.toLowerCase()))
+          return e(o, {
+            "icon-class": "pdf"
+          }, null);
+      } catch {
+      }
+      return e(t, null, null);
+    };
+  }
+});
+export {
+  u as default
+};

package/es/components/svg-icon/index.vue.js

@@ -0,0 +1,53 @@
+import { createElementBlock as s, openBlock as r, normalizeStyle as i, normalizeClass as n, createElementVNode as a, createCommentVNode as c, toDisplayString as l } from "vue";
+/* empty css           */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const m = {
+  name: "SvgIcon",
+  props: {
+    iconClass: {
+      type: String,
+      required: !0
+    },
+    className: {
+      type: String
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "1.1em"
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`;
+    },
+    svgClass() {
+      return this.className ? "svg-icon " + this.className : "svg-icon";
+    },
+    getStyle() {
+      return {
+        width: this.size,
+        height: this.size,
+        cursor: "pointer"
+        //cursor ? 'pointer' : move ? 'move' : ''
+      };
+    }
+  }
+}, d = ["xlink:href"], u = { key: 0 };
+function g(h, _, t, f, p, e) {
+  return r(), s("svg", {
+    class: n(e.svgClass),
+    "aria-hidden": "true",
+    style: i(e.getStyle)
+  }, [
+    a("use", { "xlink:href": e.iconName }, null, 8, d),
+    t.title ? (r(), s("title", u, l(t.title), 1)) : c("", !0)
+  ], 6);
+}
+const N = /* @__PURE__ */ o(m, [["render", g], ["__scopeId", "data-v-dfe46d5e"]]);
+export {
+  N as default
+};

package/es/designer.js

@@ -0,0 +1,376 @@
+import C from "./components/form-designer/widget-panel/index.vue.js";
+import W from "./components/form-designer/toolbar-panel/index.vue.js";
+import L from "./components/form-designer/setting-panel/index.vue.js";
+import F from "./components/form-designer/form-widget/index.vue.js";
+import { createDesigner as b } from "./components/form-designer/designer.js";
+import { traverseAllWidgets as y, getAllContainerWidgets as c, getAllFieldWidgets as f, deepClone as m, addWindowResizeHandler as R } from "./utils/util.js";
+import { VARIANT_FORM_VERSION as x } from "./utils/config.js";
+import E, { changeLocale as S } from "./utils/i18n.js";
+import { isEmpty as J } from "lodash-es";
+import { resolveComponent as r, createBlock as D, openBlock as A, withCtx as n, createCommentVNode as H, createVNode as o, createSlots as N, renderList as V, renderSlot as B, createElementVNode as U } from "vue";
+/* empty css                                   */
+import I from "./_virtual/_plugin-vue_export-helper.js";
+const M = {
+  name: "VFormDesigner",
+  componentName: "VFormDesigner",
+  mixins: [E],
+  components: {
+    WidgetPanel: C,
+    ToolbarPanel: W,
+    SettingPanel: L,
+    VFormWidget: F
+  },
+  props: {
+    /* 保存jsonApi */
+    saveJsonApi: {
+      type: Function,
+      default: null
+    },
+    /* 后端字段列表API */
+    fieldListApi: {
+      type: Function,
+      default: null
+    },
+    /* 禁止显示的组件名称数组 */
+    bannedWidgets: {
+      type: Array,
+      default: () => []
+    },
+    /* 设计器配置参数 */
+    designerConfig: {
+      type: Object,
+      default: () => ({
+        languageMenu: !0,
+        //是否显示语言切换菜单
+        // externalLink: true, //是否显示GitHub、文档等外部链接
+        // formTemplates: true, //是否显示表单模板
+        eventCollapse: !0,
+        //是否显示组件事件属性折叠面板
+        widgetNameReadonly: !1,
+        //禁止修改组件名称
+        clearDesignerButton: !0,
+        //是否显示清空设计器按钮
+        previewFormButton: !0,
+        //是否显示预览表单按钮
+        importJsonButton: !0,
+        //是否显示导入JSON按钮
+        exportJsonButton: !0,
+        //是否显示导出JSON器按钮
+        exportCodeButton: !0,
+        //是否显示导出代码按钮
+        // generateSFCButton: true, //是否显示生成SFC按钮
+        toolbarMaxWidth: 450,
+        //设计器工具按钮栏最大宽度（单位像素）
+        toolbarMinWidth: 300,
+        //设计器工具按钮栏最小宽度（单位像素）
+        presetCssCode: "",
+        //设计器预设CSS样式代码
+        resetFormJson: !1
+        //是否在设计器初始化时将表单内容重置为空
+      })
+    },
+    /* 全局数据源变量 */
+    globalDsv: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      leftWidth: 270,
+      rightWidth: 300,
+      vFormVersion: x,
+      curLangName: "",
+      curLocale: "",
+      vsCodeFlag: !1,
+      caseName: "",
+      docUrl: "https://www.vform666.com/document3.html",
+      gitUrl: "https://github.com/vform666/variant-form3-vite",
+      chatUrl: "https://www.vform666.com/pages/chat-group/",
+      subScribeUrl: "https://www.vform666.com/pages/pro/",
+      scrollerHeight: 0,
+      designer: b(this),
+      fieldList: []
+    };
+  },
+  provide() {
+    return {
+      serverFieldList: () => this.fieldList,
+      getDesignerConfig: () => this.designerConfig,
+      getBannedWidgets: () => this.bannedWidgets
+    };
+  },
+  created() {
+  },
+  mounted() {
+    this.initLocale(), this.scrollerHeight = window.innerHeight - 56 - 36 + "px", R(() => {
+      this.$nextTick(() => {
+        this.scrollerHeight = window.innerHeight - 56 - 36 + "px";
+      });
+    }), this.loadCase(), this.loadFieldListFromServer();
+  },
+  methods: {
+    changeLeftWidth() {
+      this.leftWidth === 270 ? this.leftWidth = 0 : this.leftWidth = 270;
+    },
+    changeRightWidth() {
+      this.rightWidth === 300 ? this.rightWidth = 0 : this.rightWidth = 300;
+    },
+    /**
+     * json回填
+     * @param {*} importObj
+     */
+    setJsonImport(e = {}) {
+      if (!J(e))
+        try {
+          if (!e || !e.formConfig)
+            throw new Error(this.i18nt("designer.hint.invalidJsonFormat"));
+          this.designer.loadFormJson(e), this.designer.emitHistoryChange(), this.designer.emitEvent("form-json-imported", []);
+        } catch (t) {
+          this.$message.error(t + "");
+        }
+    },
+    testEEH(e, t) {
+      console.log("test", e), console.log("test222222", t);
+    },
+    showLink(e) {
+      return this.designerConfig[e] === void 0 ? !0 : !!this.designerConfig[e];
+    },
+    openHome() {
+      if (this.vsCodeFlag) {
+        const e = {
+          cmd: "openUrl",
+          data: {
+            url: "https://www.vform666.com/"
+          }
+        };
+        window.parent.postMessage(e, "*");
+      }
+    },
+    openUrl(e, t) {
+      if (this.vsCodeFlag) {
+        const s = {
+          cmd: "openUrl",
+          data: {
+            url: t
+          }
+        };
+        window.parent.postMessage(s, "*");
+      } else {
+        const s = e.currentTarget;
+        s.href = t;
+      }
+    },
+    loadCase() {
+      this.caseName;
+    },
+    initLocale() {
+      this.curLocale = localStorage.getItem("v_form_locale"), this.vsCodeFlag ? this.curLocale = this.curLocale || "en-US" : this.curLocale = this.curLocale || "zh-CN", this.curLangName = this.i18nt("application." + this.curLocale), this.changeLanguage(this.curLocale);
+    },
+    async loadFieldListFromServer() {
+      this.fieldListApi && (this.fieldList = await this.fieldListApi(), console.log("this.fieldList: ", this.fieldList));
+    },
+    handleLanguageChanged(e) {
+      this.changeLanguage(e), this.curLangName = this.i18nt("application." + e);
+    },
+    changeLanguage(e) {
+      S(e);
+    },
+    setFormJson(e) {
+      console.log("formJson: ", e);
+      let t = !1;
+      e && (typeof e == "string" ? t = this.designer.loadFormJson(JSON.parse(e)) : e.constructor === Object && (t = this.designer.loadFormJson(e)), t && this.designer.emitHistoryChange());
+    },
+    getFormJson() {
+      return {
+        widgetList: m(this.designer.widgetList),
+        formConfig: m(this.designer.formConfig)
+      };
+    },
+    clearDesigner() {
+      this.$refs.toolbarRef.clearFormWidget();
+    },
+    /**
+     * 刷新表单设计器
+     */
+    refreshDesigner() {
+      const e = this.getFormJson();
+      this.designer.clearDesigner(!0), this.designer.loadFormJson(e);
+    },
+    /**
+     * 预览表单
+     */
+    previewForm() {
+      this.$refs.toolbarRef.previewForm();
+    },
+    /**
+     * 导入表单JSON
+     */
+    importJson() {
+      this.$refs.toolbarRef.importJson();
+    },
+    /**
+     * 导出表单JSON
+     */
+    exportJson() {
+      this.$refs.toolbarRef.exportJson();
+    },
+    /**
+     * 导出Vue/HTML代码
+     */
+    exportCode() {
+      this.$refs.toolbarRef.exportCode();
+    },
+    /**
+     * 生成SFC代码
+     */
+    generateSFC() {
+      this.$refs.toolbarRef.generateSFC();
+    },
+    /**
+     * 获取所有字段组件
+     * @returns {*[]}
+     */
+    getFieldWidgets(e = null) {
+      return e ? f(e) : f(this.designer.widgetList);
+    },
+    /**
+     * 获取所有容器组件
+     * @returns {*[]}
+     */
+    getContainerWidgets(e = null) {
+      return e ? c(e) : c(this.designer.widgetList);
+    },
+    /**
+     * 升级表单json，以补充最新的组件属性
+     * @param formJson
+     */
+    upgradeFormJson(e) {
+      if (!e.widgetList || !e.formConfig) {
+        this.$message.error("Invalid form json!");
+        return;
+      }
+      return y(e.widgetList, (t) => {
+        this.designer.upgradeWidgetConfig(t);
+      }), this.designer.upgradeFormConfig(e.formConfig), e;
+    },
+    getWidgetRef(e, t = !1) {
+      return this.$refs.formRef.getWidgetRef(e, t);
+    },
+    getSelectedWidgetRef() {
+      return this.$refs.formRef.getSelectedWidgetRef();
+    },
+    /**
+     * 添加数据源对象
+     * @param dsObj
+     */
+    addDataSource(e) {
+      this.designer.formConfig.dataSources.push(e);
+    },
+    /**
+     * 增加外部组件引用，可通过getEC()方法获取外部组件，以便在VForm内部调用外部组件方法
+     * @param componentName 外部组件名称
+     * @param externalComponent 外部组件实例
+     */
+    addEC(e, t) {
+      this.externalComponents[e] = t;
+    },
+    /**
+     * 判断外部组件是否可获取
+     * @param componentName 外部组件名称
+     * @returns {boolean}
+     */
+    hasEC(e) {
+      return this.externalComponents.hasOwnProperty(e);
+    },
+    /**
+     * 获取外部组件实例
+     * @param componentName
+     * @returns {*}
+     */
+    getEC(e) {
+      return this.externalComponents[e];
+    }
+    //TODO: 增加更多方法！！
+  }
+}, O = { class: "container-scroll-bar" };
+function j(e, t, s, k, i, a) {
+  r("a-select-option"), r("a-select");
+  const u = r("a-layout-header"), p = r("widget-panel"), l = r("a-layout-sider"), _ = r("toolbar-panel"), v = r("v-form-widget"), d = r("a-layout-content"), w = r("setting-panel"), g = r("a-layout");
+  return A(), D(g, { class: "main-container full-height" }, {
+    default: n(() => [
+      H("", !0),
+      o(g, null, {
+        default: n(() => [
+          o(l, {
+            width: i.leftWidth,
+            class: "side-panel"
+          }, {
+            default: n(() => [
+              o(p, { designer: i.designer }, null, 8, ["designer"])
+            ]),
+            _: 1
+          }, 8, ["width"]),
+          o(d, { class: "center-layout-container" }, {
+            default: n(() => [
+              o(u, { class: "toolbar-header" }, {
+                default: n(() => [
+                  o(_, {
+                    saveJsonApi: s.saveJsonApi,
+                    designer: i.designer,
+                    "global-dsv": s.globalDsv,
+                    changeLeftWidth: a.changeLeftWidth,
+                    changeRightWidth: a.changeRightWidth,
+                    leftWidth: i.leftWidth,
+                    rightWidth: i.rightWidth,
+                    ref: "toolbarRef"
+                  }, N({ _: 2 }, [
+                    V(e.$slots, (P, h) => ({
+                      name: h,
+                      fn: n(() => [
+                        B(e.$slots, h, {}, void 0, !0)
+                      ])
+                    }))
+                  ]), 1032, ["saveJsonApi", "designer", "global-dsv", "changeLeftWidth", "changeRightWidth", "leftWidth", "rightWidth"])
+                ]),
+                _: 3
+              }),
+              o(d, { class: "form-widget-main" }, {
+                default: n(() => [
+                  U("div", O, [
+                    o(v, {
+                      designer: i.designer,
+                      "form-config": i.designer.formConfig,
+                      "global-dsv": s.globalDsv,
+                      ref: "formRef"
+                    }, null, 8, ["designer", "form-config", "global-dsv"])
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 3
+          }),
+          o(l, { width: i.rightWidth }, {
+            default: n(() => [
+              o(w, {
+                designer: i.designer,
+                "selected-widget": i.designer.selectedWidget,
+                "global-dsv": s.globalDsv,
+                "form-config": i.designer.formConfig,
+                onEditEventHandler: a.testEEH
+              }, null, 8, ["designer", "selected-widget", "global-dsv", "form-config", "onEditEventHandler"])
+            ]),
+            _: 1
+          }, 8, ["width"])
+        ]),
+        _: 3
+      })
+    ]),
+    _: 3
+  });
+}
+const ie = /* @__PURE__ */ I(M, [["render", j], ["__scopeId", "data-v-8a4df010"]]);
+export {
+  ie as default
+};

package/es/hooks/TpfConfirm.js

@@ -0,0 +1,33 @@
+import { createVNode as n } from "vue";
+import i from "../components/svg-icon/index.vue.js";
+import { Modal as l } from "ant-design-vue";
+const f = (o) => {
+  const e = typeof o == "string" ? {} : o, {
+    type: c = "confirm"
+  } = e;
+  return new Promise((r, t) => {
+    l[c]({
+      class: "tpf-model-confirm",
+      centered: !0,
+      icon: n("span", {
+        class: "anticon anticon-exclamation-circle"
+      }, [n(i, {
+        iconClass: "el-error-circle"
+      }, null)]),
+      title: "确认删除",
+      okText: "确定",
+      cancelText: "取消",
+      closable: !1,
+      onOk() {
+        r("confirm");
+      },
+      onCancel: () => {
+        t("cancel");
+      },
+      ...e
+    });
+  });
+};
+export {
+  f as TpfConfirm
+};

package/es/hooks/useFilePreview.js

@@ -0,0 +1,46 @@
+import { useFilesystemApi as p } from "../api/useFilesystemApi/filesystem/index.js";
+import { ref as f } from "vue";
+import { getUserInfo as g } from "../utils/request/useGetUseInfo.js";
+import * as u from "../node_modules/.pnpm/query-string@9.1.1/node_modules/query-string/base.js";
+const v = () => window.location.origin;
+function F() {
+  const i = f(/* @__PURE__ */ new Map()), r = p(), a = async (e) => {
+    if (i.value.has(e))
+      return i.value.get(e);
+    const n = await r.getPreviewFileUrl({ fileCode: e });
+    return i.value.set(e, n.data.value), n.data.value;
+  };
+  return {
+    fileUrlCache: i,
+    handleDownload: async (e) => {
+      try {
+        await r.downloadFileObject({ fileCode: e.fileCode });
+      } catch (n) {
+        console.error("下载文件失败:", n);
+      }
+    },
+    handlePreview: async (e) => {
+      var n, t;
+      if (![".png", ".jpg", ".jpeg", ".gif"].includes(e.fileType || "")) {
+        const o = g(), l = (n = o == null ? void 0 : o.loginInfo) == null ? void 0 : n.employeeId, { tokenId: c, tenantId: w } = (t = o == null ? void 0 : o.loginInfo) == null ? void 0 : t.userToken, s = v(), d = {
+          tenantId: w,
+          tokenId: c,
+          employeeId: l,
+          fileCode: e.fileCode
+        };
+        console.log({ doMain: s }), window.open(`${s}/view-file/preview?${u.stringify(d)}`);
+      }
+    },
+    getPreviewData: async (e) => {
+      const n = e.map(async (t) => ({
+        ...t,
+        previewUrl: await a(t.fileCode)
+      }));
+      return Promise.all(n);
+    },
+    getPreviewFileUrl: a
+  };
+}
+export {
+  F as useFilePreview
+};