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

package/dist/src/visual/Component.vue.js

@@ -0,0 +1,1332 @@
+import { createVNode, resolveComponent } from "vue";
+import ConfigOptions from "./config/Options.js";
+import { getCached, attributeTreeKey } from "./config/remote-cache.js";
+import { compileShowCondition } from "./config/show-condition.js";
+import { evalWith } from "@epxing/utils/src/eval-with";
+import { mapGetters, mapState } from "vuex";
+import { cloneDeep, isEqual } from "lodash-es";
+function diffPatch(prev, next) {
+  const patch = {};
+  let changed = false;
+  for (const key in next) {
+    if (!isEqual(prev[key], next[key])) {
+      patch[key] = next[key];
+      changed = true;
+    }
+  }
+  for (const key in prev) {
+    if (!(key in next)) {
+      patch[key] = null;
+      changed = true;
+    }
+  }
+  return changed ? patch : null;
+}
+const _sfc_main = {
+  name: "epx-visual-component",
+  components: {
+    [ConfigOptions.name]: ConfigOptions
+  },
+  props: {
+    designer: Object,
+    widget: Object,
+    id: [String, Number],
+    metaId: String,
+    upMetaId: String,
+    upMetaViewId: String,
+    componentInfo: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    compConfig: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    globalConfigs: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    upComponent: {
+      type: String,
+      default: ""
+    },
+    upId: String,
+    upComponentInstance: Object,
+    pageActionList: {
+      type: Array
+    },
+    pageRuleList: {
+      type: Array
+    },
+    pageRelationList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    pageAllFieldList: {
+      type: Array
+    },
+    pageParams: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    scopeConfigs: Object
+  },
+  provide() {
+    return {
+      // 供 epx-visual-config-form-item 调用 renderFormItem：每个配置项在自己的子组件里渲染，只依赖自己读到的 key
+      visualComponent: this
+    };
+  },
+  inject: {
+    pageId: {
+      type: String
+    },
+    pageConfigs: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    getPageMetaId: {
+      type: Function
+    },
+    getItemConfigs: {
+      type: Function
+    },
+    changeItemConfigs: {
+      type: Function
+    },
+    updateWidget: {
+      type: Function
+    },
+    setContainerDefaultItems: {
+      type: Function
+    }
+  },
+  data() {
+    return {
+      spanOptions: [],
+      config: {},
+      defaultConfigs: {},
+      componentActionList: null,
+      // 列表页面单独请求
+      componentTreeFieldStore: null,
+      // 放在配置页
+      configOptions: [],
+      FunctionOption: [],
+      commonOperates: [],
+      componentMetaId: null,
+      metaViewId: null,
+      componentRuleList: null,
+      componentRelationList: null,
+      foldMap: {},
+      opened: {}
+    };
+  },
+  computed: {
+    ...mapState({
+      pages: (state) => state.page.configs,
+      metas: (state) => state.meta.metas
+    }),
+    ...mapGetters(["getPageById", "getCodeById", "getMeta", "getMetaRelationFields", "getMetaViewFields"]),
+    pageMetaId() {
+      return this.getPageMetaId && this.getPageMetaId();
+    },
+    currentPage() {
+      const page = this.getPageById(this.pageId) || this.designer.page;
+      return page;
+    },
+    currentMetaId() {
+      return this.componentMetaId || this.upMetaId || this.metaId || this.pageMetaId;
+    },
+    currentMetaViewId() {
+      return this.metaViewId || this.upMetaViewId;
+    },
+    currentMeta() {
+      const meta = this.getMeta(this.currentMetaId);
+      if (!meta && this.currentMetaId) {
+        this.$store.dispatch({
+          type: "ADD_META",
+          metaId: this.currentMetaId
+        });
+      }
+      return meta || null;
+    },
+    pageMeta() {
+      return this.getMeta(this.pageMetaId);
+    },
+    itemConfigs() {
+      return this.getItemConfigs();
+    },
+    allConfigs: {
+      get() {
+        const all = {
+          ...this.config
+        };
+        const allConfigs = this.$_.assignWith(all, this.defaultConfigs, (value, defaultValue) => {
+          return this.$_.isNil(value) ? defaultValue : value;
+        });
+        return allConfigs;
+      },
+      set(v) {
+      }
+    },
+    isDefaultValue() {
+      return (key) => {
+        const {
+          [key]: defaultValue
+        } = this.defaultConfigs;
+        const {
+          [key]: value
+        } = this.config;
+        return defaultValue !== void 0 && (value === void 0 || this.$_.isEqual(value, defaultValue));
+      };
+    },
+    actionList() {
+      return this.componentActionList || this.pageActionList || [];
+    },
+    ruleList() {
+      return this.componentRuleList || this.pageRuleList || [];
+    },
+    relationList() {
+      return this.componentRelationList || this.pageRelationList || [];
+    },
+    treeFieldStore() {
+      return this.getMetaViewFields(this.currentMetaId, this.currentMetaViewId);
+    },
+    functionList() {
+      const {
+        JS = ""
+      } = this.globalConfigs;
+      const result = JS.match(/export\sfunction\s(\w+)/g);
+      const functionList = [];
+      if (!result) return [];
+      result.forEach((item2) => {
+        functionList.push(item2.replace(/export\sfunction\s/, ""));
+      });
+      return functionList;
+    },
+    getConfigMetaId() {
+      return (item2) => {
+        if (item2.metaId) return item2.metaId;
+        else if (item2.dynamicMetaId) {
+          const getFieldRelatedMeta = (field) => {
+            const fieldConfigs = this.currentMeta.getAllFieldConfigs().find((item3) => item3.attriName === field[0] || field);
+            return fieldConfigs.codeKey;
+          };
+          const el = JSON.parse(item2.dynamicMetaId).el.replace(/^#{(.*)}$/, "$1");
+          return evalWith(el, {
+            getFieldRelatedMeta,
+            configs: this.allConfigs
+          }, this);
+        }
+        return this.currentMetaId;
+      };
+    },
+    showConfigOptions() {
+      const showFn = (item2) => {
+        let flag = true;
+        if (item2.showFlag) {
+          for (const key in item2.showFlag) {
+            if (Array.isArray(item2.showFlag[key])) {
+              if (!item2.showFlag[key].includes(this.allConfigs[key])) flag = false;
+            } else {
+              if (item2.showFlag[key] != this.allConfigs[key]) flag = false;
+            }
+          }
+        }
+        if (flag && item2.showCondition) {
+          const compiled = compileShowCondition(item2.showCondition, (msg) => this.$message && this.$message.error(msg));
+          if (compiled === false) {
+            flag = false;
+          } else if (compiled) {
+            try {
+              flag = compiled.call(this, this.allConfigs);
+            } catch (error) {
+              console.error(error);
+              flag = false;
+            }
+          }
+        }
+        return flag;
+      };
+      const result = [];
+      for (const item2 of this.configOptions) {
+        if (!showFn(item2)) continue;
+        result.push(item2.children ? {
+          ...item2,
+          children: item2.children.filter(showFn)
+        } : item2);
+      }
+      return result;
+    },
+    variableTree() {
+      var _a;
+      const variableSets = ((_a = this.designer.pageConfig) == null ? void 0 : _a.variableSets) || [];
+      const {
+        iterator
+      } = this.allConfigs;
+      const variableList = variableSets.map((item2) => ({
+        ...item2,
+        type: "variable",
+        text: item2.name || item2.code,
+        code: item2.code
+      }));
+      if (iterator == null ? void 0 : iterator.data) {
+        variableList.push({
+          type: "variable",
+          text: this.selectedWidget.title + "_迭代变量",
+          code: iterator.name || "item"
+        });
+      }
+      return [...this.treeFieldStore || [], {
+        code: "PAGE_VARIABLE",
+        text: "页面变量",
+        children: variableList
+      }];
+    },
+    $formatScope() {
+      return (scopeParams, data2 = {}) => {
+        const _scopeParams = this.$_.cloneDeep(scopeParams);
+        const that = this;
+        const paramData = {
+          ...this.$tab,
+          ...this.$query,
+          ...this.$pageParams,
+          ...that.$compData
+        };
+        for (const scopeKey in _scopeParams) {
+          const scope = _scopeParams[scopeKey];
+          if (!scope) continue;
+          let values = scope.values;
+          if (/#\{([\w-.|$#]+)\}/.test(values)) {
+            values = values.replace(/#\{([\w-.|$#]+)\}/, (match, key) => {
+              try {
+                return evalWith(`that.${key}`, {
+                  that
+                }) || evalWith(`that.$query.${key}`, {
+                  that
+                }) || evalWith(`that.$tab.${key}`, {
+                  that
+                }) || "";
+              } catch (error) {
+                return scope.values;
+              }
+            });
+          }
+          if (/\$\[([\w-_.|$#]+)\]/.test(values)) {
+            values = values.replace(/\$\[([\w-.|$#]+)\]/, (match, key) => {
+              try {
+                return that.$util.getValueByPath(key, this) || that.$util.getValueByPath(key, paramData) || "";
+              } catch (error) {
+                return scope.values;
+              }
+            });
+          }
+          if (/#\[([\w-.|$#]+)\]/.test(values)) {
+            values = values.replace(/#\[([\w-.|$#]+)\]/, (match, key) => {
+              try {
+                return evalWith(`data.${key}`, {
+                  data: data2
+                }) || "";
+              } catch (error) {
+                return scope.values;
+              }
+            });
+          }
+          if (/\{\{([\w-_.,|$#[\]()"'\s]+)\}\}/g.test(values)) {
+            values = values.replace(/\{\{([\w-.,|$#[\]()"'\s]+)\}\}/g, (macth, key) => {
+              try {
+                return this.$util.evalExpression(key, paramData);
+              } catch (error) {
+                return `{{${key}}}`;
+              }
+            });
+          }
+          scope.values = values;
+          if (scope.scopeParams) {
+            scope.scopeParams = this.$formatScope(scope.scopeParams, data2);
+          }
+        }
+        return _scopeParams;
+      };
+    }
+  },
+  watch: {
+    pageParams: {
+      handler(v) {
+      },
+      deep: true
+    },
+    config: {
+      handler(v) {
+        if (v.metaId) this.componentMetaId = v.metaId;
+        this.metaViewId = v.metaViewId;
+        this.scheduleCommit();
+      },
+      deep: true
+    },
+    currentMetaId: {
+      handler(v) {
+        this.getActionList(v);
+        this.getRuleList(v);
+        this.getAllFields(v);
+        this.refreshConfigOptions(true);
+      },
+      immediate: true
+    },
+    currentMetaViewId: {
+      handler(v) {
+        this.getAllFields();
+        this.refreshConfigOptions(true);
+      },
+      immediate: true
+    },
+    actionList(v) {
+      this.refreshConfigOptions(false);
+    },
+    ruleList(v) {
+      this.refreshConfigOptions(false);
+    },
+    relationList(v) {
+      this.refreshConfigOptions(false);
+    },
+    pageRuleList() {
+      this.getOperateOptions();
+    }
+  },
+  methods: {
+    // 单 key 取值：config 里为 nil 时退回默认值。渲染配置项时用它而不是 allConfigs[key]，
+    // 让每个配置项子组件只依赖自己的 key，而不是整个 allConfigs computed
+    getConfigValue(key) {
+      const value = this.config[key];
+      return this.$_.isNil(value) ? this.defaultConfigs[key] : value;
+    },
+    // deep watch 的回调只排队：同一微任务周期内的多次改动合并成一次提交
+    scheduleCommit() {
+      if (this._commitScheduled) return;
+      this._commitScheduled = true;
+      Promise.resolve().then(() => {
+        this._commitScheduled = false;
+        this.commitConfig();
+      });
+    },
+    // getConfigs / getComponentSetting 仍全量计算（子类可覆盖，且只有几千次比较），
+    // 但只把与上次提交不同的 key 写回 designer——此前每次输入都全量写回，整个画布跟着重算
+    commitConfig() {
+      if (this.$.isUnmounted) return;
+      const configs = this.getConfigs() || {};
+      const setting = this.getComponentSetting() || {};
+      const last = this._lastCommitted || {
+        configs: {},
+        setting: {}
+      };
+      const configPatch = diffPatch(last.configs, configs);
+      const settingPatch = diffPatch(last.setting, setting);
+      this._lastCommitted = {
+        configs: cloneDeep(configs),
+        setting: cloneDeep(setting)
+      };
+      if (configPatch) this.changeItemConfigs(this.id, configPatch);
+      if (settingPatch && this.designer) this.designer.updateWidget(this.id, settingPatch);
+    },
+    // 配置项刷新入口：同一微任务周期内只执行首次（两个 immediate watcher 会在挂载期连续同步触发两次）。
+    // 首次是同步执行的，不延后——created 里 32 个子类的 initConfig 依赖这个时序。
+    refreshConfigOptions(withDefaults) {
+      if (this._refreshTicket) return;
+      this._refreshTicket = true;
+      Promise.resolve().then(() => {
+        this._refreshTicket = false;
+      });
+      if (withDefaults) this.initDefaultConfigs();
+      this.initConfigOptions();
+      this.afterConfigOptions();
+    },
+    initDefaultConfigs() {
+      this.defaultConfigs = {
+        flex: false,
+        span: 24,
+        xsspan: 24
+      };
+    },
+    getEntityRelation(v) {
+      const mainEntity = v || this.currentMetaId;
+      getCached("relation:" + mainEntity, () => this.$http.$get({
+        entityId: "FM_ENTITY_RELATION",
+        action: "getEntityRelationTree",
+        mainEntity
+      })).then((data2) => {
+        data2.forEach((relation) => {
+          relation.label = relation.title;
+          relation.value = relation.flag;
+          relation.children = relation.childrens;
+          if (relation.childrens) {
+            relation.childrens.forEach((childRelation) => {
+              childRelation.value = relation.flag + "#" + childRelation.flag;
+              childRelation.label = childRelation.title;
+            });
+          }
+        });
+        this.componentRelationList = data2;
+      });
+    },
+    getField(field) {
+      const code = typeof field === "string" ? field : field && (field.attriName || field.code);
+      if (!code) return null;
+      const store = this.treeFieldStore || [];
+      for (const meta of store) {
+        const fieldInfo = (meta.children || []).find((item2) => item2.linkCode === code || item2.field === code || item2.code === code);
+        if (fieldInfo) return fieldInfo;
+      }
+      if (code.includes("|")) {
+        const links = code.split("|");
+        const fieldCode = links.pop();
+        const linkFlag = links.join("|").toUpperCase();
+        const linkMeta = store.find((meta) => meta.linkFlag && String(meta.linkFlag).toUpperCase() === linkFlag);
+        if (linkMeta) {
+          return (linkMeta.children || []).find((item2) => item2.code === fieldCode || item2.linkCode === code) || null;
+        }
+      }
+      return null;
+    },
+    // 视图切换时是否允许按新视图过滤已配置字段：
+    // 字段树未加载成功时不过滤（否则会误删全部字段）；
+    // 初次选中组件时 metaViewId 从空变为已保存值属于配置回显，也不过滤，仅用户真正切换视图时才过滤
+    canFilterFieldsByView(v) {
+      if (!this.treeFieldStore || !this.treeFieldStore.length) return false;
+      if (!this._metaViewTouched) {
+        this._metaViewTouched = true;
+        if (v === this._initialMetaViewId) return false;
+      }
+      return true;
+    },
+    async initConfigOptions() {
+      var _a, _b;
+      const baseOptions = [{
+        key: "componentName",
+        label: "组件名称"
+      }, {
+        key: "componentEvents",
+        label: "组件事件",
+        type: "event"
+      }, {
+        key: "span",
+        label: "宽度",
+        type: "select",
+        options: this.spanOptions
+      }, {
+        key: "xsspan",
+        label: "移动端宽度",
+        type: "select",
+        options: this.spanOptions
+      }, {
+        key: "flex",
+        label: "占据页面剩余空间",
+        type: "radio",
+        options: [{
+          label: "是",
+          value: true
+        }, {
+          label: "否",
+          value: false
+        }]
+      }];
+      if (!this.configOptions || this.configOptions.length === 0) this.configOptions = baseOptions;
+      if (this.componentInfo.ID || this.componentInfo.templateId) {
+        let eventList = this.getCodeById("EVENT");
+        if (!eventList) {
+          await this.$store.dispatch({
+            type: "ADD_LIST",
+            key: "EVENT"
+          }).then((data2) => {
+            eventList = data2;
+          });
+        }
+        const params = {
+          action: "getPageAttributeTree",
+          entityId: "FM_PAGE_ATTRIBUTE",
+          pageId: this.componentInfo.ID || this.componentInfo.templateId,
+          showEntity: "1",
+          order_field: "ORDER_NUM",
+          order_mode: "asc"
+        };
+        if (((_a = this.widget) == null ? void 0 : _a.type) === "template") {
+          params["scope.TEMPLATE"] = this.componentInfo.ID;
+          params.entityId = "FM_TEMPLATE_ATTRIBUTE";
+        } else {
+          params["scope.PAGE"] = this.componentInfo.ID || this.componentInfo.templateId;
+        }
+        const isTemplate = ((_b = this.widget) == null ? void 0 : _b.type) === "template";
+        const cacheKey = attributeTreeKey({
+          entityId: params.entityId,
+          pageId: isTemplate ? this.componentInfo.ID : this.componentInfo.ID || this.componentInfo.templateId,
+          isTemplate
+        });
+        getCached(cacheKey, () => this.$http.getTree(params)).then((data2) => {
+          if (data2 && data2.length > 0) {
+            const component = this.componentInfo || {};
+            const meta = this.currentMeta || {};
+            const pageMeta = this.pageMeta || {};
+            const that = this;
+            let keywordFields = [];
+            const {
+              label,
+              keyNames = []
+            } = meta;
+            if (meta && meta.id) {
+              meta.allFields = meta.getAllFields();
+              keywordFields = [...keyNames];
+              if (label) {
+                keywordFields.push(label);
+              }
+            }
+            const evalScope = {
+              component,
+              meta,
+              pageMeta,
+              that,
+              keywordFields
+            };
+            const formatData = (arr, fieldFlag = false) => {
+              arr.forEach((item2) => {
+                const {
+                  TYPE,
+                  CODE,
+                  NAME,
+                  CODE_KEY,
+                  RELATED_ENTITY,
+                  RELATED_ENTITY_KEY,
+                  SHOW_CONDITION,
+                  DYNAMIC_META_ID,
+                  OBJECT_SCOPE,
+                  FIELD_EDITABLE,
+                  DEFAULT_VALUE_TYPE,
+                  DEFAULT_VALUE,
+                  DEFAULT_VALUE_DYNAMIC,
+                  INPUT_VARIABLE,
+                  NOTE,
+                  SHOW_NOTE,
+                  MULTIPLE,
+                  SHOW_SUB_FIELD,
+                  LIMIT_DATATYPE,
+                  OBJECT_FLAG,
+                  CUSTOM_FUNCTION,
+                  CODE_KEY_SET,
+                  CUSTOM_CODE_KEY,
+                  EVENT,
+                  IS_TREE,
+                  FIELD_CONFIGS,
+                  REG_EXP,
+                  INPUTABLE,
+                  DYNAMIC_OPTION
+                } = item2.entity.data;
+                try {
+                  if (DEFAULT_VALUE_TYPE === "dynamic") {
+                    if (DEFAULT_VALUE_DYNAMIC) item2.defaultValue = evalWith(DEFAULT_VALUE_DYNAMIC, {
+                      ...evalScope,
+                      item: item2
+                    }, this);
+                  } else if (DEFAULT_VALUE) {
+                    if (TYPE === "switch" || TYPE === "num") {
+                      item2.defaultValue = evalWith(DEFAULT_VALUE, {
+                        ...evalScope,
+                        item: item2
+                      }, this);
+                    } else if (TYPE === "operates") {
+                      item2.defaultValue = JSON.parse(DEFAULT_VALUE);
+                    } else {
+                      item2.defaultValue = DEFAULT_VALUE;
+                    }
+                  }
+                } catch (error) {
+                  console.error(error);
+                }
+                if (DYNAMIC_OPTION) {
+                  try {
+                    item2.options = evalWith(`that.${DYNAMIC_OPTION}`, {
+                      that
+                    }, this);
+                  } catch (error) {
+                    console.error(error);
+                  }
+                }
+                if (!this.$_.isNil(item2.defaultValue)) {
+                  this.defaultConfigs[CODE] = item2.defaultValue;
+                }
+                let attriName = CODE;
+                if (fieldFlag && CODE.includes(".")) {
+                  attriName = CODE.split(".")[1];
+                }
+                item2.key = attriName;
+                item2.label = NAME;
+                item2.type = TYPE;
+                item2.showCondition = SHOW_CONDITION;
+                item2.dynamicMetaId = DYNAMIC_META_ID;
+                item2.code = CODE_KEY;
+                item2.object = RELATED_ENTITY;
+                item2.dataKey = RELATED_ENTITY_KEY;
+                item2.fieldEditable = FIELD_EDITABLE;
+                item2.inputVariable = INPUT_VARIABLE === "1";
+                item2.tip = NOTE;
+                item2.showTip = SHOW_NOTE === "1";
+                item2.regExp = REG_EXP;
+                if (INPUTABLE) item2.inputable = INPUTABLE === "1";
+                if (MULTIPLE) item2.multiple = MULTIPLE !== "0";
+                if (TYPE === "field") {
+                  if (SHOW_SUB_FIELD) item2.showSubField = SHOW_SUB_FIELD === "1";
+                  if (LIMIT_DATATYPE) item2.limit = {
+                    dataType: LIMIT_DATATYPE.split(",")
+                  };
+                } else if (TYPE === "object") {
+                  if (OBJECT_FLAG) item2.flag = OBJECT_FLAG;
+                  if (IS_TREE) item2.isTree = IS_TREE;
+                  if (FIELD_CONFIGS) item2.fieldConfigs = JSON.parse(FIELD_CONFIGS);
+                } else if (TYPE === "custom") {
+                  if (CUSTOM_FUNCTION) {
+                    if (typeof this[CUSTOM_FUNCTION] === "function") {
+                      item2.renderContent = this[CUSTOM_FUNCTION];
+                    }
+                  }
+                }
+                if (EVENT) {
+                  const event = {};
+                  eventList.forEach((item3) => {
+                    if (EVENT.includes(item3.code)) {
+                      event[item3.code] = item3.name;
+                    }
+                  });
+                  item2.eventList = event;
+                }
+                if (CODE_KEY_SET === "1" && CUSTOM_CODE_KEY) {
+                  item2.options = JSON.parse(CUSTOM_CODE_KEY);
+                }
+                if (OBJECT_SCOPE) {
+                  const scope = JSON.parse(OBJECT_SCOPE);
+                  item2.scopeParams = scope.scopeParams;
+                }
+                if (item2.children) {
+                  const flag = item2.children.length > 0 && TYPE === "field";
+                  formatData(item2.children, flag);
+                }
+              });
+            };
+            formatData(data2);
+            this.configOptions = data2;
+          }
+        });
+      }
+    },
+    afterConfigOptions() {
+      if (this.upComponentInstance) {
+        const upComponent = this.upComponentInstance.$refs.component || {};
+        const {
+          subConfigOptions = [],
+          subDefaultConfigs = {}
+        } = upComponent;
+        this.configOptions = [...subConfigOptions, ...this.configOptions];
+        this.defaultConfigs = {
+          ...subDefaultConfigs,
+          ...this.defaultConfigs
+        };
+      }
+    },
+    initConfig() {
+      const config = this.$_.cloneDeep(this.compConfig);
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span;
+      }
+      this.config = config;
+      this.afterInitConfig();
+    },
+    afterInitConfig() {
+    },
+    getActionList(v) {
+      if (!v || v === this.pageMetaId && this.pageActionList) return;
+      getCached(`api:${v}`, () => this.$http.list({
+        action: "getEntityAllApi",
+        entityId: "FM_ENTITY_API",
+        metaId: v
+      })).then((data2) => {
+        if (v === this.currentMetaId) {
+          this.componentActionList = data2.entitys.map((item2) => ({
+            label: item2.LABEL || item2.NAME,
+            value: item2.NAME
+          }));
+        }
+      });
+    },
+    getRuleList(v) {
+      if (!v || v === this.pageMetaId && this.pageRuleList) return;
+      getCached(`rule:${v}`, () => this.$http.list({
+        entityId: "ACT_RE_MODEL",
+        "scope.ENTITY": v,
+        "scope.CATEGORY": "2"
+      })).then((data2) => {
+        if (v === this.currentMetaId) {
+          this.componentRuleList = data2.entitys.map((item2) => ({
+            label: item2.NAME || item2.KEY,
+            value: item2.KEY
+          }));
+        }
+      });
+    },
+    getFieldOptions() {
+      this.fieldOptions = [{
+        key: "attriName",
+        label: "字段",
+        readonly: true
+      }, {
+        key: "configWay",
+        label: "配置方式",
+        type: "radio",
+        options: [{
+          label: "默认配置",
+          value: "default"
+        }, {
+          label: "自定义",
+          value: "custom"
+        }],
+        defaultValue: "default"
+      }, {
+        key: "attriLabel",
+        label: "名称",
+        type: "text"
+      }, {
+        key: "width",
+        label: "宽度",
+        type: "text",
+        defaultValue: "120"
+      }, {
+        key: "isLabel",
+        label: "外部标签",
+        type: "radio",
+        options: [{
+          label: "是",
+          value: true
+        }, {
+          label: "否",
+          value: false
+        }],
+        defaultValue: false
+      }, {
+        key: "locked",
+        label: "是否锁定",
+        type: "radio",
+        options: [{
+          label: "是",
+          value: true
+        }, {
+          label: "否",
+          value: false
+        }],
+        defaultValue: false
+      }, {
+        key: "color",
+        label: "字体颜色",
+        type: "color",
+        defaultValue: "#333"
+      }, {
+        key: "detailPageId",
+        label: "字段详情页面",
+        type: "object",
+        object: "FM_PAGE_CONFIG",
+        showFlag: {
+          dataType: ["object", "multiobject"]
+        }
+      }];
+    },
+    // 处理器列表 / 通用操作只跟组件类型（componentInfo.ID）有关：同类型面板全局只请求一次，
+    // created 与 pageRuleList 变化各触发一次也共享同一份
+    getHandlerList() {
+      getCached("handlers:" + this.componentInfo.ID, () => this.$http.list({
+        action: "pageHandlersList",
+        entityId: "FM_PAGE_HANDLERS",
+        pageId: this.componentInfo.ID,
+        order_field: "ORDER_NUM",
+        order_mode: "asc"
+      })).then((data2) => {
+        this.handlerList = data2.entitys.map((item2) => ({
+          label: item2.NAME,
+          value: item2.CODE
+        }));
+      });
+    },
+    getCommonOperates() {
+      getCached("commonOps:" + this.componentInfo.ID, () => this.$http.list({
+        action: "pageCommonOperatesList",
+        entityId: "FM_PAGE_COMMON_OPERATES",
+        pageId: this.componentInfo.ID,
+        link: "handler,component|left join",
+        order_field: "ORDER_NUM",
+        order_mode: "asc"
+      })).then((data) => {
+        if (data.entitys && data.entitys.length > 0) {
+          this.commonOperates = data.entitys.map((item) => {
+            const handler = {};
+            if (item.TEXT) handler.text = item.TEXT;
+            if (item.HANDLER) handler.handler = item["HANDLER|CODE"];
+            if (item.UI) handler.ui = item.UI;
+            if (item.ICON) handler.icon = item.ICON;
+            if (item.ACTION) handler.action = item.ACTION;
+            if (item.COMPONENT) handler.component = item["COMPONENT|CODE"];
+            if (item.NUM) handler.num = item.NUM;
+            if (item.CONFIRM) handler.confirm = item.CONFIRM === "1";
+            if (item.CONFIRM_MSG) handler.confirmMsg = item.CONFIRM_MSG;
+            if (item.SUCCESS_MSG) handler.successMsg = item.SUCCESS_MSG;
+            if (item.FAIL_MSG) handler.failMsg = item.FAIL_MSG;
+            if (item.OPEN_MODE) handler.openMode = item.OPEN_MODE;
+            if (item.MOVE_TYPE) handler.moveType = item.MOVE_TYPE;
+            if (item.PAGE_TYPE) handler.pageType = item.PAGE_TYPE;
+            if (item.PAGE_FLAG) handler.pageFlag = item.PAGE_FLAG;
+            if (item.TERMINAL) handler.terminal = item.TERMINAL;
+            if (item.PARAMS) {
+              handler.params = eval("(" + item.PARAMS + ")");
+            }
+            return handler;
+          });
+        }
+      });
+    },
+    // 一对多字段的函数选项（列表类面板的字段设置用）：代码表全局只请求一次
+    getFunctionOption() {
+      getCached("codes:ONEMORE_FIELD_FUNCTION", () => this.$http.getCodes({
+        key: "ONEMORE_FIELD_FUNCTION"
+      })).then((data2) => {
+        this.FunctionOption = data2.map((item2) => ({
+          value: item2.code,
+          name: item2.name
+        }));
+      });
+    },
+    getOperateOptions() {
+      this.getHandlerList();
+      this.getCommonOperates();
+      this.operateConfigs = [{
+        key: "base",
+        title: "基本",
+        options: ["text", "ui", "type", "icon", "preview"]
+      }, {
+        key: "event",
+        title: "事件",
+        options: ["metaId", "handler", "action", "rule", "moveType", "openMode", "page", "pageType", "menuId", "serviceId", "webLinkUrl", "printWay", "printCode", "cptName", "destActivityId", "processNode", "function", "params", "beforeTrigger", "afterTrigger", "afterTriggerPage", "afterTriggerPageOpenMode", "afterTriggerParams"]
+      }, {
+        key: "advance",
+        title: "高级",
+        options: ["terminal", "num", "limitFlag", "limitCondition", "limitTip", "showConditionType", "showCondition", "showConditionEl", "confirm", "confirmMsg", "confirmButtonText", "cancelButtonText", "successMsg", "failMsg", "mask"]
+      }];
+    },
+    // 筛选条件字段
+    getAllFields(v) {
+      if (!this.currentMetaId) return [];
+      if (!this.treeFieldStore) {
+        return this.$store.dispatch({
+          type: "ADD_META_VIEW_FIELDS",
+          metaId: this.currentMetaId,
+          viewId: this.metaViewId
+        });
+      }
+      return this.treeFieldStore;
+    },
+    changeConfigItem(key, value) {
+      this.config[key] = value;
+    },
+    changeLanguageConfig(key, value) {
+      this.config[`${key}.i18n`] = value;
+    },
+    changeEl(key, value) {
+      if (value) {
+        this.changeConfigItem(key, JSON.parse(value).el);
+      } else {
+        this.changeConfigItem(key, null);
+      }
+    },
+    getConfigs() {
+      const _configs = {};
+      for (const key in this.config) {
+        let configOption = {};
+        for (const item2 of this.configOptions) {
+          if (item2.key === key) {
+            configOption = item2;
+            break;
+          } else if (item2.children) {
+            for (const child of item2.children) {
+              if (child.key === key) {
+                configOption = child;
+                break;
+              }
+            }
+          }
+        }
+        if (configOption.allocation === "component") ;
+        else if (!this.$_.isEqual(this.config[key], this.defaultConfigs[key]) || configOption.key === "componentName") {
+          _configs[key] = this.config[key];
+        } else {
+          _configs[key] = null;
+        }
+      }
+      const advanceKeys = ["showIf", "iterator", "showTerminal", "componentEvents"];
+      advanceKeys.forEach((key) => {
+        if (this.compConfig[key] !== void 0) {
+          _configs[key] = this.compConfig[key];
+        }
+      });
+      return _configs;
+    },
+    getComponentSetting() {
+      const _setting = {};
+      const componentAttris = ["flex", "layout", "direction", "justify", "align", "style", "componentName", "span", "xsspan", "items", "countScopeParams"];
+      for (const key in this.config) {
+        const isAttri = componentAttris.find((item2) => item2 === key || item2 + ".i18n" === key);
+        const configOption = this.configOptions.find((item2) => item2.key === key) || {};
+        if (configOption.allocation === "component" || isAttri) {
+          if (!this.$_.isEqual(this.config[key], this.defaultConfigs[key])) {
+            _setting[key] = this.config[key];
+          }
+        }
+      }
+      return _setting;
+    },
+    switchAccordion(key) {
+      this.foldMap[key] = !this.foldMap[key];
+    },
+    /**
+     * renderFunctions
+     */
+    renderFormItem(item2) {
+      const defaultValue = this.$_.isNil(item2.defaultValue) ? this.defaultConfigs[item2.key] : item2.defaultValue;
+      if (item2.type === "report") {
+        return createVNode(resolveComponent("epx-visual-config-design-report"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": this.defaultConfigs[item2.key]
+        }, null);
+      }
+      const labelSlot = item2.type === "font" ? () => createVNode("span", null, [createVNode("i", {
+        "class": "epx-visual-component__form-item-fold-icon el-icon-caret-right",
+        "onClick": () => this.opened[item2.key] = !this.opened[item2.key]
+      }, null), item2.label]) : item2.showTip !== false && item2.tip ? () => createVNode("span", null, [item2.label, createVNode(resolveComponent("el-tooltip"), {
+        "content": item2.tip,
+        "placement": "top"
+      }, {
+        default: () => [createVNode("i", {
+          "class": "el-icon-warning epx-visual-component__form-item-tip"
+        }, null)]
+      })]) : null;
+      return createVNode("div", {
+        "class": "el-row",
+        "key": item2.key
+      }, [createVNode(resolveComponent("el-form-item"), {
+        "label": `${item2.label}`,
+        "class": {
+          "is-default": this.isDefaultValue(item2.key),
+          "epx-visual-component__form-item": true,
+          ["epx-visual-component__form-item--" + item2.type]: true,
+          "epx-visual-component__form-item--opened": this.opened[item2.key]
+        }
+      }, {
+        default: () => [item2.renderContent ? createVNode("div", null, [item2.renderContent(item2)]) : item2.type === "radio" ? createVNode(resolveComponent("epx-visual-config-radio"), {
+          "code": item2.code,
+          "option-list": item2.options,
+          "value": this.getConfigValue(item2.key),
+          "inputable": item2.inputable,
+          "defaultValue": defaultValue,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "checkbox" ? createVNode(resolveComponent("epx-visual-config-checkbox"), {
+          "code": item2.code,
+          "option-list": item2.options,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "switch" ? createVNode(resolveComponent("epx-visual-config-switch"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "action" ? createVNode(resolveComponent("epx-visual-config-list"), {
+          "option-list": this.actionList,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "code": item2.code,
+          "label": item2.label,
+          "multiple": item2.multiple,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "rule" ? createVNode(resolveComponent("epx-visual-config-list"), {
+          "option-list": this.ruleList,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "code": item2.code,
+          "label": item2.label,
+          "multiple": item2.multiple,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "tree" ? createVNode(resolveComponent("epx-visual-config-tree"), {
+          "option-list": item2.options,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "row" ? createVNode(resolveComponent("epx-visual-config-row"), {
+          "value": this.config[item2.key],
+          "defaultValue": defaultValue,
+          "treeFieldStore": this.treeFieldStore,
+          "field-options": this.rowFieldOptions || this.fieldOptions,
+          "pageParams": this.pageParams,
+          "pageGlobalConfigs": this.globalConfigs,
+          "changeItemConfigs": this.changeItemConfigs,
+          "scopeConfigs": this.scopeConfigs,
+          "functionOption": this.FunctionOption,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "list" ? createVNode(resolveComponent("epx-visual-config-list"), {
+          "option-list": item2.options,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "code": item2.code,
+          "label": item2.label,
+          "multiple": item2.multiple,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "select" ? createVNode(resolveComponent("epx-visual-config-select"), {
+          "option-list": item2.options,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "onChangeConfigs": item2.change || this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "list-field" || item2.type === "field" && item2.fieldEditable === "1" ? createVNode(resolveComponent("epx-visual-config-list-field"), {
+          "value": this.config[item2.key],
+          "componentMetaId": this.componentMetaId,
+          "defaultValue": defaultValue,
+          "rule-list": this.ruleList,
+          "treeFieldStore": this.treeFieldStore,
+          "functionOption": this.FunctionOption,
+          "scopeConfigs": this.scopeConfigs,
+          "pageParams": this.pageParams,
+          "pageGlobalConfigs": this.globalConfigs,
+          "field-options": item2.type === "field" && item2.children && item2.children.length > 0 ? item2.children : this.fieldOptions,
+          "changeItemConfigs": this.changeItemConfigs,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "field" ? createVNode(resolveComponent("epx-visual-config-field"), {
+          "value": this.config[item2.key],
+          "defaultValue": defaultValue,
+          "rule-list": this.ruleList,
+          "metaId": item2.metaId || this.getConfigMetaId(item2),
+          "treeFieldStore": this.treeFieldStore,
+          "multiple": item2.multiple,
+          "limit": item2.limit,
+          "scopeConfigs": this.scopeConfigs,
+          "defaultShowSubField": item2.showSubField,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "m-field" ? createVNode(resolveComponent("epx-visual-config-m-list-field"), {
+          "value": this.config[item2.key],
+          "defaultValue": this.defaultConfigs[item2.key],
+          "treeFieldStore": this.treeFieldStore,
+          "field-options": this.fieldOptions,
+          "pageParams": this.pageParams,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "order-field" ? createVNode(resolveComponent("epx-visual-config-order-field"), {
+          "value": this.config[item2.key],
+          "defaultValue": defaultValue,
+          "metaId": item2.metaId || this.getConfigMetaId(item2),
+          "treeFieldStore": this.treeFieldStore,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "operates" || item2.type === "operate" ? createVNode(resolveComponent("epx-visual-config-operate"), {
+          "designer": this.designer,
+          "value": this.config[item2.key],
+          "defaultValue": defaultValue,
+          "configs": this.config,
+          "metaId": item2.metaId,
+          "compMetaId": this.getConfigMetaId(item2),
+          "common-operates": item2.commonOperates || this.commonOperates,
+          "operate-options": {
+            ...this.operateOptions || {},
+            ...item2.operateOptions || {}
+          },
+          "operate-configs": this.operateConfigs,
+          "treeFieldStore": this.treeFieldStore,
+          "pageParams": this.pageParams,
+          "handlerList": item2.handlerList || this.handlerList,
+          "action-list": this.actionList,
+          "rule-list": this.ruleList,
+          "scopeConfigs": this.scopeConfigs,
+          "pageGlobalConfigs": this.globalConfigs,
+          "changeItemConfigs": this.changeItemConfigs,
+          "onChangeOperate": this.changeOperate && this.changeOperate.bind(this, item2.key),
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "scope" ? createVNode(resolveComponent("epx-visual-config-scope"), {
+          "designer": this.designer,
+          "value": this.config[item2.key],
+          "pageParams": this.pageParams,
+          "treeFieldStore": this.treeFieldStore,
+          "extendFields": item2.extendFields,
+          "componentMetaId": this.getConfigMetaId(item2),
+          "scopeConfigs": this.scopeConfigs,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "el" ? createVNode(resolveComponent("epx-rule"), {
+          "formulaType": "web",
+          "modelValue": this.getConfigValue(item2.key),
+          "onChange": this.changeEl.bind(this, item2.key),
+          "metaId": this.getConfigMetaId(item2),
+          "variableList": this.variableTree,
+          "fieldConfigs": {
+            state: "EDIT",
+            functionType: "web"
+          }
+        }, null) : item2.type === "num" ? createVNode(resolveComponent("epx-visual-config-number"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "chart" ? createVNode(resolveComponent("epx-visual-config-chart"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "onCallback": item2.callback,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "params" ? createVNode(resolveComponent("epx-visual-config-params"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "treeFieldStore": this.treeFieldStore,
+          "pageParams": this.pageParams,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "object" || item2.type === "multiobject" ? createVNode(resolveComponent("epx-visual-config-object"), {
+          "type": item2.type,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "object": item2.object,
+          "label": item2.label,
+          "dataKey": item2.dataKey,
+          "fieldConfigs": item2.fieldConfigs,
+          "flag": item2.flag,
+          "isTree": item2.isTree,
+          "scopeParams": item2.key === "metaViewId" ? [{
+            field: "ENTITY",
+            values: this.componentMetaId
+          }] : this.$formatScope(item2.scopeParams),
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "font" ? createVNode(resolveComponent("epx-visual-config-font"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": this.defaultConfigs[item2.key],
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "color" ? createVNode(resolveComponent("epx-visual-config-color"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": this.defaultConfigs[item2.key],
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "page" ? createVNode(resolveComponent("epx-visual-config-item-page"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": this.defaultConfigs[item2.key],
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "event" ? createVNode(resolveComponent("epx-visual-config-event"), {
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "functionList": this.functionList,
+          "eventList": item2.eventList,
+          "pageGlobalConfigs": this.globalConfigs,
+          "changeItemConfigs": this.changeItemConfigs,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "function" ? createVNode(resolveComponent("epx-visual-config-function"), {
+          "designer": this.designer,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": defaultValue,
+          "functionList": this.functionList,
+          "pageGlobalConfigs": this.globalConfigs,
+          "onInput": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "html" ? createVNode(resolveComponent("epx-visual-config-html"), {
+          "designer": this.designer,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": this.defaultConfigs[item2.key],
+          "i18nValue": this.getConfigValue(item2.key + ".i18n"),
+          "pageGlobalConfigs": this.globalConfigs,
+          "changeItemConfigs": this.changeItemConfigs,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key),
+          "onChange-language-config": this.changeLanguageConfig.bind(this, item2.key)
+        }, null) : item2.type === "image" ? createVNode(resolveComponent("epx-visual-config-image"), {
+          "designer": this.designer,
+          "label": item2.label,
+          "value": this.getConfigValue(item2.key),
+          "defaultValue": this.defaultConfigs[item2.key],
+          "pageGlobalConfigs": this.globalConfigs,
+          "changeItemConfigs": this.changeItemConfigs,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key)
+        }, null) : item2.type === "textarea" ? createVNode(resolveComponent("epx-visual-config-textarea"), {
+          "designer": this.designer,
+          "label": item2.label,
+          "value": this.getConfigValue(item2.key),
+          "i18nValue": this.getConfigValue(item2.key + ".i18n"),
+          "defaultValue": this.defaultConfigs[item2.key],
+          "inputVariable": item2.inputVariable,
+          "change": item2.change,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key),
+          "onChange-language-config": this.changeLanguageConfig.bind(this, item2.key)
+        }, null) : createVNode(resolveComponent("epx-visual-config-input"), {
+          "designer": this.designer,
+          "label": item2.label,
+          "value": this.getConfigValue(item2.key),
+          "i18nValue": this.getConfigValue(item2.key + ".i18n"),
+          "defaultValue": this.defaultConfigs[item2.key],
+          "inputVariable": item2.inputVariable,
+          "regExp": item2.regExp,
+          "readonly": item2.readonly,
+          "change": item2.change,
+          "onChangeConfigs": this.changeConfigItem.bind(this, item2.key),
+          "onChange-language-config": this.changeLanguageConfig.bind(this, item2.key)
+        }, null)],
+        ...labelSlot ? {
+          label: labelSlot
+        } : {}
+      })]);
+    }
+  },
+  created() {
+    this._lastCommitted = null;
+    this._commitScheduled = false;
+    this._initialMetaViewId = (this.compConfig || {}).metaViewId;
+    for (let i = 0; i <= 24; i++) {
+      this.spanOptions.push({
+        label: i,
+        value: i
+      });
+    }
+    this.handlerList = [{
+      label: "打开指定页面",
+      value: "goPage"
+    }, {
+      label: "打开指定应用",
+      value: "goApp"
+    }, {
+      label: "打开指定链接",
+      value: "Link"
+    }, {
+      label: "发起通用请求",
+      value: "commonAction"
+    }, {
+      label: "发起业务规则",
+      value: "commonRuleAction"
+    }, {
+      label: "报表打印",
+      value: "print"
+    }, {
+      label: "下载文件",
+      value: "downloadFile"
+    }, {
+      label: "返回",
+      value: "backPage"
+    }, {
+      label: "自定义JS",
+      value: "customJs"
+    }];
+    this.initConfig();
+    this.getFieldOptions();
+    this.getOperateOptions();
+  },
+  render() {
+    return createVNode("div", {
+      "class": "epx-visual-component"
+    }, [createVNode(resolveComponent("epx-visual-config-options"), {
+      "configOptions": this.showConfigOptions
+    }, null)]);
+  }
+};
+export {
+  _sfc_main as default
+};