starfish-form-custom 1.0.0

package/dist/index-f7ea052c.mjs

@@ -0,0 +1,241 @@
+import { ElTooltip, ElMain, ElButton, ElFooter, ElContainer } from 'element-plus/es';
+import 'element-plus/es/components/base/style/css';
+import 'element-plus/es/components/container/style/css';
+import 'element-plus/es/components/footer/style/css';
+import 'element-plus/es/components/button/style/css';
+import 'element-plus/es/components/main/style/css';
+import 'element-plus/es/components/tooltip/style/css';
+import { defineComponent, ref, onMounted, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, createCommentVNode, createBlock, withCtx, createVNode, createTextVNode } from 'vue';
+import { _ as _export_sfc, a as _, g as getFormConfig, f as fieldProps, u as useWatch } from './main-96327b2e.mjs';
+import JSONEditor from 'jsoneditor';
+import 'element-plus/es/components/input/style/css';
+import 'element-plus/es/components/checkbox/style/css';
+import 'element-plus/es/components/loading/style/css';
+import 'element-plus/es/components/dropdown/style/css';
+import 'element-plus/es/components/dropdown-menu/style/css';
+import 'element-plus/es/components/dropdown-item/style/css';
+import 'element-plus/es/components/collapse/style/css';
+import 'element-plus/es/components/collapse-item/style/css';
+import 'element-plus/es/components/row/style/css';
+import 'element-plus/es/components/icon/style/css';
+import 'element-plus/es/components/col/style/css';
+import 'element-plus/es/components/select/style/css';
+import 'element-plus/es/components/option/style/css';
+import '@element-plus/icons-vue';
+import 'element-plus/es/components/input-number/style/css';
+import 'element-plus/es/components/radio-group/style/css';
+import 'element-plus/es/components/radio-button/style/css';
+import 'element-plus/es/components/checkbox-group/style/css';
+import 'element-plus/es/components/color-picker/style/css';
+import 'element-plus/es/components/date-picker/style/css';
+import 'element-plus/es/components/radio/style/css';
+import 'element-plus/es/components/slider/style/css';
+import 'element-plus/es/components/switch/style/css';
+import 'element-plus/es/components/time-select/style/css';
+import 'element-plus/es/components/divider/style/css';
+import 'element-plus/es/components/alert/style/css';
+import 'element-plus/es/components/tabs/style/css';
+import 'element-plus/es/components/tab-pane/style/css';
+import 'element-plus/es/components/form-item/style/css';
+import 'element-plus';
+
+const _sfc_main = defineComponent({
+  ControlType: "JsonEditor",
+  // 必须与文件名匹配
+  nameCn: "JSON\u7F16\u8F91",
+  icon: "icon-json-full",
+  rule: _.getJsonValidate(),
+  formConfig: getFormConfig("JsonEditor", [
+    { fieldName: "default", component: "JsonEditor" }
+  ]),
+  props: {
+    ...fieldProps
+  },
+  actionType: ["onChange"],
+  setup(props) {
+    const jsoneditor = ref({});
+    let jsonEditorDialog = null;
+    let jsonEditors = null;
+    const JsonViewerDialogDom = ref();
+    const myDialog = ref();
+    useWatch(props);
+    function initJson() {
+      const container = jsoneditor.value;
+      const data = props.data;
+      const item = props.item;
+      const fieldName = item.data.fieldName;
+      const options = {
+        modes: ["text", "code", "view"],
+        mode: "code",
+        search: false,
+        onChange() {
+          data[fieldName] = jsonEditors?.getText();
+        }
+      };
+      jsonEditors = new JSONEditor(container, options);
+      if (props.drag) {
+        jsonEditors?.set(_.tryParseJson(item.data.default));
+      } else {
+        jsonEditors?.set(_.tryParseJson(data[item.data.fieldName]));
+      }
+    }
+    onMounted(() => {
+      initJson();
+    });
+    watch(
+      () => props.item,
+      (newValue) => {
+        if (props.drag) {
+          jsonEditors?.set(_.tryParseJson(newValue.data.default));
+        } else {
+          const data = props.data;
+          const item = props.item;
+          jsonEditors?.set(_.tryParseJson(data[item.data.fieldName]));
+        }
+      }
+    );
+    return {
+      myDialog,
+      jsoneditor,
+      JsonViewerDialogDom,
+      async showCustomDialog() {
+        const myDialogDom = myDialog.value;
+        myDialogDom.show();
+        myDialogDom.init("JSON\u7F16\u8F91", "icon-json-full");
+        await nextTick();
+        const container = JsonViewerDialogDom.value;
+        const options = {
+          modes: ["text", "code", "view"],
+          mode: "code",
+          search: false
+        };
+        jsonEditorDialog = new JSONEditor(container, options);
+        jsonEditorDialog?.set(_.tryParseJson(jsonEditors.getText()));
+      },
+      closeDialog() {
+        myDialog.value.close();
+      },
+      saveJson() {
+        jsonEditors?.set(_.tryParseJson(jsonEditorDialog.getText()));
+        const data = props.data;
+        const item = props.item;
+        const fieldName = item.data.fieldName;
+        data[fieldName] = jsonEditors?.getText();
+        myDialog.value.close();
+      }
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "item_require"
+};
+const _hoisted_2 = {
+  id: "jsoneditor",
+  ref: "jsoneditor"
+};
+const _hoisted_3 = {
+  ref: "JsonViewerDialogDom",
+  style: { "height": "calc(100% - 24px)" }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_tooltip = ElTooltip;
+  const _component_el_main = ElMain;
+  const _component_el_button = ElButton;
+  const _component_el_footer = ElFooter;
+  const _component_el_container = ElContainer;
+  const _component_CustomDialog = resolveComponent("CustomDialog");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["starfish-formitem", {
+      formCover: _ctx.drag,
+      "starfish-vertical": _ctx.labelalign != "top",
+      [_ctx.item.data.csslist?.join(" ")]: !!_ctx.item.data.csslist
+    }])
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(["label", "label_" + _ctx.labelalign]),
+      style: normalizeStyle({ width: _ctx.labelWidth + "px" })
+    }, [
+      createElementVNode("label", null, toDisplayString(_ctx.item.data.label) + toDisplayString(_ctx.suffix), 1),
+      _ctx.item.data.required ? (openBlock(), createElementBlock("span", _hoisted_1, "*")) : createCommentVNode("", true),
+      _ctx.item.data.tip ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 1,
+        class: "item",
+        effect: "dark",
+        content: _ctx.item.data.tip,
+        placement: "top"
+      }, {
+        default: withCtx(() => _cache[1] || (_cache[1] = [
+          createElementVNode("span", { class: "tip iconfontui icon-tishi" }, null, -1)
+        ])),
+        _: 1,
+        __: [1]
+      }, 8, ["content"])) : createCommentVNode("", true)
+    ], 6),
+    createElementVNode("div", {
+      class: "control",
+      style: normalizeStyle({ marginLeft: _ctx.labelalign != "top" ? _ctx.labelWidth + "px" : "" })
+    }, [
+      createElementVNode("div", _hoisted_2, [
+        createElementVNode("div", {
+          class: "fullScreen",
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.showCustomDialog && _ctx.showCustomDialog(...args))
+        }, _cache[2] || (_cache[2] = [
+          createElementVNode("i", { class: "iconfontui icon-quanping" }, null, -1)
+        ]))
+      ], 512)
+    ], 4),
+    createVNode(_component_CustomDialog, {
+      ref: "myDialog",
+      width: "60%"
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_el_main, { style: { "padding": "0" } }, {
+          default: withCtx(() => [
+            createVNode(_component_el_container, { style: { "height": "100%" } }, {
+              default: withCtx(() => [
+                createVNode(_component_el_main, { class: "my-pageMain" }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_3, null, 512)
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_el_footer, {
+                  class: "my-Footer",
+                  style: { "height": "60px", "padding-top": "10px", "text-align": "right" }
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_button, {
+                      type: "primary",
+                      onClick: _ctx.saveJson
+                    }, {
+                      default: withCtx(() => _cache[3] || (_cache[3] = [
+                        createTextVNode("\u4FDD\u5B58", -1)
+                      ])),
+                      _: 1,
+                      __: [3]
+                    }, 8, ["onClick"]),
+                    createVNode(_component_el_button, { onClick: _ctx.closeDialog }, {
+                      default: withCtx(() => _cache[4] || (_cache[4] = [
+                        createTextVNode("\u5173\u95ED", -1)
+                      ])),
+                      _: 1,
+                      __: [4]
+                    }, 8, ["onClick"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 512)
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { index as default };