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

package/dist/src/page-designer/previews/entity-list/Preview.js

@@ -0,0 +1,522 @@
+import '../../../../style.css';
+import __cjsReq0 from "../../../assets/images/default-icon.png.js";
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, Fragment, renderList, createBlock, withCtx, normalizeClass, createCommentVNode, createTextVNode, toDisplayString, normalizeStyle, mergeProps } from "vue";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-entity-list--preview",
+  mixins: [previewMixin],
+  computed: {
+    currentMetaId() {
+      const { metaId = this.designer.page.metaId } = this.$configs;
+      return metaId;
+    },
+    operateFlag() {
+      const { operateFlag = true } = this.$configs;
+      return operateFlag;
+    },
+    searchFlag() {
+      const { searchFlag = true } = this.$configs;
+      return searchFlag;
+    },
+    totalFlag() {
+      const { totalFlag = true } = this.$configs;
+      return totalFlag;
+    },
+    searchMode() {
+      const { searchMode = "keyword" } = this.$configs;
+      return searchMode;
+    },
+    pageFlag() {
+      const { pageFlag = true } = this.$configs;
+      return pageFlag;
+    },
+    pageSize() {
+      const { pageSize = 20 } = this.$configs;
+      return pageSize;
+    },
+    buttonUi() {
+      return (ui) => ui === "blue" || ui === "soft-blue" ? "primary" : ui;
+    },
+    checkRightOperates() {
+      let { operates } = this.$configs;
+      if (!operates) {
+        operates = [
+          {
+            text: this.$t("add"),
+            ui: "primary"
+          },
+          {
+            text: this.$t("delete")
+          },
+          {
+            text: this.$t("import")
+          },
+          {
+            text: this.$t("export")
+          }
+        ];
+      }
+      return operates;
+    },
+    operates() {
+      let { operateEllipsis } = this.$configs;
+      if (operateEllipsis == null) operateEllipsis = 2;
+      let showOperateLength = 0;
+      if (operateEllipsis === false) return this.checkRightOperates;
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis;
+      }
+      const cOperates = [...this.checkRightOperates];
+      if (cOperates.length > showOperateLength) {
+        cOperates.length = showOperateLength;
+      }
+      return cOperates;
+    },
+    moreOperates() {
+      let { operateEllipsis } = this.$configs;
+      if (operateEllipsis == null) operateEllipsis = 2;
+      let showOperateLength = 0;
+      if (operateEllipsis === false) return [];
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis;
+      }
+      const cOperates = [...this.checkRightOperates];
+      if (cOperates.length > showOperateLength) {
+        cOperates.splice(0, showOperateLength);
+        return cOperates;
+      }
+      return [];
+    },
+    icon() {
+      const { "mobile-iconField": iconField = [] } = this.$configs;
+      return iconField[0];
+    },
+    columnOperates() {
+      const {
+        columnOperates = [
+          {
+            text: this.$t("MultiSelect"),
+            handler: "multiSelect"
+          },
+          { text: this.$t("edit") }
+        ]
+      } = this.$configs;
+      const terminal = this.$isMobile ? "mobile" : "pc";
+      return columnOperates.filter((item) => !item.terminal || item.terminal === "all" || item.terminal === terminal);
+    },
+    foldColumnOperates() {
+      const { "mobile-operateColumnEllipsis": operateColumnEllipsis = true } = this.$configs;
+      let showOperatesLength = 0;
+      if (operateColumnEllipsis === false) return [];
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis;
+      }
+      if (this.columnOperates.length > showOperatesLength) {
+        const foldButtons = [...this.columnOperates];
+        if (showOperatesLength !== 0) foldButtons.splice(0, showOperatesLength);
+        return foldButtons;
+      } else {
+        return [];
+      }
+    },
+    unfoldColumnOperates() {
+      const { "mobile-operateColumnEllipsis": operateColumnEllipsis = true } = this.$configs;
+      let showOperatesLength = 0;
+      if (operateColumnEllipsis === false) return this.columnOperates;
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis;
+      }
+      const unfoldButtons = [...this.columnOperates];
+      if (showOperatesLength === 0) return [];
+      if (unfoldButtons.length > showOperatesLength) unfoldButtons.length = showOperatesLength;
+      return unfoldButtons;
+    }
+  },
+  data() {
+    return {
+      loadSearch: true,
+      tableData: [],
+      listFields: [],
+      rows: []
+    };
+  },
+  watch: {
+    "$configs.keywords"(v) {
+      this.loadSearch = false;
+      this.$nextTick(() => {
+        this.loadSearch = true;
+      });
+    },
+    "$configs.searchFields"(v) {
+      this.loadSearch = false;
+      this.$nextTick(() => {
+        this.loadSearch = true;
+      });
+    },
+    "$configs.filterFields"(v) {
+      this.loadSearch = false;
+      this.$nextTick(() => {
+        this.loadSearch = true;
+      });
+    },
+    "$configs.listFields": {
+      handler(v) {
+        this.getFields();
+      },
+      immediate: true
+    },
+    "$configs.rowFields": {
+      handler(v) {
+        this.getFields();
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    formatter(row, column) {
+      return row.address;
+    },
+    getFields() {
+      let { listFields, rowFields } = this.$configs;
+      this.$FieldFactory.createFields({
+        fields: listFields,
+        metaId: this.currentMetaId
+      }).then((data) => {
+        this.listFields = [...data];
+      });
+      if (!rowFields) {
+        const label = this.$meta && typeof this.$meta.getLabel === "function" ? this.$meta.getLabel() : "";
+        rowFields = label ? [[label]] : [];
+      }
+      const fields = [].concat(...rowFields);
+      this.$FieldFactory.createFields({
+        fields,
+        metaId: this.currentMetaId
+      }).then((data) => {
+        this.rows = rowFields.map((row) => {
+          return row.map((field) => {
+            const item = data.find((item2) => item2.attriName === (field.attriName || field));
+            if (item) return item;
+            else return field;
+          });
+        });
+      });
+    }
+  }
+};
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { class: "m-list" };
+const _hoisted_3 = { class: "epx-entity-mobile-list__search" };
+const _hoisted_4 = { class: "epx-entity-mobile-list__search-bar" };
+const _hoisted_5 = {
+  key: 0,
+  class: "epx-entity-mobile-list__item-operates"
+};
+const _hoisted_6 = { class: "epx-entity-mobile-list__list" };
+const _hoisted_7 = { class: "epx-entity-mobile-list__item" };
+const _hoisted_8 = { class: "epx-entity-mobile-list__item-content" };
+const _hoisted_9 = {
+  key: 0,
+  class: "epx-entity-mobile-list__item-icon"
+};
+const _hoisted_10 = ["src"];
+const _hoisted_11 = { class: "epx-entity-mobile-list__item-field" };
+const _hoisted_12 = { key: 0 };
+const _hoisted_13 = { key: 0 };
+const _hoisted_14 = {
+  key: 1,
+  class: "epx-entity-mobile-list__field-tag"
+};
+const _hoisted_15 = {
+  key: 0,
+  class: "epx-entity-mobile-list__item-extra"
+};
+const _hoisted_16 = { class: "list-operates" };
+const _hoisted_17 = {
+  key: 0,
+  class: "button-group"
+};
+const _hoisted_18 = {
+  key: 0,
+  class: "search-simple fr"
+};
+const _hoisted_19 = { key: 1 };
+const _hoisted_20 = { class: "list" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_m_search = resolveComponent("epx-m-search");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+  const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+  const _component_el_dropdown = resolveComponent("el-dropdown");
+  const _component_epx_search_fields = resolveComponent("epx-search-fields");
+  const _component_epx_search_filter = resolveComponent("epx-search-filter");
+  const _component_epx_search_keyword = resolveComponent("epx-search-keyword");
+  const _component_el_table_column = resolveComponent("el-table-column");
+  const _component_el_table = resolveComponent("el-table");
+  const _component_el_pagination = resolveComponent("el-pagination");
+  return _ctx.$isMobile ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createElementVNode("div", _hoisted_3, [
+        createVNode(_component_epx_m_search, {
+          class: "epx-entity-mobile-list__keyword",
+          metaId: _ctx.$metaId,
+          keywords: _ctx.$configs.keywords
+        }, null, 8, ["metaId", "keywords"]),
+        createElementVNode("div", _hoisted_4, [
+          $options.operateFlag && $options.checkRightOperates.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList($options.operates, (operate) => {
+              return openBlock(), createBlock(_component_el_button, {
+                class: "epx-entity-mobile-list__operate",
+                key: operate.text,
+                type: "primary",
+                link: "",
+                size: "small"
+              }, {
+                default: withCtx(() => [
+                  operate.iconCls ? (openBlock(), createElementBlock("i", {
+                    key: 0,
+                    class: normalizeClass(operate.iconCls)
+                  }, null, 2)) : createCommentVNode("", true),
+                  createTextVNode(" " + toDisplayString(operate.text), 1)
+                ]),
+                _: 2
+              }, 1024);
+            }), 128)),
+            this.moreOperates.length > 0 ? (openBlock(), createBlock(_component_el_dropdown, {
+              key: 0,
+              class: "epx-entity-mobile-list__operate-dropdown",
+              trigger: "click"
+            }, {
+              dropdown: withCtx(() => [
+                createVNode(_component_el_dropdown_menu, null, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList($options.moreOperates, (operate) => {
+                      return openBlock(), createBlock(_component_el_dropdown_item, {
+                        key: operate.text,
+                        icon: operate.iconCls
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(operate.text), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["icon"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                })
+              ]),
+              default: withCtx(() => [
+                _cache[0] || (_cache[0] = createElementVNode("span", { class: "epx-entity-mobile-list__dropdown-link" }, [
+                  createElementVNode("i", { class: "epx-icon-menu" })
+                ], -1))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          _cache[1] || (_cache[1] = createElementVNode("div", null, [
+            createElementVNode("span", { class: "epx-entity-mobile-list__search-record" }, "共 1 条")
+          ], -1))
+        ])
+      ]),
+      createElementVNode("ul", _hoisted_6, [
+        createElementVNode("li", _hoisted_7, [
+          createElementVNode("div", _hoisted_8, [
+            $options.icon ? (openBlock(), createElementBlock("p", _hoisted_9, [
+              createElementVNode("img", {
+                src: __cjsReq0
+              }, null, 8, _hoisted_10)
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_11, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList($data.rows, (rowItem) => {
+                return openBlock(), createElementBlock("p", {
+                  key: rowItem.map((item) => item.attriName).join("")
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(rowItem, (field, index) => {
+                    return openBlock(), createElementBlock(Fragment, { key: index }, [
+                      field.state !== "HIDDEN" ? (openBlock(), createElementBlock("span", _hoisted_12, [
+                        field.showLabel ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(field.attriLabel) + "：", 1)) : createCommentVNode("", true),
+                        field.style === "tag" ? (openBlock(), createElementBlock("span", _hoisted_14, [
+                          createElementVNode("font", {
+                            style: normalizeStyle({ color: field.color, fontWeight: field.fontWeight, fontSize: field.fontSize + "px" })
+                          }, toDisplayString(field.attriLabel), 5)
+                        ])) : (openBlock(), createElementBlock("font", {
+                          key: 2,
+                          style: normalizeStyle({ color: field.color, fontWeight: field.fontWeight, fontSize: field.fontSize + "px" })
+                        }, toDisplayString(field.attriLabel), 5)),
+                        index !== rowItem.length - 1 ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                          createTextVNode(toDisplayString(field.split || " | "), 1)
+                        ], 64)) : createCommentVNode("", true)
+                      ])) : createCommentVNode("", true)
+                    ], 64);
+                  }), 128))
+                ]);
+              }), 128))
+            ])
+          ]),
+          (_ctx.$_.isNil(_ctx.$configs.operateColumnFlag) ? true : _ctx.$configs.operateColumnFlag) ? (openBlock(), createElementBlock("div", _hoisted_15, [
+            $options.unfoldColumnOperates.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList($options.unfoldColumnOperates, (operate) => {
+              return openBlock(), createBlock(_component_el_button, {
+                class: "epx-entity-mobile-list__column-operate",
+                key: operate.text,
+                type: "primary",
+                link: "",
+                size: "small"
+              }, {
+                default: withCtx(() => [
+                  operate.iconCls ? (openBlock(), createElementBlock("i", {
+                    key: 0,
+                    class: normalizeClass(operate.iconCls)
+                  }, null, 2)) : createCommentVNode("", true),
+                  createTextVNode(" " + toDisplayString(operate.text), 1)
+                ]),
+                _: 2
+              }, 1024);
+            }), 128)) : createCommentVNode("", true),
+            $options.foldColumnOperates.length > 0 ? (openBlock(), createBlock(_component_el_dropdown, {
+              key: 1,
+              class: "epx-entity-mobile-list__column-dropdown"
+            }, {
+              dropdown: withCtx(() => [
+                createVNode(_component_el_dropdown_menu, null, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList($options.foldColumnOperates, (operate) => {
+                      return openBlock(), createBlock(_component_el_dropdown_item, {
+                        key: operate.text,
+                        icon: operate.iconCls
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(operate.text), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["icon"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                })
+              ]),
+              default: withCtx(() => [
+                _cache[2] || (_cache[2] = createElementVNode("span", { class: "epx-entity-mobile-list__dropdown-link" }, [
+                  createElementVNode("i", { class: "el-icon-more" })
+                ], -1))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ])
+      ])
+    ])
+  ])) : (openBlock(), createElementBlock("div", {
+    key: 1,
+    style: normalizeStyle(_ctx.style)
+  }, [
+    $data.loadSearch && _ctx.$configs.searchFlag ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+      $options.searchMode === "field" ? (openBlock(), createBlock(_component_epx_search_fields, {
+        key: 0,
+        fields: _ctx.$configs.searchFields,
+        filterFields: _ctx.$configs.filterFields,
+        keywords: _ctx.$configs.keywords
+      }, null, 8, ["fields", "filterFields", "keywords"])) : createCommentVNode("", true),
+      $options.searchMode === "filter" ? (openBlock(), createBlock(_component_epx_search_filter, {
+        key: 1,
+        fields: _ctx.$configs.searchFields,
+        filterFields: _ctx.$configs.filterFields,
+        keywords: _ctx.$configs.keywords
+      }, null, 8, ["fields", "filterFields", "keywords"])) : createCommentVNode("", true)
+    ], 64)) : createCommentVNode("", true),
+    createElementVNode("div", _hoisted_16, [
+      createElementVNode("div", null, [
+        $options.operateFlag && $options.checkRightOperates.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_17, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($options.operates, (operate) => {
+            return openBlock(), createBlock(_component_el_button, mergeProps({ ref_for: true }, { [operate.type]: true }, {
+              key: operate.text,
+              size: "default",
+              type: operate.type === "text" ? "text" : operate.ui
+            }), {
+              default: withCtx(() => [
+                operate.icon ? (openBlock(), createElementBlock("i", {
+                  key: 0,
+                  class: normalizeClass(["operate-icon", operate.icon])
+                }, null, 2)) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(operate.text), 1)
+              ]),
+              _: 2
+            }, 1040, ["type"]);
+          }), 128)),
+          $options.moreOperates.length > 0 ? (openBlock(), createBlock(_component_el_dropdown, {
+            key: 0,
+            class: "more-table-operates",
+            trigger: "click"
+          }, {
+            dropdown: withCtx(() => [
+              createVNode(_component_el_dropdown_menu, null, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList($options.moreOperates, (operate) => {
+                    return openBlock(), createBlock(_component_el_dropdown_item, {
+                      key: operate.text
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(operate.text), 1)
+                      ]),
+                      _: 2
+                    }, 1024);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            default: withCtx(() => [
+              createVNode(_component_el_button, { size: "default" }, {
+                default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                  createElementVNode("i", { class: "el-icon-more" }, null, -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ]),
+      $options.searchFlag && (!$options.searchMode || $options.searchMode === "keyword") ? (openBlock(), createElementBlock("div", _hoisted_18, [
+        createVNode(_component_epx_search_keyword, {
+          keywords: _ctx.$configs.keywords
+        }, null, 8, ["keywords"])
+      ])) : $options.totalFlag ? (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString(this.$t("A total of 0 pieces of data")), 1)) : createCommentVNode("", true)
+    ]),
+    createElementVNode("div", _hoisted_20, [
+      createVNode(_component_el_table, {
+        data: $data.tableData,
+        style: { "width": "100%" }
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($data.listFields, (item) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: item.attriName
+            }, [
+              item.state !== "HIDDEN" ? (openBlock(), createBlock(_component_el_table_column, {
+                key: 0,
+                prop: item.attriName,
+                label: item.attriLabel
+              }, null, 8, ["prop", "label"])) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["data"]),
+      $options.pageFlag ? (openBlock(), createBlock(_component_el_pagination, {
+        key: 0,
+        class: "pagination",
+        "default-current-page": 1,
+        pageSizes: [5, 10, 15, 20, 30, 50, 100, 200],
+        "default-page-size": $options.pageSize,
+        layout: "prev, pager, next, jumper, sizes,total",
+        total: 0
+      }, null, 8, ["default-page-size"])) : createCommentVNode("", true)
+    ])
+  ], 4));
+}
+const EntityListPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-52803cfa"]]);
+export {
+  EntityListPreview as default
+};