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

package/dist/src/visual/config/OrderField.js

@@ -0,0 +1,505 @@
+import '../../../style.css';
+import { waitRef } from "./wait-ref.js";
+import draggable from "@epxing/core/src/components/draggable";
+import { mapGetters } from "vuex";
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, TransitionGroup, Fragment, renderList, createElementVNode, normalizeClass, createTextVNode, toDisplayString, withModifiers, normalizeStyle, createBlock, createCommentVNode } from "vue";
+/* empty css               */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-visual-config-order-field",
+  components: {
+    draggable
+  },
+  props: {
+    showSubFlag: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Array
+    },
+    defaultValue: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    treeFieldStore: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    metaId: String
+  },
+  data() {
+    return {
+      fieldList: [],
+      settingFieldList: [],
+      selectFieldList: [],
+      settingFieldWay: "default",
+      showFieldDialog: false,
+      filterText: "",
+      treeProps: {
+        children: "children",
+        label: "text"
+      },
+      showLogField: false,
+      showSubField: true
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+    // Vue3 起浅层 watcher 不响应 push/splice，而删字段、切升/降序走的正是 splice；
+    // 不加 deep 就是「改了排序配置却不回写 configs」。deep:1 对齐 Vue2 的浅层语义。
+    fieldList: {
+      deep: 1,
+      handler(v) {
+        this.$emit("change-configs", v);
+      }
+    },
+    settingFieldWay(v) {
+      if (v === "custom") {
+        this.$emit("change-configs", this.fieldList);
+      } else {
+        this.$emit("change-configs", null);
+      }
+    },
+    metaId: {
+      handler(v) {
+        this.getFieldStore();
+      },
+      immediate: true
+    },
+    value(v) {
+      if (!this.$_.isEqual(v, this.fieldList)) {
+        this.fieldList = v;
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      "getMetaViewFields"
+    ]),
+    fieldStore() {
+      if (this.treeFieldStore && this.treeFieldStore.length > 0 && (!this.metaId || this.treeFieldStore[0].id === this.metaId)) {
+        return this.treeFieldStore;
+      } else {
+        return this.getMetaViewFields(this.metaId) || [];
+      }
+    },
+    showFieldStore() {
+      const formatField = (arr) => {
+        return arr.filter((item) => {
+          if (!this.showLogField && ["ID", "LOG_C_TIME", "LOG_C_USER", "LOG_U_TIME", "LOG_U_USER"].includes(item.code)) {
+            return false;
+          }
+          if (!this.showSubField && (item.relationType === "1" || item.isSub)) {
+            return false;
+          }
+          if (item.children) {
+            item.children = formatField(item.children);
+          }
+          return true;
+        });
+      };
+      const copyFieldStore = this.$_.cloneDeep(this.fieldStore);
+      return formatField(copyFieldStore);
+    },
+    fieldLabel() {
+      return (field) => {
+        if (!field) return null;
+        let attriName = null;
+        let attriLabel = null;
+        if (typeof field === "string") {
+          attriName = field;
+        } else {
+          attriName = field.attriName;
+          if (field.attriLabel) attriLabel = field.attriLabel;
+        }
+        if (attriLabel) return attriLabel;
+        const getLabel = (arr) => {
+          for (const item of arr) {
+            if (item.field === attriName) return item.text;
+            if (item.children) {
+              const label = getLabel(item.children);
+              if (label) return label;
+            }
+          }
+        };
+        return getLabel(this.fieldStore) || attriName;
+      };
+    },
+    defaultExpandKeys() {
+      return this.fieldStore[0] ? [this.fieldStore[0].field] : [];
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.text && data.text.indexOf(value) !== -1;
+    },
+    getFieldStore() {
+      if (!this.metaId) return;
+      if (!this.getMetaViewFields(this.metaId)) {
+        this.$store.dispatch({
+          type: "ADD_META_RELATION_FIELDS",
+          id: this.metaId
+        });
+      }
+    },
+    getFieldPath(field) {
+      if (!field) return null;
+      let attriName = null;
+      if (typeof field === "string") {
+        attriName = field;
+      } else {
+        attriName = field.attriName;
+      }
+      const getPath = (arr, path) => {
+        for (const item of arr) {
+          if (item.field === attriName) {
+            return path ? path + "/" + item.text : item.text;
+          } else if (item.children) {
+            const childPath = getPath(item.children, path ? path + "/" + item.text : item.text);
+            if (childPath) return childPath;
+          }
+        }
+      };
+      return getPath(this.fieldStore);
+    },
+    deleteField(index) {
+      this.fieldList.splice(index, 1);
+    },
+    deleteSettingField(index) {
+      const field = this.settingFieldList[index];
+      this.settingFieldList.splice(index, 1);
+      this.selectFieldList.splice(index, 1);
+      if (field) {
+        this.$refs.tree.setChecked(field.attriName || field, false);
+      }
+    },
+    openAddFieldDialog(key) {
+      this.selectFieldList = this.fieldList.map((item) => (item.attriName || item).replace(/\|/g, "."));
+      this.settingFieldList = this.$_.cloneDeep(this.fieldList);
+      this.showFieldDialog = true;
+      waitRef(this, "tree", "setCheckedKeys").then((tree) => {
+        if (tree) tree.setCheckedKeys(this.selectFieldList);
+      });
+    },
+    getChildParent(arr, field, parent) {
+      for (const item of arr) {
+        if (item.field === field) {
+          return parent;
+        } else if (item.children) {
+          const child = this.getChildParent(item.children, field, item);
+          if (child) return child;
+        }
+      }
+    },
+    checkFieldChange(data, isCheck) {
+      if (data.isMain || data.type === "folder") {
+        if (isCheck) {
+          const children = data.children.filter((item) => !item.isSub);
+          for (const child of children) {
+            this.$nextTick(() => {
+              this.$refs.tree.setChecked(child.field, true);
+            });
+          }
+        } else {
+          const children = data.children.filter((item) => !item.isSub);
+          const flag = children.every((child) => this.selectFieldList.includes(child.field));
+          if (flag) {
+            children.forEach((item) => {
+              this.$refs.tree.setChecked(item.field, false);
+            });
+          }
+        }
+      } else {
+        const parent = this.getChildParent(this.fieldStore, data.field);
+        if (isCheck) {
+          const field = this.settingFieldList.find((item) => (item.attriName || item) === data.field);
+          if (!field) {
+            this.selectFieldList.push(data.field);
+            this.settingFieldList.push(data.field);
+          }
+          if (parent && parent.isMain) {
+            const children = parent.children.filter((item) => !item.isSub);
+            const flag = children.every((child) => this.selectFieldList.includes(child.field));
+            if (flag) this.$refs.tree.setChecked(parent.field, true);
+          }
+        } else {
+          const index = this.selectFieldList.findIndex((item) => item === data.field);
+          const fieldIndex = this.settingFieldList.findIndex((item) => (item.attriName || item) === data.field);
+          if (index !== -1) {
+            this.settingFieldList.splice(fieldIndex, 1);
+            this.selectFieldList.splice(index, 1);
+          }
+          if (parent && parent.isMain) this.$refs.tree.setChecked(parent.field, false);
+        }
+      }
+    },
+    orderField(field, index) {
+      let currentField = field;
+      if (typeof currentField === "string") {
+        currentField = { attriName: currentField };
+      }
+      this.fieldList.splice(index, 1, { ...currentField, sort: currentField.sort === "desc" ? "asc" : "desc" });
+    },
+    selectAllField(value, index) {
+      const fieldList = this.fieldStore[index].children || [];
+      if (value) {
+        const fieldCodeList = fieldList.map((item) => item.code);
+        this.selectFieldList = [.../* @__PURE__ */ new Set([...this.selectFieldList, ...fieldCodeList])];
+      } else {
+        fieldList.forEach((item) => {
+          const selectIndex = this.selectFieldList.findIndex((selectItem) => selectItem === item.code);
+          if (selectIndex !== -1) {
+            delete this.selectFieldList[selectIndex];
+          }
+        });
+      }
+    },
+    saveSelectField() {
+      this.fieldList = [...this.settingFieldList];
+      this.showFieldDialog = false;
+    },
+    swicthFieldStoreFold(index) {
+      const item = this.fieldStore[index];
+      this.fieldStore[index] = { ...item, isUnFold: !item.isUnFold };
+    }
+  },
+  created() {
+    if (!this.showSubFlag) {
+      this.showSubField = false;
+    }
+    if (this.value) {
+      this.fieldList = [...this.value];
+      this.settingFieldWay = "custom";
+    } else {
+      this.fieldList = [...this.defaultValue];
+    }
+  }
+};
+const _hoisted_1 = { class: "field" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "field-setting" };
+const _hoisted_5 = { class: "field-setting-item" };
+const _hoisted_6 = { class: "field-setting__content" };
+const _hoisted_7 = { class: "set-show-field" };
+const _hoisted_8 = { class: "field-setting-item" };
+const _hoisted_9 = { class: "field-setting__content" };
+const _hoisted_10 = { class: "setting-fields__select" };
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = { class: "field-setting__button" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_draggable = resolveComponent("draggable");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_el_tree = resolveComponent("el-tree");
+  const _component_el_checkbox = resolveComponent("el-checkbox");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  const _component_epx_visual_config_lazy_dialog = resolveComponent("epx-visual-config-lazy-dialog");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_draggable, {
+      list: $data.fieldList,
+      class: "list-group",
+      "ghost-class": "ghost"
+    }, {
+      default: withCtx(() => [
+        createVNode(TransitionGroup, {
+          type: "transition",
+          name: "flip-list",
+          class: "select-field-list"
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList($data.fieldList, (field, index) => {
+              return openBlock(), createElementBlock("li", {
+                class: "select-field-item list-group-item",
+                key: field.attriName || field
+              }, [
+                createElementVNode("span", {
+                  class: "field-order",
+                  onClick: ($event) => $options.orderField(field, index)
+                }, [
+                  createElementVNode("i", {
+                    class: normalizeClass(["el-icon-sort-down", { active: field.sort === "desc" }])
+                  }, null, 2),
+                  createElementVNode("i", {
+                    class: normalizeClass(["el-icon-sort-up", { active: field.sort !== "desc" }])
+                  }, null, 2),
+                  createTextVNode(" " + toDisplayString($options.fieldLabel(field)) + " ", 1),
+                  createElementVNode("i", {
+                    class: "el-icon-close",
+                    onClick: withModifiers(($event) => $options.deleteField(index), ["stop"])
+                  }, null, 8, _hoisted_3)
+                ], 8, _hoisted_2)
+              ]);
+            }), 128))
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["list"]),
+    createVNode(_component_el_button, {
+      class: "add-field-btn",
+      size: "small",
+      type: "primary",
+      onClick: $options.openAddFieldDialog
+    }, {
+      default: withCtx(() => [..._cache[5] || (_cache[5] = [
+        createTextVNode("+ 添加字段", -1)
+      ])]),
+      _: 1
+    }, 8, ["onClick"]),
+    createVNode(_component_epx_visual_config_lazy_dialog, {
+      title: "添加字段",
+      class: "show-field-dialog",
+      modelValue: $data.showFieldDialog,
+      "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $data.showFieldDialog = $event),
+      "append-to-body": true,
+      "destroy-on-close": "",
+      width: "800px",
+      top: "10vh"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_4, [
+          createElementVNode("div", _hoisted_5, [
+            _cache[9] || (_cache[9] = createElementVNode("p", { class: "field-setting__header" }, [
+              createElementVNode("span", null, "选择字段")
+            ], -1)),
+            createElementVNode("div", _hoisted_6, [
+              createVNode(_component_el_input, {
+                class: "field-setting__filter",
+                "suffix-icon": "el-icon-search",
+                size: "default",
+                modelValue: $data.filterText,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.filterText = $event)
+              }, null, 8, ["modelValue"]),
+              createVNode(_component_el_tree, {
+                ref: "tree",
+                class: "field-tree",
+                "show-checkbox": "",
+                "node-key": "field",
+                "default-expanded-keys": $options.defaultExpandKeys,
+                data: $options.showFieldStore,
+                "auto-expand-parent": false,
+                props: $data.treeProps,
+                "check-strictly": true,
+                "filter-node-method": $options.filterNode,
+                onCheckChange: $options.checkFieldChange
+              }, {
+                default: withCtx(({ node, data }) => [
+                  createElementVNode("span", {
+                    style: normalizeStyle(data.isSub ? { color: "red" } : {})
+                  }, toDisplayString(node.label), 5)
+                ]),
+                _: 1
+              }, 8, ["default-expanded-keys", "data", "props", "filter-node-method", "onCheckChange"]),
+              createElementVNode("div", _hoisted_7, [
+                _cache[8] || (_cache[8] = createTextVNode(" 显示字段： ", -1)),
+                createVNode(_component_el_checkbox, {
+                  modelValue: $data.showLogField,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.showLogField = $event)
+                }, {
+                  default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                    createTextVNode("日志字段", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["modelValue"]),
+                $props.showSubFlag ? (openBlock(), createBlock(_component_el_checkbox, {
+                  key: 0,
+                  modelValue: $data.showSubField,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.showSubField = $event)
+                }, {
+                  default: withCtx(() => [..._cache[7] || (_cache[7] = [
+                    createTextVNode("子集字段", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["modelValue"])) : createCommentVNode("", true)
+              ])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_8, [
+            _cache[11] || (_cache[11] = createElementVNode("p", { class: "field-setting__header" }, [
+              createElementVNode("span", null, "已选字段")
+            ], -1)),
+            createElementVNode("div", _hoisted_9, [
+              createElementVNode("div", _hoisted_10, [
+                createVNode(_component_draggable, {
+                  list: $data.settingFieldList,
+                  class: "list-group",
+                  "ghost-class": "ghost"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(TransitionGroup, {
+                      type: "transition",
+                      name: "flip-list",
+                      class: "setting-fields__select--list"
+                    }, {
+                      default: withCtx(() => [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList($data.settingFieldList, (field, index) => {
+                          return openBlock(), createElementBlock("li", {
+                            class: normalizeClass(["setting-fields__select--item"]),
+                            key: field.attriName || field
+                          }, [
+                            _cache[10] || (_cache[10] = createElementVNode("i", { class: "el-icon-document" }, null, -1)),
+                            createVNode(_component_el_tooltip, {
+                              content: $options.getFieldPath(field),
+                              placement: "top"
+                            }, {
+                              default: withCtx(() => [
+                                createElementVNode("span", null, toDisplayString($options.fieldLabel(field)), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["content"]),
+                            createElementVNode("i", {
+                              class: "el-icon-delete fr",
+                              onClick: withModifiers(($event) => $options.deleteSettingField(index), ["stop"])
+                            }, null, 8, _hoisted_11)
+                          ]);
+                        }), 128))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["list"])
+              ])
+            ])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_12, [
+          createVNode(_component_el_button, {
+            size: "default",
+            onClick: _cache[3] || (_cache[3] = ($event) => $data.showFieldDialog = false)
+          }, {
+            default: withCtx(() => [..._cache[12] || (_cache[12] = [
+              createTextVNode("取消", -1)
+            ])]),
+            _: 1
+          }),
+          createVNode(_component_el_button, {
+            size: "default",
+            type: "primary",
+            onClick: $options.saveSelectField
+          }, {
+            default: withCtx(() => [..._cache[13] || (_cache[13] = [
+              createTextVNode("保存", -1)
+            ])]),
+            _: 1
+          }, 8, ["onClick"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"])
+  ]);
+}
+const VisualConfigOrderField = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-bb077da2"]]);
+export {
+  VisualConfigOrderField as default
+};

package/dist/src/visual/config/Page.js

@@ -0,0 +1,76 @@
+import '../../../style.css';
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createTextVNode, withDirectives, vShow } from "vue";
+/* empty css         */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-visual-config-item-page",
+  props: {
+    value: String,
+    defaultValue: String,
+    change: Function
+  },
+  data() {
+    return {
+      pageWay: ""
+    };
+  },
+  methods: {
+    changeValue(v) {
+      if (v !== this.defaultValue) {
+        this.$emit("change-configs", v === this.defaultValue ? null : v);
+        if (this.change) this.change(v);
+      }
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_radio = resolveComponent("el-radio");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  const _component_epx_object = resolveComponent("epx-object");
+  return openBlock(), createElementBlock("div", null, [
+    createVNode(_component_el_radio_group, {
+      modelValue: $data.pageWay,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.pageWay = $event)
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_el_radio, {
+          label: "component",
+          value: "component"
+        }, {
+          default: withCtx(() => [..._cache[3] || (_cache[3] = [
+            createTextVNode("指定页面模板", -1)
+          ])]),
+          _: 1
+        }),
+        createVNode(_component_el_radio, {
+          label: "page",
+          value: "page"
+        }, {
+          default: withCtx(() => [..._cache[4] || (_cache[4] = [
+            createTextVNode("指定页面", -1)
+          ])]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue"]),
+    withDirectives(createVNode(_component_epx_object, {
+      modelValue: _ctx.selectOperate.component,
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.selectOperate.component = $event),
+      fieldConfigs: { state: "ADD", attriLabel: "页面模板", codeKey: "FM_PAGE", scopeParams: [{ lb: "(", field: "SYSTEM", values: this.SYSTEM, link: "or" }, { field: "LEVEL", values: "01", rb: ")" }] }
+    }, null, 8, ["modelValue", "fieldConfigs"]), [
+      [vShow, $data.pageWay === "component"]
+    ]),
+    withDirectives(createVNode(_component_epx_object, {
+      modelValue: _ctx.selectOperate.pageId,
+      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.selectOperate.pageId = $event),
+      fieldConfigs: { state: "ADD", attriLabel: "页面", codeKey: "FM_PAGE_CONFIG", scopeParams: [{ field: "SYSTEM", values: this.SYSTEM }] }
+    }, null, 8, ["modelValue", "fieldConfigs"]), [
+      [vShow, $data.pageWay === "page"]
+    ])
+  ]);
+}
+const Page = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2460c3db"]]);
+export {
+  Page as default
+};