@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/dist/src/page-designer/page-variable-panel/PageVariablePanel.js

@@ -0,0 +1,939 @@
+import '../../../style.css';
+import { mapGetters } from "vuex";
+import draggable from "@epxing/core/src/components/draggable";
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, Fragment, renderList, toDisplayString, createCommentVNode, createBlock, withDirectives, normalizeClass } from "vue";
+/* empty css                      */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-page-variable-panel",
+  components: {
+    draggable
+  },
+  props: {
+    designer: Object
+  },
+  data() {
+    return {
+      variableDialog: false,
+      variableOperateType: "",
+      interfaceType: "api",
+      variableForm: {
+        type: "fixed",
+        value: ""
+      },
+      componentVariableDialog: false,
+      selectVariableList: [],
+      typeOptions: [
+        {
+          label: "固定值",
+          value: "fixed"
+        },
+        {
+          label: "组件变量",
+          value: "component"
+        },
+        {
+          label: "请求获取",
+          value: "request"
+        },
+        {
+          label: "页面传递",
+          value: "query"
+        }
+      ],
+      actionMap: {},
+      ruleMap: {},
+      apiMap: {},
+      componentVariableTreeProps: {
+        children: "items",
+        label: "title"
+      },
+      selectedWidget: null,
+      apiParamsFilterText: "",
+      apiParamsFocused: false,
+      variableSets: [],
+      componentVariableSearch: ""
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "getMetaViewFields"
+    ]),
+    pageVariableSets: {
+      get() {
+        return this.designer.pageConfig.variableSets || [];
+      }
+    },
+    treeFieldStore() {
+      return this.getMetaViewFields(this.variableForm.metaId || this.designer.page.metaId);
+    },
+    widgetList() {
+      return this.designer.widgetList || [];
+    },
+    widgetListWithInfo() {
+      const widgetList = [...this.designer.widgetList];
+      const formatWidget = (widgetList2) => {
+        return widgetList2.map((widget) => {
+          const newWidget = { ...widget };
+          const widgetInfo = this.designer.getWidgetByType(widget.contentType) || {};
+          newWidget.data = widgetInfo;
+          if (newWidget.items) {
+            newWidget.items = formatWidget(newWidget.items);
+          }
+          return newWidget;
+        });
+      };
+      return formatWidget(widgetList);
+    },
+    widgetInfo() {
+      return (widget) => {
+        return this.designer.getWidgetByType(this.selectedWidget.contentType) || {};
+      };
+    },
+    selectedWidgetInfo() {
+      if (this.selectedWidget) {
+        return this.designer.getWidgetByType(this.selectedWidget.contentType) || {};
+      }
+      return {};
+    },
+    componentVariableShowLabel() {
+      return (v) => {
+        if (!v) return "";
+        const widgetId = v.split(".")[0];
+        const variableCode = v.replace(`${widgetId}.`, "");
+        const widget = this.designer.getWidgetItemById(widgetId);
+        if (!widget) return "";
+        const widgetInfo = this.designer.getWidgetByType(widget.contentType) || {};
+        if (widgetInfo.variables) {
+          const variable = widgetInfo.variables.find((item) => item.data.CODE === variableCode);
+          return `${widget.title}-${variable.data.NAME}`;
+        }
+        return `${widget.title}-${variableCode}`;
+      };
+    },
+    apiOutParams() {
+      let apiOutParams = [];
+      const metaId = this.variableForm.metaId || this.designer.page.metaId;
+      if (!metaId || !this.variableForm.action) {
+        apiOutParams = [];
+      } else if (this.apiMap[metaId + "_" + this.variableForm.action]) {
+        apiOutParams = this.apiMap[metaId + "_" + this.variableForm.action].outParams;
+      }
+      return apiOutParams;
+    },
+    apiInParams() {
+      let apiInParams = [];
+      const metaId = this.variableForm.metaId || this.designer.page.metaId;
+      if (!metaId || !this.variableForm.action) {
+        apiInParams = [];
+      } else if (this.apiMap[metaId + "_" + this.variableForm.action]) {
+        apiInParams = this.apiMap[metaId + "_" + this.variableForm.action].inParams;
+      }
+      return apiInParams;
+    },
+    apiParamsValue: {
+      get() {
+        if (this.apiParamsFocused) {
+          return this.apiParamsFilterText;
+        } else {
+          return this.apiParamsValueLabel;
+        }
+      },
+      set(v) {
+        this.apiParamsFilterText = v;
+      }
+    },
+    apiParamsValueLabel() {
+      if (this.variableForm.value) {
+        const findItem = (arr) => {
+          for (const item2 of arr) {
+            if (item2.NAME === this.variableForm.value) {
+              return item2;
+            } else if (item2.children) {
+              const child = findItem(item2.children);
+              if (child) return child;
+            }
+          }
+        };
+        const item = findItem(this.apiOutParams);
+        return (item == null ? void 0 : item.REMARK) || this.variableForm.value;
+      }
+      return "";
+    },
+    variableTree() {
+      const variableList = this.variableSets.map((item) => ({ ...item, type: "variable", text: item.name || item.code, code: item.code }));
+      return [{
+        code: "PAGE_VARIABLE",
+        text: "页面变量",
+        children: [{ type: "variable", text: "当前变量", code: "CURRENT_VALUE_" }, ...variableList]
+      }];
+    },
+    dataFormat: {
+      get() {
+        return this.variableForm.dataFormat;
+      },
+      set(v) {
+        if (v) {
+          this.variableForm.dataFormat = JSON.parse(v).el;
+        } else {
+          this.variableForm.dataFormat = "";
+        }
+      }
+    }
+  },
+  watch: {
+    componentVariableSearch(val) {
+      this.$refs.componentVariableTree.filter(val);
+    },
+    variableSets(v) {
+      this.designer.updatePageConfig({ variableSets: v });
+    },
+    "variableForm.metaId": {
+      handler(v) {
+        const metaId = v || this.designer.page.metaId;
+        if (!this.actionMap[metaId]) {
+          this.getActionList(metaId);
+        }
+        if (!this.ruleMap[metaId]) {
+          this.getRuleList(metaId);
+        }
+      },
+      immediate: true
+    },
+    "variableForm.action": {
+      handler(v) {
+        if (v && this.variableForm.type === "request") {
+          const metaId = this.variableForm.metaId || this.designer.page.metaId;
+          if (!this.apiMap[metaId + "_" + v]) {
+            this.getApiInfo(v);
+          }
+        }
+      }
+    },
+    apiParamsFilterText(val) {
+      const node = this.$refs.apiParamsTree.getNode("custom");
+      if (node) this.$refs.apiParamsTree.remove(node);
+      if (val) {
+        const data = this.apiOutParams.find((item) => item.NAME === val || item.REMARK === val);
+        if (!data) {
+          if (this.apiOutParams.length > 0) {
+            this.$refs.apiParamsTree.insertBefore({ id: "custom", NAME: val, REMARK: val }, this.apiOutParams[0].id);
+          } else {
+            this.$refs.apiParamsTree.append({ id: "custom", NAME: val, REMARK: val });
+          }
+        }
+      }
+      this.$refs.apiParamsTree.filter(val);
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.title.indexOf(value) !== -1;
+    },
+    apiParamsFilterNode(value, data) {
+      if (!value) return true;
+      return data.REMARK.indexOf(value) !== -1 || data.NAME.indexOf(value) !== -1;
+    },
+    apiParamsInputBlur() {
+      setTimeout(() => {
+        this.apiParamsFocused = false;
+        this.apiParamsFilterText = "";
+      }, 300);
+    },
+    selectApiParams(data) {
+      this.variableForm.value = data.NAME;
+    },
+    addVariable() {
+      this.interfaceType = "api";
+      this.variableForm = {
+        type: "fixed",
+        requestType: "async",
+        value: ""
+      };
+      this.variableOperateType = "add";
+      this.variableDialog = true;
+    },
+    editVariable(row) {
+      this.variableForm = { ...row };
+      if (this.variableForm.type === "request" && this.variableForm.rule) {
+        this.interfaceType = "rule";
+      } else {
+        this.interfaceType = "api";
+      }
+      this.variableOperateType = "edit";
+      this.variableDialog = true;
+    },
+    viewVariable(row) {
+      this.variableForm = { ...row };
+      this.variableOperateType = "detail";
+      this.variableDialog = true;
+    },
+    openComponentVariableDialog() {
+      this.componentVariableDialog = true;
+    },
+    removeVariable(row) {
+      const selected = [row.code];
+      if (selected.length === 0) {
+        this.$message.warning("请选择要删除的变量");
+        return;
+      }
+      this.$confirm("确认删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.variableSets = [...this.variableSets.filter((item) => !selected.includes(item.code))];
+      });
+    },
+    saveVariable() {
+      this.$refs.variableForm.validate((valid) => {
+        if (valid) {
+          if (!this.variableForm.code) {
+            this.$message.error("请输入变量名");
+            return;
+          }
+          if (!["request", "query"].includes(this.variableForm.type) && !this.variableForm.value) {
+            this.$message.error("请输入变量值");
+            return;
+          }
+          const variableSets = [...this.variableSets];
+          if (this.variableOperateType === "edit") {
+            const index = variableSets.findIndex((item) => item.code === this.variableForm.code);
+            variableSets.splice(index, 1, this.variableForm);
+          } else {
+            variableSets.push(this.variableForm);
+          }
+          if (variableSets.filter((item) => item.code === this.variableForm.code).length > 1) {
+            this.$message.warning("变量名重复，请重新输入");
+            return;
+          }
+          this.variableSets = variableSets;
+          this.variableDialog = false;
+        }
+      });
+    },
+    getActionList(v) {
+      this.$http.list({
+        action: "getEntityAllApi",
+        entityId: "FM_ENTITY_API",
+        metaId: v
+      }).then((data) => {
+        const actionList = data.entitys.map((item) => ({ label: item.LABEL || item.NAME, value: item.NAME }));
+        this.actionMap[v] = actionList;
+      });
+    },
+    getRuleList(id) {
+      if (this.ruleMap[id]) return;
+      this.$http.list({
+        entityId: "ACT_RE_MODEL",
+        "scope.ENTITY": id,
+        "scope.CATEGORY": "2"
+      }).then((data) => {
+        this.ruleMap[id] = data.entitys.map((item) => ({ label: item.NAME || item.KEY, value: item.KEY }));
+      });
+    },
+    // 筛选条件字段
+    getAllFields(v) {
+      if (!v) return [];
+      if (!this.treeFieldStore) {
+        return this.$store.dispatch({
+          type: "ADD_META_VIEW_FIELDS",
+          metaId: v
+        });
+      }
+      return this.treeFieldStore;
+    },
+    getApiInfo(v) {
+      return this.$http.list({
+        action: "getEntityApiInfo",
+        entityId: "FM_ENTITY_API",
+        metaId: this.variableForm.metaId || this.designer.page.metaId,
+        api: v
+      }).then((data) => {
+        const metaId = this.variableForm.metaId || this.designer.page.metaId;
+        this.apiMap[metaId + "_" + v] = data;
+      });
+    }
+  },
+  mounted() {
+    if (this.pageVariableSets) {
+      this.variableSets = [...this.pageVariableSets];
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-page-designer-page-variable" };
+const _hoisted_2 = { class: "epx-page-designer-page-variable__header" };
+const _hoisted_3 = { class: "epx-page-designer-page-variable__content" };
+const _hoisted_4 = { class: "epx-page-designer-page-variable__operates" };
+const _hoisted_5 = { class: "epx-page-designer-page-variable__item-content" };
+const _hoisted_6 = { class: "epx-page-designer-page-variable__title" };
+const _hoisted_7 = { key: 0 };
+const _hoisted_8 = { class: "epx-page-designer-page-variable__detail" };
+const _hoisted_9 = { class: "epx-page-designer-page-variable__detail-item" };
+const _hoisted_10 = {
+  key: 0,
+  class: "epx-page-designer-page-variable__detail-item"
+};
+const _hoisted_11 = { class: "epx-page-designer-page-variable__extra" };
+const _hoisted_12 = { key: 0 };
+const _hoisted_13 = { key: 0 };
+const _hoisted_14 = { key: 0 };
+const _hoisted_15 = { key: 0 };
+const _hoisted_16 = { key: 0 };
+const _hoisted_17 = { key: 0 };
+const _hoisted_18 = { key: 0 };
+const _hoisted_19 = {
+  key: 0,
+  class: "dialog-footer"
+};
+const _hoisted_20 = { class: "epx-page-designer-page-variable__component-variable" };
+const _hoisted_21 = { class: "epx-page-designer-page-variable__component-tree" };
+const _hoisted_22 = { class: "epx-page-designer-page-variable__component-node" };
+const _hoisted_23 = {
+  key: 0,
+  class: "epx-icon-bianliang fr"
+};
+const _hoisted_24 = {
+  key: 0,
+  class: "epx-page-designer-page-variable__component-variable-content"
+};
+const _hoisted_25 = {
+  key: 1,
+  class: "epx-page-designer-page-variable__null-data"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+  const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+  const _component_el_dropdown = resolveComponent("el-dropdown");
+  const _component_draggable = resolveComponent("draggable");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_el_form_item = resolveComponent("el-form-item");
+  const _component_el_radio = resolveComponent("el-radio");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  const _component_epx_visual_config_object = resolveComponent("epx-visual-config-object");
+  const _component_el_option = resolveComponent("el-option");
+  const _component_el_select = resolveComponent("el-select");
+  const _component_epx_visual_config_select = resolveComponent("epx-visual-config-select");
+  const _component_epx_page_variable_panel_json_editor = resolveComponent("epx-page-variable-panel-json-editor");
+  const _component_el_tree = resolveComponent("el-tree");
+  const _component_el_popover = resolveComponent("el-popover");
+  const _component_epx_visual_config_params = resolveComponent("epx-visual-config-params");
+  const _component_epx_visual_config_scope = resolveComponent("epx-visual-config-scope");
+  const _component_epx_rule = resolveComponent("epx-rule");
+  const _component_el_form = resolveComponent("el-form");
+  const _component_el_dialog = resolveComponent("el-dialog");
+  const _directive_popover = resolveDirective("popover");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      _cache[26] || (_cache[26] = createElementVNode("span", null, "页面变量", -1)),
+      createElementVNode("i", {
+        class: "el-icon-close",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+      })
+    ]),
+    createElementVNode("div", _hoisted_3, [
+      createElementVNode("div", _hoisted_4, [
+        createVNode(_component_el_button, {
+          block: "",
+          type: "primary",
+          size: "default",
+          onClick: $options.addVariable
+        }, {
+          default: withCtx(() => [..._cache[27] || (_cache[27] = [
+            createTextVNode("+新增页面变量", -1)
+          ])]),
+          _: 1
+        }, 8, ["onClick"])
+      ]),
+      createVNode(_component_draggable, {
+        tag: "ul",
+        modelValue: $data.variableSets,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.variableSets = $event),
+        handle: ".epx-page-designer-page-variable__drag-icon",
+        class: "epx-page-designer-page-variable__list"
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($data.variableSets, (item) => {
+            return openBlock(), createElementBlock("li", {
+              class: "epx-page-designer-page-variable__item",
+              key: item.code
+            }, [
+              _cache[32] || (_cache[32] = createElementVNode("i", { class: "epx-page-designer-page-variable__drag-icon epx-icon-tuozhuai" }, null, -1)),
+              createElementVNode("div", _hoisted_5, [
+                createElementVNode("div", _hoisted_6, [
+                  item.name ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(item.name), 1)) : createCommentVNode("", true),
+                  createElementVNode("span", null, toDisplayString(item.code), 1)
+                ]),
+                createElementVNode("div", _hoisted_8, [
+                  createElementVNode("div", _hoisted_9, "获取方式：" + toDisplayString($data.typeOptions.find((t) => t.value === item.type).label), 1),
+                  item.value ? (openBlock(), createElementBlock("div", _hoisted_10, "变量值：" + toDisplayString(item.value), 1)) : createCommentVNode("", true)
+                ])
+              ]),
+              createElementVNode("div", _hoisted_11, [
+                createVNode(_component_el_dropdown, null, {
+                  dropdown: withCtx(() => [
+                    createVNode(_component_el_dropdown_menu, null, {
+                      default: withCtx(() => [
+                        createVNode(_component_el_dropdown_item, {
+                          command: "view",
+                          onClick: ($event) => $options.viewVariable(item)
+                        }, {
+                          default: withCtx(() => [..._cache[28] || (_cache[28] = [
+                            createTextVNode("查看", -1)
+                          ])]),
+                          _: 1
+                        }, 8, ["onClick"]),
+                        createVNode(_component_el_dropdown_item, {
+                          command: "edit",
+                          onClick: ($event) => $options.editVariable(item)
+                        }, {
+                          default: withCtx(() => [..._cache[29] || (_cache[29] = [
+                            createTextVNode("编辑", -1)
+                          ])]),
+                          _: 1
+                        }, 8, ["onClick"]),
+                        createVNode(_component_el_dropdown_item, {
+                          command: "remove",
+                          onClick: ($event) => $options.removeVariable(item)
+                        }, {
+                          default: withCtx(() => [..._cache[30] || (_cache[30] = [
+                            createTextVNode("删除", -1)
+                          ])]),
+                          _: 1
+                        }, 8, ["onClick"])
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ]),
+                  default: withCtx(() => [
+                    _cache[31] || (_cache[31] = createElementVNode("span", null, [
+                      createElementVNode("i", { class: "el-icon-more" })
+                    ], -1))
+                  ]),
+                  _: 2
+                }, 1024)
+              ])
+            ]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]),
+    createVNode(_component_el_dialog, {
+      class: "epx-page-designer-page-variable__variable-dialog",
+      title: $data.variableOperateType === "add" ? "新增变量" : $data.variableOperateType === "detail" ? "查看变量" : "编辑变量",
+      modelValue: $data.variableDialog,
+      "onUpdate:modelValue": _cache[21] || (_cache[21] = ($event) => $data.variableDialog = $event),
+      width: "600px",
+      "append-to-body": "",
+      "close-on-click-modal": false
+    }, {
+      footer: withCtx(() => [
+        $data.variableOperateType !== "detail" ? (openBlock(), createElementBlock("span", _hoisted_19, [
+          createVNode(_component_el_button, {
+            type: "primary",
+            onClick: $options.saveVariable,
+            size: "default"
+          }, {
+            default: withCtx(() => [..._cache[37] || (_cache[37] = [
+              createTextVNode("保 存", -1)
+            ])]),
+            _: 1
+          }, 8, ["onClick"]),
+          createVNode(_component_el_button, {
+            onClick: _cache[20] || (_cache[20] = ($event) => $data.variableDialog = false),
+            size: "default"
+          }, {
+            default: withCtx(() => [..._cache[38] || (_cache[38] = [
+              createTextVNode("取 消", -1)
+            ])]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true)
+      ]),
+      default: withCtx(() => [
+        $data.variableDialog ? (openBlock(), createElementBlock("div", _hoisted_12, [
+          createVNode(_component_el_form, {
+            ref: "variableForm",
+            class: "epx-page-designer-page-variable__form",
+            "label-position": "left",
+            "label-width": "80px",
+            model: $data.variableForm
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_form_item, {
+                label: "变量编号",
+                required: ""
+              }, {
+                default: withCtx(() => [
+                  $data.variableOperateType === "detail" ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString($data.variableForm.code), 1)) : (openBlock(), createBlock(_component_el_input, {
+                    key: 1,
+                    modelValue: $data.variableForm.code,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.variableForm.code = $event),
+                    size: "default",
+                    placeholder: "请输入"
+                  }, null, 8, ["modelValue"]))
+                ]),
+                _: 1
+              }),
+              createVNode(_component_el_form_item, { label: "变量名" }, {
+                default: withCtx(() => [
+                  $data.variableOperateType === "detail" ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString($data.variableForm.name), 1)) : (openBlock(), createBlock(_component_el_input, {
+                    key: 1,
+                    modelValue: $data.variableForm.name,
+                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $data.variableForm.name = $event),
+                    size: "default",
+                    placeholder: "请输入"
+                  }, null, 8, ["modelValue"]))
+                ]),
+                _: 1
+              }),
+              createVNode(_component_el_form_item, { label: "来源" }, {
+                default: withCtx(() => [
+                  $data.variableOperateType === "detail" ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString($data.variableForm.type && $data.typeOptions.find((item) => item.value === $data.variableForm.type).label), 1)) : (openBlock(), createBlock(_component_el_radio_group, {
+                    key: 1,
+                    modelValue: $data.variableForm.type,
+                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $data.variableForm.type = $event),
+                    onChange: _cache[5] || (_cache[5] = ($event) => $data.variableForm.value = "")
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList($data.typeOptions, (type) => {
+                        return openBlock(), createBlock(_component_el_radio, {
+                          key: type.value,
+                          label: type.value,
+                          value: type.value
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(type.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["label", "value"]);
+                      }), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue"]))
+                ]),
+                _: 1
+              }),
+              $data.variableForm.type === "request" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createVNode(_component_el_form_item, { label: "请求对象" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_epx_visual_config_object, {
+                      modelValue: $data.variableForm.metaId,
+                      "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => $data.variableForm.metaId = $event),
+                      type: "object",
+                      label: "请求对象",
+                      object: "FM_ENTITY",
+                      state: $data.variableOperateType === "detail" ? "DETAIL" : "EDIT"
+                    }, null, 8, ["modelValue", "state"])
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_el_form_item, { label: "请求方式" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_radio_group, {
+                      modelValue: $data.interfaceType,
+                      "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => $data.interfaceType = $event)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_el_radio, {
+                          label: "api",
+                          value: "api"
+                        }, {
+                          default: withCtx(() => [..._cache[33] || (_cache[33] = [
+                            createTextVNode("接口", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        createVNode(_component_el_radio, {
+                          label: "rule",
+                          value: "rule"
+                        }, {
+                          default: withCtx(() => [..._cache[34] || (_cache[34] = [
+                            createTextVNode("逻辑编排", -1)
+                          ])]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                }),
+                $data.interfaceType === "rule" ? (openBlock(), createBlock(_component_el_form_item, {
+                  key: 0,
+                  label: "逻辑编排"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_select, {
+                      clearable: "",
+                      modelValue: $data.variableForm.rule,
+                      "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => $data.variableForm.rule = $event),
+                      size: "default",
+                      placeholder: ""
+                    }, {
+                      default: withCtx(() => [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList($data.ruleMap[$data.variableForm.metaId || $props.designer.page.metaId], (option) => {
+                          return openBlock(), createBlock(_component_el_option, {
+                            key: option.value,
+                            label: `${option.label}`,
+                            value: option.value
+                          }, null, 8, ["label", "value"]);
+                        }), 128))
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                })) : (openBlock(), createBlock(_component_el_form_item, {
+                  key: 1,
+                  label: "请求接口"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_epx_visual_config_select, {
+                      value: $data.variableForm.action,
+                      state: $data.variableOperateType === "detail" ? "DETAIL" : "EDIT",
+                      optionList: $data.actionMap[$data.variableForm.metaId || $props.designer.page.metaId],
+                      placeholder: "请选择",
+                      onChangeConfigs: _cache[9] || (_cache[9] = (v) => $data.variableForm["action"] = v)
+                    }, null, 8, ["value", "state", "optionList"])
+                  ]),
+                  _: 1
+                }))
+              ], 64)) : createCommentVNode("", true),
+              $data.variableForm.type !== "query" ? (openBlock(), createBlock(_component_el_form_item, {
+                key: 1,
+                label: "变量值",
+                required: $data.variableForm.type !== "request"
+              }, {
+                default: withCtx(() => [
+                  $data.variableOperateType === "detail" ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString($data.variableForm.type === "component" ? $options.componentVariableShowLabel($data.variableForm.value) : $data.variableForm.value), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    $data.variableForm.type === "fixed" ? (openBlock(), createBlock(_component_epx_page_variable_panel_json_editor, {
+                      key: 0,
+                      class: "epx-page-designer-page-variable__json-editor",
+                      modelValue: $data.variableForm.value,
+                      "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => $data.variableForm.value = $event),
+                      placeholder: "请输入字符串、数字、布尔值、对象{...}、数组[...]等类型"
+                    }, null, 8, ["modelValue"])) : $data.variableForm.type === "component" ? (openBlock(), createBlock(_component_el_input, {
+                      key: 1,
+                      type: "text",
+                      size: "default",
+                      placeholder: "请选择组件变量",
+                      "suffix-icon": "el-icon-search",
+                      "model-value": $options.componentVariableShowLabel($data.variableForm.value),
+                      onFocus: $options.openComponentVariableDialog,
+                      clearable: "",
+                      onClear: _cache[11] || (_cache[11] = ($event) => $data.variableForm.value = "")
+                    }, null, 8, ["model-value", "onFocus"])) : $data.variableForm.type === "request" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                      createVNode(_component_el_popover, {
+                        ref: "popover",
+                        placement: "bottom",
+                        width: "200",
+                        trigger: "focus"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_el_tree, {
+                            ref: "apiParamsTree",
+                            data: $options.apiOutParams,
+                            "node-key": "id",
+                            props: { label: "REMARK", children: "children" },
+                            "filter-node-method": $options.apiParamsFilterNode,
+                            onNodeClick: $options.selectApiParams
+                          }, null, 8, ["data", "filter-node-method", "onNodeClick"])
+                        ]),
+                        _: 1
+                      }, 512),
+                      withDirectives(createVNode(_component_el_input, {
+                        modelValue: $options.apiParamsValue,
+                        "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => $options.apiParamsValue = $event),
+                        placeholder: $data.apiParamsFocused ? $options.apiParamsValueLabel : "请选择",
+                        size: "default",
+                        onFocus: _cache[13] || (_cache[13] = ($event) => $data.apiParamsFocused = true),
+                        onBlur: $options.apiParamsInputBlur,
+                        "suffix-icon": "el-icon-search"
+                      }, null, 8, ["modelValue", "placeholder", "onBlur"]), [
+                        [_directive_popover, void 0, "popover"]
+                      ])
+                    ], 64)) : (openBlock(), createBlock(_component_el_input, {
+                      key: 3,
+                      type: "text",
+                      size: "default",
+                      modelValue: $data.variableForm.value,
+                      "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => $data.variableForm.value = $event)
+                    }, null, 8, ["modelValue"]))
+                  ], 64))
+                ]),
+                _: 1
+              }, 8, ["required"])) : createCommentVNode("", true),
+              $data.variableForm.type === "request" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                createVNode(_component_el_form_item, { label: "请求方式" }, {
+                  default: withCtx(() => [
+                    $data.variableOperateType === "detail" ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString($data.variableForm.requestType === "sync" ? "同步" : "异步"), 1)) : (openBlock(), createBlock(_component_el_radio_group, {
+                      key: 1,
+                      modelValue: $data.variableForm.requestType,
+                      "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => $data.variableForm.requestType = $event)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_el_radio, {
+                          label: "async",
+                          value: "async"
+                        }, {
+                          default: withCtx(() => [..._cache[35] || (_cache[35] = [
+                            createTextVNode("异步", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        createVNode(_component_el_radio, {
+                          label: "sync",
+                          value: "sync"
+                        }, {
+                          default: withCtx(() => [..._cache[36] || (_cache[36] = [
+                            createTextVNode("同步", -1)
+                          ])]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue"]))
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_el_form_item, { label: "请求参数" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_epx_visual_config_params, {
+                      state: $data.variableOperateType === "detail" ? "DETAIL" : "EDIT",
+                      value: $data.variableForm.requestParams,
+                      metaId: $data.variableForm.metaId || $props.designer.page.metaId,
+                      treeFieldStore: $options.treeFieldStore,
+                      paramList: $options.apiInParams,
+                      pageParams: $data.variableSets,
+                      showParamsType: ["str", "page"],
+                      onChangeConfigs: _cache[16] || (_cache[16] = (v) => $data.variableForm["requestParams"] = v)
+                    }, null, 8, ["state", "value", "metaId", "treeFieldStore", "paramList", "pageParams"])
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_el_form_item, { label: "查询条件" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_epx_visual_config_scope, {
+                      state: $data.variableOperateType === "detail" ? "DETAIL" : "EDIT",
+                      value: $data.variableForm.scopeParams,
+                      treeFieldStore: $options.treeFieldStore,
+                      componentMetaId: $data.variableForm.metaId || $props.designer.page.metaId,
+                      onChangeConfigs: _cache[17] || (_cache[17] = (v) => $data.variableForm["scopeParams"] = v)
+                    }, null, 8, ["state", "value", "treeFieldStore", "componentMetaId"])
+                  ]),
+                  _: 1
+                })
+              ], 64)) : createCommentVNode("", true),
+              createVNode(_component_el_form_item, { label: "数据加工" }, {
+                default: withCtx(() => [
+                  createVNode(_component_epx_rule, {
+                    formulaType: "web",
+                    modelValue: $options.dataFormat,
+                    "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => $options.dataFormat = $event),
+                    metaId: $props.designer.page.metaId,
+                    variableList: $options.variableTree,
+                    fieldConfigs: { state: "EDIT", functionType: "web" }
+                  }, null, 8, ["modelValue", "metaId", "variableList"])
+                ]),
+                _: 1
+              }),
+              createVNode(_component_el_form_item, { label: "变量说明" }, {
+                default: withCtx(() => [
+                  $data.variableOperateType === "detail" ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString($data.variableForm.note), 1)) : (openBlock(), createBlock(_component_el_input, {
+                    key: 1,
+                    type: "textarea",
+                    placeholder: "请输入",
+                    modelValue: $data.variableForm.note,
+                    "onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => $data.variableForm.note = $event)
+                  }, null, 8, ["modelValue"]))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["model"])
+        ])) : createCommentVNode("", true)
+      ]),
+      _: 1
+    }, 8, ["title", "modelValue"]),
+    createVNode(_component_el_dialog, {
+      title: "选择组件变量",
+      modelValue: $data.componentVariableDialog,
+      "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => $data.componentVariableDialog = $event),
+      width: "960px",
+      "append-to-body": "",
+      class: "epx-page-designer-page-variable__component-dialog"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_20, [
+          createElementVNode("div", _hoisted_21, [
+            createVNode(_component_el_input, {
+              class: "epx-page-designer-page-variable__component-search-input",
+              size: "small",
+              "suffix-icon": "el-icon-search",
+              modelValue: $data.componentVariableSearch,
+              "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => $data.componentVariableSearch = $event),
+              placeholder: "输入变量名称查询"
+            }, null, 8, ["modelValue"]),
+            createVNode(_component_el_tree, {
+              ref: "componentVariableTree",
+              data: $options.widgetListWithInfo,
+              props: $data.componentVariableTreeProps,
+              onNodeClick: _cache[23] || (_cache[23] = (data) => $data.selectedWidget = data),
+              "filter-node-method": $options.filterNode
+            }, {
+              default: withCtx(({ data }) => [
+                createElementVNode("span", _hoisted_22, [
+                  createElementVNode("span", null, [
+                    createElementVNode("i", {
+                      class: normalizeClass([data.data.ICON || "el-icon-box"])
+                    }, null, 2),
+                    createElementVNode("span", null, toDisplayString(data.title), 1)
+                  ]),
+                  data.data.variables ? (openBlock(), createElementBlock("i", _hoisted_23)) : createCommentVNode("", true)
+                ])
+              ]),
+              _: 1
+            }, 8, ["data", "props", "filter-node-method"])
+          ]),
+          $data.selectedWidget ? (openBlock(), createElementBlock("div", _hoisted_24, [
+            $options.selectedWidgetInfo.variables ? (openBlock(), createBlock(_component_el_radio_group, {
+              key: 0,
+              class: "epx-page-designer-page-variable__component-variable-radio-group",
+              modelValue: $data.variableForm.value,
+              "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => $data.variableForm.value = $event)
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.selectedWidgetInfo.variables, (item) => {
+                  return openBlock(), createBlock(_component_el_radio, {
+                    key: item.data.CODE,
+                    label: `${$data.selectedWidget.id}.${item.data.CODE}`,
+                    value: `${$data.selectedWidget.id}.${item.data.CODE}`
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(item.data.NAME), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_25, [..._cache[39] || (_cache[39] = [
+              createElementVNode("i", { class: "epx-icon-color-kong1" }, null, -1),
+              createElementVNode("span", null, "暂无组件变量", -1)
+            ])]))
+          ])) : createCommentVNode("", true)
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"])
+  ]);
+}
+const PageVariablePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  PageVariablePanel as default
+};