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

package/dist/src/visual/widgets/TabsConfig.vue.js

@@ -0,0 +1,343 @@
+import { createVNode, resolveComponent, createTextVNode, isVNode } from "vue";
+import draggable from "@epxing/core/src/components/draggable";
+import _sfc_main$1 from "../Component.vue.js";
+/* empty css                */
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main = {
+  name: "epx-tabs-config",
+  extends: _sfc_main$1,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      tabName: {},
+      editTab: {},
+      editTabDialog: false
+    };
+  },
+  computed: {
+    tabs: {
+      get() {
+        const {
+          items = []
+        } = this.widget;
+        return items;
+      },
+      set(v) {
+        this.designer.updateWidget(this.id, {
+          items: v
+        });
+      }
+    },
+    selectedWidget() {
+      return this.designer.selectedWidget;
+    },
+    widgetConfig() {
+      const compId = this.selectedWidget.id;
+      const widgetConfig = this.designer.widgetConfig[compId] || {};
+      return widgetConfig;
+    },
+    variableSets: {
+      get() {
+        var _a;
+        return ((_a = this.designer.pageConfig) == null ? void 0 : _a.variableSets) || [];
+      }
+    },
+    variableTree() {
+      const {
+        iterator
+      } = this.widgetConfig;
+      const variableList = this.variableSets.map((item) => ({
+        ...item,
+        type: "variable",
+        text: item.name || item.code,
+        code: item.code
+      }));
+      if (iterator == null ? void 0 : iterator.data) {
+        variableList.push({
+          type: "variable",
+          text: this.selectedWidget.title + "_迭代变量",
+          code: iterator.name || "item"
+        });
+      }
+      return [{
+        code: "PAGE_VARIABLE",
+        text: "页面变量",
+        children: variableList
+      }];
+    }
+  },
+  methods: {
+    initDefaultConfigs() {
+      if (this.tabs) {
+        this.tabs.forEach((item) => {
+          this.tabName[item.id] = item.title;
+        });
+      }
+      this.defaultConfigs = {
+        flex: true,
+        componentName: this.componentInfo.title,
+        type: "card",
+        span: 24,
+        tabIndex: "$[tabIndex]"
+      };
+      this.subDefaultConfigs = {
+        tabCount: false
+      };
+    },
+    initConfig() {
+      const config = {
+        ...this.compConfig
+      };
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span;
+      }
+      this.config = config;
+      for (const key in this.config) {
+        const configOption = this.configOptions.find((item) => item.key === key) || {};
+        if (configOption.type === "field") {
+          this.selectFieldWay[key] = "custom";
+        }
+      }
+    },
+    addTabPane() {
+      const {
+        items = []
+      } = this.widget;
+      const id = "tabpane_" + this.$util.genId();
+      const name = "标签项" + (items.length + 1);
+      const newTabPane = {
+        id,
+        title: name,
+        contentType: "tab-pane"
+      };
+      this.tabName[id] = name;
+      this.designer.addWidget(newTabPane, this.widget, {
+        defaultSelected: false
+      });
+    },
+    changeTabPane(item) {
+      this.designer.updateWidget(item.id, {
+        title: this.tabName[item.id]
+      });
+    },
+    deleteTabPane(item) {
+      if (this.tabs.length <= 1) {
+        this.$message.error("标签项至少要有一个");
+        return;
+      }
+      this.designer.deleteWidget(item, this.widget);
+    },
+    editTabPane(item) {
+      const tabPaneConfig = this.designer.widgetConfig[item.id];
+      this.editTab = {
+        ...item,
+        showIf: tabPaneConfig == null ? void 0 : tabPaneConfig.showIf
+      };
+      this.editTabDialog = true;
+    },
+    changeTabPaneAttribute(key, v) {
+      this.editTab[key] = v;
+    },
+    changeTabPaneLanguageAttribute(key, v) {
+      this.editTab[`${key}.i18n`] = v;
+    },
+    saveTabPane() {
+      this.editTabDialog = false;
+      if (this.editTab.showIf) {
+        const el = JSON.parse(this.editTab.showIf).el;
+        this.designer.updateWidgetConfig(this.editTab.id, {
+          showIf: el
+        });
+      } else {
+        this.designer.updateWidgetConfig(this.editTab.id, {
+          showIf: null
+        });
+      }
+      delete this.editTab.showIf;
+      const tabs = [...this.tabs];
+      const index = tabs.findIndex((component) => component.id === this.editTab.id);
+      if (index !== -1) {
+        tabs.splice(index, 1, {
+          ...this.editTab
+        });
+        this.tabs = tabs;
+      }
+    },
+    renderTabPane(item) {
+      let _slot;
+      return createVNode("div", {
+        "class": ""
+      }, [createVNode(draggable, {
+        "modelValue": this.tabs,
+        "onUpdate:modelValue": ($event) => this.tabs = $event,
+        "tag": "ul",
+        "group": "tab-pane",
+        "handle": ".tab-item__drag-icon",
+        "class": "tab__list"
+      }, _isSlot(_slot = this.tabs.map((item2) => createVNode("li", {
+        "class": {
+          tab__item: true
+        }
+      }, [createVNode("i", {
+        "class": "tab-item__drag-icon epx-icon-tuozhuai"
+      }, null), createVNode(resolveComponent("el-input"), {
+        "class": "tab-item__input",
+        "size": "small",
+        "type": "text",
+        "modelValue": this.tabName[item2.id],
+        "onUpdate:modelValue": ($event) => this.tabName[item2.id] = $event,
+        "onChange": this.changeTabPane.bind(this, item2)
+      }, null), createVNode("span", {
+        "class": "tab-item__operates"
+      }, [createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "size": "default",
+        "icon": "el-icon-setting",
+        "onClick": this.editTabPane.bind(this, item2)
+      }, null), createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "size": "default",
+        "icon": "el-icon-delete",
+        "onClick": this.deleteTabPane.bind(this, item2)
+      }, null)])]))) ? _slot : {
+        default: () => [_slot]
+      }), createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "onClick": this.addTabPane
+      }, {
+        default: () => [createTextVNode("+ 添加标签项")]
+      }), createVNode(resolveComponent("el-dialog"), {
+        "title": "修改标签项",
+        "modelValue": this.editTabDialog,
+        "width": "420px",
+        "append-to-body": true,
+        "destroy-on-close": true,
+        "onClose": () => {
+          this.editTabDialog = false;
+        }
+      }, {
+        default: () => [this.editTabDialog && createVNode(resolveComponent("el-form"), {
+          "inline": true,
+          "label-position": "left",
+          "label-width": "100px"
+        }, {
+          default: () => [createVNode(resolveComponent("el-form-item"), {
+            "label": "名称",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-input"), {
+              "label": "名称",
+              "value": this.editTab.title,
+              "i18nValue": this.editTab["title.i18n"],
+              "onChangeConfigs": this.changeTabPaneAttribute.bind(this, "title"),
+              "onChange-language-config": this.changeTabPaneLanguageAttribute.bind(this, "title")
+            }, null)]
+          }), createVNode(resolveComponent("el-form-item"), {
+            "label": "图标",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-object"), {
+              "type": item.type,
+              "value": this.editTab.icon,
+              "object": "FM_FONT_ICON",
+              "label": "图标",
+              "dataKey": "CODE",
+              "onChangeConfigs": this.changeTabPaneAttribute.bind(this, "icon")
+            }, null)]
+          }), createVNode(resolveComponent("el-form-item"), {
+            "label": "显示数量",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("el-radio-group"), {
+              "modelValue": this.editTab.tabCount,
+              "onUpdate:modelValue": ($event) => this.editTab.tabCount = $event
+            }, {
+              default: () => [createVNode(resolveComponent("el-radio"), {
+                "label": true,
+                "value": true
+              }, {
+                default: () => [createTextVNode("显示")]
+              }), createVNode(resolveComponent("el-radio"), {
+                "label": false,
+                "value": false
+              }, {
+                default: () => [createTextVNode("不显示")]
+              })]
+            })]
+          }), createVNode(resolveComponent("el-form-item"), {
+            "label": "统计对象",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-object"), {
+              "value": this.editTab.metaId,
+              "object": "FM_ENTITY",
+              "label": "统计对象",
+              "onChangeConfigs": this.changeTabPaneAttribute.bind(this, "metaId")
+            }, null)]
+          }), createVNode(resolveComponent("el-form-item"), {
+            "label": "查询参数",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-params"), {
+              "value": this.editTab.countParams,
+              "treeFieldStore": this.treeFieldStore,
+              "pageParams": this.pageParams,
+              "onChangeConfigs": this.changeTabPaneAttribute.bind(this, "countParams")
+            }, null)]
+          }), createVNode(resolveComponent("el-form-item"), {
+            "label": "数量范围",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-scope"), {
+              "value": this.editTab.countScopeParams,
+              "pageParams": this.pageParams,
+              "treeFieldStore": this.treeFieldStore,
+              "componentMetaId": this.editTab.metaId || this.getConfigMetaId(item) || this.pageMetaId,
+              "scopeConfigs": this.scopeConfigs,
+              "onChangeConfigs": this.changeTabPaneAttribute.bind(this, "countScopeParams")
+            }, null)]
+          }), createVNode(resolveComponent("el-form-item"), {
+            "label": "显示条件"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-rule"), {
+              "formulaType": "web",
+              "modelValue": this.editTab.showIf,
+              "onUpdate:modelValue": ($event) => this.editTab.showIf = $event,
+              "metaId": this.getConfigMetaId(item) || this.pageMetaId,
+              "variableList": this.variableTree,
+              "fieldConfigs": {
+                state: "EDIT",
+                functionType: "web"
+              }
+            }, null)]
+          })]
+        }), createVNode("div", {
+          "class": "button-group"
+        }, [createVNode(resolveComponent("el-button"), {
+          "type": "primary",
+          "size": "default",
+          "onClick": this.saveTabPane
+        }, {
+          default: () => [createTextVNode("确定")]
+        }), createVNode(resolveComponent("el-button"), {
+          "size": "default",
+          "onClick": () => {
+            this.editTabDialog = false;
+          }
+        }, {
+          default: () => [createTextVNode("取消")]
+        })])]
+      })]);
+    }
+  }
+};
+export {
+  _sfc_main as default
+};