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

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

@@ -0,0 +1,519 @@
+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, createTextVNode, toDisplayString, withModifiers, createCommentVNode, normalizeStyle, createBlock, normalizeClass } from "vue";
+/* empty css          */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-visual-config-field",
+  components: {
+    draggable
+  },
+  props: {
+    showSubFlag: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: [Array, String]
+    },
+    defaultValue: {
+      type: [Array, String]
+    },
+    treeFieldStore: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    metaId: String,
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    limit: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    defaultShowSubField: Boolean
+  },
+  data() {
+    return {
+      fieldList: [],
+      settingFieldList: [],
+      selectFieldList: [],
+      settingFieldWay: "default",
+      showFieldDialog: false,
+      filterText: "",
+      treeProps: {
+        children: "children",
+        label: "text",
+        disabled: "isSub"
+      },
+      showLogField: false,
+      showSubField: this.defaultShowSubField !== false
+    };
+  },
+  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", this.multiple ? v : v[0]);
+        this.$emit("input", this.multiple ? v : v[0]);
+      }
+    },
+    value(v) {
+      if (!this.$_.isEqual(v, this.fieldList)) {
+        this.fieldList = v ? typeof v === "string" ? [v] : v : [];
+      }
+    },
+    settingFieldWay(v) {
+      if (v === "custom") {
+        this.$emit("change-configs", this.multiple ? this.fieldList : this.fieldList[0]);
+        this.$emit("input", this.multiple ? this.fieldList : this.fieldList[0]);
+      } else {
+        this.$emit("change-configs", null);
+        this.$emit("input", null);
+      }
+    },
+    metaId: {
+      handler(v) {
+        this.getFieldStore();
+      },
+      immediate: true
+    }
+  },
+  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 { dataType } = this.limit;
+      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);
+          }
+          if (dataType && !dataType.includes(item.dataType) && (!item.children || item.children.length === 0)) {
+            return false;
+          }
+          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_VIEW_FIELDS",
+          metaId: 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);
+      }
+    },
+    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() {
+      if (!this.multiple && this.settingFieldList.length > 1) {
+        this.$message.error("只允许设置一个字段");
+        return;
+      }
+      this.fieldList = this.settingFieldList.map((item) => item.replace(".", "|"));
+      this.showFieldDialog = false;
+    },
+    swicthFieldStoreFold(index) {
+      const item = this.fieldStore[index];
+      this.fieldStore[index] = { ...item, isUnFold: !item.isUnFold };
+    },
+    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 === 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);
+        }
+      }
+    }
+  },
+  created() {
+    if (this.value) {
+      this.fieldList = this.multiple ? [...this.value] : [this.value];
+      this.settingFieldWay = "custom";
+    } else if (this.defaultValue) {
+      this.fieldList = this.multiple ? [...this.defaultValue] : [this.defaultValue];
+    } else {
+      this.fieldList = [];
+    }
+  }
+};
+const _hoisted_1 = { class: "field" };
+const _hoisted_2 = {
+  key: 0,
+  class: "select-field-item list-group-item"
+};
+const _hoisted_3 = { class: "field-order" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { class: "field-setting" };
+const _hoisted_6 = { class: "field-setting-item" };
+const _hoisted_7 = { class: "field-setting__content" };
+const _hoisted_8 = { class: "set-show-field" };
+const _hoisted_9 = { class: "field-setting-item" };
+const _hoisted_10 = { class: "field-setting__content" };
+const _hoisted_11 = { class: "setting-fields__select" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = { 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(Fragment, {
+                key: field.attriName || field
+              }, [
+                field ? (openBlock(), createElementBlock("li", _hoisted_2, [
+                  createElementVNode("span", _hoisted_3, [
+                    createTextVNode(toDisplayString($options.fieldLabel(field)) + " ", 1),
+                    createElementVNode("i", {
+                      class: "el-icon-close",
+                      onClick: withModifiers(($event) => $options.deleteField(index), ["stop"])
+                    }, null, 8, _hoisted_4)
+                  ])
+                ])) : createCommentVNode("", true)
+              ], 64);
+            }), 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: "添加字段",
+      modelValue: $data.showFieldDialog,
+      "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $data.showFieldDialog = $event),
+      "append-to-body": true,
+      class: "show-field-dialog",
+      "destroy-on-close": "",
+      width: "800px",
+      top: "10vh"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_6, [
+            _cache[9] || (_cache[9] = createElementVNode("p", { class: "field-setting__header" }, [
+              createElementVNode("span", null, "选择字段")
+            ], -1)),
+            createElementVNode("div", _hoisted_7, [
+              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_8, [
+                _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_9, [
+            _cache[11] || (_cache[11] = createElementVNode("p", { class: "field-setting__header" }, [
+              createElementVNode("span", null, "已选字段")
+            ], -1)),
+            createElementVNode("div", _hoisted_10, [
+              createElementVNode("div", _hoisted_11, [
+                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_12)
+                          ]);
+                        }), 128))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["list"])
+              ])
+            ])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_13, [
+          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 VisualConfigField = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e8362f84"]]);
+export {
+  VisualConfigField as default
+};